From 30cc69f43bbfdd1e92c5df3decd21ee43f7d9648 Mon Sep 17 00:00:00 2001
From: zou <zou@direv.local>
Date: Tue, 18 Aug 2026 15:49:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(F006):=20=E5=88=97=E8=A1=A8=E9=A1=B5UI?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=20-=208=E9=A1=B5=E7=8A=B6=E6=80=81=E8=83=B6?=
 =?UTF-8?q?=E5=9B=8A=E5=8C=96(el-tag=E5=85=A8=E5=B1=80=E8=83=B6=E5=9B=8A+s?=
 =?UTF-8?q?t-pill=E5=9C=86=E7=82=B9)=20+=20=E4=BF=AE=E5=A4=8D=E6=8B=BC?=
 =?UTF-8?q?=E5=9B=A2/=E7=A7=92=E6=9D=80=E7=BC=BA=E5=A4=B1=E4=B8=BB?=
 =?UTF-8?q?=E8=A1=A8=20+=20=E6=89=B9=E9=87=8F=E6=A0=8F=E9=80=9A=E7=94=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/inquiry/InquiryListView.vue       | 16 +++++---
 src/modules/order/OrderListView.vue           | 21 ++++++----
 .../other/groupbuy/GroupbuyListView.vue       | 35 +++++++++++++++--
 src/modules/other/seckill/SeckillListView.vue | 35 +++++++++++++++--
 .../supplierBrand/SupplierBrandListView.vue   | 12 +++---
 .../supplier/coupon/CouponListView.vue        | 18 ++++-----
 src/modules/supplier/good/GoodListView.vue    | 38 +++++++------------
 .../servicegood/ServiceGoodListView.vue       | 22 +++++------
 src/styles/global-ui.scss                     | 26 +++++++++++++
 9 files changed, 150 insertions(+), 73 deletions(-)

diff --git a/src/modules/inquiry/InquiryListView.vue b/src/modules/inquiry/InquiryListView.vue
index f23d5d3..6d48a31 100644
--- a/src/modules/inquiry/InquiryListView.vue
+++ b/src/modules/inquiry/InquiryListView.vue
@@ -192,15 +192,19 @@ onMounted(() => { load() })
 
 /* 状态徽章(4 种) - 浅底色块(套设计规范 §5.4) */
 .rr-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11.5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 12px;
+  border-radius: 999px;
+  font-size: 12px;
   font-weight: 500;
-  line-height: 17.25px;
-  height: 21.25px;
+  line-height: 20px;
   box-sizing: border-box;
 }
+.rr-badge::before {
+  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
+}
 .rr-badge-pending { background: var(--amber-soft); color: var(--amber); }
 .rr-badge-quoting { background: var(--brand-soft); color: var(--brand); }
 .rr-badge-done { background: var(--green-soft); color: var(--green); }
diff --git a/src/modules/order/OrderListView.vue b/src/modules/order/OrderListView.vue
index b337415..81b7663 100644
--- a/src/modules/order/OrderListView.vue
+++ b/src/modules/order/OrderListView.vue
@@ -18,6 +18,7 @@
 import { ref, onMounted, reactive, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Clock } from '@element-plus/icons-vue'
 import { httpGet } from '@/utils/request'
 import PageHeader from '@/components/PageHeader/PageHeader.vue'
 import SearchBar from '@/components/SearchBar/SearchBar.vue'
@@ -46,6 +47,14 @@ interface Order {
 const STATUS_LABEL: Record<number, string> = {
   1: '待支付', 2: '待发货', 3: '待收货', 4: '待付尾款', 5: '待评价', 6: '已完成', 7: '已取消', 8: '采购单待审核', 9: '付款单待审核'
 }
+// 状态胶囊配色 (已完成=绿/已取消=灰/其余=品牌蓝, 引用全局 --st-* 变量暗色自适应)
+const STATUS_PILL: Record<number, { color: string; bg: string }> = {
+  6: { color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  7: { color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' }
+}
+function statusPill(status: number) {
+  return STATUS_PILL[status] || { color: 'var(--primary)', bg: 'var(--primary-soft, #dbeafe)' }
+}
 
 const STATUS_TABS = [
   { value: '', label: '全部' },
@@ -259,19 +268,15 @@ onMounted(load)
           <span v-else class="rr-muted">--</span>
         </template>
         <template #time="{ row }">
-          <span class="rr-time">{{ fmtDate(row.createDate) }}</span>
+          <span class="rr-time"><el-icon style="vertical-align:-2px;margin-right:4px"><Clock /></el-icon>{{ fmtDate(row.createDate) }}</span>
         </template>
         <template #amount="{ row }">
           <span class="rr-amount">¥ {{ row.totalAmount.toLocaleString() }}</span>
         </template>
         <template #status="{ row }">
-          <el-tag
-            :type="(STATUS_LABEL[row.status] === '已完成' ? 'success' : STATUS_LABEL[row.status] === '已取消' ? 'info' : 'primary') as any"
-            size="small"
-            effect="light"
-          >
-            {{ STATUS_LABEL[row.status] || `状态${row.status}` }}
-          </el-tag>
+          <span class="st-pill" :style="{ color: statusPill(row.status).color, background: statusPill(row.status).bg }">
+            <span class="st-dot"></span>{{ STATUS_LABEL[row.status] || `状态${row.status}` }}
+          </span>
         </template>
         <template #action="{ row }">
           <TableActions
diff --git a/src/modules/other/groupbuy/GroupbuyListView.vue b/src/modules/other/groupbuy/GroupbuyListView.vue
index d802a5f..21c5607 100644
--- a/src/modules/other/groupbuy/GroupbuyListView.vue
+++ b/src/modules/other/groupbuy/GroupbuyListView.vue
@@ -29,9 +29,9 @@ interface Groupbuy {
   raw: any
 }
 
-const STATUS_MAP: Record<number, { label: string; type: string }> = {
-  1: { label: '启用', type: 'success' },
-  2: { label: '停用', type: 'danger' }
+const STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  1: { label: '启用', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  2: { label: '停用', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
 }
 
 const FALLBACK: Groupbuy[] = [
@@ -116,6 +116,33 @@ onMounted(load)
     />
 
     <div class="rr-card">
+      <div class="batch-bar" :class="{ 'has-selection': selection.length > 0 }">
+        <span v-if="selection.length > 0" class="batch-count">已选 <strong>{{ selection.length }}</strong> 个活动</span>
+        <span v-else class="batch-hint">勾选活动后可批量操作</span>
+        <span class="batch-actions">
+          <el-button size="small" type="danger" plain :disabled="!selection.length" @click="onBatchDelete">批量删除</el-button>
+        </span>
+      </div>
+      <el-table :data="list" v-loading="loading" style="width: 100%" @selection-change="onSelectionChange" row-key="id" empty-text="暂无拼团活动">
+        <el-table-column type="selection" width="48" align="center" />
+        <el-table-column prop="name" label="活动名称" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="enterpriseName" label="活动商家" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="groupBeginTime" label="开始时间" width="150" />
+        <el-table-column prop="groupEndTime" label="结束时间" width="150" />
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color, background: STATUS_MAP[row.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createDate" label="创建时间" width="165" />
+        <el-table-column label="操作" width="170" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" text @click="onView(row)">详情</el-button>
+            <el-button :type="row.status === 1 ? 'warning' : 'success'" size="small" text @click="onToggleStatus(row)">{{ row.status === 1 ? '停用' : '启用' }}</el-button>
+            <el-button type="danger" size="small" text @click="onDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
       <div class="rr-pagination">
         <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onLimitChange" @current-change="onPageChange" />
       </div>
@@ -129,7 +156,7 @@ onMounted(load)
         <el-descriptions-item label="结束时间">{{ viewData.groupEndTime }}</el-descriptions-item>
         <el-descriptions-item label="活动商品" :span="2">{{ viewData.type }}</el-descriptions-item>
         <el-descriptions-item label="状态">
-          <el-tag :type="(STATUS_MAP[viewData.status]?.type as any)" size="small">{{ STATUS_MAP[viewData.status]?.label }}</el-tag>
+          <span class="st-pill" :style="{ color: STATUS_MAP[viewData.status]?.color, background: STATUS_MAP[viewData.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[viewData.status]?.label }}</span>
         </el-descriptions-item>
         <el-descriptions-item label="创建时间">{{ viewData.createDate }}</el-descriptions-item>
       </el-descriptions>
diff --git a/src/modules/other/seckill/SeckillListView.vue b/src/modules/other/seckill/SeckillListView.vue
index 8ef5a80..c9038b3 100644
--- a/src/modules/other/seckill/SeckillListView.vue
+++ b/src/modules/other/seckill/SeckillListView.vue
@@ -29,9 +29,9 @@ interface Seckill {
   raw: any
 }
 
-const STATUS_MAP: Record<number, { label: string; type: string }> = {
-  0: { label: '启用', type: 'success' },
-  1: { label: '停用', type: 'danger' }
+const STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  0: { label: '启用', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  1: { label: '停用', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
 }
 
 const FALLBACK: Seckill[] = [
@@ -117,6 +117,33 @@ onMounted(load)
     />
 
     <div class="rr-card">
+      <div class="batch-bar" :class="{ 'has-selection': selection.length > 0 }">
+        <span v-if="selection.length > 0" class="batch-count">已选 <strong>{{ selection.length }}</strong> 个活动</span>
+        <span v-else class="batch-hint">勾选活动后可批量操作</span>
+        <span class="batch-actions">
+          <el-button size="small" type="danger" plain :disabled="!selection.length" @click="onBatchDelete">批量删除</el-button>
+        </span>
+      </div>
+      <el-table :data="list" v-loading="loading" style="width: 100%" @selection-change="onSelectionChange" row-key="id" empty-text="暂无秒杀活动">
+        <el-table-column type="selection" width="48" align="center" />
+        <el-table-column prop="name" label="活动名称" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="enterpriseName" label="活动商家" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="beginTime" label="开始时间" width="150" />
+        <el-table-column prop="endTime" label="结束时间" width="150" />
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color, background: STATUS_MAP[row.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createDate" label="创建时间" width="165" />
+        <el-table-column label="操作" width="170" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" text @click="onView(row)">详情</el-button>
+            <el-button :type="row.status === 0 ? 'warning' : 'success'" size="small" text @click="onToggleStatus(row)">{{ row.status === 0 ? '停用' : '启用' }}</el-button>
+            <el-button type="danger" size="small" text @click="onDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
       <div class="rr-pagination">
         <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onLimitChange" @current-change="onPageChange" />
       </div>
@@ -130,7 +157,7 @@ onMounted(load)
         <el-descriptions-item label="结束时间">{{ viewData.endTime }}</el-descriptions-item>
         <el-descriptions-item label="活动商品" :span="2">{{ viewData.type }}</el-descriptions-item>
         <el-descriptions-item label="状态">
-          <el-tag :type="(STATUS_MAP[viewData.status]?.type as any)" size="small">{{ STATUS_MAP[viewData.status]?.label }}</el-tag>
+          <span class="st-pill" :style="{ color: STATUS_MAP[viewData.status]?.color, background: STATUS_MAP[viewData.status]?.bg }"><span class="st-dot"></span>{{ STATUS_MAP[viewData.status]?.label }}</span>
         </el-descriptions-item>
         <el-descriptions-item label="创建时间">{{ viewData.createDate }}</el-descriptions-item>
       </el-descriptions>
diff --git a/src/modules/other/supplierBrand/SupplierBrandListView.vue b/src/modules/other/supplierBrand/SupplierBrandListView.vue
index f0b2565..b1190bb 100644
--- a/src/modules/other/supplierBrand/SupplierBrandListView.vue
+++ b/src/modules/other/supplierBrand/SupplierBrandListView.vue
@@ -33,10 +33,10 @@ interface Brand {
   raw: any
 }
 
-const STATUS_MAP: Record<number, { label: string; type: string }> = {
-  1: { label: '待审核', type: 'warning' },
-  2: { label: '审核通过', type: 'success' },
-  3: { label: '审核拒绝', type: 'danger' }
+const STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  1: { label: '待审核', color: 'var(--st-warn-fg)', bg: 'var(--st-warn-bg)' },
+  2: { label: '审核通过', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  3: { label: '审核拒绝', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
 }
 
 const list = ref<Brand[]>([])
@@ -212,7 +212,7 @@ onMounted(load)
         </el-table-column>
         <el-table-column prop="status" label="审核状态" header-align="center" align="center" width="100">
           <template #default="{ row }">
-            <el-tag :type="STATUS_MAP[row.status]?.type || 'info'" size="small">{{ STATUS_MAP[row.status]?.label || row.status }}</el-tag>
+            <span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color || 'var(--st-lv4-fg)', background: STATUS_MAP[row.status]?.bg || 'var(--st-lv4-bg)' }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label || row.status }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="createDate" label="申请时间" header-align="center" align="center" width="170" show-overflow-tooltip />
@@ -265,7 +265,7 @@ onMounted(load)
         <el-table-column prop="sourceEnterpriseName" label="品牌来源" header-align="center" align="center" min-width="140" show-overflow-tooltip />
         <el-table-column prop="status" label="审核状态" header-align="center" align="center" width="100">
           <template #default="{ row }">
-            <el-tag :type="STATUS_MAP[row.status]?.type || 'info'" size="small">{{ STATUS_MAP[row.status]?.label || row.status }}</el-tag>
+            <span class="st-pill" :style="{ color: STATUS_MAP[row.status]?.color || 'var(--st-lv4-fg)', background: STATUS_MAP[row.status]?.bg || 'var(--st-lv4-bg)' }"><span class="st-dot"></span>{{ STATUS_MAP[row.status]?.label || row.status }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="createDate" label="申请时间" header-align="center" align="center" width="170" />
diff --git a/src/modules/supplier/coupon/CouponListView.vue b/src/modules/supplier/coupon/CouponListView.vue
index 3e5a8b1..2857339 100644
--- a/src/modules/supplier/coupon/CouponListView.vue
+++ b/src/modules/supplier/coupon/CouponListView.vue
@@ -168,9 +168,9 @@ onMounted(load)
         </el-table-column>
         <el-table-column label="满减配置" min-width="180" show-overflow-tooltip>
           <template #default="{ row }">
-            <el-tag :type="(row.type === 1 ? 'warning' : 'success') as any" size="small" effect="light">
-              {{ fmtConfig(row) }}
-            </el-tag>
+            <span class="st-pill" :style="row.type === 1 ? { color: 'var(--st-warn-fg)', background: 'var(--st-warn-bg)' } : { color: 'var(--st-ok-fg)', background: 'var(--st-ok-bg)' }">
+              <span class="st-dot"></span>{{ fmtConfig(row) }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column label="适用商品" min-width="180" show-overflow-tooltip>
@@ -191,9 +191,9 @@ onMounted(load)
         </el-table-column>
         <el-table-column label="状态" width="90" align="center">
           <template #default="{ row }">
-            <el-tag :type="(row.onShelf === 1 ? 'success' : 'info') as any" size="small" effect="light">
-              {{ row.onShelf === 1 ? '启用' : '停用' }}
-            </el-tag>
+            <span class="st-pill" :style="row.onShelf === 1 ? { color: 'var(--st-ok-fg)', background: 'var(--st-ok-bg)' } : { color: 'var(--st-lv4-fg)', background: 'var(--st-lv4-bg)' }">
+              <span class="st-dot"></span>{{ row.onShelf === 1 ? '启用' : '停用' }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column prop="createTime" label="创建时间" width="180" />
@@ -221,9 +221,9 @@ onMounted(load)
         <el-table-column prop="userName" label="领取人" align="center" />
         <el-table-column label="状态" align="center">
           <template #default="{ row }">
-            <el-tag v-if="row.status === 1" size="small" type="info" effect="light">已使用</el-tag>
-            <el-tag v-else-if="row.status === 2" size="small" type="success" effect="light">未使用</el-tag>
-            <el-tag v-else size="small" type="warning" effect="light">未知</el-tag>
+            <span v-if="row.status === 1" class="st-pill" style="color: var(--st-lv4-fg); background: var(--st-lv4-bg)"><span class="st-dot"></span>已使用</span>
+            <span v-else-if="row.status === 2" class="st-pill" style="color: var(--st-ok-fg); background: var(--st-ok-bg)"><span class="st-dot"></span>未使用</span>
+            <span v-else class="st-pill" style="color: var(--st-warn-fg); background: var(--st-warn-bg)"><span class="st-dot"></span>未知</span>
           </template>
         </el-table-column>
         <el-table-column prop="createTime" label="领取时间" align="center" width="200" />
diff --git a/src/modules/supplier/good/GoodListView.vue b/src/modules/supplier/good/GoodListView.vue
index 7533ddf..5366480 100644
--- a/src/modules/supplier/good/GoodListView.vue
+++ b/src/modules/supplier/good/GoodListView.vue
@@ -60,15 +60,15 @@ interface SkuItem {
 }
 
 // 状态映射 (沿用老 vue checkStatus 1=待审核 2=已通过 3=已驳回, onShelf 0=下架 1=在售)
-const CHECK_STATUS_MAP: Record<number, { label: string; type: string }> = {
-  1: { label: '待审核', type: 'warning' },
-  2: { label: '已通过', type: 'success' },
-  3: { label: '已驳回', type: 'danger' }
+const CHECK_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  1: { label: '待审核', color: 'var(--st-warn-fg)', bg: 'var(--st-warn-bg)' },
+  2: { label: '已通过', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  3: { label: '已驳回', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
 }
 
-const ONSHELF_STATUS_MAP: Record<number, { label: string; type: string }> = {
-  0: { label: '已下架', type: 'info' },
-  1: { label: '已上架', type: 'success' }
+const ONSHELF_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  0: { label: '已下架', color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' },
+  1: { label: '已上架', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' }
 }
 
 const STATUS_TABS = [
@@ -395,14 +395,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
         <span>{{ [row.firstCategoryName, row.secondCategoryName, row.thirdCategoryName].filter(Boolean).join(' / ') || '--' }}</span>
       </template>
       <template #onShelf="{ row }">
-        <el-tag :type="(ONSHELF_STATUS_MAP[row.onShelf]?.type as any)" size="small" effect="light">
-          {{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}
-        </el-tag>
+        <span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[row.onShelf]?.color, background: ONSHELF_STATUS_MAP[row.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</span>
       </template>
       <template #checkStatus="{ row }">
-        <el-tag :type="(CHECK_STATUS_MAP[row.checkStatus]?.type as any)" size="small" effect="light">
-          {{ CHECK_STATUS_MAP[row.checkStatus]?.label }}
-        </el-tag>
+        <span class="st-pill" :style="{ color: CHECK_STATUS_MAP[row.checkStatus]?.color, background: CHECK_STATUS_MAP[row.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</span>
       </template>
       <template #action="{ row }">
         <TableActions
@@ -451,17 +447,13 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
         <el-table-column prop="unitName" label="单位" width="80" align="center" />
         <el-table-column label="铺货" width="100" align="center">
           <template #default="{ row }">
-            <el-tag :type="(ONSHELF_STATUS_MAP[row.onShelf]?.type as any)" size="small" effect="light">
-              {{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}
-            </el-tag>
+            <span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[row.onShelf]?.color, background: ONSHELF_STATUS_MAP[row.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="checkOpinion" label="审核意见" min-width="160" show-overflow-tooltip />
         <el-table-column label="状态" width="100" align="center">
           <template #default="{ row }">
-            <el-tag :type="(CHECK_STATUS_MAP[row.checkStatus]?.type as any)" size="small" effect="light">
-              {{ CHECK_STATUS_MAP[row.checkStatus]?.label }}
-            </el-tag>
+            <span class="st-pill" :style="{ color: CHECK_STATUS_MAP[row.checkStatus]?.color, background: CHECK_STATUS_MAP[row.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</span>
           </template>
         </el-table-column>
         <el-table-column label="申请时间" prop="createDate" width="170" />
@@ -491,14 +483,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
             {{ [detailData.firstCategoryName, detailData.secondCategoryName, detailData.thirdCategoryName].filter(Boolean).join(' / ') }}
           </el-descriptions-item>
           <el-descriptions-item label="状态">
-            <el-tag :type="(CHECK_STATUS_MAP[detailData.checkStatus]?.type as any)" size="small">
-              {{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}
-            </el-tag>
+            <span class="st-pill" :style="{ color: CHECK_STATUS_MAP[detailData.checkStatus]?.color, background: CHECK_STATUS_MAP[detailData.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}</span>
           </el-descriptions-item>
           <el-descriptions-item label="铺货">
-            <el-tag :type="(ONSHELF_STATUS_MAP[detailData.onShelf]?.type as any)" size="small">
-              {{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}
-            </el-tag>
+            <span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[detailData.onShelf]?.color, background: ONSHELF_STATUS_MAP[detailData.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}</span>
           </el-descriptions-item>
           <el-descriptions-item label="审核意见" :span="2">{{ detailData.checkOpinion || '--' }}</el-descriptions-item>
         </el-descriptions>
diff --git a/src/modules/supplier/servicegood/ServiceGoodListView.vue b/src/modules/supplier/servicegood/ServiceGoodListView.vue
index a1153b6..0b6284c 100644
--- a/src/modules/supplier/servicegood/ServiceGoodListView.vue
+++ b/src/modules/supplier/servicegood/ServiceGoodListView.vue
@@ -36,14 +36,14 @@ interface ServiceGood {
   raw: any
 }
 
-const CHECK_STATUS_MAP: Record<number, { label: string; type: string }> = {
-  1: { label: '待审核', type: 'warning' },
-  2: { label: '已通过', type: 'success' },
-  3: { label: '已驳回', type: 'danger' }
+const CHECK_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  1: { label: '待审核', color: 'var(--st-warn-fg)', bg: 'var(--st-warn-bg)' },
+  2: { label: '已通过', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' },
+  3: { label: '已驳回', color: 'var(--st-err-fg)', bg: 'var(--st-err-bg)' }
 }
-const ONSHELF_STATUS_MAP: Record<number, { label: string; type: string }> = {
-  0: { label: '已下架', type: 'info' },
-  1: { label: '已上架', type: 'success' }
+const ONSHELF_STATUS_MAP: Record<number, { label: string; color: string; bg: string }> = {
+  0: { label: '已下架', color: 'var(--st-lv4-fg)', bg: 'var(--st-lv4-bg)' },
+  1: { label: '已上架', color: 'var(--st-ok-fg)', bg: 'var(--st-ok-bg)' }
 }
 const STATUS_TABS = [
   { value: '', label: '全部' },
@@ -309,10 +309,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
         <span class="rr-price">¥ {{ Number(row.price || 0).toLocaleString() }} / {{ row.unit }}</span>
       </template>
       <template #onShelf="{ row }">
-        <el-tag :type="(ONSHELF_STATUS_MAP[row.onShelf]?.type as any)" size="small" effect="light">{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</el-tag>
+        <span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[row.onShelf]?.color, background: ONSHELF_STATUS_MAP[row.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[row.onShelf]?.label }}</span>
       </template>
       <template #checkStatus="{ row }">
-        <el-tag :type="(CHECK_STATUS_MAP[row.checkStatus]?.type as any)" size="small" effect="light">{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</el-tag>
+        <span class="st-pill" :style="{ color: CHECK_STATUS_MAP[row.checkStatus]?.color, background: CHECK_STATUS_MAP[row.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[row.checkStatus]?.label }}</span>
       </template>
       <template #action="{ row }">
         <TableActions
@@ -337,10 +337,10 @@ onMounted(() => Promise.all([load(), loadStats(), loadCounts()]))
         <el-descriptions-item label="服务区域">{{ detailData.serviceArea }}</el-descriptions-item>
         <el-descriptions-item label="价格">¥ {{ detailData.price.toLocaleString() }} / {{ detailData.unit }}</el-descriptions-item>
         <el-descriptions-item label="状态">
-          <el-tag :type="(CHECK_STATUS_MAP[detailData.checkStatus]?.type as any)" size="small">{{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}</el-tag>
+          <span class="st-pill" :style="{ color: CHECK_STATUS_MAP[detailData.checkStatus]?.color, background: CHECK_STATUS_MAP[detailData.checkStatus]?.bg }"><span class="st-dot"></span>{{ CHECK_STATUS_MAP[detailData.checkStatus]?.label }}</span>
         </el-descriptions-item>
         <el-descriptions-item label="铺货">
-          <el-tag :type="(ONSHELF_STATUS_MAP[detailData.onShelf]?.type as any)" size="small">{{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}</el-tag>
+          <span class="st-pill" :style="{ color: ONSHELF_STATUS_MAP[detailData.onShelf]?.color, background: ONSHELF_STATUS_MAP[detailData.onShelf]?.bg }"><span class="st-dot"></span>{{ ONSHELF_STATUS_MAP[detailData.onShelf]?.label }}</span>
         </el-descriptions-item>
         <el-descriptions-item label="审核意见" :span="2">{{ detailData.checkOpinion || '--' }}</el-descriptions-item>
       </el-descriptions>
diff --git a/src/styles/global-ui.scss b/src/styles/global-ui.scss
index 051034a..2c2410b 100644
--- a/src/styles/global-ui.scss
+++ b/src/styles/global-ui.scss
@@ -46,6 +46,32 @@
   border-radius: 12px;
 }
 
+/* ---------- 5. el-tag 统一胶囊外观 (所有页面状态/徽标一致) ---------- */
+/* EP 变量级联下 --el-tag-border-radius 仍被覆盖为 4px, 直接属性 !important 兜底 */
+.el-tag {
+  border-radius: 999px !important;
+  font-weight: 500;
+}
+
+/* ---------- 6. 通用状态胶囊 (圆点+胶囊, 颜色经 inline style 传 var() 或 --st-* 变量) ---------- */
+.st-pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 999px; white-space: nowrap;
+}
+.st-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+/* ---------- 7. 批量操作栏通用样式 (所有列表页复用) ---------- */
+.batch-bar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px; border-bottom: 1px solid var(--border);
+  transition: background .2s;
+}
+.batch-bar.has-selection { background: var(--primary-soft, #e0ecff); }
+.batch-count { font-size: 13px; color: var(--ink-2); }
+.batch-count strong { color: var(--primary); font-size: 15px; }
+.batch-hint { font-size: 12px; color: var(--ink-3); }
+.batch-actions { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
+
 /* ---------- 4. 状态色暗色适配 ---------- */
 /* 状态语义色 token (亮色默认) — 各页面状态标签通过 var() 引用, 主题切换自动适配 */
 :root,