From fe07612f29ff68fb784eab7ffb3e3be717dad862 Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Tue, 7 Jul 2026 13:02:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=8C=89=20ui-preview-v2.h?=
 =?UTF-8?q?tml=20=E6=A8=A1=E6=9D=BF=20v2=20=E6=95=B4=E6=94=B9=20(PageHeade?=
 =?UTF-8?q?r=E6=89=81=E5=B9=B3/SearchBar=E6=97=A0label/ListTabs=20pill/Tab?=
 =?UTF-8?q?le=20uppercase=E5=B7=A6=E5=AF=B9=E9=BD=90)=20W17.2.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataTable/DataTable.vue   | 217 +++++++----------------
 src/components/ListTabs/ListTabs.vue     |  81 +++------
 src/components/PageHeader/PageHeader.vue |  31 ++--
 src/components/SearchBar/SearchBar.vue   | 141 ++++++---------
 src/modules/user/UserListView.vue        |  63 ++++---
 5 files changed, 200 insertions(+), 333 deletions(-)

diff --git a/src/components/DataTable/DataTable.vue b/src/components/DataTable/DataTable.vue
index c30da65..19c2c33 100644
--- a/src/components/DataTable/DataTable.vue
+++ b/src/components/DataTable/DataTable.vue
@@ -1,41 +1,26 @@
 <script setup lang="ts">
 /**
- * F006 通用 DataTable 组件
- * W3.3:抽取自 InquiryListView + DashboardView 近期询价表
+ * F006 通用 DataTable 组件 (W17 设计规范 v2 整改)
+ *
+ * 按 ui-preview-v2.html 模板:
+ *   - 表头 text-transform: uppercase + 左对齐
+ *   - 单元格紧凑 padding 12px 16px + 左对齐
+ *   - 颜色全用 var(--xxx) 主题化
+ *   - 表格外无卡片包裹
  *
  * 用法:
  *   <DataTable
  *     :columns="[
  *       { prop: 'id', label: '单号', width: 180 },
- *       { prop: 'customer', label: '客户', minWidth: 180 },
- *       { prop: 'status', label: '状态', width: 110, type: 'status',
- *         statusMap: { pending: '待报价', quoting: '报价中', done: '已成交', cancelled: '已取消' } },
  *       { label: '操作', width: 100, slot: 'action' }
  *     ]"
- *     :data="list"
- *     :loading="loading"
- *     :total="total"
- *     :page="page"
- *     :limit="limit"
- *     :show-pagination="true"
- *     row-key="id"
- *     @row-click="onRowClick"
+ *     :data="list" :loading="loading" :total="total" :page="page" :limit="limit"
  *     @page-change="onPageChange"
  *   >
  *     <template #action="{ row }">
- *       <el-button text type="primary" size="small" @click.stop="onView(row)">查看</el-button>
+ *       <el-button text type="primary" size="small">查看</el-button>
  *     </template>
  *   </DataTable>
- *
- * 列定义支持:
- *   - prop: 字段名
- *   - label: 列标题
- *   - width / minWidth: 列宽
- *   - type: 'status' 自动渲染 el-tag(需 statusMap)
- *   - statusMap: { value: '中文标签' }
- *   - slot: 自定义插槽名
- *   - formatter: (row) => string 自定义格式化
- *   - align: 对齐方式
  */
 import { computed } from 'vue'
 
@@ -49,6 +34,7 @@ interface Column {
   slot?: string
   formatter?: (row: any) => string
   align?: 'left' | 'center' | 'right'
+  fixed?: 'left' | 'right' | true
 }
 
 interface Props {
@@ -59,7 +45,6 @@ interface Props {
   page?: number
   limit?: number
   showPagination?: boolean
-  carded?: boolean
   pageSizes?: number[]
   rowKey?: string
   stripe?: boolean
@@ -77,7 +62,7 @@ const props = withDefaults(defineProps<Props>(), {
   showPagination: true,
   pageSizes: () => [10, 20, 50, 100],
   rowKey: 'id',
-  stripe: true,
+  stripe: false,
   borderless: false,
   emptyText: '暂无数据',
   errorText: '',
@@ -100,49 +85,44 @@ function getStatusMeta(col: Column, value: string) {
 }
 
 function onSelectionChange(rows: any[]) { emit('selection-change', rows) }
-function onRowClick(row: any) {
-  emit('row-click', row)
-}
-function onPageChange(p: number) {
-  emit('page-change', p)
-}
-function onLimitChange(l: number) {
-  emit('limit-change', l)
-}
+function onRowClick(row: any) { emit('row-click', row) }
+function onPageChange(p: number) { emit('page-change', p) }
+function onLimitChange(l: number) { emit('limit-change', l) }
 </script>
 
 <template>
-  <div class="rr-data-table" :class="{ borderless, carded }">
+  <div class="rr-data-table" :class="{ borderless }">
     <el-table
       :data="data"
       :loading="loading"
       :stripe="stripe"
       :border="!borderless"
       :row-key="rowKey"
-      style="width: 100%" :cell-class-name="'rr-data-cell'"
+      style="width: 100%"
       @row-click="onRowClick"
       @selection-change="onSelectionChange"
       row-class-name="rr-clickable-row"
       :header-row-style="{ height: '40px' }"
-      :row-style="{ height: '52px' }"
       :header-cell-style="{
         background: 'var(--rr-table-header-bg, #F8FAFC)',
-        color: 'var(--rr-text-secondary, #475569)',
+        color: 'var(--rr-text-secondary, #64748B)',
         fontWeight: '600',
-        fontSize: '12.5px',
-        padding: '10px 14px',
+        fontSize: '12px',
+        padding: '11px 16px',
         borderBottom: '1px solid var(--rr-border-color, #E2E8F0)',
-        lineHeight: '18.75px',
-        textAlign: 'center',
+        textTransform: 'uppercase',
+        letterSpacing: '0.04em',
+        whiteSpace: 'nowrap',
+        textAlign: 'left',
         height: '40px'
       }"
       :cell-style="{
-        padding: '0 14px',
+        padding: '12px 16px',
         borderBottom: '1px solid var(--rr-border-color, #E2E8F0)',
-        fontSize: '13.5px',
-        lineHeight: '20.25px',
-        color: 'var(--rr-text-primary, #0F172A)',
-        height: '52px'
+        color: 'var(--rr-text-secondary, #334155)',
+        fontSize: '13px',
+        textAlign: 'left',
+        verticalAlign: 'middle'
       }"
     >
       <template v-for="(col, idx) in columns" :key="idx">
@@ -150,7 +130,8 @@ function onLimitChange(l: number) {
         v-if="col.type === 'selection'"
         type="selection"
         :width="col.width || 50"
-        :align="col.align || 'center'"
+        :align="col.align || 'left'"
+        :fixed="col.fixed"
       />
       <el-table-column
         v-else
@@ -158,7 +139,8 @@ function onLimitChange(l: number) {
         :label="col.label"
         :width="col.width"
         :min-width="col.minWidth"
-        :align="col.align || 'center'"
+        :align="col.align || 'left'"
+        :fixed="col.fixed"
         :show-overflow-tooltip="true"
       >
         <template v-if="col.slot" #default="{ row }">
@@ -178,129 +160,66 @@ function onLimitChange(l: number) {
         </template>
       </el-table-column>
       </template>
-
       <template #empty>
         <div class="rr-empty">
-          <span v-if="error">{{ error }}</span>
+          <span v-if="error" class="rr-empty__error">{{ error || errorText }}</span>
           <span v-else>{{ emptyText }}</span>
         </div>
       </template>
     </el-table>
-
-    <div v-if="showPager" class="rr-pagination">
-      <span class="rr-pagination-total">共 {{ total }} 条记录</span>
+    <div v-if="showPager" class="rr-pager">
+      <div class="rr-pager__info">
+        共 {{ total }} 条
+      </div>
       <el-pagination
-        background
-        layout="prev, pager, next"
-        :total="total"
-        :page-size="limit"
         :current-page="page"
-        :page-sizes="[10, 20, 50, 100]"
-        :prev-text="'上一页'"
-        :next-text="'下一页'"
-        :pager-count="5"
+        :page-size="limit"
+        :total="total"
+        :page-sizes="pageSizes"
+        layout="sizes, prev, pager, next, jumper"
+        background
         @current-change="onPageChange"
-        class="rr-pager"
+        @size-change="onLimitChange"
       />
-      <span class="rr-pagination-size">
-        每页
-        <el-select :model-value="limit" size="small" @change="onLimitChange" class="rr-page-size-select">
-          <el-option v-for="s in pageSizes" :key="s" :label="`${s} 行`" :value="s" />
-        </el-select>
-      </span>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .rr-data-table {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  &.borderless {
-    border: 0;
+  width: 100%;
+  // 行 hover 高亮
+  :deep(.el-table__row) {
+    transition: background 0.1s;
+  }
+  :deep(.el-table__row:hover > td.el-table__cell) {
+    background-color: var(--rr-row-hover, #F8FAFC) !important;
+  }
+  // 隐藏全局边线(模板的 table-card 在外层,这里走全局)
+  &.borderless :deep(.el-table__inner-wrapper) {
     border-radius: 0;
   }
 }
-.rr-clickable-row { cursor: pointer; }
-.rr-clickable-row:hover > td { background: var(--bg-soft) !important; }
 .rr-empty {
-  padding: 32px 0;
-  color: var(--ink-3);
-  font-size: 13px;
   text-align: center;
+  padding: 32px 0;
+  color: var(--ink-3, #94A3B8);
+  font-size: 13px;
+  &__error {
+    color: var(--red, #EF4444);
+  }
 }
-.rr-pagination {
-  padding: 11px 14px;
+.rr-pager {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  border-top: 1px solid var(--border);
-  color: var(--ink-3);
+  justify-content: space-between;
+  padding: 14px 16px;
   font-size: 12.5px;
-  gap: 8px;
-}
-.rr-pagination-total {
-  font-weight: 400;
-  color: var(--ink-3);
-}
-.rr-pagination-unit {
-  font-size: 12.5px;
-  color: var(--ink-3);
-  margin-left: -4px;
-}
-.rr-pagination :deep(.el-pagination) {
-  flex: 1;
-  justify-content: flex-end;
-}
-.rr-pagination :deep(.el-pagination .el-pagination__sizes .el-select .el-input__inner) {
-  font-size: 12.5px;
-}
-.rr-pagination-size {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-size: 12px; color: var(--ink-3);
-  flex-shrink: 0;
-}
-.rr-page-size-select {
-  width: 80px;
-}
-.rr-page-size-select :deep(.el-input__wrapper) {
-  background: var(--surface);
-  box-shadow: 0 0 0 1px var(--border) inset;
-  border-radius: 8px;
-}
-
-/* 分页器全部按钮 12px(原 14px 太大) + 圆角 + 紧凑间距 */
-:deep(.rr-pager .btn-prev),
-:deep(.rr-pager .btn-next),
-:deep(.rr-pager .el-pager li) {
-  font-size: 12px !important;
-  min-width: 28px !important;
-  height: 28px !important;
-  line-height: 28px !important;
-  border-radius: 50% !important;
-  padding: 0 !important;
-}
-:deep(.rr-pager .btn-prev),
-:deep(.rr-pager .btn-next) {
-  padding: 0 8px !important;
-  border-radius: 14px !important;
-}
-:deep(.rr-pager .el-pager li) {
-  margin: 0 2px !important;
-}
-:deep(.rr-pager) {
-  gap: 4px;
-}
-:deep(.rr-pager .el-pager li.is-active) {
-  border-radius: 50% !important;
-}
-
-/* 单元格 nowrap 截断(套设计稿 RFQ-20668…) */
-:deep(.el-table .cell) {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: var(--ink-3, #94A3B8);
+  background: var(--rr-bg-card, #FFFFFF);
+  border: 1px solid var(--rr-border-color, #E2E8F0);
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+  &__info { color: var(--ink-3, #94A3B8); }
 }
 </style>
diff --git a/src/components/ListTabs/ListTabs.vue b/src/components/ListTabs/ListTabs.vue
index 7cfd5ec..ef16ea3 100644
--- a/src/components/ListTabs/ListTabs.vue
+++ b/src/components/ListTabs/ListTabs.vue
@@ -1,19 +1,10 @@
 <script setup lang="ts">
 /**
- * F006 通用 ListTabs 组件 (W17 设计规范整改)
+ * F006 通用 ListTabs 组件 (W17 设计规范 v2 整改)
  *
- * 状态 tab + 数字 badge, 完全按设计规范:
- *   全部 128    待报价 23    进行中 45    已完成 52    已取消 8
+ * 按 ui-preview-v2.html 模板: padding 9px 16px + 下划线高亮 + tab-count 圆角 pill
  *
- * 用法:
- *   <ListTabs
- *     v-model="activeTab"
- *     :items="[
- *       { key: 'all', label: '全部', count: 128 },
- *       { key: 'pending', label: '待报价', count: 23 },
- *       ...
- *     ]"
- *   />
+ *   全部 [128]    待报价 [23]    进行中 [45]    已完成 [52]    已取消 [8]
  */
 export interface ListTabItem {
   key: string
@@ -57,61 +48,47 @@ function onClick(key: string) {
 .rr-list-tabs {
   display: flex;
   align-items: center;
-  gap: 32px;
-  padding: 0 0 12px 0;
-  border-bottom: 1px solid var(--rr-border-color, #E2E8F0);
-  margin-bottom: 16px;
+  gap: 0;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--border, #E2E8F0);
 }
 .rr-list-tab {
+  padding: 9px 16px;
+  font-size: 13px;
+  color: var(--ink-3, #64748B);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  font-weight: 500;
+  position: relative;
+  user-select: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 0;
-  font-size: 14px;
-  color: var(--rr-text-secondary, #475569);
-  cursor: pointer;
-  position: relative;
-  user-select: none;
-  transition: color 0.2s;
 
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -13px;
-    height: 2px;
-    background: transparent;
-    border-radius: 1px;
-    transition: background 0.2s;
-  }
-
-  &:hover {
-    color: var(--rr-color-primary, #2563EB);
-  }
+  &:hover { color: var(--ink, #0F172A); }
 
   &.is-active {
-    color: var(--rr-color-primary, #2563EB);
+    color: var(--brand, #2563EB);
     font-weight: 600;
-
-    &::after {
-      background: var(--rr-color-primary, #2563EB);
-    }
-  }
-
-  &__label {
-    line-height: 1;
+    border-bottom-color: var(--brand, #2563EB);
   }
 
   &__count {
-    font-size: 12px;
-    color: var(--rr-text-tertiary, #94A3B8);
-    font-weight: 400;
-    line-height: 1;
+    font-size: 11px;
+    background: var(--surface-2, #F1F5F9);
+    color: var(--ink-4, #94A3B8);
+    padding: 0 6px;
+    border-radius: 999px;
+    font-weight: 500;
+    line-height: 18px;
+    min-width: 20px;
+    text-align: center;
   }
 
   &.is-active &__count {
-    color: var(--rr-color-primary, #2563EB);
+    background: var(--brand-soft, rgba(37, 99, 235, 0.08));
+    color: var(--brand, #2563EB);
   }
 }
 </style>
diff --git a/src/components/PageHeader/PageHeader.vue b/src/components/PageHeader/PageHeader.vue
index 73ffaf1..daf90aa 100644
--- a/src/components/PageHeader/PageHeader.vue
+++ b/src/components/PageHeader/PageHeader.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
- * F006 通用 PageHeader 组件 (W17 设计规范整改)
+ * F006 通用 PageHeader 组件 (W17 设计规范 v2 整改)
  *
- * 页面头: 卡片化 (白底圆角阴影) + 标题 + 副标题 + 操作按钮区
+ * 页面头: 标题 + 副标题 + 操作按钮区 (按 ui-preview-v2.html 模板, 无卡片化)
  *
  * 用法:
  *   <PageHeader title="订单管理" :sub="`共 ${total} 条`">
@@ -13,16 +13,14 @@
 interface Props {
   title: string
   sub?: string
-  bordered?: boolean
 }
 withDefaults(defineProps<Props>(), {
-  sub: '',
-  bordered: true
+  sub: ''
 })
 </script>
 
 <template>
-  <div class="rr-page-header" :class="{ 'is-bordered': bordered }">
+  <div class="rr-page-header">
     <div class="rr-page-header-text">
       <h2 class="rr-page-title">{{ title }}</h2>
       <p v-if="sub" class="rr-page-sub">{{ sub }}</p>
@@ -36,14 +34,8 @@ withDefaults(defineProps<Props>(), {
 <style scoped lang="scss">
 .rr-page-header {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 16px;
-  padding: 20px 24px;
-  background: var(--rr-bg-card, #FFFFFF);
-  border: 1px solid var(--rr-border-color, #E2E8F0);
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
   margin-bottom: 16px;
 }
 .rr-page-header-text {
@@ -51,16 +43,17 @@ withDefaults(defineProps<Props>(), {
   min-width: 0;
 }
 .rr-page-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--rr-text-primary, #0F172A);
-  margin: 0 0 4px 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ink, #0F172A);
+  margin: 0;
   line-height: 1.3;
+  letter-spacing: -0.02em;
 }
 .rr-page-sub {
-  color: var(--rr-text-tertiary, #94A3B8);
   font-size: 12.5px;
-  margin: 0;
+  color: var(--ink-3, #64748B);
+  margin: 2px 0 0 0;
   line-height: 1.4;
 }
 .rr-page-actions {
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 82d1337..c37ceb3 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -1,30 +1,21 @@
 <script setup lang="ts">
 /**
- * F006 通用 SearchBar 组件 (W17 设计规范整改)
+ * F006 通用 SearchBar 组件 (W17 设计规范 v2 整改)
  *
- * 标准搜索条: 紧凑布局 + 已选 chip 标签 + 查询/重置按钮
+ * 按 ui-preview-v2.html 模板: 紧凑布局 + 无 label + 同行末尾 chip + 简洁按钮
  *
  * 用法:
  *   <SearchBar
  *     v-model:filters="filters"
  *     :fields="[
  *       { key: 'name', label: '名称', type: 'text', placeholder: '请输入' },
- *       { key: 'status', label: '状态', type: 'select', options: [...] },
- *       { key: 'date', label: '日期', type: 'daterange' }
+ *       { key: 'status', label: '状态', type: 'select', options: [...] }
  *     ]"
  *     @search="onSearch"
  *     @reset="onReset"
  *   />
- *
- * 字段类型:
- *   - text:     el-input
- *   - select:   el-select + options
- *   - date:     el-date-picker (单日)
- *   - daterange: el-date-picker type=datertange
- *   - number:   el-input-number
  */
 import { computed } from 'vue'
-import { Close } from '@element-plus/icons-vue'
 
 export interface SearchFieldOption {
   value: any
@@ -39,6 +30,7 @@ export interface SearchField {
   options?: SearchFieldOption[]
   width?: number | string
   clearable?: boolean
+  showLabel?: boolean
 }
 
 interface Props {
@@ -46,11 +38,13 @@ interface Props {
   fields: SearchField[]
   showReset?: boolean
   showChips?: boolean
+  showLabel?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showReset: true,
-  showChips: true
+  showChips: true,
+  showLabel: false
 })
 
 const emit = defineEmits<{
@@ -65,22 +59,15 @@ const localFilters = computed({
 })
 
 function onSearch() { emit('search') }
-
 function onReset() {
   for (const f of props.fields) {
-    if (f.type === 'daterange') {
-      localFilters.value[f.key] = []
-    } else if (f.type === 'number') {
-      localFilters.value[f.key] = undefined
-    } else {
-      localFilters.value[f.key] = ''
-    }
+    if (f.type === 'daterange') localFilters.value[f.key] = []
+    else if (f.type === 'number') localFilters.value[f.key] = undefined
+    else localFilters.value[f.key] = ''
   }
   emit('reset')
 }
-
 function onEnter() { onSearch() }
-
 function onClearField(key: string) {
   const f = props.fields.find(it => it.key === key)
   if (!f) return
@@ -89,7 +76,6 @@ function onClearField(key: string) {
   else localFilters.value[key] = ''
 }
 
-// 提取已选 chip
 const activeChips = computed(() => {
   return props.fields
     .map(f => {
@@ -116,7 +102,7 @@ const activeChips = computed(() => {
   <div class="rr-search-bar">
     <div class="rr-search-bar__row">
       <div class="rr-search-bar__field" v-for="f in fields" :key="f.key">
-        <span class="rr-search-bar__label">{{ f.label }}</span>
+        <span v-if="showLabel || f.showLabel" class="rr-search-bar__label">{{ f.label }}</span>
         <el-input
           v-if="f.type === 'text' || !f.type"
           v-model="localFilters[f.key]"
@@ -130,7 +116,7 @@ const activeChips = computed(() => {
           v-model="localFilters[f.key]"
           :placeholder="f.placeholder || `请选择${f.label}`"
           :clearable="f.clearable !== false"
-          :style="{ width: f.width || 180 }"
+          :style="{ width: f.width || 160 }"
         >
           <el-option
             v-for="opt in f.options || []"
@@ -164,86 +150,69 @@ const activeChips = computed(() => {
           :style="{ width: f.width || 180 }"
         />
       </div>
-      <div class="rr-search-bar__actions">
-        <el-button type="primary" @click="onSearch">查询</el-button>
-        <el-button v-if="showReset" @click="onReset">重置</el-button>
+      <div class="rr-search-bar__chips" v-if="showChips && activeChips.length">
+        <div
+          v-for="c in activeChips"
+          :key="c.key"
+          class="rr-search-bar__chip"
+        >
+          {{ c.label }}
+          <span class="rr-search-bar__chip-close" @click="onClearField(c.key)">×</span>
+        </div>
+      </div>
+      <div class="rr-search-bar__actions">
+        <el-button type="primary" size="small" @click="onSearch">查询</el-button>
+        <el-button v-if="showReset" size="small" @click="onReset">重置</el-button>
       </div>
-    </div>
-    <div v-if="showChips && activeChips.length" class="rr-search-bar__chips">
-      <span class="rr-search-bar__chips-label">已选:</span>
-      <el-tag
-        v-for="c in activeChips"
-        :key="c.key"
-        class="rr-search-bar__chip"
-        closable
-        :disable-transitions="true"
-        @close="onClearField(c.key)"
-      >
-        {{ c.label }}
-      </el-tag>
-      <el-link v-if="activeChips.length > 1" type="primary" :underline="false" @click="onReset" class="rr-search-bar__clear-all">
-        清空
-      </el-link>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .rr-search-bar {
-  padding: 16px 20px;
-  background: var(--rr-bg-card, #FFFFFF);
-  border: 1px solid var(--rr-border-color, #E2E8F0);
-  border-radius: 8px;
-  margin-bottom: 16px;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
-
+  margin-bottom: 14px;
   &__row {
     display: flex;
+    align-items: center;
+    gap: 10px;
     flex-wrap: wrap;
-    align-items: center;
-    gap: 12px 16px;
   }
-
   &__field {
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 8px;
   }
-
   &__label {
     font-size: 13px;
-    color: var(--rr-text-secondary, #475569);
-    white-space: nowrap;
-    flex-shrink: 0;
+    color: var(--ink-2, #334155);
+    margin-right: 6px;
+  }
+  &__chips {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    background: var(--brand-soft, rgba(37, 99, 235, 0.08));
+    color: var(--brand, #2563EB);
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 500;
+    &-close {
+      cursor: pointer;
+      opacity: 0.6;
+      font-size: 14px;
+      line-height: 1;
+      &:hover { opacity: 1; }
+    }
   }
-
   &__actions {
-    display: flex;
+    display: inline-flex;
     gap: 8px;
     margin-left: auto;
   }
-
-  &__chips {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px dashed var(--rr-border-color, #E2E8F0);
-  }
-
-  &__chips-label {
-    font-size: 12px;
-    color: var(--rr-text-tertiary, #94A3B8);
-  }
-
-  &__chip {
-    font-size: 12px;
-  }
-
-  &__clear-all {
-    font-size: 12px;
-  }
 }
 </style>
diff --git a/src/modules/user/UserListView.vue b/src/modules/user/UserListView.vue
index 1ca40a8..4ccd0ec 100644
--- a/src/modules/user/UserListView.vue
+++ b/src/modules/user/UserListView.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
 /**
- * F006 用户管理 (前台用户列表) - W17 设计规范完整版
+ * F006 用户管理 (前台用户列表) - W17 设计规范 v2 完整版
  *
- * 9 列 + 6 搜索 + 4 操作, 符合设计规范:
- *   - 状态 chip (是否企业认证 / 禁用标识)
- *   - 操作列 el-link + 竖线分隔
- *   - 白卡片化表格
+ * 按 ui-preview-v2.html 模板: 9 列 + 6 搜索 + 4 操作 + 状态 tab
  */
-import { onMounted, ref, reactive } from 'vue'
+import { onMounted, ref, reactive, computed } from 'vue'
 import { httpGet, httpPost } from '@/utils/request'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import DataTable from '@/components/DataTable/DataTable.vue'
 import PageHeader from '@/components/PageHeader/PageHeader.vue'
 import SearchBar from '@/components/SearchBar/SearchBar.vue'
+import ListTabs from '@/components/ListTabs/ListTabs.vue'
 
 interface FrontUser {
   id: string
@@ -31,7 +29,9 @@ interface FrontUser {
 
 const list = ref<FrontUser[]>([])
 const total = ref(0)
+const enabledStats = reactive({ normal: 0, disabled: 0 })
 const loading = ref(false)
+const activeTab = ref('all')
 const query = reactive({
   page: 1,
   limit: 20,
@@ -117,6 +117,9 @@ async function load() {
         raw: it
       }))
       total.value = Number(resp.total || 0)
+      // 统计 (在当前搜索结果中)
+      enabledStats.normal = list.value.filter(u => u.enabled === 1).length
+      enabledStats.disabled = list.value.filter(u => u.enabled === 0).length
     } else {
       list.value = []
       total.value = 0
@@ -130,11 +133,26 @@ async function load() {
   }
 }
 
+const tabItems = computed(() => [
+  { key: 'all', label: '全部', count: total.value },
+  { key: 'normal', label: '正常', count: enabledStats.normal },
+  { key: 'disabled', label: '已禁用', count: enabledStats.disabled }
+])
+
+function onTabChange(key: string) {
+  if (key === 'all') query.enabled = ''
+  else if (key === 'normal') query.enabled = '1'
+  else if (key === 'disabled') query.enabled = '0'
+  query.page = 1
+  load()
+}
+
 function onPageChange(p: number) { query.page = p; load() }
 function onSearch() { query.page = 1; load() }
 function onReset() {
   query.userId = ''; query.nickName = ''; query.mobile = ''
   query.enterpriseName = ''; query.isEnterprise = ''; query.enabled = ''
+  activeTab.value = 'all'
   query.page = 1
   load()
 }
@@ -147,12 +165,8 @@ async function toggleEnabled(row: FrontUser) {
   const next = row.enabled === 1 ? 0 : 1
   const action = next === 1 ? '启用' : '禁用'
   try {
-    await ElMessageBox.confirm(`确认${action}用户「${row.nickName}」?`, `${action}确认`, {
-      type: 'warning'
-    })
-  } catch {
-    return
-  }
+    await ElMessageBox.confirm(`确认${action}用户「${row.nickName}」?`, `${action}确认`, { type: 'warning' })
+  } catch { return }
   try {
     await httpPost('/user/user/update', { id: row.id, enabled: next })
     ElMessage.success(`${action}成功`)
@@ -164,12 +178,8 @@ async function toggleEnabled(row: FrontUser) {
 
 async function deleteUser(row: FrontUser) {
   try {
-    await ElMessageBox.confirm(`确认删除用户「${row.nickName}」?该操作不可恢复`, '删除确认', {
-      type: 'warning'
-    })
-  } catch {
-    return
-  }
+    await ElMessageBox.confirm(`确认删除用户「${row.nickName}」?该操作不可恢复`, '删除确认', { type: 'warning' })
+  } catch { return }
   try {
     await httpPost('/user/user/delete', { id: row.id })
     ElMessage.success('删除成功')
@@ -185,21 +195,21 @@ onMounted(load)
 <template>
   <div class="rr-page">
     <PageHeader title="用户列表" :sub="`管理前台注册用户，共 ${total} 个账号`">
-      <el-button type="primary" :icon="'Plus'" @click="ElMessageBox.alert('导出功能待 W17 完善', '提示', { type: 'info' })">导出</el-button>
-      <el-button type="primary" @click="ElMessageBox.alert('新增用户功能待 W17 完善', '提示', { type: 'info' })">新增</el-button>
+      <el-button @click="ElMessageBox.alert('导出功能待 W17 完善', '提示', { type: 'info' })">导出</el-button>
+      <el-button type="primary" @click="ElMessageBox.alert('新增用户功能待 W17 完善', '提示', { type: 'info' })">+ 新增用户</el-button>
     </PageHeader>
 
+    <ListTabs v-model="activeTab" :items="tabItems" @change="onTabChange" />
+
     <SearchBar
       v-model:filters="query"
       :fields="[
         { key: 'userId', label: '用户ID', type: 'text', placeholder: '用户ID' },
         { key: 'nickName', label: '用户昵称', type: 'text', placeholder: '用户昵称' },
         { key: 'mobile', label: '手机号', type: 'text', placeholder: '手机号' },
-        { key: 'isEnterprise', label: '是否企业认证', type: 'select', placeholder: '是否企业认证',
-          options: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
-        { key: 'enterpriseName', label: '企业名称', type: 'text', placeholder: '企业名称' },
-        { key: 'enabled', label: '禁用标识', type: 'select', placeholder: '禁用标识',
-          options: [{ label: '正常', value: '0' }, { label: '禁用', value: '1' }] }
+        { key: 'isEnterprise', label: '是否企业认证', type: 'select', placeholder: '所有认证',
+          options: [{ label: '已认证', value: '1' }, { label: '未认证', value: '0' }] },
+        { key: 'enterpriseName', label: '企业名称', type: 'text', placeholder: '企业名称' }
       ]"
       @search="onSearch"
       @reset="onReset"
@@ -214,7 +224,7 @@ onMounted(load)
       :limit="query.limit"
       :page-sizes="[10, 20, 50, 100]"
       :show-pagination="true"
-      :carded="true"
+      :borderless="true"
       row-key="id"
       empty-text="暂无用户"
       @page-change="onPageChange"
@@ -240,7 +250,6 @@ onMounted(load)
 
 <style scoped lang="scss">
 .rr-page { max-width: 100%; }
-.user-header { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; }
 .rr-actions {
   display: inline-flex;
   align-items: center;