Refactor: Replace hardcoded RGBA colors with global CSS variables for consistent…

… theming and maintainability.

Refactor: Replace hardcoded RGBA colors with global CSS variables for consistent…
… theming and maintainability.
shaofan
1 parent b59f2fb2
Showing 5 changed files with 134 additions and 59 deletions
src/layouts/MainLayout.vue
src/style.css
src/views/config/FeePlanList.vue
src/views/dispatch/DispatchRuleList.vue
src/views/open/OpenMockDelivery.vue
@@ -17,6 +17,7 @@
       <div class="menu-scroll">
         <a-menu
           v-model:selectedKeys="selectedKeys"
+          :theme="app.isDarkMode ? 'dark' : 'light'"
           mode="inline"
           :inline-collapsed="collapsed"
           @click="onMenuClick"
@@ -82,17 +83,18 @@
             <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>
+            <transition name="breadcrumb-fade" mode="out-in">
+              <a-breadcrumb :key="route.path" class="custom-breadcrumb">
+                <template #separator>
+                  <span class="bc-separator"><right-outlined /></span>
+                </template>
+                <a-breadcrumb-item v-for="(bc, idx) in breadcrumbs" :key="idx">
+                  <span :class="idx === breadcrumbs.length - 1 ? 'bc-last' : 'bc-parent'">
+                    {{ bc.title }}
+                  </span>
+                </a-breadcrumb-item>
+              </a-breadcrumb>
+            </transition>
           </div>
         </div>
         <div class="topbar-actions">
@@ -142,7 +144,11 @@
       </header>
  
       <div class="soft-page-shell">
-        <router-view />
+        <router-view v-slot="{ Component }">
+          <transition name="fade-slide" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
       </div>
     </main>
  
@@ -159,6 +165,7 @@
       </div>
       <a-menu
         v-model:selectedKeys="selectedKeys"
+        :theme="app.isDarkMode ? 'dark' : 'light'"
         mode="inline"
         @click="onMenuClick(); collapsed = true"
       >
@@ -223,7 +230,7 @@ import {
   UserOutlined, UnorderedListOutlined, ApiOutlined, DownOutlined, StarOutlined,
   CalendarOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, ControlOutlined,
   FullscreenOutlined, FullscreenExitOutlined, BellOutlined,
-  BulbOutlined, BulbFilled
+  BulbOutlined, BulbFilled, RightOutlined
 } from '@ant-design/icons-vue'
  
 const router = useRouter()
@@ -248,16 +255,30 @@ onUnmounted(() =&gt; {
 watch(() => route.path, (p) => { selectedKeys.value = [p] })
  
 const isAdmin = computed(() => auth.userInfo?.role === 'admin')
-const currentTitle = computed(() => (route.meta.title as string) || '外卖管理')
  
 // Breadcrumbs logic
+const menuParents: Record<string, string> = {
+  '/merchant/enter': '商家管理',
+  '/merchant/store': '商家管理',
+  '/order': '订单管理',
+  '/refund': '订单管理',
+  '/delivery/order': '订单管理',
+  '/config/fee-plan': '配置中心',
+  '/dispatch/rule': '配置中心',
+  '/open': '开放平台',
+  '/open/mock-delivery': '开放平台',
+}
+
 const breadcrumbs = computed(() => {
-  return route.matched
-    .filter(r => r.meta && r.meta.title)
-    .map(r => ({
-      title: r.meta.title,
-      path: r.path || '/',
-    }))
+  const list = []
+  const parentTitle = menuParents[route.path]
+  if (parentTitle) {
+    list.push({ title: parentTitle, path: '' })
+  }
+  if (route.meta && route.meta.title) {
+    list.push({ title: route.meta.title as string, path: route.path })
+  }
+  return list
 })
  
 const isFullscreen = ref(false)
@@ -297,6 +318,7 @@ function handleLogout() {
   grid-template-columns: 280px minmax(0, 1fr);
   gap: 16px;
   padding: 16px;
+  transition: grid-template-columns 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
  
 .layout-shell.collapsed {
@@ -320,6 +342,7 @@ function handleLogout() {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
  
 .menu-scroll {
@@ -355,7 +378,7 @@ function handleLogout() {
   border-radius: 12px;
   border: none;
   background: var(--line-strong);
-  color: var(--soft-primary);
+  color: var(--brand);
   cursor: pointer;
   margin-bottom: 12px;
 }
@@ -576,9 +599,54 @@ h1 {
   gap: 16px;
 }
  
-.topbar-header-info h1 {
-  margin: 2px 0 0;
-  font-size: 20px;
+.topbar-header-info {
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+
+:deep(.custom-breadcrumb) {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+:deep(.custom-breadcrumb li) {
+  display: inline-flex;
+  align-items: center;
+}
+
+.bc-separator {
+  font-size: 11px;
+  opacity: 0.6;
+  color: var(--text-soft);
+  margin: 0 4px;
+}
+
+.bc-parent {
+  color: var(--text-soft) !important;
+  font-size: 14px;
+}
+
+.bc-last {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-main) !important;
+  letter-spacing: 0.5px;
+}
+
+/* Breadcrumb transition */
+.breadcrumb-fade-enter-active,
+.breadcrumb-fade-leave-active {
+  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.breadcrumb-fade-enter-from {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.breadcrumb-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
 }
  
 .header-action-group {
@@ -609,12 +677,18 @@ h1 {
   padding: 12px 16px 24px;
 }
  
-:deep(.ant-breadcrumb) {
-  font-size: 11px;
-}
  
-:deep(.ant-breadcrumb-link), :deep(.ant-breadcrumb-separator) {
-  color: var(--soft-subtext) !important;
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
 }
  
 @media (max-width: 960px) {
@@ -143,7 +143,7 @@ a {
  
 .ant-table-wrapper .ant-table-container {
   border-radius: var(--radius-md);
-  border: 1px solid rgba(194, 185, 239, 0.22);
+  border: 1px solid var(--line);
   overflow: hidden;
 }
  
@@ -338,6 +338,7 @@ a {
   margin-block: 4px !important;
   width: calc(100% - 16px) !important;
   font-size: var(--font-size-md) !important;
+  color: var(--text-main);
 }
  
 .ant-form-item {
@@ -351,11 +352,10 @@ a {
   font-size: var(--font-size-md);
 }
  
-.ant-menu-light .ant-menu-item-selected,
-.ant-menu-light > .ant-menu .ant-menu-item-selected,
-.ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
-  background: linear-gradient(135deg, rgba(140, 124, 240, 0.18), rgba(255, 212, 235, 0.3)) !important;
-  color: var(--brand-deep) !important;
+.ant-menu-item-selected,
+.ant-menu-submenu-selected > .ant-menu-submenu-title {
+  background: var(--panel-tint) !important;
+  color: var(--brand) !important;
 }
  
 .ant-menu-submenu-popup .ant-menu {
@@ -384,15 +384,15 @@ a {
  
 .ant-menu-item:hover,
 .ant-menu-submenu-title:hover {
-  color: var(--brand-deep) !important;
+  color: var(--brand) !important;
   background: var(--line) !important;
 }
  
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
-  color: var(--brand-deep);
+  color: var(--brand);
   background: var(--panel-strong);
-  border-color: rgba(140, 124, 240, 0.45);
-  box-shadow: 0 8px 18px rgba(140, 124, 240, 0.12);
+  border-color: var(--brand);
+  box-shadow: var(--shadow-sm);
 }
  
 .ant-empty {
@@ -913,8 +913,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 {
@@ -985,7 +985,7 @@ onMounted(loadCities)
   border: none;
   border-radius: 12px;
   background: linear-gradient(135deg, #8c7cf0, #a98ff7 55%, #e5b5dc);
-  box-shadow: 0 8px 18px rgba(140, 124, 240, 0.18);
+  box-shadow: var(--shadow-sm);
 }
  
 .plan-save-button:hover,
@@ -1018,9 +1018,9 @@ onMounted(loadCities)
   min-height: 26px;
   padding: 0 12px;
   border-radius: 999px;
-  background: rgba(246, 242, 255, 0.95);
-  border: 1px solid rgba(140, 124, 240, 0.18);
-  color: #7f6de5;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  color: var(--brand);
   font-size: 12px;
   font-weight: 700;
 }
@@ -1049,7 +1049,8 @@ onMounted(loadCities)
  
 .preview-card {
   border-radius: 16px;
-  background: #fafbff;
+  background: var(--panel-strong);
+  border: 1px solid var(--line);
 }
  
 .preview-subtitle {
@@ -672,7 +672,7 @@ onMounted(loadCities)
   border: none;
   border-radius: 12px;
   background: linear-gradient(135deg, #8c7cf0, #a98ff7 55%, #e5b5dc);
-  box-shadow: 0 8px 18px rgba(140, 124, 240, 0.18);
+  box-shadow: var(--shadow-sm);
 }
  
 .plan-save-button:hover,
@@ -701,9 +701,9 @@ onMounted(loadCities)
   min-height: 26px;
   padding: 0 12px;
   border-radius: 999px;
-  background: rgba(246, 242, 255, 0.95);
-  border: 1px solid rgba(140, 124, 240, 0.18);
-  color: #7f6de5;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  color: var(--brand);
   font-size: 12px;
   font-weight: 700;
 }
@@ -796,13 +796,13 @@ onMounted(loadCities)
  
 :deep(.grab-scope-option-checked .grab-scope-card),
 :deep(.grab-scope-option.ant-radio-wrapper-checked .grab-scope-card) {
-  border-color: rgba(140, 124, 240, 0.5);
-  background: rgba(246, 242, 255, 0.96);
-  box-shadow: 0 10px 24px rgba(140, 124, 240, 0.12);
+  border-color: var(--brand);
+  background: var(--panel-tint);
+  box-shadow: var(--shadow-sm);
 }
  
 :deep(.grab-scope-option:hover .grab-scope-card) {
-  border-color: rgba(140, 124, 240, 0.34);
+  border-color: var(--brand);
 }
  
 .dispatch-condition-list {
@@ -835,9 +835,9 @@ onMounted(loadCities)
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 700;
-  color: #7f6de5;
-  background: rgba(246, 242, 255, 0.92);
-  border: 1px solid rgba(140, 124, 240, 0.18);
+  color: var(--brand);
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
 }
  
 .dispatch-condition-content {
@@ -871,7 +871,7 @@ onMounted(loadCities)
 .dispatch-condition-body {
   margin-top: 14px;
   padding-top: 14px;
-  border-top: 1px dashed rgba(194, 185, 239, 0.36);
+  border-top: 1px dashed var(--line);
 }
  
 .dispatch-condition-input {
@@ -523,7 +523,7 @@ watch(
 .mock-form-section {
   margin-top: 8px;
   padding-top: 18px;
-  border-top: 1px solid rgba(206, 196, 244, 0.22);
+  border-top: 1px solid var(--line);
 }
  
 .mock-item-row {