refactor: ♻️ 用户列表调整为卡片显示

.prettierrc.yaml

@@ -0,0 +1,41 @@
+# 在单参数箭头函数中始终添加括号
+arrowParens: "always"
+# JSX 多行元素的闭合标签另起一行
+bracketSameLine: false
+# 对象字面量中的括号之间添加空格
+bracketSpacing: true
+# 自动格式化嵌入的代码（如 Markdown 和 HTML 内的代码）
+embeddedLanguageFormatting: "auto"
+# 忽略 HTML 空白敏感度，将空白视为非重要内容
+htmlWhitespaceSensitivity: "ignore"
+# 不插入 @prettier 的 pragma 注释
+insertPragma: false
+# 在 JSX 中使用双引号
+jsxSingleQuote: false
+# 每行代码的最大长度限制为 100 字符
+printWidth: 100
+# 在 Markdown 中保留原有的换行格式
+proseWrap: "preserve"
+# 仅在必要时添加对象属性的引号
+quoteProps: "as-needed"
+# 不要求文件开头插入 @prettier 的 pragma 注释
+requirePragma: false
+# 在语句末尾添加分号
+semi: true
+# 使用双引号而不是单引号
+singleQuote: false
+# 缩进使用 2 个空格
+tabWidth: 2
+# 在多行元素的末尾添加逗号（ES5 支持的对象、数组等）
+trailingComma: "es5"
+# 使用空格而不是制表符缩进
+useTabs: false
+# Vue 文件中的 <script> 和 <style> 不增加额外的缩进
+vueIndentScriptAndStyle: false
+# 根据系统自动检测换行符
+endOfLine: "auto"
+# 对 HTML 文件应用特定格式化规则
+overrides:
+  - files: "*.html"
+    options:
+      parser: "html"

eslint.config.mjs

@@ -15,7 +15,7 @@ import * as parserTypeScript from "@typescript-eslint/parser";
 
 // 定义 ESLint 配置
 export default [
-  // 通用 JavaScript/TypeScript 配置
+  // 通用 JavaScript 配置
   {
     ...js.configs.recommended,
     ignores: [
@@ -39,11 +39,11 @@ export default [
     rules: {
       ...configPrettier.rules,
       ...pluginPrettier.configs.recommended.rules,
-      "no-debug": "off", // 允许使用 debugger
+      "no-debug": "off", // 禁止 debugger
       "prettier/prettier": [
         "error",
         {
-          endOfLine: "auto", // 解决换行符冲突
+          endOfLine: "auto", // 自动识别换行符
         },
       ],
     },
@@ -62,7 +62,7 @@ export default [
       "@typescript-eslint": pluginTypeScript,
     },
     rules: {
-      ...pluginTypeScript.configs.recommended.rules,
+      ...pluginTypeScript.configs.strict.rules,
       "@typescript-eslint/no-explicit-any": "off", // 允许使用 any
       "@typescript-eslint/no-empty-function": "off", // 允许空函数
       "@typescript-eslint/no-empty-object-type": "off", // 允许空对象类型
@@ -77,8 +77,9 @@ export default [
   {
     files: ["**/*.d.ts"],
     rules: {
-      "eslint-comments/no-unlimited-disable": "off", // 关闭 eslint 注释相关规则
+      "eslint-comments/no-unlimited-disable": "off",
-      "unused-imports/no-unused-vars": "off", // 忽略未使用的导入
+      "unused-imports/no-unused-vars": "off",
+      "@typescript-eslint/ban-ts-comment": "off", // 允许使用 @ts-nocheck 注释
     },
   },
 

prettier.config.mjs

@@ -1,8 +0,0 @@
-export default {
-  printWidth: 100, // 每行最多字符数量，超出换行(默认80)
-  tabWidth: 2, // 缩进空格数，默认2个空格
-  useTabs: false, // 指定缩进方式，空格或tab，默认false，即使用空格
-  semi: true, // 使用分号
-  singleQuote: false, // 使用单引号 (true:单引号;false:双引号)
-  trailingComma: 'all', // 末尾使用逗号
-};

src/api/system/user.ts

@@ -21,7 +21,7 @@ const UserAPI = {
    * @param queryParams 查询参数
    */
   getPage(queryParams: UserPageQuery) {
-    return request<PageResult<Record<string, any>[]>>({
+    return request<PageResult<UserPageVO[]>>({
       url: `${USER_BASE_URL}/page`,
       method: "GET",
       data: queryParams,

src/pages/work/user/index.vue

@@ -1,36 +1,42 @@
 <template>
   <view class="user">
-    <wd-table :data="dataList" @sort-method="handleSort">
+    <wd-search v-model="queryParams.keywords" :maxlength="10" class="mb-2" />
-      <wd-table-col prop="username" label="用户名" :fixed="true" width="150rpx" :sortable="true" />
+
-      <wd-table-col prop="nickname" label="昵称" />
+    <wd-card v-for="item in dataList">
-      <wd-table-col prop="" label="性别" width="120rpx">
+      <template #title>
-        <template #value="{ row }">
+        <view class="flex justify-between">
-          <wd-tag v-if="row.gender == 1" type="primary" mark plain>男</wd-tag>
+          <view class="flex items-center">
-          <wd-tag v-else-if="row.gender == 2" type="danger" mark plain>女</wd-tag>
+            <image class="w-100rpx h-100rpx rounded-full" :src="item.avatar" />
-          <wd-tag v-else mark plain>未知</wd-tag>
+            <view class="ml-2">
-        </template>
+              <view class="font-bold">{{ item.nickname }}</view>
-      </wd-table-col>
+              <view class="text-12px mt-1">{{ item.deptName }}</view>
-      <wd-table-col prop="deptName" label="部门" />
+            </view>
-      <wd-table-col prop="mobile" width="220rpx" label="手机号码" />
+          </view>
-      <wd-table-col prop="" label="状态" width="120rpx">
+          <view>{{ item.createTime }}</view>
-        <template #value="{ row }">
+        </view>
-          <wd-tag v-if="row.status == 1" type="success" mark plain>正常</wd-tag>
+      </template>
-          <wd-tag v-else type="danger" mark plain>停用</wd-tag>
+
-        </template>
+      <view>
-      </wd-table-col>
+        <view class="flex items-center">
-      <wd-table-col prop="createTime" label="创建时间" />
+          <wd-icon name="usergroup" size="16" class="mr-1" />
-      <wd-table-col prop="" :fixed="true" label="操作">
+          <view>{{ item.roleNames }}</view>
-        <template #value="{ row }">
+        </view>
-          <wd-text type="primary" class="cursor-pointer" text="编辑" @click="handleEdit(row)" />
+
-          <wd-text
+        <view class="flex items-center">
-            type="error"
+          <wd-icon name="mobile" size="16" class="mr-1" />
-            class="ml-2 cursor-pointer"
+          <view>{{ item.mobile }}</view>
-            text="删除"
+        </view>
-            @click="handleDelete(row)"
+        <view class="flex items-center">
-          />
+          <wd-icon name="mail" size="16" class="mr-1" />
-        </template>
+          <view>{{ item.email }}</view>
-      </wd-table-col>
+        </view>
-    </wd-table>
+      </view>
+
+      <template #footer>
+        <wd-button size="small" plain>编辑</wd-button>
+        <wd-button type="warning" size="small" plain class="ml-2">删除</wd-button>
+      </template>
+    </wd-card>
 
     <wd-loadmore :state="state" @reload="loadmore" />
   </view>
@@ -40,7 +46,7 @@ import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
 import UserAPI, { type UserPageQuery, UserPageVO } from "@/api/system/user";
 
 const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
-const dataList = ref<Record<string, any>[]>([]);
+const dataList = ref<UserPageVO[]>([]);
 
 const queryParams: UserPageQuery = {
   pageNum: 1,