diff --git a/src/components/theme/ThemeCustomizer.vue b/src/components/theme/ThemeCustomizer.vue index f368c4ed..df59ec23 100644 --- a/src/components/theme/ThemeCustomizer.vue +++ b/src/components/theme/ThemeCustomizer.vue @@ -282,14 +282,15 @@ async function handleResetSettings() { :class="{ 'is-active': settings.skin === skin.value }" @click="setSkin(skin.value)" > - - - - + + - + + + + @@ -649,6 +650,7 @@ async function handleResetSettings() { box-shadow: none !important; .theme-customizer-mini-layout, + .theme-customizer-border-scene, .theme-customizer-radius-scene { border-width: 2px; border-color: rgb(var(--v-theme-primary)); @@ -704,6 +706,72 @@ async function handleResetSettings() { } } +.theme-customizer-border-scene { + position: relative; + display: block; + overflow: hidden; + border: 1px solid rgba(var(--v-theme-on-surface), 0.12); + border-radius: 10px; + background: + linear-gradient(180deg, rgba(var(--v-theme-on-surface), 0.02), rgba(var(--v-theme-on-surface), 0.05)), + rgb(var(--v-theme-surface)); + block-size: 74px; + inline-size: 100%; + min-inline-size: 92px; +} + +.theme-customizer-border-scene__card, +.theme-customizer-border-scene__dialog, +.theme-customizer-border-scene__menu { + position: absolute; + display: flex; + flex-direction: column; + border: 0 solid rgba(var(--v-theme-on-surface), 0.14); + border-radius: 6px; + background: rgba(var(--v-theme-surface), 0.92); + gap: 5px; + padding: 7px; + box-shadow: var(--app-elevation-0); +} + +.theme-customizer-border-scene__card { + block-size: 36px; + inline-size: 46%; + inset-block-start: 12px; + inset-inline-start: 10px; +} + +.theme-customizer-border-scene__dialog { + block-size: 42px; + inline-size: 38%; + inset-block-start: 18px; + inset-inline-end: 13px; +} + +.theme-customizer-border-scene__menu { + block-size: 30px; + inline-size: 30%; + inset-block-end: 10px; + inset-inline-start: 34%; +} + +.theme-customizer-border-scene__card i, +.theme-customizer-border-scene__dialog i, +.theme-customizer-border-scene__menu i { + display: block; + border-radius: 3px; + background: rgba(var(--v-theme-on-surface), 0.1); + block-size: 5px; +} + +.theme-customizer-border-scene--bordered { + .theme-customizer-border-scene__card, + .theme-customizer-border-scene__dialog, + .theme-customizer-border-scene__menu { + border-width: 1px; + } +} + .mini-sidebar, .mini-content { display: flex; @@ -729,14 +797,6 @@ async function handleResetSettings() { block-size: 18px; } -.theme-customizer-mini-layout--bordered { - .mini-content i, - .mini-sidebar i { - border: 1px solid rgba(var(--v-theme-on-surface), 0.12); - background: transparent; - } -} - .theme-customizer-radius-scene { position: relative; display: block; diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index a3961500..be4e52c9 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -175,8 +175,8 @@ export default { primaryColor: 'Primary Color', usePrimaryColor: 'Use {color} primary color', chooseCustomColor: 'Choose custom primary color', - skins: 'Framework', - skinDefault: 'Default', + skins: 'Borders', + skinDefault: 'No Border', skinBordered: 'Bordered', radius: 'Corners', radiusNone: 'Square', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 1d9d5659..703162c8 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -171,9 +171,9 @@ export default { primaryColor: '色调', usePrimaryColor: '使用 {color} 色调', chooseCustomColor: '选择自定义色调', - skins: '框架', - skinDefault: '默认', - skinBordered: '边框', + skins: '边框', + skinDefault: '无边框', + skinBordered: '有边框', radius: '圆角', radiusNone: '无圆角', radiusSmall: '小圆角', diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts index 45834157..1f0b8b39 100644 --- a/src/locales/zh-TW.ts +++ b/src/locales/zh-TW.ts @@ -171,9 +171,9 @@ export default { primaryColor: '色调', usePrimaryColor: '使用 {color} 色調', chooseCustomColor: '選擇自定義色調', - skins: '框架', - skinDefault: '默認', - skinBordered: '邊框', + skins: '邊框', + skinDefault: '無邊框', + skinBordered: '有邊框', radius: '圓角', radiusNone: '無圓角', radiusSmall: '小圓角', diff --git a/src/pages/appcenter.vue b/src/pages/appcenter.vue index 0f35de11..cdbe3613 100644 --- a/src/pages/appcenter.vue +++ b/src/pages/appcenter.vue @@ -104,9 +104,11 @@ onMounted(() => { .settings-section-card { overflow: hidden; + border: var(--app-surface-border); backdrop-filter: blur(10px); background-color: rgb(var(--v-theme-surface)); - box-shadow: 0 2px 8px rgba(0, 0, 0, 8%); + box-shadow: var(--app-surface-shadow); + transition: border-color 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease; } .settings-list { @@ -119,7 +121,7 @@ onMounted(() => { transition: background-color 0.2s; &:not(:last-child) { - border-block-end: 1px solid rgba(var(--v-border-color), 0.12); + border-block-end: var(--app-surface-border-width) solid rgba(var(--v-border-color), 0.12); } &:hover { diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue index 616631d1..7296edff 100644 --- a/src/pages/dashboard.vue +++ b/src/pages/dashboard.vue @@ -1485,9 +1485,9 @@ onBeforeUnmount(() => { } .dashboard-grid :deep(.v-card) { - border: 1px solid rgba(var(--v-border-color), calc(var(--v-border-opacity) * 0.72)); - border-radius: 12px; - box-shadow: 0 3px 14px rgba(15, 23, 42, 0.035); + border: var(--app-surface-border); + border-radius: var(--app-surface-radius); + box-shadow: var(--app-surface-shadow); } .dashboard-grid :deep(.v-card-title) { diff --git a/src/styles/common.scss b/src/styles/common.scss index c0d7ed82..0edd23c2 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -80,10 +80,13 @@ html { --app-field-radius: var(--app-vuetify-rounded-lg); --app-control-radius: var(--app-vuetify-rounded); --app-overlay-radius: var(--app-vuetify-rounded-lg); + --app-surface-border-width: 0; --app-surface-border-opacity: 0.06; - --app-surface-border: 1px solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity)); + --app-surface-border: var(--app-surface-border-width) solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity)); + --app-card-light-border-width: var(--app-surface-border-width); --app-card-light-border-opacity: 0.12; - --app-card-light-border: 1px solid rgba(var(--v-theme-on-surface), var(--app-card-light-border-opacity)); + --app-card-light-border: var(--app-card-light-border-width) solid rgba(var(--v-theme-on-surface), var(--app-card-light-border-opacity)); + --app-overlay-border: var(--app-surface-border); --app-card-rest-shadow: var(--app-elevation-0); --app-card-hover-shadow: var(--app-elevation-0); --app-fab-shadow: var(--app-elevation-0); @@ -101,7 +104,9 @@ html { } html[data-theme-skin='bordered'] { + --app-surface-border-width: 1px; --app-surface-border-opacity: 0.1; + --app-card-light-border-width: 1px; --app-card-light-border-opacity: 0.16; } @@ -179,11 +184,17 @@ html[data-theme-radius='extra'] { .app-surface, .v-card, .v-sheet, -.v-list, .v-expansion-panel { + border: var(--app-surface-border); border-radius: var(--app-surface-radius) !important; box-shadow: var(--app-surface-shadow) !important; - transition: border-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease; + transition: border-color 0.2s ease, border-radius 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease; +} + +.v-list { + border-radius: var(--app-surface-radius) !important; + box-shadow: var(--app-surface-shadow) !important; + transition: border-radius 0.2s ease, box-shadow 0.2s ease; } .app-surface-static { @@ -412,6 +423,7 @@ html[data-theme-radius='extra'] { // 局部需要退出全局 surface 风格时使用这些工具类,避免再用 !important 抢优先级。 .app-surface-borderless { --app-surface-border: 0 solid transparent; + --app-overlay-border: 0 solid transparent; } .app-surface-flat, @@ -604,30 +616,6 @@ html[data-theme-radius='extra'] { box-shadow: none !important; } -// 主题定制器的 bordered 皮肤:保持原布局密度,只给非 Vuetify 外壳增加清晰边界。 -html[data-theme-skin='bordered'] { - .layout-vertical-nav { - border: var(--app-surface-border); - } - - .navbar-content-container { - border-block-end: var(--app-surface-border); - } - - .layout-vertical-nav { - border-block: 0; - border-inline-start: 0; - } - - .app-surface, - .v-card, - .v-sheet, - .v-list, - .v-expansion-panel { - border: var(--app-surface-border); - } -} - // 应用类信息卡片:固定右侧媒体槽位,避免图片被左侧文字挤压变形。 .app-card-shell { position: relative; @@ -658,7 +646,7 @@ html[data-theme-skin='bordered'] { --app-card-hover-border-opacity: 0.16; --app-card-stripe-opacity: 0.22; --app-card-surface-opacity: 0.92; - --app-surface-border: 1px solid rgba(var(--app-card-accent-rgb), var(--app-card-border-opacity)); + --app-surface-border: var(--app-surface-border-width) solid rgba(var(--app-card-accent-rgb), var(--app-card-border-opacity)); --app-surface-hover-shadow: var(--app-card-hover-shadow); --app-surface-shadow: var(--app-card-rest-shadow); } @@ -676,7 +664,7 @@ html[data-theme-skin='bordered'] { } .app-card-colorful:hover { - --app-surface-border: 1px solid rgba(var(--app-card-accent-rgb), var(--app-card-hover-border-opacity)); + --app-surface-border: var(--app-surface-border-width) solid rgba(var(--app-card-accent-rgb), var(--app-card-hover-border-opacity)); } .app-card-colorful:focus-visible { @@ -700,11 +688,11 @@ html[data-theme="transparent"] .app-card-colorful, --app-card-accent-start-opacity: 0.018; --app-card-accent-end-opacity: 0.01; - --app-card-border-opacity: 0; - --app-card-hover-border-opacity: 0; + --app-card-border-opacity: var(--app-surface-border-opacity); + --app-card-hover-border-opacity: var(--app-surface-border-opacity); --app-card-stripe-opacity: 0.16; --app-card-surface-opacity: var(--transparent-opacity-light, 0.2); - --app-surface-border: 0 solid transparent; + --app-surface-border: var(--app-surface-border-width) solid rgba(var(--v-theme-on-surface), var(--app-surface-border-opacity)); } html[data-theme="transparent"].transparent-glass-lightweight .app-card-colorful, @@ -1380,6 +1368,7 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent // 弹出层样式 .v-overlay__content .v-list{ + border: var(--app-overlay-border); border-radius: var(--app-surface-radius); backdrop-filter: blur(6px); background-color: rgb(var(--v-theme-surface), 0.9); @@ -1388,6 +1377,7 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent } .v-overlay__content .v-card:not(.bg-primary){ + border: var(--app-overlay-border); border-radius: var(--app-surface-radius); backdrop-filter: blur(8px); background-color: rgb(var(--v-theme-surface), 0.95); @@ -1462,6 +1452,7 @@ html[data-theme="transparent"].transparent-glass-realtime .v-theme--transparent .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card, .v-menu > .v-overlay__content > .v-card, .v-menu > .v-overlay__content > .v-list { + border: var(--app-overlay-border); border-radius: var(--app-overlay-radius) !important; box-shadow: var(--app-overlay-shadow) !important; }