protable组件抽取，并绘制demo界面

frontend/src/api/config/serviceName.ts

@@ -1,5 +1,9 @@
 
-// 系统&用户模块前缀
+// 系统模块前缀
 export const ADMIN = "/admin";
 
+// 用户模块前缀
+export const USER = "/user-boot";
+
+
 // todo... 其他业务模块前缀

frontend/src/api/interface/index.ts

@@ -1,15 +1,34 @@
-// 请求响应参数（不包含data）
+/**
+ * 该接口声明文件用来声明通用的接口定义，比如 请求参数Base、响应Base、分页等
+ */
+
+/**
+ * 请求响应参数（不包含data）
+ */
 export interface Result {
   code: string;
   message: string;
 }
 
-// 请求响应参数（包含data）
+/**
+ * 请求响应参数（包含data）
+ */
 export interface ResultData<T = any> extends Result {
   data: T;
 }
 
-// 分页响应参数
+
+/**
+ * 分页请求参数
+ */
+export interface ReqPage {
+  pageNum: number;
+  pageSize: number;
+}
+
+/**
+ * 分页响应参数
+ */
 export interface ResPage<T> {
   list: T[];
   pageNum: number;
@@ -17,74 +36,18 @@ export interface ResPage<T> {
   total: number;
 }
 
-// 分页请求参数
+/**
-export interface ReqPage {
+ *  Dict 字典属性
-  pageNum: number;
+ *  id: 唯一标识
-  pageSize: number;
+ *  label: 名称
+ *  code: 类型下唯一标识
+ */
+export interface Dict {
+  id: string;
+  label: string;
+  code: string;
+  children?: Dict[];
 }
 
-// 文件上传模块
-export namespace Upload {
-  export interface ResFileUrl {
-    fileUrl: string;
-  }
-}
 
-// 登录模块
-export namespace Login {
-  export interface ReqLoginForm {
-    username: string;
-    password: string;
-  }
-  export interface ResLogin {
-    accessToken: string;
-  }
-  export interface ResAuthButtons {
-    [key: string]: string[];
-  }
-}
 
-// 用户管理模块
-export namespace User {
-  export interface ReqUserParams extends ReqPage {
-    username: string;
-    gender: number;
-    idCard: string;
-    email: string;
-    address: string;
-    createTime: string[];
-    status: number;
-  }
-  export interface ResUserList {
-    id: string;
-    username: string;
-    gender: number;
-    user: { detail: { age: number } };
-    idCard: string;
-    email: string;
-    address: string;
-    createTime: string;
-    status: number;
-    avatar: string;
-    photo: any[];
-    children?: ResUserList[];
-  }
-  export interface ResStatus {
-    userLabel: string;
-    userValue: number;
-  }
-  export interface ResGender {
-    genderLabel: string;
-    genderValue: number;
-  }
-  export interface ResDepartment {
-    id: string;
-    name: string;
-    children?: ResDepartment[];
-  }
-  export interface ResRole {
-    id: string;
-    name: string;
-    children?: ResDepartment[];
-  }
-}

frontend/src/api/modules/login.ts

@@ -1,26 +0,0 @@
-import { Login } from "@/api/interface/index";
-import { ADMIN } from "@/api/config/serviceName";
-import http from "@/api";
-
-/**
- * @name 登录模块
- */
-// 用户登录
-export const loginApi = (params: Login.ReqLoginForm) => {
-  return http.post<Login.ResLogin>(ADMIN + `/login`, params, { loading: false }); // 正常 post json 请求  ==>  application/json
-};
-
-// 获取菜单列表
-export const getAuthMenuListApi = () => {
-  return http.get<Menu.MenuOptions[]>(ADMIN + `/menu/list`, {}, { loading: false });
-};
-
-// 获取按钮权限
-export const getAuthButtonListApi = () => {
-  return http.get<Login.ResAuthButtons>(ADMIN + `/auth/buttons`, {}, { loading: false });
-};
-
-// 用户退出登录
-export const logoutApi = () => {
-  return http.post(ADMIN + `/logout`);
-};

frontend/src/api/system/dictData.ts

@@ -0,0 +1,48 @@
+/**
+ * 模拟字典静态数据，有后端接口后，需要删除 todo...
+ */
+import { Dict } from '@/api/interface'
+
+const dictData: Dict[] = [
+  {
+    id: "1",
+    code: 'sex',
+    label: '性别',
+    children: [
+      {
+        id: "1",
+        label: '男',
+        code: 1,
+      },
+      {
+        id: "2",
+        label: '女',
+        code: 2,
+      },
+      {
+        id: "3",
+        label: '未知',
+        code: 3,
+      },
+    ],
+  },
+  {
+    id: "2",
+    code: 'status',
+    label: '状态',
+    children: [
+      {
+        id: "123456789",
+        label: '启用',
+        code: 1,
+      },
+      {
+        id: "987654321",
+        label: '禁用',
+        code: 0,
+      },
+    ],
+  },
+]
+
+export default dictData

frontend/src/api/user/interface/index.ts

@@ -0,0 +1,68 @@
+// 登录模块
+import type { ReqPage } from '@/api/interface'
+
+export namespace Login {
+  export interface ReqLoginForm {
+    username: string;
+    password: string;
+  }
+  export interface ResLogin {
+    accessToken: string;
+  }
+  export interface ResAuthButtons {
+    [key: string]: string[];
+  }
+}
+
+
+// 用户管理模块
+export namespace User {
+
+  // 用户列表
+  export interface ResUserList {
+    id: string;
+    username: string;
+    gender: number;
+    age:number;
+    idCard: string;
+    email: string;
+    address: string;
+    createTime: string;
+    status: number;
+    avatar: string;
+    photo: any[];
+    children?: ResUserList[];
+  }
+
+  export interface ReqUserParams extends ReqPage {
+    username: string;
+    gender: number;
+    idCard: string;
+    email: string;
+    address: string;
+    createTime: string[];
+    status: number;
+  }
+
+  export interface ResStatus {
+    userLabel: string;
+    userValue: number;
+  }
+
+  export interface ResGender {
+    genderLabel: string;
+    genderValue: number;
+  }
+
+  export interface ResDepartment {
+    id: string;
+    name: string;
+    children?: ResDepartment[];
+  }
+
+  export interface ResRole {
+    id: string;
+    name: string;
+    children?: ResDepartment[];
+  }
+}

frontend/src/api/user/login.ts

@@ -0,0 +1,26 @@
+import { Login } from './interface'
+import { ADMIN as rePrefix } from '@/api/config/serviceName'
+import http from '@/api'
+
+/**
+ * @name 登录模块
+ */
+// 用户登录
+export const loginApi = (params: Login.ReqLoginForm) => {
+  return http.post<Login.ResLogin>(`${rePrefix}/login`, params, { loading: false })
+}
+
+// 获取菜单列表
+export const getAuthMenuListApi = () => {
+  return http.get<Menu.MenuOptions[]>(`${rePrefix}/menu/list`, {}, { loading: false })
+}
+
+// 获取按钮权限
+export const getAuthButtonListApi = () => {
+  return http.get<Login.ResAuthButtons>(`${rePrefix}/auth/buttons`, {}, { loading: false })
+}
+
+// 用户退出登录
+export const logoutApi = () => {
+  return http.post(`${rePrefix}/logout`)
+}

frontend/src/api/user/user.ts

@@ -1,71 +1,72 @@
-import { ResPage, User } from "@/api/interface/index";
+import { ResPage } from '@/api/interface'
-import { ADMIN } from "@/api/config/serviceName";
+import { User } from './interface'
-import http from "@/api";
+import { ADMIN as rePrefix } from '@/api/config/serviceName'
+import http from '@/api'
 
 /**
  * @name 用户管理模块
  */
 // 获取用户列表
 export const getUserList = (params: User.ReqUserParams) => {
-  return http.post<ResPage<User.ResUserList>>(ADMIN + `/user/list`, params);
+  return http.post<ResPage<User.ResUserList>>(`${rePrefix}/user/list`, params)
-};
+}
 
 // 获取树形用户列表
 export const getUserTreeList = (params: User.ReqUserParams) => {
-  return http.post<ResPage<User.ResUserList>>(ADMIN + `/user/tree/list`, params);
+  return http.post<ResPage<User.ResUserList>>(`${rePrefix}/user/tree/list`, params)
-};
+}
 
 // 新增用户
 export const addUser = (params: { id: string }) => {
-  return http.post(ADMIN + `/user/add`, params);
+  return http.post(`${rePrefix}/user/add`, params)
-};
+}
 
 // 批量添加用户
 export const BatchAddUser = (params: FormData) => {
-  return http.post(ADMIN + `/user/import`, params);
+  return http.post(`${rePrefix}/user/import`, params)
-};
+}
 
 // 编辑用户
 export const editUser = (params: { id: string }) => {
-  return http.post(ADMIN + `/user/edit`, params);
+  return http.post(`${rePrefix}/user/edit`, params)
-};
+}
 
 // 删除用户
 export const deleteUser = (params: { id: string[] }) => {
-  return http.post(ADMIN + `/user/delete`, params);
+  return http.post(`${rePrefix}/user/delete`, params)
-};
+}
 
 // 切换用户状态
 export const changeUserStatus = (params: { id: string; status: number }) => {
-  return http.post(ADMIN + `/user/change`, params);
+  return http.post(`${rePrefix}/user/change`, params)
-};
+}
 
 // 重置用户密码
 export const resetUserPassWord = (params: { id: string }) => {
-  return http.post(ADMIN + `/user/rest_password`, params);
+  return http.post(`${rePrefix}/user/rest_password`, params)
-};
+}
 
 // 导出用户数据
 export const exportUserInfo = (params: User.ReqUserParams) => {
-  return http.download(ADMIN + `/user/export`, params);
+  return http.download(`${rePrefix}/user/export`, params)
-};
+}
 
 // 获取用户状态字典
 export const getUserStatus = () => {
-  return http.get<User.ResStatus[]>(ADMIN + `/user/status`);
+  return http.get<User.ResStatus[]>(`${rePrefix}/user/status`)
-};
+}
 
 // 获取用户性别字典
 export const getUserGender = () => {
-  return http.get<User.ResGender[]>(ADMIN + `/user/gender`);
+  return http.get<User.ResGender[]>(`${rePrefix}/user/gender`)
-};
+}
 
 // 获取用户部门列表
 export const getUserDepartment = () => {
-  return http.get<User.ResDepartment[]>(ADMIN + `/user/department`);
+  return http.get<User.ResDepartment[]>(`${rePrefix}/user/department`)
-};
+}
 
 // 获取用户角色字典
 export const getUserRole = () => {
-  return http.get<User.ResRole[]>(ADMIN + `/user/role`);
+  return http.get<User.ResRole[]>(`${rePrefix}/user/role`)
-};
+}

frontend/src/api/user/userData.ts

@@ -0,0 +1,148 @@
+const data = [
+  {
+    'id': '623689732233728549',
+    'username': '薛霞',
+    'gender': 2,
+    'age': 14,
+    'idCard': '623689732233728549',
+    'email': 'k.ckfkzrnhd@voyvhqubs.sl',
+    'address': '浙江省 温州市',
+    'createTime': '1985-04-15 15:42:29',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '621003764863621316',
+    'username': '冯敏',
+    'gender': 1,
+    'age': 16,
+    'idCard': '621003764863621316',
+    'email': 'h.obqq@cpyirry.bt',
+    'address': '内蒙古自治区 兴安盟',
+    'createTime': '2003-03-24 22:30:36',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+  {
+    'id': '652286556713195552',
+    'username': '潘霞',
+    'gender': 1,
+    'age': 28,
+    'idCard': '652286556713195552',
+    'email': 'b.ttcn@xrxuorb.gov.cn',
+    'address': '河南省 安阳市',
+    'createTime': '1998-01-16 11:23:33',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '373930342176416776',
+    'username': '郝秀英',
+    'gender': 1,
+    'age': 17,
+    'idCard': '373930342176416776',
+    'email': 'x.fatyfu@udqgch.tv',
+    'address': '黑龙江省 哈尔滨市',
+    'createTime': '1987-09-22 06:43:43',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
+  },
+  {
+    'id': '429621442453555775',
+    'username': '吕洋',
+    'gender': 1,
+    'age': 22,
+    'idCard': '429621442453555775',
+    'email': 's.uirhkbc@bkkvzztn.cv',
+    'address': '天津 天津市',
+    'createTime': '1982-10-31 09:42:09',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QR57a.jpg',
+  },
+  {
+    'id': '387231964476618937',
+    'username': '江磊',
+    'gender': 1,
+    'age': 28,
+    'idCard': '387231964476618937',
+    'email': 'c.pbov@vusetqkrnx.net',
+    'address': '香港特别行政区 九龙',
+    'createTime': '1999-12-24 09:06:37',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '604013348875476647',
+    'username': '姚静',
+    'gender': 1,
+    'age': 15,
+    'idCard': '604013348875476647',
+    'email': 'g.nplhpxqmm@bttefv.ru',
+    'address': '西藏自治区 昌都地区',
+    'createTime': '2020-08-05 12:22:15',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRa0s.jpg',
+  },
+  {
+    'id': '028222596330483467',
+    'username': '龙艳',
+    'gender': 1,
+    'age': 17,
+    'idCard': '028222596330483467',
+    'email': 'e.acjsi@bbjk.ci',
+    'address': '云南省 普洱市',
+    'createTime': '1971-03-07 06:13:10',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRqMK.jpg',
+  },
+  {
+    'id': '739427478368274267',
+    'username': '武涛',
+    'gender': 1,
+    'age': 18,
+    'idCard': '739427478368274267',
+    'email': 'x.hlwyeply@bcvejqss.bt',
+    'address': '香港特别行政区 香港岛',
+    'createTime': '1975-09-27 01:24:19',
+    'status': 1,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRa0s.jpg',
+  },
+  {
+    'id': '448686878612127243',
+    'username': '孙芳',
+    'gender': 1,
+    'age': 17,
+    'idCard': '448686878612127243',
+    'email': 'j.cmwtpc@xovygkdk.sc',
+    'address': '云南省 西双版纳傣族自治州',
+    'createTime': '1987-04-22 14:09:59',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+  {
+    'id': '448686878612127244',
+    'username': '孙芳1',
+    'gender': 1,
+    'age': 17,
+    'idCard': '448686878612127243',
+    'email': 'j.cmwtpc@xovygkdk.sc',
+    'address': '云南省 西双版纳傣族自治州',
+    'createTime': '1987-04-22 14:09:59',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+  {
+    'id': '448686878612127245',
+    'username': '孙芳2',
+    'gender': 1,
+    'age': 17,
+    'idCard': '448686878612127243',
+    'email': 'j.cmwtpc@xovygkdk.sc',
+    'address': '云南省 西双版纳傣族自治州',
+    'createTime': '1987-04-22 14:09:59',
+    'status': 0,
+    'avatar': 'https://i.imgtg.com/2023/01/16/QRBHS.jpg',
+  },
+]
+
+export default data

frontend/src/components/Grid/components/GridItem.vue

@@ -52,13 +52,13 @@ const style = computed(() => {
   let offset = props[breakPoint.value]?.offset ?? props.offset;
   if (props.suffix) {
     return {
-      gridColumnStart: cols.value - span - offset + 1,
+      gridColumnStart: cols.value - span - offset + 2,
       gridColumnEnd: `span ${span + offset}`,
       marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
     };
   } else {
     return {
-      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset }/span ${
           span + offset > cols.value ? cols.value : span + offset
       }`,
       marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"

frontend/src/layouts/components/Header/components/Avatar.vue

@@ -35,7 +35,7 @@
 import { ref } from "vue";
 import { LOGIN_URL } from "@/config";
 import { useRouter } from "vue-router";
-import { logoutApi } from "@/api/modules/login";
+import { logoutApi } from "@/api/user/login";
 import { useUserStore } from "@/stores/modules/user";
 import { ElMessageBox, ElMessage } from "element-plus";
 import InfoDialog from "./InfoDialog.vue";

frontend/src/stores/constant.ts

@@ -14,3 +14,6 @@ export  const  TABS_STORE_KEY = "cn-tabs";
 // pinia中user store的key
 export  const  USER_STORE_KEY = "cn-user";
 
+// pinia中dict store的key
+export  const  DICT_STORE_KEY = "cn-dictData";
+

frontend/src/stores/modules/auth.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { AuthState } from "@/stores/interface";
-import { getAuthButtonListApi, getAuthMenuListApi } from "@/api/modules/login";
+import { getAuthButtonListApi, getAuthMenuListApi } from "@/api/user/login";
 import {
   getFlatMenuList,
   getShowMenuList,

frontend/src/stores/modules/dict.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import piniaPersistConfig from '@/stores/helper/persist'
+import { DICT_STORE_KEY } from '@/stores/constant'
+// 模拟数据
+import dictData from '@/api/system/dictData'
+
+export const useDictStore = defineStore({
+  id: DICT_STORE_KEY,
+  state: () => ({
+    dictData,
+  }),
+  getters: {},
+  actions: {
+    // 获取字典数据数组，如果为空则返回空数组
+    getDictData(code: string) {
+      const dict = this.dictData.find(item => item.code === code )
+      return dict?.children || []
+    },
+    // 初始化获取全部字典数据并缓存
+  },
+  persist: piniaPersistConfig(DICT_STORE_KEY),
+})

frontend/src/views/demo/proTable/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class='table-box'>
+    <ProTable
+      ref='proTable'
+      :columns='columns'
+      :data='userData'
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader='scope'>
+        <el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增')">新增用户</el-button>
+        <el-button type='primary' :icon='Upload' plain @click='batchAdd'>批量添加用户</el-button>
+        <el-button type='primary' :icon='Download' plain @click='downloadFile'>导出用户数据</el-button>
+        <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                   @click='batchDelete(scope.selectedListIds)'>
+          批量删除用户
+        </el-button>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation='scope'>
+        <el-button v-if='scope.row.status === 1' type='primary' link :icon='View'
+                   @click="openDrawer('查看', scope.row)">查看
+        </el-button>
+        <el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
+        <el-button type='primary' link :icon='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
+        <el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
+      </template>
+
+    </ProTable>
+  </div>
+</template>
+
+<script setup lang='tsx' name='useProTable'>
+import { User } from '@/api/user/interface'
+import { useHandleData } from '@/hooks/useHandleData'
+import { useDownload } from '@/hooks/useDownload'
+import { useAuthButtons } from '@/hooks/useAuthButtons'
+import ProTable from '@/components/ProTable/index.vue'
+import ImportExcel from '@/components/ImportExcel/index.vue'
+import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
+import userDataList from '@/api/user/userData'
+import { useDictStore } from '@/stores/modules/dict'
+
+const dictStore = useDictStore()
+
+import {
+  getUserList,
+  deleteUser,
+  changeUserStatus,
+  resetUserPassWord,
+  exportUserInfo,
+  BatchAddUser,
+  getUserStatus,
+} from '@/api/user/user'
+
+const userData = userDataList
+
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({ type: 1 })
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const dataCallback = (data: any) => {
+  return {
+    list: data.list,
+    total: data.total,
+  }
+}
+
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+  let newParams = JSON.parse(JSON.stringify(params))
+  newParams.createTime && (newParams.startTime = newParams.createTime[0])
+  newParams.createTime && (newParams.endTime = newParams.createTime[1])
+  delete newParams.createTime
+  return getUserList(newParams)
+}
+
+// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
+const { BUTTONS } = useAuthButtons()
+
+// 表格配置项
+const columns = reactive<ColumnProps<User.ResUserList>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  { type: 'index', fixed: 'left', width: 70, label: '序号' },
+  {
+    prop: 'username',
+    label: '用户姓名',
+    search: { el: 'input', tooltip: '我是搜索提示' },
+  },
+  {
+    prop: 'gender',
+    label: '性别',
+    // 字典数据（本地数据）
+    enum: dictStore.getDictData('sex'),
+    search: { el: 'select', props: { filterable: true } },
+    fieldNames: { label: 'label', value: 'code' },
+  },
+  {
+    prop: 'age',
+    label: '年龄',
+    search: {
+      // 自定义 search 显示内容
+      render: ({ searchParam }) => {
+        return (
+          <div class='flx-center'>
+            <el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
+            <span class='mr10 ml10'>-</span>
+            <el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
+          </div>
+        )
+      },
+    },
+  },
+  { prop: 'idCard', label: '身份证号', search: { el: 'input' } },
+  { prop: 'email', label: '邮箱' },
+  { prop: 'address', label: '居住地址' },
+  {
+    prop: 'status',
+    label: '用户状态',
+    enum: dictStore.getDictData('status'),
+    search: { el: 'tree-select', props: { filterable: true } },
+    fieldNames: { label: 'userLabel', value: 'userStatus' },
+    render: scope => {
+      return (
+        <>
+          {BUTTONS.value.status ? (
+            <el-switch
+              model-value={scope.row.status}
+              active-text={scope.row.status ? '启用' : '禁用'}
+              active-value={1}
+              inactive-value={0}
+              onClick={() => changeStatus(scope.row)}
+            />
+          ) : (
+            <el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
+          )}
+        </>
+      )
+    },
+  },
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    width: 180,
+    search: {
+      el: 'date-picker',
+      span: 1,
+      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
+      defaultValue: ['2024-11-12', '2024-12-12'],
+    },
+  },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
+])
+
+// 删除用户信息
+const deleteAccount = async (params: User.ResUserList) => {
+  await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
+  proTable.value?.getTableList()
+}
+
+// 批量删除用户信息
+const batchDelete = async (id: string[]) => {
+  await useHandleData(deleteUser, { id }, '删除所选用户信息')
+  proTable.value?.clearSelection()
+  proTable.value?.getTableList()
+}
+
+// 重置用户密码
+const resetPass = async (params: User.ResUserList) => {
+  await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
+  proTable.value?.getTableList()
+}
+
+// 切换用户状态
+const changeStatus = async (row: User.ResUserList) => {
+  await useHandleData(changeUserStatus, {
+    id: row.id,
+    status: row.status == 1 ? 0 : 1,
+  }, `切换【${row.username}】用户状态`)
+  proTable.value?.getTableList()
+}
+
+// 导出用户列表
+const downloadFile = async () => {
+  ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
+    useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
+  )
+}
+
+// 批量添加用户
+const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
+const batchAdd = () => {
+  const params = {
+    title: '用户',
+    tempApi: exportUserInfo,
+    importApi: BatchAddUser,
+    getTableList: proTable.value?.getTableList,
+  }
+  dialogRef.value?.acceptParams(params)
+}
+
+// 打开 drawer(新增、查看、编辑)
+const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
+
+}
+
+
+</script>

frontend/src/views/login/components/LoginForm.vue

@@ -58,7 +58,7 @@ import { HOME_URL } from "@/config";
 import { getTimeState } from "@/utils";
 import { Login } from "@/api/interface";
 import { ElNotification } from "element-plus";
-import { loginApi } from "@/api/modules/login";
+import { loginApi } from "@/api/user/login";
 import { useUserStore } from "@/stores/modules/user";
 import { useTabsStore } from "@/stores/modules/tabs";
 import { useKeepAliveStore } from "@/stores/modules/keepAlive";

frontend/src/views/machine/testScript/index.vue

@@ -1,9 +1,9 @@
 <template>
-<div>检测脚本</div>
+  <div>检测脚本</div>
 </template>
 <script lang='ts' setup>
 onMounted(()=>{
-console.log()
+  console.log()
 })
 </script>
 <style lang='scss' scoped>

frontend/tsconfig.json

@@ -9,12 +9,14 @@
     }
   ],
   "compilerOptions": {
+    "strict": true,
+    "alwaysStrict": true,
+    "strictFunctionTypes": true,
     "target": "esnext",
     "declaration": true,
     "useDefineForClassFields": true,
     "module": "esnext",
     "moduleResolution": "Node",
-    "strict": true,
     "jsx": "preserve",
     "jsxImportSource": "vue",
     "allowJs": true,