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

2026-08-05 11:14:17 +08:00
parent 17505b5c22
commit f081928187
10 changed files with 726 additions and 278 deletions
--- a/.github/agents/vue-expert.agent.md
+++ b/.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 侧最佳方案，再补充必要说明。
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,54 +2,86 @@
   Global Design System — Refined Minimal
   ============================================ */
 :root {
-  --color-bg:           #fafbfc;
-  --color-surface:      #ffffff;
-  --color-border:       #e9eaed;
-  --color-border-light: #f0f1f3;
+  /* ===== 品牌主色（高饱和靛蓝 → 紫） ===== */
+  --color-primary: #4f46e5;
+  --color-primary-deep: #4338ca;
+  --color-primary-soft: #eef0ff;
+  --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #6d28d9 60%, #9333ea 100%);

-  --color-primary:      #5b5fe3;
-  --color-primary-soft: #f0f0ff;
-  --color-primary-hover:#4a4ed1;
+  /* ===== 背景层次：深侧栏 → 浅内容 → 白卡片 ===== */
+  --color-bg: #eef1f8;
+  --color-surface: #ffffff;
+  --color-surface-soft: #f6f8fd;

-  --color-success:      #34c759;
-  --color-success-soft: #edfaf1;
-  --color-warning:      #f59e0b;
-  --color-warning-soft: #fffcf0;
-  --color-danger:       #ef4444;
-  --color-danger-soft:  #fef2f2;
+  --color-border: #e3e8f2;
+  --color-border-light: #eef1f8;

-  --text-primary:       #1c1c28;
-  --text-secondary:     #6b6d7a;
-  --text-muted:         #9a9ba7;
-  --text-inverse:       #ffffff;
+  /* ===== 语义色（高饱和） ===== */
+  --color-success: #16a34a;
+  --color-success-soft: #e7f6ed;
+  --color-warning: #f59e0b;
+  --color-warning-soft: #fff4e0;
+  --color-danger: #ef4444;
+  --color-danger-soft: #fdecec;
+  --color-info: #0ea5e9;
+  --color-info-soft: #e6f6fe;

+  /* ===== 文本层次 ===== */
+  --text-primary: #17203f;
+  --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-md: 0 4px 12px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
-  --shadow-lg: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
+  /* ===== 阴影分级（层次感核心） ===== */
+  --shadow-xs: 0 1px 2px rgba(23, 32, 63, 0.05);
+  --shadow-sm: 0 1px 3px rgba(23, 32, 63, 0.06), 0 1px 2px rgba(23, 32, 63, 0.04);
+  --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-5: rgba(91,95,227,0.15);
-  --el-color-primary-light-7: rgba(91,95,227,0.06);
-  --el-color-primary-light-9: rgba(91,95,227,0.02);
+  --el-color-primary-light-3: rgba(79, 70, 229, 0.30);
+  --el-color-primary-light-5: rgba(79, 70, 229, 0.16);
+  --el-color-primary-light-7: rgba(79, 70, 229, 0.07);
+  --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 {
-  margin: 0; padding: 0;
-  width: 100%; height: 100%;
+html,
+body {
+  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-border-color: var(--color-primary-hover);
-  font-weight: 500;
-  letter-spacing: 0.01em;
+  --el-button-hover-bg-color: var(--color-primary-deep);
+  --el-button-hover-border-color: var(--color-primary-deep);
+  --el-button-active-bg-color: #3730a3;
+  --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 {
-  border-radius: var(--radius-sm);
+.el-button--primary:active {
+  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;
-}
-.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;
+  transition: box-shadow 0.2s, background 0.2s;
 }

-.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__footer { padding: 16px 24px; border-top: 1px solid var(--color-border-light); }
+
+.el-dialog__header {
+  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;
 }
--- a/src/components/ticket/TicketList.vue
+++ b/src/components/ticket/TicketList.vue
@@ -1,25 +1,12 @@
 <template>
  <el-card class="compact-card" shadow="never">
-    <el-table
-      ref="tableRef"
-      :data="tickets"
-      row-key="id"
-      v-loading="loading"
-      header-cell-class-name="table-header"
-      style="width: 100%"
-      @select="onSelect"
-      @select-all="onSelectAll"
-    >
+    <el-table ref="tableRef" :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
-            type="primary"
-            :href="formatUrl(row.website)"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="site-link"
-          >
+          <el-link type="primary" :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
-              :percentage="Number(row.progress || 0)"
-              :status="Number(row.progress) === 100 ? 'success' : ''"
-              :stroke-width="6"
-              :text-inside="false"
-            />
+            <el-progress :percentage="Number(row.progress || 0)" :status="Number(row.progress) === 100 ? 'success' : ''"
+              :stroke-width="6" :text-inside="false" />
          </div>
        </template>
      </el-table-column>

-      <el-table-column
-        prop="company_name"
-        label="所属客户"
-        min-width="120"
-        align="center"
-      >
+      <el-table-column prop="company_name" label="所属客户" min-width="120" align="center">
        <template #default="{ row }">
-          <span
-            class="company-badge"
-            :style="getCompanyStyle(row.company_name)"
-          >
+          <span 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
-            v-if="row.remark"
-            effect="dark"
-            :content="row.remark"
-            placement="top"
-          >
+          <el-tooltip 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
-            class="lock-badge"
-            :class="{ locked: row.lock_time && row.lock_time !== '0' }"
-          >
+          <span 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; }
-:deep(.el-progress__text) { font-size: 11px !important; min-width: 28px; }
+.progress-container {
+  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;
-  font-size: 11px; border-radius: 4px; overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  font-size: 11px;
+  border-radius: 4px;
+  overflow: hidden;
 }

 .staff-role {
-  width: 30px; height: 100%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 9px; font-weight: 600; color: #fff;
+  width: 30px;
+  height: 100%;
+  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;
-  border: 1px solid #ededf0;
+  background: #eef0ff;
+  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;
-  border: 1px solid #ededf0;
+  background: #e7f6ed;
+  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); }
-.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; }
+.staff-item.internal .staff-role {
+  background: #16a34a;
+}

-.status-badge, .company-badge {
-  display: inline-block; padding: 0 8px;
-  height: 20px; line-height: 20px;
-  font-size: 10px; font-weight: 600;
+.data-num-text {
+  font-family: var(--font-mono);
+  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); }
-.update-label { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
+.time-wrapper {
+  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;
--- a/src/layouts/MainLayout.vue
+++ b/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;
-  border-right: 1px solid rgba(0, 0, 0, 0.07);
+  background: linear-gradient(180deg, #1c2140 0%, #171b34 100%);
+  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 2px 8px rgba(91, 95, 227, 0.1);
+    0 0 0 3px rgba(129, 140, 248, 0.22),
+    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);
-  color: #1c1c28;
+  background: rgba(255, 255, 255, 0.06);
+  color: #f4f5ff;
 }

 .nav-item.active {
-  background: rgba(91, 95, 227, 0.1);
-  color: #4338ca;
+  background: var(--brand-gradient);
+  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;
-  box-shadow: 0 0 4px rgba(52, 199, 89, 0.3);
+  background: #34d399;
+  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;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  background: var(--color-surface);
+  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;
-  height: 28px !important;
+  width: 30px !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-enter-from { opacity: 0; transform: translateY(4px); }
-.fade-leave-to   { opacity: 0; transform: translateY(-4px); }
+.fade-leave-active {
+  transition: opacity 0.18s, transform 0.18s;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
 </style>
--- a/src/main.js
+++ b/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'
--- a/src/views/AccountRegistrationView.vue
+++ b/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);
-  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
  border-color: var(--border);
 }

@@ -357,8 +357,8 @@ onMounted(() => { fetchUsers(); fetchCompanyList(); });

 .stat-num {
  font-size: 26px;
-  font-weight: 700;
-  color: var(--text-primary);
+  font-weight: 800;
+  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;
 }

 /* 用户列 */
--- a/src/views/CompanyAndOperatorsManagement.vue
+++ b/src/views/CompanyAndOperatorsManagement.vue
@@ -154,13 +154,11 @@ onMounted(fetchCompanyAndOperators);

 /* ---- 主面板 ---- */
 .main-card {
-  background: #f5f6f8;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-lg);
  padding: 0;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.04),
-    0 4px 16px rgba(0, 0, 0, 0.035);
+  box-shadow: var(--shadow-sm);
  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;
-  color: #6b6d7a;
+  background: #f3f5fb !important;
+  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);
 }
--- a/src/views/LoginView.vue
+++ b/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;
-  background: #fcfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.04);
-  border-radius: 16px;
+  width: 400px;
+  background: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 20px;
  padding: 44px 38px 38px;
  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.02),
-    0 2px 6px rgba(0, 0, 0, 0.02),
-    0 12px 40px rgba(0, 0, 0, 0.04),
-    0 24px 80px rgba(0, 0, 0, 0.03);
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 8px 24px rgba(0, 0, 0, 0.2),
+    0 30px 80px rgba(0, 0, 0, 0.35);
  user-select: none;
+  position: relative;
+  z-index: 1;
 }

 .card-head {
@@ -114,20 +145,20 @@ const handleLogin = async () => {
 }

 .logo {
-  width: 52px;
-  height: 52px;
-  border-radius: 14px;
+  width: 56px;
+  height: 56px;
+  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 4px 12px rgba(91, 95, 227, 0.12);
+    0 0 0 4px rgba(129, 140, 248, 0.28),
+    0 8px 20px rgba(79, 70, 229, 0.42);
 }

 .title {
  margin: 0 0 6px;
-  font-size: 21px;
-  font-weight: 700;
+  font-size: 22px;
+  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;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
+  background: #f7f8fd;
+  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;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
+  background: #f3f5fd;
+  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.4) inset;
 }

 .login-form :deep(.el-input__wrapper.is-focus) {
-  background: #fcfcfd;
-  box-shadow: 0 0 0 2px rgba(91, 95, 227, 0.12), 0 0 0 1px rgba(91, 95, 227, 0.3) inset;
+  background: #fff;
+  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>
--- a/src/views/StatsView.vue
+++ b/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;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.04),
-    0 4px 16px rgba(0, 0, 0, 0.035);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
 }

 :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);
-  border: 1px solid rgba(22, 163, 74, 0.2);
+  background: #dcf5e6;
+  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;
-  background: #f3f4f6;
+  color: #64748b;
+  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;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: 8px;
+  padding: 14px 18px;
+  background: var(--color-surface-soft);
+  border: 1px solid var(--color-border-light);
+  border-left: 4px solid var(--color-primary);
+  border-radius: 10px;
 }

 .export-label {
--- a/src/views/TicketManagement.vue
+++ b/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;
-  margin-bottom: 20px;
+  gap: 16px;
+  margin-bottom: 22px;
 }

 .stat-card {
-  background: #f5f6f8;
+  background: var(--color-surface);
  padding: 18px 18px;
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 4px solid transparent;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.05),
-    0 3px 10px rgba(0, 0, 0, 0.04);
+  border-radius: 14px;
+  border: 1px solid var(--color-border-light);
+  border-left: 5px solid var(--accent);
+  box-shadow: var(--shadow-sm);
  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; }
-.pending  { border-left-color: #6b7280; }
-.ongoing  { border-left-color: #d97706; }
-.success  { border-left-color: #16a34a; }
-.finished { border-left-color: #0284c7; }
+.stat-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  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);
-  box-shadow:
-    0 3px 6px rgba(0, 0, 0, 0.07),
-    0 10px 28px rgba(0, 0, 0, 0.07);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lg);
+}
+
+.stat-card .stat-info,
+.stat-card .stat-icon {
+  position: relative;
+  z-index: 1;
 }

 .stat-icon {
  font-size: 20px;
-  padding: 10px;
-  border-radius: 10px;
+  padding: 12px;
+  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;
-  margin-bottom: 5px;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
  font-weight: 600;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.04em;
 }

 .stat-value {
-  font-size: 28px;
-  font-weight: 700;
-  color: #1c1c28;
+  font-size: 30px;
+  font-weight: 800;
+  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: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.05),
-    0 6px 20px rgba(0, 0, 0, 0.05);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-light);
+  box-shadow: var(--shadow-sm);
 }

-.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;
-  padding: 10px 16px; margin-bottom: 14px;
-  background: rgba(217, 119, 6, 0.1);
-  border: 1px solid rgba(217, 119, 6, 0.3);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  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); } }
-@media (max-width: 768px) { .stats-container { grid-template-columns: 1fr 1fr; } }
+.batch-info strong {
+  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>