From 741d328430a8fbd8699950b9eb318153eb53a5a0 Mon Sep 17 00:00:00 2001
From: Cccc_ <me@iscccc.eu.org>
Date: Mon, 4 May 2026 19:40:56 +0800
Subject: [PATCH] style(new-frontend): consolidate visual tokens

---
 .../new-frontend/src/components/AppLayout.vue |  74 ++++----
 .../src/components/StateBlock.vue             |  20 +-
 .../templates/TemplateFieldNode.vue           |  28 +--
 apps/new-frontend/src/components/ui.ts        |  45 +++--
 .../src/components/ui/button/index.ts         |   4 +
 apps/new-frontend/src/style.css               |  70 ++++---
 apps/new-frontend/src/views/DashboardView.vue | 172 ++++++++----------
 apps/new-frontend/src/views/LoginView.vue     |  63 +++----
 apps/new-frontend/src/views/NotFoundView.vue  |  16 +-
 .../src/views/PendingApprovalView.vue         |  26 +--
 apps/new-frontend/src/views/RecordsView.vue   |  39 ++--
 apps/new-frontend/src/views/SettingsView.vue  |  26 +--
 .../src/views/TaskRecordsView.vue             |  28 +--
 apps/new-frontend/src/views/TasksView.vue     |  90 ++++-----
 .../src/views/admin/AdminLogsView.vue         |   7 +-
 .../src/views/admin/AdminRecordsView.vue      |  20 +-
 .../src/views/admin/AdminStatsView.vue        |  37 ++--
 .../src/views/admin/AdminTemplatesView.vue    |  33 ++--
 .../src/views/admin/AdminUsersView.vue        |  68 +++----
 19 files changed, 366 insertions(+), 500 deletions(-)

diff --git a/apps/new-frontend/src/components/AppLayout.vue b/apps/new-frontend/src/components/AppLayout.vue
index d8e3607..a229c0b 100644
--- a/apps/new-frontend/src/components/AppLayout.vue
+++ b/apps/new-frontend/src/components/AppLayout.vue
@@ -58,9 +58,9 @@ const themeModes = [
 
 function themeModeButtonClass(mode: ThemeMode) {
   if (theme.state.mode === mode) {
-    return 'bg-zinc-900 text-white shadow-sm hover:bg-zinc-900 hover:text-white dark:bg-zinc-100 dark:text-zinc-950 dark:hover:bg-zinc-100 dark:hover:text-zinc-950'
+    return 'bg-foreground text-background shadow-sm hover:bg-foreground hover:text-background'
   }
-  return 'text-zinc-500 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-50'
+  return 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
 }
 
 function go(path: string) {
@@ -75,10 +75,8 @@ function signOut() {
 </script>
 
 <template>
-  <div class="min-h-[100dvh] bg-zinc-50 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50">
-    <header
-      class="sticky top-0 z-20 border-b border-zinc-200 bg-white/95 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/90"
-    >
+  <div class="min-h-[100dvh] bg-background text-foreground">
+    <header class="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur">
       <div class="flex h-14 w-full items-center justify-between px-4 sm:px-6 lg:px-8">
         <div class="flex items-center gap-3">
           <Button
@@ -93,27 +91,27 @@ function signOut() {
           </Button>
           <button class="flex items-center gap-3 text-left" type="button" @click="go('/dashboard')">
             <span
-              class="hidden size-9 items-center justify-center rounded-lg bg-emerald-700 text-white shadow-sm sm:inline-flex"
+              class="hidden size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm sm:inline-flex"
             >
               <CheckCircle2 class="size-5" />
             </span>
             <span>
-              <div class="text-sm font-semibold leading-4">接龙自动打卡</div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400">CheckIn workspace</div>
+              <div class="text-sm font-semibold leading-4 text-foreground">接龙自动打卡</div>
+              <div class="text-xs text-muted-foreground">CheckIn workspace</div>
             </span>
           </button>
         </div>
 
         <div class="flex items-center gap-3">
           <div class="hidden text-right sm:block">
-            <div class="text-sm font-medium">{{ authState.user?.alias ?? '未登录' }}</div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              {{ roleLabel }} · {{ approvalLabel }}
+            <div class="text-sm font-medium text-foreground">
+              {{ authState.user?.alias ?? '未登录' }}
             </div>
+            <div class="text-xs text-muted-foreground">{{ roleLabel }} · {{ approvalLabel }}</div>
           </div>
           <TooltipProvider>
             <div
-              class="inline-flex items-center rounded-lg border border-zinc-200 bg-white p-0.5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
+              class="inline-flex items-center rounded-lg border border-border bg-background p-0.5 shadow-sm"
               :aria-label="`主题模式，当前${themeLabel}`"
             >
               <Tooltip v-for="item in themeModes" :key="item.mode">
@@ -148,19 +146,19 @@ function signOut() {
       class="grid min-h-[calc(100dvh-3.5rem)] w-full grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)]"
     >
       <aside
-        class="border-b border-zinc-200 bg-white px-3 py-3 shadow-sm lg:min-h-[calc(100dvh-3.5rem)] lg:border-b-0 lg:border-r lg:shadow-none dark:border-zinc-800 dark:bg-zinc-950"
+        class="border-b border-border bg-card px-3 py-3 shadow-sm lg:min-h-[calc(100dvh-3.5rem)] lg:border-b-0 lg:border-r lg:shadow-none"
         :class="mobileOpen ? 'block' : 'hidden lg:block'"
       >
-        <div
-          class="mb-4 rounded-lg border border-zinc-200 bg-zinc-50 p-3 lg:hidden dark:border-zinc-700 dark:bg-zinc-900"
-        >
-          <div class="text-sm font-semibold">{{ authState.user?.alias ?? '未登录' }}</div>
-          <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+        <div class="mb-4 rounded-lg border border-border bg-muted p-3 lg:hidden">
+          <div class="text-sm font-semibold text-foreground">
+            {{ authState.user?.alias ?? '未登录' }}
+          </div>
+          <div class="mt-1 text-xs text-muted-foreground">
             {{ roleLabel }} · {{ approvalLabel }}
           </div>
         </div>
         <div
-          class="mb-2 px-3 text-xs font-semibold uppercase tracking-normal text-zinc-500 dark:text-zinc-400"
+          class="mb-2 px-3 text-xs font-semibold uppercase tracking-normal text-muted-foreground"
         >
           工作台
         </div>
@@ -169,11 +167,11 @@ function signOut() {
             v-for="link in userLinks"
             :key="link.path"
             type="button"
-            class="flex min-h-9 items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition hover:bg-emerald-50 hover:text-emerald-900 dark:hover:bg-zinc-900 dark:hover:text-emerald-300"
+            class="flex min-h-9 items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition hover:bg-accent hover:text-accent-foreground"
             :class="
               router.state.path === link.path
-                ? 'bg-emerald-700 text-white shadow-sm hover:bg-emerald-700 hover:text-white dark:bg-emerald-600 dark:text-white'
-                : 'text-zinc-700 dark:text-zinc-300'
+                ? 'bg-primary text-primary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground'
+                : 'text-muted-foreground'
             "
             @click="go(link.path)"
           >
@@ -182,9 +180,9 @@ function signOut() {
           </button>
         </nav>
 
-        <div v-if="isAdmin" class="mt-5 border-t border-zinc-200 pt-4 dark:border-zinc-800">
+        <div v-if="isAdmin" class="mt-5 border-t border-border pt-4">
           <div
-            class="mb-2 flex items-center justify-between rounded-md border border-sky-200 bg-sky-50 px-3 py-2 text-xs font-semibold text-sky-800 dark:border-sky-900/70 dark:bg-sky-950/50 dark:text-sky-200"
+            class="mb-2 flex items-center justify-between rounded-md border border-[var(--tone-info-border)] bg-[var(--tone-info-bg)] px-3 py-2 text-xs font-semibold text-[var(--tone-info-fg)]"
           >
             <span>管理员工作区</span>
             <Shield class="size-3.5" />
@@ -194,11 +192,11 @@ function signOut() {
               v-for="link in adminLinks"
               :key="link.path"
               type="button"
-              class="flex min-h-9 items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition hover:bg-sky-50 hover:text-sky-900 dark:hover:bg-zinc-900 dark:hover:text-sky-300"
+              class="flex min-h-9 items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition hover:bg-accent hover:text-accent-foreground"
               :class="
                 router.state.path === link.path
-                  ? 'bg-sky-700 text-white shadow-sm hover:bg-sky-700 hover:text-white dark:bg-sky-600 dark:text-white'
-                  : 'text-zinc-700 dark:text-zinc-300'
+                  ? 'bg-[var(--tone-info-strong)] text-white shadow-sm hover:bg-[var(--tone-info-strong-hover)] hover:text-white'
+                  : 'text-muted-foreground'
               "
               @click="go(link.path)"
             >
@@ -209,34 +207,32 @@ function signOut() {
         </div>
       </aside>
 
-      <main class="min-w-0 px-4 py-4 sm:px-6 lg:px-8">
+      <main class="min-w-0 bg-background px-4 py-4 sm:px-6 lg:px-8">
         <div
-          class="mb-5 grid gap-3 rounded-xl border border-zinc-200 bg-white px-4 py-3 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-none"
+          class="mb-5 grid gap-3 rounded-xl border border-border bg-card px-4 py-3 shadow-sm dark:shadow-none"
           :class="{
-            'border-sky-200 bg-sky-50/70 dark:border-sky-900/70 dark:bg-sky-950/30': isAdminRoute,
+            'border-[var(--tone-info-border)] bg-[var(--tone-info-bg)]': isAdminRoute,
           }"
         >
           <div class="min-w-0">
             <div
               v-if="isAdminRoute"
-              class="mb-1 inline-flex items-center gap-1 rounded-full border border-sky-200 bg-white px-2 py-0.5 text-xs font-medium text-sky-700 dark:border-sky-900/70 dark:bg-sky-950/70 dark:text-sky-200"
+              class="mb-1 inline-flex items-center gap-1 rounded-full border border-[var(--tone-info-border)] bg-background px-2 py-0.5 text-xs font-medium text-[var(--tone-info-fg)]"
             >
               <Shield class="size-3" />
               管理员
             </div>
-            <h1
-              class="truncate text-2xl font-semibold tracking-normal text-zinc-950 dark:text-zinc-50"
-            >
+            <h1 class="truncate text-2xl font-semibold tracking-normal text-foreground">
               {{ title }}
             </h1>
           </div>
           <div class="flex flex-wrap items-center gap-2">
             <div
-              class="inline-flex items-center gap-2 rounded-full border bg-white px-3 py-1 text-xs font-medium dark:bg-zinc-950"
+              class="inline-flex items-center gap-2 rounded-full border bg-background px-3 py-1 text-xs font-medium"
               :class="
                 authState.user?.is_approved
-                  ? 'border-emerald-200 text-emerald-700 dark:border-emerald-900/70 dark:text-emerald-300'
-                  : 'border-amber-200 text-amber-700 dark:border-amber-900/70 dark:text-amber-300'
+                  ? 'border-[var(--tone-success-border)] text-[var(--tone-success-fg)]'
+                  : 'border-[var(--tone-warning-border)] text-[var(--tone-warning-fg)]'
               "
             >
               <UserRound class="size-3.5" />
@@ -244,7 +240,7 @@ function signOut() {
             </div>
             <div
               v-if="isAdminRoute"
-              class="inline-flex items-center gap-2 rounded-full border border-sky-200 bg-white px-3 py-1 text-xs font-medium text-sky-700 dark:border-sky-900/70 dark:bg-zinc-950 dark:text-sky-300"
+              class="inline-flex items-center gap-2 rounded-full border border-[var(--tone-info-border)] bg-background px-3 py-1 text-xs font-medium text-[var(--tone-info-fg)]"
             >
               <Shield class="size-3.5" />
               管理员工作区
diff --git a/apps/new-frontend/src/components/StateBlock.vue b/apps/new-frontend/src/components/StateBlock.vue
index 087650e..57c01e4 100644
--- a/apps/new-frontend/src/components/StateBlock.vue
+++ b/apps/new-frontend/src/components/StateBlock.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AlertCircle, Loader2, Search } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
 
 defineProps<{
   title: string
@@ -15,14 +16,14 @@ defineEmits<{
 
 <template>
   <div
-    class="grid gap-4 rounded-xl border border-dashed border-zinc-200 bg-white p-4 text-left shadow-sm sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center dark:border-zinc-800 dark:bg-zinc-900"
+    class="grid gap-4 rounded-xl border border-dashed border-border bg-card p-4 text-left text-card-foreground shadow-sm sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center dark:shadow-none"
   >
     <div
-      class="flex size-10 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-600 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-300"
+      class="flex size-10 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground"
       :class="{
-        'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/70 dark:bg-rose-950/50 dark:text-rose-300':
+        'border-[var(--tone-danger-border)] bg-[var(--tone-danger-bg)] text-[var(--tone-danger-fg)]':
           type === 'error',
-        'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300':
+        'border-[var(--tone-info-border)] bg-[var(--tone-info-bg)] text-[var(--tone-info-fg)]':
           type === 'loading',
       }"
     >
@@ -31,18 +32,19 @@ defineEmits<{
       <Search v-else class="size-5" />
     </div>
     <div class="min-w-0">
-      <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ title }}</div>
-      <p v-if="description" class="mt-1 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+      <div class="text-sm font-semibold text-foreground">{{ title }}</div>
+      <p v-if="description" class="mt-1 text-sm leading-5 text-muted-foreground">
         {{ description }}
       </p>
     </div>
-    <button
+    <Button
       v-if="actionLabel"
       type="button"
-      class="inline-flex min-h-9 items-center justify-center rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-700 shadow-sm transition hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-700/20 active:translate-y-px sm:justify-self-end dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
+      variant="outline"
+      class="sm:justify-self-end"
       @click="$emit('action')"
     >
       {{ actionLabel }}
-    </button>
+    </Button>
   </div>
 </template>
diff --git a/apps/new-frontend/src/components/templates/TemplateFieldNode.vue b/apps/new-frontend/src/components/templates/TemplateFieldNode.vue
index 411aae2..b14fce5 100644
--- a/apps/new-frontend/src/components/templates/TemplateFieldNode.vue
+++ b/apps/new-frontend/src/components/templates/TemplateFieldNode.vue
@@ -214,19 +214,19 @@ function removeOption(index: number) {
         <button
           v-if="canAddChildren || fieldNode"
           type="button"
-          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-zinc-200 text-zinc-500 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-zinc-200 text-zinc-500 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
           :title="collapsed ? '展开' : '收起'"
           @click="collapsed = !collapsed"
         >
-          <ChevronRight v-if="collapsed" class="size-4" />
-          <ChevronDown v-else class="size-4" />
+          <ChevronRight v-if="collapsed" class="size-5" />
+          <ChevronDown v-else class="size-5" />
         </button>
         <div
-          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300"
         >
-          <ListTree v-if="kind === 'array'" class="size-4" />
-          <Braces v-else-if="kind === 'object'" class="size-4" />
-          <span v-else class="text-xs font-semibold">Aa</span>
+          <ListTree v-if="kind === 'array'" class="size-5" />
+          <Braces v-else-if="kind === 'object'" class="size-5" />
+          <span v-else class="text-sm font-semibold">Aa</span>
         </div>
         <div class="min-w-0">
           <div class="flex flex-wrap items-center gap-2">
@@ -255,27 +255,27 @@ function removeOption(index: number) {
       <div class="flex flex-wrap gap-1">
         <button
           type="button"
-          :class="[buttonBase, buttonTone.ghost, 'size-8 min-h-8 px-0 py-0']"
+          :class="[buttonBase, buttonTone.ghost, 'size-10 min-h-10 px-0 py-0']"
           title="上移"
           @click="move('up')"
         >
-          <ArrowUp class="size-4" />
+          <ArrowUp class="size-6" />
         </button>
         <button
           type="button"
-          :class="[buttonBase, buttonTone.ghost, 'size-8 min-h-8 px-0 py-0']"
+          :class="[buttonBase, buttonTone.ghost, 'size-10 min-h-10 px-0 py-0']"
           title="下移"
           @click="move('down')"
         >
-          <ArrowDown class="size-4" />
+          <ArrowDown class="size-6" />
         </button>
         <button
           type="button"
-          :class="[buttonBase, buttonTone.danger, 'size-8 min-h-8 px-0 py-0']"
+          :class="[buttonBase, buttonTone.danger, 'size-10 min-h-10 px-0 py-0']"
           title="删除"
           @click="deleteNode"
         >
-          <Trash2 class="size-4" />
+          <Trash2 class="size-6" />
         </button>
       </div>
     </div>
@@ -388,7 +388,7 @@ function removeOption(index: number) {
               type="button"
               @click="addOption"
             >
-              <Plus class="size-3.5" />
+              <Plus class="size-4" />
               添加选项
             </button>
           </div>
diff --git a/apps/new-frontend/src/components/ui.ts b/apps/new-frontend/src/components/ui.ts
index 538ede7..7218b9b 100644
--- a/apps/new-frontend/src/components/ui.ts
+++ b/apps/new-frontend/src/components/ui.ts
@@ -1,61 +1,58 @@
 export type Tone = 'neutral' | 'success' | 'warning' | 'danger' | 'info'
 
 export const buttonBase =
-  'inline-flex min-h-9 items-center justify-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium shadow-sm transition duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-700/20 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-emerald-400/30'
+  'inline-flex min-h-9 items-center justify-center gap-2 rounded-md border px-3 py-2 text-sm font-medium shadow-sm transition duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50'
 
 export const buttonTone = {
-  primary:
-    'border-emerald-700 bg-emerald-700 text-white hover:bg-emerald-800 dark:border-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-500',
+  primary: 'border-primary bg-primary text-primary-foreground hover:bg-primary/90',
   secondary:
-    'border-zinc-200 bg-white text-zinc-900 hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:border-zinc-600 dark:hover:bg-zinc-800',
+    'border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
   ghost:
-    'border-transparent bg-transparent text-zinc-700 shadow-none hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800',
+    'border-transparent bg-transparent text-muted-foreground shadow-none hover:bg-accent hover:text-accent-foreground',
   danger:
-    'border-rose-200 bg-rose-50 text-rose-700 hover:border-rose-300 hover:bg-rose-100 dark:border-rose-900/70 dark:bg-rose-950/50 dark:text-rose-300 dark:hover:border-rose-800 dark:hover:bg-rose-900/40',
+    'border-destructive/30 bg-destructive/10 text-destructive hover:border-destructive/40 hover:bg-destructive/15',
   admin:
-    'border-sky-700 bg-sky-700 text-white hover:bg-sky-800 dark:border-sky-500 dark:bg-sky-600 dark:hover:bg-sky-500',
+    'border-[var(--tone-info-strong)] bg-[var(--tone-info-strong)] text-white hover:bg-[var(--tone-info-strong-hover)]',
 }
 
 export const inputClass =
-  'w-full min-h-9 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-emerald-700 focus:ring-2 focus:ring-emerald-700/10 disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:text-zinc-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-emerald-500 dark:focus:ring-emerald-400/10 dark:disabled:bg-zinc-900 dark:disabled:text-zinc-500'
+  'w-full min-h-9 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none transition placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/15 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground'
 
 export const textareaClass = `${inputClass} min-h-24 resize-y font-mono text-xs leading-5`
 
 export const cardClass =
-  'rounded-xl border border-zinc-200/80 bg-white shadow-[0_12px_28px_-24px_rgba(24,24,27,0.42)] dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-none'
+  'rounded-xl border border-border bg-card text-card-foreground shadow-[0_12px_28px_-24px_rgba(24,24,27,0.42)] dark:shadow-none'
 
 export const sectionHeaderClass =
-  'grid gap-2 border-b border-zinc-200 bg-zinc-50/65 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center dark:border-zinc-800 dark:bg-zinc-950/50'
+  'grid gap-2 border-b border-border bg-muted/55 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center'
 
 export const actionBarClass =
-  'grid gap-2 border-b border-zinc-200 bg-zinc-50/65 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center dark:border-zinc-800 dark:bg-zinc-950/50'
+  'grid gap-2 border-b border-border bg-muted/55 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center'
 
-export const labelClass =
-  'text-xs font-semibold uppercase tracking-normal text-zinc-500 dark:text-zinc-400'
+export const labelClass = 'text-xs font-semibold uppercase tracking-normal text-muted-foreground'
 
-export const mutedText = 'text-sm text-zinc-500 dark:text-zinc-400'
+export const mutedText = 'text-sm text-muted-foreground'
 
 export const alertClass = {
-  info: 'rounded-lg border border-sky-200 bg-sky-50 px-3 py-2 text-sm leading-5 text-sky-800 dark:border-sky-900/70 dark:bg-sky-950/50 dark:text-sky-200',
+  info: 'rounded-lg border border-[var(--tone-info-border)] bg-[var(--tone-info-bg)] px-3 py-2 text-sm leading-5 text-[var(--tone-info-fg)]',
   success:
-    'rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm leading-5 text-emerald-800 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-200',
+    'rounded-lg border border-[var(--tone-success-border)] bg-[var(--tone-success-bg)] px-3 py-2 text-sm leading-5 text-[var(--tone-success-fg)]',
   warning:
-    'rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm leading-5 text-amber-800 dark:border-amber-900/70 dark:bg-amber-950/50 dark:text-amber-200',
+    'rounded-lg border border-[var(--tone-warning-border)] bg-[var(--tone-warning-bg)] px-3 py-2 text-sm leading-5 text-[var(--tone-warning-fg)]',
   danger:
-    'rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm leading-5 text-rose-800 dark:border-rose-900/70 dark:bg-rose-950/50 dark:text-rose-200',
+    'rounded-lg border border-[var(--tone-danger-border)] bg-[var(--tone-danger-bg)] px-3 py-2 text-sm leading-5 text-[var(--tone-danger-fg)]',
 }
 
 export function toneClass(tone: Tone) {
   const tones: Record<Tone, string> = {
-    neutral:
-      'border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
+    neutral: 'border-border bg-muted text-muted-foreground',
     success:
-      'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300',
+      'border-[var(--tone-success-border)] bg-[var(--tone-success-bg)] text-[var(--tone-success-fg)]',
     warning:
-      'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/70 dark:bg-amber-950/50 dark:text-amber-300',
+      'border-[var(--tone-warning-border)] bg-[var(--tone-warning-bg)] text-[var(--tone-warning-fg)]',
     danger:
-      'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/70 dark:bg-rose-950/50 dark:text-rose-300',
-    info: 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900/70 dark:bg-sky-950/50 dark:text-sky-300',
+      'border-[var(--tone-danger-border)] bg-[var(--tone-danger-bg)] text-[var(--tone-danger-fg)]',
+    info: 'border-[var(--tone-info-border)] bg-[var(--tone-info-bg)] text-[var(--tone-info-fg)]',
   }
   return `inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${tones[tone]}`
 }
diff --git a/apps/new-frontend/src/components/ui/button/index.ts b/apps/new-frontend/src/components/ui/button/index.ts
index 4a3d4f7..4a05409 100644
--- a/apps/new-frontend/src/components/ui/button/index.ts
+++ b/apps/new-frontend/src/components/ui/button/index.ts
@@ -11,6 +11,10 @@ export const buttonVariants = cva(
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        danger:
+          'border border-destructive/30 bg-destructive/10 text-destructive hover:border-destructive/40 hover:bg-destructive/15 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        admin:
+          'bg-[var(--tone-info-strong)] text-white hover:bg-[var(--tone-info-strong-hover)] focus-visible:ring-[var(--tone-info-border)]',
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
diff --git a/apps/new-frontend/src/style.css b/apps/new-frontend/src/style.css
index e7cbc41..c22fcd0 100644
--- a/apps/new-frontend/src/style.css
+++ b/apps/new-frontend/src/style.css
@@ -65,6 +65,20 @@
   --accent: oklch(0.94 0.045 150);
   --accent-foreground: oklch(0.23 0.07 150);
   --destructive: oklch(0.577 0.245 27.325);
+  --tone-success-bg: oklch(0.965 0.045 150);
+  --tone-success-fg: oklch(0.36 0.11 150);
+  --tone-success-border: oklch(0.84 0.09 150);
+  --tone-warning-bg: oklch(0.97 0.05 88);
+  --tone-warning-fg: oklch(0.42 0.1 70);
+  --tone-warning-border: oklch(0.85 0.11 82);
+  --tone-danger-bg: oklch(0.96 0.035 18);
+  --tone-danger-fg: oklch(0.48 0.16 24);
+  --tone-danger-border: oklch(0.84 0.09 20);
+  --tone-info-bg: oklch(0.96 0.035 225);
+  --tone-info-fg: oklch(0.39 0.1 230);
+  --tone-info-border: oklch(0.84 0.08 225);
+  --tone-info-strong: oklch(0.48 0.13 230);
+  --tone-info-strong-hover: oklch(0.42 0.13 230);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(0.58 0.12 150);
@@ -99,6 +113,20 @@
   --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --tone-success-bg: oklch(0.28 0.055 150 / 58%);
+  --tone-success-fg: oklch(0.82 0.12 150);
+  --tone-success-border: oklch(0.43 0.09 150 / 75%);
+  --tone-warning-bg: oklch(0.3 0.06 70 / 58%);
+  --tone-warning-fg: oklch(0.84 0.13 82);
+  --tone-warning-border: oklch(0.48 0.1 74 / 75%);
+  --tone-danger-bg: oklch(0.31 0.075 24 / 58%);
+  --tone-danger-fg: oklch(0.82 0.12 20);
+  --tone-danger-border: oklch(0.48 0.11 22 / 75%);
+  --tone-info-bg: oklch(0.31 0.06 230 / 58%);
+  --tone-info-fg: oklch(0.82 0.11 225);
+  --tone-info-border: oklch(0.48 0.1 230 / 75%);
+  --tone-info-strong: oklch(0.62 0.14 230);
+  --tone-info-strong-hover: oklch(0.68 0.14 230);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);
@@ -138,54 +166,23 @@
   }
 }
 
-.dark .bg-white,
-.dark .bg-white\/95 {
+.dark .bg-white {
   background-color: rgb(24 24 27);
 }
 
-.dark .bg-zinc-50,
-.dark .bg-zinc-50\/70 {
+.dark .bg-zinc-50 {
   background-color: rgb(9 9 11 / 0.62);
 }
 
-.dark .bg-emerald-50,
-.dark .bg-emerald-50\/60,
-.dark .bg-emerald-50\/70 {
+.dark .bg-emerald-50 {
   background-color: rgb(2 44 34 / 0.42);
 }
 
-.dark .bg-sky-50,
-.dark .bg-sky-50\/70 {
-  background-color: rgb(8 47 73 / 0.46);
-}
-
-.dark .bg-amber-50,
-.dark .bg-amber-50\/70,
-.dark .bg-amber-50\/80 {
-  background-color: rgb(69 26 3 / 0.42);
-}
-
-.dark .bg-rose-50,
-.dark .bg-rose-50\/70 {
-  background-color: rgb(76 5 25 / 0.42);
-}
-
-.dark .border-zinc-200,
-.dark .border-zinc-200\/80 {
+.dark .border-zinc-200 {
   border-color: rgb(39 39 42);
 }
 
-.dark .divide-zinc-200 > :not(:last-child) {
-  border-color: rgb(39 39 42);
-}
-
-.dark .text-zinc-950,
-.dark .text-zinc-900 {
-  color: rgb(244 244 245);
-}
-
 .dark .text-zinc-800,
-.dark .text-zinc-700,
 .dark .text-zinc-600 {
   color: rgb(212 212 216);
 }
@@ -195,7 +192,6 @@
   color: rgb(161 161 170);
 }
 
-.dark .hover\:text-zinc-950:hover,
-.dark .hover\:text-zinc-900:hover {
+.dark .hover\:text-zinc-950:hover {
   color: rgb(250 250 250);
 }
diff --git a/apps/new-frontend/src/views/DashboardView.vue b/apps/new-frontend/src/views/DashboardView.vue
index d64924a..13c85b0 100644
--- a/apps/new-frontend/src/views/DashboardView.vue
+++ b/apps/new-frontend/src/views/DashboardView.vue
@@ -22,15 +22,8 @@ import {
 import { useAuth } from '@/app/auth'
 import { useRouter } from '@/app/router'
 import StateBlock from '@/components/StateBlock.vue'
-import {
-  alertClass,
-  buttonBase,
-  buttonTone,
-  cardClass,
-  inputClass,
-  sectionHeaderClass,
-  toneClass,
-} from '@/components/ui'
+import { alertClass, cardClass, inputClass, sectionHeaderClass, toneClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import {
   cronLabel,
   extractErrorMessage,
@@ -162,26 +155,28 @@ onMounted(load)
         :class="[alertClass.info, 'flex flex-wrap items-center justify-between gap-2']"
       >
         <span>未设置邮箱</span>
-        <button
-          class="font-semibold hover:text-sky-950 dark:hover:text-sky-100"
+        <Button
+          variant="ghost"
+          class="font-semibold"
           type="button"
           @click="router.navigate('/settings')"
         >
           设置
-        </button>
+        </Button>
       </div>
       <div
         v-if="needsPassword"
         :class="[alertClass.info, 'flex flex-wrap items-center justify-between gap-2']"
       >
         <span>未设置登录密码</span>
-        <button
-          class="font-semibold hover:text-sky-950 dark:hover:text-sky-100"
+        <Button
+          variant="ghost"
+          class="font-semibold"
           type="button"
           @click="router.navigate('/settings')"
         >
           设置
-        </button>
+        </Button>
       </div>
       <div
         v-if="tokenStatus && !tokenStatus.is_valid"
@@ -191,26 +186,28 @@ onMounted(load)
           <AlertTriangle class="size-4 shrink-0" />
           打卡凭证已过期
         </span>
-        <button
-          class="font-semibold hover:text-amber-950 dark:hover:text-amber-100"
+        <Button
+          variant="ghost"
+          class="font-semibold"
           type="button"
           @click="router.navigate('/login')"
         >
           刷新
-        </button>
+        </Button>
       </div>
       <div
         v-if="tasks.length === 0"
         :class="[alertClass.info, 'flex flex-wrap items-center justify-between gap-2']"
       >
         <span>暂无打卡任务</span>
-        <button
-          class="font-semibold hover:text-sky-950 dark:hover:text-sky-100"
+        <Button
+          variant="ghost"
+          class="font-semibold"
           type="button"
           @click="router.navigate('/tasks')"
         >
           创建
-        </button>
+        </Button>
       </div>
     </div>
 
@@ -218,10 +215,10 @@ onMounted(load)
       <div :class="[cardClass, 'overflow-hidden']">
         <div :class="sectionHeaderClass">
           <div class="flex items-center gap-2">
-            <CalendarDays class="size-4 text-emerald-700" />
+            <CalendarDays class="size-4 text-[var(--tone-success-fg)]" />
             <h2 class="font-semibold">手动打卡</h2>
           </div>
-          <span class="text-sm text-zinc-500">{{ activeTasks }} 个启用</span>
+          <span class="text-sm text-muted-foreground">{{ activeTasks }} 个启用</span>
         </div>
         <div class="p-4">
           <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
@@ -230,24 +227,23 @@ onMounted(load)
                 {{ task.name || `任务 #${task.id}` }} · {{ task.is_active ? '启用' : '停用' }}
               </option>
             </select>
-            <button
-              :class="[buttonBase, buttonTone.primary]"
+            <Button
               :disabled="!selectedTaskId || checkInLoading"
               type="button"
               @click="manualCheckIn"
             >
               <CalendarDays class="size-4" />
               {{ checkInLoading ? '打卡中' : '立即打卡' }}
-            </button>
+            </Button>
           </div>
           <div
             v-if="selectedTask"
-            class="mt-4 rounded-lg border border-zinc-200 bg-zinc-50 p-4 text-sm dark:border-zinc-800 dark:bg-zinc-950"
+            class="mt-4 rounded-lg border border-border bg-muted p-4 text-sm"
           >
-            <div class="font-medium text-zinc-900 dark:text-zinc-100">
+            <div class="font-medium text-foreground">
               {{ selectedTask.name || `任务 #${selectedTask.id}` }}
             </div>
-            <div class="mt-1 text-zinc-500 dark:text-zinc-400">
+            <div class="mt-1 text-muted-foreground">
               ThreadId: {{ selectedTask.thread_id || '未解析' }} ·
               {{ cronLabel(selectedTask.cron_expression) }}
             </div>
@@ -256,15 +252,15 @@ onMounted(load)
           <div v-if="error" :class="[alertClass.danger, 'mt-4']">{{ error }}</div>
           <div
             v-if="latestStatus"
-            class="mt-4 rounded-lg border border-zinc-200 bg-white p-4 text-sm dark:border-zinc-800 dark:bg-zinc-950"
+            class="mt-4 rounded-lg border border-border bg-background p-4 text-sm"
           >
             <div class="flex flex-wrap items-center justify-between gap-2">
-              <span class="font-semibold text-zinc-900 dark:text-zinc-100">本次打卡</span>
+              <span class="font-semibold text-foreground">本次打卡</span>
               <span :class="toneClass(statusTone(latestStatus.status))">{{
                 statusLabel(latestStatus.status)
               }}</span>
             </div>
-            <p class="mt-2 text-zinc-500 dark:text-zinc-400">
+            <p class="mt-2 text-muted-foreground">
               {{
                 latestStatus.response_text || latestStatus.error_message || '正在等待后端返回结果。'
               }}
@@ -272,15 +268,15 @@ onMounted(load)
           </div>
           <div
             v-else-if="lastRecord"
-            class="mt-4 rounded-lg border border-zinc-200 bg-white p-4 text-sm dark:border-zinc-800 dark:bg-zinc-950"
+            class="mt-4 rounded-lg border border-border bg-background p-4 text-sm"
           >
             <div class="flex flex-wrap items-center justify-between gap-2">
-              <span class="font-semibold text-zinc-900 dark:text-zinc-100">上次打卡</span>
+              <span class="font-semibold text-foreground">上次打卡</span>
               <span :class="toneClass(statusTone(lastRecord.status))">{{
                 statusLabel(lastRecord.status)
               }}</span>
             </div>
-            <p class="mt-2 text-zinc-500 dark:text-zinc-400">
+            <p class="mt-2 text-muted-foreground">
               {{ formatDateTime(lastRecord.check_in_time) }} ·
               {{ lastRecord.response_text || lastRecord.error_message || '无响应内容' }}
             </p>
@@ -291,14 +287,14 @@ onMounted(load)
       <div :class="[cardClass, 'overflow-hidden']">
         <div :class="sectionHeaderClass">
           <div class="flex items-center gap-2">
-            <KeyRound class="size-4 text-emerald-700" />
+            <KeyRound class="size-4 text-[var(--tone-success-fg)]" />
             <h2 class="font-semibold">授权</h2>
           </div>
           <span :class="toneClass(tokenTone)">{{ tokenLabel }}</span>
         </div>
         <div class="grid gap-3 p-4 text-sm">
           <div class="flex items-center justify-between">
-            <span class="text-zinc-500">剩余</span>
+            <span class="text-muted-foreground">剩余</span>
             <span class="font-medium">
               {{
                 tokenStatus?.days_until_expiry == null
@@ -308,18 +304,18 @@ onMounted(load)
             </span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="text-zinc-500">预警</span>
+            <span class="text-muted-foreground">预警</span>
             <span>{{ tokenStatus?.expiring_soon ? '是' : '否' }}</span>
           </div>
-          <div class="text-sm text-zinc-500 dark:text-zinc-400">{{ tokenDetail }}</div>
-          <button
-            :class="[buttonBase, tokenStatus?.is_valid ? buttonTone.secondary : buttonTone.primary]"
+          <div class="text-sm text-muted-foreground">{{ tokenDetail }}</div>
+          <Button
+            :variant="tokenStatus?.is_valid ? 'outline' : 'default'"
             type="button"
             @click="router.navigate('/login')"
           >
             <QrCode class="size-4" />
             扫码刷新
-          </button>
+          </Button>
         </div>
       </div>
     </section>
@@ -327,49 +323,37 @@ onMounted(load)
     <section :class="[cardClass, 'overflow-hidden']">
       <div :class="sectionHeaderClass">
         <div class="flex items-center gap-2">
-          <UserRound class="size-4 text-emerald-700" />
+          <UserRound class="size-4 text-[var(--tone-success-fg)]" />
           <h2 class="font-semibold">个人信息</h2>
         </div>
-        <button
-          :class="[buttonBase, buttonTone.secondary]"
-          type="button"
-          @click="router.navigate('/settings')"
-        >
+        <Button variant="outline" type="button" @click="router.navigate('/settings')">
           个人设置
-        </button>
+        </Button>
       </div>
       <div class="grid gap-3 p-4 text-sm md:grid-cols-4">
-        <div
-          class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950"
-        >
-          <div class="text-zinc-500">用户名</div>
-          <div class="mt-1 font-medium text-zinc-900 dark:text-zinc-100">
+        <div class="rounded-lg border border-border bg-muted px-3 py-2">
+          <div class="text-muted-foreground">用户名</div>
+          <div class="mt-1 font-medium text-foreground">
             {{ auth.state.user?.alias || '未登录' }}
           </div>
         </div>
-        <div
-          class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950"
-        >
-          <div class="text-zinc-500">角色</div>
+        <div class="rounded-lg border border-border bg-muted px-3 py-2">
+          <div class="text-muted-foreground">角色</div>
           <div class="mt-1">
             <span :class="toneClass(auth.state.user?.role === 'admin' ? 'danger' : 'info')">
               {{ auth.state.user?.role === 'admin' ? '管理员' : '普通用户' }}
             </span>
           </div>
         </div>
-        <div
-          class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950"
-        >
-          <div class="text-zinc-500">邮箱</div>
-          <div class="mt-1 font-medium text-zinc-900 dark:text-zinc-100">
+        <div class="rounded-lg border border-border bg-muted px-3 py-2">
+          <div class="text-muted-foreground">邮箱</div>
+          <div class="mt-1 font-medium text-foreground">
             {{ auth.state.user?.email || '未设置' }}
           </div>
         </div>
-        <div
-          class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950"
-        >
-          <div class="text-zinc-500">注册时间</div>
-          <div class="mt-1 font-medium text-zinc-900 dark:text-zinc-100">
+        <div class="rounded-lg border border-border bg-muted px-3 py-2">
+          <div class="text-muted-foreground">注册时间</div>
+          <div class="mt-1 font-medium text-foreground">
             {{ formatDateTime(auth.state.user?.created_at) }}
           </div>
         </div>
@@ -381,48 +365,40 @@ onMounted(load)
         <div>
           <h2 class="font-semibold">任务概览</h2>
         </div>
-        <button
-          :class="[buttonBase, buttonTone.secondary]"
-          type="button"
-          @click="router.navigate('/tasks')"
-        >
+        <Button variant="outline" type="button" @click="router.navigate('/tasks')">
           管理任务
-        </button>
+        </Button>
       </div>
       <div class="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-4">
-        <div
-          class="rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950"
-        >
+        <div class="rounded-lg border border-border bg-muted p-3">
           <div class="flex items-center justify-between">
-            <span class="text-sm text-zinc-500">任务总数</span>
-            <CheckCircle2 class="size-4 text-emerald-600" />
+            <span class="text-sm text-muted-foreground">任务总数</span>
+            <CheckCircle2 class="size-4 text-[var(--tone-success-fg)]" />
           </div>
           <div class="mt-3 text-3xl font-semibold">{{ tasks.length }}</div>
-          <p class="mt-1 text-sm text-zinc-500">
+          <p class="mt-1 text-sm text-muted-foreground">
             {{ activeTasks }} 启用 · {{ inactiveTasks }} 停用
           </p>
         </div>
-        <div
-          class="rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950"
-        >
+        <div class="rounded-lg border border-border bg-muted p-3">
           <div class="flex items-center justify-between">
-            <span class="text-sm text-zinc-500">最近成功</span>
-            <Activity class="size-4 text-zinc-700" />
+            <span class="text-sm text-muted-foreground">最近成功</span>
+            <Activity class="size-4 text-foreground" />
           </div>
           <div class="mt-3 text-3xl font-semibold">{{ successToday }}</div>
-          <p class="mt-1 text-sm text-zinc-500">最近记录</p>
+          <p class="mt-1 text-sm text-muted-foreground">最近记录</p>
         </div>
-        <div
-          class="rounded-lg border border-zinc-200 bg-zinc-50 p-3 md:col-span-2 dark:border-zinc-800 dark:bg-zinc-950"
-        >
+        <div class="rounded-lg border border-border bg-muted p-3 md:col-span-2">
           <div class="flex items-center justify-between">
-            <span class="text-sm text-zinc-500">下次定时</span>
-            <Clock class="size-4 text-amber-600" />
+            <span class="text-sm text-muted-foreground">下次定时</span>
+            <Clock class="size-4 text-[var(--tone-warning-fg)]" />
           </div>
           <div class="mt-3 text-lg font-semibold">
             {{ cronLabel(nextActiveTask?.cron_expression) }}
           </div>
-          <p class="mt-1 text-sm text-zinc-500">{{ nextActiveTask?.name || '无启用任务' }}</p>
+          <p class="mt-1 text-sm text-muted-foreground">
+            {{ nextActiveTask?.name || '无启用任务' }}
+          </p>
         </div>
       </div>
     </section>
@@ -432,16 +408,12 @@ onMounted(load)
         <div>
           <h2 class="font-semibold">最近记录</h2>
         </div>
-        <button
-          :class="[buttonBase, buttonTone.secondary]"
-          type="button"
-          @click="router.navigate('/records')"
-        >
+        <Button variant="outline" type="button" @click="router.navigate('/records')">
           查看全部
-        </button>
+        </Button>
       </div>
       <StateBlock v-if="records.length === 0" title="暂无记录" />
-      <div v-else class="divide-y divide-zinc-200 dark:divide-zinc-800">
+      <div v-else class="divide-y divide-border">
         <div v-for="record in records" :key="record.id" class="px-4 py-3">
           <div class="flex items-center justify-between gap-3">
             <span class="font-medium">{{ record.task_name || `任务 #${record.task_id}` }}</span>
@@ -449,7 +421,7 @@ onMounted(load)
               statusLabel(record.status)
             }}</span>
           </div>
-          <div class="mt-1 text-sm text-zinc-500">
+          <div class="mt-1 text-sm text-muted-foreground">
             {{ formatDateTime(record.check_in_time) }} ·
             {{ record.trigger_type ? statusLabel(record.trigger_type) : '未注明触发' }}
           </div>
diff --git a/apps/new-frontend/src/views/LoginView.vue b/apps/new-frontend/src/views/LoginView.vue
index 1f6c14e..c50d68e 100644
--- a/apps/new-frontend/src/views/LoginView.vue
+++ b/apps/new-frontend/src/views/LoginView.vue
@@ -4,7 +4,8 @@ import { computed, onBeforeUnmount, ref } from 'vue'
 import { authApi } from '@/api'
 import { useAuth } from '@/app/auth'
 import { useRouter } from '@/app/router'
-import { alertClass, buttonBase, buttonTone, cardClass, inputClass } from '@/components/ui'
+import { alertClass, cardClass, inputClass, labelClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage } from '@/utils/format'
 
 const router = useRouter()
@@ -112,32 +113,28 @@ onBeforeUnmount(() => {
 
 <template>
   <main
-    class="flex min-h-[100dvh] items-center justify-center bg-zinc-50 px-4 py-8 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50"
+    class="flex min-h-[100dvh] items-center justify-center bg-background px-4 py-8 text-foreground"
   >
     <section class="w-full max-w-md">
       <div :class="[cardClass, 'overflow-hidden']">
-        <div class="border-b border-zinc-200 px-4 py-3 text-center dark:border-zinc-800">
+        <div class="border-b border-border px-4 py-3 text-center">
           <div
-            class="mx-auto mb-3 flex size-10 items-center justify-center rounded-lg bg-emerald-700 text-white shadow-sm"
+            class="mx-auto mb-3 flex size-10 items-center justify-center rounded-lg bg-[var(--tone-info-strong)] text-background shadow-sm"
           >
             <QrCode class="size-5" />
           </div>
-          <h1 class="text-xl font-semibold tracking-normal text-zinc-950 dark:text-zinc-50">
-            接龙自动打卡系统
-          </h1>
+          <h1 class="text-xl font-semibold tracking-normal text-foreground">接龙自动打卡系统</h1>
         </div>
 
         <div class="p-4">
-          <div
-            class="grid grid-cols-2 rounded-lg border border-zinc-200 bg-zinc-50 p-1 text-sm dark:border-zinc-700 dark:bg-zinc-950"
-          >
+          <div class="grid grid-cols-2 rounded-lg border border-border bg-muted p-1 text-sm">
             <button
               type="button"
               class="rounded-md px-3 py-2 text-center font-medium transition"
               :class="
                 loginMode === 'qrcode'
-                  ? 'bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-zinc-50'
-                  : 'text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
               "
               @click="switchMode('qrcode')"
             >
@@ -148,8 +145,8 @@ onBeforeUnmount(() => {
               class="rounded-md px-3 py-2 text-center font-medium transition"
               :class="
                 loginMode === 'password'
-                  ? 'bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-zinc-50'
-                  : 'text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
               "
               @click="switchMode('password')"
             >
@@ -163,10 +160,10 @@ onBeforeUnmount(() => {
             @submit.prevent="loginWithPassword"
           >
             <label class="grid gap-2">
-              <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">用户名</span>
+              <span :class="labelClass">用户名</span>
               <div class="relative">
                 <UserRound
-                  class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-zinc-400 dark:text-zinc-500"
+                  class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
                 />
                 <input
                   v-model="alias"
@@ -178,10 +175,10 @@ onBeforeUnmount(() => {
               </div>
             </label>
             <label class="grid gap-2">
-              <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">密码</span>
+              <span :class="labelClass">密码</span>
               <div class="relative">
                 <KeyRound
-                  class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-zinc-400 dark:text-zinc-500"
+                  class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
                 />
                 <input
                   v-model="password"
@@ -200,22 +197,18 @@ onBeforeUnmount(() => {
               {{ info }}
             </div>
 
-            <button
-              :class="[buttonBase, buttonTone.primary, 'w-full']"
-              :disabled="!canSubmitPassword"
-              type="submit"
-            >
+            <Button class="w-full" type="submit" :disabled="!canSubmitPassword">
               <KeyRound class="size-4" />
               {{ loading ? '登录中' : '登录' }}
-            </button>
+            </Button>
           </form>
 
           <div v-else class="mt-5 grid gap-4">
             <label class="grid gap-2">
-              <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">用户名</span>
+              <span :class="labelClass">用户名</span>
               <div class="relative">
                 <UserRound
-                  class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-zinc-400 dark:text-zinc-500"
+                  class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
                 />
                 <input
                   v-model="alias"
@@ -235,27 +228,19 @@ onBeforeUnmount(() => {
               {{ info }}
             </div>
 
-            <button
-              :class="[buttonBase, buttonTone.primary, 'w-full']"
-              :disabled="!canRequestQr"
-              type="button"
-              @click="requestQrCode"
-            >
+            <Button class="w-full" type="button" :disabled="!canRequestQr" @click="requestQrCode">
               <QrCode class="size-4" />
               {{ loading ? '正在登录' : '扫码登录/注册' }}
-            </button>
+            </Button>
 
-            <div
-              v-if="qrImage"
-              class="rounded-lg border border-zinc-200 bg-zinc-50 p-4 text-center dark:border-zinc-700 dark:bg-zinc-950"
-            >
+            <div v-if="qrImage" class="rounded-lg border border-border bg-muted p-4 text-center">
               <img
                 :src="qrImage.startsWith('data:') ? qrImage : `data:image/png;base64,${qrImage}`"
                 alt="QQ 登录二维码"
-                class="mx-auto size-48 rounded-md bg-white object-contain dark:bg-zinc-100"
+                class="mx-auto size-48 rounded-md bg-background object-contain"
               />
               <button
-                class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+                class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition hover:text-foreground"
                 type="button"
                 @click="requestQrCode"
               >
diff --git a/apps/new-frontend/src/views/NotFoundView.vue b/apps/new-frontend/src/views/NotFoundView.vue
index be1cb48..0841337 100644
--- a/apps/new-frontend/src/views/NotFoundView.vue
+++ b/apps/new-frontend/src/views/NotFoundView.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
 import { useRouter } from '@/app/router'
-import { buttonBase, buttonTone } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 
 const router = useRouter()
 </script>
 
 <template>
-  <section class="rounded-lg border border-zinc-200 bg-white p-8 text-center shadow-sm">
+  <section
+    class="rounded-lg border border-border bg-card p-8 text-center text-card-foreground shadow-sm dark:shadow-none"
+  >
     <h2 class="text-xl font-semibold">页面不存在</h2>
-    <p class="mt-2 text-sm text-zinc-500">当前地址没有对应的新前端页面。</p>
-    <button
-      :class="[buttonBase, buttonTone.primary, 'mt-5']"
-      type="button"
-      @click="router.navigate('/dashboard')"
-    >
-      返回仪表盘
-    </button>
+    <p class="mt-2 text-sm text-muted-foreground">当前地址没有对应的新前端页面。</p>
+    <Button type="button" class="mt-5" @click="router.navigate('/dashboard')"> 返回仪表盘 </Button>
   </section>
 </template>
diff --git a/apps/new-frontend/src/views/PendingApprovalView.vue b/apps/new-frontend/src/views/PendingApprovalView.vue
index b30b2cc..d4d1ac9 100644
--- a/apps/new-frontend/src/views/PendingApprovalView.vue
+++ b/apps/new-frontend/src/views/PendingApprovalView.vue
@@ -4,7 +4,8 @@ import { ref } from 'vue'
 import { userApi } from '@/api'
 import { useAuth } from '@/app/auth'
 import { useRouter } from '@/app/router'
-import { alertClass, buttonBase, buttonTone, cardClass, toneClass } from '@/components/ui'
+import { alertClass, cardClass, toneClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage, formatFullDateTime } from '@/utils/format'
 
 const auth = useAuth()
@@ -31,41 +32,34 @@ async function refresh() {
 
 <template>
   <section :class="[cardClass, 'mx-auto max-w-2xl overflow-hidden']">
-    <div
-      class="border-b border-amber-200 bg-amber-50/80 p-6 dark:border-amber-900/70 dark:bg-amber-950/30"
-    >
+    <div class="border-b border-[var(--tone-warning-border)] bg-[var(--tone-warning-bg)] p-6">
       <span :class="toneClass('warning')">待审批</span>
       <h2 class="mt-3 text-xl font-semibold">账号等待审批</h2>
-      <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+      <p class="mt-2 text-sm text-muted-foreground">
         当前账号
         {{ auth.state.user?.alias ?? '未知用户' }} 已完成登录，但还需要管理员审批后才能访问工作台。
       </p>
     </div>
     <div class="p-6">
       <dl class="mt-5 grid gap-3 sm:grid-cols-2">
-        <div class="rounded-md border border-zinc-200 p-3 dark:border-zinc-800 dark:bg-zinc-950">
-          <dt class="text-xs text-zinc-500 dark:text-zinc-400">创建时间</dt>
+        <div class="rounded-md border border-border bg-background p-3">
+          <dt class="text-xs text-muted-foreground">创建时间</dt>
           <dd class="mt-1 text-sm font-medium">
             {{ formatFullDateTime(auth.state.user?.created_at) }}
           </dd>
         </div>
-        <div class="rounded-md border border-zinc-200 p-3 dark:border-zinc-800 dark:bg-zinc-950">
-          <dt class="text-xs text-zinc-500 dark:text-zinc-400">审批状态</dt>
+        <div class="rounded-md border border-border bg-background p-3">
+          <dt class="text-xs text-muted-foreground">审批状态</dt>
           <dd class="mt-1 text-sm font-medium">待审批</dd>
         </div>
       </dl>
       <div v-if="error" :class="[alertClass.danger, 'mt-4']">
         {{ error }}
       </div>
-      <button
-        :class="[buttonBase, buttonTone.primary, 'mt-5']"
-        :disabled="loading"
-        type="button"
-        @click="refresh"
-      >
+      <Button class="mt-5" :disabled="loading" type="button" @click="refresh">
         <RefreshCw class="size-4" :class="{ 'animate-spin': loading }" />
         刷新审批状态
-      </button>
+      </Button>
     </div>
   </section>
 </template>
diff --git a/apps/new-frontend/src/views/RecordsView.vue b/apps/new-frontend/src/views/RecordsView.vue
index 3ba48a6..68264c5 100644
--- a/apps/new-frontend/src/views/RecordsView.vue
+++ b/apps/new-frontend/src/views/RecordsView.vue
@@ -3,14 +3,8 @@ import { Search } from 'lucide-vue-next'
 import { onMounted, reactive, ref } from 'vue'
 import { checkInApi, type CheckInRecord } from '@/api'
 import StateBlock from '@/components/StateBlock.vue'
-import {
-  buttonBase,
-  buttonTone,
-  cardClass,
-  inputClass,
-  sectionHeaderClass,
-  toneClass,
-} from '@/components/ui'
+import { cardClass, inputClass, sectionHeaderClass, toneClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage, formatFullDateTime, statusLabel, statusTone } from '@/utils/format'
 
 const loading = ref(true)
@@ -61,10 +55,10 @@ onMounted(load)
         <option value="scheduler">定时</option>
         <option value="admin">管理员</option>
       </select>
-      <button :class="[buttonBase, buttonTone.secondary]" type="button" @click="load">
+      <Button variant="outline" type="button" @click="load">
         <Search class="size-4" />
         筛选
-      </button>
+      </Button>
     </div>
 
     <StateBlock v-if="loading" title="正在加载记录" type="loading" />
@@ -78,7 +72,7 @@ onMounted(load)
     />
     <StateBlock v-else-if="records.length === 0" title="暂无记录" />
     <div v-else>
-      <div class="divide-y divide-zinc-200 dark:divide-zinc-800">
+      <div class="divide-y divide-border">
         <article
           v-for="record in records"
           :key="record.id"
@@ -88,15 +82,15 @@ onMounted(load)
             <div class="truncate text-sm font-semibold">
               {{ record.task_name || `任务 #${record.task_id}` }}
             </div>
-            <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+            <div class="mt-1 text-xs text-muted-foreground">
               {{ formatFullDateTime(record.check_in_time) }}
             </div>
           </div>
           <div class="min-w-0">
-            <p class="truncate text-sm text-zinc-700 dark:text-zinc-200">
+            <p class="truncate text-sm text-foreground">
               {{ record.response_text || record.error_message || '无响应内容' }}
             </p>
-            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+            <p class="mt-1 text-xs text-muted-foreground">
               触发方式：{{ statusLabel(record.trigger_type) }}
             </p>
           </div>
@@ -108,29 +102,24 @@ onMounted(load)
         </article>
       </div>
       <div
-        class="flex flex-wrap items-center justify-between gap-3 border-t border-zinc-200 bg-zinc-50/70 px-4 py-3 text-sm text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950/50 dark:text-zinc-400"
+        class="flex flex-wrap items-center justify-between gap-3 border-t border-border bg-muted/55 px-4 py-3 text-sm text-muted-foreground"
       >
         <span
           >共 {{ total }} 条，当前 {{ filters.skip + 1 }} -
           {{ Math.min(filters.skip + filters.limit, total) }}</span
         >
         <div class="flex gap-2">
-          <button
-            :class="[buttonBase, buttonTone.secondary]"
-            :disabled="filters.skip === 0"
-            type="button"
-            @click="page(-1)"
-          >
+          <Button variant="outline" :disabled="filters.skip === 0" type="button" @click="page(-1)">
             上一页
-          </button>
-          <button
-            :class="[buttonBase, buttonTone.secondary]"
+          </Button>
+          <Button
+            variant="outline"
             :disabled="filters.skip + filters.limit >= total"
             type="button"
             @click="page(1)"
           >
             下一页
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/apps/new-frontend/src/views/SettingsView.vue b/apps/new-frontend/src/views/SettingsView.vue
index c6e2f8e..9d0fd08 100644
--- a/apps/new-frontend/src/views/SettingsView.vue
+++ b/apps/new-frontend/src/views/SettingsView.vue
@@ -6,13 +6,13 @@ import { useAuth } from '@/app/auth'
 import StateBlock from '@/components/StateBlock.vue'
 import {
   alertClass,
-  buttonBase,
-  buttonTone,
   cardClass,
   inputClass,
+  labelClass,
   sectionHeaderClass,
   toneClass,
 } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage } from '@/utils/format'
 
 const auth = useAuth()
@@ -89,16 +89,16 @@ onMounted(load)
       </div>
       <div class="grid gap-4 p-4">
         <label class="grid gap-2">
-          <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">别名</span>
+          <span :class="labelClass">别名</span>
           <input v-model="form.alias" :class="inputClass" required />
         </label>
         <label class="grid gap-2">
-          <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">邮箱</span>
+          <span :class="labelClass">邮箱</span>
           <input v-model="form.email" :class="inputClass" type="email" placeholder="用于打卡通知" />
         </label>
         <div class="grid gap-4 md:grid-cols-2">
           <label class="grid gap-2">
-            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">当前密码</span>
+            <span :class="labelClass">当前密码</span>
             <input
               v-model="form.current_password"
               :class="inputClass"
@@ -107,7 +107,7 @@ onMounted(load)
             />
           </label>
           <label class="grid gap-2">
-            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">新密码</span>
+            <span :class="labelClass">新密码</span>
             <input
               v-model="form.new_password"
               :class="inputClass"
@@ -122,10 +122,10 @@ onMounted(load)
         <div v-if="message" :class="alertClass.success">
           {{ message }}
         </div>
-        <button :class="[buttonBase, buttonTone.primary, 'w-fit']" :disabled="saving" type="submit">
+        <Button class="w-fit" :disabled="saving" type="submit">
           <Save class="size-4" />
           {{ saving ? '保存中' : '保存设置' }}
-        </button>
+        </Button>
       </div>
     </form>
 
@@ -134,8 +134,8 @@ onMounted(load)
         class="grid gap-2 border-b px-4 py-3"
         :class="
           token?.is_valid
-            ? 'border-emerald-200 bg-emerald-50/70 dark:border-emerald-900/70 dark:bg-emerald-950/30'
-            : 'border-rose-200 bg-rose-50/70 dark:border-rose-900/70 dark:bg-rose-950/30'
+            ? 'border-[var(--tone-success-border)] bg-[var(--tone-success-bg)]'
+            : 'border-[var(--tone-danger-border)] bg-[var(--tone-danger-bg)]'
         "
       >
         <div class="flex items-center justify-between gap-2">
@@ -148,17 +148,17 @@ onMounted(load)
       <div class="p-4">
         <div class="grid gap-3 text-sm">
           <div class="flex items-center justify-between">
-            <span class="text-zinc-500">状态</span>
+            <span class="text-muted-foreground">状态</span>
             <span :class="toneClass(token?.is_valid ? 'success' : 'danger')">{{
               token?.is_valid ? '可用' : '不可用'
             }}</span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="text-zinc-500">即将过期</span>
+            <span class="text-muted-foreground">即将过期</span>
             <span>{{ token?.expiring_soon ? '是' : '否' }}</span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="text-zinc-500">剩余天数</span>
+            <span class="text-muted-foreground">剩余天数</span>
             <span>{{ token?.days_until_expiry ?? '未知' }}</span>
           </div>
         </div>
diff --git a/apps/new-frontend/src/views/TaskRecordsView.vue b/apps/new-frontend/src/views/TaskRecordsView.vue
index 7ab2e09..1fb1c08 100644
--- a/apps/new-frontend/src/views/TaskRecordsView.vue
+++ b/apps/new-frontend/src/views/TaskRecordsView.vue
@@ -4,14 +4,8 @@ import { onMounted, reactive, ref } from 'vue'
 import { checkInApi, taskApi, type CheckInRecord, type Task } from '@/api'
 import { useRouter } from '@/app/router'
 import StateBlock from '@/components/StateBlock.vue'
-import {
-  buttonBase,
-  buttonTone,
-  cardClass,
-  inputClass,
-  sectionHeaderClass,
-  toneClass,
-} from '@/components/ui'
+import { cardClass, inputClass, sectionHeaderClass, toneClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage, formatFullDateTime, statusLabel, statusTone } from '@/utils/format'
 
 const router = useRouter()
@@ -49,7 +43,7 @@ onMounted(load)
     <div :class="[sectionHeaderClass, 'lg:grid-cols-[1fr_180px_180px_auto]']">
       <div>
         <button
-          class="mb-2 inline-flex items-center gap-1 text-sm text-zinc-500 hover:text-zinc-900"
+          class="mb-2 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
           type="button"
           @click="router.navigate('/tasks')"
         >
@@ -68,10 +62,10 @@ onMounted(load)
         <option value="manual">手动</option>
         <option value="scheduler">定时</option>
       </select>
-      <button :class="[buttonBase, buttonTone.secondary]" type="button" @click="load">
+      <Button variant="outline" type="button" @click="load">
         <Search class="size-4" />
         筛选
-      </button>
+      </Button>
     </div>
 
     <StateBlock v-if="loading" title="正在加载任务记录" type="loading" />
@@ -84,20 +78,20 @@ onMounted(load)
       @action="load"
     />
     <StateBlock v-else-if="records.length === 0" title="暂无记录" />
-    <div v-else class="divide-y divide-zinc-200">
+    <div v-else class="divide-y divide-border">
       <article
         v-for="record in records"
         :key="record.id"
         class="grid gap-3 p-3 md:grid-cols-[180px_minmax(0,1fr)_auto] md:items-center"
       >
-        <div class="text-sm text-zinc-500 dark:text-zinc-400">
+        <div class="text-sm text-muted-foreground">
           {{ formatFullDateTime(record.check_in_time) }}
         </div>
         <div class="min-w-0">
-          <div class="truncate text-sm text-zinc-700 dark:text-zinc-200">
+          <div class="truncate text-sm text-foreground">
             {{ record.response_text || record.error_message || '无响应内容' }}
           </div>
-          <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+          <div class="mt-1 text-xs text-muted-foreground">
             触发：{{ statusLabel(record.trigger_type) }}
           </div>
         </div>
@@ -107,9 +101,7 @@ onMounted(load)
           }}</span>
         </div>
       </article>
-      <div
-        class="border-t border-zinc-200 bg-zinc-50/70 px-4 py-3 text-sm text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950/50 dark:text-zinc-400"
-      >
+      <div class="border-t border-border bg-muted/55 px-4 py-3 text-sm text-muted-foreground">
         共 {{ total }} 条记录
       </div>
     </div>
diff --git a/apps/new-frontend/src/views/TasksView.vue b/apps/new-frontend/src/views/TasksView.vue
index 5291cef..2529b51 100644
--- a/apps/new-frontend/src/views/TasksView.vue
+++ b/apps/new-frontend/src/views/TasksView.vue
@@ -15,14 +15,14 @@ import { useRouter } from '@/app/router'
 import StateBlock from '@/components/StateBlock.vue'
 import {
   alertClass,
-  buttonBase,
-  buttonTone,
   cardClass,
   inputClass,
+  labelClass,
   sectionHeaderClass,
   textareaClass,
   toneClass,
 } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import {
   cronLabel,
   extractErrorMessage,
@@ -214,16 +214,16 @@ onMounted(load)
         <div>
           <h2 class="font-semibold">从模板创建任务</h2>
         </div>
-        <button :class="[buttonBase, buttonTone.secondary]" type="button" @click="load">
+        <Button variant="outline" type="button" @click="load">
           <RefreshCw class="size-4" />
           刷新
-        </button>
+        </Button>
       </div>
 
       <form class="grid gap-4 p-4" @submit.prevent="createTask">
         <div class="grid gap-3 md:grid-cols-[220px_minmax(0,1fr)_220px]">
           <label class="grid gap-2">
-            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">模板</span>
+            <span :class="labelClass">模板</span>
             <select v-model.number="selectedTemplateId" :class="inputClass">
               <option v-for="template in templates" :key="template.id" :value="template.id">
                 {{ template.name }}
@@ -231,39 +231,35 @@ onMounted(load)
             </select>
           </label>
           <label class="grid gap-2">
-            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">任务名称</span>
+            <span :class="labelClass">任务名称</span>
             <input v-model="createForm.task_name" :class="inputClass" placeholder="可选" />
           </label>
           <label class="grid gap-2">
-            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400"
-              >接龙 ThreadId</span
-            >
+            <span :class="labelClass">接龙 ThreadId</span>
             <input v-model="createForm.thread_id" :class="inputClass" required />
           </label>
         </div>
         <div class="grid gap-3 md:grid-cols-[220px_minmax(0,1fr)] md:items-end">
           <label class="grid gap-2">
-            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Cron 表达式</span>
+            <span :class="labelClass">Cron 表达式</span>
             <input
               v-model="createForm.cron_expression"
               :class="inputClass"
               placeholder="0 20 * * *"
             />
           </label>
-          <button
-            :class="[buttonBase, buttonTone.primary, 'w-full md:w-fit']"
+          <Button
+            class="w-full md:w-fit"
             :disabled="creating || !selectedTemplateId || !createForm.thread_id"
             type="submit"
           >
             <Plus class="size-4" />
             {{ creating ? '创建中' : '创建任务' }}
-          </button>
+          </Button>
         </div>
         <div v-if="fieldEntries.length" class="grid gap-3 md:grid-cols-2">
           <label v-for="[key, field] in fieldEntries" :key="key" class="grid gap-2">
-            <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{
-              field?.display_name ?? key
-            }}</span>
+            <span :class="labelClass">{{ field?.display_name ?? key }}</span>
             <select
               v-if="field?.field_type === 'select'"
               v-model="createForm.field_values[key]"
@@ -320,12 +316,12 @@ onMounted(load)
           <h2 class="font-semibold">任务列表</h2>
         </div>
         <span
-          class="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-600 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-300"
+          class="rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground"
         >
           {{ tasks.length }} 个任务
         </span>
       </div>
-      <div class="divide-y divide-zinc-200 dark:divide-zinc-800">
+      <div class="divide-y divide-border">
         <article v-for="task in tasks" :key="task.id" class="p-3 sm:p-4">
           <div class="grid gap-3 lg:grid-cols-[1fr_auto]">
             <div class="min-w-0">
@@ -350,92 +346,78 @@ onMounted(load)
                   {{ statusLabel(status.status) }}
                 </span>
               </div>
-              <div
-                class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400"
-              >
+              <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-muted-foreground">
                 <span>ThreadId: {{ task.thread_id || '未解析' }}</span>
                 <span>{{ cronLabel(task.cron_expression) }}</span>
               </div>
             </div>
             <div class="flex flex-wrap gap-2 lg:justify-end">
-              <button
-                :class="[buttonBase, buttonTone.secondary]"
+              <Button
+                variant="outline"
                 type="button"
                 @click="router.navigate(`/tasks/${task.id}/records`)"
               >
                 记录
-              </button>
-              <button
-                :class="[buttonBase, buttonTone.secondary]"
+              </Button>
+              <Button
+                variant="outline"
                 :disabled="actionId === task.id"
                 type="button"
                 @click="manualCheckIn(task)"
               >
                 <Play class="size-4" />
                 打卡
-              </button>
-              <button
-                :class="[buttonBase, buttonTone.secondary]"
+              </Button>
+              <Button
+                variant="outline"
                 :disabled="actionId === task.id"
                 type="button"
                 @click="toggleTask(task)"
               >
                 <Check class="size-4" />
                 {{ task.is_active ? '停用' : '启用' }}
-              </button>
-              <button
-                :class="[buttonBase, buttonTone.ghost]"
-                type="button"
-                @click="startEdit(task)"
-              >
+              </Button>
+              <Button variant="ghost" type="button" @click="startEdit(task)">
                 <Edit3 class="size-4" />
                 编辑
-              </button>
-              <button
-                :class="[buttonBase, buttonTone.danger]"
+              </Button>
+              <Button
+                variant="danger"
                 :disabled="actionId === task.id"
                 type="button"
                 @click="deleteTask(task)"
               >
                 <Trash2 class="size-4" />
                 删除
-              </button>
+              </Button>
             </div>
           </div>
 
           <form
             v-if="editingTaskId === task.id"
-            class="mt-4 grid gap-3 rounded-lg border border-emerald-200 bg-emerald-50/60 p-3 dark:border-emerald-900/70 dark:bg-emerald-950/30"
+            class="mt-4 grid gap-3 rounded-lg border border-[var(--tone-success-border)] bg-[var(--tone-success-bg)] p-3"
             @submit.prevent="saveEdit(task.id)"
           >
             <div>
-              <h4 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">编辑任务</h4>
+              <h4 class="text-sm font-semibold text-foreground">编辑任务</h4>
             </div>
             <div class="grid gap-3 md:grid-cols-2">
               <label class="grid gap-2">
-                <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">任务名称</span>
+                <span :class="labelClass">任务名称</span>
                 <input v-model="editForm.name" :class="inputClass" />
               </label>
               <label class="grid gap-2">
-                <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Cron</span>
+                <span :class="labelClass">Cron</span>
                 <input v-model="editForm.cron_expression" :class="inputClass" />
               </label>
             </div>
             <label class="grid gap-2">
-              <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400"
-                >Payload JSON</span
-              >
+              <span :class="labelClass">Payload JSON</span>
               <textarea v-model="editForm.payload_config" :class="textareaClass" />
             </label>
             <div class="flex flex-wrap gap-2">
-              <button :class="[buttonBase, buttonTone.primary]" type="submit">保存</button>
-              <button
-                :class="[buttonBase, buttonTone.secondary]"
-                type="button"
-                @click="editingTaskId = null"
-              >
-                取消
-              </button>
+              <Button type="submit">保存</Button>
+              <Button variant="outline" type="button" @click="editingTaskId = null"> 取消 </Button>
             </div>
           </form>
         </article>
diff --git a/apps/new-frontend/src/views/admin/AdminLogsView.vue b/apps/new-frontend/src/views/admin/AdminLogsView.vue
index e96aba9..6b9c38c 100644
--- a/apps/new-frontend/src/views/admin/AdminLogsView.vue
+++ b/apps/new-frontend/src/views/admin/AdminLogsView.vue
@@ -2,7 +2,8 @@
 import { onMounted, ref } from 'vue'
 import { adminApi } from '@/api'
 import StateBlock from '@/components/StateBlock.vue'
-import { buttonBase, buttonTone, cardClass, inputClass, sectionHeaderClass } from '@/components/ui'
+import { cardClass, inputClass, sectionHeaderClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage } from '@/utils/format'
 
 const loading = ref(true)
@@ -41,9 +42,7 @@ onMounted(load)
           max="2000"
           class="max-w-40"
         />
-        <button :class="[buttonBase, buttonTone.secondary]" type="button" @click="load">
-          刷新日志
-        </button>
+        <Button variant="outline" type="button" @click="load"> 刷新日志 </Button>
       </div>
     </div>
     <StateBlock v-if="loading" title="正在加载日志" type="loading" />
diff --git a/apps/new-frontend/src/views/admin/AdminRecordsView.vue b/apps/new-frontend/src/views/admin/AdminRecordsView.vue
index dd3f821..dd0dd59 100644
--- a/apps/new-frontend/src/views/admin/AdminRecordsView.vue
+++ b/apps/new-frontend/src/views/admin/AdminRecordsView.vue
@@ -3,14 +3,8 @@ import { Search } from 'lucide-vue-next'
 import { onMounted, reactive, ref } from 'vue'
 import { checkInApi, type CheckInRecord } from '@/api'
 import StateBlock from '@/components/StateBlock.vue'
-import {
-  buttonBase,
-  buttonTone,
-  cardClass,
-  inputClass,
-  sectionHeaderClass,
-  toneClass,
-} from '@/components/ui'
+import { cardClass, inputClass, sectionHeaderClass, toneClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage, formatFullDateTime, statusLabel, statusTone } from '@/utils/format'
 
 const loading = ref(true)
@@ -52,10 +46,10 @@ onMounted(load)
         <option value="out_of_time">超出时间</option>
       </select>
       <input v-model.number="filters.limit" :class="inputClass" type="number" min="1" max="200" />
-      <button :class="[buttonBase, buttonTone.secondary]" type="button" @click="load">
+      <Button variant="outline" type="button" @click="load">
         <Search class="size-4" />
         筛选
-      </button>
+      </Button>
     </div>
     <StateBlock v-if="loading" title="正在加载记录" type="loading" />
     <StateBlock
@@ -67,7 +61,7 @@ onMounted(load)
       @action="load"
     />
     <StateBlock v-else-if="records.length === 0" title="暂无记录" />
-    <div v-else class="divide-y divide-zinc-200 dark:divide-zinc-800">
+    <div v-else class="divide-y divide-border">
       <article
         v-for="record in records"
         :key="record.id"
@@ -77,7 +71,7 @@ onMounted(load)
           <div class="truncate font-medium">
             {{ record.user_alias || record.user_email || `任务 #${record.task_id}` }}
           </div>
-          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
+          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-muted-foreground">
             <span>{{ formatFullDateTime(record.check_in_time) }}</span>
             <span>{{ record.response_text || record.error_message || '无响应内容' }}</span>
           </div>
@@ -86,7 +80,7 @@ onMounted(load)
           <span :class="toneClass(statusTone(record.status))">{{
             statusLabel(record.status)
           }}</span>
-          <span class="text-sm text-zinc-500">{{
+          <span class="text-sm text-muted-foreground">{{
             record.task_name || record.thread_id || '无任务名'
           }}</span>
         </div>
diff --git a/apps/new-frontend/src/views/admin/AdminStatsView.vue b/apps/new-frontend/src/views/admin/AdminStatsView.vue
index 3fe428b..08e78e3 100644
--- a/apps/new-frontend/src/views/admin/AdminStatsView.vue
+++ b/apps/new-frontend/src/views/admin/AdminStatsView.vue
@@ -2,7 +2,8 @@
 import { onMounted, ref } from 'vue'
 import { adminApi, type AdminStats } from '@/api'
 import StateBlock from '@/components/StateBlock.vue'
-import { buttonBase, buttonTone, cardClass, sectionHeaderClass } from '@/components/ui'
+import { cardClass, sectionHeaderClass } from '@/components/ui'
+import { Button } from '@/components/ui/button'
 import { extractErrorMessage } from '@/utils/format'
 
 const loading = ref(true)
@@ -39,36 +40,32 @@ onMounted(load)
       <div>
         <h2 class="font-semibold">系统统计</h2>
       </div>
-      <button :class="[buttonBase, buttonTone.secondary]" type="button" @click="load">刷新</button>
+      <Button variant="outline" type="button" @click="load">刷新</Button>
     </div>
     <div class="grid gap-3 p-4 md:grid-cols-2 xl:grid-cols-4">
-      <div
-        class="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950"
-      >
-        <div class="text-sm text-zinc-500">用户</div>
+      <div class="rounded-lg border border-border bg-background p-3">
+        <div class="text-sm text-muted-foreground">用户</div>
         <div class="mt-2 font-mono text-3xl font-semibold">{{ stats?.users.total }}</div>
-        <div class="mt-1 text-sm text-zinc-500">已审批 {{ stats?.users.active }}</div>
+        <div class="mt-1 text-sm text-muted-foreground">已审批 {{ stats?.users.active }}</div>
       </div>
-      <div
-        class="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950"
-      >
-        <div class="text-sm text-zinc-500">任务</div>
+      <div class="rounded-lg border border-border bg-background p-3">
+        <div class="text-sm text-muted-foreground">任务</div>
         <div class="mt-2 font-mono text-3xl font-semibold">{{ stats?.tasks.total }}</div>
-        <div class="mt-1 text-sm text-zinc-500">启用 {{ stats?.tasks.active }}</div>
+        <div class="mt-1 text-sm text-muted-foreground">启用 {{ stats?.tasks.active }}</div>
       </div>
-      <div
-        class="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950"
-      >
-        <div class="text-sm text-zinc-500">记录</div>
+      <div class="rounded-lg border border-border bg-background p-3">
+        <div class="text-sm text-muted-foreground">记录</div>
         <div class="mt-2 font-mono text-3xl font-semibold">{{ stats?.check_in_records.total }}</div>
-        <div class="mt-1 text-sm text-zinc-500">今日 {{ stats?.check_in_records.today }}</div>
+        <div class="mt-1 text-sm text-muted-foreground">
+          今日 {{ stats?.check_in_records.today }}
+        </div>
       </div>
       <div
-        class="rounded-lg border border-amber-200 bg-amber-50/70 p-3 dark:border-amber-900/70 dark:bg-amber-950/30"
+        class="rounded-lg border border-[var(--tone-warning-border)] bg-[var(--tone-warning-bg)] p-3"
       >
-        <div class="text-sm text-zinc-500">Token 预警</div>
+        <div class="text-sm text-muted-foreground">Token 预警</div>
         <div class="mt-2 font-mono text-3xl font-semibold">{{ stats?.tokens.expiring_soon }}</div>
-        <div class="mt-1 text-sm text-zinc-500">7 天内过期</div>
+        <div class="mt-1 text-sm text-muted-foreground">7 天内过期</div>
       </div>
     </div>
   </section>
diff --git a/apps/new-frontend/src/views/admin/AdminTemplatesView.vue b/apps/new-frontend/src/views/admin/AdminTemplatesView.vue
index 13ec96b..8987aeb 100644
--- a/apps/new-frontend/src/views/admin/AdminTemplatesView.vue
+++ b/apps/new-frontend/src/views/admin/AdminTemplatesView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Eye, Plus, Save, Trash2 } from 'lucide-vue-next'
+import { Edit3, Eye, Plus, Save, Trash2 } from 'lucide-vue-next'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { templateApi, type Template, type TemplatePreview } from '@/api'
 import StateBlock from '@/components/StateBlock.vue'
@@ -167,7 +167,7 @@ onMounted(load)
         action-label="新建模板"
         @action="startCreate"
       />
-      <div v-else class="divide-y divide-zinc-200 dark:divide-zinc-800">
+      <div v-else class="divide-y divide-border">
         <article
           v-for="template in templates"
           :key="template.id"
@@ -180,9 +180,7 @@ onMounted(load)
                 template.is_active ? '启用' : '停用'
               }}</span>
             </div>
-            <div
-              class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400"
-            >
+            <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-muted-foreground">
               <span>{{ template.description || '无描述' }}</span>
               <span>{{ formatDateTime(template.created_at) }}</span>
             </div>
@@ -192,13 +190,11 @@ onMounted(load)
               <Eye class="size-4" />
               预览
             </Button>
-            <Button type="button" variant="outline" @click="startEdit(template)"> 编辑 </Button>
-            <Button
-              type="button"
-              variant="outline"
-              class="border-rose-200 bg-rose-50 text-rose-700 hover:border-rose-300 hover:bg-rose-100 dark:border-rose-900/70 dark:bg-rose-950/50 dark:text-rose-300 dark:hover:border-rose-800 dark:hover:bg-rose-900/40"
-              @click="remove(template)"
-            >
+            <Button type="button" variant="outline" @click="startEdit(template)">
+              <Edit3 class="size-4" />
+              编辑
+            </Button>
+            <Button type="button" variant="danger" @click="remove(template)">
               <Trash2 class="size-4" />
               删除
             </Button>
@@ -223,9 +219,7 @@ onMounted(load)
       <DialogContent
         class="grid max-h-[calc(100dvh-2rem)] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden p-0 sm:max-w-[min(960px,calc(100vw-2rem))] lg:max-w-[min(1120px,calc(100vw-3rem))]"
       >
-        <DialogHeader
-          class="border-b border-zinc-200 bg-zinc-50/70 px-5 py-4 dark:border-zinc-800 dark:bg-zinc-950/50"
-        >
+        <DialogHeader class="border-b border-border bg-muted/55 px-5 py-4">
           <DialogTitle>{{ editorTitle }}</DialogTitle>
         </DialogHeader>
 
@@ -241,7 +235,7 @@ onMounted(load)
                 <input v-model="form.description" :class="inputClass" />
               </label>
               <label
-                class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-950"
+                class="flex min-h-9 items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm"
               >
                 <input v-model="form.is_active" type="checkbox" />
                 启用模板
@@ -250,10 +244,7 @@ onMounted(load)
 
             <TemplateConfigEditor v-model="form.field_config" @valid="editorValid = $event" />
 
-            <div
-              v-if="localPreviewPayload"
-              class="rounded-lg border border-zinc-200 p-3 dark:border-zinc-800"
-            >
+            <div v-if="localPreviewPayload" class="rounded-lg border border-border p-3">
               <details>
                 <summary class="cursor-pointer text-sm font-semibold">当前配置预览</summary>
                 <pre
@@ -272,7 +263,7 @@ onMounted(load)
           </div>
 
           <DialogFooter
-            class="sticky bottom-0 border-t border-zinc-200 bg-white/95 px-5 py-4 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/95"
+            class="sticky bottom-0 border-t border-border bg-background/95 px-5 py-4 backdrop-blur"
           >
             <Button type="button" variant="outline" @click="editingId = null">取消</Button>
             <Button :disabled="!editorValid" type="submit">
diff --git a/apps/new-frontend/src/views/admin/AdminUsersView.vue b/apps/new-frontend/src/views/admin/AdminUsersView.vue
index 27ae73a..f033dc9 100644
--- a/apps/new-frontend/src/views/admin/AdminUsersView.vue
+++ b/apps/new-frontend/src/views/admin/AdminUsersView.vue
@@ -5,10 +5,9 @@ import { adminApi, userApi, type User } from '@/api'
 import StateBlock from '@/components/StateBlock.vue'
 import {
   alertClass,
-  buttonBase,
-  buttonTone,
   cardClass,
   inputClass,
+  labelClass,
   sectionHeaderClass,
   toneClass,
 } from '@/components/ui'
@@ -106,17 +105,17 @@ onMounted(load)
         </span>
       </div>
       <div
-        class="grid gap-3 border-b border-zinc-200 bg-zinc-50/70 p-4 sm:grid-cols-[minmax(0,1fr)_auto_auto] dark:border-zinc-800 dark:bg-zinc-950/50"
+        class="grid gap-3 border-b border-border bg-muted/55 p-4 sm:grid-cols-[minmax(0,1fr)_auto_auto]"
       >
         <input v-model="search" :class="inputClass" class="max-w-sm" placeholder="搜索别名" />
-        <button :class="[buttonBase, buttonTone.secondary]" type="button" @click="load">
+        <Button variant="outline" type="button" @click="load">
           <Search class="size-4" />
           搜索
-        </button>
-        <button :class="[buttonBase, buttonTone.primary]" type="button" @click="startCreate">
+        </Button>
+        <Button type="button" @click="startCreate">
           <UserPlus class="size-4" />
           创建用户
-        </button>
+        </Button>
       </div>
       <StateBlock v-if="loading" title="正在加载用户" type="loading" />
       <StateBlock
@@ -128,7 +127,7 @@ onMounted(load)
         @action="load"
       />
       <StateBlock v-else-if="users.length === 0" title="暂无用户" />
-      <div v-else class="divide-y divide-zinc-200 dark:divide-zinc-800">
+      <div v-else class="divide-y divide-border">
         <article
           v-for="user in users"
           :key="user.id"
@@ -144,35 +143,24 @@ onMounted(load)
                 user.role
               }}</span>
             </div>
-            <div
-              class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400"
-            >
+            <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-muted-foreground">
               <span>{{ user.email || '未设置邮箱' }}</span>
               <span>{{ formatDateTime(user.created_at) }}</span>
             </div>
           </div>
           <div class="flex flex-wrap gap-2">
-            <button
-              v-if="!user.is_approved"
-              :class="[buttonBase, buttonTone.primary]"
-              type="button"
-              @click="approve(user.id)"
-            >
+            <Button v-if="!user.is_approved" type="button" @click="approve(user.id)">
               <Check class="size-4" />
               审批
-            </button>
-            <button :class="[buttonBase, buttonTone.danger]" type="button" @click="reject(user.id)">
+            </Button>
+            <Button variant="danger" type="button" @click="reject(user.id)">
               <Trash2 class="size-4" />
               删除
-            </button>
-            <button
-              :class="[buttonBase, buttonTone.secondary]"
-              type="button"
-              @click="startEdit(user)"
-            >
+            </Button>
+            <Button variant="outline" type="button" @click="startEdit(user)">
               <UserPlus class="size-4" />
               编辑
-            </button>
+            </Button>
           </div>
         </article>
       </div>
@@ -187,13 +175,13 @@ onMounted(load)
     >
       <div class="grid justify-items-center gap-4">
         <span
-          class="inline-flex size-12 items-center justify-center rounded-xl border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300"
+          class="inline-flex size-12 items-center justify-center rounded-xl border border-[var(--tone-success-border)] bg-[var(--tone-success-bg)] text-[var(--tone-success-fg)]"
         >
           <UserPlus class="size-5" />
         </span>
         <div class="grid gap-1">
           <h2 class="font-semibold">未选择用户</h2>
-          <p class="text-sm text-zinc-500 dark:text-zinc-400">创建或从列表编辑</p>
+          <p class="text-sm text-muted-foreground">创建或从列表编辑</p>
         </div>
         <Button type="button" @click="startCreate">
           <UserPlus class="size-4" />
@@ -210,29 +198,27 @@ onMounted(load)
       ]"
       @submit.prevent="save"
     >
-      <div
-        class="border-b border-zinc-200 bg-zinc-50/70 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-950/50"
-      >
+      <div class="border-b border-border bg-muted/55 px-4 py-3">
         <h2 class="font-semibold">{{ editingId === 'new' ? '创建用户' : '编辑用户' }}</h2>
       </div>
       <div class="grid gap-4 p-4">
         <label class="grid gap-2">
-          <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">别名</span>
+          <span :class="labelClass">别名</span>
           <input v-model="form.alias" :class="inputClass" required />
         </label>
         <label class="grid gap-2">
-          <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">邮箱</span>
+          <span :class="labelClass">邮箱</span>
           <input v-model="form.email" :class="inputClass" type="email" />
         </label>
         <label class="grid gap-2">
-          <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">角色</span>
+          <span :class="labelClass">角色</span>
           <select v-model="form.role" :class="inputClass">
             <option value="user">user</option>
             <option value="admin">admin</option>
           </select>
         </label>
         <label class="grid gap-2">
-          <span class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">密码</span>
+          <span :class="labelClass">密码</span>
           <input
             v-model="form.password"
             :class="inputClass"
@@ -248,17 +234,11 @@ onMounted(load)
           {{ error }}
         </div>
         <div class="flex gap-2">
-          <button :class="[buttonBase, buttonTone.primary]" type="submit">
+          <Button type="submit">
             <Save class="size-4" />
             保存
-          </button>
-          <button
-            :class="[buttonBase, buttonTone.secondary]"
-            type="button"
-            @click="editingId = null"
-          >
-            取消
-          </button>
+          </Button>
+          <Button variant="outline" type="button" @click="editingId = null"> 取消 </Button>
         </div>
       </div>
     </form>