init

shaofan
1 parent 67f451d6
Showing 10 changed files with 398 additions and 154 deletions
package-lock.json
src/App.vue
src/layouts/MainLayout.vue
src/router/index.ts
src/stores/app.ts
src/style.css
src/views/Login.vue
src/views/config/FeePlanList.vue
src/views/dashboard/DashboardHome.vue
src/views/dispatch/DispatchRuleList.vue
@@ -289,9 +289,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -309,9 +306,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -329,9 +323,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -349,9 +340,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -369,9 +357,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -389,9 +374,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1325,9 +1307,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1349,9 +1328,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1373,9 +1349,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1397,9 +1370,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
 <template>
-  <router-view />
+  <a-config-provider
+    :theme="{
+      algorithm: app.isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      token: {
+        colorPrimary: '#8c7cf0',
+        borderRadius: 12,
+        fontFamily: 'Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
+      }
+    }"
+  >
+    <router-view />
+  </a-config-provider>
 </template>
+
+<script setup lang="ts">
+import { theme } from 'ant-design-vue'
+import { useAppStore } from '@/stores/app'
+
+const app = useAppStore()
+</script>
+
+<style>
+/* Loading bar simulation */
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #8c7cf0, #f1bfd8);
+  z-index: 9999;
+  width: 0;
+  transition: width 0.3s ease;
+}
+
+body.loading::before {
+  width: 80%;
+  animation: loading-pulse 2s infinite linear;
+}
+
+@keyframes loading-pulse {
+  0% { width: 0%; opacity: 1; }
+  50% { width: 70%; opacity: 0.8; }
+  100% { width: 90%; opacity: 0.6; }
+}
+
+body:not(.loading)::before {
+  width: 100%;
+  opacity: 0;
+  transition: width 0.3s ease, opacity 0.3s 0.2s ease;
+}
+</style>
 <template>
   <div class="layout-shell" :class="{ collapsed }">
-    <aside class="soft-sider" :class="{ collapsed }">
+    <aside v-if="!isMobile" class="soft-sider" :class="{ collapsed }">
       <button class="sider-toggle" type="button" @click="collapsed = !collapsed">
         <menu-fold-outlined v-if="!collapsed" />
         <menu-unfold-outlined v-else />
@@ -77,12 +77,49 @@
     <main class="content-column">
       <header class="soft-topbar">
-        <div>
-          <p class="eyebrow">Soft-Neo Admin</p>
-          <h1>{{ currentTitle }}</h1>
+        <div class="topbar-left">
+          <button v-if="isMobile" class="mobile-menu-trigger" type="button" @click="collapsed = !collapsed">
+            <menu-unfold-outlined />
+          </button>
+          <div class="topbar-header-info">
+            <a-breadcrumb separator="/">
+              <a-breadcrumb-item key="home">
+                <router-link to="/">
+                  <home-outlined />
+                </router-link>
+              </a-breadcrumb-item>
+              <a-breadcrumb-item v-for="bc in breadcrumbs" :key="bc.path">
+                {{ bc.title }}
+              </a-breadcrumb-item>
+            </a-breadcrumb>
+            <h1>{{ currentTitle }}</h1>
+          </div>
         </div>
         <div class="topbar-actions">
-          <div class="date-pill">
+          <div class="header-action-group">
+            <a-tooltip :title="app.isDarkMode ? '切换亮色模式' : '切换暗色模式'">
+              <a-button type="text" shape="circle" @click="app.toggleDarkMode()">
+                <template #icon>
+                  <bulb-outlined v-if="!app.isDarkMode" />
+                  <bulb-filled v-else style="color: #fadb14" />
+                </template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip title="通知">
+              <a-button type="text" shape="circle">
+                <template #icon><bell-outlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip :title="isFullscreen ? '退出全屏' : '全屏'">
+              <a-button type="text" shape="circle" @click="toggleFullscreen">
+                <template #icon>
+                  <fullscreen-outlined v-if="!isFullscreen" />
+                  <fullscreen-exit-outlined v-else />
+                </template>
+              </a-button>
+            </a-tooltip>
+          </div>
+          <div class="date-pill hide-sm">
             <calendar-outlined />
             <span>{{ todayLabel }}</span>
           </div>
@@ -108,45 +145,134 @@
         <router-view />
       </div>
     </main>
+
+    <a-drawer
+      v-if="isMobile"
+      :open="!collapsed"
+      placement="left"
+      :closable="false"
+      @update:open="collapsed = true"
+    >
+      <div class="drawer-brand">
+        <div class="brand-mark">DL</div>
+        <strong>地利骑手</strong>
+      </div>
+      <a-menu
+        v-model:selectedKeys="selectedKeys"
+        mode="inline"
+        @click="onMenuClick(); collapsed = true"
+      >
+        <a-menu-item key="/dashboard">
+          <template #icon><home-outlined /></template>
+          工作台
+        </a-menu-item>
+        <a-menu-item v-if="isAdmin" key="/city">
+          <template #icon><global-outlined /></template>
+          租户管理
+        </a-menu-item>
+        <a-menu-item v-if="isAdmin" key="/substation">
+          <template #icon><apartment-outlined /></template>
+          分站管理
+        </a-menu-item>
+        <a-sub-menu key="merchant">
+          <template #icon><shop-outlined /></template>
+          <template #title>商家管理</template>
+          <a-menu-item key="/merchant/enter">入驻申请</a-menu-item>
+          <a-menu-item key="/merchant/store">店铺管理</a-menu-item>
+        </a-sub-menu>
+        <a-menu-item key="/rider">
+          <template #icon><user-outlined /></template>
+          骑手管理
+        </a-menu-item>
+        <a-menu-item key="/rider/evaluate">
+          <template #icon><star-outlined /></template>
+          骑手评价
+        </a-menu-item>
+        <a-sub-menu key="orders">
+          <template #icon><unordered-list-outlined /></template>
+          <template #title>订单管理</template>
+          <a-menu-item key="/order">订单列表</a-menu-item>
+          <a-menu-item key="/refund">退款管理</a-menu-item>
+          <a-menu-item key="/delivery/order">配送订单</a-menu-item>
+        </a-sub-menu>
+        <a-sub-menu key="config">
+          <template #icon><control-outlined /></template>
+          <template #title>配置中心</template>
+          <a-menu-item key="/config/fee-plan">配送费配置</a-menu-item>
+          <a-menu-item key="/dispatch/rule">调度配置</a-menu-item>
+        </a-sub-menu>
+        <a-sub-menu key="open">
+          <template #icon><api-outlined /></template>
+          <template #title>开放平台</template>
+          <a-menu-item key="/open">应用管理</a-menu-item>
+          <a-menu-item key="/open/mock-delivery">模拟推单</a-menu-item>
+        </a-sub-menu>
+      </a-menu>
+    </a-drawer>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { theme } from 'ant-design-vue'
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import { useAppStore } from '@/stores/app'
 import {
   GlobalOutlined, ApartmentOutlined, ShopOutlined,
   UserOutlined, UnorderedListOutlined, ApiOutlined, DownOutlined, StarOutlined,
-  CalendarOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, ControlOutlined
+  CalendarOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, ControlOutlined,
+  FullscreenOutlined, FullscreenExitOutlined, BellOutlined,
+  BulbOutlined, BulbFilled
 } from '@ant-design/icons-vue'
 const router = useRouter()
 const route = useRoute()
 const auth = useAuthStore()
+const app = useAppStore()
 const collapsed = ref(false)
 const selectedKeys = ref([route.path])
-const titleMap: Record<string, string> = {
-  '/dashboard': '工作台',
-  '/city': '租户管理',
-  '/substation': '分站管理',
-  '/merchant/enter': '商家入驻',
-  '/merchant/store': '店铺管理',
-  '/rider': '骑手管理',
-  '/rider/evaluate': '骑手评价',
-  '/order': '订单列表',
-  '/refund': '退款管理',
-  '/delivery/order': '配送订单',
-  '/config/fee-plan': '配送费配置',
-  '/dispatch/rule': '调度配置',
-  '/open': '开放平台',
-  '/open/mock-delivery': '模拟推单',
+
+const isMobile = ref(window.innerWidth <= 960)
+function handleResize() {
+  isMobile.value = window.innerWidth <= 960
 }
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
 watch(() => route.path, (p) => { selectedKeys.value = [p] })
 const isAdmin = computed(() => auth.userInfo?.role === 'admin')
-const currentTitle = computed(() => titleMap[route.path] || '外卖管理')
+const currentTitle = computed(() => (route.meta.title as string) || '外卖管理')
+
+// Breadcrumbs logic
+const breadcrumbs = computed(() => {
+  return route.matched
+    .filter(r => r.meta && r.meta.title)
+    .map(r => ({
+      title: r.meta.title,
+      path: r.path || '/',
+    }))
+})
+
+const isFullscreen = ref(false)
+function toggleFullscreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+    isFullscreen.value = true
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+      isFullscreen.value = false
+    }
+  }
+}
+
 const avatarText = computed(() => (auth.userInfo?.userNickname || '管理员').slice(0, 1))
 const todayLabel = computed(() => new Intl.DateTimeFormat('zh-CN', {
   month: 'long',
@@ -179,10 +305,10 @@ function handleLogout() {
 .soft-sider,
 .soft-topbar {
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  background: rgba(255, 255, 255, 0.74);
+  border: 1px solid var(--line);
+  background: var(--panel);
   backdrop-filter: blur(22px);
-  box-shadow: 0 16px 40px rgba(130, 110, 218, 0.12);
+  box-shadow: var(--shadow-xl);
 }
 .soft-sider {
@@ -228,8 +354,8 @@ function handleLogout() {
   height: 38px;
   border-radius: 12px;
   border: none;
-  background: rgba(246, 242, 255, 0.9);
-  color: #7f6de5;
+  background: var(--line-strong);
+  color: var(--soft-primary);
   cursor: pointer;
   margin-bottom: 12px;
 }
@@ -285,7 +411,7 @@ function handleLogout() {
 .insight-card strong,
 h1 {
   font-family: 'Outfit', sans-serif;
-  color: #2f2946;
+  color: var(--text-dark);
 }
 .brand-copy span,
@@ -294,7 +420,7 @@ h1 {
 .hero-copy p,
 .insight-card p,
 .note-list {
-  color: #8d88a4;
+  color: var(--text-soft);
 }
 :deep(.ant-menu) {
@@ -310,7 +436,7 @@ h1 {
   margin-top: 10px;
   flex-shrink: 0;
   border-radius: 18px;
-  background: linear-gradient(180deg, rgba(245, 241, 255, 0.85), rgba(255, 247, 250, 0.92));
+  background: var(--panel-tint);
   padding: 12px;
 }
@@ -367,10 +493,11 @@ h1 {
   align-items: center;
   gap: 10px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(194, 184, 237, 0.38);
+  background: var(--panel-strong);
+  border: 1px solid var(--line);
   padding: 7px 10px;
   font-size: 12px;
+  color: var(--text-main);
 }
 .profile-button {
@@ -443,25 +570,68 @@ h1 {
   display: none !important;
 }
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.topbar-header-info h1 {
+  margin: 2px 0 0;
+  font-size: 20px;
+}
+
+.header-action-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 8px;
+}
+
+.mobile-menu-trigger {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  border: none;
+  background: rgba(140, 124, 240, 0.1);
+  color: #8c7cf0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+.drawer-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px 24px;
+}
+
+:deep(.ant-breadcrumb) {
+  font-size: 11px;
+}
+
+:deep(.ant-breadcrumb-link), :deep(.ant-breadcrumb-separator) {
+  color: var(--soft-subtext) !important;
+}
+
 @media (max-width: 960px) {
   .layout-shell {
     grid-template-columns: 1fr;
-    padding: 14px;
+    padding: 12px;
   }
-
-  .soft-sider {
-    position: relative;
-    top: 0;
-    height: auto;
+  
+  .hide-sm {
+    display: none !important;
   }
-  .menu-scroll {
-    overflow: visible;
-    padding-right: 0;
-  }
   .soft-topbar {
-    flex-direction: column;
-    align-items: flex-start;
+    padding: 10px 14px;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 18px;
   }
 }
@@ -110,6 +110,16 @@ router.beforeEach((to) =&gt; {
   if (!to.meta.public && !auth.token) {
     return { path: '/login' }
   }
+  
+  // Start loading progress
+  document.body.classList.add('loading')
+})
+
+router.afterEach(() => {
+  // Stop loading progress
+  setTimeout(() => {
+    document.body.classList.remove('loading')
+  }, 300)
 })
 export default router
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppStore = defineStore('app', () => {
+  const isDarkMode = ref(localStorage.getItem('dark-mode') === 'true')
+
+  function toggleDarkMode() {
+    isDarkMode.value = !isDarkMode.value
+    localStorage.setItem('dark-mode', isDarkMode.value.toString())
+    if (isDarkMode.value) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  // Initialize
+  if (isDarkMode.value) {
+    document.documentElement.classList.add('dark')
+  }
+
+  return {
+    isDarkMode,
+    toggleDarkMode,
+  }
+})
@@ -34,6 +34,7 @@
   --font-size-sm: 12px;
   --font-size-md: 13px;
   --font-size-lg: 15px;
+  --bg-color: #f8f8ff;
   color: var(--text-main);
   font-family: var(--font-body);
   line-height: 1.5;
@@ -42,7 +43,23 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: #f8f8ff;
+  background: var(--bg-color);
+}
+
+.dark {
+  --app-bg: #14111d;
+  --bg-color: #14111d;
+  --panel: rgba(30, 26, 46, 0.76);
+  --panel-strong: rgba(40, 36, 60, 0.9);
+  --panel-tint: linear-gradient(135deg, rgba(74, 58, 145, 0.45), rgba(125, 48, 88, 0.4));
+  --line: rgba(255, 255, 255, 0.1);
+  --line-strong: rgba(255, 255, 255, 0.15);
+  --text-main: #eeecf1;
+  --text-soft: #a4a0b8;
+  --text-dark: #ffffff;
+  --shadow-xl: 0 22px 60px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 16px 35px rgba(0, 0, 0, 0.4);
+  --shadow-sm: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 * {
@@ -92,11 +109,11 @@ a {
 .ant-btn-default {
   border-color: var(--line);
-  background: rgba(255, 255, 255, 0.82);
+  background: var(--panel-strong);
 }
 .ant-card {
-  border: 1px solid rgba(255, 255, 255, 0.55);
+  border: 1px solid var(--line);
   background: var(--panel);
   backdrop-filter: blur(18px);
   border-radius: var(--radius-lg);
@@ -104,7 +121,7 @@ a {
 }
 .ant-card .ant-card-head {
-  border-bottom: 1px solid rgba(188, 180, 230, 0.18);
+  border-bottom: 1px solid var(--line);
   min-height: 56px;
   padding-inline: 20px;
 }
@@ -131,7 +148,7 @@ a {
 }
 .ant-table-wrapper .ant-table-thead > tr > th {
-  background: rgba(244, 240, 255, 0.88);
+  background: var(--panel-strong);
   color: var(--text-dark);
   border-bottom: none;
   font-weight: 700;
@@ -141,15 +158,16 @@ a {
 }
 .ant-table-wrapper .ant-table-tbody > tr > td {
-  border-bottom: 1px solid rgba(226, 220, 247, 0.72);
-  background: rgba(255, 255, 255, 0.48);
+  border-bottom: 1px solid var(--line);
+  background: transparent;
+  color: var(--text-main);
   font-size: var(--font-size-md);
   padding-top: 11px;
   padding-bottom: 11px;
 }
 .ant-table-wrapper .ant-table-tbody > tr:hover > td {
-  background: rgba(247, 242, 255, 0.95) !important;
+  background: var(--line-strong) !important;
 }
 .ant-input,
@@ -160,8 +178,9 @@ a {
 .ant-input-number-input-wrap,
 .ant-picker {
   border-radius: 16px !important;
-  border-color: rgba(189, 180, 234, 0.4) !important;
-  background: rgba(255, 255, 255, 0.78) !important;
+  border-color: var(--line-strong) !important;
+  background: var(--panel-strong) !important;
+  color: var(--text-main) !important;
   box-shadow: none !important;
   font-size: var(--font-size-md);
 }
@@ -201,15 +220,15 @@ a {
 .ant-modal .ant-modal-content,
 .ant-dropdown .ant-dropdown-menu {
   border-radius: 22px;
-  border: 1px solid rgba(228, 223, 247, 0.7);
-  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
   backdrop-filter: blur(24px);
   box-shadow: var(--shadow-xl);
 }
 .ant-modal .ant-modal-header {
   background: transparent;
-  border-bottom: 1px solid rgba(189, 180, 234, 0.18);
+  border-bottom: 1px solid var(--line);
   padding: 18px 20px 12px;
 }
@@ -226,7 +245,7 @@ a {
 .ant-modal .ant-modal-footer {
   padding: 12px 20px 18px;
-  border-top: 1px solid rgba(189, 180, 234, 0.14);
+  border-top: 1px solid var(--line);
 }
 .ant-modal .ant-modal-footer .ant-btn + .ant-btn {
@@ -276,14 +295,15 @@ a {
 .ant-descriptions .ant-descriptions-item-label {
   width: 128px;
-  background: rgba(244, 240, 255, 0.72) !important;
+  background: var(--panel-strong) !important;
   color: var(--text-dark) !important;
   font-size: var(--font-size-md);
   font-weight: 600;
 }
 .ant-descriptions .ant-descriptions-item-content {
-  background: rgba(255, 255, 255, 0.72) !important;
+  background: var(--panel) !important;
+  color: var(--text-main);
   font-size: var(--font-size-md);
 }
@@ -341,10 +361,10 @@ a {
 .ant-menu-submenu-popup .ant-menu {
   padding: 8px !important;
   border-radius: 16px !important;
-  border: 1px solid rgba(228, 223, 247, 0.72) !important;
-  background: rgba(255, 255, 255, 0.96) !important;
+  border: 1px solid var(--line) !important;
+  background: var(--panel-strong) !important;
   backdrop-filter: blur(20px);
-  box-shadow: 0 18px 40px rgba(121, 104, 213, 0.14) !important;
+  box-shadow: var(--shadow-xl) !important;
 }
 .ant-menu-submenu-popup .ant-menu-item,
@@ -359,18 +379,18 @@ a {
 .ant-menu-submenu-popup .ant-menu-item:hover,
 .ant-menu-submenu-popup .ant-menu-submenu-title:hover {
-  background: rgba(244, 240, 255, 0.92) !important;
+  background: var(--line) !important;
 }
 .ant-menu-item:hover,
 .ant-menu-submenu-title:hover {
   color: var(--brand-deep) !important;
-  background: rgba(255, 255, 255, 0.5) !important;
+  background: var(--line) !important;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
   color: var(--brand-deep);
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--panel-strong);
   border-color: rgba(140, 124, 240, 0.45);
   box-shadow: 0 8px 18px rgba(140, 124, 240, 0.12);
 }
@@ -450,8 +470,8 @@ a {
 .soft-note-card {
   border-radius: 16px;
   padding: 14px 16px;
-  background: linear-gradient(135deg, rgba(244, 240, 255, 0.9), rgba(255, 250, 253, 0.9));
-  border: 1px solid rgba(206, 196, 244, 0.36);
+  background: var(--panel-strong);
+  border: 1px solid var(--line);
 }
 .soft-note-card strong {
@@ -478,7 +498,7 @@ a {
 .soft-dashed-block {
   border-radius: 18px;
   border: 1px dashed rgba(180, 170, 231, 0.5);
-  background: rgba(255, 255, 255, 0.48);
+  background: var(--panel);
   padding: 14px;
 }
@@ -103,10 +103,10 @@ async function onSubmit() {
 .login-visual,
 .login-card {
-  border: 1px solid rgba(255, 255, 255, 0.62);
-  background: rgba(255, 255, 255, 0.76);
+  border: 1px solid var(--line);
+  background: var(--panel);
   backdrop-filter: blur(24px);
-  box-shadow: 0 20px 50px rgba(126, 110, 211, 0.15);
+  box-shadow: var(--shadow-xl);
 }
 .login-visual {
@@ -133,7 +133,7 @@ async function onSubmit() {
 .login-visual h1,
 .login-card h2 {
   font-family: 'Outfit', sans-serif;
-  color: #2f2946;
+  color: var(--text-dark);
 }
 .login-visual h1 {
@@ -144,7 +144,7 @@ async function onSubmit() {
 .login-visual p,
 .login-card-head p {
-  color: #8d88a4;
+  color: var(--text-soft);
   max-width: 520px;
 }
@@ -158,13 +158,13 @@ async function onSubmit() {
 .visual-stats > div {
   min-width: 210px;
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--panel-strong);
   padding: 14px 16px;
 }
 .visual-stats span {
   display: block;
-  color: #9893ad;
+  color: var(--text-soft);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -172,7 +172,7 @@ async function onSubmit() {
 }
 .visual-stats strong {
-  color: #342d4f;
+  color: var(--text-dark);
   font-family: 'Outfit', sans-serif;
 }
@@ -847,8 +847,8 @@ onMounted(loadCities)
 .plan-sidebar,
 .plan-content {
   border-radius: 24px;
-  border: 1px solid rgba(194, 185, 239, 0.22);
-  background: rgba(255, 255, 255, 0.58);
+  border: 1px solid var(--line);
+  background: var(--panel);
   padding: 18px;
 }
@@ -867,7 +867,7 @@ onMounted(loadCities)
   flex-direction: column;
   gap: 12px;
   padding-bottom: 6px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76) 78%, rgba(255, 255, 255, 0));
+  background: var(--bg-color);
 }
 .plan-content-body {
@@ -925,8 +925,8 @@ onMounted(loadCities)
 }
 .plan-item {
-  border: 1px solid rgba(194, 185, 239, 0.22);
-  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
   border-radius: 18px;
   padding: 14px;
   text-align: left;
@@ -934,9 +934,9 @@ onMounted(loadCities)
 }
 .plan-item.active {
-  border-color: rgba(140, 124, 240, 0.44);
-  background: rgba(246, 242, 255, 0.95);
-  box-shadow: 0 10px 24px rgba(140, 124, 240, 0.12);
+  border-color: var(--brand);
+  background: var(--panel-tint);
+  box-shadow: var(--shadow-sm);
 }
 .plan-item-top,
@@ -954,10 +954,10 @@ onMounted(loadCities)
   flex-wrap: wrap;
   align-items: center;
   padding: 14px 16px;
-  border: 1px solid rgba(194, 185, 239, 0.22);
+  border: 1px solid var(--line);
   border-radius: 20px;
-  background: rgba(255, 255, 255, 0.88);
-  box-shadow: 0 10px 24px rgba(140, 124, 240, 0.08);
+  background: var(--panel-strong);
+  box-shadow: var(--shadow-sm);
 }
 .plan-toolbar-meta,
@@ -995,9 +995,9 @@ onMounted(loadCities)
 .plan-section {
   padding: 18px 20px 20px;
-  border: 1px solid rgba(194, 185, 239, 0.18);
+  border: 1px solid var(--line);
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--panel-strong);
 }
 .plan-section-last {
@@ -86,18 +86,16 @@ function go(path: string) {
   gap: 14px;
   border-radius: 24px;
   padding: 20px;
-  background:
-    linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62)),
-    linear-gradient(135deg, rgba(198, 185, 255, 0.72), rgba(255, 217, 236, 0.78));
-  border: 1px solid rgba(255, 255, 255, 0.62);
-  box-shadow: 0 18px 44px rgba(132, 114, 212, 0.14);
+  background: var(--panel-tint);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-xl);
 }
 .hero-pill {
   display: inline-flex;
   padding: 6px 12px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.76);
+  background: var(--panel-strong);
   color: #6f5fe2;
   font-size: 12px;
   font-weight: 700;
@@ -110,7 +108,7 @@ function go(path: string) {
   font-size: 24px;
   line-height: 1.15;
   font-family: 'Outfit', sans-serif;
-  color: #2f2946;
+  color: var(--text-dark);
 }
 .hero-copy p {
@@ -123,7 +121,7 @@ function go(path: string) {
 .hero-metric span,
 .quick-link span,
 .soft-notes {
-  color: #8d88a4;
+  color: var(--text-soft);
 }
 .hero-grid {
@@ -136,7 +134,7 @@ function go(path: string) {
 .hero-metric {
   min-width: 190px;
   border-radius: 18px;
-  background: rgba(255, 255, 255, 0.74);
+  background: var(--panel-strong);
   padding: 11px 13px;
 }
@@ -150,7 +148,7 @@ function go(path: string) {
 .hero-metric strong,
 .quick-link strong {
-  color: #322c4a;
+  color: var(--text-dark);
   font-family: 'Outfit', sans-serif;
 }
@@ -204,8 +202,8 @@ function go(path: string) {
 .quick-link {
   text-align: left;
-  border: 1px solid rgba(202, 193, 240, 0.34);
-  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid var(--line);
+  background: var(--panel);
   border-radius: 18px;
   padding: 14px;
   cursor: pointer;
@@ -515,8 +515,8 @@ onMounted(loadCities)
 .plan-sidebar,
 .plan-content {
   border-radius: 24px;
-  border: 1px solid rgba(194, 185, 239, 0.22);
-  background: rgba(255, 255, 255, 0.58);
+  border: 1px solid var(--line);
+  background: var(--panel);
   padding: 18px;
 }
@@ -535,7 +535,7 @@ onMounted(loadCities)
   flex-direction: column;
   gap: 12px;
   padding-bottom: 6px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76) 78%, rgba(255, 255, 255, 0));
+  background: var(--bg-color);
 }
 .plan-content-body {
@@ -583,8 +583,8 @@ onMounted(loadCities)
   min-height: 36px;
   padding: 0 14px;
   border-radius: 999px;
-  border: 1px solid rgba(194, 185, 239, 0.28);
-  background: rgba(246, 242, 255, 0.84);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
 }
 .plan-list {
@@ -595,8 +595,8 @@ onMounted(loadCities)
 }
 .plan-item {
-  border: 1px solid rgba(194, 185, 239, 0.22);
-  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
   border-radius: 18px;
   padding: 14px;
   text-align: left;
@@ -604,9 +604,9 @@ onMounted(loadCities)
 }
 .plan-item.active {
-  border-color: rgba(140, 124, 240, 0.44);
-  background: rgba(246, 242, 255, 0.95);
-  box-shadow: 0 10px 24px rgba(140, 124, 240, 0.12);
+  border-color: var(--brand);
+  background: var(--panel-tint);
+  box-shadow: var(--shadow-sm);
 }
 .plan-item-top,
@@ -630,10 +630,10 @@ onMounted(loadCities)
   flex-wrap: wrap;
   align-items: center;
   padding: 14px 16px;
-  border: 1px solid rgba(194, 185, 239, 0.22);
+  border: 1px solid var(--line);
   border-radius: 20px;
-  background: rgba(255, 255, 255, 0.88);
-  box-shadow: 0 10px 24px rgba(140, 124, 240, 0.08);
+  background: var(--panel-strong);
+  box-shadow: var(--shadow-sm);
 }
 .plan-toolbar-meta,
@@ -682,9 +682,9 @@ onMounted(loadCities)
 .plan-section {
   padding: 18px 20px 20px;
-  border: 1px solid rgba(194, 185, 239, 0.18);
+  border: 1px solid var(--line);
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--panel-strong);
 }
 .plan-section-head {
@@ -778,8 +778,8 @@ onMounted(loadCities)
   min-height: 88px;
   padding: 14px 16px;
   border-radius: 18px;
-  border: 1px solid rgba(194, 185, 239, 0.22);
-  background: rgba(255, 255, 255, 0.84);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
   transition: all 0.2s ease;
 }
@@ -815,11 +815,11 @@ onMounted(loadCities)
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr);
   gap: 14px;
-  border: 1px solid rgba(194, 185, 239, 0.22);
+  border: 1px solid var(--line);
   border-radius: 20px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--panel-strong);
   padding: 16px;
-  box-shadow: 0 12px 24px rgba(140, 124, 240, 0.08);
+  box-shadow: var(--shadow-sm);
 }
 .dispatch-condition-row.disabled {