From 2f7113ba5e6bcfcb9b7f171e43e70dc8852a0aac Mon Sep 17 00:00:00 2001
From: becomer <thriving123@126.com>
Date: Fri, 2 Oct 2026 13:33:46 +0800
Subject: [PATCH] =?UTF-8?q?v1.2.106=EF=BC=9A=E5=89=8D=E7=AB=AF=E6=94=B9?=
 =?UTF-8?q?=E7=89=88=E2=80=94=E2=80=94=E8=96=84=E8=8D=B7=E6=B1=BD=E6=B0=B4?=
 =?UTF-8?q?=E9=85=8D=E8=89=B2=20+=20=E8=BD=BB=E9=87=8F=E6=B6=B2=E6=80=81?=
 =?UTF-8?q?=E7=8E=BB=E7=92=83=EF=BC=88iOS=2026=20=E9=A3=8E=E6=A0=BC?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 设计令牌：重映射 Tailwind 色阶为薄荷汽水色板（品牌薄荷青/天空蓝/柠檬/珊瑚），统一圆角、柔和阴影；亮暗两套色板按 WCAG AA 校验
- 外壳：悬浮液态玻璃胶囊 TabBar（滑动高亮、滚动收窄）、透明→玻璃顶栏、切页淡入、居中玻璃 Toast
- 主题：新增「自动/浅色/深色」三档切换（我的页），自动模式保留按时间切换
- 页面：首页/请销假渐变头卡、登录/绑定设备/工单/个人中心精修；后台换主色与导航样式
- 可读性：清理 8–11px 小字号（最小 12px），提高辅助文字灰度对比
- 降级：不支持 backdrop-filter / 减弱透明度 → 实底；减弱动态效果 → 关闭动画
---
 frondend/index.html                           |  12 +-
 frondend/src/App.vue                          |  43 +-
 frondend/src/assets/styles/globals.css        | 452 +++++++++++++++---
 frondend/src/components/ConfirmHost.vue       |   6 +-
 frondend/src/components/GuideOverlay.vue      |  10 +-
 frondend/src/components/UpdateChecker.vue     |   4 +-
 frondend/src/components/ui/button.ts          |  18 +-
 frondend/src/components/ui/card.vue           |   2 +-
 .../src/components/ui/dialog/AppDialog.vue    |  40 +-
 frondend/src/components/ui/input.vue          |   2 +-
 frondend/src/composables/useTheme.ts          |  51 +-
 frondend/src/layouts/MobileLayout.vue         | 181 +++++--
 .../src/views/admin/AdminAnnouncements.vue    |  14 +-
 frondend/src/views/admin/AdminCdks.vue        |   4 +-
 frondend/src/views/admin/AdminLayout.vue      |  28 +-
 frondend/src/views/admin/AdminLogin.vue       |   4 +-
 .../src/views/admin/AdminPendingSchools.vue   |  14 +-
 frondend/src/views/admin/AdminSetup.vue       |   4 +-
 frondend/src/views/admin/AdminUsers.vue       |  20 +-
 frondend/src/views/bind/BindDeviceView.vue    |  16 +-
 frondend/src/views/course/CourseView.vue      |   4 +-
 frondend/src/views/guide/BrowserGuideView.vue |   2 +-
 frondend/src/views/home/HomeView.vue          | 146 +++---
 frondend/src/views/leave/LeaveView.vue        | 134 +++---
 frondend/src/views/login/LoginView.vue        |  91 ++--
 frondend/src/views/profile/ProfileView.vue    |  66 ++-
 frondend/src/views/ticket/TicketDetail.vue    |   4 +-
 frondend/src/views/ticket/TicketList.vue      |  10 +-
 28 files changed, 964 insertions(+), 418 deletions(-)

diff --git a/frondend/index.html b/frondend/index.html
index 2f351fa..d6ccef9 100644
--- a/frondend/index.html
+++ b/frondend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
-    <meta name="theme-color" content="#f5f5f5" />
+    <meta name="theme-color" content="#f3faf7" />
     <title>小助手</title>
     <script>
       // 老内核（Chrome 78~92，即微信 XWEB / 国产浏览器）缺失的 ES2022 运行时 API 补齐。
@@ -29,13 +29,15 @@
       })()
     </script>
     <script>
-      // 暗色主题防闪烁：与 composables/useTheme.ts 保持同一时间规则
-      // （18:00–次日 06:00 暗色），在首屏渲染前预设 html.dark 与状态栏色
+      // 暗色主题防闪烁：与 composables/useTheme.ts 保持同一规则
+      // （用户选择 light/dark 优先；auto 时 18:00–次日 06:00 暗色），在首屏渲染前预设 html.dark 与状态栏色
       ;(function () {
+        var mode = 'auto'
+        try { mode = localStorage.getItem('xz_theme') || 'auto' } catch (e) {}
         var h = new Date().getHours()
-        if (h >= 18 || h < 6) {
+        if (mode === 'dark' || (mode !== 'light' && (h >= 18 || h < 6))) {
           document.documentElement.classList.add('dark')
-          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#15151f')
+          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0f1815')
         }
       })()
     </script>
diff --git a/frondend/src/App.vue b/frondend/src/App.vue
index 3eb2c2f..4864a48 100644
--- a/frondend/src/App.vue
+++ b/frondend/src/App.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
 import { useMessage } from '@/composables/useMessage'
 import UpdateChecker from '@/components/UpdateChecker.vue'
 import ConfirmHost from '@/components/ConfirmHost.vue'
+import { Check, X, Info } from 'lucide-vue-next'
 
 const route = useRoute()
 const { toasts, removeToast } = useMessage()
@@ -36,23 +37,37 @@ watch(
 
   <!-- Toast 容器 -->
   <Teleport to="body">
-    <div class="fixed top-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">
+    <!-- 顶部居中胶囊 Toast（液态玻璃，iOS 风格灵动提示） -->
+    <div
+      class="fixed inset-x-0 top-0 z-[100] flex flex-col items-center gap-2 px-4 pointer-events-none"
+      style="padding-top: calc(env(safe-area-inset-top) + 12px)"
+      role="status"
+      aria-live="polite"
+    >
       <TransitionGroup name="toast">
         <div
           v-for="toast in toasts"
           :key="toast.id"
-          :class="[
-            'px-4 py-3 rounded-lg shadow-lg border text-sm flex items-center gap-2 transition-all',
-            toast.type === 'success' && 'bg-green-50 border-green-200 text-green-700',
-            toast.type === 'error' && 'bg-red-50 border-red-200 text-red-700',
-            toast.type === 'info' && 'bg-blue-50 border-blue-200 text-blue-700',
-          ]"
+          class="glass pointer-events-auto max-w-sm w-fit pl-3 pr-2.5 py-2.5 rounded-full text-sm font-medium text-gray-800 flex items-center gap-2 transition-all"
         >
-          <span class="flex-1">{{ toast.message }}</span>
+          <span
+            :class="[
+              'w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 text-white',
+              toast.type === 'success' && 'bg-green-500',
+              toast.type === 'error' && 'bg-red-500',
+              toast.type === 'info' && 'bg-brand-500',
+            ]"
+          >
+            <Check v-if="toast.type === 'success'" class="w-3.5 h-3.5" :stroke-width="3" />
+            <X v-else-if="toast.type === 'error'" class="w-3.5 h-3.5" :stroke-width="3" />
+            <Info v-else class="w-3.5 h-3.5" :stroke-width="3" />
+          </span>
+          <span class="flex-1 min-w-0 break-words">{{ toast.message }}</span>
           <button
-            class="text-current opacity-50 hover:opacity-100 text-lg leading-none"
+            class="w-6 h-6 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-600 flex-shrink-0"
+            aria-label="关闭提示"
             @click="removeToast(toast.id)"
-          >&times;</button>
+          ><X class="w-3.5 h-3.5" /></button>
         </div>
       </TransitionGroup>
     </div>
@@ -61,17 +76,17 @@ watch(
 
 <style scoped>
 .toast-enter-active {
-  transition: all 0.3s ease-out;
+  transition: all 0.42s cubic-bezier(0.34, 1.36, 0.64, 1);
 }
 .toast-leave-active {
-  transition: all 0.2s ease-in;
+  transition: all 0.22s ease-in;
 }
 .toast-enter-from {
   opacity: 0;
-  transform: translateX(40px);
+  transform: translateY(-16px) scale(0.92);
 }
 .toast-leave-to {
   opacity: 0;
-  transform: translateX(40px);
+  transform: translateY(-10px) scale(0.96);
 }
 </style>
diff --git a/frondend/src/assets/styles/globals.css b/frondend/src/assets/styles/globals.css
index fa0a4d1..933cce7 100644
--- a/frondend/src/assets/styles/globals.css
+++ b/frondend/src/assets/styles/globals.css
@@ -1,28 +1,162 @@
 @import "tailwindcss";
 
 /* 基于 class 的暗色变体：html.dark 时启用 dark:* 工具类
-   （切换逻辑见 composables/useTheme.ts，按浏览器系统时间自动切换） */
+   （切换逻辑见 composables/useTheme.ts：自动 / 亮 / 暗 三档） */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* ============================================================
+ * 设计令牌 · 薄荷汽水（Mint Soda）× 轻量液态玻璃
+ *
+ * 换肤方式：直接重映射 Tailwind 色阶 —— blue → 薄荷品牌色、gray → 薄荷中性灰、
+ * red/rose → 珊瑚、amber → 柠檬、green → 清新绿。全站 1000+ 处色阶类无需逐个
+ * 改写即可统一换肤（历史代码里的 blue-* 即品牌色）；新代码请优先用 brand-*。
+ *
+ * 对比度（WCAG AA，已逐色计算）：亮色下 *-500/600 作文字或白字底色均 ≥ 4.5；
+ * 暗色下品牌按钮白字 ≥ 3（AA 大字/UI 组件级），正文文字 ≥ 4.5。
+ * ============================================================ */
 @theme {
-  --color-background: #f5f5f5;
-  --color-foreground: #1a1a1a;
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC",
+    "MiSans", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+
+  /* —— 品牌 · 薄荷青（brand 与 blue 同值；blue 为历史类名兼容）—— */
+  --color-brand-50: #eafaf5;
+  --color-brand-100: #d2f4ea;
+  --color-brand-200: #a8e9d7;
+  --color-brand-300: #74dac2;
+  --color-brand-400: #2cc5a8;
+  --color-brand-500: #0b8672;
+  --color-brand-600: #0a7866;
+  --color-brand-700: #08604f;
+  --color-brand-800: #0a4d41;
+  --color-brand-900: #0b3f36;
+  --color-blue-50: #eafaf5;
+  --color-blue-100: #d2f4ea;
+  --color-blue-200: #a8e9d7;
+  --color-blue-300: #74dac2;
+  --color-blue-400: #2cc5a8;
+  --color-blue-500: #0b8672;
+  --color-blue-600: #0a7866;
+  --color-blue-700: #08604f;
+  --color-blue-800: #0a4d41;
+  --color-blue-900: #0b3f36;
+
+  /* —— 点缀 · 天空蓝（信息/次强调，取代原 indigo/sky 的位置）—— */
+  --color-sky-50: #eef6ff;
+  --color-sky-100: #dcecfe;
+  --color-sky-400: #5aa9f5;
+  --color-sky-500: #2373c4;
+  --color-sky-600: #1d63a9;
+  --color-indigo-50: #eef6ff;
+  --color-indigo-100: #dcecfe;
+  --color-indigo-500: #2373c4;
+  --color-cyan-400: #5aa9f5;
+
+  /* —— 中性 · 薄荷灰（带一丝青调，比纯灰更通透）—— */
+  --color-gray-50: #f6faf8;
+  --color-gray-100: #edf3f0;
+  --color-gray-200: #dfe8e4;
+  --color-gray-300: #c9d5d0;
+  --color-gray-400: #808e89;
+  --color-gray-500: #66756f;
+  --color-gray-600: #4f5d58;
+  --color-gray-700: #3a4743;
+  --color-gray-800: #263330;
+  --color-gray-900: #17221f;
+  --color-gray-950: #0e1714;
+
+  /* —— 语义 · 珊瑚（危险/错误；red 与 rose 合一，比纯红柔和）—— */
+  --color-red-50: #fff1f2;
+  --color-red-100: #ffe1e4;
+  --color-red-200: #ffc7cd;
+  --color-red-300: #ffa1ab;
+  --color-red-400: #f77a87;
+  --color-red-500: #d63f52;
+  --color-red-600: #bf3446;
+  --color-red-700: #9e2a3a;
+  --color-rose-50: #fff1f4;
+  --color-rose-100: #ffe1e8;
+  --color-rose-200: #ffc8d5;
+  --color-rose-300: #ffa3b8;
+  --color-rose-400: #f7809c;
+  --color-rose-500: #d23c68;
+  --color-rose-600: #b8325a;
+  --color-rose-700: #96284a;
+
+  /* —— 语义 · 清新绿（成功）—— */
+  --color-green-50: #ecfaf2;
+  --color-green-100: #d5f4e2;
+  --color-green-200: #ade8c6;
+  --color-green-400: #4ccb86;
+  --color-green-500: #1f9d58;
+  --color-green-600: #16864a;
+  --color-green-700: #126b3b;
+  --color-emerald-50: #ecfaf2;
+  --color-emerald-200: #ade8c6;
+  --color-emerald-400: #4ccb86;
+  --color-emerald-600: #16864a;
+
+  /* —— 语义 · 柠檬（提醒/公告/积分）—— */
+  --color-amber-50: #fffaeb;
+  --color-amber-100: #fff1c7;
+  --color-amber-200: #ffe39a;
+  --color-amber-300: #ffd45c;
+  --color-amber-400: #f5bd2e;
+  --color-amber-500: #e3a008;
+  --color-amber-600: #9a6200;
+  --color-amber-700: #8a5a00;
+  --color-amber-800: #6e4700;
+  --color-amber-900: #573800;
+  --color-orange-50: #fff5ec;
+  --color-orange-100: #ffe8d4;
+  --color-orange-400: #ffa45c;
+  --color-orange-500: #f08a3c;
+  --color-orange-600: #b35a12;
+
+  /* —— 点缀 · 薰衣草（VIP/特殊标签）—— */
+  --color-purple-50: #f5f2ff;
+  --color-purple-100: #ebe5ff;
+  --color-purple-200: #d9cfff;
+  --color-purple-500: #8b6ce6;
+  --color-purple-600: #6a4bcb;
+
+  /* —— 语义 token（ui/ 组件与语义类使用）—— */
+  --color-background: #f3faf7;
+  --color-foreground: #17221f;
   --color-card: #ffffff;
-  --color-card-foreground: #1a1a1a;
-  --color-primary: #2563eb;
+  --color-card-foreground: #17221f;
+  --color-primary: #0b8672;
   --color-primary-foreground: #ffffff;
-  --color-secondary: #f3f4f6;
-  --color-secondary-foreground: #1f2937;
-  --color-muted: #f3f4f6;
-  --color-muted-foreground: #6b7280;
-  --color-accent: #f3f4f6;
-  --color-accent-foreground: #1f2937;
-  --color-destructive: #ef4444;
+  --color-secondary: #edf3f0;
+  --color-secondary-foreground: #263330;
+  --color-muted: #edf3f0;
+  --color-muted-foreground: #66756f;
+  --color-accent: #eafaf5;
+  --color-accent-foreground: #08604f;
+  --color-destructive: #d63f52;
   --color-destructive-foreground: #ffffff;
-  --color-border: #e5e7eb;
-  --color-input: #e5e7eb;
-  --color-ring: #2563eb;
-  --radius: 0.5rem;
+  --color-border: #dfe8e4;
+  --color-input: #dfe8e4;
+  --color-ring: #2cc5a8;
+
+  /* —— 圆角：控件 / 卡片 / 浮层（同心圆角：内层 = 外层 − 内边距）—— */
+  --radius: 0.75rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1.25rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 1.75rem;
+
+  /* —— 阴影：柔和、带一点品牌色调 —— */
+  --shadow-sm: 0 1px 2px rgb(14 40 34 / 0.04), 0 2px 8px rgb(14 40 34 / 0.04);
+  --shadow: 0 2px 6px rgb(14 40 34 / 0.05), 0 6px 18px rgb(14 40 34 / 0.06);
+  --shadow-md: 0 4px 12px rgb(14 40 34 / 0.07), 0 10px 28px rgb(14 40 34 / 0.06);
+  --shadow-lg: 0 8px 24px rgb(14 40 34 / 0.09), 0 18px 44px rgb(14 40 34 / 0.08);
+  --shadow-xl: 0 12px 32px rgb(14 40 34 / 0.12), 0 24px 60px rgb(14 40 34 / 0.1);
+  --shadow-2xl: 0 20px 50px rgb(14 40 34 / 0.18);
+
+  /* —— 动效 —— */
+  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
+  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 * {
@@ -37,12 +171,18 @@ html, body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  background-color: #e8e8e8;
+  font-family: var(--font-sans);
+  background-color: #e4efea;
   color: var(--color-foreground);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+  text-rendering: optimizeLegibility;
 }
 
-/* 手机容器 — 固定最大宽度，全屏高度，水平居中 */
+/* 手机容器 — 固定最大宽度，全屏高度，水平居中。
+   背景 = 底色 + 三处柔光斑（薄荷 / 天空蓝 / 柠檬），为玻璃层提供可折射的底图；
+   纯 radial-gradient 实现，无 filter: blur，低端机零额外开销。 */
 #app {
   max-width: 430px;
   width: 100%;
@@ -51,89 +191,267 @@ body {
   height: 100vh;
   height: 100dvh;
   margin: 0 auto;
-  background-color: #ffffff;
+  background-color: var(--color-background);
+  background-image:
+    radial-gradient(70% 38% at 0% 0%, rgb(44 197 168 / 0.22), transparent 72%),
+    radial-gradient(55% 32% at 100% 18%, rgb(90 169 245 / 0.16), transparent 72%),
+    radial-gradient(65% 36% at 60% 100%, rgb(255 212 92 / 0.16), transparent 72%);
+  background-attachment: local;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 0 40px rgb(14 40 34 / 0.1);
+  position: relative;
 }
 
-/* 管理后台模式 — 全屏宽度 */
+/* 管理后台模式 — 全屏宽度，不使用光斑背景 */
 #app.admin-mode {
   max-width: none;
   box-shadow: none;
   background-color: transparent;
+  background-image: none;
 }
 
 /* ============================================================
- * 暗色主题（html.dark，由 useTheme.ts 按系统时间自动切换）
+ * 液态玻璃（Liquid Glass，网页近似实现）
+ * 仅用于「浮在内容之上的控件层」：底部胶囊 Tab、顶栏、弹层/抽屉。
+ * 内容卡片保持不透明，保证可读性与低端机滚动性能。
+ * 降级：不支持 backdrop-filter / 系统「减弱透明度」→ 高不透明实底。
+ * ============================================================ */
+.glass {
+  background-color: rgb(255 255 255 / 0.66);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  backdrop-filter: blur(22px) saturate(180%);
+  border: 1px solid rgb(255 255 255 / 0.6);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.75),
+    inset 0 -1px 0 rgb(255 255 255 / 0.25),
+    0 8px 28px rgb(14 40 34 / 0.12);
+}
+.glass-bar {
+  background-color: rgb(243 250 247 / 0.72);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  backdrop-filter: blur(20px) saturate(180%);
+}
+.glass-panel {
+  background-color: rgb(255 255 255 / 0.86);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  backdrop-filter: blur(28px) saturate(180%);
+}
+.dark .glass {
+  background-color: rgb(30 44 40 / 0.62);
+  border-color: rgb(255 255 255 / 0.09);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.08),
+    0 10px 30px rgb(0 0 0 / 0.45);
+}
+.dark .glass-bar {
+  background-color: rgb(15 24 21 / 0.72);
+}
+.dark .glass-panel {
+  background-color: rgb(26 38 34 / 0.88);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .glass { background-color: rgb(255 255 255 / 0.96); }
+  .glass-bar { background-color: rgb(243 250 247 / 0.97); }
+  .glass-panel { background-color: #ffffff; }
+  .dark .glass { background-color: rgb(30 44 40 / 0.98); }
+  .dark .glass-bar { background-color: rgb(15 24 21 / 0.98); }
+  .dark .glass-panel { background-color: #1a2622; }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .glass, .glass-bar, .glass-panel {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .glass { background-color: rgb(255 255 255 / 0.97); }
+  .glass-bar { background-color: rgb(243 250 247 / 0.98); }
+  .glass-panel { background-color: #ffffff; }
+  .dark .glass { background-color: #1e2c28; }
+  .dark .glass-bar { background-color: #0f1815; }
+  .dark .glass-panel { background-color: #1a2622; }
+}
+
+/* 品牌渐变（顶栏/头图/主按钮）：薄荷 → 青绿，右上带一点天空蓝 */
+.bg-brand-gradient {
+  background-color: #0b8672;
+  background-image: linear-gradient(135deg, #12a58b 0%, #0b8672 55%, #0a7a6e 100%);
+}
+.dark .bg-brand-gradient {
+  background-color: #0e6f60;
+  background-image: linear-gradient(135deg, #10856f 0%, #0c6d5d 60%, #0b5f55 100%);
+}
+
+/* 按压反馈：轻微缩放，iOS 风格 */
+.press {
+  transition: transform 0.18s var(--ease-out-soft), opacity 0.18s ease, background-color 0.2s ease, color 0.2s ease;
+}
+.press:active {
+  transform: scale(0.96);
+}
+
+/* 内容进场：轻微上浮淡入 */
+@keyframes rise-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+.rise-in {
+  animation: rise-in 0.42s var(--ease-out-soft) both;
+}
+
+/* 系统「减弱动态效果」：关闭位移/弹簧动画（保留极短时长，保证 animationend 仍会触发） */
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ============================================================
+ * 暗色主题（html.dark）· 墨绿夜
  *
  * Tailwind v4 的颜色工具类均引用 --color-* CSS 变量（bg-white →
- * var(--color-white)），此处整体覆盖变量即可让全站 1000+ 处硬编码
- * 颜色类自动适配，无需逐个加 dark: 变体。深彩色（blue-500 等
- * 品牌/状态色）与遮罩黑保持原值。彩底上的白色元素用类名级规则恢复。
+ * var(--color-white)），此处整体覆盖变量即可让全站硬编码颜色类自动适配。
+ * 规则：
+ *   - 白 / 灰阶反转（越浅的灰在暗色下越亮，保持层次感）；
+ *   - 彩色 50/100/200 浅底 → 对应深色调底；
+ *   - 彩色 400–700 文字色提亮，保证在暗卡片上 ≥ 4.5 对比度；
+ *   - 彩底上的白色元素用类名级规则恢复为纯白（见下方）。
  * ============================================================ */
 .dark {
-  /* —— 基础调色板：白与灰阶（越浅的灰在暗色下越亮，保持层次感）—— */
-  --color-white: #1e1e2a;
-  --color-gray-50: #232331;
-  --color-gray-100: #2a2a3a;
-  --color-gray-200: #36364a;
-  --color-gray-300: #474763;
-  --color-gray-400: #8f8fab;
-  --color-gray-500: #a5a5c3;
-  --color-gray-600: #bcbcd6;
-  --color-gray-700: #d4d4e6;
-  --color-gray-800: #e5e5f0;
-  --color-gray-900: #ededf6;
-  --color-gray-950: #f4f4fa;
-  /* —— 彩色浅底 → 对应暗色调 —— */
-  --color-blue-50: #1c2a4d;
-  --color-blue-100: #243660;
-  --color-red-50: #3d1c28;
-  --color-red-100: #522534;
+  --color-white: #18221f;
+  --color-gray-50: #1c2724;
+  --color-gray-100: #22302c;
+  --color-gray-200: #2c3b36;
+  --color-gray-300: #3b4c46;
+  --color-gray-400: #7f908a;
+  --color-gray-500: #98aba4;
+  --color-gray-600: #b6c5bf;
+  --color-gray-700: #cbd8d3;
+  --color-gray-800: #dde7e3;
+  --color-gray-900: #eaf2ef;
+  --color-gray-950: #f4f8f6;
+
+  --color-brand-50: #163a33;
+  --color-brand-100: #1b4840;
+  --color-brand-200: #22594f;
+  --color-brand-300: #2d7a6b;
+  --color-brand-400: #3ad3b6;
+  --color-brand-500: #16a88d;
+  --color-brand-600: #0e9079;
+  --color-brand-700: #7fe6d0;
+  --color-blue-50: #163a33;
+  --color-blue-100: #1b4840;
+  --color-blue-200: #22594f;
+  --color-blue-300: #2d7a6b;
+  --color-blue-400: #3ad3b6;
+  --color-blue-500: #16a88d;
+  --color-blue-600: #0e9079;
+  --color-blue-700: #7fe6d0;
+  --color-blue-800: #a6efdf;
+
+  --color-sky-50: #172c40;
+  --color-sky-100: #1d3850;
+  --color-sky-500: #6cb4ff;
+  --color-sky-600: #8cc4ff;
+  --color-indigo-50: #172c40;
+  --color-indigo-100: #1d3850;
+  --color-indigo-500: #6cb4ff;
+
+  --color-red-50: #3a1d24;
+  --color-red-100: #4a232c;
+  --color-red-200: #5e2b36;
+  --color-red-300: #7a3442;
+  --color-red-400: #ff8c96;
+  --color-red-500: #f2636f;
+  --color-red-600: #ff8c96;
+  --color-red-700: #ffb3ba;
   --color-rose-50: #3a1c2b;
-  --color-rose-100: #4d2539;
-  --color-green-50: #173224;
-  --color-green-100: #1f4430;
-  --color-amber-50: #3a2f16;
-  --color-amber-100: #4d3f1e;
-  --color-purple-100: #322552;
-  /* —— 语义 token（ui/ 组件与语义类使用）—— */
-  --color-background: #15151f;
-  --color-foreground: #ededf6;
-  --color-card: #1e1e2a;
-  --color-card-foreground: #ededf6;
-  --color-secondary: #262636;
-  --color-secondary-foreground: #d4d4e6;
-  --color-muted: #262636;
-  --color-muted-foreground: #9c9cb8;
-  --color-accent: #262636;
-  --color-accent-foreground: #d4d4e6;
-  --color-border: #33334a;
-  --color-input: #3a3a55;
-  --color-ring: #3b82f6;
+  --color-rose-100: #4a2337;
+  --color-rose-200: #5e2c45;
+  --color-rose-300: #7a3758;
+  --color-rose-400: #ff8fab;
+  --color-rose-500: #ef6a8e;
+  --color-rose-600: #ff8fab;
+  --color-rose-700: #ffb8cb;
+
+  --color-green-50: #14301f;
+  --color-green-100: #183b27;
+  --color-green-200: #1f4d33;
+  --color-green-400: #4ccb86;
+  --color-green-500: #3fbf79;
+  --color-green-600: #4ccb86;
+  --color-green-700: #8fe3b5;
+  --color-emerald-50: #14301f;
+  --color-emerald-200: #1f4d33;
+  --color-emerald-600: #4ccb86;
+
+  --color-amber-50: #332a16;
+  --color-amber-100: #40331a;
+  --color-amber-200: #52411f;
+  --color-amber-300: #b08a2e;
+  --color-amber-400: #f7c54a;
+  --color-amber-500: #e9b23a;
+  --color-amber-600: #f7c54a;
+  --color-amber-700: #ffd978;
+  --color-amber-800: #ffe39a;
+  --color-amber-900: #fff0c2;
+  --color-orange-50: #35251a;
+  --color-orange-100: #44301f;
+  --color-orange-600: #ffb47a;
+
+  --color-purple-50: #261f3d;
+  --color-purple-100: #2f264d;
+  --color-purple-200: #3b3061;
+  --color-purple-600: #b9a5ff;
+
+  --color-background: #0f1815;
+  --color-foreground: #eaf2ef;
+  --color-card: #18221f;
+  --color-card-foreground: #eaf2ef;
+  --color-primary: #0e9079;
+  --color-secondary: #22302c;
+  --color-secondary-foreground: #cbd8d3;
+  --color-muted: #22302c;
+  --color-muted-foreground: #98aba4;
+  --color-accent: #163a33;
+  --color-accent-foreground: #7fe6d0;
+  --color-destructive: #e0505e;
+  --color-border: #2a3934;
+  --color-input: #33443e;
+  --color-ring: #3ad3b6;
 }
 
 /* —— 彩底上的白色元素恢复纯白（--color-white 已被覆盖为卡片暗色）—— */
 .dark .text-white { color: #fff; }
 .dark .text-white\/95 { color: rgb(255 255 255 / 0.95); }
+.dark .text-white\/90 { color: rgb(255 255 255 / 0.9); }
 .dark .text-white\/80 { color: rgb(255 255 255 / 0.8); }
+.dark .text-white\/75 { color: rgb(255 255 255 / 0.75); }
 .dark .text-white\/70 { color: rgb(255 255 255 / 0.7); }
+.dark .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
 .dark .bg-white\/15 { background-color: rgb(255 255 255 / 0.15); }
 .dark .bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
 .dark .bg-white\/25 { background-color: rgb(255 255 255 / 0.25); }
 .dark .hover\:bg-white\/25:hover { background-color: rgb(255 255 255 / 0.25); }
 .dark .ring-white\/30 { --tw-ring-color: rgb(255 255 255 / 0.3); }
+.dark .border-white\/30 { border-color: rgb(255 255 255 / 0.3); }
 
 /* —— 全局容器暗色 —— */
 .dark body {
-  background-color: #0d0d14;
+  background-color: #070c0a;
 }
 .dark #app {
-  background-color: #15151f;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
+  background-color: var(--color-background);
+  background-image:
+    radial-gradient(70% 38% at 0% 0%, rgb(44 197 168 / 0.14), transparent 72%),
+    radial-gradient(55% 32% at 100% 18%, rgb(90 169 245 / 0.09), transparent 72%),
+    radial-gradient(65% 36% at 60% 100%, rgb(255 212 92 / 0.06), transparent 72%);
+  box-shadow: 0 0 40px rgb(0 0 0 / 0.5);
 }
 .dark #app.admin-mode {
   background-color: transparent;
+  background-image: none;
 }
diff --git a/frondend/src/components/ConfirmHost.vue b/frondend/src/components/ConfirmHost.vue
index d0e12ff..33cffba 100644
--- a/frondend/src/components/ConfirmHost.vue
+++ b/frondend/src/components/ConfirmHost.vue
@@ -26,7 +26,7 @@ const { state, respond } = useConfirm()
       <div
         :class="[
           'w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4',
-          state.danger ? 'bg-red-100' : 'bg-blue-100',
+          state.danger ? 'bg-red-100' : 'bg-brand-100',
         ]"
       >
         <AlertTriangle v-if="state.danger" class="w-7 h-7 text-red-500" />
@@ -43,14 +43,14 @@ const { state, respond } = useConfirm()
         <Button
           v-if="!state.alertOnly"
           variant="outline"
-          class="flex-1 h-10 text-sm font-medium"
+          class="flex-1 h-11 text-sm"
           @click="respond(false)"
         >
           {{ state.cancelText || '取消' }}
         </Button>
         <Button
           :variant="state.danger ? 'destructive' : 'default'"
-          class="flex-1 h-10 text-sm font-medium"
+          class="flex-1 h-11 text-sm"
           @click="respond(true)"
         >
           {{ state.confirmText || '确定' }}
diff --git a/frondend/src/components/GuideOverlay.vue b/frondend/src/components/GuideOverlay.vue
index 1a7303f..38d5724 100644
--- a/frondend/src/components/GuideOverlay.vue
+++ b/frondend/src/components/GuideOverlay.vue
@@ -540,11 +540,11 @@ const bubbleStyle = computed(() => {
             <div class="flex-1 min-w-0 mr-2">
               <div class="flex items-center gap-1.5">
                 <span class="text-sm font-medium text-gray-900 whitespace-nowrap">晚签到</span>
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full bg-purple-100 text-purple-600 whitespace-nowrap">晚归签到</span>
+                <span class="text-xs px-1.5 py-0.5 rounded-full bg-purple-100 text-purple-600 whitespace-nowrap">晚归签到</span>
               </div>
               <div class="flex items-center gap-2 mt-1">
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-600 whitespace-nowrap">待签到</span>
-                <span class="text-[10px] text-gray-400 whitespace-nowrap">示例任务</span>
+                <span class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-600 whitespace-nowrap">待签到</span>
+                <span class="text-xs text-gray-400 whitespace-nowrap">示例任务</span>
               </div>
             </div>
             <button
@@ -563,7 +563,7 @@ const bubbleStyle = computed(() => {
         <div ref="bubbleEl" :style="bubbleStyle" class="guide-bubble absolute z-10">
           <!-- 顶部：标识 + 步骤 + 跳过 -->
           <div class="flex items-center gap-2">
-            <span class="flex items-center gap-1 text-[10px] font-semibold text-blue-600 flex-shrink-0">
+            <span class="flex items-center gap-1 text-xs font-semibold text-blue-600 flex-shrink-0">
               <Sparkles class="w-3 h-3" />
               新手引导
             </span>
@@ -586,7 +586,7 @@ const bubbleStyle = computed(() => {
 
           <!-- 标题与说明 -->
           <h3 class="text-[15px] font-bold text-gray-900 mt-2.5">{{ current.title }}</h3>
-          <p v-if="waitingTarget" class="text-[11px] text-blue-500 mt-1.5 font-medium">正在为你切换到目标页面…</p>
+          <p v-if="waitingTarget" class="text-xs text-blue-500 mt-1.5 font-medium">正在为你切换到目标页面…</p>
           <p class="text-xs text-gray-500 leading-relaxed whitespace-pre-line mt-1.5 guide-desc">{{ guideDesc }}</p>
 
           <!-- 操作按钮 -->
diff --git a/frondend/src/components/UpdateChecker.vue b/frondend/src/components/UpdateChecker.vue
index 3dc9dd8..2ccc823 100644
--- a/frondend/src/components/UpdateChecker.vue
+++ b/frondend/src/components/UpdateChecker.vue
@@ -130,13 +130,13 @@ onUnmounted(() => {
     </p>
     <div class="flex gap-2">
       <button
-        class="flex-1 py-2.5 rounded-lg border border-gray-200 text-sm text-gray-600 active:bg-gray-50"
+        class="press flex-1 py-3 rounded-full border border-gray-200 text-sm font-semibold text-gray-600 active:bg-gray-50"
         @click="dismiss"
       >
         稍后
       </button>
       <button
-        class="flex-1 py-2.5 rounded-lg bg-blue-600 text-white text-sm font-medium active:bg-blue-700"
+        class="press flex-1 py-3 rounded-full bg-brand-gradient text-white text-sm font-semibold shadow-md shadow-brand-500/20"
         @click="reloadNow"
       >
         立即刷新
diff --git a/frondend/src/components/ui/button.ts b/frondend/src/components/ui/button.ts
index ea9013a..910150f 100644
--- a/frondend/src/components/ui/button.ts
+++ b/frondend/src/components/ui/button.ts
@@ -3,25 +3,25 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Button } from './button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-all duration-200 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow-md shadow-brand-500/20 hover:brightness-105',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground shadow-md shadow-red-500/20 hover:brightness-105',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-card shadow-sm hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-gray-200',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        default: 'h-10 px-5 py-2',
+        sm: 'h-8 px-3.5 text-xs',
+        lg: 'h-12 px-8 text-base',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
diff --git a/frondend/src/components/ui/card.vue b/frondend/src/components/ui/card.vue
index 643a6d7..45b7645 100644
--- a/frondend/src/components/ui/card.vue
+++ b/frondend/src/components/ui/card.vue
@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="cn('rounded-xl border bg-card text-card-foreground shadow', props.class)">
+  <div :class="cn('rounded-2xl border border-gray-100 bg-card text-card-foreground shadow-sm', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frondend/src/components/ui/dialog/AppDialog.vue b/frondend/src/components/ui/dialog/AppDialog.vue
index 68ea827..77f0c8a 100644
--- a/frondend/src/components/ui/dialog/AppDialog.vue
+++ b/frondend/src/components/ui/dialog/AppDialog.vue
@@ -104,7 +104,7 @@ function onEscapeKeyDown(e: KeyboardEvent) {
     <DialogPortal>
       <!-- 遮罩：reka 会自动加 pointer-events:auto 并响应「点遮罩关闭」 -->
       <DialogOverlay
-        :class="cn('fixed inset-0', props.overlayClass, props.zClass, props.fade && 'app-dialog-fade')"
+        :class="cn('fixed inset-0 app-dialog-overlay', props.overlayClass, props.zClass, props.fade && 'app-dialog-fade')"
       />
 
       <!-- 事件/焦点容器：本身不承载布局（零尺寸），只作为焦点/事件容器。
@@ -137,7 +137,7 @@ function onEscapeKeyDown(e: KeyboardEvent) {
             :class="
               cn(
                 'relative w-full bg-white flex flex-col overflow-hidden shadow-xl max-h-[85vh]',
-                props.variant === 'sheet' ? 'rounded-t-2xl sm:rounded-2xl' : 'rounded-2xl',
+                props.variant === 'sheet' ? 'rounded-t-3xl sm:rounded-3xl app-dialog-sheet' : 'rounded-3xl app-dialog-pop',
                 props.panelClass,
               )
             "
@@ -168,6 +168,42 @@ function onEscapeKeyDown(e: KeyboardEvent) {
 .app-dialog-fade[data-state='closed'] {
   animation: app-dialog-fade-out 0.2s ease;
 }
+/* 遮罩轻度虚化（iOS 弹层背景效果）；低端机仅 2px，开销可控；「减弱透明度」时关闭 */
+.app-dialog-overlay {
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .app-dialog-overlay {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+/* 面板进场：sheet 自底部滑入，center 轻微放大弹出（仅进场；离场随容器一起淡出/卸载）。
+ * fill-mode 用 backwards：动画结束后不残留 transform，避免给内部 fixed 元素制造包含块。 */
+.app-dialog-sheet {
+  animation: app-dialog-sheet-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) backwards;
+}
+.app-dialog-pop {
+  animation: app-dialog-pop-in 0.28s cubic-bezier(0.34, 1.36, 0.64, 1) backwards;
+}
+@media (min-width: 640px) {
+  .app-dialog-sheet {
+    animation-name: app-dialog-pop-in;
+  }
+}
+@keyframes app-dialog-sheet-in {
+  from {
+    transform: translateY(40%);
+    opacity: 0.4;
+  }
+}
+@keyframes app-dialog-pop-in {
+  from {
+    transform: scale(0.94);
+    opacity: 0;
+  }
+}
 @keyframes app-dialog-fade-in {
   from {
     opacity: 0;
diff --git a/frondend/src/components/ui/input.vue b/frondend/src/components/ui/input.vue
index b2e1253..ac1f37a 100644
--- a/frondend/src/components/ui/input.vue
+++ b/frondend/src/components/ui/input.vue
@@ -31,7 +31,7 @@ function onInput(e: Event) {
     :placeholder="placeholder"
     :disabled="disabled"
     :class="cn(
-      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-11 w-full rounded-xl border border-input bg-gray-50 px-3.5 py-1 text-sm transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:bg-card focus-visible:border-brand-400 focus-visible:ring-4 focus-visible:ring-brand-400/15 disabled:cursor-not-allowed disabled:opacity-50',
       props.class
     )"
     @input="onInput"
diff --git a/frondend/src/composables/useTheme.ts b/frondend/src/composables/useTheme.ts
index b013571..7b1691d 100644
--- a/frondend/src/composables/useTheme.ts
+++ b/frondend/src/composables/useTheme.ts
@@ -1,21 +1,44 @@
-// 亮暗主题：按浏览器系统时间自动切换（18:00–次日 06:00 为暗色，其余亮色）。
-// 首屏防闪烁由 index.html 内联脚本完成（同一规则，渲染前预设 .dark）；
-// 本模块在应用启动后接管：立即校正一次，并按分钟轮询，跨过时间阈值时自动切换。
+// 亮暗主题：三档模式 —— auto（默认，按系统时间 18:00–次日 06:00 为暗色）/ light / dark。
+// 用户选择持久化在 localStorage（THEME_KEY）；首屏防闪烁由 index.html 内联脚本完成
+// （同一规则，渲染前预设 .dark）；本模块在应用启动后接管：立即校正一次，
+// auto 模式下按分钟轮询，跨过时间阈值时自动切换。
 // 切换载体为 <html> 上的 .dark class，配合 globals.css 中的暗色变量板生效。
+import { ref } from 'vue'
 
+export type ThemeMode = 'auto' | 'light' | 'dark'
+
+/** 与 index.html 内联脚本保持一致 */
+export const THEME_KEY = 'xz_theme'
 const DARK_START_HOUR = 18
 const DARK_END_HOUR = 6
-const THEME_COLOR_LIGHT = '#f5f5f5'
-const THEME_COLOR_DARK = '#15151f'
+const THEME_COLOR_LIGHT = '#f3faf7'
+const THEME_COLOR_DARK = '#0f1815'
 
 export function isDarkTime(date: Date = new Date()): boolean {
   const h = date.getHours()
   return h >= DARK_START_HOUR || h < DARK_END_HOUR
 }
 
-/** 应用当前时段对应主题，返回是否处于暗色 */
+function readMode(): ThemeMode {
+  try {
+    const v = localStorage.getItem(THEME_KEY)
+    if (v === 'light' || v === 'dark' || v === 'auto') return v
+  } catch {
+    // 隐私模式等场景 localStorage 不可用，按自动处理
+  }
+  return 'auto'
+}
+
+/** 当前主题模式（响应式，供设置入口绑定） */
+export const themeMode = ref<ThemeMode>(readMode())
+/** 当前是否处于暗色（响应式） */
+export const isDark = ref(false)
+
+/** 应用当前模式对应主题，返回是否处于暗色 */
 export function applyTheme(): boolean {
-  const dark = isDarkTime()
+  const mode = themeMode.value
+  const dark = mode === 'dark' || (mode === 'auto' && isDarkTime())
+  isDark.value = dark
   document.documentElement.classList.toggle('dark', dark)
   document
     .querySelector('meta[name="theme-color"]')
@@ -23,9 +46,21 @@ export function applyTheme(): boolean {
   return dark
 }
 
+/** 切换主题模式并持久化 */
+export function setThemeMode(mode: ThemeMode): void {
+  themeMode.value = mode
+  try {
+    if (mode === 'auto') localStorage.removeItem(THEME_KEY)
+    else localStorage.setItem(THEME_KEY, mode)
+  } catch {
+    // 忽略持久化失败，本次会话内仍生效
+  }
+  applyTheme()
+}
+
 let timer: ReturnType<typeof setInterval> | null = null
 
-/** 应用入口调用：立即应用主题并启动分钟级自动切换 */
+/** 应用入口调用：立即应用主题并启动分钟级自动切换（仅 auto 模式下会产生变化） */
 export function initTheme(): void {
   applyTheme()
   if (timer) return
diff --git a/frondend/src/layouts/MobileLayout.vue b/frondend/src/layouts/MobileLayout.vue
index 268c54d..13ecb28 100644
--- a/frondend/src/layouts/MobileLayout.vue
+++ b/frondend/src/layouts/MobileLayout.vue
@@ -26,6 +26,50 @@ const tabs = [
 ]
 
 const activeTab = ref(route.name as string || 'home')
+const activeTabIndex = computed(() => tabs.findIndex((t) => t.name === activeTab.value))
+
+// 悬浮顶栏：仅首页与请/销假页显示
+const showHeader = computed(() => activeTab.value === 'home' || activeTab.value === 'leave')
+
+// 问候语（按本地时间）
+const greeting = computed(() => {
+  const h = new Date().getHours()
+  if (h < 6) return '夜深了'
+  if (h < 11) return '早上好'
+  if (h < 14) return '中午好'
+  if (h < 18) return '下午好'
+  return '晚上好'
+})
+
+// 滚动联动：内容离开顶部 → 顶栏显出玻璃底；向下滚动 → 胶囊 TabBar 收窄，向上滚动 → 展开
+const scrollEl = ref<HTMLElement | null>(null)
+const scrolled = ref(false)
+const tabCollapsed = ref(false)
+let lastScrollTop = 0
+function onContentScroll() {
+  const el = scrollEl.value
+  if (!el) return
+  const top = el.scrollTop
+  scrolled.value = top > 4
+  const delta = top - lastScrollTop
+  const nearBottom = el.scrollHeight - el.clientHeight - top < 24
+  if (top < 60 || nearBottom) tabCollapsed.value = false
+  else if (delta > 6) tabCollapsed.value = true
+  else if (delta < -6) tabCollapsed.value = false
+  lastScrollTop = top
+}
+
+// 切页回到顶部并复位滚动联动状态（各页共享同一滚动容器）
+watch(
+  () => route.name,
+  () => {
+    if (scrollEl.value) scrollEl.value.scrollTop = 0
+    lastScrollTop = 0
+    scrolled.value = false
+    tabCollapsed.value = false
+  },
+  { flush: 'post' },
+)
 
 // 路由变化时同步底部 tab 高亮；回到首页时尝试加载公告强制弹窗（若引导已完成）
 watch(() => route.name, (name) => {
@@ -257,51 +301,90 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <!-- 顶部用户信息栏（首页与请/销假页显示，两页保持一致） -->
-    <div v-if="activeTab === 'home' || activeTab === 'leave'" class="flex-shrink-0 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 pt-3 pb-3">
+  <div class="relative flex flex-col h-full">
+    <!-- 顶部用户信息栏（首页与请/销假页显示，两页保持一致）。
+         悬浮于内容之上：顶部时透明融入背景光斑，内容滚动后渐显液态玻璃底与细分隔线 -->
+    <div
+      v-if="showHeader"
+      class="absolute inset-x-0 top-0 z-30 px-4 pb-2.5 transition-[background-color,box-shadow,backdrop-filter] duration-300"
+      :class="scrolled ? 'glass-bar shadow-[0_1px_0_rgb(14_40_34/0.06)] dark:shadow-[0_1px_0_rgb(255_255_255/0.06)]' : ''"
+      style="padding-top: calc(env(safe-area-inset-top) + 12px)"
+    >
       <div v-if="userInfo" class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0 overflow-hidden">
+        <div class="w-11 h-11 rounded-full bg-brand-gradient ring-2 ring-white shadow-md shadow-brand-500/20 flex items-center justify-center flex-shrink-0 overflow-hidden dark:ring-gray-200">
           <img v-show="userInfo.avatar && !avatarFailed" :src="userInfo.avatar" class="w-full h-full object-cover" @error="avatarFailed = true" />
-          <User v-if="!userInfo.avatar || avatarFailed" class="w-5 h-5 text-white" />
+          <span v-if="!userInfo.avatar || avatarFailed" class="text-base font-bold text-white">{{ (userInfo.realName || userInfo.username || '?')[0] }}</span>
         </div>
         <div class="flex-1 min-w-0">
-          <p class="font-semibold text-sm truncate">{{ userInfo.realName || userInfo.username }}</p>
-          <p class="text-xs text-white/70 truncate">{{ userInfo.schoolName }}</p>
+          <p class="text-xs text-gray-500 truncate">{{ greeting }} · {{ userInfo.schoolName }}</p>
+          <p class="text-[17px] font-bold text-gray-900 tracking-tight truncate">{{ userInfo.realName || userInfo.username }}</p>
         </div>
         <!-- 公告铃铛（首页与请/销假页均显示） -->
-        <button class="relative w-9 h-9 rounded-full bg-white/15 flex items-center justify-center hover:bg-white/25 transition-colors flex-shrink-0" @click="openAnnouncementPanel">
-          <Bell class="w-5 h-5 text-white" />
-          <span v-if="totalUnread > 0" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-bold flex items-center justify-center leading-none">{{ totalUnread > 99 ? '99+' : totalUnread }}</span>
+        <button class="press glass relative w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" aria-label="通知" @click="openAnnouncementPanel">
+          <Bell class="w-[18px] h-[18px] text-gray-700" />
+          <span v-if="totalUnread > 0" class="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-xs font-bold flex items-center justify-center leading-none ring-2 ring-white dark:ring-gray-50">{{ totalUnread > 99 ? '99+' : totalUnread }}</span>
         </button>
       </div>
       <div v-else class="flex items-center gap-3">
-        <div class="w-10 h-10 rounded-full bg-white/20 animate-pulse" />
+        <div class="w-11 h-11 rounded-full bg-gray-200 animate-pulse" />
         <div class="flex-1 space-y-1.5">
-          <div class="h-3 w-28 bg-white/20 rounded animate-pulse" />
-          <div class="h-2.5 w-40 bg-white/20 rounded animate-pulse" />
+          <div class="h-3 w-28 bg-gray-200 rounded animate-pulse" />
+          <div class="h-4 w-36 bg-gray-200 rounded animate-pulse" />
         </div>
       </div>
     </div>
 
-    <!-- 中间内容区（可滚动；bg-background 语义类，亮暗主题自动切换） -->
-    <div class="flex-1 overflow-y-auto bg-background">
-      <router-view />
+    <!-- 中间内容区（可滚动）：上下留出悬浮顶栏 / 胶囊 TabBar 的空间，内容可在玻璃层下方滚动 -->
+    <div
+      ref="scrollEl"
+      class="flex-1 overflow-y-auto overscroll-contain"
+      :style="{
+        paddingTop: showHeader ? 'calc(env(safe-area-inset-top) + 68px)' : undefined,
+        paddingBottom: 'calc(env(safe-area-inset-bottom) + 92px)',
+      }"
+      @scroll.passive="onContentScroll"
+    >
+      <router-view v-slot="{ Component }">
+        <!-- 切页淡入（仅 opacity：不引入 transform，避免页面内 fixed 元素临时以容器为定位基准） -->
+        <div :key="String(route.name)" class="page-fade min-h-full grid">
+          <component :is="Component" />
+        </div>
+      </router-view>
     </div>
 
-    <!-- 底部 TabBar（env 安全区适配 iPhone/iPad 底部 Home 条） -->
-    <div class="flex-shrink-0 bg-white border-t border-gray-100 flex" style="padding-bottom: env(safe-area-inset-bottom)">
-      <button
-        v-for="tab in tabs"
-        :key="tab.name"
-        class="flex-1 flex flex-col items-center justify-center h-14 gap-0.5 transition-colors"
-        :class="activeTab === tab.name ? 'text-blue-500' : 'text-gray-400'"
-        @click="switchTab(tab.name)"
+    <!-- 底部悬浮胶囊 TabBar（液态玻璃）：滑动高亮块指示当前页；向下滚动时收窄、向上滚动时展开。
+         外层 pointer-events:none 让两侧空白处的点击穿透到内容 -->
+    <nav
+      class="absolute inset-x-0 bottom-0 z-30 flex justify-center px-5 pointer-events-none"
+      style="padding-bottom: calc(env(safe-area-inset-bottom) + 12px)"
+      aria-label="主导航"
+    >
+      <div
+        class="glass pointer-events-auto relative flex rounded-full p-1.5 transition-all duration-500 ease-[var(--ease-spring)]"
+        :class="tabCollapsed ? 'w-[64%] h-14' : 'w-full h-[66px]'"
       >
-        <component :is="tab.icon" class="w-5 h-5" />
-        <span class="text-[10px]">{{ tab.label }}</span>
-      </button>
-    </div>
+        <!-- 滑动高亮块 -->
+        <div
+          v-if="activeTabIndex >= 0"
+          class="absolute top-1.5 bottom-1.5 left-1.5 rounded-full bg-brand-500/12 dark:bg-brand-400/15 transition-transform duration-500 ease-[var(--ease-spring)]"
+          :style="{ width: `calc((100% - 12px) / ${tabs.length})`, transform: `translateX(${activeTabIndex * 100}%)` }"
+        />
+        <button
+          v-for="tab in tabs"
+          :key="tab.name"
+          class="press relative z-10 flex-1 flex flex-col items-center justify-center gap-0.5 rounded-full"
+          :class="activeTab === tab.name ? 'text-brand-500 dark:text-brand-400' : 'text-gray-500'"
+          :aria-current="activeTab === tab.name ? 'page' : undefined"
+          @click="switchTab(tab.name)"
+        >
+          <component :is="tab.icon" class="w-[22px] h-[22px] transition-transform duration-300" :class="activeTab === tab.name ? 'scale-110' : ''" :stroke-width="activeTab === tab.name ? 2.4 : 2" />
+          <span
+            class="text-xs leading-none overflow-hidden transition-all duration-300"
+            :class="[activeTab === tab.name ? 'font-semibold' : 'font-medium', tabCollapsed ? 'max-h-0 opacity-0' : 'max-h-4 opacity-100']"
+          >{{ tab.label }}</span>
+        </button>
+      </div>
+    </nav>
 
     <!-- ======== 公告面板（遮罩 + 底部面板） ======== -->
     <AppDialog
@@ -320,11 +403,11 @@ onUnmounted(() => {
       <!-- 标题栏 -->
       <div class="flex items-center justify-between px-5 py-2 flex-shrink-0">
         <div class="flex items-center gap-2">
-          <div class="w-7 h-7 rounded-lg bg-blue-100 flex items-center justify-center">
-            <Bell class="w-4 h-4 text-blue-500" />
+          <div class="w-8 h-8 rounded-xl bg-brand-gradient flex items-center justify-center shadow-sm shadow-brand-500/20">
+            <Bell class="w-4 h-4 text-white" />
           </div>
-          <span class="font-semibold text-gray-900 text-sm">通知</span>
-          <span v-if="totalUnread > 0" class="text-[10px] px-2 py-0.5 rounded-full bg-red-50 text-red-500 font-medium border border-red-100">{{ totalUnread }} 条未读</span>
+          <span class="font-bold text-gray-900 text-base">通知</span>
+          <span v-if="totalUnread > 0" class="text-xs px-2 py-0.5 rounded-full bg-red-50 text-red-500 font-medium border border-red-100">{{ totalUnread }} 条未读</span>
         </div>
         <button class="w-7 h-7 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors" @click="showAnnPanel = false">
           <X class="w-4 h-4 text-gray-400" />
@@ -338,15 +421,15 @@ onUnmounted(() => {
       <div class="flex-1 overflow-y-auto px-5 py-2">
         <!-- ===== 公告分区 ===== -->
         <div v-if="announcements.length > 0" class="mb-1">
-          <p class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-2 mt-1">公告</p>
+          <p class="text-xs font-semibold text-gray-500 tracking-wider mb-2 mt-1">公告</p>
           <div class="space-y-2">
             <div
               v-for="item in announcements"
               :key="'ann-'+item.id"
-              class="rounded-xl p-3.5 transition-all duration-200 cursor-pointer border"
+              class="press rounded-2xl p-3.5 cursor-pointer border"
               :class="item.isRead
                 ? 'bg-white border-gray-100 hover:border-gray-200'
-                : 'bg-blue-50/50 border-blue-100 hover:border-blue-200'"
+                : 'bg-brand-50 border-brand-100 hover:border-brand-200'"
               @click="openDetail(item)"
             >
               <div class="flex items-start gap-3">
@@ -359,7 +442,7 @@ onUnmounted(() => {
                     <p class="text-sm font-medium text-gray-900 truncate">{{ item.title }}</p>
                   </div>
                   <p class="text-xs text-gray-500 leading-relaxed line-clamp-1">{{ item.content }}</p>
-                  <p class="text-[10px] text-gray-400 mt-1">{{ new Date(item.createdAt).toLocaleString('zh-CN') }}</p>
+                  <p class="text-xs text-gray-400 mt-1">{{ new Date(item.createdAt).toLocaleString('zh-CN') }}</p>
                 </div>
                 <ChevronDown class="w-4 h-4 text-gray-300 flex-shrink-0 mt-1 -rotate-90" />
               </div>
@@ -370,15 +453,15 @@ onUnmounted(() => {
         <!-- ===== 工单通知分区 ===== -->
         <div v-if="ticketNotifications.length > 0" class="mb-1">
           <div v-if="announcements.length > 0" class="border-t border-gray-100 my-3" />
-          <p class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-2">工单通知</p>
+          <p class="text-xs font-semibold text-gray-500 tracking-wider mb-2">工单通知</p>
           <div class="space-y-2">
             <div
               v-for="n in ticketNotifications"
               :key="'tkt-'+n.id"
-              class="rounded-xl p-3.5 transition-all duration-200 cursor-pointer border"
+              class="press rounded-2xl p-3.5 cursor-pointer border"
               :class="n.isRead
                 ? 'bg-white border-gray-100 hover:border-gray-200'
-                : 'bg-rose-50/50 border-rose-100 hover:border-rose-200'"
+                : 'bg-rose-50 border-rose-100 hover:border-rose-200'"
               @click="handleTicketNotifClick(n)"
             >
               <div class="flex items-start gap-3">
@@ -392,7 +475,7 @@ onUnmounted(() => {
                     <p class="text-sm font-medium text-gray-900 truncate">{{ n.title }}</p>
                   </div>
                   <p class="text-xs text-gray-500 leading-relaxed line-clamp-1">{{ n.content }}</p>
-                  <p class="text-[10px] text-gray-400 mt-1">{{ n.createdAt }}</p>
+                  <p class="text-xs text-gray-400 mt-1">{{ n.createdAt }}</p>
                 </div>
                 <ChevronDown class="w-4 h-4 text-gray-300 flex-shrink-0 mt-1 -rotate-90" />
               </div>
@@ -430,7 +513,7 @@ onUnmounted(() => {
       :title="detailItem?.title || '公告详情'"
       @update:open="(v: boolean) => { if (!v) showDetail = false }"
     >
-      <div class="h-1.5 bg-gradient-to-r from-blue-500 to-blue-400" />
+      <div class="h-1.5 bg-gradient-to-r from-brand-400 to-sky-400" />
       <div class="p-6">
         <div class="flex items-center justify-between mb-3">
           <div class="flex items-center gap-2.5">
@@ -444,7 +527,7 @@ onUnmounted(() => {
           </button>
         </div>
         <div class="flex items-center gap-2 mb-4">
-          <span class="text-[10px] text-gray-400">{{ detailItem ? new Date(detailItem.createdAt).toLocaleString('zh-CN') : '' }}</span>
+          <span class="text-xs text-gray-400">{{ detailItem ? new Date(detailItem.createdAt).toLocaleString('zh-CN') : '' }}</span>
         </div>
         <div class="bg-gray-50 rounded-xl p-4 max-h-[50vh] overflow-y-auto">
           <p class="text-sm text-gray-600 leading-relaxed whitespace-pre-wrap">{{ detailItem?.content }}</p>
@@ -468,7 +551,7 @@ onUnmounted(() => {
       @update:open="(v: boolean) => { if (!v) handleForcePopupDismiss() }"
     >
       <!-- 顶部装饰条 -->
-      <div class="h-1.5 bg-gradient-to-r from-blue-500 to-blue-400" />
+      <div class="h-1.5 bg-gradient-to-r from-brand-400 to-sky-400" />
       <div class="p-6">
         <div class="flex items-center gap-2.5 mb-2">
             <div class="w-9 h-9 rounded-xl bg-blue-100 flex items-center justify-center">
@@ -488,7 +571,8 @@ onUnmounted(() => {
     <!-- ======== 新手引导入口（全局：所有布局内页面显示；引导展示期间隐藏） ======== -->
     <button
       v-if="!showGuide"
-      class="guide-entry fixed right-3 bottom-20 z-40 flex items-center gap-1.5 rounded-full bg-blue-500/95 pl-3 pr-3.5 py-2 text-white text-xs font-medium shadow-lg shadow-blue-500/30 hover:bg-blue-600 active:scale-95 transition-all"
+      class="guide-entry fixed right-4 z-40 flex items-center gap-1.5 rounded-full bg-brand-gradient pl-3 pr-3.5 py-2 text-white text-xs font-semibold shadow-lg shadow-brand-500/30 active:scale-95 transition-all"
+      style="bottom: calc(env(safe-area-inset-bottom) + 96px)"
       @click="restartGuide"
     >
       <Sparkles class="w-3.5 h-3.5 flex-shrink-0" />
@@ -513,6 +597,13 @@ onUnmounted(() => {
   50% { transform: translateY(-6px); }
 }
 .guide-entry {
-  animation: guide-bob 1.5s ease-in-out infinite;
+  animation: guide-bob 1.8s ease-in-out infinite;
+}
+/* 切页淡入：仅 opacity，避免 transform 让页面内 fixed 元素临时相对容器定位 */
+.page-fade {
+  animation: page-fade-in 0.32s ease backwards;
+}
+@keyframes page-fade-in {
+  from { opacity: 0; }
 }
 </style>
diff --git a/frondend/src/views/admin/AdminAnnouncements.vue b/frondend/src/views/admin/AdminAnnouncements.vue
index 5944ae9..0c4c9cd 100644
--- a/frondend/src/views/admin/AdminAnnouncements.vue
+++ b/frondend/src/views/admin/AdminAnnouncements.vue
@@ -258,7 +258,7 @@ function scopeLabel(item: AnnouncementEx) {
               <span class="inline-flex items-center gap-1.5">
                 <span
                   v-if="item.isPinned"
-                  class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-rose-100 text-rose-600 whitespace-nowrap"
+                  class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-rose-100 text-rose-600 whitespace-nowrap"
                 >置顶</span>
                 <span class="font-medium text-gray-900 truncate">{{ item.title }}</span>
               </span>
@@ -270,7 +270,7 @@ function scopeLabel(item: AnnouncementEx) {
             <!-- 来源 -->
             <td class="px-4 py-3">
               <span
-                class="text-[10px] px-1.5 py-0.5 rounded-full font-medium whitespace-nowrap"
+                class="text-xs px-1.5 py-0.5 rounded-full font-medium whitespace-nowrap"
                 :class="item.source === 'system' ? 'bg-gray-100 text-gray-600' : 'bg-blue-100 text-blue-700'"
               >
                 <Bot v-if="item.source === 'system'" class="w-3 h-3 inline mr-0.5" />
@@ -279,7 +279,7 @@ function scopeLabel(item: AnnouncementEx) {
             </td>
             <!-- 推送范围 -->
             <td class="px-4 py-3">
-              <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium whitespace-nowrap"
+              <span class="text-xs px-1.5 py-0.5 rounded-full font-medium whitespace-nowrap"
                 :class="item.targetUserId ? 'bg-amber-100 text-amber-700' : (item.targetType === 'agent' ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700')"
               >
                 <User v-if="item.targetUserId" class="w-3 h-3 inline mr-0.5" />
@@ -423,7 +423,7 @@ function scopeLabel(item: AnnouncementEx) {
             placeholder="输入用户ID"
             class="h-10 text-sm"
           />
-          <p class="text-[10px] text-gray-400 mt-1">可以在用户管理页面查看用户ID</p>
+          <p class="text-xs text-gray-400 mt-1">可以在用户管理页面查看用户ID</p>
         </div>
 
         <div class="flex items-center gap-3">
@@ -439,7 +439,7 @@ function scopeLabel(item: AnnouncementEx) {
           </button>
           <div>
             <label class="text-sm font-medium text-gray-700">强制弹出</label>
-            <p class="text-[10px] text-gray-400">用户未读时自动弹出公告对话框</p>
+            <p class="text-xs text-gray-400">用户未读时自动弹出公告对话框</p>
           </div>
         </div>
 
@@ -456,7 +456,7 @@ function scopeLabel(item: AnnouncementEx) {
           </button>
           <div>
             <label class="text-sm font-medium text-gray-700">循环弹窗</label>
-            <p class="text-[10px] text-gray-400">每次刷新页面或进入首页都会强制弹窗（无视已读状态，需同时开启强制弹窗）</p>
+            <p class="text-xs text-gray-400">每次刷新页面或进入首页都会强制弹窗（无视已读状态，需同时开启强制弹窗）</p>
           </div>
         </div>
 
@@ -474,7 +474,7 @@ function scopeLabel(item: AnnouncementEx) {
           </button>
           <div>
             <label class="text-sm font-medium text-gray-700">置顶公告</label>
-            <p class="text-[10px] text-gray-400">显示在打卡页面顶部，横向循环滚动展示（仅普通用户，不进入用户公告列表）</p>
+            <p class="text-xs text-gray-400">显示在打卡页面顶部，横向循环滚动展示（仅普通用户，不进入用户公告列表）</p>
           </div>
         </div>
 
diff --git a/frondend/src/views/admin/AdminCdks.vue b/frondend/src/views/admin/AdminCdks.vue
index d88aa86..16d21ee 100644
--- a/frondend/src/views/admin/AdminCdks.vue
+++ b/frondend/src/views/admin/AdminCdks.vue
@@ -543,7 +543,7 @@ function statusClass(s: string) {
           >
             <code class="font-mono text-xs text-gray-800">{{ cdk.code }}</code>
             <button
-              class="flex-shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] transition-colors"
+              class="flex-shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs transition-colors"
               :class="copiedResultIdx === resultCdks.indexOf(cdk) ? 'text-green-600 bg-green-50' : 'text-blue-500 hover:bg-blue-50'"
               @click="copyResultCode(cdk.code, resultCdks.indexOf(cdk))"
             >
@@ -565,7 +565,7 @@ function statusClass(s: string) {
             {{ copiedAll ? '已复制全部' : '复制全部CDK' }}
           </Button>
         </div>
-        <p class="text-center text-[10px] text-gray-300 mt-2">
+        <p class="text-center text-xs text-gray-300 mt-2">
           提示：CDK 按行分隔，可直接粘贴到表格/文档批量分发
         </p>
       </template>
diff --git a/frondend/src/views/admin/AdminLayout.vue b/frondend/src/views/admin/AdminLayout.vue
index 34f8e02..907a6d5 100644
--- a/frondend/src/views/admin/AdminLayout.vue
+++ b/frondend/src/views/admin/AdminLayout.vue
@@ -154,9 +154,9 @@ function handleLogout() {
 </script>
 
 <template>
-  <div class="min-h-dvh bg-gray-100 flex">
+  <div class="min-h-dvh bg-gray-50 flex">
     <!-- 手机端顶栏 -->
-    <div class="fixed top-0 left-0 right-0 h-14 bg-white border-b border-gray-200 flex items-center px-4 gap-3 z-30 md:hidden">
+    <div class="fixed top-0 left-0 right-0 h-14 glass-bar border-b border-gray-200/70 flex items-center px-4 gap-3 z-30 md:hidden">
       <button
         class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
         @click="toggleSidebar"
@@ -165,7 +165,7 @@ function handleLogout() {
         <X v-else class="w-5 h-5 text-gray-700" />
       </button>
       <div class="flex items-center gap-2">
-        <div class="w-7 h-7 rounded-md bg-blue-600 flex items-center justify-center">
+        <div class="w-7 h-7 rounded-lg bg-brand-gradient flex items-center justify-center shadow-sm shadow-brand-500/20">
           <Shield class="w-3.5 h-3.5 text-white" />
         </div>
         <span class="font-medium text-gray-900 text-sm">管理后台</span>
@@ -174,7 +174,7 @@ function handleLogout() {
       <!-- 手机端铃铛 -->
       <button class="relative w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100" @click="openAnnPanel">
         <Bell class="w-5 h-5 text-gray-600" />
-        <span v-if="unreadCount > 0" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-bold flex items-center justify-center leading-none">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+        <span v-if="unreadCount > 0" class="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-xs font-bold flex items-center justify-center leading-none">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
       </button>
     </div>
 
@@ -196,21 +196,21 @@ function handleLogout() {
     >
         <!-- Logo（桌面） -->
         <div class="h-16 flex items-center gap-2.5 px-5 border-b border-gray-100 hidden md:flex">
-          <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
+          <div class="w-8 h-8 rounded-xl bg-brand-gradient flex items-center justify-center shadow-sm shadow-brand-500/20">
             <Shield class="w-4 h-4 text-white" />
           </div>
-          <span class="font-semibold text-gray-900 text-sm flex-1">管理后台</span>
+          <span class="font-bold tracking-tight text-gray-900 text-[15px] flex-1">管理后台</span>
           <!-- 桌面端铃铛 -->
           <button class="relative w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100" @click="openAnnPanel">
             <Bell class="w-4 h-4 text-gray-500" />
-            <span v-if="unreadCount > 0" class="absolute -top-0.5 -right-0.5 min-w-[14px] h-3.5 px-1 rounded-full bg-red-500 text-white text-[8px] font-bold flex items-center justify-center leading-none">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+            <span v-if="unreadCount > 0" class="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-xs font-bold flex items-center justify-center leading-none">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
           </button>
         </div>
 
         <!-- 手机端顶部关闭 -->
         <div class="h-14 flex items-center justify-between px-4 border-b border-gray-100 md:hidden">
           <div class="flex items-center gap-2">
-            <div class="w-7 h-7 rounded-md bg-blue-600 flex items-center justify-center">
+            <div class="w-7 h-7 rounded-lg bg-brand-gradient flex items-center justify-center shadow-sm shadow-brand-500/20">
               <Shield class="w-3.5 h-3.5 text-white" />
             </div>
             <span class="font-medium text-gray-900 text-sm">管理后台</span>
@@ -225,10 +225,10 @@ function handleLogout() {
           <button
             v-for="item in visibleNavItems"
             :key="item.name"
-            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors"
+            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-colors"
             :class="activeNav === item.name
-              ? 'bg-blue-50 text-blue-700 font-medium'
-              : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"
+              ? 'bg-brand-50 text-brand-700 font-semibold'
+              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'"
             @click="navigateTo(item)"
           >
             <component :is="item.icon" class="w-4 h-4 flex-shrink-0" />
@@ -284,7 +284,7 @@ function handleLogout() {
           <div class="flex items-center gap-2">
             <Bell class="w-5 h-5 text-blue-500" />
             <span class="font-semibold text-gray-900 text-sm">公告</span>
-            <span v-if="unreadCount > 0" class="text-[10px] px-1.5 py-0.5 rounded-full bg-red-100 text-red-600 font-medium">{{ unreadCount }} 条未读</span>
+            <span v-if="unreadCount > 0" class="text-xs px-1.5 py-0.5 rounded-full bg-red-100 text-red-600 font-medium">{{ unreadCount }} 条未读</span>
           </div>
           <button class="w-7 h-7 rounded-full hover:bg-gray-100 flex items-center justify-center" @click="showAnnPanel = false">
             <X class="w-4 h-4 text-gray-400" />
@@ -319,7 +319,7 @@ function handleLogout() {
                 <div class="flex-1 min-w-0">
                   <p class="text-sm font-medium text-gray-900" :class="{ 'font-semibold': !item.isRead }">{{ item.title }}</p>
                   <p class="text-xs text-gray-500 leading-relaxed mt-0.5 line-clamp-1">{{ item.content }}</p>
-                  <p class="text-[10px] text-gray-400 mt-1">{{ new Date(item.createdAt).toLocaleString('zh-CN') }}</p>
+                  <p class="text-xs text-gray-400 mt-1">{{ new Date(item.createdAt).toLocaleString('zh-CN') }}</p>
                 </div>
               </div>
             </div>
@@ -354,7 +354,7 @@ function handleLogout() {
           </button>
         </div>
         <div class="flex items-center gap-2 mb-4">
-          <span class="text-[10px] text-gray-400">{{ detailItem ? new Date(detailItem.createdAt).toLocaleString('zh-CN') : '' }}</span>
+          <span class="text-xs text-gray-400">{{ detailItem ? new Date(detailItem.createdAt).toLocaleString('zh-CN') : '' }}</span>
         </div>
         <div class="bg-gray-50 rounded-xl p-4 max-h-[50vh] overflow-y-auto">
           <p class="text-sm text-gray-600 leading-relaxed whitespace-pre-wrap">{{ detailItem?.content }}</p>
diff --git a/frondend/src/views/admin/AdminLogin.vue b/frondend/src/views/admin/AdminLogin.vue
index be12a4a..1732e5d 100644
--- a/frondend/src/views/admin/AdminLogin.vue
+++ b/frondend/src/views/admin/AdminLogin.vue
@@ -49,11 +49,11 @@ async function handleLogin() {
 </script>
 
 <template>
-  <div class="min-h-dvh flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+  <div class="min-h-dvh flex items-center justify-center bg-gradient-to-br from-brand-50 via-gray-50 to-sky-50 p-4">
     <div class="w-full max-w-md">
       <!-- 标题 -->
       <div class="text-center mb-8">
-        <div class="w-16 h-16 rounded-2xl bg-blue-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-200">
+        <div class="w-16 h-16 rounded-2xl bg-brand-gradient flex items-center justify-center mx-auto mb-4 shadow-xl shadow-brand-500/30">
           <Shield class="w-8 h-8 text-white" />
         </div>
         <h1 class="text-2xl font-bold text-gray-900">管理后台</h1>
diff --git a/frondend/src/views/admin/AdminPendingSchools.vue b/frondend/src/views/admin/AdminPendingSchools.vue
index be06765..76aa6b9 100644
--- a/frondend/src/views/admin/AdminPendingSchools.vue
+++ b/frondend/src/views/admin/AdminPendingSchools.vue
@@ -209,7 +209,7 @@ async function copyText(text: string) {
           {{ name }}<span v-if="i < adaptedSchools.size - 1">、</span>
         </template>
       </p>
-      <p class="text-[10px] text-green-500 mt-1">以下学校已适配完成，若有新登录失败反馈请优先核对该学校登录流程</p>
+      <p class="text-xs text-green-500 mt-1">以下学校已适配完成，若有新登录失败反馈请优先核对该学校登录流程</p>
     </div>
 
     <!-- 搜索 -->
@@ -250,14 +250,14 @@ async function copyText(text: string) {
               <span class="text-sm font-semibold text-gray-900">{{ group.schoolName }}</span>
               <span
                 v-if="adaptedSchools.has(group.schoolId)"
-                class="text-[10px] px-1.5 py-0.5 rounded-full bg-green-50 text-green-600 font-medium border border-green-100"
+                class="text-xs px-1.5 py-0.5 rounded-full bg-green-50 text-green-600 font-medium border border-green-100"
               >
                 已适配
               </span>
-              <span class="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-50 text-amber-600 font-medium border border-amber-100">
+              <span class="text-xs px-1.5 py-0.5 rounded-full bg-amber-50 text-amber-600 font-medium border border-amber-100">
                 {{ group.count }} 条
               </span>
-              <span class="text-[10px] text-gray-400 font-mono">{{ group.schoolId }}</span>
+              <span class="text-xs text-gray-400 font-mono">{{ group.schoolId }}</span>
             </div>
             <div class="flex items-center gap-1.5">
               <Button
@@ -343,14 +343,14 @@ async function copyText(text: string) {
                 <!-- 状态 -->
                 <td class="px-5 py-3">
                   <span
-                    class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium"
+                    class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium"
                     :class="r.status === 'pending' ? 'bg-amber-50 text-amber-600' : r.status === 'rejected' ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600'"
                   >
                     {{ r.status === 'pending' ? '待处理' : r.status === 'rejected' ? '已拒绝' : '已完成' }}
                   </span>
                   <p
                     v-if="r.status === 'rejected' && r.rejectReason"
-                    class="text-[10px] text-red-400 mt-1 max-w-[180px] leading-snug"
+                    class="text-xs text-red-400 mt-1 max-w-[180px] leading-snug"
                     :title="r.rejectReason"
                   >理由：{{ r.rejectReason }}</p>
                 </td>
@@ -410,7 +410,7 @@ async function copyText(text: string) {
         placeholder="请说明拒绝理由（必填），理由将通过邮件通知该学校的联系邮箱"
         class="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-300 focus:outline-none focus:ring-2 focus:ring-red-100 focus:border-red-300 resize-none"
       ></textarea>
-      <p class="text-[11px] text-gray-400 mt-1">发送后将邮件通知该条记录的联系邮箱</p>
+      <p class="text-xs text-gray-400 mt-1">发送后将邮件通知该条记录的联系邮箱</p>
       <div class="flex justify-end gap-2 mt-5">
         <Button variant="outline" size="sm" class="h-9 text-xs" :disabled="rejectSubmitting" @click="closeRejectModal">
           取消
diff --git a/frondend/src/views/admin/AdminSetup.vue b/frondend/src/views/admin/AdminSetup.vue
index 65d6f0c..f146914 100644
--- a/frondend/src/views/admin/AdminSetup.vue
+++ b/frondend/src/views/admin/AdminSetup.vue
@@ -59,11 +59,11 @@ async function handleSetup() {
 </script>
 
 <template>
-  <div class="min-h-dvh flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+  <div class="min-h-dvh flex items-center justify-center bg-gradient-to-br from-brand-50 via-gray-50 to-sky-50 p-4">
     <div class="w-full max-w-md">
       <!-- 标题 -->
       <div class="text-center mb-8">
-        <div class="w-16 h-16 rounded-2xl bg-blue-600 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-200">
+        <div class="w-16 h-16 rounded-2xl bg-brand-gradient flex items-center justify-center mx-auto mb-4 shadow-xl shadow-brand-500/30">
           <Shield class="w-8 h-8 text-white" />
         </div>
         <h1 class="text-2xl font-bold text-gray-900">初始化管理员</h1>
diff --git a/frondend/src/views/admin/AdminUsers.vue b/frondend/src/views/admin/AdminUsers.vue
index 6b58338..b6354e7 100644
--- a/frondend/src/views/admin/AdminUsers.vue
+++ b/frondend/src/views/admin/AdminUsers.vue
@@ -491,11 +491,11 @@ function todayStatusLabel(s: string) {
           >
             <td class="px-4 py-3">
               <p class="font-mono text-xs text-gray-700 truncate" :title="user.studentId">{{ user.studentId || '--' }}</p>
-              <p class="text-[10px] text-gray-400 truncate">{{ user.realName || '--' }}</p>
+              <p class="text-xs text-gray-400 truncate">{{ user.realName || '--' }}</p>
             </td>
             <td class="px-4 py-3">
               <p class="text-xs text-gray-700 truncate" :title="user.schoolName">{{ user.schoolName || '--' }}</p>
-              <p class="text-[10px] font-mono text-gray-400 flex items-center gap-1 min-w-0">
+              <p class="text-xs font-mono text-gray-400 flex items-center gap-1 min-w-0">
                 <span v-if="user.mobileCode" class="truncate" :title="user.mobileCode">{{ maskDeviceCode(user.mobileCode) }}</span>
                 <span v-else>未绑定</span>
                 <button
@@ -516,14 +516,14 @@ function todayStatusLabel(s: string) {
             <td class="px-4 py-3">
               <span
                 v-if="user.vipStatus === 'active'"
-                class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-700"
+                class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-700"
                 :title="`VIP 到期时间：${user.vipExpireAt}`"
               >
                 VIP · {{ user.vipExpireAt.slice(5, 10) }}
               </span>
               <span
                 v-else-if="user.vipStatus === 'expired'"
-                class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-gray-100 text-gray-400"
+                class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-gray-100 text-gray-400"
                 :title="`VIP 已于 ${user.vipExpireAt} 过期`"
               >
                 VIP · 已过期
@@ -541,7 +541,7 @@ function todayStatusLabel(s: string) {
             </td>
             <td class="px-4 py-3">
               <span
-                class="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+                class="text-xs px-1.5 py-0.5 rounded-full font-medium"
                 :class="user.todayStatus === 'success' ? 'bg-green-100 text-green-700' : user.todayStatus === 'fail' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-400'"
               >
                 {{ todayStatusLabel(user.todayStatus) }}
@@ -550,7 +550,7 @@ function todayStatusLabel(s: string) {
             <td class="px-4 py-3 text-xs text-gray-500">{{ user.createdAt }}</td>
             <td class="px-4 py-3">
               <p class="font-mono text-xs text-gray-700" :title="user.lastLoginIp || undefined">{{ user.lastLoginIp || '--' }}</p>
-              <p class="text-[10px] text-gray-400">{{ user.lastLoginAt || '未登录' }}</p>
+              <p class="text-xs text-gray-400">{{ user.lastLoginAt || '未登录' }}</p>
             </td>
             <td class="px-4 py-3 text-center whitespace-nowrap">
               <div class="flex items-center justify-center gap-1">
@@ -888,10 +888,10 @@ function todayStatusLabel(s: string) {
               <td class="px-4 py-2.5 text-xs text-gray-500 whitespace-nowrap tabular-nums">{{ formatLogTime(log.createdAt) }}</td>
               <td class="px-4 py-2.5 truncate" :title="`${log.realName || ''}（${log.username}）`">
                 <p class="text-gray-900 truncate leading-tight">{{ log.realName || log.username || '--' }}</p>
-                <p class="text-[11px] text-gray-400 truncate leading-tight">{{ log.schoolName || '--' }}</p>
+                <p class="text-xs text-gray-400 truncate leading-tight">{{ log.schoolName || '--' }}</p>
               </td>
               <td class="px-4 py-2.5">
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-gray-100 text-gray-600">
+                <span class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-gray-100 text-gray-600">
                   {{ taskTypeLabel(log.taskType) }}
                 </span>
               </td>
@@ -901,14 +901,14 @@ function todayStatusLabel(s: string) {
               <td class="px-4 py-2.5">
                 <div class="flex flex-col items-start gap-1">
                   <span
-                    class="text-[10px] px-1.5 py-0.5 rounded-full font-medium inline-block whitespace-nowrap"
+                    class="text-xs px-1.5 py-0.5 rounded-full font-medium inline-block whitespace-nowrap"
                     :class="log.isSuccess ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
                   >
                     {{ log.isSuccess ? '成功' : '失败' }}
                   </span>
                   <span
                     v-if="log.deleted"
-                    class="text-[10px] px-1.5 py-0.5 rounded-full font-medium inline-block whitespace-nowrap bg-gray-100 text-gray-400 border border-gray-200"
+                    class="text-xs px-1.5 py-0.5 rounded-full font-medium inline-block whitespace-nowrap bg-gray-100 text-gray-400 border border-gray-200"
                     title="用户已在客户端删除该日志，后台统计仍计入"
                   >
                     已删除
diff --git a/frondend/src/views/bind/BindDeviceView.vue b/frondend/src/views/bind/BindDeviceView.vue
index 65ec901..460b22d 100644
--- a/frondend/src/views/bind/BindDeviceView.vue
+++ b/frondend/src/views/bind/BindDeviceView.vue
@@ -47,7 +47,7 @@ async function generateQrImage(url: string): Promise<string> {
   ctx.restore()
 
   // 3. 绘制蓝色手机图标（SVG → Image）
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>`
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0b8672" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>`
   const svgBlob = new Blob([svg], { type: 'image/svg+xml' })
   const svgUrl = URL.createObjectURL(svgBlob)
 
@@ -160,14 +160,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="min-h-full flex flex-col bg-gradient-to-b from-blue-50 to-white">
+  <div class="min-h-full flex flex-col">
     <!-- 顶部说明 -->
-    <div class="px-6 pt-6 pb-4 text-center">
-      <div class="w-14 h-14 rounded-2xl bg-blue-500 flex items-center justify-center mx-auto mb-3 shadow-lg shadow-blue-200">
+    <div class="px-6 pb-4 text-center rise-in" style="padding-top: calc(env(safe-area-inset-top) + 32px)">
+      <div class="w-16 h-16 rounded-[20px] bg-brand-gradient flex items-center justify-center mx-auto mb-3 shadow-xl shadow-brand-500/30">
         <Smartphone class="w-7 h-7 text-white" />
       </div>
-      <h1 class="text-xl font-bold text-gray-900">绑定设备</h1>
-      <p class="text-sm text-gray-400 mt-1">请扫描二维码，绑定设备信息</p>
+      <h1 class="text-[22px] font-bold tracking-tight text-gray-900">绑定设备</h1>
+      <p class="text-sm text-gray-500 mt-1">请扫描二维码，绑定设备信息</p>
     </div>
 
     <div class="flex-1 flex flex-col items-center px-6">
@@ -179,7 +179,7 @@ onUnmounted(() => {
 
       <!-- 二维码 + 自动轮询 -->
       <div v-else-if="status === 'show-qr' || status === 'polling'" class="w-full max-w-xs">
-        <div class="bg-white rounded-2xl border border-gray-100 shadow-lg p-6 text-center">
+        <div class="bg-white rounded-3xl border border-gray-100/80 shadow-xl p-6 text-center rise-in">
           <!-- QR Code（单一合成图片，含 logo） -->
           <div class="w-48 h-48 mx-auto bg-white border-2 border-gray-100 rounded-xl flex items-center justify-center mb-4">
             <img
@@ -211,7 +211,7 @@ onUnmounted(() => {
         </div>
 
         <!-- 使用说明 -->
-        <div class="mt-4 bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
+        <div class="mt-4 bg-white rounded-2xl border border-gray-100/80 p-4 shadow-sm">
           <h3 class="text-sm font-semibold text-gray-900 mb-3">操作步骤</h3>
           <div class="space-y-3">
             <div class="flex items-start gap-3">
diff --git a/frondend/src/views/course/CourseView.vue b/frondend/src/views/course/CourseView.vue
index 5711f75..c59cde6 100644
--- a/frondend/src/views/course/CourseView.vue
+++ b/frondend/src/views/course/CourseView.vue
@@ -13,9 +13,9 @@ function goTicket() {
 </script>
 
 <template>
-  <div class="flex flex-col min-h-full bg-gray-50">
+  <div class="flex flex-col min-h-full">
     <!-- 顶部导航 -->
-    <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
+    <div class="sticky top-0 z-10 glass-bar border-b border-gray-200/60" style="padding-top: env(safe-area-inset-top)">
       <div class="flex items-center px-4 h-12">
         <h1 class="flex-1 text-center text-base font-semibold text-gray-900">网课</h1>
       </div>
diff --git a/frondend/src/views/guide/BrowserGuideView.vue b/frondend/src/views/guide/BrowserGuideView.vue
index 9654d02..feaab5b 100644
--- a/frondend/src/views/guide/BrowserGuideView.vue
+++ b/frondend/src/views/guide/BrowserGuideView.vue
@@ -143,7 +143,7 @@ function fallbackCopy(text: string) {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #3b82f6;
+  color: #0b8672;
   background: #eff6ff;
 }
 
diff --git a/frondend/src/views/home/HomeView.vue b/frondend/src/views/home/HomeView.vue
index 75b6b73..b80c8f7 100644
--- a/frondend/src/views/home/HomeView.vue
+++ b/frondend/src/views/home/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { CheckCircle, Clock, Bell, Calendar, Plus, Play, Trash2, ListTodo, MapPin, LoaderCircle, Edit3, Upload, Pencil, X, Gift, Smartphone, Star, Megaphone } from 'lucide-vue-next'
+import { CheckCircle, Clock, Plus, Play, Trash2, ListTodo, MapPin, LoaderCircle, Edit3, Upload, Pencil, X, Gift, Smartphone, Star, Megaphone } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import AppDialog from '@/components/ui/dialog/AppDialog.vue'
 import jsQR from 'jsqr'
@@ -1175,7 +1175,7 @@ function getGPSLocation(source: string) {
   <!-- ======== 加载骨架 ======== -->
   <div v-if="loading" class="p-4 space-y-4">
     <!-- 签到管理区域骨架 -->
-    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
+    <div class="bg-white rounded-2xl border border-gray-100/80 p-4 shadow-sm">
       <div class="flex items-center justify-between mb-3">
         <div class="space-y-2 flex-1">
           <div class="h-4 w-24 bg-gray-100 rounded animate-pulse" />
@@ -1196,7 +1196,7 @@ function getGPSLocation(source: string) {
     </div>
 
     <!-- 任务列表骨架 -->
-    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
+    <div class="bg-white rounded-2xl border border-gray-100/80 p-4 shadow-sm">
       <div class="h-4 w-16 bg-gray-100 rounded animate-pulse mb-3" />
       <div class="space-y-2">
         <div v-for="i in 2" :key="'t'+i" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
@@ -1244,53 +1244,51 @@ function getGPSLocation(source: string) {
       </div>
     </div>
 
-    <!-- 签到创建入口 -->
-    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
-      <div class="flex items-center justify-between mb-3">
+    <!-- 签到创建入口（品牌渐变头卡）+ 统计 -->
+    <div class="relative overflow-hidden rounded-3xl bg-brand-gradient p-5 text-white shadow-lg shadow-brand-500/25 rise-in">
+      <!-- 装饰光斑 -->
+      <div class="pointer-events-none absolute -right-10 -top-12 w-40 h-40 rounded-full bg-white/15" />
+      <div class="pointer-events-none absolute -right-2 top-16 w-20 h-20 rounded-full bg-white/10" />
+      <div class="relative flex items-start justify-between">
         <div>
-          <p class="text-sm font-semibold text-gray-900">打卡管理</p>
-          <p class="text-xs text-gray-400 mt-0.5">创建并执行每日签到任务</p>
+          <p class="text-lg font-bold tracking-tight">打卡管理</p>
+          <p class="text-xs text-white/80 mt-0.5">创建并执行每日签到任务</p>
         </div>
-        <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
-          <ListTodo class="w-5 h-5 text-blue-500" />
+        <div class="w-11 h-11 rounded-2xl bg-white/20 flex items-center justify-center">
+          <ListTodo class="w-5 h-5 text-white" />
+        </div>
+      </div>
+      <!-- 统计（嵌在头卡内，四宫格） -->
+      <div class="relative grid grid-cols-4 gap-2 mt-4">
+        <div class="rounded-2xl bg-white/15 py-2.5 text-center">
+          <p class="text-xl font-bold leading-tight tabular-nums">{{ tasks.filter(t => t.taskStatus === 'success').length }}</p>
+          <p class="text-xs text-white/80 mt-0.5">已完成</p>
+        </div>
+        <div class="rounded-2xl bg-white/15 py-2.5 text-center">
+          <p class="text-xl font-bold leading-tight tabular-nums">{{ tasks.filter(t => t.matchStatus === 'matched_signed').length }}</p>
+          <p class="text-xs text-white/80 mt-0.5">已签到</p>
+        </div>
+        <div class="rounded-2xl bg-white/15 py-2.5 text-center">
+          <p class="text-xl font-bold leading-tight tabular-nums">{{ tasks.filter(t => t.taskStatus === 'pending' && t.matchStatus !== 'matched_signed').length }}</p>
+          <p class="text-xs text-white/80 mt-0.5">待签到</p>
+        </div>
+        <div class="rounded-2xl bg-white/15 py-2.5 text-center">
+          <p class="text-xl font-bold leading-tight tabular-nums">{{ tasks.length }}</p>
+          <p class="text-xs text-white/80 mt-0.5">任务数</p>
         </div>
       </div>
       <button
         data-guide="home-create-task"
         @click="startCreateTask"
-        class="w-full flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg py-2.5 text-sm font-medium transition-colors"
+        class="press relative mt-4 w-full flex items-center justify-center gap-2 bg-white text-brand-600 rounded-full py-3 text-sm font-semibold shadow-md shadow-black/5 dark:bg-[#f4fbf8] dark:text-[#0a6b5c]"
       >
-        <Plus class="w-4 h-4" />
+        <Plus class="w-4 h-4" :stroke-width="2.6" />
         新的打卡任务
       </button>
     </div>
 
-    <!-- 统计卡片 -->
-    <div class="grid grid-cols-4 gap-2">
-      <div class="bg-white rounded-xl border border-gray-100 p-2.5 text-center shadow-sm">
-        <Calendar class="w-4 h-4 text-blue-500 mx-auto mb-0.5" />
-        <p class="text-base font-bold text-gray-900">{{ tasks.filter(t => t.taskStatus === 'success').length }}</p>
-        <p class="text-[9px] text-gray-400">已完成</p>
-      </div>
-      <div class="bg-white rounded-xl border border-gray-100 p-2.5 text-center shadow-sm">
-        <CheckCircle class="w-4 h-4 text-green-500 mx-auto mb-0.5" />
-        <p class="text-base font-bold text-gray-900">{{ tasks.filter(t => t.matchStatus === 'matched_signed').length }}</p>
-        <p class="text-[9px] text-gray-400">已签到</p>
-      </div>
-      <div class="bg-white rounded-xl border border-gray-100 p-2.5 text-center shadow-sm">
-        <Bell class="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
-        <p class="text-base font-bold text-gray-900">{{ tasks.filter(t => t.taskStatus === 'pending' && t.matchStatus !== 'matched_signed').length }}</p>
-        <p class="text-[9px] text-gray-400">待签到</p>
-      </div>
-      <div class="bg-white rounded-xl border border-gray-100 p-2.5 text-center shadow-sm">
-        <Clock class="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
-        <p class="text-base font-bold text-gray-900">{{ tasks.length }}</p>
-        <p class="text-[9px] text-gray-400">任务数</p>
-      </div>
-    </div>
-
     <!-- 任务列表（不显示 WID） -->
-    <div data-guide="home-task-list" class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
+    <div data-guide="home-task-list" class="bg-white rounded-2xl border border-gray-100/80 p-4 shadow-sm">
       <h3 class="text-sm font-semibold text-gray-900 mb-3">打卡任务</h3>
 
       <div v-if="tasks.length > 0" class="space-y-2">
@@ -1303,34 +1301,34 @@ function getGPSLocation(source: string) {
           <div class="flex-1 min-w-0">
             <div class="flex items-center gap-1.5">
               <span class="text-sm font-medium text-gray-900 truncate min-w-0">{{ task.title }}</span>
-              <span class="text-[10px] px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap" :class="task.taskType === 'sleep_check' ? 'bg-purple-100 text-purple-600' : (task.taskType === 'return_register' ? 'bg-amber-100 text-amber-600' : 'bg-blue-100 text-blue-600')">{{ taskTypeLabel(task.taskType) }}</span>
+              <span class="text-xs px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap" :class="task.taskType === 'sleep_check' ? 'bg-purple-100 text-purple-600' : (task.taskType === 'return_register' ? 'bg-amber-100 text-amber-600' : 'bg-blue-100 text-blue-600')">{{ taskTypeLabel(task.taskType) }}</span>
             </div>
             <div class="flex items-center gap-2 mt-1">
               <!-- 每任务只显示一个最相关的状态标签；当天已成功执行优先显示"已签到"：
                    今日校园侧签到状态同步有延迟时 matchStatus 可能仍是未签到，应以本地成功为准 -->
               <template v-if="task.taskStatus === 'success' || task.matchStatus === 'matched_signed'">
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-green-100 text-green-600">已签到</span>
+                <span class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-green-100 text-green-600">已签到</span>
               </template>
               <template v-else-if="task.matchStatus === 'matched_unsigned'">
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-blue-100 text-blue-600">未签到</span>
+                <span class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-blue-100 text-blue-600">未签到</span>
               </template>
               <template v-else-if="task.matchStatus === 'no_match'">
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-600">未匹配</span>
+                <span class="text-xs px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-600">未匹配</span>
               </template>
               <template v-else>
-                <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium" :class="statusBadge(task.taskStatus)">
+                <span class="text-xs px-1.5 py-0.5 rounded-full font-medium" :class="statusBadge(task.taskStatus)">
                   {{ statusLabel(task.taskStatus) }}
                 </span>
               </template>
-              <span class="text-[10px] text-gray-400">{{ new Date(task.createdAt).toLocaleString('zh-CN') }}</span>
+              <span class="text-xs text-gray-400">{{ new Date(task.createdAt).toLocaleString('zh-CN') }}</span>
             </div>
             <!-- 错误信息：仅在没有 SSE 执行状态时显示（避免与 execMessage 重复） -->
             <div v-if="task.taskStatus === 'fail' && task.errorMessage && executingId !== task.id" class="mt-1">
-              <span class="text-[10px] text-red-500 leading-tight block" v-html="task.errorMessage"></span>
+              <span class="text-xs text-red-500 leading-tight block" v-html="task.errorMessage"></span>
             </div>
             <!-- 执行状态信息 -->
             <div v-if="executingId === task.id && execMessage" class="mt-1">
-              <span class="text-[10px] text-blue-500 leading-tight block">{{ execMessage }}</span>
+              <span class="text-xs text-blue-500 leading-tight block">{{ execMessage }}</span>
             </div>
           </div>
           <div class="flex items-center gap-1 ml-2">
@@ -1388,7 +1386,7 @@ function getGPSLocation(source: string) {
     </div>
 
     <!-- 任务日志列表 -->
-    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm mt-4">
+    <div class="bg-white rounded-2xl border border-gray-100/80 p-4 shadow-sm mt-4">
       <h3 class="text-sm font-semibold text-gray-900 mb-3">打卡日志</h3>
 
       <div v-if="loadingLogs" class="flex items-center justify-center py-6">
@@ -1404,23 +1402,23 @@ function getGPSLocation(source: string) {
           <div class="flex-1 min-w-0">
             <div class="flex items-center gap-1.5">
               <span class="text-xs font-medium text-gray-900 truncate">{{ log.title }}</span>
-              <span v-if="log.realTitle && log.realTitle !== log.title" class="text-[10px] text-gray-400 truncate">→ {{ log.realTitle }}</span>
+              <span v-if="log.realTitle && log.realTitle !== log.title" class="text-xs text-gray-400 truncate">→ {{ log.realTitle }}</span>
             </div>
             <div class="flex items-center gap-2 mt-0.5">
               <span
-                class="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+                class="text-xs px-1.5 py-0.5 rounded-full font-medium"
                 :class="log.isSuccess ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
               >
                 {{ log.isSuccess ? '成功' : '失败' }}
               </span>
-              <span class="text-[10px] text-gray-400">{{ new Date(log.createdAt).toLocaleString('zh-CN') }}</span>
+              <span class="text-xs text-gray-400">{{ new Date(log.createdAt).toLocaleString('zh-CN') }}</span>
             </div>
             <div v-if="!log.isSuccess && log.errorMessage" class="mt-0.5">
-              <span class="text-[10px] text-red-500 leading-tight block" v-html="log.errorMessage"></span>
+              <span class="text-xs text-red-500 leading-tight block" v-html="log.errorMessage"></span>
             </div>
           </div>
           <span
-            class="text-[10px] px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap ml-2"
+            class="text-xs px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap ml-2"
             :class="log.taskType === 'sleep_check' ? 'bg-purple-100 text-purple-600' : (log.taskType === 'return_register' ? 'bg-amber-100 text-amber-600' : 'bg-blue-100 text-blue-600')"
           >
             {{ taskTypeLabel(log.taskType) }}
@@ -1481,7 +1479,7 @@ function getGPSLocation(source: string) {
           >
             <div class="flex items-center gap-1.5">
               <p class="text-sm font-medium text-gray-900 flex-1 min-w-0 truncate">{{ item.taskName }}</p>
-              <span class="text-[10px] px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap" :class="item.taskType === 'sleep_check' ? 'bg-purple-100 text-purple-600' : (item.taskType === 'return_register' ? 'bg-amber-100 text-amber-600' : 'bg-blue-100 text-blue-600')">{{ taskTypeLabel(item.taskType) }}</span>
+              <span class="text-xs px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap" :class="item.taskType === 'sleep_check' ? 'bg-purple-100 text-purple-600' : (item.taskType === 'return_register' ? 'bg-amber-100 text-amber-600' : 'bg-blue-100 text-blue-600')">{{ taskTypeLabel(item.taskType) }}</span>
             </div>
           </div>
           <div v-if="titles.length === 0 && !loadingTitles" class="text-center py-8">
@@ -1510,23 +1508,23 @@ function getGPSLocation(source: string) {
           <!-- 名称匹配实时校验：匹配不到现有任务时立即提示（与执行打卡时的匹配规则一致） -->
           <div
             v-if="matchedTitleNames && matchedTitleNames.length === 0"
-            class="text-[11px] text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2 leading-relaxed"
+            class="text-xs text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2 leading-relaxed"
           >
             当前名称匹配不到现有的打卡任务，请修改名称后再进入下一步。
           </div>
           <div
             v-else-if="matchedTitleNames"
-            class="text-[11px] text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2 leading-relaxed"
+            class="text-xs text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2 leading-relaxed"
           >
             可匹配到现有任务：{{ matchedTitleHint }}
           </div>
           <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
             <p class="text-xs text-amber-700 font-medium">💡 标题匹配提示</p>
-            <p class="text-[11px] text-amber-600 mt-1 leading-relaxed">
-              如果任务标题含有日期等会变化的部分，可以用 <code class="bg-amber-100 px-1 rounded text-[11px] font-mono">*</code> 代替。
+            <p class="text-xs text-amber-600 mt-1 leading-relaxed">
+              如果任务标题含有日期等会变化的部分，可以用 <code class="bg-amber-100 px-1 rounded text-xs font-mono">*</code> 代替。
             </p>
-            <p class="text-[11px] text-amber-600 mt-1 leading-relaxed">
-              例如：<code class="bg-amber-100 px-1 rounded text-[11px] font-mono">*晚自习签到</code> 会匹配 "8月21日晚自习签到"、"9月1日晚自习签到" 等。
+            <p class="text-xs text-amber-600 mt-1 leading-relaxed">
+              例如：<code class="bg-amber-100 px-1 rounded text-xs font-mono">*晚自习签到</code> 会匹配 "8月21日晚自习签到"、"9月1日晚自习签到" 等。
             </p>
           </div>
         </div>
@@ -1565,8 +1563,8 @@ function getGPSLocation(source: string) {
                 <MapPin v-else class="w-4 h-4" />
               </button>
             </div>
-            <p v-if="item.colName === 'lon' && gpsError" class="text-[10px] text-red-400">{{ gpsError }}</p>
-            <p v-if="item.tip && !gpsError" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.colName === 'lon' && gpsError" class="text-xs text-red-400">{{ gpsError }}</p>
+            <p v-if="item.tip && !gpsError" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
 
           <!-- 普通输入框（地址、原因等） -->
@@ -1578,7 +1576,7 @@ function getGPSLocation(source: string) {
               :placeholder="'请输入' + item.title"
               class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-blue-400"
             />
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
 
           <!-- 单选项 -->
@@ -1597,7 +1595,7 @@ function getGPSLocation(source: string) {
                 {{ opt.content }}
               </button>
             </div>
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
             <!-- 范围外签到原因联动 -->
             <div v-if="item.colName === 'isMalposition' && item.content === '是'" class="mt-2 space-y-1">
               <label class="text-xs font-medium text-gray-600">范围外签到原因 <span class="text-red-400">*</span></label>
@@ -1636,7 +1634,7 @@ function getGPSLocation(source: string) {
                 <span>上传二维码图片</span>
               </div>
             </div>
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
 
           <!-- 图片：点击直接选文件替换，不拉伸、无输入框 -->
@@ -1652,7 +1650,7 @@ function getGPSLocation(source: string) {
                 class="w-24 h-24 flex flex-col items-center justify-center gap-1 border-2 border-dashed border-gray-300 rounded-lg text-blue-500"
               >
                 <LoaderCircle class="w-6 h-6 animate-spin" />
-                <span class="text-[10px]">{{ uploadingLabel }}</span>
+                <span class="text-xs">{{ uploadingLabel }}</span>
               </div>
               <!-- 已有图片：显示缩略图，点击替换 -->
               <img
@@ -1666,10 +1664,10 @@ function getGPSLocation(source: string) {
                 class="w-24 h-24 flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 hover:text-blue-500 text-gray-400 transition-colors"
               >
                 <Upload class="w-6 h-6" />
-                <span class="text-[10px] mt-1">上传</span>
+                <span class="text-xs mt-1">上传</span>
               </div>
             </div>
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
         </div>
       </div>
@@ -1758,8 +1756,8 @@ function getGPSLocation(source: string) {
                 <MapPin v-else class="w-4 h-4" />
               </button>
             </div>
-            <p v-if="item.colName === 'lon' && gpsError" class="text-[10px] text-red-400">{{ gpsError }}</p>
-            <p v-if="item.tip && !gpsError" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.colName === 'lon' && gpsError" class="text-xs text-red-400">{{ gpsError }}</p>
+            <p v-if="item.tip && !gpsError" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
 
           <!-- 普通输入框 -->
@@ -1771,7 +1769,7 @@ function getGPSLocation(source: string) {
               :placeholder="'请输入' + item.title"
               class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-blue-400"
             />
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
 
           <!-- 单选项 -->
@@ -1790,7 +1788,7 @@ function getGPSLocation(source: string) {
                 {{ opt.content }}
               </button>
             </div>
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
             <!-- 范围外签到原因 -->
             <div v-if="item.colName === 'isMalposition' && item.content === '是'" class="mt-2 space-y-1">
               <label class="text-xs font-medium text-gray-600">范围外签到原因 <span class="text-red-400">*</span></label>
@@ -1829,7 +1827,7 @@ function getGPSLocation(source: string) {
                 <span>上传二维码图片</span>
               </div>
             </div>
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
 
           <!-- 图片：点击直接选文件替换 -->
@@ -1845,7 +1843,7 @@ function getGPSLocation(source: string) {
                 class="w-24 h-24 flex flex-col items-center justify-center gap-1 border-2 border-dashed border-gray-300 rounded-lg text-blue-500"
               >
                 <LoaderCircle class="w-6 h-6 animate-spin" />
-                <span class="text-[10px]">{{ uploadingLabel }}</span>
+                <span class="text-xs">{{ uploadingLabel }}</span>
               </div>
               <img
                 v-else-if="item.content && (item.content.startsWith('http') || item.content.startsWith('data:image'))"
@@ -1857,10 +1855,10 @@ function getGPSLocation(source: string) {
                 class="w-24 h-24 flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 hover:text-blue-500 text-gray-400 transition-colors"
               >
                 <Upload class="w-6 h-6" />
-                <span class="text-[10px] mt-1">上传</span>
+                <span class="text-xs mt-1">上传</span>
               </div>
             </div>
-            <p v-if="item.tip" class="text-[10px] text-gray-400">{{ item.tip }}</p>
+            <p v-if="item.tip" class="text-xs text-gray-400">{{ item.tip }}</p>
           </div>
         </div>
         </template>
diff --git a/frondend/src/views/leave/LeaveView.vue b/frondend/src/views/leave/LeaveView.vue
index 6a9f2a4..58fa969 100644
--- a/frondend/src/views/leave/LeaveView.vue
+++ b/frondend/src/views/leave/LeaveView.vue
@@ -2,22 +2,24 @@
   <!-- 请/销假页：上方请假+销假按钮（左右平分），下方请假/销假日志列表。
        两者均为同步执行：请假 → 填表提交；销假 → 选请假单 → 填位置 → 立即销假。 -->
   <div class="p-4 space-y-4">
-    <!-- 入口卡片：请假 / 销假 按钮并排左右平分 -->
-    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
-      <div class="flex items-center justify-between mb-3">
+    <!-- 入口卡片：请假 / 销假 按钮并排左右平分（珊瑚渐变头卡） -->
+    <div class="relative overflow-hidden rounded-3xl p-5 text-white shadow-lg shadow-rose-500/25 leave-hero rise-in">
+      <div class="pointer-events-none absolute -right-10 -top-12 w-40 h-40 rounded-full bg-white/15" />
+      <div class="pointer-events-none absolute -right-2 top-16 w-20 h-20 rounded-full bg-white/10" />
+      <div class="relative flex items-start justify-between mb-4">
         <div>
-          <p class="text-sm font-semibold text-gray-900">请假与销假</p>
-          <p class="text-xs text-gray-400 mt-0.5">异地一键请假销假，自行设置位置</p>
+          <p class="text-lg font-bold tracking-tight">请假与销假</p>
+          <p class="text-xs text-white/80 mt-0.5">异地一键请假销假，自行设置位置</p>
         </div>
-        <div class="w-10 h-10 rounded-full bg-rose-50 flex items-center justify-center">
-          <CalendarCheck class="w-5 h-5 text-rose-500" />
+        <div class="w-11 h-11 rounded-2xl bg-white/20 flex items-center justify-center">
+          <CalendarCheck class="w-5 h-5 text-white" />
         </div>
       </div>
-      <div class="flex gap-2">
+      <div class="relative flex gap-2.5">
         <button
           @click="openApplyModal"
           :disabled="executing || applying"
-          class="flex-1 flex items-center justify-center gap-2 bg-white border border-rose-300 text-rose-500 hover:bg-rose-50 disabled:opacity-40 rounded-lg py-2.5 text-sm font-medium transition-colors"
+          class="press flex-1 flex items-center justify-center gap-2 bg-white/20 ring-1 ring-white/30 text-white disabled:opacity-50 rounded-full py-3 text-sm font-semibold"
         >
           <CalendarPlus class="w-4 h-4" />
           请假
@@ -25,7 +27,7 @@
         <button
           @click="openPendingModal"
           :disabled="executing || applying"
-          class="flex-1 flex items-center justify-center gap-2 bg-rose-500 hover:bg-rose-600 disabled:bg-rose-300 text-white rounded-lg py-2.5 text-sm font-medium transition-colors"
+          class="press flex-1 flex items-center justify-center gap-2 bg-white text-rose-600 disabled:opacity-50 rounded-full py-3 text-sm font-semibold shadow-md shadow-black/5 dark:bg-[#fff5f7] dark:text-[#b8325a]"
         >
           <CalendarCheck class="w-4 h-4" />
           销假
@@ -34,7 +36,7 @@
     </div>
 
     <!-- 请假/销假日志列表 -->
-    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
+    <div class="bg-white rounded-2xl border border-gray-100/80 p-4 shadow-sm">
       <h3 class="text-sm font-semibold text-gray-900 mb-3">请假/销假日志</h3>
 
       <div v-if="loadingLogs" class="flex items-center justify-center py-6">
@@ -50,22 +52,22 @@
           <div class="flex-1 min-w-0">
             <div class="flex items-center gap-1.5">
               <span
-                class="text-[10px] px-1.5 py-0.5 rounded-full shrink-0 font-medium"
+                class="text-xs px-1.5 py-0.5 rounded-full shrink-0 font-medium"
                 :class="log.action === 'apply' ? 'bg-blue-100 text-blue-600' : 'bg-rose-100 text-rose-600'"
               >{{ log.action === 'apply' ? '请假' : '销假' }}</span>
               <span class="text-xs font-medium text-gray-900 truncate">{{ log.title }}</span>
             </div>
             <div class="flex items-center gap-2 mt-0.5">
               <span
-                class="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+                class="text-xs px-1.5 py-0.5 rounded-full font-medium"
                 :class="log.isSuccess ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
               >
                 {{ log.isSuccess ? '成功' : '失败' }}
               </span>
-              <span class="text-[10px] text-gray-400">{{ new Date(log.createdAt).toLocaleString('zh-CN') }}</span>
+              <span class="text-xs text-gray-400">{{ new Date(log.createdAt).toLocaleString('zh-CN') }}</span>
             </div>
             <div v-if="!log.isSuccess && log.errorMessage" class="mt-0.5">
-              <span class="text-[10px] text-red-500 leading-tight block">{{ log.errorMessage }}</span>
+              <span class="text-xs text-red-500 leading-tight block">{{ log.errorMessage }}</span>
             </div>
           </div>
           <button
@@ -118,14 +120,14 @@
             class="relative p-3 rounded-lg border border-gray-100 hover:border-rose-300 hover:bg-rose-50 cursor-pointer transition-colors"
           >
             <div class="flex items-center gap-1.5 mb-1.5">
-              <span class="text-[10px] px-1.5 py-0.5 rounded-full shrink-0 bg-amber-100 text-amber-600 font-medium">{{ leave.leaveType || '请假' }}</span>
+              <span class="text-xs px-1.5 py-0.5 rounded-full shrink-0 bg-amber-100 text-amber-600 font-medium">{{ leave.leaveType || '请假' }}</span>
               <p class="text-sm font-medium text-gray-900 flex-1 min-w-0 truncate">{{ leave.reason || '无请假原因' }}</p>
               <span
-                class="text-[10px] px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap font-medium"
+                class="text-xs px-1.5 py-0.5 rounded-full shrink-0 whitespace-nowrap font-medium"
                 :style="{ backgroundColor: leaveStatusColor(leave.status) + '1a', color: leaveStatusColor(leave.status) }"
               >{{ leaveStatusLabelOf(leave) }}</span>
             </div>
-            <div class="text-[10px] text-gray-400 space-y-0.5">
+            <div class="text-xs text-gray-400 space-y-0.5">
               <p>提交时间：{{ leave.createTime || '-' }}</p>
               <p>预计结束：{{ leave.actEndTime || '-' }}</p>
             </div>
@@ -156,17 +158,17 @@
         <!-- 请假信息 -->
         <div v-if="selectedLeave" class="rounded-lg bg-gray-50 p-3">
           <div class="flex items-center gap-1.5 mb-1">
-            <span class="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-600 font-medium">{{ selectedLeave.leaveType || '请假' }}</span>
+            <span class="text-xs px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-600 font-medium">{{ selectedLeave.leaveType || '请假' }}</span>
             <span class="text-xs font-medium text-gray-900 truncate">{{ selectedLeave.reason || '无请假原因' }}</span>
           </div>
-          <p class="text-[10px] text-gray-400">预计结束：{{ selectedLeave.actEndTime || '-' }}</p>
+          <p class="text-xs text-gray-400">预计结束：{{ selectedLeave.actEndTime || '-' }}</p>
         </div>
 
         <!-- 规定销假位置选择（reportPlaces） -->
         <div v-if="reportPlaces.length > 0">
           <div class="flex items-start gap-1.5 rounded-lg bg-green-50 border border-green-100 p-2.5 mb-2">
             <MapPin class="w-3.5 h-3.5 text-green-500 shrink-0 mt-0.5" />
-            <p class="text-[10px] text-green-600 leading-relaxed">
+            <p class="text-xs text-green-600 leading-relaxed">
               该请假要求在学校规定位置销假，请选择您当前所在的销假位置
             </p>
           </div>
@@ -183,15 +185,15 @@
               <div class="flex items-center gap-1.5">
                 <MapPin class="w-3.5 h-3.5 shrink-0" :class="selectedPlaceIndex === idx ? 'text-rose-500' : 'text-gray-300'" />
                 <span class="text-xs font-medium text-gray-900 flex-1 min-w-0 truncate">{{ place.address }}</span>
-                <span class="text-[10px] text-gray-400 shrink-0">范围 {{ place.radius }}m</span>
+                <span class="text-xs text-gray-400 shrink-0">范围 {{ place.radius }}m</span>
               </div>
-              <p class="text-[10px] text-gray-400 mt-0.5 ml-5">经纬度：{{ place.longitude }}, {{ place.latitude }}</p>
+              <p class="text-xs text-gray-400 mt-0.5 ml-5">经纬度：{{ place.longitude }}, {{ place.latitude }}</p>
             </div>
           </div>
         </div>
         <div v-else class="flex items-start gap-1.5 rounded-lg bg-amber-50 border border-amber-100 p-2.5">
           <MapPin class="w-3.5 h-3.5 text-amber-500 shrink-0 mt-0.5" />
-          <p class="text-[10px] text-amber-600 leading-relaxed">
+          <p class="text-xs text-amber-600 leading-relaxed">
             该请假未设置规定销假位置，请手动填写当前所在位置的经纬度与地址
           </p>
         </div>
@@ -252,15 +254,15 @@
                 <div v-if="form.approverWid === a.userWid" class="w-1.5 h-1.5 rounded-full bg-rose-500"></div>
               </div>
               <span class="text-xs text-gray-900">{{ a.userName }}</span>
-              <span class="text-[10px] text-gray-400">{{ a.userId }}</span>
+              <span class="text-xs text-gray-400">{{ a.userId }}</span>
             </div>
           </div>
           <div v-else class="rounded-lg bg-amber-50 border border-amber-100 p-2.5">
-            <p class="text-[10px] text-amber-600">未获取到可选的审批人，请稍后重试</p>
+            <p class="text-xs text-amber-600">未获取到可选的审批人，请稍后重试</p>
             <button
               @click="loadApprovers"
               :disabled="loadingApprovers"
-              class="mt-1.5 text-[10px] text-rose-500 hover:text-rose-600 disabled:opacity-40"
+              class="mt-1.5 text-xs text-rose-500 hover:text-rose-600 disabled:opacity-40"
             >重新获取</button>
           </div>
         </div>
@@ -270,8 +272,8 @@
         <div>
           <label class="text-xs text-gray-500 mb-1 block">
             销假图片
-            <span v-if="selectedLeave?.enableAttach" class="text-[10px] text-gray-400">（可选）</span>
-            <span v-else class="text-[10px] text-amber-500">（部分学校销假要求上传，如提交提示需要附件请在此上传）</span>
+            <span v-if="selectedLeave?.enableAttach" class="text-xs text-gray-400">（可选）</span>
+            <span v-else class="text-xs text-amber-500">（部分学校销假要求上传，如提交提示需要附件请在此上传）</span>
           </label>
           <div v-if="form.imageUrl" class="relative inline-block">
             <img :src="form.imageUrl" class="w-20 h-20 rounded-lg object-cover border border-gray-200" />
@@ -292,13 +294,13 @@
             <LoaderCircle v-if="uploadingImage" class="w-5 h-5 text-rose-400 animate-spin" />
             <template v-else>
               <Upload class="w-5 h-5" />
-              <span class="text-[10px] mt-1">上传图片</span>
+              <span class="text-xs mt-1">上传图片</span>
             </template>
           </button>
         </div>
 
         <!-- 执行状态 -->
-        <p v-if="execMessage" class="text-[11px] leading-relaxed" :class="execStatus === 'error' ? 'text-red-500' : execStatus === 'success' ? 'text-green-600' : 'text-blue-500'">
+        <p v-if="execMessage" class="text-xs leading-relaxed" :class="execStatus === 'error' ? 'text-red-500' : execStatus === 'success' ? 'text-green-600' : 'text-blue-500'">
           {{ execMessage }}
         </p>
       </div>
@@ -357,7 +359,7 @@
                 {{ t.name }}{{ t.disableTime === 1 ? '（当前不可用）' : '' }}
               </option>
             </select>
-            <p v-if="currentType?.limitDay" class="text-[10px] text-gray-400 mt-1">单次最长可请 {{ currentType.limitDay }} 天</p>
+            <p v-if="currentType?.limitDay" class="text-xs text-gray-400 mt-1">单次最长可请 {{ currentType.limitDay }} 天</p>
           </div>
 
           <!-- 起止时间 -->
@@ -395,7 +397,7 @@
               ></span>
             </button>
           </div>
-          <p v-if="currentType?.mustOut === 1" class="text-[10px] text-gray-400 -mt-1">该请假类型要求必须离校</p>
+          <p v-if="currentType?.mustOut === 1" class="text-xs text-gray-400 -mt-1">该请假类型要求必须离校</p>
 
           <!-- 离校字段 -->
           <template v-if="applyForm.outStatus">
@@ -432,7 +434,7 @@
           <div>
             <label class="text-xs text-gray-500 mb-1 block">
               请假原因
-              <span v-if="currentType?.reasonWordLimit" class="text-[10px] text-gray-400">（最少 {{ currentType.reasonWordLimit }} 字，当前 {{ applyForm.leaveReason.length }} 字）</span>
+              <span v-if="currentType?.reasonWordLimit" class="text-xs text-gray-400">（最少 {{ currentType.reasonWordLimit }} 字，当前 {{ applyForm.leaveReason.length }} 字）</span>
             </label>
             <textarea
               v-model="applyForm.leaveReason"
@@ -449,7 +451,7 @@
               <button
                 @click="getApplyGPS"
                 :disabled="gettingApplyGPS"
-                class="text-[10px] text-rose-500 hover:text-rose-600 disabled:opacity-40 flex items-center gap-0.5"
+                class="text-xs text-rose-500 hover:text-rose-600 disabled:opacity-40 flex items-center gap-0.5"
               >
                 <LoaderCircle v-if="gettingApplyGPS" class="w-3 h-3 animate-spin" />
                 <MapPin v-else class="w-3 h-3" />
@@ -478,7 +480,7 @@
               placeholder="定位地址"
               class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-900 placeholder-gray-300 focus:outline-none focus:border-rose-400"
             />
-            <p v-if="applyGpsError" class="text-[10px] text-amber-500 mt-1">{{ applyGpsError }}</p>
+            <p v-if="applyGpsError" class="text-xs text-amber-500 mt-1">{{ applyGpsError }}</p>
           </div>
 
           <!-- 手写承诺书签名（requireSign=1 时必填；该校要求先手写签名） -->
@@ -498,10 +500,10 @@
                 class="h-16 px-4 rounded-lg border border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400 hover:border-rose-300 hover:text-rose-400 transition-colors"
               >
                 <Edit3 class="w-4 h-4" />
-                <span class="text-[10px] mt-1">{{ signaturePreview ? '重新签名' : '点击签名' }}</span>
+                <span class="text-xs mt-1">{{ signaturePreview ? '重新签名' : '点击签名' }}</span>
               </button>
             </div>
-            <p class="text-[10px] text-gray-400 mt-1">本人已阅读知晓《请假安全承诺书》全部内容，并同意上述承诺</p>
+            <p class="text-xs text-gray-400 mt-1">本人已阅读知晓《请假安全承诺书》全部内容，并同意上述承诺</p>
           </div>
 
           <!-- 附件（enableAttach=1 或 attachmentNumberLimit>0 时显示；多图，最多 4 张且不超学校配置） -->
@@ -533,7 +535,7 @@
                 <LoaderCircle v-if="uploadingApplyImage" class="w-5 h-5 text-rose-400 animate-spin" />
                 <template v-else>
                   <Upload class="w-5 h-5" />
-                  <span class="text-[10px] mt-1">上传图片</span>
+                  <span class="text-xs mt-1">上传图片</span>
                 </template>
               </button>
             </div>
@@ -544,7 +546,7 @@
             <label class="text-xs text-gray-500 mb-1 block">
               审批人
               <span v-if="applyApprovers.length > 0" class="text-rose-500">*</span>
-              <span v-else-if="!applyApproversError" class="text-[10px] text-gray-400">（该校未配置审批人，可不选）</span>
+              <span v-else-if="!applyApproversError" class="text-xs text-gray-400">（该校未配置审批人，可不选）</span>
             </label>
             <div v-if="loadingApplyApprovers" class="flex items-center justify-center py-3">
               <LoaderCircle class="w-4 h-4 text-rose-400 animate-spin" />
@@ -566,19 +568,19 @@
                   <div v-if="applyForm.approverWid === a.userWid" class="w-1.5 h-1.5 rounded-full bg-rose-500"></div>
                 </div>
                 <span class="text-xs text-gray-900">{{ a.userName }}</span>
-                <span class="text-[10px] text-gray-400">{{ a.userId }}</span>
+                <span class="text-xs text-gray-400">{{ a.userId }}</span>
               </div>
             </div>
             <div v-else class="rounded-lg bg-amber-50 border border-amber-100 p-2.5">
-              <p v-if="applyApproversError" class="text-[10px] text-red-500">{{ applyApproversError }}</p>
-              <p v-else-if="canFetchApplyApprovers" class="text-[10px] text-amber-600">
+              <p v-if="applyApproversError" class="text-xs text-red-500">{{ applyApproversError }}</p>
+              <p v-else-if="canFetchApplyApprovers" class="text-xs text-amber-600">
                 该校该请假类型未配置审批人，无需选择，可直接提交
               </p>
-              <p v-else class="text-[10px] text-amber-600">请先选择请假类型并填写开始/结束时间，再获取审批人</p>
+              <p v-else class="text-xs text-amber-600">请先选择请假类型并填写开始/结束时间，再获取审批人</p>
               <button
                 @click="loadApplyApprovers"
                 :disabled="loadingApplyApprovers || !canFetchApplyApprovers"
-                class="mt-1.5 text-[10px] text-rose-500 hover:text-rose-600 disabled:opacity-40"
+                class="mt-1.5 text-xs text-rose-500 hover:text-rose-600 disabled:opacity-40"
               >重新获取</button>
             </div>
           </div>
@@ -587,7 +589,7 @@
           <div v-if="canFetchApplyApprovers && applyApprovers.length > 0">
             <label class="text-xs text-gray-500 mb-1 block">
               抄送人
-              <span class="text-[10px] text-gray-400">（非必填，可多选）</span>
+              <span class="text-xs text-gray-400">（非必填，可多选）</span>
             </label>
             <div class="space-y-1.5">
               <div
@@ -608,13 +610,13 @@
                   </svg>
                 </div>
                 <span class="text-xs text-gray-900">{{ a.userName }}</span>
-                <span class="text-[10px] text-gray-400">{{ a.userId }}</span>
+                <span class="text-xs text-gray-400">{{ a.userId }}</span>
               </div>
             </div>
           </div>
 
           <!-- 执行状态 -->
-          <p v-if="applyMessage" class="text-[11px] leading-relaxed" :class="applyStatus === 'error' ? 'text-red-500' : applyStatus === 'success' ? 'text-green-600' : 'text-blue-500'">
+          <p v-if="applyMessage" class="text-xs leading-relaxed" :class="applyStatus === 'error' ? 'text-red-500' : applyStatus === 'success' ? 'text-green-600' : 'text-blue-500'">
             {{ applyMessage }}
           </p>
         </template>
@@ -663,7 +665,7 @@
             @touchend.prevent="signEnd"
           />
         </div>
-        <p v-if="signaturePreview" class="text-[10px] text-green-600 mt-2">已签名。如需重签，点「重置」后重新书写。</p>
+        <p v-if="signaturePreview" class="text-xs text-green-600 mt-2">已签名。如需重签，点「重置」后重新书写。</p>
         <div class="flex gap-2 mt-4">
           <Button variant="outline" class="flex-1 h-10 text-sm" @click="resetSignature">
             重置
@@ -809,18 +811,19 @@ async function loadPendingLeaves() {
   }
 }
 
-// 请假状态映射（status → 展示文案 / 颜色）
+// 请假状态映射（status → 展示文案 / 颜色）。
+// 颜色取薄荷汽水色板的中间调：作文字在亮/暗卡片上均可辨识，叠 10% 透明度作底色
 const leaveStatusMap: Record<string, { label: string; color: string }> = {
-  '1': { label: '待审批', color: '#f0a020' },
-  '2': { label: '处理中', color: '#2080f0' },
-  '3': { label: '已驳回', color: '#d03050' },
-  '4': { label: '已完成', color: '#18a058' },
-  '5': { label: '即将休假', color: '#8a2be2' },
-  '6': { label: '正在休假中', color: '#36ad6a' },
-  '7': { label: '销假逾期', color: '#ff6b6b' },
-  '8': { label: '待销假', color: '#18a058' },
-  '9': { label: '自动通过', color: '#18a058' },
-  '10': { label: '逾期自动驳回', color: '#d03050' },
+  '1': { label: '待审批', color: '#c98a00' },
+  '2': { label: '处理中', color: '#2f86d6' },
+  '3': { label: '已驳回', color: '#d94a63' },
+  '4': { label: '已完成', color: '#1f9d68' },
+  '5': { label: '即将休假', color: '#8b6ce6' },
+  '6': { label: '正在休假中', color: '#14a88d' },
+  '7': { label: '销假逾期', color: '#e8606e' },
+  '8': { label: '待销假', color: '#1f9d68' },
+  '9': { label: '自动通过', color: '#1f9d68' },
+  '10': { label: '逾期自动驳回', color: '#d94a63' },
 }
 
 function leaveStatusLabel(status: string) {
@@ -833,7 +836,7 @@ function leaveStatusLabelOf(leave: { status: string; statusText?: string }) {
 }
 
 function leaveStatusColor(status: string) {
-  return leaveStatusMap[status]?.color || '#909399'
+  return leaveStatusMap[status]?.color || '#7f908a'
 }
 
 // ======== 销假表单弹窗 ========
@@ -1684,6 +1687,15 @@ async function submitApply() {
 </script>
 
 <style scoped>
+/* 请/销假头卡：珊瑚 → 粉的柔和渐变（暗色下压暗一档） */
+.leave-hero {
+  background-color: #d23c68;
+  background-image: linear-gradient(135deg, #f0708c 0%, #d9466d 55%, #c23a62 100%);
+}
+:global(.dark) .leave-hero {
+  background-image: linear-gradient(135deg, #b8435f 0%, #9e3352 60%, #8a2c49 100%);
+}
+
 /* 贴边按钮竖排文字：样式与打卡页「收藏本站」一致
    （仅文字本身竖排，容器保持常规纵排：图标在上、文字在下） */
 .bookmark-vtext {
diff --git a/frondend/src/views/login/LoginView.vue b/frondend/src/views/login/LoginView.vue
index 7b69ffc..613076c 100644
--- a/frondend/src/views/login/LoginView.vue
+++ b/frondend/src/views/login/LoginView.vue
@@ -596,32 +596,33 @@ async function handleReportSubmit() {
 </script>
 
 <template>
-  <div class="h-full flex flex-col bg-white">
-    <!-- 顶部留白 -->
-    <div class="flex-1 flex flex-col items-center justify-center px-6">
+  <div class="h-full flex flex-col overflow-y-auto">
+    <!-- 顶部留白（背景光斑来自 #app，见 globals.css） -->
+    <div class="flex-1 flex flex-col items-center justify-center px-5 py-8">
       <!-- Logo / 标题 -->
-      <div class="text-center mb-8">
-        <div class="w-16 h-16 rounded-2xl bg-blue-500 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-200">
-          <GraduationCap class="w-8 h-8 text-white" />
+      <div class="text-center mb-7 rise-in">
+        <div class="relative w-[72px] h-[72px] rounded-[22px] bg-brand-gradient flex items-center justify-center mx-auto mb-4 shadow-xl shadow-brand-500/30">
+          <div class="absolute inset-0 rounded-[22px] bg-gradient-to-b from-white/30 to-transparent" />
+          <GraduationCap class="relative w-9 h-9 text-white" />
         </div>
-        <h1 class="text-xl font-bold text-gray-900">小助手</h1>
-        <p class="text-sm text-gray-400 mt-1">你的温馨小助手</p>
+        <h1 class="text-[26px] font-bold tracking-tight text-gray-900">小助手</h1>
+        <p class="text-sm text-gray-500 mt-1">你的温馨小助手 · 打卡请假更轻松</p>
       </div>
 
-      <!-- 表单 -->
-      <div class="w-full max-w-sm space-y-4">
-        <!-- 登录方式切换 -->
-        <div class="flex gap-2 p-1 bg-gray-100 rounded-xl">
+      <!-- 表单（白卡片浮于光斑背景之上） -->
+      <div class="w-full max-w-sm space-y-4 bg-white/90 dark:bg-gray-50/90 rounded-3xl border border-white/70 dark:border-gray-200 shadow-xl p-5 rise-in" style="animation-delay: 60ms">
+        <!-- 登录方式切换（分段控件） -->
+        <div class="flex gap-1 p-1 bg-gray-100 rounded-full">
           <button
-            class="flex-1 h-9 rounded-lg text-sm font-medium transition-colors"
-            :class="loginMode === 'school' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
+            class="flex-1 h-9 rounded-full text-sm font-semibold transition-all duration-300"
+            :class="loginMode === 'school' ? 'bg-white text-brand-600 shadow-sm dark:bg-gray-300 dark:text-gray-900' : 'text-gray-500'"
             @click="switchLoginMode('school')"
           >
             学工号登录
           </button>
           <button
-            class="flex-1 h-9 rounded-lg text-sm font-medium transition-colors"
-            :class="loginMode === 'sms' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
+            class="flex-1 h-9 rounded-full text-sm font-semibold transition-all duration-300"
+            :class="loginMode === 'sms' ? 'bg-white text-brand-600 shadow-sm dark:bg-gray-300 dark:text-gray-900' : 'text-gray-500'"
             @click="switchLoginMode('sms')"
           >
             手机号登录
@@ -634,7 +635,7 @@ async function handleReportSubmit() {
             <Label class="mb-1.5 block text-xs font-medium text-gray-500">手机号</Label>
             <div class="relative">
               <Smartphone class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-              <Input v-model="smsPhone" placeholder="请输入手机号" class="pl-9 h-10 text-sm" />
+              <Input v-model="smsPhone" placeholder="请输入手机号" class="pl-9 h-11 text-sm" />
             </div>
           </div>
 
@@ -642,9 +643,9 @@ async function handleReportSubmit() {
           <div>
             <Label class="mb-1.5 block text-xs font-medium text-gray-500">图片验证码</Label>
             <div class="flex gap-2">
-              <Input v-model="smsSendCaptchaCode" placeholder="输入图片验证码" class="flex-1 h-10 text-sm" />
+              <Input v-model="smsSendCaptchaCode" placeholder="输入图片验证码" class="flex-1 h-11 text-sm" />
               <div
-                class="flex-shrink-0 w-[120px] h-10 rounded-lg border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
+                class="flex-shrink-0 w-[120px] h-11 rounded-xl border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
                 @click="loadSmsCaptcha('send')"
               >
                 <img
@@ -654,7 +655,7 @@ async function handleReportSubmit() {
                   class="w-full h-full object-cover"
                 />
                 <div v-else-if="!smsSendCaptchaLoading && smsSendCaptchaError" class="w-full h-full px-1 flex items-center justify-center">
-                  <span class="text-[10px] leading-tight text-red-400 text-center">{{ smsSendCaptchaError }}</span>
+                  <span class="text-xs leading-tight text-red-400 text-center">{{ smsSendCaptchaError }}</span>
                 </div>
                 <div v-else class="w-full h-full flex items-center justify-center">
                   <RefreshCw v-if="smsSendCaptchaLoading" class="h-4 w-4 animate-spin text-gray-400" />
@@ -667,10 +668,10 @@ async function handleReportSubmit() {
           <div>
             <Label class="mb-1.5 block text-xs font-medium text-gray-500">短信验证码</Label>
             <div class="flex gap-2">
-              <Input v-model="smsCode" placeholder="请输入短信验证码" class="flex-1 h-10 text-sm" />
+              <Input v-model="smsCode" placeholder="请输入短信验证码" class="flex-1 h-11 text-sm" />
               <Button
                 variant="outline"
-                class="flex-shrink-0 h-10 px-3 text-sm"
+                class="flex-shrink-0 h-11 px-4 text-sm"
                 :disabled="smsSending || smsCountdown > 0"
                 @click="handleSendSmsCode"
               >
@@ -685,9 +686,9 @@ async function handleReportSubmit() {
           <div>
             <Label class="mb-1.5 block text-xs font-medium text-gray-500">图片验证码</Label>
             <div class="flex gap-2">
-              <Input v-model="smsLoginCaptchaCode" placeholder="输入图片验证码" class="flex-1 h-10 text-sm" />
+              <Input v-model="smsLoginCaptchaCode" placeholder="输入图片验证码" class="flex-1 h-11 text-sm" />
               <div
-                class="flex-shrink-0 w-[120px] h-10 rounded-lg border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
+                class="flex-shrink-0 w-[120px] h-11 rounded-xl border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
                 @click="loadSmsCaptcha('login')"
               >
                 <img
@@ -697,7 +698,7 @@ async function handleReportSubmit() {
                   class="w-full h-full object-cover"
                 />
                 <div v-else-if="!smsLoginCaptchaLoading && smsLoginCaptchaError" class="w-full h-full px-1 flex items-center justify-center">
-                  <span class="text-[10px] leading-tight text-red-400 text-center">{{ smsLoginCaptchaError }}</span>
+                  <span class="text-xs leading-tight text-red-400 text-center">{{ smsLoginCaptchaError }}</span>
                 </div>
                 <div v-else class="w-full h-full flex items-center justify-center">
                   <RefreshCw v-if="smsLoginCaptchaLoading" class="h-4 w-4 animate-spin text-gray-400" />
@@ -729,7 +730,7 @@ async function handleReportSubmit() {
             <Input
               v-model="schoolKeyword"
               :placeholder="selectedSchool ? selectedSchool.name : '搜索学校...'"
-              class="pl-9 h-10 text-sm pr-9"
+              class="pl-9 h-11 text-sm pr-9"
               @focus="showSchoolList = schools.length > 0"
               @blur="handleBlur"
             />
@@ -761,7 +762,7 @@ async function handleReportSubmit() {
           <Label class="mb-1.5 block text-xs font-medium text-gray-500">学工号</Label>
           <div class="relative">
             <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-            <Input v-model="username" placeholder="请输入学工号" class="pl-9 h-10 text-sm" />
+            <Input v-model="username" placeholder="请输入学工号" class="pl-9 h-11 text-sm" />
           </div>
         </div>
 
@@ -774,7 +775,7 @@ async function handleReportSubmit() {
               :type="showPassword ? 'text' : 'password'"
               v-model="password"
               placeholder="请输入密码"
-              class="pl-9 pr-9 h-10 text-sm"
+              class="pl-9 pr-9 h-11 text-sm"
             />
             <button
               type="button"
@@ -791,9 +792,9 @@ async function handleReportSubmit() {
         <div>
           <Label class="mb-1.5 block text-xs font-medium text-gray-500">验证码</Label>
           <div class="flex gap-2">
-            <Input v-model="captchaCode" placeholder="输入验证码" class="flex-1 h-10 text-sm" />
+            <Input v-model="captchaCode" placeholder="输入验证码" class="flex-1 h-11 text-sm" />
             <div
-              class="flex-shrink-0 w-[120px] h-10 rounded-lg border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
+              class="flex-shrink-0 w-[120px] h-11 rounded-xl border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
               @click="loadCaptcha"
             >
               <img
@@ -803,7 +804,7 @@ async function handleReportSubmit() {
                 class="w-full h-full object-cover"
               />
               <div v-else-if="!loadingCaptcha && captchaError" class="w-full h-full px-1 flex items-center justify-center">
-                <span class="text-[10px] leading-tight text-red-400 text-center">{{ captchaError }}</span>
+                <span class="text-xs leading-tight text-red-400 text-center">{{ captchaError }}</span>
               </div>
               <div v-else class="w-full h-full flex items-center justify-center">
                 <RefreshCw v-if="loadingCaptcha" class="h-4 w-4 animate-spin text-gray-400" />
@@ -817,7 +818,7 @@ async function handleReportSubmit() {
 
         <!-- 登录按钮 -->
         <Button
-          class="w-full h-11 mt-2 text-sm font-medium"
+          class="w-full h-12 mt-2 text-[15px] bg-brand-gradient"
           :disabled="logging"
           @click="loginMode === 'sms' ? handleSmsLogin() : handleLogin()"
         >
@@ -830,7 +831,7 @@ async function handleReportSubmit() {
 
     <!-- 底部版本信息 -->
     <div class="text-center pb-5">
-      <p class="text-xs text-gray-300">copyright © 2026</p>
+      <p class="text-xs text-gray-400">copyright © 2026</p>
     </div>
 
     <!-- ======== 多因子认证（MFA）Dialog：选择验证方式 → 输入验证码 ======== -->
@@ -845,7 +846,7 @@ async function handleReportSubmit() {
       @update:open="(v: boolean) => { if (!v) closeMFADialog() }"
     >
       <!-- 顶部装饰条 -->
-      <div class="h-1.5 bg-gradient-to-r from-blue-500 to-cyan-400" />
+      <div class="h-1.5 bg-gradient-to-r from-brand-400 to-sky-400" />
       <div class="p-6">
         <!-- 标题 -->
         <div class="flex items-center gap-2.5 mb-3">
@@ -854,7 +855,7 @@ async function handleReportSubmit() {
           </div>
           <div>
             <h3 class="text-base font-bold text-gray-900">多因子认证</h3>
-            <p class="text-[10px] text-gray-400 mt-0.5">该校登录需校验动态验证码</p>
+            <p class="text-xs text-gray-400 mt-0.5">该校登录需校验动态验证码</p>
           </div>
         </div>
 
@@ -867,7 +868,7 @@ async function handleReportSubmit() {
                 {{ mfaMessage || '请选择验证方式获取验证码' }}
               </p>
             </div>
-            <p class="text-[10px] text-blue-400 mt-1.5 pl-6.5">验证会话 10 分钟内有效</p>
+            <p class="text-xs text-blue-400 mt-1.5 pl-6.5">验证会话 10 分钟内有效</p>
           </div>
 
           <!-- 验证方式列表 -->
@@ -908,7 +909,7 @@ async function handleReportSubmit() {
               <Smartphone class="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
               <p class="text-sm text-blue-700 leading-relaxed">{{ mfaMessage }}</p>
             </div>
-            <p class="text-[10px] text-blue-400 mt-1.5 pl-6.5">验证会话 10 分钟内有效，输错可重新输入</p>
+            <p class="text-xs text-blue-400 mt-1.5 pl-6.5">验证会话 10 分钟内有效，输错可重新输入</p>
           </div>
 
           <!-- 验证码输入 -->
@@ -919,11 +920,11 @@ async function handleReportSubmit() {
               <Input
                 v-model="mfaCode"
                 placeholder="请输入收到的验证码"
-                class="pl-9 pr-9 h-10 text-sm tracking-widest"
+                class="pl-9 pr-9 h-11 text-sm tracking-widest"
                 maxlength="8"
                 @keyup.enter="handleMFAVerify"
               />
-              <span v-if="mfaCountdown > 0" class="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] text-gray-300 tabular-nums">
+              <span v-if="mfaCountdown > 0" class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-300 tabular-nums">
                 {{ Math.floor(mfaCountdown / 60) }}:{{ String(mfaCountdown % 60).padStart(2, '0') }}
               </span>
             </div>
@@ -1046,7 +1047,7 @@ async function handleReportSubmit() {
           </div>
           <div>
             <h3 class="text-base font-bold text-gray-900">提交工单</h3>
-            <p class="text-[10px] text-gray-400 mt-0.5">提交后管理员将处理该学校适配问题</p>
+            <p class="text-xs text-gray-400 mt-0.5">提交后管理员将处理该学校适配问题</p>
           </div>
         </div>
 
@@ -1081,12 +1082,12 @@ async function handleReportSubmit() {
             <Label class="mb-1 block text-xs font-medium text-gray-500">
               联系邮箱 <span class="text-red-400">*</span>
             </Label>
-            <p class="text-[10px] text-gray-400 mb-1">适配完成后将通过该邮箱联系您，仅支持国内知名邮箱</p>
+            <p class="text-xs text-gray-400 mb-1">适配完成后将通过该邮箱联系您，仅支持国内知名邮箱</p>
             <div class="flex gap-2">
               <Input
                 v-model="reportEmailPrefix"
                 placeholder="邮箱前缀"
-                class="flex-1 h-10 text-sm"
+                class="flex-1 h-11 text-sm"
               />
               <select
                 v-model="reportEmailDomain"
@@ -1101,9 +1102,9 @@ async function handleReportSubmit() {
           <div>
             <Label class="mb-1 block text-xs font-medium text-gray-500">验证码</Label>
             <div class="flex gap-2">
-              <Input v-model="reportCaptchaCode" placeholder="输入验证码" class="flex-1 h-10 text-sm" />
+              <Input v-model="reportCaptchaCode" placeholder="输入验证码" class="flex-1 h-11 text-sm" />
               <div
-                class="flex-shrink-0 w-[120px] h-10 rounded-lg border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
+                class="flex-shrink-0 w-[120px] h-11 rounded-xl border border-gray-200 overflow-hidden cursor-pointer bg-gray-50 flex items-center justify-center"
                 @click="loadReportCaptcha"
               >
                 <img
@@ -1113,7 +1114,7 @@ async function handleReportSubmit() {
                   class="w-full h-full object-cover"
                 />
                 <div v-else-if="!reportLoadingCaptcha && reportCaptchaError" class="w-full h-full px-1 flex items-center justify-center">
-                  <span class="text-[10px] leading-tight text-red-400 text-center">{{ reportCaptchaError }}</span>
+                  <span class="text-xs leading-tight text-red-400 text-center">{{ reportCaptchaError }}</span>
                 </div>
                 <div v-else class="w-full h-full flex items-center justify-center">
                   <RefreshCw v-if="reportLoadingCaptcha" class="h-4 w-4 animate-spin text-gray-400" />
diff --git a/frondend/src/views/profile/ProfileView.vue b/frondend/src/views/profile/ProfileView.vue
index 9d80c62..dba5023 100644
--- a/frondend/src/views/profile/ProfileView.vue
+++ b/frondend/src/views/profile/ProfileView.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { LogOut, RefreshCw, ClipboardCheck, Gift, Share2, X, MessageSquare, Dices, TriangleAlert } from 'lucide-vue-next'
+import { LogOut, RefreshCw, ClipboardCheck, Gift, Share2, X, MessageSquare, Dices, TriangleAlert, SunMoon, Sun, Moon } from 'lucide-vue-next'
+import { themeMode, setThemeMode, type ThemeMode } from '@/composables/useTheme'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import AppDialog from '@/components/ui/dialog/AppDialog.vue'
@@ -10,6 +11,13 @@ import * as authApi from '@/api/auth'
 import * as ticketApi from '@/api/ticket'
 import type { UserInfo, MyInviteInfo } from '@/api/auth'
 
+// 外观：自动（按时间 18:00–06:00 暗色）/ 浅色 / 深色
+const themeOptions: { value: ThemeMode; label: string; icon: typeof Sun }[] = [
+  { value: 'auto', label: '自动', icon: SunMoon },
+  { value: 'light', label: '浅色', icon: Sun },
+  { value: 'dark', label: '深色', icon: Moon },
+]
+
 const router = useRouter()
 const message = useMessage()
 const userInfo = ref<UserInfo | null>(null)
@@ -357,20 +365,23 @@ async function handleRedeemInvite() {
 <template>
   <div class="flex flex-col min-h-full">
     <!-- 顶部大蓝色卡片：个人基础信息撑满上半部 -->
-    <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 pt-10 pb-14 text-white text-center flex-shrink-0">
+    <div class="relative overflow-hidden bg-brand-gradient px-6 pb-16 text-white text-center flex-shrink-0 rounded-b-[36px]" style="padding-top: calc(env(safe-area-inset-top) + 40px)">
+      <!-- 装饰光斑 -->
+      <div class="pointer-events-none absolute -left-16 -top-16 w-56 h-56 rounded-full bg-white/10" />
+      <div class="pointer-events-none absolute -right-12 top-10 w-40 h-40 rounded-full bg-white/10" />
       <!-- 头像 + VIP 徽标（头像右上角，反光动画） -->
-      <div class="relative w-20 h-20 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-4 overflow-visible ring-4 ring-white/30">
+      <div class="relative w-20 h-20 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-4 overflow-visible ring-4 ring-white/30 shadow-lg shadow-black/10">
         <div class="w-full h-full rounded-full overflow-hidden flex items-center justify-center">
           <img v-show="userInfo?.avatar && !avatarFailed" :src="userInfo?.avatar" class="w-full h-full object-cover" @error="avatarFailed = true" />
           <span v-if="!userInfo?.avatar || avatarFailed" class="text-3xl font-bold">{{ userInfo?.realName?.[0] || userInfo?.username?.[0] || '?' }}</span>
         </div>
         <div v-if="isVip" class="vip-badge absolute -right-3 -top-1.5 z-10 whitespace-nowrap">VIP</div>
       </div>
-      <p class="text-xl font-bold">{{ userInfo?.realName || userInfo?.username || '--' }}</p>
-      <p class="text-sm text-white/80 mt-1">{{ userInfo?.schoolName || '--' }}</p>
+      <p class="relative text-[22px] font-bold tracking-tight">{{ userInfo?.realName || userInfo?.username || '--' }}</p>
+      <p class="relative text-sm text-white/80 mt-1">{{ userInfo?.schoolName || '--' }}</p>
 
       <!-- VIP 状态行：到期时间 + 开通/续费按钮 -->
-      <div class="mt-3 flex items-center justify-center gap-2">
+      <div class="relative mt-3 flex items-center justify-center gap-2">
         <span
           v-if="isVip"
           class="text-xs bg-white/20 rounded-full px-3 py-1.5 text-white/95"
@@ -389,8 +400,8 @@ async function handleRedeemInvite() {
     </div>
 
     <!-- 详情列表 -->
-    <div class="px-4 -mt-8 flex-1 flex flex-col space-y-3 pb-4">
-      <div class="bg-white rounded-xl border border-gray-100 divide-y divide-gray-50 shadow-sm">
+    <div class="relative px-4 -mt-10 flex-1 flex flex-col space-y-3 pb-4">
+      <div class="bg-white rounded-2xl border border-gray-100/80 divide-y divide-gray-100 shadow-sm">
         <!-- 可签到次数 + 兑换按钮 -->
         <div class="flex items-center justify-between px-4 py-3.5">
           <div class="flex items-center gap-3">
@@ -441,7 +452,7 @@ async function handleRedeemInvite() {
                     <template v-else>生成邀请码</template>
                   </button>
                 </div>
-                <p class="text-[10px] text-gray-400 mt-1 leading-relaxed">
+                <p class="text-xs text-gray-400 mt-1 leading-relaxed">
                   邀请好友即可获得
                   <span class="text-amber-500 font-medium">{{ inviterRewardPerInvite !== null ? fmtReward(inviterRewardPerInvite) : '一定' }}</span>
                   积分
@@ -486,7 +497,7 @@ async function handleRedeemInvite() {
               <MessageSquare class="w-4 h-4 text-rose-500" />
               <span
                 v-if="ticketUnreadCount > 0"
-                class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-bold flex items-center justify-center leading-none"
+                class="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-xs font-bold flex items-center justify-center leading-none"
               >{{ ticketUnreadCount > 99 ? '99+' : ticketUnreadCount }}</span>
             </div>
             <div>
@@ -533,18 +544,45 @@ async function handleRedeemInvite() {
         </div>
       </div>
 
+      <!-- 外观（主题三档切换） -->
+      <div class="bg-white rounded-2xl border border-gray-100/80 shadow-sm px-4 py-3.5 flex items-center justify-between gap-3">
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 rounded-full bg-brand-50 flex items-center justify-center">
+            <SunMoon class="w-4 h-4 text-brand-500" />
+          </div>
+          <div>
+            <p class="text-sm font-medium text-gray-900">外观</p>
+            <p class="text-xs text-gray-400">自动：18:00–06:00 深色</p>
+          </div>
+        </div>
+        <div class="flex p-1 bg-gray-100 rounded-full" role="radiogroup" aria-label="外观">
+          <button
+            v-for="opt in themeOptions"
+            :key="opt.value"
+            role="radio"
+            :aria-checked="themeMode === opt.value"
+            class="press flex items-center gap-1 h-8 px-2.5 rounded-full text-xs font-semibold transition-all duration-300"
+            :class="themeMode === opt.value ? 'bg-white text-brand-600 shadow-sm dark:bg-gray-300 dark:text-gray-900' : 'text-gray-500'"
+            @click="setThemeMode(opt.value)"
+          >
+            <component :is="opt.icon" class="w-3.5 h-3.5" />
+            {{ opt.label }}
+          </button>
+        </div>
+      </div>
+
       <!-- 退出登录（底部，导航栏上方） -->
       <div class="flex-1" />
       <Button
         variant="outline"
-        class="w-full h-11 border-red-200 text-red-500 hover:bg-red-50 text-sm"
+        class="w-full h-12 border-red-200 bg-white text-red-500 hover:bg-red-50 text-sm"
         @click="handleLogout"
       >
         <LogOut class="w-4 h-4" />
         退出登录
       </Button>
 
-      <p class="text-center text-xs text-gray-300 pb-2">copyright © 2026</p>
+      <p class="text-center text-xs text-gray-400 pb-2">copyright © 2026</p>
     </div>
 
     <!-- 兑换弹窗遮罩 -->
@@ -611,7 +649,7 @@ async function handleRedeemInvite() {
             />
             <div
               v-else-if="captchaError"
-              class="h-10 w-[120px] rounded-lg border border-red-200 bg-red-50 flex items-center justify-center text-[10px] leading-tight text-red-400 text-center px-1 cursor-pointer"
+              class="h-10 w-[120px] rounded-lg border border-red-200 bg-red-50 flex items-center justify-center text-xs leading-tight text-red-400 text-center px-1 cursor-pointer"
               title="点击重试"
               @click="refreshCaptcha"
             >
@@ -663,7 +701,7 @@ async function handleRedeemInvite() {
             @input="fillInviteError = ''"
           />
           <p v-if="fillInviteError" class="text-xs text-red-500 mt-1">{{ fillInviteError }}</p>
-          <p class="text-[10px] text-gray-400 mt-1">填写后你与好友都将获得奖励积分（每个账号仅可填写一次）</p>
+          <p class="text-xs text-gray-400 mt-1">填写后你与好友都将获得奖励积分（每个账号仅可填写一次）</p>
         </div>
         <Button class="w-full h-10 text-sm font-medium" :disabled="bindingInvite" @click="submitFillInvite">
           {{ bindingInvite ? '提交中...' : '提交' }}
diff --git a/frondend/src/views/ticket/TicketDetail.vue b/frondend/src/views/ticket/TicketDetail.vue
index 1858357..d2bc4ae 100644
--- a/frondend/src/views/ticket/TicketDetail.vue
+++ b/frondend/src/views/ticket/TicketDetail.vue
@@ -64,9 +64,9 @@ async function handleReply() {
 </script>
 
 <template>
-  <div class="flex flex-col min-h-full bg-gray-50">
+  <div class="flex flex-col min-h-full">
     <!-- 顶部导航 -->
-    <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
+    <div class="sticky top-0 z-10 glass-bar border-b border-gray-200/60" style="padding-top: env(safe-area-inset-top)">
       <div class="flex items-center px-4 h-12">
         <button class="w-8 h-8 flex items-center justify-center -ml-1 text-gray-600" @click="router.back()">
           <ArrowLeft class="w-5 h-5" />
diff --git a/frondend/src/views/ticket/TicketList.vue b/frondend/src/views/ticket/TicketList.vue
index 4cd781b..cd413af 100644
--- a/frondend/src/views/ticket/TicketList.vue
+++ b/frondend/src/views/ticket/TicketList.vue
@@ -111,9 +111,9 @@ async function handleDelete(t: TicketListItem, e: Event) {
 </script>
 
 <template>
-  <div class="flex flex-col min-h-full bg-gray-50">
+  <div class="flex flex-col min-h-full">
     <!-- 顶部导航 -->
-    <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
+    <div class="sticky top-0 z-10 glass-bar border-b border-gray-200/60" style="padding-top: env(safe-area-inset-top)">
       <div class="flex items-center px-4 h-12">
         <button class="w-8 h-8 flex items-center justify-center -ml-1 text-gray-600" @click="router.back()">
           <ArrowLeft class="w-5 h-5" />
@@ -124,12 +124,12 @@ async function handleDelete(t: TicketListItem, e: Event) {
 
     <!-- 新建按钮 -->
     <div class="px-4 py-3">
-      <Button class="w-full h-10 text-sm font-medium" @click="openCreate">
+      <Button class="w-full h-12 text-[15px] bg-brand-gradient" @click="openCreate">
         <Plus class="w-4 h-4 mr-1" />
         新建工单
       </Button>
       <!-- 提示 -->
-      <p class="text-center text-[10px] text-gray-400 mt-2">您最多可同时拥有 2 个未关闭的工单</p>
+      <p class="text-center text-xs text-gray-400 mt-2">您最多可同时拥有 2 个未关闭的工单</p>
     </div>
 
     <!-- 工单列表 -->
@@ -143,7 +143,7 @@ async function handleDelete(t: TicketListItem, e: Event) {
         <div
           v-for="t in tickets"
           :key="t.id"
-          class="bg-white rounded-xl border border-gray-100 px-4 py-3.5 active:bg-gray-50 transition-colors cursor-pointer"
+          class="press bg-white rounded-2xl border border-gray-100/80 shadow-sm px-4 py-3.5 active:bg-gray-50 cursor-pointer"
           @click="goDetail(t.id)"
         >
           <div class="flex items-center justify-between mb-1">