提交：完成 Fresh Mint 第六轮结构统一到第十批。

统一多页业务界面的壳层、筛选区、列表节奏、按钮语义与弹窗详情视觉，减少 delivery-demo 与其他系统页的风格差异，便于后续逐页验收校准。

Made-with: Cursor

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

@@ -629,6 +629,13 @@
 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`。本轮保持业务逻辑与复杂弹窗内结构不变，优先消除跨页面按钮体系与分页条样式差异。
+29. **第六轮结构统一（第四批，2026-04-17）**：将 `#/system/region`、`#/system/category`、`#/system/unit`、`#/system/parameter` 进一步对齐 `#/delivery/delivery-demo` 壳层：统一引入 **`page-head + panel + panel-top + filter-block + filter-grid + filter-actions-row + list-body/list-wrap + list-table`** 结构；筛选区改为非 inline 的网格布局并使用 `btn-ghost / btn-main`；列表区统一包裹 `list-body/list-wrap`；移除页面内重复的 `search-bar/toolbar/pagination` 旧壳层样式，交由全局 Fresh Mint 规范接管，实现“按钮一致”升级为“页面骨架一致”。
+30. **第六轮结构统一（第五批，2026-04-17）**：继续对齐 `#/system/review`、`#/system/settlement`、`#/system/invoice` 与 `#/delivery/delivery-demo` 的列表节奏细节：`panel-top` 标题统一补齐 `title-ic` 图标区；筛选区主动作统一为 `搜索`；列表前统一补充 `list-toolbar + list-toolbar-row + list-toolbar-selected + sel-num` 的总量信息带，增强页面信息层级一致性与运营扫描效率。业务流程与弹窗逻辑保持不变。
+31. **第六轮结构统一（第六批，2026-04-17）**：对 `#/system/review`、`#/system/settlement`、`#/system/invoice` 的详情弹窗做视觉统一，形成与列表同语言的卡片化层次：弹窗主体新增 **`detail-hero`**（主标识 + 次信息）与 **`detail-section`**（描述区块容器，薄荷边框/圆角）结构；在不改字段与业务动作的前提下，统一详情首屏信息密度、层次节奏和 Mint 语义背景，减少原生 `el-descriptions border` 的“纯表格感”。
+32. **第六轮结构统一（第七批，2026-04-17）**：将 `detail-hero / detail-section` 从页面级 `scoped` 样式提炼为全局复用样式（`app.scss` 下 `page-container/console-container` 作用域），并在 `review / settlement / invoice` 详情弹窗中切换为统一公共类，移除三页重复定义。后续详情弹窗可直接复用该结构，减少样式漂移与维护成本。
+33. **第六轮结构统一（第八批，2026-04-17）**：继续按 `#/delivery/delivery-demo` 模板推进 `#/system/api-request-log` 与 `#/system/user`：统一为 `page-head + panel + panel-top + filter-block + filter-grid + filter-actions-row + list-toolbar + list-body/list-wrap + list-pager-bar`；操作列链接按钮改为 `btn-op-item`；新增/编辑弹窗 footer 统一 `btn-ghost / btn-main`，并清理页面内 `search-bar/toolbar/pagination` 的重复 scoped 壳层样式。
+34. **第六轮结构统一（第九批，2026-04-17）**：完成 `#/system/statistics` 的旧 `filter-bar/card` 体系替换，整体对齐 `#/delivery/delivery-demo`：新增 `page-head` 与 `panel` 分段结构，筛选区切为 `filter-block + filter-grid + filter-actions-row`（补齐“搜索/重置”动作），运营概览改为统一统计卡网格（`stats-grid`），图表与明细改为 `panel + panel-top + list-body/list-wrap + list-table` 组合，显著降低该页与其他业务页的视觉割裂感。
+35. **第六轮结构统一（第十批，2026-04-17）**：推进 `#/system/product`、`#/system/inquiry`、`#/system/supplier-settlement`、`#/system/client-settlement` 对齐 `#/delivery/delivery-demo`。本批聚焦“高流量复杂页”的外层一致性：统一页头说明（`page-head/page-desc`）、筛选动作文案（“搜索/重置”）、主次按钮语义类（`btn-main/btn-ghost`）、列表操作按钮（`btn-op-item`）、分页条（`list-pager-bar`）与弹窗 footer 按钮语义。`product` 与 `inquiry` 同步补齐 `panel/panel-top/list-toolbar` 骨架；`supplier/client-settlement` 保持双 Tab 与树形明细业务结构不变，仅做 Mint 交互壳层与动作区收口，确保改造不触及结算逻辑。
 
 ---
 

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

@@ -470,6 +470,33 @@ body {
     border-radius: var(--mint-radius);
     box-shadow: var(--mint-shadow);
   }
+
+  .detail-hero {
+    margin-bottom: 14px;
+    padding: 14px 16px;
+    border: 1px solid var(--mint-border);
+    border-radius: var(--mint-radius);
+    background: var(--mint-primary-bg);
+  }
+
+  .detail-hero-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--mint-text);
+  }
+
+  .detail-hero-meta {
+    margin-top: 6px;
+    color: var(--mint-text-muted);
+    font-size: 13px;
+  }
+
+  .detail-section {
+    border: 1px solid var(--mint-border);
+    border-radius: var(--mint-radius);
+    overflow: hidden;
+    margin-bottom: 14px;
+  }
 }
 
 @media (max-width: 1100px) {

web-admin/src/views/system/api-request-log/index.vue

@@ -1,10 +1,25 @@
 <!-- API 请求日志 -->
 <template>
   <div class="page-container">
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
+    <header class="page-head">
+      <h1>接口日志</h1>
+      <p class="page-desc">集中检索 API 请求轨迹，快速定位异常请求与响应。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>
+          <span class="title-ic" aria-hidden="true">
+            <el-icon><Operation /></el-icon>
+          </span>
+          请求列表
+        </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.httpMethod" placeholder="全部" clearable style="width: 100px">
+          <el-select v-model="searchForm.httpMethod" placeholder="全部" clearable>
             <el-option label="全部" value="" />
             <el-option label="GET" value="GET" />
             <el-option label="POST" value="POST" />
@@ -14,21 +29,33 @@
           </el-select>
         </el-form-item>
         <el-form-item label="状态码">
-          <el-input v-model.number="searchForm.statusCode" placeholder="如 200" clearable style="width: 110px" />
+          <el-input v-model.number="searchForm.statusCode" placeholder="如 200" clearable />
         </el-form-item>
         <el-form-item label="路径包含">
-          <el-input v-model="searchForm.pathPrefix" placeholder="/api/..." clearable style="width: 200px" />
+          <el-input v-model="searchForm.pathPrefix" placeholder="/api/..." clearable />
         </el-form-item>
         <el-form-item label="关键词">
-          <el-input v-model="searchForm.keyword" placeholder="路径/用户/内容" clearable style="width: 180px" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
+          <el-input v-model="searchForm.keyword" placeholder="路径/用户/内容" clearable />
         </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>
-    <el-table :data="tableData" v-loading="loading" stripe>
+
+    <div class="list-toolbar">
+      <div class="list-toolbar-row">
+        <div class="list-toolbar-selected">共 <span class="sel-num">{{ pagination.total }}</span> 条请求</div>
+      </div>
+    </div>
+
+    <div class="list-body list-wrap">
+    <el-table class="list-table" :data="tableData" v-loading="loading" stripe>
       <el-table-column prop="httpMethod" label="方法" width="80" />
       <el-table-column prop="path" label="路径" min-width="200" show-overflow-tooltip />
       <el-table-column prop="statusCode" label="状态" width="80" />
@@ -41,11 +68,11 @@
       <el-table-column prop="createAt" label="时间" min-width="170" />
       <el-table-column label="操作" width="100" fixed="right">
         <template #default="{ row }">
-          <el-button type="primary" link @click="openDetail(row)">详情</el-button>
+          <el-button class="btn-op-item primary" @click="openDetail(row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <div class="pagination">
+    <div class="pagination list-pager-bar">
       <el-pagination
         v-model:current-page="pagination.page"
         v-model:page-size="pagination.pageSize"
@@ -56,6 +83,7 @@
         @current-change="loadData"
       />
     </div>
+    </div>
 
     <el-dialog v-model="detailVisible" title="请求详情" width="720px" destroy-on-close>
       <el-descriptions v-if="detailRow" :column="1" border size="small">
@@ -75,10 +103,12 @@
         </el-descriptions-item>
       </el-descriptions>
     </el-dialog>
+    </section>
   </div>
 </template>
 <script setup lang="ts">
   import { ref, reactive, onMounted } from 'vue'
+  import { Operation } from '@element-plus/icons-vue'
   import { fetchApiRequestLogList } from '@/api/business'
   defineOptions({ name: 'ApiRequestLog' })
   const searchForm = reactive({
@@ -129,20 +159,6 @@
   onMounted(() => loadData())
 </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;
-  }
   .body-pre {
     margin: 0;
     white-space: pre-wrap;

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

@@ -2,8 +2,19 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <template>
   <div class="page-container">
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
+    <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>
@@ -14,14 +25,19 @@
             <el-option label="禁用" :value="false" />
           </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>
+        </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="toolbar">
+    <div class="list-toolbar">
+      <div class="list-toolbar-row">
       <el-button class="btn-main" type="primary" @click="handleAdd">
         <el-icon><Plus /></el-icon>
         新增分类
@@ -59,9 +75,11 @@
       >
         批量导入
       </ArtExcelImport>
+      </div>
     </div>
 
-    <el-table
+    <div class="list-body list-wrap">
+    <el-table class="list-table"
       :data="tableData"
       v-loading="loading"
       stripe
@@ -121,6 +139,7 @@
     <div class="pagination list-pager-bar">
       <span class="total-count">共 {{ pagination.total }} 条数据</span>
     </div>
+    </div>
 
     <!-- 新增/编辑弹窗 -->
     <el-dialog
@@ -362,6 +381,7 @@
         <el-button type="primary" @click="confirmSelectParameters">确定</el-button>
       </template>
     </el-dialog>
+    </section>
   </div>
 </template>
 
@@ -1166,16 +1186,6 @@
 </script>
 
 <style lang="scss" scoped>
-.page-container { padding: 20px; }
-.search-bar { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 16px; }
-.toolbar {
-  margin-bottom: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-}
-.pagination { display: flex; justify-content: flex-end; margin-top: 20px; }
 .category-image-row { display: flex; gap: 12px; align-items: center; }
 .category-image-placeholder {
   width: 80px; height: 80px; border-radius: 8px;

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

@@ -1,5 +1,11 @@
 <template>
   <div class="page-container">
+    <div class="page-head">
+      <div>
+        <h2>客户结算</h2>
+        <p>按区域管理待结算订单与结算单记录</p>
+      </div>
+    </div>
     <div class="region-tabs">
       <div class="tab-button-group">
         <el-button
@@ -52,8 +58,8 @@
               />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="handleSearch">查询</el-button>
-              <el-button @click="handleReset">重置</el-button>
+              <el-button class="btn-main" @click="handleSearch">搜索</el-button>
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
             </el-form-item>
           </el-form>
         </el-card>
@@ -79,8 +85,8 @@
 
         <el-card shadow="never" class="list-table-card">
           <div class="toolbar">
-            <el-button @click="handleSelectAllFiltered">全选可结算订单（已完结·跨分页）</el-button>
-            <el-button type="success" :disabled="!selectedCount" @click="openSettlementDialog"
+            <el-button class="btn-ghost" @click="handleSelectAllFiltered">全选可结算订单（已完结·跨分页）</el-button>
+            <el-button class="btn-main" :disabled="!selectedCount" @click="openSettlementDialog"
               >结算</el-button
             >
             <el-tag v-if="selectionMode === 'allFiltered'" type="warning"
@@ -227,7 +233,7 @@
               </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"
@@ -289,8 +295,8 @@
               />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="handleSheetSearch">查询</el-button>
-              <el-button @click="handleSheetReset">重置</el-button>
+              <el-button class="btn-main" @click="handleSheetSearch">搜索</el-button>
+              <el-button class="btn-ghost" @click="handleSheetReset">重置</el-button>
             </el-form-item>
           </el-form>
         </el-card>
@@ -460,12 +466,12 @@
             <el-table-column prop="createName" label="操作人" width="100" />
             <el-table-column label="操作" width="140" fixed="right">
               <template #default="{ row }">
-                <el-button type="primary" link @click="openSheetDetail(row.id)">详情</el-button>
-                <el-button type="warning" link @click="openSheetEdit(row)">编辑</el-button>
+                <el-button class="btn-op-item primary" link @click="openSheetDetail(row.id)">详情</el-button>
+                <el-button class="btn-op-item" link @click="openSheetEdit(row)">编辑</el-button>
               </template>
             </el-table-column>
           </el-table>
-          <div class="pagination">
+          <div class="pagination list-pager-bar">
             <el-pagination
               :current-page="sheetPagination.page"
               :page-size="sheetPagination.pageSize"
@@ -515,8 +521,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="settlementDialogVisible = false">取消</el-button>
-        <el-button type="success" :loading="submitLoading" @click="confirmSettlementSubmit"
+        <el-button class="btn-ghost" @click="settlementDialogVisible = false">取消</el-button>
+        <el-button class="btn-main" :loading="submitLoading" @click="confirmSettlementSubmit"
           >确认结算</el-button
         >
       </template>
@@ -555,8 +561,8 @@
         :business-id="sheetEditId || 'temp'"
       />
       <template #footer>
-        <el-button @click="sheetEditVisible = false">取消</el-button>
-        <el-button type="primary" :loading="sheetEditSaving" @click="saveSheetEdit">保存</el-button>
+        <el-button class="btn-ghost" @click="sheetEditVisible = false">取消</el-button>
+        <el-button class="btn-main" :loading="sheetEditSaving" @click="saveSheetEdit">保存</el-button>
       </template>
     </el-dialog>
 

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

@@ -1,9 +1,21 @@
 <!-- 询价单管理页面 -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
+    <div class="page-head">
+      <div>
+        <h2>询价管理</h2>
+        <p>统一发布询价、跟踪报价与状态流转</p>
+      </div>
+    </div>
+    <div class="panel">
+      <div class="panel-top">
+        <div class="panel-title">
+          <el-icon class="title-ic"><Operation /></el-icon>
+          <span>筛选条件</span>
+        </div>
+      </div>
+      <div class="filter-block">
+      <el-form :inline="true" :model="searchForm" class="filter-grid">
         <el-form-item label="关键词">
           <el-input v-model="searchForm.keyword" placeholder="询价单标题" clearable />
         </el-form-item>
@@ -15,23 +27,35 @@
             <el-option label="已关闭" value="closed" />
           </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 class="filter-actions-row">
+          <el-button class="btn-main" @click="handleSearch">搜索</el-button>
+          <el-button class="btn-ghost" @click="handleReset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
+    </div>
 
-    <!-- 操作栏 -->
-    <div class="toolbar">
-      <el-button type="primary" @click="handleCreate">
+    <div class="panel">
+      <div class="panel-top">
+        <div class="panel-title">
+          <el-icon class="title-ic"><Operation /></el-icon>
+          <span>询价列表</span>
+        </div>
+      </div>
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <div class="list-toolbar-selected">共 <span class="sel-num">{{ pagination.total }}</span> 条</div>
+          <el-button class="btn-main" @click="handleCreate">
         <el-icon><Plus /></el-icon>
         发布询价
       </el-button>
+        </div>
+      </div>
     </div>
 
-    <!-- 数据表格 -->
-    <el-table :data="tableData" v-loading="loading" stripe>
+    <div class="panel">
+    <div class="list-body list-wrap">
+    <el-table class="list-table" :data="tableData" v-loading="loading" stripe>
       <el-table-column prop="title" label="询价单标题" min-width="200" show-overflow-tooltip />
       <el-table-column prop="regionName" label="区域" min-width="120" />
       <el-table-column prop="productCount" label="商品数量" min-width="100" align="center" />
@@ -52,16 +76,16 @@
       <el-table-column prop="createAt" label="创建时间" min-width="180" />
       <el-table-column label="操作" min-width="220" fixed="right">
         <template #default="{ row }">
-          <el-button type="primary" link @click="handleView(row)">查看</el-button>
-          <el-button v-if="row.status === 'draft'" type="primary" link @click="handleEdit(row)">编辑</el-button>
-          <el-button v-if="row.status === 'draft'" type="success" link @click="handlePublish(row)">发布</el-button>
-          <el-button v-if="row.status === 'published'" type="warning" link @click="handleClose(row)">关闭</el-button>
+          <el-button class="btn-op-item primary" link @click="handleView(row)">查看</el-button>
+          <el-button v-if="row.status === 'draft'" class="btn-op-item" link @click="handleEdit(row)">编辑</el-button>
+          <el-button v-if="row.status === 'draft'" class="btn-op-item" link @click="handlePublish(row)">发布</el-button>
+          <el-button v-if="row.status === 'published'" class="btn-op-item danger" link @click="handleClose(row)">关闭</el-button>
         </template>
       </el-table-column>
     </el-table>
+    </div>
 
-    <!-- 分页 -->
-    <div class="pagination">
+    <div class="pagination list-pager-bar">
       <el-pagination
         v-model:current-page="pagination.page"
         v-model:page-size="pagination.pageSize"
@@ -72,6 +96,7 @@
         @current-change="loadData"
       />
     </div>
+    </div>
 
     <!-- 新增/编辑询价单弹窗 -->
     <el-dialog v-model="formVisible" :title="formTitle" width="700px" @close="handleFormClose">
@@ -99,13 +124,18 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="formVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmForm" :loading="submitLoading">确定</el-button>
+        <el-button class="btn-ghost" @click="formVisible = false">取消</el-button>
+        <el-button class="btn-main" @click="confirmForm" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
 
     <!-- 查看详情弹窗 -->
     <el-dialog v-model="viewVisible" title="询价单详情" width="1000px" destroy-on-close>
+      <div class="detail-hero">
+        <div class="detail-hero-title">{{ viewData.title || '-' }}</div>
+        <div class="detail-hero-meta">询价单号：{{ viewData.inquiryNo || '-' }} ｜ 区域：{{ viewData.regionName || '-' }}</div>
+      </div>
+      <div class="detail-section">
       <el-descriptions :column="2" border class="mb-4">
         <el-descriptions-item label="询价单号">{{ viewData.inquiryNo || '-' }}</el-descriptions-item>
         <el-descriptions-item label="状态">
@@ -124,6 +154,7 @@
           <span class="remark-text">{{ viewData.remark }}</span>
         </el-descriptions-item>
       </el-descriptions>
+      </div>
 
       <!-- 询价统计 -->
       <div class="quote-summary">
@@ -199,7 +230,7 @@
   import { ref, reactive, onMounted, watch } from 'vue'
   import { ElMessage } from 'element-plus'
   import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
-  import { Plus } from '@element-plus/icons-vue'
+  import { Plus, Operation } from '@element-plus/icons-vue'
   import { fetchInquiryList, fetchInquiryDetail, fetchCreateInquiry, fetchPublishInquiry, fetchCloseInquiry } from '@/api/business'
   import { fetchActiveRegions, fetchProductList } from '@/api/admin'
   import { fetchAllPagedRecords } from '@/utils/fetch-paged-list'
@@ -442,23 +473,6 @@
   padding: 20px;
 }
 
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.toolbar {
-  margin-bottom: 16px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .quotation-count {
   color: #059669;
   font-weight: 600;

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

@@ -8,7 +8,12 @@
 
     <section class="panel">
       <div class="panel-top">
-        <h2>发票列表</h2>
+        <h2>
+          <span class="title-ic" aria-hidden="true">
+            <el-icon><Operation /></el-icon>
+          </span>
+          发票列表
+        </h2>
       </div>
 
       <div class="filter-block">
@@ -46,6 +51,14 @@
         </el-form>
       </div>
 
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <div class="list-toolbar-selected">
+            共 <span class="sel-num">{{ pagination.total }}</span> 条发票
+          </div>
+        </div>
+      </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" />
@@ -93,7 +106,12 @@
     </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="发票详情" width="700px" class="invoice-dialog">
+    <el-dialog v-model="viewVisible" title="发票详情" width="760px" class="invoice-dialog">
+      <div class="detail-hero">
+        <div class="detail-hero-title">{{ viewData.invoiceNo || '-' }}</div>
+        <div class="detail-hero-meta">客户：{{ viewData.clientName || '-' }} ｜ 订单：{{ viewData.orderNo || '-' }}</div>
+      </div>
+      <div class="detail-section">
       <el-descriptions :column="2" border>
         <el-descriptions-item label="发票号">{{ viewData.invoiceNo }}</el-descriptions-item>
         <el-descriptions-item label="订单编号">{{ viewData.orderNo }}</el-descriptions-item>
@@ -120,6 +138,7 @@
         <el-descriptions-item label="备注" :span="2">{{ viewData.remark || '-' }}</el-descriptions-item>
         <el-descriptions-item label="创建时间">{{ viewData.createAt }}</el-descriptions-item>
       </el-descriptions>
+      </div>
       <template #footer>
         <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>
@@ -160,6 +179,7 @@
   import { ref, reactive, onMounted } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
+  import { Operation } from '@element-plus/icons-vue'
   import { fetchInvoiceList, fetchInvoiceDetail, fetchIssueInvoice, fetchVoidInvoice, fetchDownloadInvoice } from '@/api/business'
 
   defineOptions({ name: 'InvoiceManagement' })

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

@@ -1,9 +1,19 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm" class="search-form">
+    <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 @keyup.enter="handleSearch" />
         </el-form-item>
@@ -14,15 +24,20 @@
             <el-option label="禁用" :value="0" />
           </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>
+        </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="toolbar">
+    <div class="list-toolbar">
+      <div class="list-toolbar-row">
       <el-button class="btn-main" type="primary" @click="handleAdd">
         <el-icon><Plus /></el-icon>
         新增参数
@@ -57,10 +72,12 @@
       <ArtExcelImport @import-success="handleParameterImportSuccess" @import-error="handleExcelImportError">
         批量导入
       </ArtExcelImport>
+      </div>
     </div>
 
     <!-- 数据表格 -->
-    <el-table :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleSelectionChange">
+    <div class="list-body list-wrap">
+    <el-table class="list-table" :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" />
       <el-table-column prop="name" label="参数名称" min-width="120" />
       <el-table-column prop="code" label="参数编码" min-width="120" />
@@ -123,6 +140,7 @@
         @current-change="handlePageChange"
       />
     </div>
+    </div>
 
     <!-- 新增/编辑弹窗 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" @close="handleDialogClose">
@@ -206,6 +224,7 @@
         <el-descriptions-item label="备注" :span="2">{{ viewData.remark || '-' }}</el-descriptions-item>
       </el-descriptions>
     </el-dialog>
+    </section>
   </div>
 </template>
 
@@ -765,37 +784,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-
-  .search-form {
-    :deep(.el-form-item) {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.toolbar {
-  margin-bottom: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .text-gray {
   color: #909399;
 }

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

@@ -2,9 +2,21 @@
 <!-- eslint-disable prettier/prettier -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm" class="search-form">
+    <div class="page-head">
+      <div>
+        <h2>商品管理</h2>
+        <p>统一商品资料、参数和上下架状态</p>
+      </div>
+    </div>
+    <div class="panel">
+      <div class="panel-top">
+        <div class="panel-title">
+          <el-icon class="title-ic"><Operation /></el-icon>
+          <span>筛选条件</span>
+        </div>
+      </div>
+      <div class="filter-block">
+        <el-form :inline="true" :model="searchForm" class="search-form filter-grid">
         <el-form-item label="关键词">
           <el-input v-model="searchForm.keyword" placeholder="商品名称/SKU编码" clearable />
         </el-form-item>
@@ -31,21 +43,33 @@
             <el-option label="禁用" :value="false" />
           </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 class="filter-actions-row">
+          <el-button class="btn-main" @click="handleSearch">搜索</el-button>
+          <el-button class="btn-ghost" @click="handleReset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
+    </div>
 
-    <!-- 操作栏 -->
-    <div class="toolbar">
-      <el-button type="primary" @click="handleAdd">
+    <div class="panel">
+      <div class="panel-top">
+        <div class="panel-title">
+          <el-icon class="title-ic"><Operation /></el-icon>
+          <span>商品列表</span>
+        </div>
+      </div>
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <div class="list-toolbar-selected">共 <span class="sel-num">{{ pagination.total }}</span> 条</div>
+        </div>
+      </div>
+      <div class="list-toolbar">
+        <el-button class="btn-main" @click="handleAdd">
         <el-icon><Plus /></el-icon>
         新增商品
       </el-button>
 
-      <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
+      <el-button class="btn-ghost" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
         批量删除
       </el-button>
 
@@ -61,8 +85,8 @@
       </ArtExcelExport>
     </div>
 
-    <!-- 数据表格 -->
-    <el-table :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleProductTableSelectionChange">
+    <div class="list-body list-wrap">
+    <el-table class="list-table" :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleProductTableSelectionChange">
       <el-table-column type="selection" width="55" />
       <el-table-column prop="imageUrl" label="图片" width="80">
         <template #default="{ row }">
@@ -89,16 +113,16 @@
       <el-table-column prop="createAt" label="创建时间" min-width="160" />
       <el-table-column label="操作" min-width="200" fixed="right">
         <template #default="{ row }">
-          <el-button type="primary" link @click="handleView(row)">查看</el-button>
-          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-          <el-button type="primary" link @click="handleCopy(row)">复制</el-button>
-          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+          <el-button class="btn-op-item primary" link @click="handleView(row)">查看</el-button>
+          <el-button class="btn-op-item" link @click="handleEdit(row)">编辑</el-button>
+          <el-button class="btn-op-item" link @click="handleCopy(row)">复制</el-button>
+          <el-button class="btn-op-item danger" link @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
+    </div>
 
-    <!-- 分页 -->
-    <div class="pagination">
+    <div class="pagination list-pager-bar">
       <el-pagination
         :current-page="pagination.page"
         :page-size="pagination.pageSize"
@@ -111,6 +135,7 @@
         @current-change="loadData"
       />
     </div>
+    </div>
 
     <!-- 新增/编辑/查看弹窗（同一套表单结构） -->
     <el-dialog
@@ -610,8 +635,8 @@
       />
 
       <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" @click="handleSubmit" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
 
@@ -666,8 +691,8 @@
         </div>
       </div>
       <template #footer>
-        <el-button @click="selectParameterVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmSelectParameters">确定</el-button>
+        <el-button class="btn-ghost" @click="selectParameterVisible = false">取消</el-button>
+        <el-button class="btn-main" @click="confirmSelectParameters">确定</el-button>
       </template>
     </el-dialog>
 
@@ -713,7 +738,8 @@
     Setting,
     Search,
     Rank,
-    Loading
+    Loading,
+    Operation
   } from '@element-plus/icons-vue'
   import { VueDraggable as draggable } from 'vue-draggable-plus'
   import ProductViewDialog from '@/components/business/product-view-dialog/index.vue'
@@ -2152,27 +2178,12 @@
   padding: 20px;
 }
 
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-
-  .search-form {
-    :deep(.el-form-item) {
-      margin-bottom: 0;
-    }
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 0;
   }
 }
 
-.toolbar {
-  margin-bottom: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-}
-
 .pagination {
   display: flex;
   justify-content: flex-end;

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

@@ -2,9 +2,19 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm" class="search-form">
+    <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>
@@ -15,15 +25,20 @@
             <el-option label="禁用" :value="false" />
           </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>
+          <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="toolbar">
+    <div class="list-toolbar">
+      <div class="list-toolbar-row">
       <el-button class="btn-main" type="primary" @click="handleAdd">
         <el-icon><Plus /></el-icon>
         新增区域
@@ -58,10 +73,12 @@
       <ArtExcelImport @import-success="handleRegionImportSuccess" @import-error="handleExcelImportError">
         批量导入
       </ArtExcelImport>
+      </div>
     </div>
 
     <!-- 数据表格 -->
-    <el-table
+    <div class="list-body list-wrap">
+    <el-table class="list-table"
       :data="tableData"
       v-loading="loading"
       stripe
@@ -118,6 +135,7 @@
         @current-change="handlePageChange"
       />
     </div>
+    </div>
 
     <!-- 新增/编辑弹窗 -->
     <el-dialog
@@ -178,6 +196,7 @@
         <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
+    </section>
   </div>
 </template>
 
@@ -597,31 +616,6 @@
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.toolbar {
-  margin-bottom: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .dialog-input-number {
   width: 200px;
   vertical-align: middle;

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

@@ -7,7 +7,12 @@
 
     <section class="panel">
       <div class="panel-top">
-        <h2>评价列表</h2>
+        <h2>
+          <span class="title-ic" aria-hidden="true">
+            <el-icon><Operation /></el-icon>
+          </span>
+          评价列表
+        </h2>
       </div>
 
       <div class="filter-block">
@@ -38,12 +43,20 @@
             <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>
+              <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
             </div>
           </div>
         </el-form>
       </div>
 
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <div class="list-toolbar-selected">
+            共 <span class="sel-num">{{ pagination.total }}</span> 条评价
+          </div>
+        </div>
+      </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 />
@@ -100,8 +113,13 @@
     </section>
 
     <!-- 详情弹窗 -->
-    <el-dialog v-model="detailVisible" title="评价详情" width="700px" class="review-dialog">
-      <el-descriptions :column="2" border v-if="currentReview">
+    <el-dialog v-model="detailVisible" title="评价详情" width="760px" class="review-dialog">
+      <div class="detail-hero" v-if="currentReview">
+        <div class="detail-hero-title">商品 {{ currentReview.productId || '-' }}</div>
+        <div class="detail-hero-meta">用户：{{ currentReview.userName || '-' }} ｜ 评价时间：{{ currentReview.createAt || '-' }}</div>
+      </div>
+      <div class="detail-section" v-if="currentReview">
+      <el-descriptions :column="2" border>
         <el-descriptions-item label="商品ID">{{ currentReview.productId }}</el-descriptions-item>
         <el-descriptions-item label="用户">{{ currentReview.userName }}</el-descriptions-item>
         <el-descriptions-item label="评分" :span="2">
@@ -121,6 +139,7 @@
           {{ currentReview.rejectReason }}
         </el-descriptions-item>
       </el-descriptions>
+      </div>
 
       <!-- 媒体展示 -->
       <div v-if="currentReview?.mediaList?.length" class="media-section">
@@ -189,7 +208,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, FormInstance } from 'element-plus'
-import { Picture } from '@element-plus/icons-vue'
+import { Operation, Picture } from '@element-plus/icons-vue'
 import {
   fetchReviewList,
   fetchApproveReview,

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

@@ -8,7 +8,12 @@
 
     <section class="panel">
       <div class="panel-top">
-        <h2>结算列表</h2>
+        <h2>
+          <span class="title-ic" aria-hidden="true">
+            <el-icon><Operation /></el-icon>
+          </span>
+          结算列表
+        </h2>
       </div>
 
       <div class="filter-block">
@@ -32,6 +37,14 @@
         </el-form>
       </div>
 
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <div class="list-toolbar-selected">
+            共 <span class="sel-num">{{ pagination.total }}</span> 条结算单
+          </div>
+        </div>
+      </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" />
@@ -79,7 +92,12 @@
     </section>
 
     <!-- 查看详情弹窗 -->
-    <el-dialog v-model="viewVisible" title="结算详情" width="700px" destroy-on-close class="settlement-dialog">
+    <el-dialog v-model="viewVisible" title="结算详情" width="760px" destroy-on-close class="settlement-dialog">
+      <div class="detail-hero">
+        <div class="detail-hero-title">{{ viewData.settlementNo || '-' }}</div>
+        <div class="detail-hero-meta">订单：{{ viewData.orderNo || '-' }} ｜ 客户：{{ viewData.clientName || '-' }}</div>
+      </div>
+      <div class="detail-section">
       <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>
@@ -100,6 +118,7 @@
         <el-descriptions-item v-if="viewData.confirmTime" label="确认时间">{{ viewData.confirmTime }}</el-descriptions-item>
         <el-descriptions-item v-if="viewData.confirmedByName" label="确认人">{{ viewData.confirmedByName }}</el-descriptions-item>
       </el-descriptions>
+      </div>
 
       <template #footer>
         <el-button class="btn-ghost" @click="viewVisible = false">关闭</el-button>
@@ -112,6 +131,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Operation } from '@element-plus/icons-vue'
 import { fetchSettlementList, fetchConfirmSettlement } from '@/api/business'
 
 defineOptions({ name: 'SettlementManagement' })

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

@@ -1,26 +1,23 @@
 <!-- 数据统计页面 -->
 <template>
   <div class="page-container">
-    <!-- 统计卡片 -->
-    <el-row :gutter="16" class="stats-row">
-      <el-col :xs="12" :sm="8" :md="4" v-for="stat in statsData" :key="stat.key">
-        <div class="stats-card" :style="{ borderLeftColor: stat.color }">
-          <div class="stats-info">
-            <div class="stats-num" :style="{ color: stat.color }">{{ stat.value }}</div>
-            <div class="stats-label">{{ stat.label }}</div>
-          </div>
-          <div class="stats-icon" :style="{ backgroundColor: stat.bgColor }">
-            <el-icon :size="24" :style="{ color: stat.color }">
-              <component :is="stat.icon" />
-            </el-icon>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <!-- 筛选条件 -->
-    <div class="filter-bar">
-      <el-form :inline="true" :model="filterForm">
+    <header class="page-head">
+      <h1>数据统计</h1>
+      <p class="page-desc">统一查看订单趋势、区域分布、商品排行与运营明细。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>
+          <span class="title-ic" aria-hidden="true">
+            <el-icon><Operation /></el-icon>
+          </span>
+          统计筛选
+        </h2>
+      </div>
+      <div class="filter-block">
+      <el-form :model="filterForm" class="filter-form" @submit.prevent>
+        <div class="filter-grid">
         <el-form-item label="时间范围">
           <el-date-picker
             v-model="filterForm.dateRange"
@@ -29,7 +26,6 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             value-format="YYYY-MM-DD"
-            @change="handleFilterChange"
           />
         </el-form-item>
         <el-form-item label="区域">
@@ -37,74 +33,92 @@
             v-model="filterForm.regionId"
             placeholder="请选择区域"
             clearable
-            @change="handleFilterChange"
             @visible-change="(open) => open && loadRegions()"
           >
             <el-option v-for="r in regionList" :key="r.id" :label="r.name" :value="r.id" />
           </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>
+    </section>
 
-    <!-- 图表区域 -->
-    <el-row :gutter="16" class="chart-row">
-      <el-col :span="24">
-        <div class="card">
-          <div class="card-header">
-            <span class="card-title">订单趋势</span>
+    <section class="panel panel-block">
+      <div class="panel-top">
+        <h2>运营概览</h2>
+      </div>
+      <div class="stats-grid">
+        <div class="stat-item" v-for="stat in statsData" :key="stat.key">
+          <div class="stat-main">
+            <div class="stat-num" :style="{ color: stat.color }">{{ stat.value }}</div>
+            <div class="stat-label">{{ stat.label }}</div>
+          </div>
+          <div class="stat-icon" :style="{ backgroundColor: stat.bgColor }">
+            <el-icon :size="22" :style="{ color: stat.color }">
+              <component :is="stat.icon" />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="panel panel-block">
+      <div class="panel-top">
+        <h2>订单趋势</h2>
+        <div class="tools">
             <el-radio-group v-model="orderTrendType" size="small" @change="handleTrendTypeChange">
               <el-radio-button label="day">按日</el-radio-button>
               <el-radio-button label="week">按周</el-radio-button>
               <el-radio-button label="month">按月</el-radio-button>
             </el-radio-group>
-          </div>
-          <div class="chart-container" ref="orderTrendChart">
-            <div class="chart-placeholder">
-              <el-icon :size="48" color="#c0c4cc"><DataLine /></el-icon>
-              <p>订单趋势图表</p>
-            </div>
-          </div>
         </div>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="16" class="chart-row">
-      <el-col :xs="24" :sm="12">
-        <div class="card">
-          <div class="card-header">
-            <span class="card-title">区域订单分布</span>
-          </div>
+      </div>
+      <div class="chart-container" ref="orderTrendChart">
+        <div class="chart-placeholder">
+          <el-icon :size="48" color="#c0c4cc"><DataLine /></el-icon>
+          <p>订单趋势图表</p>
+        </div>
+      </div>
+    </section>
+
+    <div class="chart-split-grid">
+      <section class="panel panel-block">
+        <div class="panel-top">
+          <h2>区域订单分布</h2>
+        </div>
           <div class="chart-container" ref="regionChart">
             <div class="chart-placeholder">
               <el-icon :size="48" color="#c0c4cc"><PieChart /></el-icon>
               <p>区域订单分布图表</p>
             </div>
           </div>
+      </section>
+      <section class="panel panel-block">
+        <div class="panel-top">
+          <h2>订单状态分布</h2>
         </div>
-      </el-col>
-      <el-col :xs="24" :sm="12">
-        <div class="card">
-          <div class="card-header">
-            <span class="card-title">订单状态分布</span>
-          </div>
           <div class="chart-container" ref="statusChart">
             <div class="chart-placeholder">
               <el-icon :size="48" color="#c0c4cc"><Histogram /></el-icon>
               <p>订单状态分布图表</p>
             </div>
           </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="16" class="chart-row">
-      <el-col :span="24">
-        <div class="card">
-          <div class="card-header">
-            <span class="card-title">商品销量排行 TOP10</span>
-          </div>
-          <div class="rank-list">
-            <el-table :data="productRank" stripe size="small">
+      </section>
+    </div>
+
+    <section class="panel panel-block">
+      <div class="panel-top">
+        <h2>商品销量排行 TOP10</h2>
+      </div>
+      <div class="list-body list-wrap">
+        <el-table :data="productRank" stripe size="small" class="list-table">
               <el-table-column prop="rank" label="排名" min-width="80" align="center">
                 <template #default="{ $index }">
                   <span class="rank-badge" :class="{ 'rank-top3': $index < 3 }">{{ $index + 1 }}</span>
@@ -125,22 +139,23 @@
                   <el-progress :percentage="row.percentage" :color="getProgressColor(row.percentage)" />
                 </template>
               </el-table-column>
-            </el-table>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
+        </el-table>
+      </div>
+    </section>
 
     <!-- 运营数据表格 -->
-    <div class="data-table card">
-      <div class="card-header">
-        <span class="card-title">运营数据明细</span>
-        <el-button type="primary" size="small" @click="handleExport">
+    <section class="panel panel-block">
+      <div class="panel-top">
+        <h2>运营数据明细</h2>
+        <div class="tools">
+        <el-button class="btn-main" type="primary" @click="handleExport">
           <el-icon><Download /></el-icon>
           导出数据
         </el-button>
+        </div>
       </div>
-      <el-table :data="operationData" stripe>
+      <div class="list-body list-wrap">
+      <el-table :data="operationData" stripe class="list-table">
         <el-table-column prop="date" label="日期" min-width="120" />
         <el-table-column prop="orderCount" label="订单数" min-width="100" align="center" />
         <el-table-column prop="orderAmount" label="订单金额(元)" min-width="120" align="right">
@@ -160,14 +175,15 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref, reactive, onMounted } from 'vue'
   import { ElMessage } from 'element-plus'
-  import { UserFilled, Shop, ShoppingCart, Van, Money, DataLine, PieChart, Histogram, Download } from '@element-plus/icons-vue'
+  import { UserFilled, Shop, ShoppingCart, Van, Money, DataLine, PieChart, Histogram, Download, Operation } from '@element-plus/icons-vue'
   import { fetchActiveRegions } from '@/api/admin'
 
   defineOptions({ name: 'Statistics' })
@@ -213,6 +229,16 @@
     loadStatistics()
   }
 
+  const handleSearch = () => {
+    loadStatistics()
+  }
+
+  const handleReset = () => {
+    filterForm.dateRange = []
+    filterForm.regionId = ''
+    loadStatistics()
+  }
+
   const handleTrendTypeChange = () => {
     loadStatistics()
   }
@@ -241,83 +267,59 @@
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-  background: #f5f7fa;
+.panel-block {
+  margin-top: 16px;
 }
 
-.stats-row {
-  margin-bottom: 16px;
+.stats-grid {
+  padding: 14px 16px 16px;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
 }
 
-.stats-card {
+.stat-item {
+  border: 1px solid var(--mint-border, #d9e8e2);
+  border-radius: 10px;
   background: #fff;
-  border-radius: 12px;
-  padding: 20px;
+  padding: 14px;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid;
+  align-items: center;
 }
 
-.stats-info {
+.stat-main {
   flex: 1;
 }
 
-.stats-num {
-  font-size: 24px;
+.stat-num {
+  font-size: 22px;
   font-weight: 700;
   margin-bottom: 4px;
 }
 
-.stats-label {
+.stat-label {
   font-size: 13px;
   color: #909399;
 }
 
-.stats-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+.stat-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.filter-bar {
-  background: #fff;
-  padding: 16px 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
-.chart-row {
-  margin-bottom: 16px;
-}
-
-.card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  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;
-}
-
-.card-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
+.chart-split-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
 }
 
 .chart-container {
+  padding: 0 16px 16px;
   min-height: 300px;
   display: flex;
   align-items: center;
@@ -334,10 +336,6 @@
   }
 }
 
-.rank-list {
-  padding: 0 8px;
-}
-
 .rank-badge {
   display: inline-block;
   width: 24px;
@@ -365,7 +363,21 @@
   color: #909399;
 }
 
-.data-table {
-  margin-top: 16px;
+@media (max-width: 1200px) {
+  .stats-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .chart-split-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 </style>

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

@@ -1,5 +1,11 @@
 <template>
   <div class="page-container">
+    <div class="page-head">
+      <div>
+        <h2>供应商结算</h2>
+        <p>按区域管理待结算订单与结算单记录</p>
+      </div>
+    </div>
     <div class="region-tabs">
       <div class="tab-button-group">
         <el-button
@@ -52,8 +58,8 @@
               />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="handleSearch">查询</el-button>
-              <el-button @click="handleReset">重置</el-button>
+              <el-button class="btn-main" @click="handleSearch">搜索</el-button>
+              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
             </el-form-item>
           </el-form>
         </el-card>
@@ -79,8 +85,8 @@
 
         <el-card shadow="never" class="list-table-card">
           <div class="toolbar">
-            <el-button @click="handleSelectAllFiltered">全选可结算订单（已完结·跨分页）</el-button>
-            <el-button type="success" :disabled="!selectedCount" @click="openSettlementDialog"
+            <el-button class="btn-ghost" @click="handleSelectAllFiltered">全选可结算订单（已完结·跨分页）</el-button>
+            <el-button class="btn-main" :disabled="!selectedCount" @click="openSettlementDialog"
               >结算</el-button
             >
             <el-tag v-if="selectionMode === 'allFiltered'" type="warning"
@@ -227,7 +233,7 @@
               </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"
@@ -289,8 +295,8 @@
               />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="handleSheetSearch">查询</el-button>
-              <el-button @click="handleSheetReset">重置</el-button>
+              <el-button class="btn-main" @click="handleSheetSearch">搜索</el-button>
+              <el-button class="btn-ghost" @click="handleSheetReset">重置</el-button>
             </el-form-item>
           </el-form>
         </el-card>
@@ -460,12 +466,12 @@
             <el-table-column prop="createName" label="操作人" width="100" />
             <el-table-column label="操作" width="140" fixed="right">
               <template #default="{ row }">
-                <el-button type="primary" link @click="openSheetDetail(row.id)">详情</el-button>
-                <el-button type="warning" link @click="openSheetEdit(row)">编辑</el-button>
+                <el-button class="btn-op-item primary" link @click="openSheetDetail(row.id)">详情</el-button>
+                <el-button class="btn-op-item" link @click="openSheetEdit(row)">编辑</el-button>
               </template>
             </el-table-column>
           </el-table>
-          <div class="pagination">
+          <div class="pagination list-pager-bar">
             <el-pagination
               :current-page="sheetPagination.page"
               :page-size="sheetPagination.pageSize"
@@ -515,8 +521,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="settlementDialogVisible = false">取消</el-button>
-        <el-button type="success" :loading="submitLoading" @click="confirmSettlementSubmit"
+        <el-button class="btn-ghost" @click="settlementDialogVisible = false">取消</el-button>
+        <el-button class="btn-main" :loading="submitLoading" @click="confirmSettlementSubmit"
           >确认结算</el-button
         >
       </template>
@@ -555,8 +561,8 @@
         :business-id="sheetEditId || 'temp'"
       />
       <template #footer>
-        <el-button @click="sheetEditVisible = false">取消</el-button>
-        <el-button type="primary" :loading="sheetEditSaving" @click="saveSheetEdit">保存</el-button>
+        <el-button class="btn-ghost" @click="sheetEditVisible = false">取消</el-button>
+        <el-button class="btn-main" :loading="sheetEditSaving" @click="saveSheetEdit">保存</el-button>
       </template>
     </el-dialog>
 

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

@@ -2,8 +2,19 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <template>
   <div class="page-container">
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm">
+    <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>
@@ -14,13 +25,19 @@
             <el-option label="禁用" :value="false" />
           </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>
+        </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="toolbar">
+
+    <div class="list-toolbar">
+      <div class="list-toolbar-row">
       <el-button class="btn-main" type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>新增单位</el-button>
 
       <el-button class="btn-ghost" type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
@@ -52,8 +69,10 @@
       <ArtExcelImport @import-success="handleUnitImportSuccess" @import-error="handleExcelImportError">
         批量导入
       </ArtExcelImport>
+      </div>
     </div>
-    <el-table :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleSelectionChange">
+    <div class="list-body list-wrap">
+    <el-table class="list-table" :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" header-align="center" />
       <el-table-column prop="name" label="单位名称" min-width="150" align="center" header-align="center" />
       <el-table-column prop="code" label="单位编码" min-width="120" align="center" header-align="center" />
@@ -85,6 +104,7 @@
         @current-change="val => (pagination.page = val, loadData())"
       />
     </div>
+    </div>
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
         <el-form-item label="单位名称" prop="name"><el-input v-model="formData.name" placeholder="如：斤、kg、个" /></el-form-item>
@@ -100,6 +120,7 @@
         <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
       </template>
     </el-dialog>
+    </section>
   </div>
 </template>
 <script setup lang="ts">
@@ -357,15 +378,5 @@
   onMounted(() => loadData())
 </script>
 <style lang="scss" scoped>
-.page-container { padding: 20px; }
-.search-bar { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 16px; }
-.toolbar {
-  margin-bottom: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-}
-.pagination { display: flex; justify-content: flex-end; margin-top: 20px; }
 .form-tip { margin-left: 8px; color: #909399; font-size: 12px; }
 </style>

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

@@ -2,9 +2,24 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <template>
   <div class="page-container">
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-form :inline="true" :model="searchForm" class="search-form">
+    <header class="page-head">
+      <h1>用户管理</h1>
+      <p class="page-desc">统一维护运营、供应商、客户与配送员账号信息。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>
+          <span class="title-ic" aria-hidden="true">
+            <el-icon><Operation /></el-icon>
+          </span>
+          用户列表
+        </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>
@@ -35,21 +50,27 @@
             <el-option label="禁用" :value="false" />
           </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>
+        </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="toolbar">
-      <el-button type="primary" @click="handleAdd">
+    <div class="list-toolbar">
+      <div class="list-toolbar-row">
+      <div class="list-toolbar-selected">已选 <span class="sel-num">{{ selectedRows.length }}</span> 项</div>
+      <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>
 
@@ -63,10 +84,12 @@
       >
         批量导出
       </ArtExcelExport>
+      </div>
     </div>
 
     <!-- 数据表格 -->
-    <el-table :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleSelectionChange">
+    <div class="list-body list-wrap">
+    <el-table class="list-table" :data="tableData" v-loading="loading" stripe row-key="id" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" />
       <el-table-column label="头像" width="72" align="center">
         <template #default="{ row }">
@@ -93,16 +116,16 @@
       </el-table-column>
       <el-table-column label="操作" min-width="300" fixed="right">
         <template #default="{ row }">
-          <el-button type="primary" link @click="handleViewDetail(row)">详情</el-button>
-          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-          <el-button type="warning" link @click="handleResetPassword(row)">重置密码</el-button>
-          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+          <el-button class="btn-op-item primary" @click="handleViewDetail(row)">详情</el-button>
+          <el-button class="btn-op-item" @click="handleEdit(row)">编辑</el-button>
+          <el-button class="btn-op-item" @click="handleResetPassword(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"
@@ -113,6 +136,7 @@
         @current-change="handlePageChange"
       />
     </div>
+    </div>
 
     <!-- 新增/编辑弹窗 -->
     <el-dialog
@@ -179,8 +203,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>
 
@@ -208,6 +232,7 @@
         <el-descriptions-item label="创建人">{{ viewData.createName }}</el-descriptions-item>
       </el-descriptions>
     </el-dialog>
+    </section>
   </div>
 </template>
 
@@ -215,7 +240,7 @@
   import { ref, reactive, onMounted, computed, watch } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
-  import { Plus } from '@element-plus/icons-vue'
+  import { Operation, Plus } from '@element-plus/icons-vue'
   import {
     fetchUserList,
     fetchCreateUser,
@@ -601,37 +626,6 @@
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  padding: 20px;
-}
-
-.search-bar {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-
-  .search-form {
-    :deep(.el-form-item) {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.toolbar {
-  margin-bottom: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
 .avatar-field {
   display: flex;
   flex-direction: column;