主题颜色修改

src/App.vue

@@ -19,9 +19,10 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
 
 <template>
   <div class="min-h-screen bg-slate-50 text-slate-900">
-    <header class="sticky top-0 z-20 border-b border-slate-200/70 bg-white/80 backdrop-blur-lg">
+    <div class="h-[3px] bg-brand-600"></div>
+    <header class="sticky top-0 z-20 border-b border-silver-200/70 bg-white/80 backdrop-blur-lg">
       <div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
-        <div class="text-[15px] font-semibold tracking-tight">{{ t('app.title') }}</div>
+        <div class="text-[15px] font-semibold tracking-tight text-brand-700">{{ t('app.title') }}</div>
         <LoginBadge />
       </div>
     </header>
@@ -32,7 +33,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
 
     <nav
       v-if="!hideTabBar"
-      class="fixed inset-x-0 bottom-0 z-20 border-t border-slate-200/70 bg-white/90 pb-safe backdrop-blur-lg"
+      class="fixed inset-x-0 bottom-0 z-20 border-t border-silver-200/70 bg-white/90 pb-safe backdrop-blur-lg"
     >
       <div class="mx-auto grid max-w-3xl grid-cols-4 px-2 py-1.5">
         <RouterLink
@@ -40,7 +41,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
           :key="tab.name"
           :to="tab.path"
           class="flex flex-col items-center rounded-xl py-2 text-xs font-medium transition-colors"
-          :class="route.path === tab.path ? 'text-brand-700' : 'text-slate-500 hover:text-slate-700'"
+          :class="route.path === tab.path ? 'text-brand-700' : 'text-silver-500 hover:text-silver-700'"
         >
           <span
             class="rounded-full px-3 py-1 transition-colors"

src/components/common/Button.vue

@@ -10,7 +10,7 @@ defineProps<{
     class="rounded-full px-4 py-2 text-sm font-medium transition-all hover:brightness-[0.98] active:scale-[0.98] disabled:opacity-50"
     :class="{
       'bg-brand-600 text-white shadow-sm': variant === 'primary',
-      'bg-slate-100 text-slate-700 hover:bg-slate-200': variant === 'secondary' || !variant,
+      'bg-silver-100 text-silver-700 hover:bg-silver-200': variant === 'secondary' || !variant,
       'text-brand-600': variant === 'ghost'
     }"
     :disabled="disabled"

src/components/common/Skeleton.vue

 <template>
   <div class="space-y-3 animate-pulse">
-    <div class="h-24 rounded-2xl border border-slate-100 bg-slate-100/80"></div>
-    <div class="h-[72px] rounded-2xl border border-slate-100 bg-slate-100/80"></div>
-    <div class="h-[72px] rounded-2xl border border-slate-100 bg-slate-100/80"></div>
+    <div class="h-24 rounded-2xl border border-silver-100 bg-silver-100/80"></div>
+    <div class="h-[72px] rounded-2xl border border-silver-100 bg-silver-100/80"></div>
+    <div class="h-[72px] rounded-2xl border border-silver-100 bg-silver-100/80"></div>
   </div>
 </template>

src/components/feature/CustomerCard.vue

@@ -19,7 +19,7 @@ function toneOf(stage: CustomerStage): 'success' | 'warning' | 'neutral' | 'dang
 </script>
 
 <template>
-  <div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
+  <div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
     <div class="flex items-center justify-between gap-3">
       <div class="truncate text-sm font-medium tracking-tight text-slate-900">{{ customer.name }}</div>
       <Badge :tone="toneOf(customer.stage)">{{ t(`customerStage.${customer.stage}`) }}</Badge>

src/components/feature/LoginBadge.vue

@@ -20,7 +20,7 @@ function toggleLocale() {
 <template>
   <div class="flex items-center gap-2">
     <button
-      class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-200"
+      class="rounded-full bg-silver-100 px-2.5 py-1 text-xs font-medium text-silver-600 transition-colors hover:bg-silver-200"
       @click="toggleLocale"
     >
       {{ isHant ? t('lang.zhHans') : t('lang.zhHant') }}

src/components/feature/MetricCard.vue

@@ -9,10 +9,11 @@ defineProps<{
 
 <template>
   <div
-    class="rounded-2xl border border-slate-200/80 bg-white shadow-card transition-shadow hover:shadow-soft"
-    :class="feature ? 'p-5' : 'p-4'"
+    class="rounded-2xl border border-silver-200 bg-white shadow-card transition-shadow hover:shadow-soft"
+    :class="feature ? 'overflow-hidden p-5' : 'border-silver-200 p-4'"
   >
-    <div class="text-xs text-slate-500">{{ label }}</div>
+    <div v-if="feature" class="-mx-5 -mt-5 mb-4 h-1 bg-brand-600"></div>
+    <div class="text-xs text-silver-500">{{ label }}</div>
     <!-- 金额无空格不可断行，字号随屏宽伸缩，防止小屏（小程序 web-view）溢出卡片 -->
     <div
       class="tnum mt-2 font-semibold tracking-tight text-slate-900"

src/components/feature/PipelineCard.vue

@@ -11,14 +11,14 @@ const { t } = useI18n()
 
 /** 失效/保留不应当作待发金额：配色按语义状态分流 */
 function statusClass(status: PipelineItem['status']): string {
-  if (status === 'LAPSED') return 'text-rose-600'
+  if (status === 'LAPSED') return 'text-brand-600'
   if (status === 'RETAINED') return 'text-slate-500'
   return 'text-amber-600'
 }
 </script>
 
 <template>
-  <div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
+  <div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
     <div class="flex items-center justify-between">
       <div>
         <div class="text-sm font-medium tracking-tight">{{ item.policyNo }}</div>

src/components/feature/PolicyCard.vue

@@ -16,7 +16,7 @@ const { t } = useI18n()
 
 <template>
   <button
-    class="flex w-full items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 text-left shadow-card transition-all hover:border-slate-300 hover:shadow-soft active:scale-[0.99]"
+    class="flex w-full items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 text-left shadow-card transition-all hover:border-silver-300 hover:shadow-soft active:scale-[0.99]"
     @click="emit('select', policy.policyNo)"
   >
     <div>

src/components/feature/StatementDetail.vue

@@ -12,38 +12,38 @@ const { t } = useI18n()
 
 <template>
   <div class="space-y-4">
-    <section class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
+    <section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
       <div class="grid grid-cols-2 gap-3 text-sm">
         <div>
-          <div class="text-xs text-slate-500">{{ t('statement.gross') }}</div>
+          <div class="text-xs text-silver-500">{{ t('statement.gross') }}</div>
           <div class="tnum mt-1 font-medium">{{ formatHkd(detail.grossAmount) }}</div>
         </div>
         <div>
-          <div class="text-xs text-slate-500">{{ t('statement.mpf') }}</div>
+          <div class="text-xs text-silver-500">{{ t('statement.mpf') }}</div>
           <div class="tnum mt-1 font-medium">{{ formatHkd(detail.mpfAmount) }}</div>
         </div>
         <div>
-          <div class="text-xs text-slate-500">{{ t('statement.adjustment') }}</div>
+          <div class="text-xs text-silver-500">{{ t('statement.adjustment') }}</div>
           <div class="tnum mt-1 font-medium">{{ formatHkd(detail.adjustmentAmount) }}</div>
         </div>
         <div>
-          <div class="text-xs text-slate-500">{{ t('statement.net') }}</div>
-          <div class="tnum mt-1 font-semibold">{{ formatHkd(detail.netAmount) }}</div>
+          <div class="text-xs text-silver-500">{{ t('statement.net') }}</div>
+          <div class="tnum mt-1 font-semibold text-brand-700">{{ formatHkd(detail.netAmount) }}</div>
         </div>
         <div>
-          <div class="text-xs text-slate-500">{{ t('statement.payDate') }}</div>
+          <div class="text-xs text-silver-500">{{ t('statement.payDate') }}</div>
           <div class="mt-1">{{ detail.payDate }}</div>
         </div>
         <div>
-          <div class="text-xs text-slate-500">{{ t('statement.bankTail') }}</div>
+          <div class="text-xs text-silver-500">{{ t('statement.bankTail') }}</div>
           <div class="mt-1">{{ detail.bankTail }}</div>
         </div>
       </div>
     </section>
 
-    <section class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
+    <section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
       <div class="mb-3 text-sm font-medium">{{ t('statement.amount') }}</div>
-      <div v-for="item in detail.items" :key="item.id" class="border-b border-slate-100 py-3 last:border-0">
+      <div v-for="item in detail.items" :key="item.id" class="border-b border-silver-100 py-3 last:border-0">
         <div class="flex items-center justify-between text-sm">
           <span>{{ item.customerName }}</span>
           <span class="tnum font-medium">{{ formatDetailMoney(item.originalAmount, item.originalCurrency) }}</span>

src/components/feature/StatementList.vue

@@ -19,7 +19,7 @@ const { t } = useI18n()
     <button
       v-for="statement in statements"
       :key="statement.id"
-      class="flex w-full items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 text-left shadow-card transition-all hover:border-slate-300 hover:shadow-soft active:scale-[0.99]"
+      class="flex w-full items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 text-left shadow-card transition-all hover:border-silver-300 hover:shadow-soft active:scale-[0.99]"
       @click="emit('select', statement.id)"
     >
       <div>

src/components/feature/TodoCard.vue

@@ -33,7 +33,7 @@ function markDone() {
 </script>
 
 <template>
-  <div class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card">
+  <div class="flex items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
     <div>
       <div class="text-sm font-medium tracking-tight">{{ typeLabel }}</div>
       <div class="mt-1 text-xs text-slate-500">{{ todo.customerName }} · {{ todo.policyNo }}</div>

src/style.css

@@ -18,7 +18,7 @@
   }
 
   :focus-visible {
-    outline: 2px solid rgb(99 102 241 / 0.55);
+    outline: 2px solid rgb(206 14 45 / 0.45);
     outline-offset: 2px;
   }
 }

src/views/HomeView.vue

@@ -64,7 +64,7 @@ onMounted(load)
       <router-link
         v-if="metrics"
         to="/customers"
-        class="mt-3 flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card transition-shadow hover:shadow-soft"
+        class="mt-3 flex items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 shadow-card transition-shadow hover:shadow-soft"
       >
         <div>
           <div class="text-xs text-slate-500">{{ t('metric.myCustomers') }}</div>
@@ -79,7 +79,7 @@ onMounted(load)
       </router-link>
 
       <section class="mt-7">
-        <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('dashboard.actions') }}</h2>
+        <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('dashboard.actions') }}</h2>
         <div class="mb-3 flex flex-wrap gap-2 text-xs text-slate-500">
           <span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.renewal') }} {{ countByType.renewal }}</span>
           <span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.lapse') }} {{ countByType.lapse }}</span>
@@ -87,7 +87,7 @@ onMounted(load)
         </div>
         <div class="space-y-3">
           <TodoCard v-for="todo in todos" :key="todo.id" :todo="todo" />
-          <div class="rounded-2xl border border-dashed border-slate-200 bg-white/60 p-4">
+          <div class="rounded-2xl border border-dashed border-silver-200 bg-white/60 p-4">
             <div class="text-sm font-medium">{{ t('todo.claim') }}</div>
             <div class="mt-1 text-xs text-slate-400">{{ t('todo.claimPlaceholder') }}</div>
           </div>

src/views/PipelineView.vue

@@ -53,14 +53,14 @@ onMounted(load)
           v-model="policyQuery"
           type="search"
           :placeholder="t('pipeline.filterPolicyPlaceholder')"
-          class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors placeholder:text-slate-400 focus:border-brand-200"
+          class="w-full rounded-xl border border-silver-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors placeholder:text-silver-400 focus:border-brand-200"
         >
       </label>
       <label class="block">
         <span class="mb-1 block text-xs text-slate-500">{{ t('pipeline.filterMonth') }}</span>
         <select
           v-model="selectedMonth"
-          class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors focus:border-brand-200"
+          class="w-full rounded-xl border border-silver-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors focus:border-brand-200"
         >
           <option value="">{{ t('pipeline.allMonths') }}</option>
           <option v-for="month in months" :key="month" :value="month">{{ month }}</option>

src/views/PoliciesView.vue

@@ -44,14 +44,14 @@ onMounted(load)
   <ApiLoader :loading="loading" :error="error" :empty="!loading && !error && policies.length === 0" @retry="load">
     <div class="space-y-6">
       <section>
-        <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('policies.inforce') }}</h2>
+        <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('policies.inforce') }}</h2>
         <div class="space-y-3">
           <PolicyCard v-for="policy in inforce" :key="policy.policyNo" :policy="policy" @select="openCommissions" />
         </div>
       </section>
 
       <section v-if="inactive.length">
-        <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('policies.inactive') }}</h2>
+        <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('policies.inactive') }}</h2>
         <div class="space-y-3">
           <PolicyCard v-for="policy in inactive" :key="policy.policyNo" :policy="policy" @select="openCommissions" />
         </div>

tailwind.config.js

@@ -19,16 +19,26 @@ export default {
       },
       colors: {
         brand: {
-          50: '#eef2ff',
-          100: '#e0e7ff',
-          200: '#c7d2fe',
-          500: '#6366f1',
-          600: '#4f46e5',
-          700: '#4338ca'
+          50: '#FEF0F1',
+          100: '#FDDDE1',
+          200: '#FBBAC3',
+          500: '#CE0E2D',
+          600: '#B60C28',
+          700: '#8E0A1F'
+        },
+        silver: {
+          50: '#F7F7F7',
+          100: '#E8E8E8',
+          200: '#D4D4D4',
+          300: '#B8B8B8',
+          400: '#A0A0A0',
+          500: '#898989',
+          600: '#6F6F6F',
+          700: '#575757'
         },
         success: '#059669',
         warning: '#d97706',
-        danger: '#dc2626'
+        danger: '#CE0E2D'
       },
       boxShadow: {
         card: '0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.05)',

vite.config.ts

@@ -13,8 +13,9 @@ export default defineConfig({
     proxy: {
       // 后端 context-path 即 /csf/api，代理时不 rewrite
       '/csf/api': {
-        target: 'http://localhost:9202',
-        changeOrigin: true
+        target: 'http://center.zuihuibi.cn',
+        changeOrigin: true,
+        secure: false,    
       }
     }
   }