AI初步修改整体布局风格以及样式

.github/agents/vue-expert.agent.md

@@ -0,0 +1,30 @@
+---
+description: "Vue/Vue3 专家顾问（10年经验）。当用户询问 Vue 相关问题、寻求最佳实践、代码评审、架构设计建议，或希望得到专业且详细的技术解释（包括为什么要这么做、好处是什么）时使用。触发词：vue、vue3、组合式API、setup、pinia、vue-router、vite、响应式、组件、性能优化、重构、最佳实践、为什么、原因、好处。"
+name: "Vue 高级工程师"
+tools: [read, search, web, edit, execute]
+user-invocable: true
+argument-hint: "描述你的 Vue 问题、需要评审的代码，或想了解的方案"
+---
+你是一名拥有 10 年以上经验的 Vue 高级工程师，精通 Vue 2/Vue 3、Vite、Pinia、Vue Router、组合式 API（Composition API）与前端工程化。你同时是一名严谨的技术顾问：回答必须专业、深入，并且**对每个关键结论都详细解释「为什么要这么做」以及「这么做的好处」**。
+
+## 核心职责
+- 解答 Vue 相关技术问题（响应式原理、组件设计、状态管理、路由、构建优化等）。
+- 评审与优化当前工作区（d:\vue_tickets，Vue 3 + Vite 项目）的代码。
+- 提供架构设计与最佳实践建议。
+
+## 回答方式（务必遵循）
+1. **直接给结论**：先用一两句话给出明确答案。
+2. **解释为什么**：讲清背后的技术原理、与其他方案的对比与权衡（trade-off）。
+3. **说明好处**：明确指出这样做带来的收益（可维护性、性能、可测试性、可扩展性、协作成本等）。
+4. **指出注意点**：说明边界条件、常见坑、何时不应采用。
+5. **给出示例**：提供可运行、符合项目实际结构的代码片段。
+
+## 专业准则
+- 只推荐 Vue 官方认可、社区验证过的最佳实践，不推荐已废弃或反模式的做法。
+- 不确定的地方要明确说明，不臆造。
+- 引用项目内真实文件路径（如 src/views、src/components）使建议落地。
+- 使用简体中文回答，技术术语保留英文便于检索。
+
+## 限制
+- 不要堆砌没有依据的「最佳实践」清单。
+- 若问题超出 Vue 范畴，先给出 Vue 侧最佳方案，再补充必要说明。

src/assets/main.css

@@ -2,54 +2,86 @@
    Global Design System — Refined Minimal
    ============================================ */
 :root {
-  --color-bg:           #fafbfc;
+  /* ===== 品牌主色（高饱和靛蓝 → 紫） ===== */
+  --color-primary: #4f46e5;
+  --color-primary-deep: #4338ca;
+  --color-primary-soft: #eef0ff;
+  --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #6d28d9 60%, #9333ea 100%);
+
+  /* ===== 背景层次：深侧栏 → 浅内容 → 白卡片 ===== */
+  --color-bg: #eef1f8;
   --color-surface: #ffffff;
-  --color-border:       #e9eaed;
+  --color-surface-soft: #f6f8fd;
-  --color-border-light: #f0f1f3;
 
-  --color-primary:      #5b5fe3;
+  --color-border: #e3e8f2;
-  --color-primary-soft: #f0f0ff;
+  --color-border-light: #eef1f8;
-  --color-primary-hover:#4a4ed1;
 
-  --color-success:      #34c759;
+  /* ===== 语义色（高饱和） ===== */
-  --color-success-soft: #edfaf1;
+  --color-success: #16a34a;
+  --color-success-soft: #e7f6ed;
   --color-warning: #f59e0b;
-  --color-warning-soft: #fffcf0;
+  --color-warning-soft: #fff4e0;
   --color-danger: #ef4444;
-  --color-danger-soft:  #fef2f2;
+  --color-danger-soft: #fdecec;
+  --color-info: #0ea5e9;
+  --color-info-soft: #e6f6fe;
 
-  --text-primary:       #1c1c28;
+  /* ===== 文本层次 ===== */
-  --text-secondary:     #6b6d7a;
+  --text-primary: #17203f;
-  --text-muted:         #9a9ba7;
+  --text-secondary: #5b6478;
+  --text-muted: #98a0b5;
   --text-inverse: #ffffff;
 
+  /* ===== 圆角 ===== */
   --radius-sm: 8px;
   --radius-md: 12px;
-  --radius-lg: 16px;
+  --radius-lg: 18px;
 
-  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
+  /* ===== 阴影分级（层次感核心） ===== */
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
+  --shadow-xs: 0 1px 2px rgba(23, 32, 63, 0.05);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
+  --shadow-sm: 0 1px 3px rgba(23, 32, 63, 0.06), 0 1px 2px rgba(23, 32, 63, 0.04);
-  --shadow-lg: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
+  --shadow-md: 0 8px 20px rgba(79, 70, 229, 0.10), 0 2px 6px rgba(23, 32, 63, 0.05);
+  --shadow-lg: 0 18px 44px rgba(23, 32, 63, 0.16), 0 6px 16px rgba(23, 32, 63, 0.08);
 
   --font-sans: "PingFang SC", "Microsoft YaHei", -apple-system, "Helvetica Neue", sans-serif;
   --font-mono: "SF Mono", "JetBrains Mono", "Consolas", monospace;
 
+  /* ===== Element Plus 对齐 ===== */
   --el-color-primary: var(--color-primary);
-  --el-color-primary-light-3: rgba(91,95,227,0.3);
+  --el-color-primary-light-3: rgba(79, 70, 229, 0.30);
-  --el-color-primary-light-5: rgba(91,95,227,0.15);
+  --el-color-primary-light-5: rgba(79, 70, 229, 0.16);
-  --el-color-primary-light-7: rgba(91,95,227,0.06);
+  --el-color-primary-light-7: rgba(79, 70, 229, 0.07);
-  --el-color-primary-light-9: rgba(91,95,227,0.02);
+  --el-color-primary-light-8: rgba(79, 70, 229, 0.04);
+  --el-color-primary-light-9: rgba(79, 70, 229, 0.02);
+  --el-color-primary-dark-2: var(--color-primary-deep);
   --el-color-success: var(--color-success);
   --el-color-warning: var(--color-warning);
   --el-color-danger: var(--color-danger);
+  --el-color-error: var(--color-danger);
+  --el-color-info: var(--color-info);
+  --el-border-radius-base: 8px;
+  --el-text-color-primary: var(--text-primary);
+  --el-text-color-regular: var(--text-secondary);
+  --el-border-color: var(--color-border);
+  --el-border-color-light: var(--color-border-light);
+  --el-fill-color-blank: var(--color-surface);
+  --el-bg-color: var(--color-surface);
+  --el-bg-color-page: var(--color-bg);
 }
 
-*, *::before, *::after { box-sizing: border-box; }
+/* ===== 全局基础 ===== */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
-html, body {
+html,
-  margin: 0; padding: 0;
+body {
-  width: 100%; height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
   background: var(--color-bg);
   color: var(--text-primary);
   font-family: var(--font-sans);
@@ -59,62 +91,226 @@ html, body {
   line-height: 1.5;
 }
 
-#app { width: 100%; margin: 0; padding: 0; display: block; }
+#app {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
 
-a { text-decoration: none; color: var(--color-primary); }
+a {
+  text-decoration: none;
+  color: var(--color-primary);
+}
+
+/* ===== Element Plus overrides ===== */
+/* ---- Button ---- */
+.el-button {
+  border-radius: 8px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  transition: all 0.2s ease;
+}
 
-/* Element Plus overrides */
 .el-button--primary {
   --el-button-bg-color: var(--color-primary);
   --el-button-border-color: var(--color-primary);
-  --el-button-hover-bg-color: var(--color-primary-hover);
+  --el-button-hover-bg-color: var(--color-primary-deep);
-  --el-button-hover-border-color: var(--color-primary-hover);
+  --el-button-hover-border-color: var(--color-primary-deep);
-  font-weight: 500;
+  --el-button-active-bg-color: #3730a3;
-  letter-spacing: 0.01em;
+  --el-button-active-border-color: #3730a3;
+  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
 }
 
-.el-button { border-radius: var(--radius-sm); font-weight: 500; }
+.el-button--primary:hover {
+  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.36);
+  transform: translateY(-1px);
+}
 
-.el-input .el-input__wrapper {
+.el-button--primary:active {
-  border-radius: var(--radius-sm);
+  transform: translateY(0);
+}
+
+.el-button--success {
+  --el-button-bg-color: var(--color-success);
+  --el-button-border-color: var(--color-success);
+  --el-button-hover-bg-color: #15803d;
+  --el-button-hover-border-color: #15803d;
+  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.24);
+}
+
+/* ---- Input / Select ---- */
+.el-input .el-input__wrapper,
+.el-select .el-input__wrapper {
+  border-radius: 8px;
+  background: var(--color-surface);
   box-shadow: 0 0 0 1px var(--color-border) inset;
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, background 0.2s;
-}
-.el-input .el-input__wrapper:hover { box-shadow: 0 0 0 1px var(--color-primary) inset; }
-.el-input .el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 2px rgba(91,95,227,0.15), 0 0 0 1px var(--color-primary) inset;
 }
 
-.el-select .el-input__wrapper { border-radius: var(--radius-sm); }
+.el-input .el-input__wrapper:hover,
+.el-select .el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.5) inset;
+}
 
+.el-input .el-input__wrapper.is-focus,
+.el-select .el-input__wrapper.is-focus {
+  background: #fff;
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.16), 0 0 0 1px var(--color-primary) inset;
+}
+
+/* ---- Table（层次感：表头深、斑马行、悬停抬升） ---- */
 .el-table {
   --el-table-border-color: var(--color-border-light);
+  --el-table-header-bg-color: #f3f5fb;
+  --el-table-header-text-color: var(--text-secondary);
+  --el-table-row-hover-bg-color: #f6f8ff;
+  --el-table-current-row-bg-color: #eef0ff;
+  --el-table-tr-bg-color: var(--color-surface);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
 
+.el-table th.el-table__cell {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: #f3f5fb;
+}
+
+.el-table__inner-wrapper::before {
+  display: none;
+}
+
+/* ---- Card ---- */
+.el-card {
+  --el-card-border-color: var(--color-border-light);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.el-card.is-always-shadow {
+  box-shadow: var(--shadow-sm);
+}
+
+/* ---- Dialog ---- */
 .el-dialog {
   --el-dialog-bg-color: var(--color-surface);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
 }
-.el-dialog__header { border-bottom: 1px solid var(--color-border-light); padding: 20px 24px; }
+
-.el-dialog__body { padding: 24px; }
+.el-dialog__header {
-.el-dialog__footer { padding: 16px 24px; border-top: 1px solid var(--color-border-light); }
+  border-bottom: 1px solid var(--color-border-light);
+  padding: 20px 24px;
+}
+
+.el-dialog__body {
+  padding: 24px;
+}
+
+.el-dialog__footer {
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border-light);
+}
 
 .el-message-box {
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
 }
 
+/* ---- Tag ---- */
 .el-tag {
   --el-tag-border-radius: 6px;
   border: none;
   font-weight: 500;
 }
 
+/* ---- Radio Button（筛选高亮） ---- */
+.el-radio-button__original-radio:checked+.el-radio-button__inner {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  box-shadow: -1px 0 0 0 var(--color-primary);
+}
+
+.el-radio-button__inner {
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.el-radio-group .el-radio-button:first-child .el-radio-button__inner {
+  border-radius: 8px 0 0 8px;
+}
+
+.el-radio-group .el-radio-button:last-child .el-radio-button__inner {
+  border-radius: 0 8px 8px 0;
+}
+
+/* ---- Progress ---- */
+.el-progress-bar__outer {
+  background: #e8ebf4;
+}
+
+/* ---- Switch ---- */
+.el-switch.is-checked .el-switch__core {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+/* ---- Collapse ---- */
+.el-collapse {
+  --el-collapse-border-color: var(--color-border-light);
+  --el-collapse-header-bg-color: transparent;
+  --el-collapse-content-bg-color: transparent;
+}
+
+/* ---- Pagination ---- */
 .el-pagination {
   --el-pagination-button-bg-color: var(--color-surface);
   --el-pagination-hover-color: var(--color-primary);
+  --el-pagination-active-bg-color: var(--color-primary);
+  --el-pagination-active-color: #fff;
+  --el-pagination-button-color: var(--text-secondary);
+  --el-pagination-border-radius: 8px;
+}
+
+/* ---- Dropdown ---- */
+.el-dropdown-menu {
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
+}
+
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+/* ---- Message / MessageBox ---- */
+.el-message {
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
+}
+
+/* ---- Empty ---- */
+.el-empty__description p {
+  color: var(--text-muted);
+}
+
+/* ---- Scrollbar ---- */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c6cce0;
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #aab3cf;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
 }

src/components/ticket/TicketList.vue

@@ -1,25 +1,12 @@
 <template>
   <el-card class="compact-card" shadow="never">
-    <el-table
+    <el-table ref="tableRef" :data="tickets" row-key="id" v-loading="loading" header-cell-class-name="table-header"
-      ref="tableRef"
+      style="width: 100%" @select="onSelect" @select-all="onSelectAll">
-      :data="tickets"
-      row-key="id"
-      v-loading="loading"
-      header-cell-class-name="table-header"
-      style="width: 100%"
-      @select="onSelect"
-      @select-all="onSelectAll"
-    >
       <el-table-column type="selection" width="50" :reserve-selection="true" />
       <el-table-column label="网站地址" min-width="180">
         <template #default="{ row }">
-          <el-link
+          <el-link type="primary" :href="formatUrl(row.website)" target="_blank" rel="noopener noreferrer"
-            type="primary"
+            class="site-link">
-            :href="formatUrl(row.website)"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="site-link"
-          >
             {{ row.website }}
           </el-link>
         </template>
@@ -37,27 +24,15 @@
       <el-table-column label="任务进度" width="140">
         <template #default="{ row }">
           <div class="progress-container">
-            <el-progress
+            <el-progress :percentage="Number(row.progress || 0)" :status="Number(row.progress) === 100 ? 'success' : ''"
-              :percentage="Number(row.progress || 0)"
+              :stroke-width="6" :text-inside="false" />
-              :status="Number(row.progress) === 100 ? 'success' : ''"
-              :stroke-width="6"
-              :text-inside="false"
-            />
           </div>
         </template>
       </el-table-column>
 
-      <el-table-column
+      <el-table-column prop="company_name" label="所属客户" min-width="120" align="center">
-        prop="company_name"
-        label="所属客户"
-        min-width="120"
-        align="center"
-      >
         <template #default="{ row }">
-          <span
+          <span class="company-badge" :style="getCompanyStyle(row.company_name)">
-            class="company-badge"
-            :style="getCompanyStyle(row.company_name)"
-          >
             {{ row.company_name || "未关联" }}
           </span>
         </template>
@@ -82,12 +57,7 @@
 
       <el-table-column label="备注" min-width="150">
         <template #default="{ row }">
-          <el-tooltip
+          <el-tooltip v-if="row.remark" effect="dark" :content="row.remark" placement="top">
-            v-if="row.remark"
-            effect="dark"
-            :content="row.remark"
-            placement="top"
-          >
             <span class="remark-text">{{ row.remark }}</span>
           </el-tooltip>
           <span v-else class="empty-text">-</span>
@@ -104,10 +74,7 @@
 
       <el-table-column label="锁定" width="80" align="center">
         <template #default="{ row }">
-          <span
+          <span class="lock-badge" :class="{ locked: row.lock_time && row.lock_time !== '0' }">
-            class="lock-badge"
-            :class="{ locked: row.lock_time && row.lock_time !== '0' }"
-          >
             {{ row.lock_time && row.lock_time !== '0' ? '已锁定' : '未锁定' }}
           </span>
         </template>
@@ -228,8 +195,14 @@ const getCompanyStyle = (name) => {
 </script>
 
 <style scoped>
-.progress-container { padding-right: 10px; }
+.progress-container {
-:deep(.el-progress__text) { font-size: 11px !important; min-width: 28px; }
+  padding-right: 10px;
+}
+
+:deep(.el-progress__text) {
+  font-size: 11px !important;
+  min-width: 28px;
+}
 
 .compact-card {
   background: transparent;
@@ -241,45 +214,95 @@ const getCompanyStyle = (name) => {
   overflow: hidden;
 }
 
-.staff-wrapper { display: flex; flex-direction: column; gap: 4px; }
+.staff-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 
 .staff-item {
-  display: flex; align-items: center; height: 20px;
+  display: flex;
-  font-size: 11px; border-radius: 4px; overflow: hidden;
+  align-items: center;
+  height: 20px;
+  font-size: 11px;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
 .staff-role {
-  width: 30px; height: 100%;
+  width: 30px;
-  display: flex; align-items: center; justify-content: center;
+  height: 100%;
-  font-size: 9px; font-weight: 600; color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 600;
+  color: #fff;
   letter-spacing: 0.5px;
 }
 
-.staff-name { padding-left: 6px; color: inherit; }
+.staff-name {
+  padding-left: 6px;
+  color: inherit;
+}
 
 .staff-item.client {
-  background: #f5f5f7; color: #6b6d7a;
+  background: #eef0ff;
-  border: 1px solid #ededf0;
+  color: #4338ca;
+  border: 1px solid #e3e6ff;
+}
+
+.staff-item.client .staff-role {
+  background: #6366f1;
 }
-.staff-item.client .staff-role { background: #8b8d97; }
 
 .staff-item.internal {
-  background: #f5f5f7; color: #6b6d7a;
+  background: #e7f6ed;
-  border: 1px solid #ededf0;
+  color: #15803d;
+  border: 1px solid #d3f0df;
 }
-.staff-item.internal .staff-role { background: #8b8d97; }
 
-.data-num-text { font-family: var(--font-mono); font-weight: 600; color: var(--color-primary); }
+.staff-item.internal .staff-role {
-.remark-text { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
+  background: #16a34a;
-.empty-text { color: var(--text-muted); font-size: 11px; }
+}
 
-.status-badge, .company-badge {
+.data-num-text {
-  display: inline-block; padding: 0 8px;
+  font-family: var(--font-mono);
-  height: 20px; line-height: 20px;
+  font-weight: 600;
-  font-size: 10px; font-weight: 600;
+  color: var(--color-primary);
+}
+
+.remark-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.empty-text {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.status-badge,
+.company-badge {
+  display: inline-block;
+  padding: 0 8px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 10px;
+  font-weight: 600;
   border-radius: 10px;
 }
-.company-badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.company-badge {
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .lock-badge {
   display: inline-block;
@@ -290,16 +313,27 @@ const getCompanyStyle = (name) => {
   color: #9ca3af;
   background: #f3f4f6;
 }
+
 .lock-badge.locked {
   color: #16a34a;
   background: #ecfdf3;
 }
 
-.time-wrapper { display: flex; flex-direction: column; font-size: 11px; color: var(--text-secondary); }
+.time-wrapper {
-.update-label { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
+  display: flex;
+  flex-direction: column;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.update-label {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
 
 :deep(.table-header) {
-  background: var(--color-bg) !important;
+  background: #f3f5fb !important;
   font-weight: 600;
   color: var(--text-secondary);
   font-size: 11px;

src/layouts/MainLayout.vue

@@ -88,23 +88,35 @@ const handleLogout = async () => {
 </script>
 
 <style scoped>
+/* ---- Shell ---- */
 .shell {
   display: flex;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
-  background: #ebedf0;
+  background: var(--color-bg);
 }
 
-/* ---- Sidebar ---- */
+/* ---- Sidebar（深色，制造明暗层次） ---- */
 .sidebar {
-  width: 224px;
+  width: 232px;
   flex-shrink: 0;
-  background: #f3f4f7;
+  background: linear-gradient(180deg, #1c2140 0%, #171b34 100%);
-  border-right: 1px solid rgba(0, 0, 0, 0.07);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   flex-direction: column;
   user-select: none;
+  position: relative;
+}
+
+.sidebar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
+    radial-gradient(140% 50% at 0% 110%, rgba(147, 51, 234, 0.12) 0%, transparent 50%);
 }
 
 .sidebar-brand {
@@ -112,34 +124,44 @@ const handleLogout = async () => {
   display: flex;
   align-items: center;
   gap: 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  position: relative;
+  z-index: 1;
 }
 
 .brand-mark {
   width: 38px;
   height: 38px;
-  border-radius: 10px;
+  border-radius: 11px;
   overflow: hidden;
   flex-shrink: 0;
   box-shadow:
-    0 0 0 3px rgba(91, 95, 227, 0.06),
+    0 0 0 3px rgba(129, 140, 248, 0.22),
-    0 2px 8px rgba(91, 95, 227, 0.1);
+    0 4px 12px rgba(0, 0, 0, 0.35);
 }
 
-.brand-img { width: 100%; height: 100%; object-fit: cover; }
+.brand-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
-.brand-text { display: flex; flex-direction: column; gap: 2px; }
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
 
 .brand-name {
   font-size: 15px;
   font-weight: 700;
-  color: #1c1c28;
+  color: #f4f5ff;
   letter-spacing: 0.02em;
 }
 
 .brand-ver {
   font-size: 10px;
-  color: #9a9ba7;
+  color: rgba(196, 201, 235, 0.7);
   letter-spacing: 0.03em;
   font-weight: 500;
 }
@@ -150,7 +172,9 @@ const handleLogout = async () => {
   padding: 14px 12px;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
+  position: relative;
+  z-index: 1;
 }
 
 .nav-item {
@@ -160,22 +184,23 @@ const handleLogout = async () => {
   padding: 10px 14px;
   margin: 1px 0;
   border-radius: 10px;
-  color: #6b6d7a;
+  color: rgba(208, 213, 240, 0.72);
   text-decoration: none;
   font-size: 13.5px;
   font-weight: 500;
-  transition: all 0.15s;
+  transition: all 0.18s ease;
 }
 
 .nav-item:hover {
-  background: rgba(91, 95, 227, 0.06);
+  background: rgba(255, 255, 255, 0.06);
-  color: #1c1c28;
+  color: #f4f5ff;
 }
 
 .nav-item.active {
-  background: rgba(91, 95, 227, 0.1);
+  background: var(--brand-gradient);
-  color: #4338ca;
+  color: #ffffff;
   font-weight: 600;
+  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
 }
 
 .nav-dot {
@@ -183,52 +208,82 @@ const handleLogout = async () => {
   height: 5px;
   border-radius: 50%;
   background: currentColor;
-  opacity: 0.3;
+  opacity: 0.4;
   flex-shrink: 0;
-  transition: opacity 0.15s;
+  transition: opacity 0.18s;
 }
 
-.nav-item.active .nav-dot { opacity: 1; }
+.nav-item.active .nav-dot {
+  opacity: 1;
+  box-shadow: 0 0 6px currentColor;
+}
 
-.nav-label { letter-spacing: 0.02em; }
+.nav-label {
+  letter-spacing: 0.02em;
+}
 
 /* Sidebar footer */
 .sidebar-foot {
   padding: 14px 20px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #787a85;
+  color: rgba(196, 201, 235, 0.7);
+  position: relative;
+  z-index: 1;
 }
 
 .status-dot {
-  width: 5px; height: 5px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
-  background: #34c759;
+  background: #34d399;
-  box-shadow: 0 0 4px rgba(52, 199, 89, 0.3);
+  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2), 0 0 8px rgba(52, 211, 153, 0.6);
 }
 
 /* ---- Main Area ---- */
-.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
 
 .topbar {
-  height: 56px;
+  height: 60px;
   flex-shrink: 0;
-  background: #f3f4f7;
+  background: var(--color-surface);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  border-bottom: 1px solid var(--color-border-light);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 28px;
+  box-shadow: 0 1px 4px rgba(23, 32, 63, 0.05);
+  position: relative;
+  z-index: 5;
 }
 
 .page-title {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
-  color: #1c1c28;
+  color: var(--text-primary);
   letter-spacing: 0.02em;
+  position: relative;
+  padding-left: 14px;
+}
+
+.page-title::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--brand-gradient);
 }
 
 .user-chip {
@@ -238,19 +293,26 @@ const handleLogout = async () => {
   cursor: pointer;
   padding: 4px 14px 4px 4px;
   border-radius: 24px;
-  transition: background 0.15s;
+  border: 1px solid var(--color-border-light);
+  background: var(--color-surface-soft);
+  transition: background 0.15s, border-color 0.15s;
 }
 
-.user-chip:hover { background: rgba(91, 95, 227, 0.04); }
+.user-chip:hover {
+  background: var(--color-primary-soft);
+  border-color: rgba(79, 70, 229, 0.3);
+}
 
 .user-chip :deep(.el-avatar) {
-  width: 28px !important;
+  width: 30px !important;
-  height: 28px !important;
+  height: 30px !important;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 6px rgba(23, 32, 63, 0.15);
 }
 
 .user-name {
   font-size: 13px;
-  color: #1c1c28;
+  color: var(--text-primary);
   font-weight: 500;
 }
 
@@ -259,11 +321,22 @@ const handleLogout = async () => {
   flex: 1;
   overflow-y: auto;
   padding: 24px 28px;
+  background: var(--color-bg);
 }
 
 /* ---- Transitions ---- */
 .fade-enter-active,
-.fade-leave-active { transition: opacity 0.15s, transform 0.15s; }
+.fade-leave-active {
-.fade-enter-from { opacity: 0; transform: translateY(4px); }
+  transition: opacity 0.18s, transform 0.18s;
-.fade-leave-to   { opacity: 0; transform: translateY(-4px); }
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
 </style>

src/main.js

@@ -5,6 +5,8 @@ import router from './router'
 // 导入 Element Plus
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+// 导入设计系统（设计令牌 + Element Plus 主题对齐）
+import '@/assets/main.css'
 // 导入中文语言包
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'

src/views/AccountRegistrationView.vue

@@ -307,21 +307,21 @@ onMounted(() => { fetchUsers(); fetchCompanyList(); });
 .stat-card {
   background: var(--color-surface);
   border: 1px solid var(--color-border-light);
-  border-left: 3px solid var(--border);
+  border-left: 4px solid var(--border);
   border-radius: var(--radius-md);
   padding: 16px 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: var(--shadow-xs);
+  box-shadow: var(--shadow-sm);
   user-select: none;
   cursor: pointer;
   transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
 }
 
 .stat-card:hover {
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
   border-color: var(--border);
 }
 
@@ -357,8 +357,8 @@ onMounted(() => { fetchUsers(); fetchCompanyList(); });
 
 .stat-num {
   font-size: 26px;
-  font-weight: 700;
+  font-weight: 800;
-  color: var(--text-primary);
+  color: var(--border);
   font-family: var(--font-mono);
 }
 
@@ -413,7 +413,7 @@ onMounted(() => { fetchUsers(); fetchCompanyList(); });
 
 /* ---- 表格 ---- */
 :deep(.table-head) {
-  background: var(--color-bg) !important;
+  background: #f3f5fb !important;
   color: var(--text-secondary);
   font-size: 11px;
   font-weight: 600;
@@ -426,7 +426,7 @@ onMounted(() => { fetchUsers(); fetchCompanyList(); });
 }
 
 :deep(.el-table__body tr:hover > td) {
-  background: #fafbfd !important;
+  background: #f6f8ff !important;
 }
 
 /* 用户列 */

src/views/CompanyAndOperatorsManagement.vue

@@ -154,13 +154,11 @@ onMounted(fetchCompanyAndOperators);
 
 /* ---- 主面板 ---- */
 .main-card {
-  background: #f5f6f8;
+  background: var(--color-surface);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--color-border-light);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   padding: 0;
-  box-shadow:
+  box-shadow: var(--shadow-sm);
-    0 1px 3px rgba(0, 0, 0, 0.04),
-    0 4px 16px rgba(0, 0, 0, 0.035);
   overflow: hidden;
 }
 
@@ -169,7 +167,8 @@ onMounted(fetchCompanyAndOperators);
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--color-border-light);
+  background: var(--color-surface-soft);
 }
 
 .header-left {
@@ -181,12 +180,12 @@ onMounted(fetchCompanyAndOperators);
 .header-title {
   font-size: 15px;
   font-weight: 600;
-  color: #1c1c28;
+  color: var(--text-primary);
 }
 
 .header-count {
   font-size: 12px;
-  color: #9a9ba7;
+  color: var(--text-muted);
 }
 
 .header-right {
@@ -197,8 +196,8 @@ onMounted(fetchCompanyAndOperators);
 
 /* ---- 表格 ---- */
 :deep(.table-head) {
-  background: #f0f1f4 !important;
+  background: #f3f5fb !important;
-  color: #6b6d7a;
+  color: var(--text-secondary);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.3px;
@@ -209,17 +208,17 @@ onMounted(fetchCompanyAndOperators);
 }
 
 :deep(.el-table__body tr:hover > td) {
-  background: rgba(0, 0, 0, 0.015) !important;
+  background: #f6f8ff !important;
 }
 
 .company-name {
   font-weight: 500;
-  color: #1c1c28;
+  color: var(--text-primary);
 }
 
 .operator-count {
   font-size: 15px;
-  color: #4f46e5;
+  color: var(--color-primary);
   font-weight: 700;
   font-family: var(--font-mono);
 }

src/views/LoginView.vue

@@ -91,21 +91,52 @@ const handleLogin = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(165deg, #f6f7fa 0%, #edeff4 40%, #f2f3f7 100%);
+  background:
+    radial-gradient(90% 60% at 85% -10%, rgba(147, 51, 234, 0.4) 0%, transparent 55%),
+    radial-gradient(90% 60% at -10% 110%, rgba(99, 102, 241, 0.45) 0%, transparent 55%),
+    linear-gradient(160deg, #1e2450 0%, #252a5e 45%, #1a1e40 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.login-root::before,
+.login-root::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(90px);
+  opacity: 0.4;
+}
+
+.login-root::before {
+  width: 420px;
+  height: 420px;
+  left: -120px;
+  top: -120px;
+  background: #4f46e5;
+}
+
+.login-root::after {
+  width: 460px;
+  height: 460px;
+  right: -140px;
+  bottom: -140px;
+  background: #9333ea;
 }
 
 .login-card {
-  width: 380px;
+  width: 400px;
-  background: #fcfcfd;
+  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.5);
-  border-radius: 16px;
+  border-radius: 20px;
   padding: 44px 38px 38px;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.02),
+    0 0 0 1px rgba(255, 255, 255, 0.1),
-    0 2px 6px rgba(0, 0, 0, 0.02),
+    0 8px 24px rgba(0, 0, 0, 0.2),
-    0 12px 40px rgba(0, 0, 0, 0.04),
+    0 30px 80px rgba(0, 0, 0, 0.35);
-    0 24px 80px rgba(0, 0, 0, 0.03);
   user-select: none;
+  position: relative;
+  z-index: 1;
 }
 
 .card-head {
@@ -114,20 +145,20 @@ const handleLogin = async () => {
 }
 
 .logo {
-  width: 52px;
+  width: 56px;
-  height: 52px;
+  height: 56px;
-  border-radius: 14px;
+  border-radius: 16px;
   object-fit: cover;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
   box-shadow:
-    0 0 0 4px rgba(91, 95, 227, 0.06),
+    0 0 0 4px rgba(129, 140, 248, 0.28),
-    0 4px 12px rgba(91, 95, 227, 0.12);
+    0 8px 20px rgba(79, 70, 229, 0.42);
 }
 
 .title {
   margin: 0 0 6px;
-  font-size: 21px;
+  font-size: 22px;
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: 0.02em;
   color: var(--text-primary);
 }
@@ -147,19 +178,19 @@ const handleLogin = async () => {
 .login-form :deep(.el-input__wrapper) {
   border-radius: 10px;
   padding: 3px 12px;
-  background: #f8f9fb;
+  background: #f7f8fd;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
+  box-shadow: 0 0 0 1px var(--color-border) inset;
   transition: box-shadow 0.2s, background 0.2s;
 }
 
 .login-form :deep(.el-input__wrapper:hover) {
-  background: #f4f5f8;
+  background: #f3f5fd;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
+  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.4) inset;
 }
 
 .login-form :deep(.el-input__wrapper.is-focus) {
-  background: #fcfcfd;
+  background: #fff;
-  box-shadow: 0 0 0 2px rgba(91, 95, 227, 0.12), 0 0 0 1px rgba(91, 95, 227, 0.3) inset;
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18), 0 0 0 1px rgba(79, 70, 229, 0.6) inset;
 }
 
 .form-row {
@@ -179,10 +210,18 @@ const handleLogin = async () => {
 .submit-btn {
   width: 100%;
   height: 48px;
-  border-radius: 10px;
+  border-radius: 12px;
   font-size: 15px;
-  font-weight: 600;
+  font-weight: 700;
   letter-spacing: 0.25em;
   transition: all 0.2s;
+  background: var(--brand-gradient) !important;
+  border: none !important;
+  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
+}
+
+.submit-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 26px rgba(99, 102, 241, 0.52);
 }
 </style>

src/views/StatsView.vue

@@ -98,7 +98,7 @@ const handleExport = () => {
 
 };
 
-const exportToExcel = (data, label,range) => {
+const exportToExcel = (data, label, range) => {
   data.sort((a, b) => {
     const timeA = new Date(a.create_time).getTime();
     const timeB = new Date(b.create_time).getTime();
@@ -226,17 +226,16 @@ const staffWithLockedTickets = computed(() => {
 }
 
 :deep(.el-card) {
-  background: #f5f6f8;
+  background: var(--color-surface);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--color-border-light);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
-  box-shadow:
+  box-shadow: var(--shadow-sm);
-    0 1px 3px rgba(0, 0, 0, 0.04),
-    0 4px 16px rgba(0, 0, 0, 0.035);
 }
 
 :deep(.el-card__header) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--color-border-light);
   padding: 18px 22px;
+  background: var(--color-surface-soft);
 }
 
 .card-header {
@@ -279,17 +278,27 @@ const staffWithLockedTickets = computed(() => {
 .count-badge {
   display: inline-flex;
   align-items: center;
-  padding: 1px 10px;
+  gap: 6px;
+  padding: 2px 12px;
   border-radius: 12px;
   font-size: 11px;
   font-weight: 600;
   color: #15803d;
-  background: rgba(22, 163, 74, 0.1);
+  background: #dcf5e6;
-  border: 1px solid rgba(22, 163, 74, 0.2);
+  border: 1px solid rgba(22, 163, 74, 0.22);
   white-space: nowrap;
   line-height: 1.4;
 }
 
+.count-badge::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+}
+
 .inner-table {
   width: calc(100% - 32px);
   margin: 0 16px 16px 16px;
@@ -353,23 +362,23 @@ const staffWithLockedTickets = computed(() => {
 }
 
 .s0 {
-  color: #6b7280;
+  color: #64748b;
-  background: #f3f4f6;
+  background: #eef1f6;
 }
 
 .s1 {
   color: #4f46e5;
-  background: #eef0ff;
+  background: #e7e9ff;
 }
 
 .s2 {
   color: #16a34a;
-  background: #ecfdf3;
+  background: #dcf5e6;
 }
 
 .s3 {
   color: #d97706;
-  background: #fffbeb;
+  background: #ffefd2;
 }
 
 /* 导出栏 */
@@ -378,10 +387,11 @@ const staffWithLockedTickets = computed(() => {
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
-  padding: 14px 16px;
+  padding: 14px 18px;
-  background: #fff;
+  background: var(--color-surface-soft);
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--color-border-light);
-  border-radius: 8px;
+  border-left: 4px solid var(--color-primary);
+  border-radius: 10px;
 }
 
 .export-label {

src/views/TicketManagement.vue

@@ -405,96 +405,161 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.ticket-management { padding: 0; min-height: 0; background: none; }
+.ticket-management {
+  padding: 0;
+  min-height: 0;
+  background: none;
+}
 
 .stats-container {
   display: grid;
   grid-template-columns: repeat(5, minmax(140px, 1fr));
-  gap: 14px;
+  gap: 16px;
-  margin-bottom: 20px;
+  margin-bottom: 22px;
 }
 
 .stat-card {
-  background: #f5f6f8;
+  background: var(--color-surface);
   padding: 18px 18px;
-  border-radius: 12px;
+  border-radius: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--color-border-light);
-  border-left: 4px solid transparent;
+  border-left: 5px solid var(--accent);
-  box-shadow:
+  box-shadow: var(--shadow-sm);
-    0 1px 3px rgba(0, 0, 0, 0.05),
-    0 3px 10px rgba(0, 0, 0, 0.04);
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: box-shadow 0.2s, transform 0.2s;
   user-select: none;
+  position: relative;
+  overflow: hidden;
 }
 
-.total    { border-left-color: #4f46e5; }
+.stat-card::before {
-.pending  { border-left-color: #6b7280; }
+  content: "";
-.ongoing  { border-left-color: #d97706; }
+  position: absolute;
-.success  { border-left-color: #16a34a; }
+  inset: 0;
-.finished { border-left-color: #0284c7; }
+  background: var(--tint);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+}
+
+.stat-card:hover::before {
+  opacity: 1;
+}
+
+.total {
+  --accent: #4f46e5;
+  --tint: linear-gradient(135deg, rgba(79, 70, 229, 0.10) 0%, rgba(99, 102, 241, 0.02) 70%);
+}
+
+.pending {
+  --accent: #64748b;
+  --tint: linear-gradient(135deg, rgba(100, 116, 139, 0.10) 0%, rgba(100, 116, 139, 0.02) 70%);
+}
+
+.ongoing {
+  --accent: #f59e0b;
+  --tint: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.02) 70%);
+}
+
+.success {
+  --accent: #16a34a;
+  --tint: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, rgba(22, 163, 74, 0.02) 70%);
+}
+
+.finished {
+  --accent: #0ea5e9;
+  --tint: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0.02) 70%);
+}
 
 .stat-card:hover {
-  transform: translateY(-2px);
+  transform: translateY(-3px);
-  box-shadow:
+  box-shadow: var(--shadow-lg);
-    0 3px 6px rgba(0, 0, 0, 0.07),
+}
-    0 10px 28px rgba(0, 0, 0, 0.07);
+
+.stat-card .stat-info,
+.stat-card .stat-icon {
+  position: relative;
+  z-index: 1;
 }
 
 .stat-icon {
   font-size: 20px;
-  padding: 10px;
+  padding: 12px;
-  border-radius: 10px;
+  border-radius: 12px;
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 14%, #fff);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent);
 }
 
-.total .stat-icon    { color: #4f46e5; background: rgba(79, 70, 229, 0.12); }
-.pending .stat-icon  { color: #4b5563; background: rgba(75, 85, 99, 0.1); }
-.ongoing .stat-icon  { color: #d97706; background: rgba(217, 119, 6, 0.12); }
-.success .stat-icon  { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
-.finished .stat-icon { color: #0284c7; background: rgba(2, 132, 199, 0.12); }
-
 .stat-label {
   font-size: 12px;
-  color: #5b5d68;
+  color: var(--text-secondary);
-  margin-bottom: 5px;
+  margin-bottom: 6px;
   font-weight: 600;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.04em;
 }
 
 .stat-value {
-  font-size: 28px;
+  font-size: 30px;
-  font-weight: 700;
+  font-weight: 800;
-  color: #1c1c28;
+  color: var(--accent);
   font-family: var(--font-mono);
   line-height: 1;
 }
 
 .main-content {
-  background: #f5f6f8;
+  background: var(--color-surface);
   padding: 22px 24px;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--color-border-light);
-  box-shadow:
+  box-shadow: var(--shadow-sm);
-    0 1px 3px rgba(0, 0, 0, 0.05),
-    0 6px 20px rgba(0, 0, 0, 0.05);
 }
 
-.action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 18px;
+}
 
 .batch-bar {
-  display: flex; align-items: center; gap: 12px;
+  display: flex;
-  padding: 10px 16px; margin-bottom: 14px;
+  align-items: center;
-  background: rgba(217, 119, 6, 0.1);
+  gap: 12px;
-  border: 1px solid rgba(217, 119, 6, 0.3);
+  padding: 10px 16px;
+  margin-bottom: 14px;
+  background: var(--color-warning-soft);
+  border: 1px solid rgba(245, 158, 11, 0.35);
   border-radius: 10px;
 }
-.batch-info { font-size: 13px; color: #5b5d68; }
-.batch-info strong { color: #92400e; font-weight: 600; }
 
-.pagination-container { margin-top: 18px; display: flex; justify-content: flex-end; }
+.batch-info {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
 
-@media (max-width: 1400px) { .stats-container { grid-template-columns: repeat(3, 1fr); } }
+.batch-info strong {
-@media (max-width: 768px) { .stats-container { grid-template-columns: 1fr 1fr; } }
+  color: #b45309;
+  font-weight: 700;
+}
+
+.pagination-container {
+  margin-top: 18px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1400px) {
+  .stats-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
 </style>