-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13 from kongying-tavern/refactor/new-ui
New UI
- Loading branch information
Showing
82 changed files
with
1,175 additions
and
579 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,14 @@ | ||
| <script setup lang="ts"> | ||
| import { useDark } from "@vueuse/core"; | ||
| useDark({ | ||
| selector: "body", | ||
| attribute: "data-theme", | ||
| valueDark: "dark", | ||
| valueLight: "light", | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <RouterView /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,47 @@ | ||
| @use 'sass:math'; | ||
| @use '@/assets/vars/color.scss' as *; | ||
| @use "sass:math"; | ||
| @use "@/assets/vars/color.scss" as *; | ||
| @use "./theme.scss"; | ||
|
|
||
| $scrollbar-width: 0.4rem; | ||
| $scrollbar-radius: math.div($scrollbar-width, 2); | ||
| $scrollbar-color-track: $color-gray-4; | ||
| $scrollbar-color-thumb: $color-gray-3; | ||
| $scrollbar-colors-light: ( | ||
| "scrollbar-track-color": $color-gray-4, | ||
| "scrollbar-thumb-color": $color-gray-3, | ||
| ); | ||
| $scrollbar-colors-dark: ( | ||
| "scrollbar-track-color": $color-gray-4, | ||
| "scrollbar-thumb-color": $color-gray-3, | ||
| ); | ||
| $scrollbar-colors: ( | ||
| light: $scrollbar-colors-light, | ||
| dark: $scrollbar-colors-dark, | ||
| ); | ||
|
|
||
| @mixin scrollbar { | ||
| .scrollbar, | ||
| .scrollbar :deep(*) { | ||
| &::-webkit-scrollbar { | ||
| border-radius: $scrollbar-radius; | ||
| background-color: $scrollbar-color-track; | ||
| } | ||
| @include theme.themeify($scrollbar-colors) { | ||
| .scrollbar, | ||
| .scrollbar :deep(*) { | ||
| &::-webkit-scrollbar { | ||
| border-radius: $scrollbar-radius; | ||
| background-color: theme.t("scrollbar-track-color"); | ||
| } | ||
|
|
||
| &::-webkit-scrollbar:horizontal { | ||
| height: $scrollbar-width; | ||
| } | ||
| &::-webkit-scrollbar:horizontal { | ||
| height: $scrollbar-width; | ||
| } | ||
|
|
||
| &::-webkit-scrollbar:vertical { | ||
| width: $scrollbar-width; | ||
| } | ||
| &::-webkit-scrollbar:vertical { | ||
| width: $scrollbar-width; | ||
| } | ||
|
|
||
| &::-webkit-scrollbar-button { | ||
| display: none; | ||
| } | ||
| &::-webkit-scrollbar-button { | ||
| display: none; | ||
| } | ||
|
|
||
| &::-webkit-scrollbar-thumb { | ||
| border-radius: $scrollbar-radius; | ||
| background-color: $scrollbar-color-thumb; | ||
| &::-webkit-scrollbar-thumb { | ||
| border-radius: $scrollbar-radius; | ||
| background-color: theme.t("scrollbar-thumb-color"); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,21 @@ | ||
| @use "@/assets/vars/color.scss" as *; | ||
| @use "./theme.scss"; | ||
|
|
||
| $shadow-colors-light: ( | ||
| shadow-color: rgb(0 0 0 / 10%), | ||
| ); | ||
| $shadow-colors-dark: ( | ||
| shadow-color: rgb(0 0 0 / 10%), | ||
| ); | ||
| $shadow-colors: ( | ||
| light: $shadow-colors-light, | ||
| dark: $shadow-colors-dark, | ||
| ); | ||
|
|
||
| @mixin box-shadow { | ||
| .box-shadow { | ||
| box-shadow: 0.3rem 0.3rem 0.36rem 0.04rem rgb(0 0 0 / 10%); | ||
| @include theme.themeify($shadow-colors) { | ||
| .box-shadow { | ||
| box-shadow: 0.3rem 0.3rem 0.36rem 0.04rem theme.t("shadow-color"); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @mixin themeify($themes) { | ||
| @each $theme-name, $theme-map in $themes { | ||
| $theme-map: $theme-map !global; | ||
|
|
||
| body[data-theme="#{$theme-name}"] { | ||
| @content; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @function t($key) { | ||
| @return map-get($theme-map, $key); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { get } from "lodash"; | ||
| import { useGlobalSettings } from "@/hooks"; | ||
|
|
||
| const { globalSettings } = useGlobalSettings(); | ||
|
|
||
| type ThemeColorExportMap = { [key: string]: string }; | ||
|
|
||
| export const getThemeColor = ( | ||
| colorMap: ThemeColorExportMap, | ||
| colorKey: string, | ||
| ) => { | ||
| const themeColorKey = `${globalSettings.value.theme || ""}--${colorKey}`; | ||
| const themeColorVal: string = get(colorMap, themeColorKey); | ||
| return themeColorVal; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,11 @@ | ||
| $color-bg: #e6ecf2; | ||
| $color-white: #fff; | ||
| $color-primary-1: #66b3ff; | ||
| $color-primary-2: #39f; | ||
| $color-white-1: #fff; | ||
| $color-blue-1: #e6ecf2; | ||
| $color-blue-2: #66b3ff; | ||
| $color-blue-3: #39f; | ||
| $color-gray-1: #737980; | ||
| $color-gray-2: #808080; | ||
| $color-gray-3: #b3b3b3; | ||
| $color-gray-4: #f2f2f2; | ||
| $color-gray-5: #666; | ||
| $color-gray-6: #ccc; | ||
| $color-gray-7: #999; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <script setup lang="ts"> | ||
| type ButtonSize = "large" | "medium" | "small"; | ||
| type ButtonType = "default" | "primary"; | ||
| interface Props { | ||
| clickable?: boolean; | ||
| size?: ButtonSize; | ||
| type?: ButtonType; | ||
| } | ||
| const emits = defineEmits<{ | ||
| (e: "click"): void; | ||
| }>(); | ||
| const props = withDefaults(defineProps<Props>(), { | ||
| clickable: true, | ||
| size: "medium", | ||
| type: "default", | ||
| }); | ||
| const onClick = () => { | ||
| if (props.clickable) { | ||
| emits("click"); | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <div | ||
| class="btn-wrapper box-shadow" | ||
| :class="{ | ||
| 'cursor-pointer': clickable, | ||
| [`size-${props.size}`]: true, | ||
| [`type-${props.type}`]: true, | ||
| }" | ||
| @click="onClick()" | ||
| > | ||
| <slot></slot> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped lang="scss"> | ||
| @use "@/assets/effects/theme.scss"; | ||
| @use "./dim.scss" as *; | ||
| @use "./color.scss" as *; | ||
| @use "@/assets/effects/shadow.scss"; | ||
| @include shadow.box-shadow; | ||
| $btn-size-names: ("small", "medium", "large"); | ||
| $btn-type-names: ("default", "primary"); | ||
| @include theme.themeify($btn-colors) { | ||
| .btn-wrapper { | ||
| display: inline-block; | ||
| font-size: $btn-font-size; | ||
| line-height: $btn-line-height; | ||
| text-align: center; | ||
| border-radius: $btn-corner-radius; | ||
| // Size Variants | ||
| @each $size-name in $btn-size-names { | ||
| &.size-#{$size-name} { | ||
| padding: map-get($btn-padding, $size-name); | ||
| } | ||
| } | ||
| // Color Variants | ||
| @each $type-name in $btn-type-names { | ||
| &.type-#{$type-name} { | ||
| background-color: theme.t("btn-#{$type-name}-fill-color"); | ||
| color: theme.t("btn-#{$type-name}-text-color"); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.