feat(theme): 更新主题定制器边框样式，优化视觉效果

fix(locales): 修改英文和中文边框相关文本
style(app): 调整应用界面边框和阴影样式

src/components/theme/ThemeCustomizer.vue

@@ -282,14 +282,15 @@ async function handleResetSettings() {
               :class="{ 'is-active': settings.skin === skin.value }"
               @click="setSkin(skin.value)"
             >
-              <span class="theme-customizer-mini-layout" :class="`theme-customizer-mini-layout--${skin.value}`">
-                <span class="mini-sidebar">
-                  <i />
-                  <i />
+              <span class="theme-customizer-border-scene" :class="`theme-customizer-border-scene--${skin.value}`">
+                <span class="theme-customizer-border-scene__card">
                   <i />
                   <i />
                 </span>
-                <span class="mini-content">
+                <span class="theme-customizer-border-scene__dialog">
+                  <i />
+                </span>
+                <span class="theme-customizer-border-scene__menu">
                   <i />
                   <i />
                   <i />
@@ -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;

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',

src/locales/zh-CN.ts

@@ -171,9 +171,9 @@ export default {
       primaryColor: '色调',
       usePrimaryColor: '使用 {color} 色调',
       chooseCustomColor: '选择自定义色调',
-      skins: '框架',
-      skinDefault: '默认',
-      skinBordered: '边框',
+      skins: '边框',
+      skinDefault: '无边框',
+      skinBordered: '有边框',
       radius: '圆角',
       radiusNone: '无圆角',
       radiusSmall: '小圆角',

src/locales/zh-TW.ts

@@ -171,9 +171,9 @@ export default {
       primaryColor: '色调',
       usePrimaryColor: '使用 {color} 色調',
       chooseCustomColor: '選擇自定義色調',
-      skins: '框架',
-      skinDefault: '默認',
-      skinBordered: '邊框',
+      skins: '邊框',
+      skinDefault: '無邊框',
+      skinBordered: '有邊框',
       radius: '圓角',
       radiusNone: '無圓角',
       radiusSmall: '小圓角',

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 {

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) {

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;
 }