feat(frontend): 菜单图标与视觉设计系统落地

- 引入 @element-plus/icons-vue 官方图标库，菜单项按模块配图标，消除
  纯文字导航的辨识成本（新增依赖已评估：Element Plus 官方同源维护）
- AppMenu/BasicLayout/router 同步：图标渲染、菜单结构与路由 meta 对齐
- index.css 视觉系统化：品牌色、语义三色（ok/warn/danger 及其 wash 层次）、
  形体与材质（圆角、缓动、阴影、等宽字体）统一为 CSS 变量，并覆盖
  Element Plus 主色
- 登录页、业务页、结算页、工作台、审批页等视图随新变量适配

验证：pnpm type-check 与 pnpm build 均通过；后端接口契约未变。

Co-Authored-By: Claude Code <noreply@anthropic.com>

frontend/src/views/business/shipments/index.vue

@@ -273,49 +273,75 @@ onMounted(() => {
 
 <template>
   <div>
-    <el-card shadow="never">
-      <el-form class="filter-form" :inline="true" @submit.prevent>
-        <el-form-item label="业务">
-          <el-select
-            v-model="filters.business_id"
-            placeholder="全部"
-            clearable
-            filterable
-            style="width: 240px"
-          >
-            <el-option
-              v-for="item in businessOptions"
-              :key="item.id"
-              :label="businessLabel(item)"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="发货日期">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            value-format="YYYY-MM-DD"
-            range-separator="至"
-            start-placeholder="起"
-            end-placeholder="止"
-            style="width: 240px"
+    <!-- 页面头：标题 + 一句口径说明（发货日是回款天数的起算点）+ 签名水线 -->
+    <div class="page-head">
+      <h1 class="page-title">发货管理</h1>
+      <p class="page-desc">
+        发货单挂靠执行中的业务，发货日就是回款天数的起算点（发货日计第 1 天）；批次与金额经回款指定后决定计提比例与绩效
+      </p>
+      <span class="waterline"></span>
+    </div>
+
+    <!--
+      .filter-bar 直接挂在 el-form 上（去掉 inline）：el-form 不是 flex 透明容器，
+      外面再包一层 div 会让 el-form-item 丢掉 gap 排版，筛选条退化成竖排。
+    -->
+    <el-form class="filter-bar" @submit.prevent>
+      <el-form-item label="业务">
+        <el-select
+          v-model="filters.business_id"
+          placeholder="全部"
+          clearable
+          filterable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="item in businessOptions"
+            :key="item.id"
+            :label="businessLabel(item)"
+            :value="item.id"
           />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="search">查询</el-button>
-          <el-button @click="resetFilters">重置</el-button>
-        </el-form-item>
-      </el-form>
-
-      <div class="toolbar">
-        <el-button type="primary" @click="openCreate">新增发货单</el-button>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发货日期">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          value-format="YYYY-MM-DD"
+          range-separator="至"
+          start-placeholder="起"
+          end-placeholder="止"
+          style="width: 240px"
+        />
+      </el-form-item>
+      <div class="filter-bar__actions">
+        <el-button type="primary" @click="search">查询</el-button>
+        <el-button @click="resetFilters">重置</el-button>
       </div>
+    </el-form>
 
-      <el-table v-loading="loading" :data="records" stripe>
-        <el-table-column prop="shipment_no" label="发货单号" min-width="150" />
-        <el-table-column prop="business_no" label="业务编号" min-width="150">
-          <template #default="{ row }">{{ row.business_no ?? '—' }}</template>
+    <div class="toolbar">
+      <el-button type="primary" @click="openCreate">新增发货单</el-button>
+      <span class="toolbar-note">发货明细与运费在弹窗内维护，提交后自动回写业务发货额</span>
+    </div>
+
+    <div class="card">
+      <el-table
+        v-loading="loading"
+        :data="records"
+        stripe
+        empty-text="还没有发货单 —— 点「新增发货单」登记第一批，或换个业务再查"
+      >
+        <el-table-column label="发货单号" min-width="150">
+          <template #default="{ row }">
+            <span class="cell-code">{{ row.shipment_no }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="业务编号" min-width="150">
+          <template #default="{ row }">
+            <span v-if="row.business_no" class="cell-code">{{ row.business_no }}</span>
+            <span v-else class="cell-muted">—</span>
+          </template>
         </el-table-column>
         <el-table-column label="发货日期" min-width="140">
           <template #default="{ row }">
@@ -329,12 +355,12 @@ onMounted(() => {
         <el-table-column label="运费（元）" min-width="110" align="right">
           <template #default="{ row }">
             <!-- 字符串直出：金额红线，禁 toFixed / float 格式化 -->
-            <span class="cell-amount">{{ row.freight_amount }}</span>
+            <span class="cell-num">{{ row.freight_amount }}</span>
           </template>
         </el-table-column>
         <el-table-column label="发货总额（元）" min-width="130" align="right">
           <template #default="{ row }">
-            <span class="cell-amount">{{ row.total_amount }}</span>
+            <span class="cell-num">{{ row.total_amount }}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="130" fixed="right" align="center">
@@ -348,14 +374,17 @@ onMounted(() => {
         </el-table-column>
       </el-table>
 
-      <AppPagination
-        :total="total"
-        :page-num="pageNum"
-        :page-size="pageSize"
-        @page-change="onPageChange"
-        @size-change="onSizeChange"
-      />
-    </el-card>
+      <!-- 分页落进 card-foot：与表体同一张卡，卡底微渐变收边 -->
+      <div class="card-foot">
+        <AppPagination
+          :total="total"
+          :page-num="pageNum"
+          :page-size="pageSize"
+          @page-change="onPageChange"
+          @size-change="onSizeChange"
+        />
+      </div>
+    </div>
 
     <!-- 新增 / 编辑（明细行编辑器；编辑不含 business_id，挂靠业务不可改） -->
     <el-dialog
@@ -450,16 +479,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.cell-amount {
-  font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
-  font-size: 12px;
-  color: var(--ys-ink-2);
-}
-
-.cell-muted {
-  color: var(--ys-ink-3);
-  font-size: 12px;
-}
+/* 单元格口径（.cell-code / .cell-num / .cell-muted）由全局 index.css 提供，此处不再重复定义 */
 
 .field-hint {
   display: block;
@@ -489,4 +509,5 @@ onMounted(() => {
 .tail-form {
   margin-top: 4px;
 }
+
 </style>