diff --git a/dashboard/src/components/shared/ConsoleDisplayer.vue b/dashboard/src/components/shared/ConsoleDisplayer.vue index cf4be65cfd..1153316dff 100644 --- a/dashboard/src/components/shared/ConsoleDisplayer.vue +++ b/dashboard/src/components/shared/ConsoleDisplayer.vue @@ -334,10 +334,22 @@ export default { :deep(.console-log-line) { display: block; - margin-bottom: 2px; + margin: 0; + padding: 2px 0; font-family: SFMono-Regular, Menlo, Monaco, Consolas, var(--astrbot-font-cjk-mono), monospace; font-size: 12px; white-space: pre-wrap; + line-height: 1.4; +} + +#term { + pre { + margin: 0 !important; + padding: 2px 0 !important; + display: block; + line-height: 1.4 !important; + font-size: 12px; + } } :deep(.fade-in) { diff --git a/dashboard/src/i18n/locales/en-US/features/settings.json b/dashboard/src/i18n/locales/en-US/features/settings.json index b497659ee4..5f84724016 100644 --- a/dashboard/src/i18n/locales/en-US/features/settings.json +++ b/dashboard/src/i18n/locales/en-US/features/settings.json @@ -23,6 +23,19 @@ "title": "Theme Colors", "primary": "Primary Color", "secondary": "Secondary Color", + "info": "Info Color", + "presets": "Presets", + "presetNames": { + "Indigo": "Indigo", + "Violet": "Violet", + "Rose": "Rose", + "Pink": "Pink", + "Orange": "Orange", + "Emerald": "Emerald", + "Sky": "Sky", + "Slate": "Slate", + "Zinc": "Zinc" + }, "reset": "Reset to Default" } }, diff --git a/dashboard/src/i18n/locales/zh-CN/features/settings.json b/dashboard/src/i18n/locales/zh-CN/features/settings.json index 092b4a5d9b..7fb1458566 100644 --- a/dashboard/src/i18n/locales/zh-CN/features/settings.json +++ b/dashboard/src/i18n/locales/zh-CN/features/settings.json @@ -23,6 +23,19 @@ "title": "主题颜色", "primary": "主色", "secondary": "辅助色", + "info": "信息色", + "presets": "预设", + "presetNames": { + "Indigo": "靛蓝", + "Violet": "紫罗兰", + "Rose": "玫瑰", + "Pink": "粉色", + "Orange": "橙色", + "Emerald": "翡翠", + "Sky": "天蓝", + "Slate": "板岩", + "Zinc": "锌灰" + }, "reset": "恢复默认" } }, diff --git a/dashboard/src/scss/_override.scss b/dashboard/src/scss/_override.scss index 2372d21c2d..503a87d979 100644 --- a/dashboard/src/scss/_override.scss +++ b/dashboard/src/scss/_override.scss @@ -4,24 +4,19 @@ html { } } -.v-row + .v-row { +.v-row+.v-row { margin-top: 0px; } .v-divider { opacity: 1; - border-color: rgba(var(--v-theme-borderLight), 0.36); + border-color: rgba(var(--v-theme-borderLight), 0.5); } .v-selection-control { flex: unset; } -.v-overlay.v-snackbar { - --v-layout-left: 0px !important; - --v-layout-right: 0px !important; -} - .customizer-btn .icon { animation: progress-circular-rotate 1.4s linear infinite; transform-origin: center center; @@ -40,40 +35,317 @@ html { } } -pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes code { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Helvetica Neue", monospace; +pre, +code, +.markdown pre, +.markdown code, +.release-notes pre, +.release-notes code { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", + "Helvetica Neue", monospace; color: var(--astrbot-code-color); } -// Dark mode global overrides +.v-chip { + border-radius: 8px; + font-weight: 500; + + &.v-chip--density-comfortable { + height: 28px; + } + + &.v-chip--density-compact { + height: 24px; + } +} + +.v-tooltip { + .v-overlay__content { + border-radius: 8px; + font-size: 0.8125rem; + padding: 8px 12px; + } +} + +.v-menu { + .v-overlay__content { + border-radius: 12px; + box-shadow: $box-shadow-lg; + } +} + +.v-dialog { + .v-overlay__content { + border-radius: 16px; + + &.dialog-transition-enter-active, + &.dialog-transition-leave-active { + transition: + opacity 0.25s ease, + transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); + } + + &.dialog-transition-enter-from { + opacity: 0; + transform: scale(0.95) translateY(10px); + } + + &.dialog-transition-leave-to { + opacity: 0; + transform: scale(0.98) translateY(-5px); + } + } + + .v-card { + overflow: hidden; + } +} + +.v-snackbar { + .v-snackbar__wrapper { + border-radius: 12px; + box-shadow: $box-shadow-lg; + min-width: auto; + max-width: 400px; + + &.v-snackbar--variant-elevated { + background: rgb(var(--v-theme-surface)); + color: rgb(var(--v-theme-on-surface)); + } + + &.v-snackbar--variant-flat { + border-radius: 12px; + } + + &.v-snackbar--variant-outlined { + border: 1px solid rgba(var(--v-theme-borderLight), 0.5); + } + + .v-snackbar__action { + margin-inline-start: 16px; + + .v-btn { + border-radius: 8px; + font-weight: 500; + } + } + + .v-snackbar__close { + .v-btn { + opacity: 0.6; + + &:hover { + opacity: 1; + } + } + } + } + + .v-snackbar__wrapper.snackbar-transition-enter-active, + .v-snackbar__wrapper.snackbar-transition-leave-active { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .v-snackbar__wrapper.snackbar-transition-enter-from { + opacity: 0; + transform: translateY(20px) scale(0.95); + } + + .v-snackbar__wrapper.snackbar-transition-leave-to { + opacity: 0; + transform: translateY(-10px) scale(0.98); + } +} + +.v-badge { + .v-badge__badge { + border-radius: 6px; + font-size: 0.6875rem; + height: 18px; + min-width: 18px; + } +} + +.v-progress-linear { + border-radius: 4px; + + .v-progress-linear__background { + border-radius: 4px; + } + + .v-progress-linear__determinate { + border-radius: 4px; + transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); + } +} + +.v-progress-circular { + .v-progress-circular__underlay { + stroke: rgba(var(--v-theme-borderLight), 0.3); + } + + .v-progress-circular__overlay { + transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1); + } +} + +.page-fade-enter-active, +.page-fade-leave-active { + transition: + opacity 0.2s ease, + transform 0.2s ease; +} + +.page-fade-enter-from { + opacity: 0; + transform: translateX(10px); +} + +.page-fade-leave-to { + opacity: 0; + transform: translateX(-10px); +} + +.slide-up-enter-active, +.slide-up-leave-active { + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +.slide-up-enter-from, +.slide-up-leave-to { + opacity: 0; + transform: translateY(15px); +} + +.fade-scale-enter-active, +.fade-scale-leave-active { + transition: + opacity 0.2s ease, + transform 0.2s ease; +} + +.fade-scale-enter-from, +.fade-scale-leave-to { + opacity: 0; + transform: scale(0.97); +} + +.v-avatar { + transition: transform 0.2s ease; + + &:hover { + transform: scale(1.05); + } +} + +.v-expansion-panel { + border-radius: 12px !important; + + &::before { + display: none; + } + + .v-expansion-panel-text__wrapper { + padding: 0 24px 20px; + } + + .v-expansion-panel-title { + padding: 14px 24px; + font-weight: 500; + } +} + +.v-alert { + border-radius: 12px; + + .v-alert__prepend { + align-self: flex-start; + padding-top: 2px; + } + + &.v-alert--prominent { + .v-alert__prepend { + padding-top: 8px; + } + } +} + +.v-skeleton-loader { + .v-skeleton-loader__bone { + border-radius: 6px; + } + + .v-skeleton-loader__heading, + .v-skeleton-loader__text { + border-radius: 6px; + } + + .v-skeleton-loader__avatar { + border-radius: 50%; + } +} + .v-theme--PurpleThemeDark { - // Override code text color for dark mode --astrbot-code-color: rgb(var(--v-theme-on-surface-variant)); - // Soften flat primary buttons for dark mode .v-btn--variant-flat.bg-primary { - background-color: rgba(var(--v-theme-primary), 0.85) !important; + background-color: rgba(var(--v-theme-primary), 0.9) !important; } - // Timeline dots: use a muted version .v-timeline-item .v-timeline-divider__dot .v-timeline-divider__inner-dot { - opacity: 0.85; + opacity: 0.9; } - // Use a darker scrim for overlays and dialogs in dark mode. .v-overlay__scrim { - background-color: rgba(var(--v-theme-background), 0.72) !important; - opacity: 1 !important; + background-color: rgba(var(--v-theme-background), 0.65) !important; } - // Ensure dialog/card surfaces use the dark surface color - .v-overlay__content > .v-card { + .v-overlay__content>.v-card { background-color: rgb(var(--v-theme-surface)) !important; } - // Links inside markdown - slightly muted .markdown-content a, .markstream-vue a { color: rgb(var(--v-theme-primary)); } -} + + .v-divider { + border-color: rgba(var(--v-theme-borderLight), 0.3); + } + + .v-chip { + &.v-chip--variant-outlined { + border-color: rgba(var(--v-theme-borderLight), 0.4); + } + } + + .v-progress-circular { + .v-progress-circular__underlay { + stroke: rgba(255, 255, 255, 0.1); + } + } + + .v-snackbar { + .v-snackbar__wrapper { + &.v-snackbar--variant-elevated { + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + } + } + } + + .v-expansion-panel { + background: rgb(var(--v-theme-surface-variant)) !important; + + .v-expansion-panel-title { + &:hover:not(.v-expansion-panel-title--active) { + background: rgba(255, 255, 255, 0.04); + } + } + } + + .v-alert { + &.v-alert--variant-tonal { + background: rgba(var(--v-theme-on-surface), 0.08) !important; + } + } +} \ No newline at end of file diff --git a/dashboard/src/scss/_variables.scss b/dashboard/src/scss/_variables.scss index fbc6ec55a7..5fd52df1fd 100644 --- a/dashboard/src/scss/_variables.scss +++ b/dashboard/src/scss/_variables.scss @@ -1,17 +1,17 @@ -@use 'sass:math'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'vuetify/lib/styles/tools/functions' as *; +@use "sass:math"; +@use "sass:map"; +@use "sass:meta"; +@use "vuetify/lib/styles/tools/functions" as *; -// This will false all colors which is not necessory for theme $color-pack: false; -// Global font size and border radius $font-size-root: 1rem; -$border-radius-root: 8px; -$cjk-sans-fallback: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei' !default; -$cjk-mono-fallback: 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei' !default; -$code-text-color: #111827 !default; +$border-radius-root: 12px; +$cjk-sans-fallback: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", + "Microsoft YaHei" !default; +$cjk-mono-fallback: "PingFang SC", "PingFang TC", "Hiragino Sans GB", + "Noto Sans CJK SC", "Microsoft YaHei" !default; +$code-text-color: #1f2937 !default; :root { --astrbot-font-cjk-sans: #{$cjk-sans-fallback}; @@ -19,116 +19,121 @@ $code-text-color: #111827 !default; --astrbot-code-color: #{$code-text-color}; } -$body-font-family: 'Roboto', $cjk-sans-fallback, sans-serif !default; +$body-font-family: "Inter", "Roboto", $cjk-sans-fallback, sans-serif !default; $heading-font-family: $body-font-family !default; -$btn-font-weight: 400 !default; +$btn-font-weight: 500 !default; $btn-letter-spacing: 0 !default; -// Global Radius as per breakeven point $rounded: () !default; $rounded: map-deep-merge( ( 0: 0, - 'sm': $border-radius-root * 0.5, + "sm": $border-radius-root * 0.5, null: $border-radius-root, - 'md': $border-radius-root * 1, - 'lg': $border-radius-root * 2, - 'xl': $border-radius-root * 6, - 'pill': 9999px, - 'circle': 50%, - 'shaped': $border-radius-root * 6 0 + "md": $border-radius-root * 1, + "lg": $border-radius-root * 1.5, + "xl": $border-radius-root * 2, + "pill": 9999px, + "circle": 50%, + "shaped": $border-radius-root * 6 0, ), $rounded ); -// Global Typography + $typography: () !default; $typography: map-deep-merge( ( - 'h1': ( - 'size': 2.125rem, - 'weight': 700, - 'line-height': 3.5rem, - 'font-family': inherit + "h1": ( + "size": 2rem, + "weight": 700, + "line-height": 2.75rem, + "font-family": inherit, + ), + "h2": ( + "size": 1.5rem, + "weight": 600, + "line-height": 2rem, + "font-family": inherit, ), - 'h2': ( - 'size': 1.5rem, - 'weight': 700, - 'line-height': 2.5rem, - 'font-family': inherit + "h3": ( + "size": 1.25rem, + "weight": 600, + "line-height": 1.75rem, + "font-family": inherit, ), - 'h3': ( - 'size': 1.25rem, - 'weight': 600, - 'line-height': 2rem, - 'font-family': inherit + "h4": ( + "size": 1rem, + "weight": 600, + "line-height": 1.5rem, + "font-family": inherit, ), - 'h4': ( - 'size': 1rem, - 'weight': 600, - 'line-height': 1.5rem, - 'font-family': inherit + "h5": ( + "size": 0.875rem, + "weight": 500, + "line-height": 1.25rem, + "font-family": inherit, ), - 'h5': ( - 'size': 0.875rem, - 'weight': 500, - 'line-height': 1.2rem, - 'font-family': inherit + "h6": ( + "size": 0.75rem, + "weight": 500, + "font-family": inherit, ), - 'h6': ( - 'size': 0.75rem, - 'weight': 500, - 'font-family': inherit + "subtitle-1": ( + "size": 0.875rem, + "weight": 500, + "line-height": 1.25rem, + "font-family": inherit, ), - 'subtitle-1': ( - 'size': 0.875rem, - 'weight': 500, - 'line-height': 1rem, - 'font-family': inherit + "subtitle-2": ( + "size": 0.75rem, + "weight": 500, + "line-height": 1rem, + "font-family": inherit, ), - 'subtitle-2': ( - 'size': 0.75rem, - 'weight': 400, - 'line-height': 1rem, - 'font-family': inherit + "body-1": ( + "size": 0.875rem, + "weight": 400, + "font-family": inherit, ), - 'body-1': ( - 'size': 0.875rem, - 'weight': 400, - 'font-family': inherit + "body-2": ( + "size": 0.75rem, + "weight": 400, + "font-family": inherit, ), - 'body-2': ( - 'size': 0.75rem, - 'weight': 400, - 'font-family': inherit + "button": ( + "size": 0.875rem, + "weight": 500, + "font-family": inherit, + "text-transform": "none", ), - 'button': ( - 'size': 0.875rem, - 'weight': 500, - 'font-family': inherit, - 'text-transform': uppercase + "caption": ( + "size": 0.75rem, + "weight": 400, + "font-family": inherit, ), - 'caption': ( - 'size': 0.75rem, - 'weight': 400, - 'font-family': inherit + "overline": ( + "size": 0.75rem, + "weight": 500, + "font-family": inherit, + "text-transform": uppercase, ), - 'overline': ( - 'size': 0.75rem, - 'weight': 500, - 'font-family': inherit, - 'text-transform': uppercase - ) ), $typography ); -// Custom Variables -// colors $white: #fff !default; -// cards -$card-item-spacer-xy: 20px 24px !default; -$card-text-spacer: 24px !default; -$card-title-size: 18px !default; -// Global Shadow -$box-shadow: 1px 0 20px rgb(0 0 0 / 8%); +$card-item-spacer-xy: 16px 20px !default; +$card-text-spacer: 20px !default; +$card-title-size: 16px !default; + +$box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.08), + 0 1px 2px rgba(0, 0, 0, 0.06); +$box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); +$box-shadow-md: + 0 4px 6px -1px rgba(0, 0, 0, 0.08), + 0 2px 4px -1px rgba(0, 0, 0, 0.04); +$box-shadow-lg: + 0 10px 15px -3px rgba(0, 0, 0, 0.08), + 0 4px 6px -2px rgba(0, 0, 0, 0.04); diff --git a/dashboard/src/scss/components/_CodeBlockDark.scss b/dashboard/src/scss/components/_CodeBlockDark.scss index afc4f7ab7e..444dc7eab7 100644 --- a/dashboard/src/scss/components/_CodeBlockDark.scss +++ b/dashboard/src/scss/components/_CodeBlockDark.scss @@ -16,4 +16,36 @@ --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; } + + pre { + background: rgb(var(--v-theme-preBg)) !important; + border: 1px solid rgba(var(--v-theme-borderLight), 0.3); + border-radius: 10px; + } + + code { + background: rgba(var(--v-theme-codeBg), 0.5); + border-radius: 4px; + padding: 2px 6px; + } +} + +pre { + border-radius: 10px; + padding: 16px; + overflow-x: auto; + + code { + background: transparent; + padding: 0; + } +} + +code { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", + "Helvetica Neue", monospace; + font-size: 0.8125rem; + background: rgba(var(--v-theme-codeBg), 0.8); + border-radius: 4px; + padding: 2px 6px; } diff --git a/dashboard/src/scss/components/_VButtons.scss b/dashboard/src/scss/components/_VButtons.scss index a7d095e95b..6971eb00cd 100644 --- a/dashboard/src/scss/components/_VButtons.scss +++ b/dashboard/src/scss/components/_VButtons.scss @@ -1,8 +1,10 @@ -// -// Light Buttons -// - .v-btn { + text-transform: none; + letter-spacing: $btn-letter-spacing; + font-weight: $btn-font-weight; + border-radius: $border-radius-root; + transition: all 0.2s ease; + &.bg-lightsecondary { &:hover, &:active, @@ -11,13 +13,100 @@ color: $white !important; } } -} -.v-btn { - text-transform: capitalize; - letter-spacing: $btn-letter-spacing; + &.v-btn--variant-tonal { + .v-btn__overlay { + opacity: 0.08; + } + + &:hover { + .v-btn__overlay { + opacity: 0.12; + } + } + } + + &.v-btn--variant-outlined { + border-width: 1px; + + &:hover { + border-width: 1px; + } + } + + &.v-btn--variant-text { + &:hover { + background: rgba(var(--v-theme-primary), 0.08); + } + } + + &.v-btn--density-comfortable { + &.v-btn--size-default { + height: 36px; + padding: 0 16px; + } + } + + &.v-btn--density-compact { + &.v-btn--size-default { + height: 32px; + padding: 0 12px; + } + } } + .v-btn--icon.v-btn--density-default { - width: calc(var(--v-btn-height) + 6px); - height: calc(var(--v-btn-height) + 6px); + width: calc(var(--v-btn-height) + 4px); + height: calc(var(--v-btn-height) + 4px); + border-radius: 10px; +} + +.v-btn--icon.v-btn--density-comfortable { + width: 36px; + height: 36px; + border-radius: 10px; +} + +.v-btn--icon.v-btn--density-compact { + width: 32px; + height: 32px; + border-radius: 8px; +} + +.v-btn-group { + .v-btn { + border-radius: 0; + + &:first-child { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + } + + &:last-child { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + } + } +} + +.v-theme--PurpleThemeDark { + .v-btn { + &.v-btn--variant-tonal { + .v-btn__overlay { + opacity: 0.15; + } + + &:hover { + .v-btn__overlay { + opacity: 0.2; + } + } + } + + &.v-btn--variant-text { + &:hover { + background: rgba(var(--v-theme-primary), 0.12); + } + } + } } diff --git a/dashboard/src/scss/components/_VCard.scss b/dashboard/src/scss/components/_VCard.scss index 10dcaaf86a..9fdf49ea50 100644 --- a/dashboard/src/scss/components/_VCard.scss +++ b/dashboard/src/scss/components/_VCard.scss @@ -1,8 +1,9 @@ -// Outline Card .v-card--variant-outlined { - border-color: rgba(var(--v-theme-borderLight), 0.36); + border-color: rgba(var(--v-theme-borderLight), 0.5); + border-width: 1px; + .v-divider { - border-color: rgba(var(--v-theme-borderLight), 0.36); + border-color: rgba(var(--v-theme-borderLight), 0.5); } } @@ -13,9 +14,15 @@ .v-card { width: 100%; overflow: visible; + border-radius: 12px; + transition: + box-shadow 0.2s ease, + transform 0.2s ease; + &.withbg { background-color: rgb(var(--v-theme-background)); } + &.overflow-hidden { overflow: hidden; } @@ -24,3 +31,29 @@ .v-card-item { padding: $card-item-spacer-xy; } + +.v-card-title { + font-size: $card-title-size; + font-weight: 600; + line-height: 1.4; +} + +.v-card-subtitle { + font-size: 0.8125rem; + color: rgb(var(--v-theme-secondaryText)); + margin-top: 4px; +} + +.v-theme--PurpleThemeDark { + .v-card { + background: rgb(var(--v-theme-surface)); + + &.v-card--variant-outlined { + border-color: rgba(var(--v-theme-borderLight), 0.4); + } + } + + .v-card-subtitle { + color: rgb(var(--v-theme-secondaryText)); + } +} diff --git a/dashboard/src/scss/components/_VField.scss b/dashboard/src/scss/components/_VField.scss index 97352acf5f..ff67a8ce14 100644 --- a/dashboard/src/scss/components/_VField.scss +++ b/dashboard/src/scss/components/_VField.scss @@ -1,9 +1,72 @@ .v-field--variant-outlined .v-field__outline__start.v-locale--is-ltr, .v-locale--is-ltr .v-field--variant-outlined .v-field__outline__start { - border-radius: $border-radius-root 0 0 $border-radius-root; + border-radius: 10px 0 0 10px; } .v-field--variant-outlined .v-field__outline__end.v-locale--is-ltr, .v-locale--is-ltr .v-field--variant-outlined .v-field__outline__end { - border-radius: 0 $border-radius-root $border-radius-root 0; + border-radius: 0 10px 10px 0; +} + +.v-text-field .v-field, +.v-textarea .v-field, +.v-select .v-field, +.v-autocomplete .v-field { + border-radius: 10px; + + &.v-field--variant-outlined { + .v-field__outline { + --v-field-border-width: 1px; + } + + &:hover { + .v-field__outline { + opacity: 0.8; + } + } + + &.v-field--focused { + .v-field__outline { + --v-field-border-width: 1.5px; + } + } + } + + &.v-field--variant-filled, + &.v-field--variant-solo { + border-radius: 10px 10px 0 0; + } + + &.v-field--variant-solo-filled { + border-radius: 10px; + } +} + +.v-field--variant-plain { + border-radius: 0; +} + +.v-theme--PurpleThemeDark { + .v-text-field .v-field, + .v-textarea .v-field, + .v-select .v-field, + .v-autocomplete .v-field { + &.v-field--variant-outlined { + .v-field__outline { + opacity: 0.5; + } + + &:hover { + .v-field__outline { + opacity: 0.7; + } + } + + &.v-field--focused { + .v-field__outline { + opacity: 1; + } + } + } + } } diff --git a/dashboard/src/scss/components/_VInput.scss b/dashboard/src/scss/components/_VInput.scss index 2ecc46a6cd..c2e9e2b977 100644 --- a/dashboard/src/scss/components/_VInput.scss +++ b/dashboard/src/scss/components/_VInput.scss @@ -1,7 +1,84 @@ .v-label { - font-size: 0.975rem; + font-size: 0.875rem; + font-weight: 400; } + .v-switch .v-label, .v-checkbox .v-label { opacity: 1; } + +.v-text-field .v-input, +.v-textarea .v-input, +.v-select .v-input, +.v-autocomplete .v-input { + --v-input-padding-top: 8px; +} + +.v-input__details { + padding-top: 4px; +} + +.v-messages { + font-size: 0.75rem; + min-height: 18px; +} + +.v-checkbox, +.v-switch { + .v-input__control { + height: auto; + } + + .v-selection-control { + min-height: auto; + } +} + +.v-data-table { + .v-checkbox { + .v-selection-control { + align-items: center; + } + + .v-selection-control__wrapper { + flex-shrink: 0; + } + + .v-input--density-default { + --v-input-control-height: 40px; + } + } + + thead { + .v-checkbox { + .v-input--density-default { + --v-input-control-height: 48px; + } + + .v-selection-control { + align-items: center; + } + + .v-selection-control__input { + width: 18px; + height: 18px; + } + } + } + + tbody { + .v-checkbox { + .v-selection-control__input { + width: 18px; + height: 18px; + } + } + } +} + +.v-theme--PurpleThemeDark { + .v-label { + opacity: 0.9; + } +} diff --git a/dashboard/src/scss/components/_VNavigationDrawer.scss b/dashboard/src/scss/components/_VNavigationDrawer.scss index 9994ae9133..a1becbf301 100644 --- a/dashboard/src/scss/components/_VNavigationDrawer.scss +++ b/dashboard/src/scss/components/_VNavigationDrawer.scss @@ -1,3 +1,32 @@ .v-navigation-drawer__scrim.fade-transition-leave-to { display: none; } + +.v-navigation-drawer { + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + &.v-navigation-drawer--rail { + .v-list-item { + justify-content: center; + padding-inline: 12px; + + .v-list-item-title { + display: none; + } + + .v-list-item__append { + display: none; + } + } + } +} + +.v-theme--PurpleThemeDark { + .v-navigation-drawer { + background: rgb(var(--v-theme-surface)) !important; + } + + .v-navigation-drawer__scrim { + background: rgba(0, 0, 0, 0.4); + } +} diff --git a/dashboard/src/scss/components/_VScrollbar.scss b/dashboard/src/scss/components/_VScrollbar.scss index 629afdf4fc..ac46e7b80d 100644 --- a/dashboard/src/scss/components/_VScrollbar.scss +++ b/dashboard/src/scss/components/_VScrollbar.scss @@ -1,36 +1,28 @@ -/* 自定义滚动条样式 - 跟随主题 */ - :root { - --astrbot-scrollbar-track: rgba(var(--v-theme-primary), 0.08); - --astrbot-scrollbar-thumb: rgba(var(--v-theme-primary), 0.72); - --astrbot-scrollbar-thumb-hover: rgba(var(--v-theme-primary), 0.84); - --astrbot-scrollbar-thumb-active: rgba(var(--v-theme-primary), 0.94); - --astrbot-scrollbar-thumb-border: rgba(var(--v-theme-surface), 0.5); - --astrbot-scrollbar-thumb-shadow: rgba(var(--v-theme-primary), 0.32); + --astrbot-scrollbar-track: rgba(var(--v-theme-borderLight), 0.3); + --astrbot-scrollbar-thumb: rgba(var(--v-theme-borderLight), 0.6); + --astrbot-scrollbar-thumb-hover: rgba(var(--v-theme-primary), 0.5); + --astrbot-scrollbar-thumb-active: rgba(var(--v-theme-primary), 0.7); } -/* 全局滚动条样式 */ ::-webkit-scrollbar { - width: 10px; - height: 10px; + width: 8px; + height: 8px; } ::-webkit-scrollbar-track { background: var(--astrbot-scrollbar-track); - border-radius: 5px; + border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--astrbot-scrollbar-thumb); - border-radius: 5px; - transition: all 0.3s ease; - border: 1px solid var(--astrbot-scrollbar-thumb-border); + border-radius: 4px; + transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--astrbot-scrollbar-thumb-hover); - transform: scale(1.05); - box-shadow: 0 2px 8px var(--astrbot-scrollbar-thumb-shadow); } ::-webkit-scrollbar-thumb:active { @@ -41,34 +33,35 @@ background: transparent; } -/* 细滚动条变体 */ .thin-scrollbar { ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 6px; + height: 6px; } ::-webkit-scrollbar-thumb { background: var(--astrbot-scrollbar-thumb); - border: none; + border-radius: 3px; + } + + ::-webkit-scrollbar-track { + background: transparent; } } -/* 聊天区域滚动条 */ .chat-scrollbar { ::-webkit-scrollbar { - width: 8px; + width: 6px; } ::-webkit-scrollbar-track { - background: var(--astrbot-scrollbar-track); - border-radius: 4px; + background: transparent; + border-radius: 3px; } ::-webkit-scrollbar-thumb { - background: var(--astrbot-scrollbar-thumb); - border-radius: 4px; - border: 1px solid var(--astrbot-scrollbar-thumb-border); + background: rgba(var(--v-theme-borderLight), 0.4); + border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { @@ -76,29 +69,44 @@ } } -/* 隐藏滚动条变体 */ .hidden-scrollbar { ::-webkit-scrollbar { width: 0px; height: 0px; } - + scrollbar-width: none; -ms-overflow-style: none; } -/* Firefox 兼容性 */ * { scrollbar-width: thin; scrollbar-color: var(--astrbot-scrollbar-thumb) var(--astrbot-scrollbar-track); } -/* 平滑滚动 */ html { scroll-behavior: smooth; } -/* 移动端触摸滚动优化 */ * { -webkit-overflow-scrolling: touch; -} \ No newline at end of file +} + +.v-theme--PurpleThemeDark { + :root { + --astrbot-scrollbar-track: rgba(255, 255, 255, 0.05); + --astrbot-scrollbar-thumb: rgba(255, 255, 255, 0.15); + --astrbot-scrollbar-thumb-hover: rgba(var(--v-theme-primary), 0.5); + --astrbot-scrollbar-thumb-active: rgba(var(--v-theme-primary), 0.7); + } + + .chat-scrollbar { + ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + } + + ::-webkit-scrollbar-thumb:hover { + background: var(--astrbot-scrollbar-thumb-hover); + } + } +} diff --git a/dashboard/src/scss/components/_VShadow.scss b/dashboard/src/scss/components/_VShadow.scss index aebe0e8e42..d55cf2e6fb 100644 --- a/dashboard/src/scss/components/_VShadow.scss +++ b/dashboard/src/scss/components/_VShadow.scss @@ -1,3 +1,31 @@ .elevation-10 { + box-shadow: $box-shadow-md !important; +} + +.elevation-1 { + box-shadow: $box-shadow-sm !important; +} + +.elevation-2 { box-shadow: $box-shadow !important; } + +.elevation-3 { + box-shadow: $box-shadow-md !important; +} + +.elevation-4 { + box-shadow: $box-shadow-lg !important; +} + +.v-theme--PurpleThemeDark { + .elevation-1, + .elevation-2, + .elevation-3, + .elevation-4, + .elevation-10 { + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.3), + 0 1px 2px rgba(0, 0, 0, 0.2) !important; + } +} diff --git a/dashboard/src/scss/components/_VTabs.scss b/dashboard/src/scss/components/_VTabs.scss index afb08fd463..695263b54e 100644 --- a/dashboard/src/scss/components/_VTabs.scss +++ b/dashboard/src/scss/components/_VTabs.scss @@ -1,11 +1,110 @@ .theme-tab { &.v-tabs { .v-tab { - border-radius: $border-radius-root !important; + border-radius: 10px !important; min-width: auto !important; + font-weight: 500; + text-transform: none; + letter-spacing: 0; + padding: 0 16px; + &.v-slide-group-item--active { background: rgb(var(--v-theme-primary)); + color: white; } } } } + +.v-tabs { + .v-tab { + text-transform: none; + font-weight: 500; + letter-spacing: 0; + min-width: 72px; + padding: 0 16px; + border-radius: 8px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + background: rgba(var(--v-theme-primary), 0.08); + } + + &.v-tab--selected { + color: rgb(var(--v-theme-primary)); + + .v-tab__slider { + height: 3px; + border-radius: 3px 3px 0 0; + opacity: 1; + transform: scaleX(1); + } + } + + &:not(.v-tab--selected) { + .v-tab__slider { + opacity: 0; + transform: scaleX(0.5); + } + } + } + + &.v-tabs--density-compact { + .v-tab { + height: 36px; + } + } + + &.v-tabs-pills { + .v-tab { + &.v-tab--selected { + .v-tab__slider { + display: none; + } + } + } + } +} + +.v-tab__slider { + height: 2px; + border-radius: 2px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + opacity: 0.9; +} + +.v-tabs-bar-v-slider { + overflow: visible; +} + +.v-slide-group { + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: rgba(var(--v-theme-borderLight), 0.5); + } +} + +.v-theme--PurpleThemeDark { + .v-tabs { + .v-tab { + &:hover { + background: rgba(var(--v-theme-primary), 0.12); + } + + &.v-tab--selected { + color: rgb(var(--v-theme-primary)); + } + } + } + + .v-slide-group { + &::after { + background: rgba(var(--v-theme-borderLight), 0.3); + } + } +} diff --git a/dashboard/src/scss/components/_VTextField.scss b/dashboard/src/scss/components/_VTextField.scss index 3f7c5ff96b..122e601004 100644 --- a/dashboard/src/scss/components/_VTextField.scss +++ b/dashboard/src/scss/components/_VTextField.scss @@ -1,3 +1,51 @@ .v-text-field input { - font-size: 0.8rem; + font-size: 0.875rem; +} + +.v-textarea textarea { + font-size: 0.875rem; + line-height: 1.5; +} + +.v-text-field { + .v-field__input { + padding-top: 10px; + padding-bottom: 10px; + } + + &.v-text-field--enclosed { + .v-field__input { + padding-top: 12px; + padding-bottom: 12px; + } + } +} + +.v-select, +.v-autocomplete { + .v-field--variant-solo-filled { + .v-label.v-field-label { + opacity: 1 !important; + } + + .v-field__input { + padding-top: 18px; + padding-bottom: 6px; + } + } + + &.v-input--density-comfortable { + .v-field--variant-solo-filled { + .v-field__input { + padding-top: 16px; + padding-bottom: 4px; + } + } + } +} + +.v-field--variant-solo-filled { + .v-label.v-field-label { + opacity: 1 !important; + } } diff --git a/dashboard/src/scss/layout/_container.scss b/dashboard/src/scss/layout/_container.scss index f1ca9294ff..99c891e027 100644 --- a/dashboard/src/scss/layout/_container.scss +++ b/dashboard/src/scss/layout/_container.scss @@ -1,16 +1,20 @@ html { overflow-y: auto; } + .v-main { margin: 0; } .top-header { - border-bottom: 1px solid rgba(var(--v-theme-borderLight), 0.5); + border-bottom: 1px solid rgba(var(--v-theme-borderLight), 0.6); + background: rgb(var(--v-theme-surface)) !important; } + .spacer { - padding: 100px 0; + padding: 80px 0; } + @media (max-width: 800px) { .spacer { padding: 40px 0; @@ -19,27 +23,28 @@ html { .page-wrapper { min-height: calc(100vh - 100px); - padding: 8px; - // border-radius: $border-radius-root; + padding: 16px; background: rgb(var(--v-theme-containerBg)); + border-radius: 0; } + $sizes: ( - 'display-1': 44px, - 'display-2': 40px, - 'display-3': 30px, - 'h1': 36px, - 'h2': 30px, - 'h3': 21px, - 'h4': 18px, - 'h5': 16px, - 'h6': 14px, - 'text-8': 8px, - 'text-10': 10px, - 'text-13': 13px, - 'text-18': 18px, - 'text-20': 20px, - 'text-24': 24px, - 'body-text-1': 10px + "display-1": 40px, + "display-2": 36px, + "display-3": 28px, + "h1": 32px, + "h2": 26px, + "h3": 20px, + "h4": 18px, + "h5": 16px, + "h6": 14px, + "text-8": 8px, + "text-10": 10px, + "text-13": 13px, + "text-18": 18px, + "text-20": 20px, + "text-24": 24px, + "body-text-1": 10px, ); @each $pixel, $size in $sizes { @@ -54,12 +59,14 @@ $sizes: ( top: 25%; right: 10px; border-radius: 50% 50% 4px; + .icon { animation: progress-circular-rotate 1.4s linear infinite; transform-origin: center center; transition: all 0.2s ease-in-out; } } + .w-100 { width: 100%; } @@ -76,19 +83,17 @@ $sizes: ( color: rgb(255, 255, 255) !important; } -// font family - body { .Poppins { - font-family: 'Poppins', $cjk-sans-fallback, sans-serif !important; + font-family: "Poppins", $cjk-sans-fallback, sans-serif !important; } .Inter { - font-family: 'Inter', $cjk-sans-fallback, sans-serif !important; + font-family: "Inter", $cjk-sans-fallback, sans-serif !important; } .Outfit { - font-family: 'Outfit', $cjk-sans-fallback, sans-serif !important; + font-family: "Outfit", $cjk-sans-fallback, sans-serif !important; } } @@ -100,6 +105,7 @@ body { opacity: 1; } } + @keyframes bounce { 0%, 20%, @@ -125,3 +131,14 @@ body { transform: translate3d(0, -2px, 0); } } + +.v-theme--PurpleThemeDark { + .top-header { + background: rgb(var(--v-theme-surface)) !important; + border-bottom-color: rgba(var(--v-theme-borderLight), 0.4); + } + + .page-wrapper { + background: rgb(var(--v-theme-containerBg)); + } +} diff --git a/dashboard/src/scss/layout/_sidebar.scss b/dashboard/src/scss/layout/_sidebar.scss index 52f9e404a3..cdb385b9a9 100644 --- a/dashboard/src/scss/layout/_sidebar.scss +++ b/dashboard/src/scss/layout/_sidebar.scss @@ -1,84 +1,129 @@ -/*This is for the logo*/ .leftSidebar { border: 0px; - border-right: 1px solid rgba(var(--v-theme-borderLight), 0.45); + border-right: 1px solid rgba(var(--v-theme-borderLight), 0.6); box-shadow: none !important; + background: rgb(var(--v-theme-surface)) !important; } + .listitem { overflow-y: auto; + .v-list { color: rgb(var(--v-theme-secondaryText)); } + .v-list-group__items .v-list-item, .v-list-item { - border-radius: $border-radius-root; + border-radius: 10px; + margin: 2px 8px; padding-inline-start: calc(12px + var(--indent-padding) / 2) !important; + transition: all 0.2s ease; + &:hover { - color: rgb(var(--v-theme-secondary)); + background: rgba(var(--v-theme-primary), 0.08); + color: rgb(var(--v-theme-primary)); + } + + &.v-list-item--active { + background: rgba(var(--v-theme-primary), 0.12); + color: rgb(var(--v-theme-primary)); + + .v-list-item-title { + font-weight: 500; + } } } + .v-list-item--density-default.v-list-item--one-line { - min-height: 40px; + min-height: 42px; + } + + .v-list-item-title { + font-size: 0.875rem; + font-weight: 400; + } + + .v-list-item__prepend { + > .v-icon { + opacity: 0.8; + margin-inline-end: 8px !important; + } + + > .v-list-item__spacer { + width: 8px !important; + } + } + + .v-list-item--active .v-list-item__prepend > .v-icon { + opacity: 1; + color: rgb(var(--v-theme-primary)); } } -// 深色主题下的侧边栏悬停和选中样式 .v-theme--PurpleThemeDark .leftSidebar { .listitem { .v-list-group__items .v-list-item, .v-list-item { &:hover { + background: rgba(var(--v-theme-primary), 0.15); color: rgb(var(--v-theme-primary)) !important; - + .v-list-item-title { color: rgb(var(--v-theme-primary)) !important; } - + .v-icon { color: rgb(var(--v-theme-primary)) !important; } } - - // 选中状态的样式 + &.v-list-item--active { + background: rgba(var(--v-theme-primary), 0.2); color: rgb(var(--v-theme-primary)) !important; - + .v-list-item-title { color: rgb(var(--v-theme-primary)) !important; } - + .v-icon { color: rgb(var(--v-theme-primary)) !important; } } } } + .v-list-item--density-default.v-list-item--one-line { - min-height: 40px; + min-height: 42px; } } + .v-navigation-drawer--rail { .scrollnavbar .v-list .v-list-group__items, .hide-menu { opacity: 1; } + .leftPadding { margin-left: 0px; } } + @media only screen and (min-width: 1170px) { .mini-sidebar { .logo { width: 90px; overflow: hidden; } + .leftSidebar:hover { - box-shadow: $box-shadow !important; + box-shadow: $box-shadow-md !important; } + .v-navigation-drawer--expand-on-hover:hover { .logo { width: 100%; } + .v-list .v-list-group__items, .hide-menu { opacity: 1; @@ -87,20 +132,36 @@ } } -// 新的flex布局样式 .leftSidebar { .sidebar-container { display: flex; flex-direction: column; height: 100%; - + .flex-grow-1 { flex: 1 1 auto; overflow-y: auto; + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: rgba(var(--v-theme-borderLight), 0.5); + border-radius: 3px; + + &:hover { + background: rgba(var(--v-theme-borderLight), 0.8); + } + } } - + .sidebar-footer { - padding: 16px; + padding: 12px 16px; background: inherit; display: flex; flex-direction: column; @@ -108,17 +169,33 @@ font-size: 13px; text-align: center; flex-shrink: 0; - + border-top: 1px solid rgba(var(--v-theme-borderLight), 0.4); + .v-btn { width: 100%; max-width: 180px; - margin-bottom: 8px !important; + margin-bottom: 6px !important; + border-radius: 10px; } .sidebar-footer-btn { justify-content: flex-start; text-align: left; + font-size: 0.8125rem; + + ::v-deep(.v-btn__prepend) { + margin-inline-end: 10px; + } } } } } + +.hidden-scrollbar { + &::-webkit-scrollbar { + display: none; + } + + -ms-overflow-style: none; + scrollbar-width: none; +} diff --git a/dashboard/src/scss/pages/_dashboards.scss b/dashboard/src/scss/pages/_dashboards.scss index aeb4c9f5f7..7b6eaaeb16 100644 --- a/dashboard/src/scss/pages/_dashboards.scss +++ b/dashboard/src/scss/pages/_dashboards.scss @@ -1,7 +1,7 @@ .bubble-shape { position: relative; &:before { - content: ''; + content: ""; position: absolute; width: 210px; height: 210px; @@ -11,7 +11,7 @@ opacity: 0.5; } &:after { - content: ''; + content: ""; position: absolute; width: 210px; height: 210px; @@ -28,7 +28,7 @@ .bubble-shape-sm { position: relative; &::before { - content: ''; + content: ""; position: absolute; width: 210px; height: 210px; @@ -37,7 +37,7 @@ right: -130px; } &::after { - content: ''; + content: ""; position: absolute; width: 210px; height: 210px; diff --git a/dashboard/src/scss/style.scss b/dashboard/src/scss/style.scss index 6e02010ba8..59df1e638e 100644 --- a/dashboard/src/scss/style.scss +++ b/dashboard/src/scss/style.scss @@ -1,22 +1,23 @@ -@import './variables'; -@import 'vuetify/styles/main.sass'; -@import './override'; -@import './layout/container'; -@import './layout/sidebar'; +@import "./variables"; +@import "vuetify/styles/main.sass"; +@import "./override"; +@import "./layout/container"; +@import "./layout/sidebar"; -@import './components/VButtons'; -@import './components/VCard'; -@import './components/VField'; -@import './components/VInput'; -@import './components/VNavigationDrawer'; -@import './components/VShadow'; -@import './components/VTextField'; -@import './components/VTabs'; -@import './components/VScrollbar'; -@import './components/CodeBlockDark'; +@import "./components/VButtons"; +@import "./components/VCard"; +@import "./components/VField"; +@import "./components/VInput"; +@import "./components/VNavigationDrawer"; +@import "./components/VShadow"; +@import "./components/VTextField"; +@import "./components/VTabs"; +@import "./components/VScrollbar"; +@import "./components/CodeBlockDark"; -@import './pages/dashboards'; +@import "./pages/dashboards"; -html, body { +html, +body { overscroll-behavior-y: none; } diff --git a/dashboard/src/views/SessionManagementPage.vue b/dashboard/src/views/SessionManagementPage.vue index 1400f49154..3862dad043 100644 --- a/dashboard/src/views/SessionManagementPage.vue +++ b/dashboard/src/views/SessionManagementPage.vue @@ -1,10 +1,11 @@ -