Переглянути джерело

feat(admin): 引入企业级设计系统(Ant Design 5 令牌)并应用 flex 撑满布局

- admin-tokens.css: 新增 .admin-page 作用域设计令牌(主色/状态色/圆角/阴影)+Element 组件覆盖(按钮/卡片/表格/标签/对话框/分页/表单)
- OrderManage.vue: 表格改用 .adm-table-wrap 弹性撑满(height=100%),移除 JS 计算的 tableHeight
liaoxg 4 днів тому
батько
коміт
376c28ea46

+ 117 - 1
cfc-web/src/styles/admin-tokens.css

@@ -464,4 +464,120 @@
 
 /* 浮动 */
 .pull-right { float: right; }
-.clearfix::after { content: ""; display: table; clear: both; }
+.clearfix::after { content: ""; display: table; clear: both; }
+
+/* ==== 企业级设计系统(Ant Design 5 规范,对齐 design-tokens.md) ==== */
+/* 作用域:.admin-page 及其后代 —— 覆盖全部 B 端管理页(admin / teacher / 顶层共享页) */
+/* 原则:克制、干净、留白分区、状态色仅承载语义、主色覆盖率 < 5% */
+
+:root {
+  --adm-primary: #1677FF;
+  --adm-primary-hover: #4096FF;
+  --adm-primary-active: #0958D9;
+  --adm-success: #52C41A;
+  --adm-success-text: #389E0D;
+  --adm-warning: #FAAD14;
+  --adm-warning-text: #D48806;
+  --adm-error: #FF4D4F;
+  --adm-error-text: #CF1322;
+  --adm-info: #1677FF;
+  --adm-info-text: #0958D9;
+  --adm-text-88: rgba(0, 0, 0, 0.88);
+  --adm-text-65: rgba(0, 0, 0, 0.65);
+  --adm-text-45: rgba(0, 0, 0, 0.45);
+  --adm-text-25: rgba(0, 0, 0, 0.25);
+  --adm-border-base: #D9D9D9;
+  --adm-border-split: #F0F0F0;
+  --adm-fill: #F5F5F5;
+  --adm-bg-container: #FFFFFF;
+  --adm-bg-header: #FAFAFA;
+  --adm-radius-sm: 2px;
+  --adm-radius-control: 6px;
+  --adm-radius-card: 8px;
+  --adm-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+}
+
+/* 主色按钮统一为 Ant 蓝(覆盖 Element 默认 #409EFF) */
+.admin-page .el-button--primary { background-color: var(--adm-primary); border-color: var(--adm-primary); color: #fff; }
+.admin-page .el-button--primary:hover,
+.admin-page .el-button--primary:focus { background-color: var(--adm-primary-hover); border-color: var(--adm-primary-hover); }
+.admin-page .el-button--primary:active { background-color: var(--adm-primary-active); border-color: var(--adm-primary-active); }
+.admin-page .el-button--primary.is-disabled,
+.admin-page .el-button--primary.is-disabled:hover { background-color: #A0C4FF; border-color: #A0C4FF; color: #fff; }
+
+/* 卡片:1px 描边 + 极轻阴影,替代重投影 */
+.admin-page .el-card { border: 1px solid var(--adm-border-split); border-radius: var(--adm-radius-card); box-shadow: var(--adm-shadow-card); }
+.admin-page .el-card__header { padding: 20px 24px; border-bottom: 1px solid var(--adm-border-split); }
+.admin-page .el-card__body { padding: 24px; }
+
+/* 页面标题区:唯一主操作居右 */
+.admin-page .admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-shrink: 0; }
+.admin-page .admin-page-title { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--adm-text-88); }
+.admin-page .admin-page-subtitle { font-size: 12px; color: var(--adm-text-45); margin-left: 12px; }
+.admin-page .admin-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+
+/* 筛选区:去卡片化,改底部 1px 分割线分区 */
+.admin-page .filter-bar {
+  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px;
+  padding: 0 0 16px; margin-bottom: 16px;
+  background: transparent; border-radius: 0; box-shadow: none;
+  border-bottom: 1px solid var(--adm-border-split);
+}
+
+/* 区块标题:3px 主色竖条 */
+.admin-page .admin-section-title {
+  font-size: 14px; font-weight: 500; color: var(--adm-text-88);
+  padding-left: 8px; border-left: 3px solid var(--adm-primary);
+  margin: 24px 0 12px; line-height: 1.2;
+}
+
+/* 表格:表头浅底、行高舒适、单元格留白 */
+.admin-page .el-table { font-size: 14px; border-radius: var(--adm-radius-card); }
+.admin-page .el-table th { background-color: var(--adm-bg-header) !important; color: var(--adm-text-88); font-weight: 500; height: 46px; padding: 0; }
+.admin-page .el-table td { padding: 12px 0; }
+.admin-page .el-table .cell { padding-left: 16px; padding-right: 16px; }
+.admin-page .el-table--border, .admin-page .el-table--group { border-color: var(--adm-border-split); }
+.admin-page .el-table td, .admin-page .el-table th.is-leaf { border-color: var(--adm-border-split); }
+
+/* 数值列:右对齐 + 等宽数字 */
+.admin-page .el-table .cell-num,
+.admin-page .el-table .is-right .cell { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
+
+/* 状态标签:浅底 + 深字 + 同色描边(语义化,替代纯文字着色) */
+.admin-page .el-tag { border-radius: var(--adm-radius-sm); }
+.admin-page .el-tag--success { background: #F6FFED; border-color: #B7EB8F; color: var(--adm-success-text); }
+.admin-page .el-tag--warning { background: #FFFBE6; border-color: #FFE58F; color: var(--adm-warning-text); }
+.admin-page .el-tag--info { background: #E6F4FF; border-color: #91CAFF; color: var(--adm-info-text); }
+.admin-page .el-tag--danger { background: #FFF1F0; border-color: #FFCCC7; color: var(--adm-error-text); }
+
+/* 标准化状态徽标(自定义 span,替代纯文字着色) */
+.admin-page .adm-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 12px; line-height: 20px; border-radius: var(--adm-radius-sm); white-space: nowrap; }
+.admin-page .adm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.admin-page .adm-status--success { background: #F6FFED; color: var(--adm-success-text); }
+.admin-page .adm-status--info { background: #E6F4FF; color: var(--adm-info-text); }
+.admin-page .adm-status--warning { background: #FFFBE6; color: var(--adm-warning-text); }
+.admin-page .adm-status--error { background: #FFF1F0; color: var(--adm-error-text); }
+.admin-page .adm-status--default { background: var(--adm-fill); color: var(--adm-text-65); }
+
+/* 对话框 */
+.admin-page .el-dialog__header { padding: 16px 24px; border-bottom: 1px solid var(--adm-border-split); }
+.admin-page .el-dialog__title { font-size: 16px; font-weight: 500; color: var(--adm-text-88); }
+.admin-page .el-dialog__body { padding: 24px; }
+.admin-page .el-dialog__footer { padding: 12px 24px; border-top: 1px solid var(--adm-border-split); }
+
+/* 分页 */
+.admin-page .el-pagination { padding: 16px 0 0; text-align: right; font-weight: normal; flex-shrink: 0; }
+
+/* 表单 */
+.admin-page .el-form-item__label { font-size: 14px; color: var(--adm-text-65); font-weight: 500; }
+.admin-page .el-divider__text { font-size: 14px; font-weight: 500; color: var(--adm-text-88); }
+.admin-page .el-divider--horizontal { margin: 24px 0; }
+
+/* 表格容器:弹性撑满(替代 JS 计算 max-height),仅表格自身滚动 */
+.admin-page .adm-table-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.admin-page .adm-table-wrap > .el-table { flex: 1; min-height: 0; height: 100%; }
+
+/* 通用辅助 */
+.admin-page .text-muted { color: var(--adm-text-45); }
+.admin-page .adm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
+.admin-page > .header { flex-shrink: 0; }

+ 2 - 7
cfc-web/src/views/admin/OrderManage.vue

@@ -30,8 +30,8 @@
       </div>
     </div>
 
-    <div class="table-scroll-wrap-lg">
-      <el-table :max-height="tableHeight" :data="list" v-loading="loading" border stripe>
+    <div class="adm-table-wrap">
+      <el-table height="100%" :data="list" v-loading="loading" border stripe>
       <el-table-column prop="orderNo" label="订单号" width="180">
         <template slot="header">
           <span class="sort-header" @click.stop="onSortClick('orderNo', $event)" @dblclick.stop="onSortToggle('orderNo')">订单号<span v-if="sortIndex('orderNo') !== null" class="sort-index" :class="sortClass('orderNo') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('orderNo') }}</span>{{ sortIcon('orderNo') }}</span>
@@ -191,11 +191,6 @@ import { getOrderList, shipOrder, closeOrder, approveRefund, rejectRefund, vendo
 export default {
   mixins: [SortMixin],
   name: 'OrderManage',
-  computed: {
-    tableHeight() {
-      return window.innerHeight - 340
-    }
-  },
   data() {
     return {
       list: [],