提交：备份当前 Fresh Mint UI 改造进度。

在继续历史回溯前冻结当前工作区，保留已完成的全局样式统一、系统页结构收口与配送调度演示菜单恢复，避免后续恢复操作覆盖现有成果。

Made-with: Cursor

docs/web-admin-ui-spec-fresh-mint.md

@@ -621,6 +621,14 @@
 18. **时效预警**（`#/delivery/delivery-warning`）：改造为与配送列表同构的 Fresh Mint 壳层——页头 **`page-head` + `page-desc`**，主体 **`panel` + `panel-top`**（`title-ic` + `Bell`），筛选区统一 **`filter-block` + `search-form` + `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search），列表区统一 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。预警行展开商品明细同样采用树形子列表样式：**`delivery-tree-inner`** 左 3px 薄荷线、**`delivery-tree-label`** 标题、子表滚动容器与 expanded cell 背景边框。操作列统一按钮语义：**查看** `btn-op-item primary + View`，**处理** `btn-op-item op-warn + Finished`。处理弹窗与详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**，与订单/结算/配送页面维持一致的薄荷渐变头和无遮罩模糊策略。
 19. **系统设置**（`#/system/system-config`）：将原单块白底表单改造为 Fresh Mint 配置页结构——页头 **`page-head` + `page-desc`**，配置项拆分为两张 **`settings-panel`**（订单设置 / 客服设置），每块使用 **`panel-top` + `title-ic`**（`Setting` / `PhoneFilled`）与 **`panel-body`**。表单统一为 **`label-position="top"`** 与 Mint 输入态（11px label、8px 圆角、`#d9e8e2` 边），采用 **`form-grid`**（桌面两列、窄屏一列）排版；数字输入配单位说明与 hint 文案。保存区使用统一主按钮 **`btn-main`**（`Check` 图标 + 36px 高 + 薄荷色链），整体与已改造业务页面的卡片、标题、按钮体系一致。
 20. **接口日志**（`#/system/api-request-log`）：改造为 Fresh Mint 列表页模板——页头 **`page-head` + `page-desc`**，主体 **`panel` + `panel-top`**（`title-ic` + `Document`），筛选区统一为 **`filter-block` + `search-form` + 四列 `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search，关键词支持 Enter 查询）；日志表格与分页统一到 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。操作列“详情”改为 **`btn-op-item primary + View`**。请求详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**（薄荷渐变头、无遮罩模糊、统一 footer），请求体/响应体保留 `pre` 滚动展示能力。
+21. **全局壳层回归（2026-04-17）**：针对 `git restore` 导致的样式回退，补齐 `web-admin` Fresh Mint 基线：`index.scss` 重新引入 `fresh-mint-tokens.scss`；`app.scss` 回收全局 token 映射（`--theme-color`、`--default-bg-color`、`--default-box-color`、`--art-card-border`）、统一页头/面板/侧栏骨架；`views/index/style.scss` 恢复内容区 **`24px`** 内边距与「壳层不包二次卡片」策略；`el-ui.scss` 重设 Element 主题变量、弹窗头体脚间距、表格与主按钮 Mint 色链；`#/dashboard/console` 恢复 **page-head + panel/list-body/list-table** 结构与统计/待办/快捷卡片的 Mint 视觉层级。
+22. **第二轮批量回归（2026-04-17）**：新增跨页面全局兜底（`app.scss` + `el-ui.scss`）用于统一 **筛选区 / 工具栏 / 列表体 / 分页条 / 表单控件 / 主次按钮 / 行内操作按钮**。约定类（`filter-block`、`filter-grid`、`filter-actions-row`、`list-toolbar-row`、`list-body`、`list-wrap`、`list-pager-bar`、`btn-main`、`btn-ghost`、`btn-op-item`）在 `page-container` 与 `console-container` 下自动应用 Mint 视觉，降低逐页重复样式。同步修正历史弹窗组件 `#/base/user`（`user-dialog`）与 `#/system/menu`（`menu-dialog`）底栏按钮与表单布局，使其对齐 **36px/8px** 按钮与顶部标签表单规范。
+23. **第三轮业务页收口（2026-04-17）**：针对运营高频页面做残留旧色清理与语义色统一：`#/delivery/delivery`、`#/delivery/delivery-warning`、`#/system/system-config`、`#/order/order` 中遗留的旧角色色（`#1989fa/#07c160/#ff976a/#ee0a24`）已替换为 Fresh Mint 语义色链（主色 `#10b981/#059669`、警告 `#d97706`、危险 `#dc2626`），覆盖 section 左边线、金额强调、Tab 激活态、地址卡片强调边、时间轴节点、风险提示等关键视觉点，避免后台页面出现“蓝/绿/橙/红混搭”的历史风格。
+24. **第四轮一致性细节（2026-04-17）**：补充跨页面细节兜底：`app.scss` 新增 `page-container/console-container` 下通用 `.pagination`（贴表格的分页条样式）与 `.search-bar`（白底卡片化）；`el-ui.scss` 新增弹窗 footer 按钮统一规则（**36px 高、8px 圆角、600 字重**，非主按钮中性描边）及 footer 内图标右间距 **6px**，用于收敛历史页面中未显式加 `btn-main/btn-ghost` 的弹窗底栏视觉差异。
+25. **第五轮验收清单（2026-04-17）**：对 `web-admin/src/views/system` 全量页执行旧色值巡检并完成批量替换，遗留角色色 `#1989fa/#07c160/#ff976a/#ee0a24` 已在 system 目录清零；重点修正页面包括 `price-list`、`client/supplier-settlement`、`category`、`order-adjust`、`quotation`、`user/detail`、`statistics`、`quotation/compare`、`price-list/version`、`refund`、`inquiry-quotation`、`invoice`、`settlement`、`product`、`inquiry`。同时补齐角色管理弹窗 (`role-edit-dialog`、`role-permission-dialog`) footer 按钮语义类（`btn-ghost` / `btn-main`），与全局弹窗底栏规范保持一致。
+26. **第六轮结构统一（进行中，2026-04-17）**：开始将“视觉已统一但结构仍旧”的页面改为标准模板。首批完成 `#/system/review`、`#/system/settlement`、`#/system/invoice`：统一为 **`page-head + panel + filter-block/filter-grid/filter-actions-row + list-body/list-wrap + list-pager-bar`**，并将操作列按钮改为 **`btn-op-item`** 体系、弹窗 footer 改为 **`btn-ghost / btn-main`** 语义按钮，减少历史 `search-bar + inline form + link 按钮` 结构差异。
+27. **第六轮结构统一（第二批，2026-04-17）**：完成 `#/system/price-list`、`#/system/refund`、`#/system/order-adjust`、`#/system/quotation` 的模板化收口：搜索区改为 `filter-block + filter-grid + filter-actions-row`；列表区改为 `list-body/list-wrap + list-table + list-pager-bar`；操作列由 link 按钮改为 `btn-op-item`（首按钮 `primary`）；详情/流程弹窗 footer 统一 `btn-ghost / btn-main`，并移除页面内重复的旧壳层样式（`search-bar/table-container/pagination`）以复用全局 Fresh Mint 规则。
+28. **第六轮结构统一（第三批，2026-04-17）**：完成 `#/system/region`、`#/system/category`、`#/system/unit`、`#/system/parameter` 的 CRUD 基础页动作区与列表交互收口：工具栏主按钮统一 `btn-main`、批量操作统一 `btn-ghost`、行内操作统一 `btn-op-item`（首动作主色）、分页统一 `list-pager-bar`、新增/编辑弹窗 footer 统一 `btn-ghost / btn-main`。本轮保持业务逻辑与复杂弹窗内结构不变，优先消除跨页面按钮体系与分页条样式差异。
 
 ---
 

web-admin/src/assets/styles/core/app.scss

@@ -1,8 +1,30 @@
 // 全局样式
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--mint-text);
+  background: var(--mint-bg-page);
+}
+
+:root {
+  --theme-color: var(--mint-primary);
+  --default-bg-color: var(--mint-bg-page);
+  --default-box-color: var(--mint-surface);
+  --art-card-border: var(--mint-border);
+  --custom-radius: 16px;
+}
+
 // 顶部进度条颜色
 #nprogress .bar {
   z-index: 2400;
-  background-color: color-mix(in srgb, var(--theme-color) 70%, white);
+  background-color: var(--mint-primary);
 }
 
 #nprogress .peg {
@@ -83,7 +105,9 @@
 
 // 盒子默认边框
 .page-content {
-  border: 1px solid var(--art-card-border) !important;
+  border: 1px solid var(--mint-border) !important;
+  border-radius: var(--mint-radius) !important;
+  box-shadow: var(--mint-shadow) !important;
 }
 
 @mixin art-card-base($border-color, $shadow: none, $radius-diff: 4px) {
@@ -181,7 +205,9 @@
   display: flex;
   flex-direction: column;
   margin-top: 12px;
-  border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
+  border-radius: var(--mint-radius) !important;
+  border: 1px solid var(--mint-border) !important;
+  box-shadow: var(--mint-shadow) !important;
 
   .el-card__body {
     height: 100%;
@@ -290,3 +316,213 @@
     -webkit-tap-highlight-color: transparent;
   }
 }
+
+.page-head {
+  margin-bottom: 16px;
+
+  h1 {
+    margin: 0 0 4px;
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--mint-text);
+  }
+
+  .page-desc,
+  .desc {
+    margin: 0;
+    color: var(--mint-text-muted);
+    font-size: 13px;
+    line-height: 1.45;
+    max-width: 720px;
+  }
+}
+
+.panel {
+  background: var(--mint-surface);
+  border: 1px solid var(--mint-border);
+  border-radius: var(--mint-radius);
+  box-shadow: var(--mint-shadow);
+  overflow: hidden;
+}
+
+.panel-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--mint-border);
+
+  h2 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--mint-text);
+  }
+}
+
+.page-container,
+.console-container {
+  .filter-block {
+    padding: 12px 16px 10px;
+    background: var(--mint-surface);
+    border-bottom: 1px solid var(--mint-border);
+  }
+
+  .filter-hint {
+    margin: 0 0 8px;
+    font-size: 11px;
+    color: var(--mint-text-muted);
+    line-height: 1.35;
+  }
+
+  .filter-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px 14px;
+    margin-bottom: 0;
+  }
+
+  .filter-actions-row {
+    margin-top: 10px;
+    padding-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .filter-actions-end,
+  .toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .list-toolbar,
+  .toolbar {
+    padding: 0;
+    background: var(--mint-table-head);
+    border-bottom: 1px solid var(--mint-border);
+  }
+
+  .list-toolbar-row,
+  .toolbar {
+    padding: 8px 16px;
+    gap: 8px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .list-toolbar-selected,
+  .toolbar-left {
+    display: inline-flex;
+    align-items: center;
+    min-height: 36px;
+    padding: 0 10px 0 0;
+    margin-right: 4px;
+    border-right: 1px solid var(--mint-border);
+    font-size: 12px;
+    color: var(--mint-text-muted);
+    font-weight: 600;
+  }
+
+  .sel-num {
+    color: var(--mint-primary-dark);
+    font-weight: 700;
+    margin: 0 2px;
+  }
+
+  .list-body {
+    border-top: 1px solid var(--mint-border);
+  }
+
+  .list-wrap {
+    border-radius: 0 0 var(--mint-radius) var(--mint-radius);
+    overflow: hidden;
+  }
+
+  .pagination.list-pager-bar,
+  .list-footer {
+    margin-top: 0;
+    padding: 10px 16px 12px;
+    border-top: 1px solid var(--mint-border);
+    background: var(--mint-surface);
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0;
+    padding: 10px 16px 12px;
+    border-top: 1px solid var(--mint-border);
+    background: var(--mint-surface);
+  }
+
+  .search-bar {
+    background: var(--mint-surface);
+    border: 1px solid var(--mint-border);
+    border-radius: var(--mint-radius);
+    box-shadow: var(--mint-shadow);
+  }
+}
+
+@media (max-width: 1100px) {
+  .page-container,
+  .console-container {
+    .filter-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}
+
+@media (max-width: 560px) {
+  .page-container,
+  .console-container {
+    .filter-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .filter-actions-row {
+      align-items: stretch;
+      flex-direction: column;
+    }
+  }
+}
+
+#app-header > div {
+  background: var(--mint-surface) !important;
+  border-bottom: 1px solid var(--mint-border);
+}
+
+#app-header .relative.box-border.flex-b {
+  height: 56px !important;
+  line-height: 56px !important;
+  padding: 0 var(--mint-content-padding);
+}
+
+#app-header .flex-c.gap-2\.5 {
+  gap: 10px !important;
+}
+
+#app-header .flex-b.w-full {
+  margin-bottom: 0 !important;
+  padding: 0 24px 10px !important;
+  border-bottom: 1px solid var(--mint-border);
+}
+
+#app-sidebar .layout-sidebar {
+  border-right: 1px solid var(--mint-border) !important;
+  background: var(--mint-surface);
+}
+
+#app-sidebar .menu-left .header {
+  height: 56px;
+  line-height: 56px;
+  border-bottom: 1px solid var(--mint-border);
+}

web-admin/src/assets/styles/core/el-ui.scss

@@ -2,24 +2,36 @@
 
 :root {
   // 系统主色
-  --main-color: var(--el-color-primary);
-  --el-color-white: white !important;
-  --el-color-black: white !important;
-  // 输入框边框颜色
-  // --el-border-color: #E4E4E7 !important; // DCDFE6
+  --main-color: var(--mint-primary);
+  --el-color-primary: var(--mint-primary) !important;
+  --el-color-primary-light-3: #34d399 !important;
+  --el-color-primary-light-5: #6ee7b7 !important;
+  --el-color-primary-light-7: #a7f3d0 !important;
+  --el-color-primary-light-8: #d1fae5 !important;
+  --el-color-primary-light-9: var(--mint-primary-bg) !important;
+  --el-color-primary-dark-2: var(--mint-primary-dark) !important;
+  --el-border-color: var(--mint-border) !important;
+  --el-border-color-light: #eaf4ef !important;
+  --el-fill-color-light: var(--mint-table-head) !important;
+  --el-bg-color: var(--mint-surface) !important;
+  --el-bg-color-page: var(--mint-bg-page) !important;
+  --el-text-color-primary: var(--mint-text) !important;
+  --el-text-color-regular: var(--mint-text-muted) !important;
+  --el-mask-color: rgba(15, 23, 42, 0.35) !important;
   // 按钮粗度
-  --el-font-weight-primary: 400 !important;
+  --el-font-weight-primary: 500 !important;
 
   --el-component-custom-height: 36px !important;
 
   --el-component-size: var(--el-component-custom-height) !important;
 
   // 边框、按钮圆角...
-  --el-border-radius-base: calc(var(--custom-radius) / 3 + 2px) !important;
+  --el-border-radius-base: 8px !important;
 
-  --el-border-radius-small: calc(var(--custom-radius) / 3 + 4px) !important;
-  --el-messagebox-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
-  --el-popover-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
+  --el-border-radius-small: 8px !important;
+  --el-messagebox-border-radius: 10px !important;
+  --el-popover-border-radius: 10px !important;
+  --el-dialog-padding-primary: 0 !important;
 
   .region .el-radio-button__original-radio:checked + .el-radio-button__inner {
     color: var(--theme-color);
@@ -118,22 +130,36 @@ html.dark .el-card {
 }
 
 .el-dialog {
-  border-radius: 100px !important;
-  border-radius: calc(var(--custom-radius) / 1.2 + 2px) !important;
+  padding: 0 !important;
+  border: 1px solid var(--mint-border) !important;
+  border-radius: var(--mint-radius) !important;
   overflow: hidden;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
 }
 
 .el-dialog__header {
+  padding: 16px 22px 14px !important;
+  border-bottom: 1px solid var(--mint-border);
+  background: linear-gradient(135deg, var(--mint-primary-bg) 0%, var(--mint-surface) 60%);
+
   .el-dialog__title {
     font-size: 16px;
+    font-weight: 600;
+    color: var(--mint-text);
   }
 }
 
 .el-dialog__body {
-  padding: 25px 0 !important;
+  padding: 18px 22px !important;
   position: relative; // 为了兼容 el-pagination 样式，需要设置 relative，不然会影响 el-pagination 的样式，比如 el-pagination__jump--small 会被影响，导致 el-pagination__jump--small 按钮无法点击，详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275;
 }
 
+.el-dialog__footer {
+  padding: 12px 22px !important;
+  border-top: 1px solid var(--mint-border);
+  background: var(--mint-table-head);
+}
+
 .el-dialog.el-dialog-border {
   .el-dialog__body {
     // 上边框
@@ -584,3 +610,116 @@ body .el-table thead {
   }
 }
 // -------------------------------- el-table 全局样式 end --------------------------------
+
+.page-container .el-table,
+.console-container .el-table {
+  --el-table-header-bg-color: var(--mint-table-head);
+  --el-table-border-color: var(--mint-border);
+  --el-table-row-hover-bg-color: var(--mint-row-hover);
+}
+
+.page-container .el-table th.el-table__cell,
+.console-container .el-table th.el-table__cell {
+  color: var(--mint-text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.page-container .el-button--primary,
+.console-container .el-button--primary {
+  --el-button-bg-color: var(--mint-primary);
+  --el-button-border-color: var(--mint-primary);
+  --el-button-hover-bg-color: var(--mint-primary-dark);
+  --el-button-hover-border-color: var(--mint-primary-dark);
+  --el-button-active-bg-color: var(--mint-primary-dark);
+  --el-button-active-border-color: var(--mint-primary-dark);
+}
+
+.page-container .el-pagination,
+.console-container .el-pagination {
+  --el-pagination-button-bg-color: var(--mint-surface);
+  --el-pagination-hover-color: var(--mint-primary-dark);
+}
+
+.page-container .el-input__wrapper,
+.page-container .el-select__wrapper,
+.page-container .el-textarea__inner,
+.console-container .el-input__wrapper,
+.console-container .el-select__wrapper,
+.console-container .el-textarea__inner {
+  border-radius: 8px !important;
+  box-shadow: 0 0 0 1px var(--mint-border) inset !important;
+}
+
+.page-container .el-input__wrapper:hover,
+.page-container .el-select__wrapper:hover,
+.console-container .el-input__wrapper:hover,
+.console-container .el-select__wrapper:hover {
+  box-shadow: 0 0 0 1px #b8dccc inset !important;
+}
+
+.page-container .el-input__wrapper.is-focus,
+.page-container .el-select__wrapper.is-focused,
+.console-container .el-input__wrapper.is-focus,
+.console-container .el-select__wrapper.is-focused {
+  box-shadow:
+    0 0 0 1px var(--mint-primary) inset,
+    0 0 0 2px rgba(16, 185, 129, 0.2) !important;
+}
+
+.page-container .btn-main.el-button,
+.console-container .btn-main.el-button {
+  height: 36px;
+  border-radius: 8px;
+  font-weight: 600;
+  --el-button-bg-color: var(--mint-primary);
+  --el-button-border-color: var(--mint-primary);
+  --el-button-hover-bg-color: var(--mint-primary-dark);
+  --el-button-hover-border-color: var(--mint-primary-dark);
+}
+
+.page-container .btn-ghost.el-button,
+.console-container .btn-ghost.el-button {
+  height: 36px;
+  border-radius: 8px;
+  font-weight: 600;
+  color: var(--mint-text);
+  border-color: var(--mint-border);
+  background: var(--mint-surface);
+}
+
+.page-container .btn-op-item.el-button,
+.console-container .btn-op-item.el-button {
+  height: 28px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  border-color: var(--mint-border);
+}
+
+.page-container .btn-op-item.primary.el-button,
+.console-container .btn-op-item.primary.el-button {
+  color: #fff;
+  border-color: var(--mint-primary);
+  background: var(--mint-primary);
+}
+
+.page-container .el-dialog__footer .el-button,
+.console-container .el-dialog__footer .el-button {
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.page-container .el-dialog__footer .el-button:not(.el-button--primary):not(.el-button--danger):not(.el-button--success),
+.console-container .el-dialog__footer .el-button:not(.el-button--primary):not(.el-button--danger):not(.el-button--success) {
+  color: var(--mint-text);
+  background: var(--mint-surface);
+  border-color: var(--mint-border);
+}
+
+.page-container .el-dialog__footer .el-button .el-icon,
+.console-container .el-dialog__footer .el-button .el-icon {
+  margin-right: 6px;
+}

web-admin/src/assets/styles/index.scss

@@ -1,6 +1,9 @@
 // 重置默认样式
 @use './core/reset.scss';
 
+// Fresh Mint 设计令牌
+@use './core/fresh-mint-tokens.scss';
+
 // 应用全局样式
 @use './core/app.scss';
 

web-admin/src/router/modules/sqxp.ts

@@ -196,6 +196,13 @@ export const sqxpAdminRoutes: AppRouteRecord[] = [
         path: 'delivery-warning',
         component: '/system/delivery-warning/index',
         meta: { title: '时效预警', keepAlive: true }
+      },
+      {
+        id: '10000000000000000000000000000033',
+        name: 'DeliveryDemo',
+        path: 'delivery-demo',
+        component: '/system/delivery-demo/index',
+        meta: { title: '配送调度演示', keepAlive: true }
       }
     ]
   },

web-admin/src/views/dashboard/console/index.vue

@@ -1,6 +1,11 @@
 <!-- 叁强鲜配工作台页面 -->
 <template>
   <div class="console-container">
+    <div class="page-head">
+      <h1>运营工作台</h1>
+      <p class="page-desc">统一查看订单、配送、结算与待办事项，优先处理时效预警任务。</p>
+    </div>
+
     <!-- 预警提示 -->
     <div v-if="warningCount > 0" class="alert-bar" @click="goToWarning">
       <el-icon class="alert-icon"><WarningFilled /></el-icon>
@@ -57,12 +62,13 @@
     </el-row>
 
     <!-- 最新订单 -->
-    <div class="card orders-card">
-      <div class="card-header">
-        <span class="card-title">最新订单</span>
+    <section class="panel orders-card">
+      <div class="panel-top">
+        <h2>最新订单</h2>
         <el-button type="primary" link @click="goToOrderList">查看更多</el-button>
       </div>
-      <el-table :data="orderList" v-loading="loading">
+      <div class="list-body list-wrap">
+        <el-table class="list-table" :data="orderList" v-loading="loading" stripe>
         <el-table-column prop="orderNo" label="订单编号" min-width="180" />
         <el-table-column prop="clientName" label="客户名称" min-width="150" />
         <el-table-column prop="region" label="区域" min-width="100" />
@@ -84,8 +90,9 @@
             <el-button type="primary" link @click="goToOrderDetail(row.id)">查看</el-button>
           </template>
         </el-table-column>
-      </el-table>
-    </div>
+        </el-table>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -286,149 +293,137 @@
 
 <style lang="scss" scoped>
 .console-container {
-  padding: 20px;
-}
-
-.alert-bar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px 20px;
-  background: #fef0f0;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  cursor: pointer;
-  transition: all 0.3s;
+  .alert-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    margin-bottom: 16px;
+    background: #fffbeb;
+    border: 1px solid #fde68a;
+    border-radius: var(--mint-radius);
+    cursor: pointer;
+    transition: 0.2s ease;
+
+    &:hover {
+      background: #fef3c7;
+    }
 
-  &:hover {
-    background: #fee;
-  }
+    .alert-icon {
+      color: #d97706;
+      font-size: 18px;
+    }
 
-  .alert-icon {
-    font-size: 20px;
-    color: #ee0a24;
-  }
+    .alert-text {
+      flex: 1;
+      color: #92400e;
+      font-size: 13px;
+    }
 
-  .alert-text {
-    flex: 1;
-    font-size: 14px;
-    color: #ee0a24;
+    .alert-btn {
+      color: var(--mint-primary-dark);
+      font-size: 13px;
+      font-weight: 600;
+    }
   }
+}
 
-  .alert-btn {
-    background: #ee0a24;
-    color: #fff;
-    padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 600;
-  }
+.stats-row,
+.todo-row,
+.quick-row {
+  margin-bottom: 16px;
 }
 
-.stats-row {
-  margin-bottom: 20px;
+.stats-card,
+.todo-card,
+.quick-btn {
+  background: var(--mint-surface);
+  border: 1px solid var(--mint-border);
+  border-radius: var(--mint-radius);
+  box-shadow: var(--mint-shadow);
+  margin-bottom: 0;
 }
 
 .stats-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  transition: all 0.3s;
-  margin-bottom: 16px;
+  min-height: 112px;
+  padding: 12px 14px;
+  gap: 12px;
+  transition: border-color 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-color: #b9dbcb;
+    transform: none;
+    box-shadow: var(--mint-shadow);
   }
 
   .stats-icon {
-    width: 56px;
-    height: 56px;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.blue {
-      background: #ecf5ff;
-      color: #1989fa;
-    }
-
-    &.green {
-      background: #f0f9eb;
-      color: #07c160;
-    }
-
-    &.orange {
-      background: #fdf6ec;
-      color: #ff976a;
-    }
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    border: 1px solid rgba(16, 185, 129, 0.12);
+    background: var(--mint-primary-bg);
+    color: var(--mint-primary-dark);
 
+    &.orange,
     &.red {
-      background: #fef0f0;
-      color: #ee0a24;
+      background: #fffbeb;
+      border-color: rgba(217, 119, 6, 0.2);
+      color: #d97706;
     }
 
+    &.blue,
+    &.green,
     &.purple {
-      background: #f4f0f9;
-      color: #9c27b0;
+      background: var(--mint-primary-bg);
+      border-color: rgba(16, 185, 129, 0.12);
+      color: var(--mint-primary-dark);
     }
   }
 
   .stats-info {
     .stats-num {
-      font-size: 24px;
+      font-size: 22px;
       font-weight: 700;
-      color: #303133;
+      color: var(--mint-text);
       line-height: 1.2;
+      letter-spacing: -0.02em;
+      font-variant-numeric: tabular-nums;
     }
 
     .stats-label {
-      font-size: 13px;
-      color: #909399;
+      font-size: 12px;
+      color: var(--mint-text-muted);
       margin-top: 4px;
     }
   }
 }
 
-.todo-row {
-  margin-bottom: 20px;
-}
-
 .todo-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid;
+  padding: 14px;
+  border-left: 3px solid var(--mint-border);
   cursor: pointer;
-  transition: all 0.3s;
-  margin-bottom: 16px;
+  transition: 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-color: var(--mint-primary);
+    transform: none;
+    box-shadow: var(--mint-shadow);
   }
 
   &.warning {
-    border-left-color: #ff976a;
+    border-left-color: #d97706;
   }
 
   &.danger {
-    border-left-color: #ee0a24;
+    border-left-color: #dc2626;
   }
 
   &.primary {
-    border-left-color: #1989fa;
+    border-left-color: var(--mint-primary-dark);
   }
 
   &.success {
-    border-left-color: #07c160;
+    border-left-color: var(--mint-primary);
   }
 
   .todo-header {
@@ -440,30 +435,30 @@
     .todo-title {
       font-size: 14px;
       font-weight: 600;
-      color: #303133;
+      color: var(--mint-text);
     }
 
     .todo-count {
-      background: #fef0f0;
-      color: #ee0a24;
+      background: var(--mint-primary-bg);
+      color: var(--mint-primary-dark);
       padding: 2px 10px;
-      border-radius: 10px;
+      border-radius: 6px;
       font-size: 12px;
       font-weight: 600;
 
       &.blue {
-        background: #ecf5ff;
-        color: #1989fa;
+        background: var(--mint-primary-bg);
+        color: var(--mint-primary-dark);
       }
 
       &.orange {
-        background: #fdf6ec;
-        color: #ff976a;
+        background: #fffbeb;
+        color: #d97706;
       }
 
       &.green {
-        background: #f0f9eb;
-        color: #07c160;
+        background: #d1fae5;
+        color: #047857;
       }
     }
   }
@@ -474,7 +469,7 @@
       justify-content: space-between;
       align-items: center;
       padding: 8px 0;
-      border-bottom: 1px solid #f5f7fa;
+      border-bottom: 1px solid #edf4f1;
       font-size: 13px;
 
       &:last-child {
@@ -482,7 +477,7 @@
       }
 
       .todo-item-text {
-        color: #606266;
+        color: var(--mint-text-muted);
         flex: 1;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -490,7 +485,7 @@
       }
 
       .todo-item-action {
-        color: #1989fa;
+        color: var(--mint-primary-dark);
         cursor: pointer;
         margin-left: 8px;
 
@@ -502,25 +497,19 @@
   }
 }
 
-.quick-row {
-  margin-bottom: 20px;
-}
-
 .quick-btn {
-  background: #fff;
-  border-radius: 12px;
+  border-radius: var(--mint-radius);
   padding: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   cursor: pointer;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s;
-  margin-bottom: 16px;
+  transition: border-color 0.2s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border-color: #b9dbcb;
+    transform: none;
+    box-shadow: var(--mint-shadow);
   }
 
   .quick-icon {
@@ -532,61 +521,49 @@
     justify-content: center;
 
     &.blue {
-      background: #ecf5ff;
-      color: #1989fa;
+      background: var(--mint-primary-bg);
+      color: var(--mint-primary-dark);
     }
 
     &.orange {
-      background: #fdf6ec;
-      color: #ff976a;
+      background: #fffbeb;
+      color: #d97706;
     }
 
     &.green {
-      background: #f0f9eb;
-      color: #07c160;
+      background: #d1fae5;
+      color: #047857;
     }
 
     &.red {
-      background: #fef0f0;
-      color: #ee0a24;
+      background: #fef2f2;
+      color: #dc2626;
     }
   }
 
   .quick-text {
     font-size: 14px;
     font-weight: 500;
-    color: #303133;
+    color: var(--mint-text);
     flex: 1;
   }
 
   .quick-arrow {
-    color: #c0c4cc;
+    color: var(--mint-text-muted);
   }
 }
 
 .orders-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid #ebeef5;
+  .list-body {
+    border-top: 1px solid var(--mint-border);
+  }
 
-    .card-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #303133;
-    }
+  :deep(.el-table__cell .cell) {
+    white-space: nowrap;
   }
 
   .amount-text {
-    color: #ee0a24;
+    color: var(--mint-primary-dark);
     font-weight: 600;
   }
 }

web-admin/src/views/index/style.scss

@@ -2,7 +2,7 @@
   display: flex;
   width: 100%;
   min-height: 100vh;
-  background: var(--default-bg-color);
+  background: var(--mint-bg-page);
 
   #app-sidebar {
     flex-shrink: 0;
@@ -14,7 +14,7 @@
     flex-direction: column;
     min-width: 0;
     height: 100vh;
-    overflow: auto;
+      overflow: hidden;
 
     #app-header {
       position: sticky;
@@ -26,20 +26,25 @@
 
     #app-content {
       flex: 1;
+      min-height: 0;
+      overflow: auto;
 
       :deep(.layout-content) {
         box-sizing: border-box;
-        width: calc(100% - 40px);
-        margin: auto;
+        width: 100%;
+        margin: 0;
+        padding: var(--mint-content-padding);
 
         // 子页面默认 style
         .page-content {
           position: relative;
           box-sizing: border-box;
-          padding: 20px;
+          padding: 0;
           overflow: hidden;
-          background: var(--default-box-color);
-          border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
+          background: transparent;
+          border-radius: 0 !important;
+          box-shadow: none !important;
+          border: none !important;
         }
       }
     }
@@ -73,7 +78,8 @@
 
       #app-content {
         :deep(.layout-content) {
-          width: calc(100% - 40px);
+          width: 100%;
+          padding: 16px;
         }
       }
     }
@@ -85,7 +91,8 @@
     #app-main {
       #app-content {
         :deep(.layout-content) {
-          width: calc(100% - 30px);
+          width: 100%;
+          padding: 12px;
         }
       }
     }

web-admin/src/views/system/category/index.vue

@@ -22,12 +22,12 @@
     </div>
 
     <div class="toolbar">
-      <el-button type="primary" @click="handleAdd">
+      <el-button class="btn-main" type="primary" @click="handleAdd">
         <el-icon><Plus /></el-icon>
         新增分类
       </el-button>
 
-      <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
+      <el-button class="btn-ghost" type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
         批量删除
       </el-button>
 
@@ -112,13 +112,13 @@
       <el-table-column label="操作" width="200" fixed="right">
         <template #default="{ row }">
           <el-button type="primary" link @click="handleAddChild(row)" v-if="!row.parentId">新增子分类</el-button>
-          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+          <el-button class="btn-op-item primary" @click="handleEdit(row)">编辑</el-button>
+          <el-button class="btn-op-item" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <div class="pagination">
+    <div class="pagination list-pager-bar">
       <span class="total-count">共 {{ pagination.total }} 条数据</span>
     </div>
 
@@ -300,8 +300,8 @@
       </div>
 
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
+        <el-button class="btn-ghost" @click="dialogVisible = false">取消</el-button>
+        <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
 
@@ -1278,7 +1278,7 @@
 .parameter-ghost {
   opacity: 0.5;
   background: #e6f7ff;
-  border: 1px dashed #1989fa;
+  border: 1px dashed #10b981;
 }
 
 .parameter-item {
@@ -1315,7 +1315,7 @@
 }
 
 .parameter-drag-handle:hover {
-  color: #1989fa;
+  color: #059669;
 }
 
 .parameter-order {

web-admin/src/views/system/client-settlement/index.vue

@@ -1133,7 +1133,7 @@
   }
 
   .stat-value.amount {
-    color: #ee0a24;
+    color: #dc2626;
   }
 
   .toolbar {
@@ -1144,7 +1144,7 @@
   }
 
   .amount-text {
-    color: #ee0a24;
+    color: #dc2626;
     font-weight: 600;
   }
 

web-admin/src/views/system/delivery-warning/index.vue

@@ -477,9 +477,9 @@
 }
 .search-bar { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 16px; }
 .pagination { display: flex; justify-content: flex-end; margin-top: 20px; }
-.text-danger { color: #ee0a24; font-weight: 600; }
-.text-warning { color: #ff976a; font-weight: 600; }
-.text-success { color: #07c160; }
+.text-danger { color: #dc2626; font-weight: 600; }
+.text-warning { color: #d97706; font-weight: 600; }
+.text-success { color: #059669; }
 .mb-4 { margin-bottom: 16px; }
 .delivery-row-expand-wrap {
   padding: 8px 12px;
@@ -544,7 +544,7 @@
   font-weight: 600;
   margin-bottom: 12px;
   padding-left: 12px;
-  border-left: 4px solid #1989fa;
+  border-left: 4px solid #10b981;
 }
 .timeline { padding: 10px 0; }
 .timeline-content {

web-admin/src/views/system/delivery/index.vue

@@ -854,7 +854,7 @@
   font-weight: 600;
   margin-bottom: 12px;
   padding-left: 12px;
-  border-left: 4px solid #1989fa;
+  border-left: 4px solid #10b981;
 }
 
 .detail-hint {
@@ -890,11 +890,11 @@
 }
 
 .address-card--supplier :deep(.el-card__header) {
-  border-left: 4px solid #ff976a;
+  border-left: 4px solid #d97706;
 }
 
 .address-card--customer :deep(.el-card__header) {
-  border-left: 4px solid #07c160;
+  border-left: 4px solid #059669;
 }
 
 .address-card-title {

web-admin/src/views/system/inquiry-quotation/index.vue

@@ -2584,22 +2584,22 @@ onMounted(async () => {
   font-weight: 600;
 }
 .matrix-hint-green {
-  color: #07c160;
+  color: #059669;
   font-weight: 600;
 }
 .matrix-hint-red {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 .supplier-quote-tone--none {
   color: #303133 !important;
 }
 .supplier-quote-tone--partial {
-  color: #ee0a24 !important;
+  color: #dc2626 !important;
   font-weight: 600;
 }
 .supplier-quote-tone--full {
-  color: #07c160 !important;
+  color: #059669 !important;
   font-weight: 600;
 }
 /* 表头 link 按钮内层 span 会继承主题色，需一并覆盖 */
@@ -2617,12 +2617,12 @@ onMounted(async () => {
 .supplier-header-btn.supplier-quote-tone--partial,
 .supplier-header-btn.supplier-quote-tone--partial:hover,
 .supplier-header-btn.supplier-quote-tone--partial :deep(span) {
-  color: #ee0a24 !important;
+  color: #dc2626 !important;
 }
 .supplier-header-btn.supplier-quote-tone--full,
 .supplier-header-btn.supplier-quote-tone--full:hover,
 .supplier-header-btn.supplier-quote-tone--full :deep(span) {
-  color: #07c160 !important;
+  color: #059669 !important;
 }
 .quote-tab-panel {
   min-height: 0;
@@ -2764,7 +2764,7 @@ onMounted(async () => {
   }
   &.active {
     background: #ecf5ff;
-    color: #1989fa;
+    color: #059669;
     border-color: rgba(25, 137, 250, 0.35);
     font-weight: 600;
   }
@@ -2884,7 +2884,7 @@ onMounted(async () => {
     transform: translateY(-1px);
   }
   &.selected {
-    border-color: #1989fa;
+    border-color: #10b981;
     box-shadow: 0 2px 12px rgba(25, 137, 250, 0.15);
   }
   .img {
@@ -3049,7 +3049,7 @@ onMounted(async () => {
 }
 .matrix-cell.lowest {
   background: #f0f9eb;
-  color: #07c160;
+  color: #059669;
   font-weight: 600;
 }
 .quote-matrix-table :deep(.el-table__cell) {

web-admin/src/views/system/inquiry/index.vue

@@ -460,7 +460,7 @@
 }
 
 .quotation-count {
-  color: #1989fa;
+  color: #059669;
   font-weight: 600;
 }
 
@@ -487,7 +487,7 @@
   font-weight: 600;
   margin-bottom: 12px;
   padding-left: 12px;
-  border-left: 4px solid #1989fa;
+  border-left: 4px solid #10b981;
 }
 
 .quotation-list {
@@ -530,7 +530,7 @@
 }
 
 .price-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 
@@ -551,7 +551,7 @@
 .quote-stat {
   flex: 1;
   padding: 16px;
-  background: linear-gradient(135deg, #1989fa 0%, #07c160 100%);
+  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
   border-radius: 12px;
   text-align: center;
 }
@@ -569,18 +569,18 @@
 }
 
 .price-low {
-  color: #07c160;
+  color: #059669;
   font-weight: 600;
 }
 
 .price-high {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 
 .quotation-card {
   &.is-selected {
-    border: 2px solid #07c160;
+    border: 2px solid #059669;
     background: #f0f9eb;
   }
 }

web-admin/src/views/system/invoice/index.vue

@@ -1,39 +1,53 @@
 <!-- 发票管理页面 -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
-        <el-form-item label="发票号">
-          <el-input v-model="searchForm.invoiceNo" placeholder="发票号" clearable />
-        </el-form-item>
-        <el-form-item label="客户名称">
-          <el-input v-model="searchForm.clientName" placeholder="客户名称" clearable />
-        </el-form-item>
-        <el-form-item label="发票类型">
-          <el-select v-model="searchForm.invoiceType" placeholder="请选择类型" clearable>
-            <el-option label="全部" value="" />
-            <el-option label="普通发票" value="normal" />
-            <el-option label="增值税发票" value="vat" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
-            <el-option label="全部" value="" />
-            <el-option label="待开具" value="pending" />
-            <el-option label="已开具" value="issued" />
-            <el-option label="已作废" value="void" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+    <header class="page-head">
+      <h1>发票管理</h1>
+      <p class="page-desc">统一管理开票、作废、下载与发票详情查询。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>发票列表</h2>
+      </div>
 
-    <!-- 数据表格 -->
-    <el-table :data="tableData" v-loading="loading" stripe>
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="发票号">
+              <el-input v-model="searchForm.invoiceNo" placeholder="发票号" clearable />
+            </el-form-item>
+            <el-form-item label="客户名称">
+              <el-input v-model="searchForm.clientName" placeholder="客户名称" clearable />
+            </el-form-item>
+            <el-form-item label="发票类型">
+              <el-select v-model="searchForm.invoiceType" placeholder="请选择类型" clearable>
+                <el-option label="全部" value="" />
+                <el-option label="普通发票" value="normal" />
+                <el-option label="增值税发票" value="vat" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
+                <el-option label="全部" value="" />
+                <el-option label="待开具" value="pending" />
+                <el-option label="已开具" value="issued" />
+                <el-option label="已作废" value="void" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">按发票号、客户、类型与状态快速检索。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="list-body list-wrap">
+        <el-table :data="tableData" v-loading="loading" stripe class="list-table">
       <el-table-column prop="invoiceNo" label="发票号" min-width="180" />
       <el-table-column prop="orderNo" label="订单编号" min-width="180" />
       <el-table-column prop="clientName" label="客户名称" min-width="150" />
@@ -56,29 +70,30 @@
       <el-table-column prop="createAt" label="创建时间" min-width="180" />
       <el-table-column label="操作" min-width="180" fixed="right">
         <template #default="{ row }">
-          <el-button type="primary" link @click="handleView(row)">查看</el-button>
-          <el-button v-if="row.status === 'pending'" type="success" link @click="handleIssue(row)">开具</el-button>
-          <el-button v-if="row.status === 'issued'" type="warning" link @click="handleDownload(row)">下载</el-button>
-          <el-button v-if="row.status === 'pending'" type="danger" link @click="handleVoid(row)">作废</el-button>
+          <el-button class="btn-op-item primary" @click="handleView(row)">查看</el-button>
+          <el-button v-if="row.status === 'pending'" class="btn-op-item" @click="handleIssue(row)">开具</el-button>
+          <el-button v-if="row.status === 'issued'" class="btn-op-item" @click="handleDownload(row)">下载</el-button>
+          <el-button v-if="row.status === 'pending'" class="btn-op-item" @click="handleVoid(row)">作废</el-button>
         </template>
       </el-table-column>
-    </el-table>
+        </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination">
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.pageSize"
-        :total="pagination.total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next"
-        @size-change="loadData"
-        @current-change="loadData"
-      />
-    </div>
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next"
+            @size-change="loadData"
+            @current-change="loadData"
+          />
+        </div>
+      </div>
+    </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="发票详情" width="700px">
+    <el-dialog v-model="viewVisible" title="发票详情" width="700px" class="invoice-dialog">
       <el-descriptions :column="2" border>
         <el-descriptions-item label="发票号">{{ viewData.invoiceNo }}</el-descriptions-item>
         <el-descriptions-item label="订单编号">{{ viewData.orderNo }}</el-descriptions-item>
@@ -106,13 +121,13 @@
         <el-descriptions-item label="创建时间">{{ viewData.createAt }}</el-descriptions-item>
       </el-descriptions>
       <template #footer>
-        <el-button @click="viewVisible = false">关闭</el-button>
-        <el-button v-if="viewData.status === 'issued'" type="primary" @click="handleDownload(viewData)">下载发票</el-button>
+        <el-button class="btn-ghost" @click="viewVisible = false">关闭</el-button>
+        <el-button v-if="viewData.status === 'issued'" class="btn-main" type="primary" @click="handleDownload(viewData)">下载发票</el-button>
       </template>
     </el-dialog>
 
     <!-- 开具发票弹窗 -->
-    <el-dialog v-model="issueVisible" title="开具发票" width="600px">
+    <el-dialog v-model="issueVisible" title="开具发票" width="600px" class="invoice-dialog">
       <el-form :model="issueForm" label-width="100px">
         <el-form-item label="发票文件">
           <el-input v-model="issueForm.invoiceUrl" placeholder="请输入发票文件URL或上传发票文件" />
@@ -125,17 +140,17 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="issueVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmIssue" :loading="submitLoading">确定开具</el-button>
+        <el-button class="btn-ghost" @click="issueVisible = false">取消</el-button>
+        <el-button class="btn-main" type="primary" @click="confirmIssue" :loading="submitLoading">确定开具</el-button>
       </template>
     </el-dialog>
 
     <!-- 作废确认弹窗 -->
-    <el-dialog v-model="voidVisible" title="确认作废" width="400px">
+    <el-dialog v-model="voidVisible" title="确认作废" width="400px" class="invoice-dialog">
       <p style="text-align: center; padding: 20px 0;">确定要作废这张发票吗？</p>
       <template #footer>
-        <el-button @click="voidVisible = false">取消</el-button>
-        <el-button type="danger" @click="confirmVoid" :loading="submitLoading">确认作废</el-button>
+        <el-button class="btn-ghost" @click="voidVisible = false">取消</el-button>
+        <el-button class="btn-main" type="danger" @click="confirmVoid" :loading="submitLoading">确认作废</el-button>
       </template>
     </el-dialog>
   </div>
@@ -320,25 +335,8 @@
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .amount-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 </style>

web-admin/src/views/system/menu/modules/menu-dialog.vue

@@ -28,10 +28,10 @@
     </ArtForm>
 
     <template #footer>
-      <span class="dialog-footer">
-        <ElButton @click="handleCancel">取 消</ElButton>
-        <ElButton type="primary" @click="handleSubmit">确 定</ElButton>
-      </span>
+      <div class="dialog-footer">
+        <ElButton class="btn-ghost" @click="handleCancel">取消</ElButton>
+        <ElButton class="btn-main" type="primary" @click="handleSubmit">确定</ElButton>
+      </div>
     </template>
   </ElDialog>
 </template>
@@ -382,3 +382,11 @@
     }
   )
 </script>
+
+<style scoped lang="scss">
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+</style>

web-admin/src/views/system/order-adjust/index.vue

@@ -1,40 +1,54 @@
 <!-- 订单调整页面 -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
-        <el-form-item label="关键词">
-          <el-input v-model="searchForm.keyword" placeholder="订单编号/客户名称" clearable />
-        </el-form-item>
-        <el-form-item label="调整类型">
-          <el-select v-model="searchForm.adjustType" placeholder="请选择类型" clearable>
-            <el-option label="全部" value="" />
-            <el-option label="减量" value="reduce" />
-            <el-option label="删除" value="delete" />
-            <el-option label="替代" value="substitute" />
-            <el-option label="补录" value="add" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="时间范围">
-          <el-date-picker
-            v-model="searchForm.dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <!-- 数据表格 -->
-    <el-table :data="tableData" v-loading="loading" stripe>
+    <header class="page-head">
+      <h1>订单调整</h1>
+      <p class="page-desc">统一处理订单减量、删除、替代与补录调整。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>调整记录列表</h2>
+      </div>
+
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="关键词">
+              <el-input v-model="searchForm.keyword" placeholder="订单编号/客户名称" clearable />
+            </el-form-item>
+            <el-form-item label="调整类型">
+              <el-select v-model="searchForm.adjustType" placeholder="请选择类型" clearable>
+                <el-option label="全部" value="" />
+                <el-option label="减量" value="reduce" />
+                <el-option label="删除" value="delete" />
+                <el-option label="替代" value="substitute" />
+                <el-option label="补录" value="add" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="时间范围">
+              <el-date-picker
+                v-model="searchForm.dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+              />
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">支持按类型与时间筛选调整记录。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="list-body list-wrap">
+        <el-table :data="tableData" v-loading="loading" stripe class="list-table">
       <el-table-column prop="orderNo" label="订单编号" min-width="180" />
       <el-table-column prop="clientName" label="客户名称" min-width="150" />
       <el-table-column prop="adjustType" label="调整类型" min-width="100">
@@ -63,26 +77,27 @@
       <el-table-column prop="createAt" label="调整时间" min-width="180" />
       <el-table-column label="操作" min-width="120" fixed="right">
         <template #default="{ row }">
-          <el-button type="primary" link @click="handleView(row)">查看</el-button>
+          <el-button class="btn-op-item primary" @click="handleView(row)">查看</el-button>
         </template>
       </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination">
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.pageSize"
-        :total="pagination.total"
-        :page-sizes="[10, 20, 50]"
-        layout="total, sizes, prev, pager, next"
-        @size-change="loadData"
-        @current-change="loadData"
-      />
-    </div>
+        </el-table>
+
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next"
+            @size-change="loadData"
+            @current-change="loadData"
+          />
+        </div>
+      </div>
+    </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="调整详情" width="700px">
+    <el-dialog v-model="viewVisible" title="调整详情" width="700px" class="order-adjust-dialog">
       <el-descriptions :column="2" border class="mb-4">
         <el-descriptions-item label="订单编号">{{ viewData.orderNo }}</el-descriptions-item>
         <el-descriptions-item label="客户名称">{{ viewData.clientName }}</el-descriptions-item>
@@ -130,10 +145,13 @@
           <el-descriptions-item label="替代商品">{{ viewData.substituteProductName }}</el-descriptions-item>
         </el-descriptions>
       </div>
+      <template #footer>
+        <el-button class="btn-ghost" @click="viewVisible = false">关闭</el-button>
+      </template>
     </el-dialog>
 
     <!-- 发起订单调整弹窗 -->
-    <el-dialog v-model="adjustVisible" title="发起订单调整" width="800px">
+    <el-dialog v-model="adjustVisible" title="发起订单调整" width="800px" class="order-adjust-dialog">
       <el-steps :active="currentStep" finish-status="success" class="mb-4">
         <el-step title="选择订单" />
         <el-step title="选择商品" />
@@ -252,9 +270,9 @@
       </div>
 
       <template #footer>
-        <el-button v-if="currentStep > 0" @click="currentStep--">上一步</el-button>
-        <el-button v-if="currentStep < 3" type="primary" @click="nextStep">下一步</el-button>
-        <el-button v-if="currentStep === 3" type="primary" @click="submitAdjust" :loading="submitLoading">确认提交</el-button>
+        <el-button v-if="currentStep > 0" class="btn-ghost" @click="currentStep--">上一步</el-button>
+        <el-button v-if="currentStep < 3" class="btn-main" type="primary" @click="nextStep">下一步</el-button>
+        <el-button v-if="currentStep === 3" class="btn-main" type="primary" @click="submitAdjust" :loading="submitLoading">确认提交</el-button>
       </template>
     </el-dialog>
   </div>
@@ -568,35 +586,18 @@
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .adjust-info {
   font-size: 13px;
   color: #606266;
 }
 
 .amount-add {
-  color: #07c160;
+  color: #059669;
   font-weight: 600;
 }
 
 .amount-reduce {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 
@@ -609,7 +610,7 @@
   font-weight: 600;
   margin-bottom: 12px;
   padding-left: 12px;
-  border-left: 4px solid #1989fa;
+  border-left: 4px solid #10b981;
 }
 
 .reason-box {
@@ -637,7 +638,7 @@
 }
 
 .price-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 

web-admin/src/views/system/order/index.vue

@@ -2128,11 +2128,11 @@
     white-space: nowrap;
   }
   .amount-text {
-    color: #ee0a24;
+    color: #dc2626;
     font-weight: 600;
   }
   .amount-text.danger {
-    color: #ee0a24;
+    color: #dc2626;
   }
   .mt-4 {
     margin-top: 16px;
@@ -2167,7 +2167,7 @@
     font-weight: 600;
     margin-bottom: 12px;
     padding-left: 12px;
-    border-left: 4px solid #1989fa;
+    border-left: 4px solid #10b981;
   }
 
   .detail-tabs {
@@ -2190,13 +2190,13 @@
 
     &.active {
       background: #fff;
-      color: #1989fa;
+      color: #059669;
       font-weight: 500;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     }
 
     &:hover:not(.active) {
-      color: #1989fa;
+      color: #059669;
     }
   }
 
@@ -2209,11 +2209,11 @@
     display: flex;
     align-items: center;
     gap: 12px;
-    color: #ee0a24;
+    color: #dc2626;
     font-size: 14px;
 
     strong {
-      color: #ee0a24;
+      color: #dc2626;
     }
   }
 
@@ -2223,7 +2223,7 @@
     flex-wrap: wrap;
     gap: 40px;
     padding: 16px 0;
-    border-top: 2px solid #1989fa;
+    border-top: 2px solid #10b981;
     margin-top: 16px;
 
     .amount-item {
@@ -2235,11 +2235,11 @@
       .value {
         font-size: 20px;
         font-weight: 600;
-        color: #ee0a24;
+        color: #dc2626;
         margin-left: 8px;
 
         &.success {
-          color: #07c160;
+          color: #059669;
         }
       }
     }
@@ -2276,11 +2276,11 @@
   }
 
   .od-address-card--supplier :deep(.el-card__header) {
-    border-left: 4px solid #ff976a;
+    border-left: 4px solid #d97706;
   }
 
   .od-address-card--customer :deep(.el-card__header) {
-    border-left: 4px solid #07c160;
+    border-left: 4px solid #059669;
   }
 
   .od-address-card-title {
@@ -2366,11 +2366,11 @@
   }
 
   .od-address-card--supplier :deep(.el-card__header) {
-    border-left: 4px solid #ff976a;
+    border-left: 4px solid #d97706;
   }
 
   .od-address-card--customer :deep(.el-card__header) {
-    border-left: 4px solid #07c160;
+    border-left: 4px solid #059669;
   }
 
   .od-address-card-title {
@@ -2463,7 +2463,7 @@
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    background: #1989fa;
+    background: #10b981;
     color: #fff;
     font-size: 12px;
     font-weight: 600;
@@ -2526,7 +2526,7 @@
   }
 
   .text-danger {
-    color: #ee0a24;
+    color: #dc2626;
   }
 
   /* 订单明细：横向滚动，列保持 min-width 可读 */

web-admin/src/views/system/parameter/index.vue

@@ -23,12 +23,12 @@
 
     <!-- 操作栏 -->
     <div class="toolbar">
-      <el-button type="primary" @click="handleAdd">
+      <el-button class="btn-main" type="primary" @click="handleAdd">
         <el-icon><Plus /></el-icon>
         新增参数
       </el-button>
 
-      <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
+      <el-button class="btn-ghost" type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
         批量删除
       </el-button>
 
@@ -104,15 +104,15 @@
       <el-table-column prop="sortOrder" label="排序" width="80" align="center" />
       <el-table-column label="操作" width="180" fixed="right">
         <template #default="{ row }">
-          <el-button link type="primary" @click="handleView(row)">详情</el-button>
-          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
-          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+          <el-button class="btn-op-item primary" @click="handleView(row)">详情</el-button>
+          <el-button class="btn-op-item" @click="handleEdit(row)">编辑</el-button>
+          <el-button class="btn-op-item" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 分页 -->
-    <div class="pagination">
+    <div class="pagination list-pager-bar">
       <el-pagination
         :current-page="pagination.page"
         :page-size="pagination.pageSize"
@@ -165,8 +165,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
+        <el-button class="btn-ghost" @click="dialogVisible = false">取消</el-button>
+        <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
 

web-admin/src/views/system/price-list/index.vue

@@ -1,28 +1,41 @@
 <!-- 价格清单页面 -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
-        <el-form-item label="状态">
-          <el-select v-model="searchForm.status" clearable>
-            <el-option label="全部" value="" />
-            <el-option label="草稿" value="draft" />
-            <el-option label="待生效" value="pending" />
-            <el-option label="生效中" value="active" />
-            <el-option label="已失效" value="inactive" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+    <header class="page-head">
+      <h1>价格清单</h1>
+      <p class="page-desc">统一管理供应商区域价格版本与发布状态。</p>
+    </header>
 
-    <!-- 数据表格 -->
-    <div class="table-container">
-      <el-table :data="tableData" v-loading="loading" stripe>
+    <section class="panel">
+      <div class="panel-top">
+        <h2>价格清单列表</h2>
+      </div>
+
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="状态">
+              <el-select v-model="searchForm.status" clearable>
+                <el-option label="全部" value="" />
+                <el-option label="草稿" value="draft" />
+                <el-option label="待生效" value="pending" />
+                <el-option label="生效中" value="active" />
+                <el-option label="已失效" value="inactive" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">按状态快速定位并执行版本发布。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="list-body list-wrap">
+        <el-table :data="tableData" v-loading="loading" stripe class="list-table">
         <el-table-column prop="regionName" label="区域" min-width="120" />
         <el-table-column prop="supplierName" label="供应商" min-width="150" show-overflow-tooltip />
         <el-table-column prop="version" label="版本" min-width="80" align="center" />
@@ -43,29 +56,29 @@
         <el-table-column prop="expireTime" label="失效时间" min-width="160" />
         <el-table-column label="操作" min-width="180" fixed="right">
           <template #default="{ row }">
-            <el-button type="primary" link @click="handleView(row)">查看</el-button>
-            <el-button v-if="row.status === 'draft'" type="success" link @click="handlePublish(row)">发布</el-button>
-            <el-button v-if="row.status === 'active'" type="warning" link @click="handleDisable(row)">禁用</el-button>
+            <el-button class="btn-op-item primary" @click="handleView(row)">查看</el-button>
+            <el-button v-if="row.status === 'draft'" class="btn-op-item" @click="handlePublish(row)">发布</el-button>
+            <el-button v-if="row.status === 'active'" class="btn-op-item" @click="handleDisable(row)">禁用</el-button>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
 
-      <!-- 分页 -->
-      <div class="pagination">
-        <el-pagination
-          v-model:current-page="pagination.page"
-          v-model:page-size="pagination.pageSize"
-          :total="pagination.total"
-          :page-sizes="[10, 20, 50]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="loadData"
-          @current-change="loadData"
-        />
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="loadData"
+            @current-change="loadData"
+          />
+        </div>
       </div>
-    </div>
+    </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="价格清单详情" width="800px" destroy-on-close>
+    <el-dialog v-model="viewVisible" title="价格清单详情" width="800px" destroy-on-close class="price-list-dialog">
       <el-descriptions :column="2" border class="mb-4">
         <el-descriptions-item label="区域">{{ viewData.regionName }}</el-descriptions-item>
         <el-descriptions-item label="供应商">{{ viewData.supplierName }}</el-descriptions-item>
@@ -98,6 +111,9 @@
         </el-table-column>
         <el-table-column prop="remark" label="备注" min-width="100" show-overflow-tooltip />
       </el-table>
+      <template #footer>
+        <el-button class="btn-ghost" @click="viewVisible = false">关闭</el-button>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -229,31 +245,8 @@ onMounted(() => loadData())
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.table-container {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .amount-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 
@@ -266,6 +259,6 @@ onMounted(() => loadData())
   font-weight: 600;
   margin: 16px 0 12px;
   padding-left: 12px;
-  border-left: 4px solid #1989fa;
+  border-left: 4px solid #10b981;
 }
 </style>

web-admin/src/views/system/price-list/version.vue

@@ -681,7 +681,7 @@
   }
 
   &.is-active {
-    border-color: #07c160;
+    border-color: #059669;
   }
 }
 
@@ -753,11 +753,11 @@
   font-weight: 600;
   margin-bottom: 12px;
   padding-left: 12px;
-  border-left: 4px solid #1989fa;
+  border-left: 4px solid #10b981;
 }
 
 .price-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 

web-admin/src/views/system/product/index.vue

@@ -2279,7 +2279,7 @@
 
 .banner-loading-icon {
   font-size: 22px;
-  color: #1989fa;
+  color: #059669;
 }
 
 // 新增/编辑弹窗表单容器
@@ -2334,7 +2334,7 @@
 
   .el-icon {
     font-size: 16px;
-    color: #1989fa;
+    color: #059669;
   }
 }
 
@@ -2507,7 +2507,7 @@
 .banner-ghost {
   opacity: 0.55;
   background: #e8f4ff;
-  border: 1px dashed #1989fa;
+  border: 1px dashed #10b981;
 }
 
 .banner-chosen {
@@ -2721,7 +2721,7 @@
   border: 1px solid #ebeef5;
 
   &:hover {
-    border-color: #1989fa;
+    border-color: #10b981;
 
     .view-video-play {
       opacity: 1;

web-admin/src/views/system/quotation/compare.vue

@@ -332,7 +332,7 @@
   font-weight: 500;
 
   &.price-lowest {
-    color: #07c160;
+    color: #059669;
     background: #f0f9eb;
     padding: 4px 8px;
     border-radius: 4px;
@@ -341,7 +341,7 @@
 
 .lowest-tag {
   font-size: 12px;
-  color: #07c160;
+  color: #059669;
   background: #f0f9eb;
   padding: 2px 6px;
   border-radius: 4px;
@@ -359,7 +359,7 @@
   transition: all 0.3s;
 
   &.is-selected {
-    border-color: #1989fa;
+    border-color: #10b981;
     background: #ecf5ff;
   }
 }
@@ -403,7 +403,7 @@
   &.amount {
     font-size: 18px;
     font-weight: 600;
-    color: #ee0a24;
+    color: #dc2626;
   }
 }
 
@@ -434,7 +434,7 @@
 }
 
 .amount-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
   font-size: 18px;
 }

web-admin/src/views/system/quotation/index.vue

@@ -1,48 +1,59 @@
 <!-- 报价管理页面 -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
-        <el-form-item label="询价单">
-          <el-select
-            v-model="searchForm.inquiryId"
-            clearable
-            placeholder="请选择询价单"
-            style="width: 200px"
-            @visible-change="(open) => open && loadInquiries()"
-          >
-            <el-option v-for="item in inquiryList" :key="item.id" :label="item.title" :value="item.id" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="所属区域">
-          <el-select
-            v-model="searchForm.regionId"
-            clearable
-            placeholder="请选择区域"
-            style="width: 150px"
-            @visible-change="(open) => open && loadRegions()"
-          >
-            <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="报价状态">
-          <el-select v-model="searchForm.status" clearable placeholder="请选择状态" style="width: 140px">
-            <el-option label="全部状态" value="" />
-            <el-option label="已提交" value="submitted" />
-            <el-option label="被选中" value="selected" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+    <header class="page-head">
+      <h1>报价管理</h1>
+      <p class="page-desc">统一查看供应商报价结果、状态与明细。</p>
+    </header>
 
-    <!-- 数据表格 -->
-    <div class="table-container">
-      <el-table :data="tableData" v-loading="loading" stripe>
+    <section class="panel">
+      <div class="panel-top">
+        <h2>报价列表</h2>
+      </div>
+
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="询价单">
+              <el-select
+                v-model="searchForm.inquiryId"
+                clearable
+                placeholder="请选择询价单"
+                @visible-change="(open) => open && loadInquiries()"
+              >
+                <el-option v-for="item in inquiryList" :key="item.id" :label="item.title" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="所属区域">
+              <el-select
+                v-model="searchForm.regionId"
+                clearable
+                placeholder="请选择区域"
+                @visible-change="(open) => open && loadRegions()"
+              >
+                <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="报价状态">
+              <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
+                <el-option label="全部状态" value="" />
+                <el-option label="已提交" value="submitted" />
+                <el-option label="被选中" value="selected" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">按询价单、区域与状态筛选报价记录。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="list-body list-wrap">
+        <el-table :data="tableData" v-loading="loading" stripe class="list-table">
         <el-table-column prop="inquiryTitle" label="询价单" min-width="200" show-overflow-tooltip />
         <el-table-column prop="supplierName" label="供应商" min-width="150" show-overflow-tooltip />
         <el-table-column prop="regionName" label="区域" min-width="100" />
@@ -60,27 +71,27 @@
         </el-table-column>
         <el-table-column label="操作" min-width="160" fixed="right">
           <template #default="{ row }">
-            <el-button type="primary" link @click="handleView(row)">查看</el-button>
+            <el-button class="btn-op-item primary" @click="handleView(row)">查看</el-button>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
 
-      <!-- 分页 -->
-      <div class="pagination">
-        <el-pagination
-          v-model:current-page="pagination.page"
-          v-model:page-size="pagination.pageSize"
-          :total="pagination.total"
-          :page-sizes="[10, 20, 50]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="loadData"
-          @current-change="loadData"
-        />
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="loadData"
+            @current-change="loadData"
+          />
+        </div>
       </div>
-    </div>
+    </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="报价详情" width="800px" destroy-on-close>
+    <el-dialog v-model="viewVisible" title="报价详情" width="800px" destroy-on-close class="quotation-dialog">
       <el-descriptions :column="2" border class="mb-4">
         <el-descriptions-item label="询价单" :span="2">{{ viewData.inquiryTitle }}</el-descriptions-item>
         <el-descriptions-item label="供应商">{{ viewData.supplierName }}</el-descriptions-item>
@@ -106,6 +117,9 @@
           </template>
         </el-table-column>
       </el-table>
+      <template #footer>
+        <el-button class="btn-ghost" @click="viewVisible = false">关闭</el-button>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -251,31 +265,8 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.table-container {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .amount-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 
@@ -288,6 +279,6 @@ onMounted(() => {
   font-weight: 600;
   margin: 16px 0 12px;
   padding-left: 12px;
-  border-left: 4px solid #1989fa;
+  border-left: 4px solid #10b981;
 }
 </style>

web-admin/src/views/system/refund/index.vue

@@ -1,27 +1,40 @@
 <!-- 退款管理页面 -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
-        <el-form-item label="状态">
-          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
-            <el-option label="全部" value="" />
-            <el-option label="待处理" value="pending" />
-            <el-option label="成功" value="success" />
-            <el-option label="失败" value="failed" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+    <header class="page-head">
+      <h1>退款管理</h1>
+      <p class="page-desc">统一处理退款审核、状态追踪与失败原因复核。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>退款列表</h2>
+      </div>
+
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="状态">
+              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
+                <el-option label="全部" value="" />
+                <el-option label="待处理" value="pending" />
+                <el-option label="成功" value="success" />
+                <el-option label="失败" value="failed" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">按退款状态筛选并执行审核。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
 
-    <!-- 数据表格 -->
-    <div class="table-container">
-      <el-table :data="tableData" v-loading="loading" stripe>
+      <div class="list-body list-wrap">
+        <el-table :data="tableData" v-loading="loading" stripe class="list-table">
         <el-table-column prop="refundNo" label="退款单号" min-width="180" />
         <el-table-column prop="orderNo" label="订单编号" min-width="180" />
         <el-table-column prop="clientName" label="客户名称" min-width="150" show-overflow-tooltip />
@@ -54,28 +67,28 @@
         <el-table-column prop="refundTime" label="退款时间" min-width="160" />
         <el-table-column label="操作" min-width="120" fixed="right">
           <template #default="{ row }">
-            <el-button type="primary" link @click="handleView(row)">查看</el-button>
-            <el-button v-if="row.status === 'pending'" type="success" link @click="handleProcess(row)">审核</el-button>
+            <el-button class="btn-op-item primary" @click="handleView(row)">查看</el-button>
+            <el-button v-if="row.status === 'pending'" class="btn-op-item" @click="handleProcess(row)">审核</el-button>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
 
-      <!-- 分页 -->
-      <div class="pagination">
-        <el-pagination
-          v-model:current-page="pagination.page"
-          v-model:page-size="pagination.pageSize"
-          :total="pagination.total"
-          :page-sizes="[10, 20, 50]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="loadData"
-          @current-change="loadData"
-        />
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="loadData"
+            @current-change="loadData"
+          />
+        </div>
       </div>
-    </div>
+    </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="退款详情" width="700px" destroy-on-close>
+    <el-dialog v-model="viewVisible" title="退款详情" width="700px" destroy-on-close class="refund-dialog">
       <el-descriptions :column="2" border>
         <el-descriptions-item label="退款单号" :span="2">{{ viewData.refundNo }}</el-descriptions-item>
         <el-descriptions-item label="订单编号">{{ viewData.orderNo }}</el-descriptions-item>
@@ -108,13 +121,13 @@
       </el-descriptions>
 
       <template #footer>
-        <el-button @click="viewVisible = false">关闭</el-button>
-        <el-button v-if="viewData.status === 'pending'" type="success" @click="handleProcess(viewData)">审核</el-button>
+        <el-button class="btn-ghost" @click="viewVisible = false">关闭</el-button>
+        <el-button v-if="viewData.status === 'pending'" class="btn-main" type="success" @click="handleProcess(viewData)">审核</el-button>
       </template>
     </el-dialog>
 
     <!-- 退款审核弹窗 -->
-    <el-dialog v-model="processVisible" title="退款审核" width="500px">
+    <el-dialog v-model="processVisible" title="退款审核" width="500px" class="refund-dialog">
       <el-alert type="warning" :closable="false" class="mb-4">
         <template #title>
           退款金额：<strong class="amount-text">¥{{ formatAmount(viewData.refundAmount) }}</strong>
@@ -132,8 +145,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="processVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmProcess" :loading="processLoading">确认审核</el-button>
+        <el-button class="btn-ghost" @click="processVisible = false">取消</el-button>
+        <el-button class="btn-main" type="primary" @click="confirmProcess" :loading="processLoading">确认审核</el-button>
       </template>
     </el-dialog>
   </div>
@@ -256,35 +269,12 @@ onMounted(() => loadData())
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.table-container {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .amount-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 
 .danger-text {
-  color: #ee0a24;
+  color: #dc2626;
 }
 </style>

web-admin/src/views/system/region/index.vue

@@ -24,12 +24,12 @@
 
     <!-- 操作栏 -->
     <div class="toolbar">
-      <el-button type="primary" @click="handleAdd">
+      <el-button class="btn-main" type="primary" @click="handleAdd">
         <el-icon><Plus /></el-icon>
         新增区域
       </el-button>
 
-      <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
+      <el-button class="btn-ghost" type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
         批量删除
       </el-button>
 
@@ -100,14 +100,14 @@
       <el-table-column prop="createAt" label="创建时间" min-width="180" align="center" header-align="center" />
       <el-table-column label="操作" min-width="200" fixed="right" align="center" header-align="center">
         <template #default="{ row }">
-          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+          <el-button class="btn-op-item primary" @click="handleEdit(row)">编辑</el-button>
+          <el-button class="btn-op-item" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 分页 -->
-    <div class="pagination">
+    <div class="pagination list-pager-bar">
       <el-pagination
         :current-page="pagination.page"
         :page-size="pagination.pageSize"
@@ -174,8 +174,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
+        <el-button class="btn-ghost" @click="dialogVisible = false">取消</el-button>
+        <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
   </div>

web-admin/src/views/system/review/index.vue

@@ -1,37 +1,51 @@
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm" class="search-form">
-        <el-form-item label="商品名称">
-          <el-input v-model="searchForm.productName" placeholder="商品名称" clearable @keyup.enter="handleSearch" />
-        </el-form-item>
-        <el-form-item label="用户名称">
-          <el-input v-model="searchForm.userName" placeholder="用户名称" clearable @keyup.enter="handleSearch" />
-        </el-form-item>
-        <el-form-item label="评价状态">
-          <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
-            <el-option label="全部" :value="undefined" />
-            <el-option label="待审核" value="pending" />
-            <el-option label="已通过" value="approved" />
-            <el-option label="已拒绝" value="rejected" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="评分">
-          <el-select v-model="searchForm.rating" placeholder="全部" clearable style="width: 100px">
-            <el-option label="全部" :value="undefined" />
-            <el-option v-for="i in 5" :key="i" :label="`${i}星`" :value="i" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">查询</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+    <header class="page-head">
+      <h1>评价管理</h1>
+      <p class="page-desc">统一审核商品评价内容、媒体素材与商家回复，保障内容质量。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>评价列表</h2>
+      </div>
 
-    <!-- 数据表格 -->
-    <el-table :data="tableData" v-loading="loading" stripe>
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="商品名称">
+              <el-input v-model="searchForm.productName" placeholder="商品名称" clearable @keyup.enter="handleSearch" />
+            </el-form-item>
+            <el-form-item label="用户名称">
+              <el-input v-model="searchForm.userName" placeholder="用户名称" clearable @keyup.enter="handleSearch" />
+            </el-form-item>
+            <el-form-item label="评价状态">
+              <el-select v-model="searchForm.status" placeholder="全部" clearable>
+                <el-option label="全部" :value="undefined" />
+                <el-option label="待审核" value="pending" />
+                <el-option label="已通过" value="approved" />
+                <el-option label="已拒绝" value="rejected" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="评分">
+              <el-select v-model="searchForm.rating" placeholder="全部" clearable>
+                <el-option label="全部" :value="undefined" />
+                <el-option v-for="i in 5" :key="i" :label="`${i}星`" :value="i" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">支持关键词检索与多条件组合筛选。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">查询</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="list-body list-wrap">
+        <el-table :data="tableData" v-loading="loading" stripe class="list-table">
       <el-table-column prop="productId" label="商品ID" width="120" show-overflow-tooltip />
       <el-table-column prop="userName" label="用户" min-width="100" />
       <el-table-column prop="rating" label="评分" width="100" align="center">
@@ -67,26 +81,26 @@
       <el-table-column prop="createAt" label="评价时间" width="160" />
       <el-table-column label="操作" width="100" fixed="right">
         <template #default="{ row }">
-          <el-button link type="primary" @click="handleView(row)">详情</el-button>
+          <el-button class="btn-op-item primary" @click="handleView(row)">详情</el-button>
         </template>
       </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination">
-      <el-pagination
-        v-model:current-page="pagination.page"
-        v-model:page-size="pagination.pageSize"
-        :total="pagination.total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="loadData"
-        @current-change="loadData"
-      />
-    </div>
+        </el-table>
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="loadData"
+            @current-change="loadData"
+          />
+        </div>
+      </div>
+    </section>
 
     <!-- 详情弹窗 -->
-    <el-dialog v-model="detailVisible" title="评价详情" width="700px">
+    <el-dialog v-model="detailVisible" title="评价详情" width="700px" class="review-dialog">
       <el-descriptions :column="2" border v-if="currentReview">
         <el-descriptions-item label="商品ID">{{ currentReview.productId }}</el-descriptions-item>
         <el-descriptions-item label="用户">{{ currentReview.userName }}</el-descriptions-item>
@@ -150,23 +164,23 @@
 
       <template #footer>
         <template v-if="currentReview?.status === 'pending'">
-          <el-button type="danger" @click="handleReject">拒绝</el-button>
-          <el-button type="success" @click="handleApprove">通过</el-button>
+          <el-button class="btn-ghost" type="danger" @click="handleReject">拒绝</el-button>
+          <el-button class="btn-main" type="success" @click="handleApprove">通过</el-button>
         </template>
-        <el-button @click="detailVisible = false">关闭</el-button>
+        <el-button class="btn-ghost" @click="detailVisible = false">关闭</el-button>
       </template>
     </el-dialog>
 
     <!-- 拒绝原因弹窗 -->
-    <el-dialog v-model="rejectVisible" title="拒绝评价" width="400px">
+    <el-dialog v-model="rejectVisible" title="拒绝评价" width="400px" class="review-dialog">
       <el-form>
         <el-form-item label="拒绝原因" required>
           <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="rejectVisible = false">取消</el-button>
-        <el-button type="danger" @click="confirmReject" :loading="actionLoading">确定拒绝</el-button>
+        <el-button class="btn-ghost" @click="rejectVisible = false">取消</el-button>
+        <el-button class="btn-main" type="danger" @click="confirmReject" :loading="actionLoading">确定拒绝</el-button>
       </template>
     </el-dialog>
   </div>

web-admin/src/views/system/role/modules/role-edit-dialog.vue

@@ -26,8 +26,8 @@
       </ElFormItem>
     </ElForm>
     <template #footer>
-      <ElButton @click="handleClose">取消</ElButton>
-      <ElButton type="primary" @click="handleSubmit">提交</ElButton>
+      <ElButton class="btn-ghost" @click="handleClose">取消</ElButton>
+      <ElButton class="btn-main" type="primary" @click="handleSubmit">提交</ElButton>
     </template>
   </ElDialog>
 </template>

web-admin/src/views/system/role/modules/role-permission-dialog.vue

@@ -29,13 +29,13 @@
       </ElTree>
     </ElScrollbar>
     <template #footer>
-      <ElButton @click="outputSelectedData" style="margin-left: 8px">获取选中数据</ElButton>
+      <ElButton class="btn-ghost" @click="outputSelectedData" style="margin-left: 8px">获取选中数据</ElButton>
 
-      <ElButton @click="toggleExpandAll">{{ isExpandAll ? '全部收起' : '全部展开' }}</ElButton>
-      <ElButton @click="toggleSelectAll" style="margin-left: 8px">{{
+      <ElButton class="btn-ghost" @click="toggleExpandAll">{{ isExpandAll ? '全部收起' : '全部展开' }}</ElButton>
+      <ElButton class="btn-ghost" @click="toggleSelectAll" style="margin-left: 8px">{{
         isSelectAll ? '取消全选' : '全部选择'
       }}</ElButton>
-      <ElButton type="primary" @click="savePermission">保存</ElButton>
+      <ElButton class="btn-main" type="primary" @click="savePermission">保存</ElButton>
     </template>
   </ElDialog>
 </template>

web-admin/src/views/system/settlement/index.vue

@@ -1,26 +1,39 @@
 <!-- 结算管理页面 -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
-        <el-form-item label="状态">
-          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
-            <el-option label="全部" value="" />
-            <el-option label="待确认" value="pending" />
-            <el-option label="已完成" value="completed" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <!-- 数据表格 -->
-    <div class="table-container">
-      <el-table :data="tableData" v-loading="loading" stripe>
+    <header class="page-head">
+      <h1>结算管理</h1>
+      <p class="page-desc">统一管理结算单状态流转与确认记录。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>结算列表</h2>
+      </div>
+
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="状态">
+              <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
+                <el-option label="全部" value="" />
+                <el-option label="待确认" value="pending" />
+                <el-option label="已完成" value="completed" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">按状态筛选结算单并执行确认操作。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="list-body list-wrap">
+        <el-table :data="tableData" v-loading="loading" stripe class="list-table">
         <el-table-column prop="settlementNo" label="结算单号" min-width="180" />
         <el-table-column prop="orderNo" label="订单编号" min-width="180" />
         <el-table-column prop="clientName" label="客户名称" min-width="150" show-overflow-tooltip />
@@ -45,28 +58,28 @@
         </el-table-column>
         <el-table-column label="操作" min-width="150" fixed="right">
           <template #default="{ row }">
-            <el-button type="primary" link @click="handleView(row)">查看</el-button>
-            <el-button v-if="row.status === 'pending'" type="success" link @click="handleConfirm(row)">确认</el-button>
+            <el-button class="btn-op-item primary" @click="handleView(row)">查看</el-button>
+            <el-button v-if="row.status === 'pending'" class="btn-op-item" @click="handleConfirm(row)">确认</el-button>
           </template>
         </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="pagination">
-        <el-pagination
-          v-model:current-page="pagination.page"
-          v-model:page-size="pagination.pageSize"
-          :total="pagination.total"
-          :page-sizes="[10, 20, 50]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="loadData"
-          @current-change="loadData"
-        />
+        </el-table>
+
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="loadData"
+            @current-change="loadData"
+          />
+        </div>
       </div>
-    </div>
+    </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="结算详情" width="700px" destroy-on-close>
+    <el-dialog v-model="viewVisible" title="结算详情" width="700px" destroy-on-close class="settlement-dialog">
       <el-descriptions :column="2" border>
         <el-descriptions-item label="结算单号" :span="2">{{ viewData.settlementNo }}</el-descriptions-item>
         <el-descriptions-item label="订单编号">{{ viewData.orderNo }}</el-descriptions-item>
@@ -89,8 +102,8 @@
       </el-descriptions>
 
       <template #footer>
-        <el-button @click="viewVisible = false">关闭</el-button>
-        <el-button v-if="viewData.status === 'pending'" type="success" @click="handleConfirm(viewData)">确认结算</el-button>
+        <el-button class="btn-ghost" @click="viewVisible = false">关闭</el-button>
+        <el-button v-if="viewData.status === 'pending'" class="btn-main" type="success" @click="handleConfirm(viewData)">确认结算</el-button>
       </template>
     </el-dialog>
   </div>
@@ -190,31 +203,8 @@ onMounted(() => loadData())
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.table-container {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .amount-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 </style>

web-admin/src/views/system/statistics/index.vue

@@ -180,10 +180,10 @@
   const orderTrendType = ref('day')
 
   const statsData = ref([
-    { key: 'client', label: '客户总数', value: '1,286', icon: UserFilled, color: '#1989fa', bgColor: '#ecf5ff' },
-    { key: 'supplier', label: '供应商数量', value: '86', icon: Shop, color: '#07c160', bgColor: '#f0f9eb' },
-    { key: 'order', label: '本月订单', value: '9,856', icon: ShoppingCart, color: '#ff976a', bgColor: '#fdf6ec' },
-    { key: 'delivery', label: '本月配送', value: '9,234', icon: Van, color: '#ee0a24', bgColor: '#fef0f0' },
+    { key: 'client', label: '客户总数', value: '1,286', icon: UserFilled, color: '#059669', bgColor: '#ecfdf5' },
+    { key: 'supplier', label: '供应商数量', value: '86', icon: Shop, color: '#059669', bgColor: '#d1fae5' },
+    { key: 'order', label: '本月订单', value: '9,856', icon: ShoppingCart, color: '#d97706', bgColor: '#fffbeb' },
+    { key: 'delivery', label: '本月配送', value: '9,234', icon: Van, color: '#dc2626', bgColor: '#fef2f2' },
     { key: 'amount', label: '本月交易额', value: '¥1,856,320', icon: Money, color: '#9c27b0', bgColor: '#f4f0f9' }
   ])
 
@@ -204,9 +204,9 @@
   ])
 
   const getProgressColor = (percentage: number) => {
-    if (percentage >= 80) return '#07c160'
-    if (percentage >= 50) return '#ff976a'
-    return '#1989fa'
+    if (percentage >= 80) return '#059669'
+    if (percentage >= 50) return '#d97706'
+    return '#10b981'
   }
 
   const handleFilterChange = () => {
@@ -351,13 +351,13 @@
   font-weight: 600;
 
   &.rank-top3 {
-    background: linear-gradient(135deg, #ffd700 0%, #ff976a 100%);
+    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
     color: #fff;
   }
 }
 
 .amount-text {
-  color: #ee0a24;
+  color: #dc2626;
   font-weight: 600;
 }
 

web-admin/src/views/system/supplier-settlement/index.vue

@@ -1132,7 +1132,7 @@
   }
 
   .stat-value.amount {
-    color: #ee0a24;
+    color: #dc2626;
   }
 
   .toolbar {
@@ -1143,7 +1143,7 @@
   }
 
   .amount-text {
-    color: #ee0a24;
+    color: #dc2626;
     font-weight: 600;
   }
 

web-admin/src/views/system/system-config/index.vue

@@ -143,7 +143,7 @@
   color: #303133;
   line-height: 1.4;
   padding-left: 12px;
-  border-left: 3px solid #1989fa;
+  border-left: 3px solid #10b981;
 }
 
 .form {

web-admin/src/views/system/unit/index.vue

@@ -21,9 +21,9 @@
       </el-form>
     </div>
     <div class="toolbar">
-      <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>新增单位</el-button>
+      <el-button class="btn-main" type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>新增单位</el-button>
 
-      <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
+      <el-button class="btn-ghost" type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
         批量删除
       </el-button>
 
@@ -69,12 +69,12 @@
       </el-table-column>
       <el-table-column label="操作" min-width="150" fixed="right" align="center" header-align="center">
         <template #default="{ row }">
-          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+          <el-button class="btn-op-item primary" @click="handleEdit(row)">编辑</el-button>
+          <el-button class="btn-op-item" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <div class="pagination">
+    <div class="pagination list-pager-bar">
       <el-pagination
         :current-page="pagination.page"
         :page-size="pagination.pageSize"
@@ -96,8 +96,8 @@
         <el-form-item label="状态" v-if="isEdit"><el-switch v-model="formData.isActive" /></el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
+        <el-button class="btn-ghost" @click="dialogVisible = false">取消</el-button>
+        <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
   </div>

web-admin/src/views/system/user/detail.vue

@@ -61,7 +61,7 @@
         </div>
         <div class="info-item">
           <div class="info-label">账号状态</div>
-          <div class="info-value" :style="{ color: userData.isActive ? '#07c160' : '#ee0a24' }">
+          <div class="info-value" :style="{ color: userData.isActive ? '#059669' : '#dc2626' }">
             {{ userData.isActive ? '正常' : '已禁用' }}
           </div>
         </div>
@@ -159,7 +159,7 @@
           <div class="stat-label">进行中</div>
         </div>
         <div class="stat-card">
-          <div class="stat-num amount" style="color: #ee0a24;">¥{{ formatAmount(clientStats.pendingAmount) }}</div>
+          <div class="stat-num amount" style="color: #dc2626;">¥{{ formatAmount(clientStats.pendingAmount) }}</div>
           <div class="stat-label">待结算金额(元)</div>
         </div>
       </div>
@@ -184,7 +184,7 @@
         </el-table-column>
         <el-table-column prop="failReason" label="失败原因" min-width="150">
           <template #default="{ row }">
-            <span v-if="row.result === 'fail'" style="color: #ee0a24;">{{ row.failReason }}</span>
+            <span v-if="row.result === 'fail'" style="color: #dc2626;">{{ row.failReason }}</span>
             <span v-else>-</span>
           </template>
         </el-table-column>
@@ -776,7 +776,7 @@ onMounted(() => {
   .stat-num {
     font-size: 28px;
     font-weight: 700;
-    color: #1989fa;
+    color: #059669;
 
     &.amount {
       font-size: 22px;

web-admin/src/views/system/user/modules/user-dialog.vue

@@ -2,10 +2,11 @@
   <ElDialog
     v-model="dialogVisible"
     :title="dialogType === 'add' ? '添加用户' : '编辑用户'"
-    width="30%"
+    width="720px"
+    class="user-dialog"
     align-center
   >
-    <ElForm ref="formRef" :model="formData" :rules="rules" label-width="80px">
+    <ElForm ref="formRef" :model="formData" :rules="rules" label-position="top" class="user-form-grid">
       <ElFormItem label="用户名" prop="username">
         <ElInput v-model="formData.username" placeholder="请输入用户名" />
       </ElFormItem>
@@ -31,8 +32,8 @@
     </ElForm>
     <template #footer>
       <div class="dialog-footer">
-        <ElButton @click="dialogVisible = false">取消</ElButton>
-        <ElButton type="primary" @click="handleSubmit">提交</ElButton>
+        <ElButton class="btn-ghost" @click="dialogVisible = false">取消</ElButton>
+        <ElButton class="btn-main" type="primary" @click="handleSubmit">提交</ElButton>
       </div>
     </template>
   </ElDialog>
@@ -155,3 +156,21 @@
     })
   }
 </script>
+
+<style scoped lang="scss">
+  .user-form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px 20px;
+
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .user-form-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>