src/modules/user/UserListView.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 /**
- * F006 用户管理 (前台用户列表) - W17 完整化
+ * F006 用户管理 (前台用户列表) - W17 设计规范整改
  *
- * W17: 补全字段到 9 列(老 vue 等价), 6 搜索条件, 操作列(修改/禁用启用/删除)
+ * W17: 9 列 + 6 搜索 + 4 操作,符合设计规范
  * 走 /user/user/page 后端
+ *
+ * 字段 (从 API 实测):
+ *   id, nickName, mobile, header (头像 URL)
+ *   isEnterprise (0/1), enterpriseName, accountBalance, enabled (0/1)
+ *   createDate (ms)
+ *   total=2284 真实用户
  */
 import { onMounted, ref, reactive } from 'vue'
 import { httpGet, httpPost } from '@/utils/request'
@@ -32,7 +38,7 @@ const total = ref(0)
 const loading = ref(false)
 const query = reactive({
   page: 1,
-  limit: 10,
+  limit: 20,
   userId: '',
   nickName: '',
   mobile: '',
@@ -41,43 +47,43 @@ const query = reactive({
   enabled: '' as '' | '0' | '1'
 })
 
-// 字段定义:用 any 绕过 DataTable Column 类型限制(它支持 slot 字段但未在 type 中声明)
 const columns: any[] = [
-  { type: 'selection', width: 50 },
-  { prop: 'id', label: '用户ID', width: 90 },
-  { prop: 'nickName', label: '用户昵称', minWidth: 140 },
-  { prop: 'mobile', label: '手机号', width: 130 },
+  { type: 'selection', width: 50, fixed: 'left' },
+  { prop: 'id', label: '用户ID', width: 100 },
+  { prop: 'nickName', label: '用户昵称', minWidth: 160 },
+  { prop: 'mobile', label: '手机号', width: 140 },
   {
     prop: 'isEnterprise',
     label: '是否企业认证',
-    width: 110,
+    width: 130,
     formatter: (row: FrontUser) => row.isEnterprise === 1 ? '是' : '否'
   },
   {
     prop: 'enterpriseName',
     label: '关联企业',
-    minWidth: 180,
+    minWidth: 200,
     formatter: (row: FrontUser) => row.enterpriseName || '--'
   },
   {
     prop: 'accountBalance',
     label: '平台账户余额',
-    width: 130,
+    width: 140,
+    align: 'right',
     formatter: (row: FrontUser) => Number(row.accountBalance || 0).toFixed(2)
   },
   {
     prop: 'enabled',
     label: '禁用标识',
-    width: 90,
+    width: 110,
     slot: 'enabled'
   },
   {
     prop: 'createDate',
     label: '注册时间',
-    width: 170,
+    width: 180,
     formatter: (row: FrontUser) => fmtDate(row.createDate)
   },
-  { label: '操作', width: 200, slot: 'action' }
+  { label: '操作', width: 220, slot: 'action', fixed: 'right' }
 ]
 
 function fmtDate(ts: number | null | undefined) {
@@ -208,21 +214,26 @@ onMounted(load)
         :total="total"
         :page="query.page"
         :limit="query.limit"
+        :page-sizes="[10, 20, 50, 100]"
         :show-pagination="true"
         row-key="id"
         empty-text="暂无用户"
         @page-change="onPageChange"
       >
         <template #enabled="{ row }">
-          <el-tag v-if="row.enabled === 1" type="success" size="small">正常</el-tag>
-          <el-tag v-else type="danger" size="small">禁用</el-tag>
+          <el-tag v-if="row.enabled === 1" type="success" size="small" effect="light">正常</el-tag>
+          <el-tag v-else type="danger" size="small" effect="light">禁用</el-tag>
         </template>
         <template #action="{ row }">
-          <el-button link type="primary" size="small" @click="onEdit(row)">修改</el-button>
-          <el-button link :type="row.enabled === 1 ? 'warning' : 'success'" size="small" @click="toggleEnabled(row)">
-            {{ row.enabled === 1 ? '禁用' : '启用' }}
-          </el-button>
-          <el-button link type="danger" size="small" @click="deleteUser(row)">删除</el-button>
+          <span class="rr-actions">
+            <el-link type="primary" :underline="false" @click="onEdit(row)">修改</el-link>
+            <span class="rr-actions__sep">|</span>
+            <el-link :type="row.enabled === 1 ? 'warning' : 'success'" :underline="false" @click="toggleEnabled(row)">
+              {{ row.enabled === 1 ? '禁用' : '启用' }}
+            </el-link>
+            <span class="rr-actions__sep">|</span>
+            <el-link type="danger" :underline="false" @click="deleteUser(row)">删除</el-link>
+          </span>
         </template>
       </DataTable>
     </div>
@@ -232,4 +243,17 @@ onMounted(load)
 <style scoped lang="scss">
 .rr-page { max-width: 1600px; }
 .user-header { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; }
+.rr-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  &__sep {
+    color: var(--rr-border, #e2e8f0);
+    margin: 0 8px;
+    font-size: 12px;
+  }
+  .el-link {
+    font-size: 13px;
+  }
+}
 </style>