feat(admin): refine theme settings UI

assets/admin/src/App.vue

@@ -1,22 +1,18 @@
 <template>
-  <n-config-provider :style-mount-target="styleMountTarget">
+  <n-config-provider
+    :style-mount-target="styleMountTarget"
+    :theme-overrides="adminThemeOverrides"
+  >
     <n-message-provider>
       <n-dialog-provider>
         <n-notification-provider>
-          <div v-if="!isMobile" class="aksrt-csf-shell">
-            <header class="aksrt-csf-header">
-              <div>
-                <h1>AKSRT主题设置 <small>页面与功能配置</small></h1>
-                <p>欢迎使用 AKSRT 主题</p>
-              </div>
-              <span class="aksrt-csf-version">V{{ themeVersion }}</span>
-            </header>
-          <n-layout class="aksrt-admin-layout" has-sider>
+          <n-layout v-if="!isMobile" class="aksrt-admin-layout" has-sider>
             <n-layout-sider
+              class="aksrt-admin-sider"
               bordered
               collapse-mode="width"
               :collapsed-width="64"
-              :width="240"
+              :width="232"
               show-collapse-trigger
               :collapsed="collapsed"
               :native-scrollbar="false"
@@ -25,10 +21,14 @@
             >
               <div class="aksrt-logo">
                 <span class="logo-icon">AK</span>
-                <span v-if="!collapsed" class="logo-text">AKSRT</span>
+                <span v-if="!collapsed" class="aksrt-logo__copy">
+                  <span class="logo-text">AKSRT</span>
+                  <span class="aksrt-logo__version">v{{ themeVersion }}</span>
+                </span>
               </div>
 
               <n-menu
+                class="aksrt-admin-menu"
                 :value="activeMenuKey"
                 :collapsed="collapsed"
                 :collapsed-width="64"
@@ -55,7 +55,6 @@
               </div>
             </n-layout>
           </n-layout>
-          </div>
 
           <div v-else class="aksrt-admin-mobile">
             <MobileTopBar :title="currentPageTitle" @toggle="drawerActive = true" />
@@ -64,9 +63,13 @@
               <n-drawer-content :native-scrollbar="false" body-content-style="padding:0;">
                 <div class="aksrt-logo aksrt-logo--drawer">
                   <span class="logo-icon">AK</span>
-                  <span class="logo-text">AKSRT</span>
+                  <span class="aksrt-logo__copy">
+                    <span class="logo-text">AKSRT</span>
+                    <span class="aksrt-logo__version">v{{ themeVersion }}</span>
+                  </span>
                 </div>
                 <n-menu
+                  class="aksrt-admin-menu"
                   :value="activeMenuKey"
                   :options="menuOptions"
                   @update:value="handleMenuClick"
@@ -110,10 +113,63 @@ const collapsed = ref(false)
 const pageError = ref(null)
 const isMobile = ref(false)
 const drawerActive = ref(false)
-const themeVersion = window.aksrtAdminData?.version || '9.0'
+const themeVersion = window.aksrtAdminData?.themeVersion || window.aksrtAdminData?.version || '9.0'
+const MOBILE_BREAKPOINT = 960
+
+const adminThemeOverrides = {
+  common: {
+    primaryColor: '#18A058',
+    primaryColorHover: '#36AD6A',
+    primaryColorPressed: '#0C7A43',
+    primaryColorSuppl: '#36AD6A',
+    bodyColor: '#F5F7F6',
+    cardColor: '#FFFFFF',
+    modalColor: '#FFFFFF',
+    popoverColor: '#FFFFFF',
+    textColorBase: '#1F2923',
+    textColor1: '#1F2923',
+    textColor2: '#465149',
+    textColor3: '#6F7A72',
+    borderColor: '#E2E8E3',
+    dividerColor: '#E2E8E3',
+    borderRadius: '8px',
+    borderRadiusSmall: '6px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
+  },
+  Button: {
+    borderRadiusMedium: '8px',
+    heightMedium: '36px',
+    fontWeight: '600',
+  },
+  Card: {
+    borderRadius: '12px',
+    borderColor: '#E2E8E3',
+  },
+  DataTable: {
+    thColor: '#F7F9F7',
+    thTextColor: '#465149',
+    tdColorHover: '#F7FBF8',
+    borderColor: '#E2E8E3',
+  },
+  Input: {
+    borderRadius: '8px',
+    heightMedium: '36px',
+  },
+  Menu: {
+    itemColorActive: '#EAF7EF',
+    itemColorActiveHover: '#EAF7EF',
+    itemColorHover: '#F2F8F4',
+    itemTextColorActive: '#168A4B',
+    itemTextColorActiveHover: '#168A4B',
+    itemTextColorHover: '#168A4B',
+  },
+  Switch: {
+    railColorActive: '#18A058',
+  },
+}
 
 function checkMobile() {
-  isMobile.value = window.innerWidth < 768
+  isMobile.value = window.innerWidth < MOBILE_BREAKPOINT
 }
 
 onMounted(() => {
@@ -214,15 +270,15 @@ function handleMenuClick(key) {
 .aksrt-logo {
   display: flex;
   align-items: center;
-  justify-content: center;
-  height: 72px;
-  gap: 10px;
-  border-bottom: 1px solid var(--n-border-color, #efeff5);
+  justify-content: flex-start;
+  height: 64px;
+  gap: 11px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--aksrt-color-border);
 }
 
 .aksrt-logo--drawer {
-  justify-content: flex-start;
-  padding: 0 18px;
+  height: 64px;
 }
 
 .logo-icon {
@@ -231,91 +287,45 @@ function handleMenuClick(key) {
   justify-content: center;
   width: 28px;
   height: 28px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #65bff7 10%, #0d67b9 100%);
+  flex: 0 0 28px;
+  border-radius: 7px;
+  background: var(--aksrt-color-primary);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
 }
 
+.aksrt-logo__copy {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  min-width: 0;
+}
+
 .logo-text {
-  font-size: 18px;
+  font-size: 17px;
   font-weight: 700;
-  color: #1a1a2e;
-  letter-spacing: 1px;
+  color: var(--aksrt-color-text);
+  letter-spacing: .08em;
+}
+
+.aksrt-logo__version {
+  color: var(--aksrt-color-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+  letter-spacing: .02em;
 }
 
 .aksrt-admin-content__inner {
-  padding: 30px;
-}
-
-.aksrt-csf-shell {
-  max-width: 1380px;
-  margin: 20px auto;
-  overflow: hidden;
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(82, 82, 82, .1);
-}
-
-.aksrt-csf-header {
-  position: relative;
-  display: flex;
-  min-height: 108px;
-  align-items: center;
-  justify-content: space-between;
-  overflow: hidden;
-  padding: 22px 34px;
-  color: #fff;
-  background: linear-gradient(135deg, #f97794 10%, #623aa2 100%);
-}
-
-.aksrt-csf-header::before {
-  position: absolute;
-  left: 10%;
-  bottom: -25px;
-  content: 'AKSRT';
-  color: rgba(255, 255, 255, .05);
-  font-size: 100px;
-  font-weight: 800;
-  font-style: oblique;
-  transform: rotate(-5deg) scaleX(1.5);
-}
-
-.aksrt-csf-header h1,
-.aksrt-csf-header p {
-  position: relative;
-  z-index: 1;
-  margin: 0;
-  color: #fff;
-}
-
-.aksrt-csf-header h1 {
-  font-size: 26px;
-}
-
-.aksrt-csf-header h1 small {
-  margin-left: 8px;
-  font-size: 13px;
-  font-weight: 400;
-}
-
-.aksrt-csf-header p {
-  margin-top: 7px;
-  opacity: .78;
-}
-
-.aksrt-csf-version {
-  position: relative;
-  z-index: 1;
-  padding: 5px 12px;
-  border: 1px solid rgba(255, 255, 255, .3);
-  border-radius: 20px;
-  background: rgba(255, 255, 255, .1);
+  width: 100%;
+  max-width: 1236px;
+  margin: 0 auto;
+  padding: 26px 28px 42px;
 }
 
 .aksrt-admin-mobile {
-  background: #f5f7fb;
+  background: var(--aksrt-color-canvas);
   min-height: 100vh;
 }
 
@@ -343,4 +353,10 @@ function handleMenuClick(key) {
   font-size: 13px;
   color: #777;
 }
+
+@media (max-width: 1100px) {
+  .aksrt-admin-content__inner {
+    padding: 22px 20px 38px;
+  }
+}
 </style>