Merge branch 'main' of github.com:pure-admin/vue-pure-admin into gitee

CHANGELOG.en_US.md

@@ -465,7 +465,7 @@
 - Add full routing configuration table type declaration
 - Add virtual listing page demo
 - Add `PDF` preview page demo
-- Added export `execl` page demo
+- Added export `excel` page demo
 - Added blank page demo without `Layout`
 
 ### ✔️ refactor

CHANGELOG.md

@@ -465,7 +465,7 @@
 - Add full routing configuration table type declaration
 - Add virtual listing page demo
 - Add `PDF` preview page demo
-- Added export `execl` page demo
+- Added export `excel` page demo
 - Added blank page demo without `Layout`
 
 ### ✔️ refactor

CHANGELOG.zh_CN.md

@@ -464,7 +464,7 @@
 - 添加完整路由配置表类型声明
 - 添加虚拟列表页面 demo
 - 添加 `PDF` 预览页面 demo
-- 添加导出 `execl` 页面 demo
+- 添加导出 `excel` 页面 demo
 - 添加无 `Layout` 的空白页面 demo
 
 ### ✔️ refactor

build/optimize.ts

@@ -11,9 +11,12 @@ const include = [
   "dayjs",
   "axios",
   "pinia",
+  "typeit",
   "swiper",
+  "qrcode",
   "intro.js",
   "vue-i18n",
+  "vue-types",
   "js-cookie",
   "vue-tippy",
   "cropperjs",
@@ -28,6 +31,7 @@ const include = [
   "v-contextmenu",
   "vue-pdf-embed",
   "wavesurfer.js",
+  "swiper/modules",
   "china-area-data",
   "vue-json-pretty",
   "@logicflow/core",

locales/en.yaml

@@ -100,7 +100,7 @@ menus:
   hsSwiper: Swiper Plugin
   hsVirtualList: Virtual List
   hsPdf: PDF Preview
-  hsExecl: Export Excel
+  hsExcel: Export Excel
   hsInfiniteScroll: Table Infinite Scroll
   hsSensitive: Sensitive Filter
   hsPinyin: PinYin

locales/zh-CN.yaml

@@ -100,7 +100,7 @@ menus:
   hsSwiper: Swiper插件
   hsVirtualList: 虚拟列表
   hsPdf: PDF预览
-  hsExecl: 导出Excel
+  hsExcel: 导出Excel
   hsInfiniteScroll: 表格无限滚动
   hsSensitive: 敏感词过滤
   hsPinyin: 汉语拼音

mock/list.ts

@@ -609,7 +609,7 @@ export default [
             {
               created_at: "2022-08-19T07:29:06Z",
               published_at: "2022-08-19T07:31:08Z",
-              body: "# 3.3.5 (2022-8-19)\r\n\r\n### 🎫 Feat\r\n\r\n- 将 `element-plus` 的 `Table` 二次封装到[@pureadmin/table](https://github.com/xiaoxian521/pure-admin-table)，提供灵活的配置项并集成到平台里\r\n- 将 `element-plus` 的 `Descriptions` 二次封装到[@pureadmin/descriptions](https://github.com/xiaoxian521/pure-admin-descriptions)，提供灵活的配置项并集成到平台里\r\n- 将平台的大部分工具以及 hooks 都集中到[@pureadmin/utils](https://pure-admin-utils-docs.vercel.app/)，并删除集中到这个库里的代码，减少平台体积\r\n- 添加[unplugin-vue-define-options](https://www.npmjs.com/package/unplugin-vue-define-options)插件，页面可直接写 `defineOptions({name: 自定义名称})`\r\n- 添加项目文件、语言分析工具 [cloc](https://www.npmjs.com/package/cloc)\r\n- 添加登陆页国际化\r\n- 添加完整路由配置表类型声明\r\n- 添加虚拟列表页面 demo\r\n- 添加 `PDF` 预览页面 demo\r\n- 添加导出 `execl` 页面 demo\r\n- 添加无 `Layout` 的空白页面 demo\r\n\r\n### ✔️ refactor\r\n\r\n- 重构主题色，适配 `element-plus` 暗黑模式（同时也解决了 `3.3.0` 及更低版本中同样的元素 `css` 被多次覆盖，导致样式不好调试的问题）\r\n- 重构路由重置功能\r\n\r\n### 🍏 Perf\r\n\r\n- 兼容项目存放目录以中文命名，但我们真心不推荐中文命名，因为可能某个库没有对中文路径做转义处理，导致项目奔溃\r\n- 优化接口类型\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复路由 `showlink` 为 `false` 的异步路由，刷新后不显示\r\n- 修复当没有 `icon` 时，垂直导航菜单折叠后文字被隐藏"
+              body: "# 3.3.5 (2022-8-19)\r\n\r\n### 🎫 Feat\r\n\r\n- 将 `element-plus` 的 `Table` 二次封装到[@pureadmin/table](https://github.com/xiaoxian521/pure-admin-table)，提供灵活的配置项并集成到平台里\r\n- 将 `element-plus` 的 `Descriptions` 二次封装到[@pureadmin/descriptions](https://github.com/xiaoxian521/pure-admin-descriptions)，提供灵活的配置项并集成到平台里\r\n- 将平台的大部分工具以及 hooks 都集中到[@pureadmin/utils](https://pure-admin-utils-docs.vercel.app/)，并删除集中到这个库里的代码，减少平台体积\r\n- 添加[unplugin-vue-define-options](https://www.npmjs.com/package/unplugin-vue-define-options)插件，页面可直接写 `defineOptions({name: 自定义名称})`\r\n- 添加项目文件、语言分析工具 [cloc](https://www.npmjs.com/package/cloc)\r\n- 添加登陆页国际化\r\n- 添加完整路由配置表类型声明\r\n- 添加虚拟列表页面 demo\r\n- 添加 `PDF` 预览页面 demo\r\n- 添加导出 `excel` 页面 demo\r\n- 添加无 `Layout` 的空白页面 demo\r\n\r\n### ✔️ refactor\r\n\r\n- 重构主题色，适配 `element-plus` 暗黑模式（同时也解决了 `3.3.0` 及更低版本中同样的元素 `css` 被多次覆盖，导致样式不好调试的问题）\r\n- 重构路由重置功能\r\n\r\n### 🍏 Perf\r\n\r\n- 兼容项目存放目录以中文命名，但我们真心不推荐中文命名，因为可能某个库没有对中文路径做转义处理，导致项目奔溃\r\n- 优化接口类型\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复路由 `showlink` 为 `false` 的异步路由，刷新后不显示\r\n- 修复当没有 `icon` 时，垂直导航菜单折叠后文字被隐藏"
             },
             {
               created_at: "2022-05-11T07:51:38Z",

mock/system.ts

@@ -1,86 +1,104 @@
 import { MockMethod } from "vite-plugin-mock";
 
 export default [
-  // 用户
+  // 用户管理
   {
     url: "/user",
     method: "post",
-    response: () => {
+    response: ({ body }) => {
-      return {
+      let list = [
-        success: true,
-        data: {
-          list: [
         {
           username: "admin",
           nickname: "admin",
-              remark: "管理员",
+          avatar: "https://avatars.githubusercontent.com/u/44761321",
-              deptId: 103,
+          phone: "15888886789",
-              postIds: [1],
+          email: "@email",
-              mobile: "15888888888",
           sex: 0,
           id: 1,
-              status: 0,
+          status: 1,
-              createTime: 1605456000000,
           dept: {
+            // 部门id
             id: 103,
+            // 部门名称
             name: "研发部门"
-              }
+          },
+          remark: "管理员",
+          createTime: 1605456000000
         },
         {
-              username: "pure",
+          username: "common",
-              nickname: "pure",
+          nickname: "common",
-              remark: "不要吓我",
+          avatar: "https://avatars.githubusercontent.com/u/52823142",
-              deptId: 104,
+          phone: "18288882345",
-              postIds: [1],
+          email: "@email",
-              mobile: "15888888888",
-              sex: 0,
-              id: 100,
-              status: 1,
-              createTime: 1605456000000,
-              dept: {
-                id: 104,
-                name: "市场部门"
-              }
-            },
-            {
-              username: "小姐姐",
-              nickname: "girl",
-              remark: null,
-              deptId: 106,
-              postIds: null,
-              mobile: "15888888888",
           sex: 1,
-              id: 103,
+          id: 2,
           status: 1,
-              createTime: 1605456000000,
           dept: {
-                id: 106,
+            id: 105,
-                name: "财务部门"
+            name: "测试部门"
-              }
           },
-            {
+          remark: "普通用户",
-              username: "小哥哥",
+          createTime: 1605456000000
-              nickname: "boy",
-              remark: null,
-              deptId: 107,
-              postIds: [],
-              mobile: "15888888888",
-              sex: 0,
-              id: 104,
-              status: 0,
-              createTime: 1605456000000,
-              dept: {
-                id: 107,
-                name: "运维部门"
         }
-            }
+      ];
-          ],
+      list = list.filter(item => item.username.includes(body?.username));
-          total: 4
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      if (body.phone) list = list.filter(item => item.phone === body.phone);
+      if (body.deptId) list = list.filter(item => item.dept.id === body.deptId);
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
         }
       };
     }
   },
-  // 角色
+  // 用户管理-获取所有角色列表
+  {
+    url: "/list-all-role",
+    method: "get",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          { id: 1, name: "超级管理员" },
+          { id: 2, name: "普通角色" }
+        ]
+      };
+    }
+  },
+  // 用户管理-根据userId，获取对应角色id列表（userId：用户id）
+  {
+    url: "/list-role-ids",
+    method: "post",
+    response: ({ body }) => {
+      if (body.userId) {
+        if (body.userId == 1) {
+          return {
+            success: true,
+            data: [1]
+          };
+        } else if (body.userId == 2) {
+          return {
+            success: true,
+            data: [2]
+          };
+        }
+      } else {
+        return {
+          success: false,
+          data: []
+        };
+      }
+    }
+  },
+  // 角色管理
   {
     url: "/role",
     method: "post",
@@ -89,7 +107,6 @@ export default [
         {
           createTime: 1605456000000, // 时间戳（毫秒ms）
           updateTime: 1684512000000,
-          creator: "admin",
           id: 1,
           name: "超级管理员",
           code: "admin",
@@ -99,7 +116,6 @@ export default [
         {
           createTime: 1605456000000,
           updateTime: 1684512000000,
-          creator: "admin",
           id: 2,
           name: "普通角色",
           code: "common",
@@ -123,7 +139,7 @@ export default [
       };
     }
   },
-  // 部门
+  // 部门管理
   {
     url: "/dept",
     method: "post",

package.json

@@ -29,123 +29,124 @@
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@howdyjs/mouse-menu": "^2.0.7",
+    "@howdyjs/mouse-menu": "^2.0.9",
-    "@logicflow/core": "^1.2.9",
+    "@logicflow/core": "^1.2.12",
-    "@logicflow/extension": "^1.2.9",
+    "@logicflow/extension": "^1.2.13",
     "@pureadmin/descriptions": "^1.1.1",
-    "@pureadmin/table": "^2.3.2",
+    "@pureadmin/table": "^2.3.3",
     "@pureadmin/utils": "^1.9.7",
-    "@vueuse/core": "^10.2.0",
+    "@vueuse/core": "^10.4.0",
     "@vueuse/motion": "^2.0.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "@zxcvbn-ts/core": "^3.0.3",
     "animate.css": "^4.1.1",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "china-area-data": "^5.0.1",
-    "cropperjs": "^1.5.13",
+    "cropperjs": "^1.6.0",
-    "dayjs": "^1.11.8",
+    "dayjs": "^1.11.9",
-    "echarts": "^5.4.2",
+    "echarts": "^5.4.3",
     "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "2.3.6",
+    "element-plus": "^2.3.12",
-    "intro.js": "^7.0.1",
+    "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.5",
     "md-editor-v3": "2.7.2",
     "mint-filter": "^4.0.3",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.6",
-    "pinyin-pro": "^3.15.2",
+    "pinyin-pro": "^3.16.3",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.0",
-    "swiper": "^9.4.1",
+    "swiper": "^10.2.0",
     "typeit": "^8.7.1",
     "v-contextmenu": "3.0.0",
-    "v3-infinite-loading": "^1.2.2",
+    "v3-infinite-loading": "^1.3.1",
-    "version-rocket": "^1.6.7",
+    "version-rocket": "^1.7.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
     "vue-pdf-embed": "^1.1.6",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.4",
-    "vue-tippy": "^6.2.0",
+    "vue-tippy": "^6.3.1",
-    "vue-types": "^5.1.0",
+    "vue-types": "^5.1.1",
     "vue-virtual-scroller": "2.0.0-beta.7",
-    "vue-waterfall-plugin-next": "^2.2.1",
+    "vue-waterfall-plugin-next": "^2.2.3",
-    "vue3-danmaku": "^1.4.0",
+    "vue3-danmaku": "^1.5.1",
     "vuedraggable": "^4.1.0",
-    "wavesurfer.js": "^7.0.3",
+    "wavesurfer.js": "^7.1.5",
-    "xgplayer": "^3.0.4",
+    "xgplayer": "^3.0.8",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.6",
+    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.6.6",
+    "@commitlint/config-conventional": "^17.7.0",
     "@iconify-icons/ep": "^1.2.12",
-    "@iconify-icons/ri": "^1.2.9",
+    "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
     "@intlify/unplugin-vue-i18n": "^0.11.0",
     "@pureadmin/theme": "^3.1.0",
     "@types/intro.js": "^5.1.1",
     "@types/js-cookie": "^3.0.3",
     "@types/mockjs": "^1.0.7",
-    "@types/node": "^18.16.18",
+    "@types/node": "^18.17.12",
     "@types/nprogress": "0.2.0",
-    "@types/qrcode": "^1.5.0",
+    "@types/qrcode": "^1.5.1",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.3.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.15",
     "cloc": "^2.11.0",
     "cssnano": "^6.0.1",
-    "eslint": "^8.43.0",
+    "eslint": "^8.48.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^13.3.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.28",
     "postcss-html": "^1.5.0",
     "postcss-import": "^15.1.0",
-    "postcss-scss": "^4.0.6",
+    "postcss-scss": "^4.0.7",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
     "rimraf": "^5.0.1",
     "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.63.6",
+    "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
-    "stylelint": "^15.9.0",
+    "stylelint": "^15.10.3",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^4.2.0",
+    "stylelint-config-recess-order": "^4.3.0",
     "stylelint-config-recommended": "^12.0.0",
     "stylelint-config-recommended-scss": "^12.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-order": "^6.0.3",
     "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^5.0.1",
+    "stylelint-scss": "^5.1.0",
     "svgo": "^3.0.2",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
-    "terser": "^5.18.1",
+    "terser": "^5.19.2",
     "typescript": "5.0.4",
-    "vite": "^4.3.9",
+    "vite": "^4.4.9",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "2.9.6",
     "vite-plugin-remove-console": "^2.1.1",
     "vite-svg-loader": "^4.0.0",
     "vue-eslint-parser": "^9.3.1",
-    "vue-tsc": "^1.8.1"
+    "vue-tsc": "^1.8.8"
   },
   "pnpm": {
     "peerDependencyRules": {

src/App.vue

@@ -9,9 +9,9 @@
 import { defineComponent } from "vue";
 import { checkVersion } from "version-rocket";
 import { ElConfigProvider } from "element-plus";
-import en from "element-plus/lib/locale/lang/en";
+import en from "element-plus/dist/locale/en.mjs";
 import { ReDialog } from "@/components/ReDialog";
-import zhCn from "element-plus/lib/locale/lang/zh-cn";
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
 
 export default defineComponent({
   name: "app",

src/api/system.ts

@@ -1,6 +1,11 @@
 import { http } from "@/utils/http";
 
 type Result = {
+  success: boolean;
+  data?: Array<any>;
+};
+
+type ResultTable = {
   success: boolean;
   data?: {
     /** 列表数据 */
@@ -14,22 +19,27 @@ type Result = {
   };
 };
 
-type ResultDept = {
-  success: boolean;
-  data?: Array<any>;
-};
-
 /** 获取用户管理列表 */
 export const getUserList = (data?: object) => {
-  return http.request<Result>("post", "/user", { data });
+  return http.request<ResultTable>("post", "/user", { data });
+};
+
+/** 用户管理-获取所有角色列表 */
+export const getAllRoleList = () => {
+  return http.request<Result>("get", "/list-all-role");
+};
+
+/** 用户管理-根据userId，获取对应角色id列表（userId：用户id） */
+export const getRoleIds = (data?: object) => {
+  return http.request<Result>("post", "/list-role-ids", { data });
 };
 
 /** 获取角色管理列表 */
 export const getRoleList = (data?: object) => {
-  return http.request<Result>("post", "/role", { data });
+  return http.request<ResultTable>("post", "/role", { data });
 };
 
 /** 获取部门管理列表 */
 export const getDeptList = (data?: object) => {
-  return http.request<ResultDept>("post", "/dept", { data });
+  return http.request<Result>("post", "/dept", { data });
 };

src/components/ReCropper/src/index.tsx

@@ -376,7 +376,7 @@ export default defineComponent({
         appendTo: "parent",
         // hideOnClick: false,
         animation: "perspective",
-        placement: "bottom-start"
+        placement: "bottom-end"
       });
 
       setProps({

src/components/ReDialog/index.ts

@@ -49,7 +49,7 @@ const closeAllDialog = () => {
 /** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
  * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
  * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L18
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L20
  */
 const ReDialog = withInstall(reDialog);
 

src/layout/components/appMain.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 
 const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
 
-const keepAlive = computed(() => {
+const isKeepAlive = computed(() => {
   return $config?.KeepAlive;
 });
 
@@ -86,7 +86,7 @@ const transitionMain = defineComponent({
           </el-backtop>
           <transitionMain :route="route">
             <keep-alive
-              v-if="keepAlive"
+              v-if="isKeepAlive"
               :include="usePermissionStoreHook().cachePageList"
             >
               <component
@@ -106,7 +106,7 @@ const transitionMain = defineComponent({
         <div v-else>
           <transitionMain :route="route">
             <keep-alive
-              v-if="keepAlive"
+              v-if="isKeepAlive"
               :include="usePermissionStoreHook().cachePageList"
             >
               <component

src/layout/components/navbar.vue

@@ -29,9 +29,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 </script>
 
 <template>
-  <div
+  <div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
-    class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
-  >
     <topCollapse
       v-if="device === 'mobile'"
       class="hamburger-container"

src/layout/components/notice/data.ts

@@ -103,7 +103,7 @@ export const noticesData: TabItem[] = [
   },
   {
     key: "3",
-    name: "代办",
+    name: "待办",
     list: [
       {
         avatar: "",

src/layout/components/sidebar/vertical.vue

@@ -80,7 +80,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     v-loading="loading"
-    :class="['sidebar-container', showLogo ? 'has-logo' : '']"
+    :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
   >
     <Logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar

src/layout/components/tag/index.scss

@@ -90,7 +90,7 @@
     }
   }
 
-  a {
+  .tag-title {
     padding: 0 4px;
     color: var(--el-text-color-primary);
     text-decoration: none;
@@ -204,7 +204,7 @@
     transform: translate(0, -50%);
   }
 
-  a {
+  .tag-title {
     color: var(--el-color-primary) !important;
   }
 }
@@ -247,7 +247,7 @@
 .card-in {
   color: var(--el-color-primary);
 
-  a {
+  .tag-title {
     color: var(--el-color-primary);
   }
 }
@@ -257,7 +257,7 @@
   color: #666;
   border: none;
 
-  a {
+  .tag-title {
     color: #666;
   }
 }

src/layout/components/tag/index.vue

@@ -522,24 +522,17 @@ onBeforeUnmount(() => {
           :ref="'dynamic' + index"
           v-for="(item, index) in multiTags"
           :key="index"
-          :class="[
+          :class="['scroll-item is-closable', linkIsActive(item)]"
-            'scroll-item is-closable',
-            linkIsActive(item),
-            route.path === item.path && showModel === 'card'
-              ? 'card-active'
-              : ''
-          ]"
           @contextmenu.prevent="openMenu(item, $event)"
           @mouseenter.prevent="onMouseenter(index)"
           @mouseleave.prevent="onMouseleave(index)"
           @click="tagOnClick(item)"
         >
-          <router-link
+          <span
-            :to="item.path"
+            class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
-            class="dark:!text-text_color_primary dark:hover:!text-primary"
           >
             {{ transformI18n(item.meta.title) }}
-          </router-link>
+          </span>
           <span
             v-if="
               iconIsActive(item, index) ||

src/layout/hooks/useTag.ts

@@ -175,7 +175,7 @@ export function useTags() {
       toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
       toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
     } else {
-      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
       toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
       toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
     }
@@ -190,7 +190,7 @@ export function useTags() {
       toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
       toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
     } else {
-      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
       toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
       toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
     }

src/main.ts

@@ -46,10 +46,10 @@ import { Auth } from "@/components/ReAuth";
 app.component("Auth", Auth);
 
 getServerConfig(app).then(async config => {
+  setupStore(app);
   app.use(router);
   await router.isReady();
   injectResponsiveStorage(app, config);
-  setupStore(app);
   app
     .use(MotionPlugin)
     .use(useI18n)

src/plugins/i18n.ts

@@ -1,12 +1,12 @@
 // 多组件库的国际化和本地项目国际化兼容
 import { App, WritableComputedRef } from "vue";
-import { storageLocal } from "@pureadmin/utils";
 import { type I18n, createI18n } from "vue-i18n";
 import { responsiveStorageNameSpace } from "@/config";
+import { storageLocal, isObject } from "@pureadmin/utils";
 
 // element-plus国际化
-import enLocale from "element-plus/lib/locale/lang/en";
+import enLocale from "element-plus/dist/locale/en.mjs";
-import zhLocale from "element-plus/lib/locale/lang/zh-cn";
+import zhLocale from "element-plus/dist/locale/zh-cn.mjs";
 
 function siphonI18n(prefix = "zh-CN") {
   return Object.fromEntries(
@@ -30,6 +30,30 @@ export const localesConfigs = {
   }
 };
 
+/** 获取对象中所有嵌套对象的key键，并将它们用点号分割组成字符串 */
+function getObjectKeys(obj) {
+  const stack = [];
+  const keys = [];
+
+  stack.push({ obj, key: "" });
+
+  while (stack.length > 0) {
+    const { obj, key } = stack.pop();
+
+    for (const k in obj) {
+      const newKey = key ? `${key}.${k}` : k;
+
+      if (obj[k] && isObject(obj[k])) {
+        stack.push({ obj: obj[k], key: newKey });
+      } else {
+        keys.push(newKey);
+      }
+    }
+  }
+
+  return keys;
+}
+
 /**
  * 国际化转换工具函数（自动读取根目录locales文件夹下文件进行国际化匹配）
  * @param message message
@@ -47,8 +71,9 @@ export function transformI18n(message: any = "") {
     return message[locale?.value];
   }
 
-  const key = message.match(/(\S*)\./)?.[1];
+  const key = message.match(/(\S*)\./)?.input;
-  if (key && Object.keys(siphonI18n("zh-CN")).includes(key)) {
+
+  if (key && getObjectKeys(siphonI18n("zh-CN")).find(item => item === key)) {
     return i18n.global.t.call(i18n.global.locale, message);
   } else if (!key && Object.keys(siphonI18n("zh-CN")).includes(message)) {
     // 兼容非嵌套形式的国际化写法

src/router/modules/able.ts

@@ -149,11 +149,11 @@ export default {
       }
     },
     {
-      path: "/able/execl",
+      path: "/able/excel",
-      name: "Execl",
+      name: "Excel",
-      component: () => import("@/views/able/execl.vue"),
+      component: () => import("@/views/able/excel.vue"),
       meta: {
-        title: $t("menus.hsExecl")
+        title: $t("menus.hsExcel")
       }
     },
     {

src/style/sidebar.scss

@@ -54,7 +54,7 @@
     top: 0;
     right: 0;
     z-index: 998;
-    width: calc(100% - 210px);
+    width: calc(100% - #{$sideBarWidth});
 
     /* fixed-header 属性左上角动画 */
     transition: width var(--pure-transition-duration);
@@ -96,16 +96,24 @@
       right: 0;
     }
 
-    .el-scrollbar {
-      height: calc(100% - 44px);
-    }
-
     &.has-logo {
       .el-scrollbar.pc {
         /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
         height: calc(100% - 92px);
       }
 
+      /* logo: 48px */
+      .el-scrollbar.mobile {
+        height: calc(100% - 48px);
+      }
+    }
+
+    &.no-logo {
+      .el-scrollbar.pc {
+        /* leftCollapse: 40px、leftCollapse-shadow: 4px */
+        height: calc(100% - 44px);
+      }
+
       .el-scrollbar.mobile {
         height: 100%;
       }

src/utils/http/index.ts

@@ -74,7 +74,7 @@ class PureHttp {
         }
         /** 请求白名单，放置一些不需要token的接口（通过设置请求白名单，防止token过期后再请求造成的死循环问题） */
         const whiteList = ["/refreshToken", "/login"];
-        return whiteList.some(v => config.url.indexOf(v) > -1)
+        return whiteList.find(url => url === config.url)
           ? config
           : new Promise(resolve => {
               const data = getToken();

src/utils/preventDefault.ts

@@ -0,0 +1,28 @@
+import { useEventListener } from "@vueuse/core";
+
+/** 是否为`img`标签 */
+function isImgElement(element) {
+  return typeof HTMLImageElement !== "undefined"
+    ? element instanceof HTMLImageElement
+    : element.tagName.toLowerCase() === "img";
+}
+
+// 在 src/main.ts 引入并调用即可 import { addPreventDefault } from "@/utils/preventDefault"; addPreventDefault();
+export const addPreventDefault = () => {
+  // 阻止通过键盘F12快捷键打开浏览器开发者工具面板
+  useEventListener(
+    window.document,
+    "keydown",
+    ev => ev.key === "F12" && ev.preventDefault()
+  );
+  // 阻止浏览器默认的右键菜单弹出（不会影响自定义右键事件）
+  useEventListener(window.document, "contextmenu", ev => ev.preventDefault());
+  // 阻止页面元素选中
+  useEventListener(window.document, "selectstart", ev => ev.preventDefault());
+  // 浏览器中图片通常默认是可拖动的，并且可以在新标签页或窗口中打开，或者将其拖动到其他应用程序中，此处将其禁用，使其默认不可拖动
+  useEventListener(
+    window.document,
+    "dragstart",
+    ev => isImgElement(ev?.target) && ev.preventDefault()
+  );
+};

src/views/able/excel.vue

@@ -72,7 +72,7 @@ const exportExcel = () => {
   <el-card shadow="never">
     <template #header>
       <div class="font-medium">
-        导出Execl（
+        导出Excel（
         <el-link
           href="https://github.com/SheetJS/sheetjs"
           target="_blank"

src/views/able/swiper.vue

@@ -2,8 +2,9 @@
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
+import SwiperCore from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
 
 defineOptions({
   name: "Swiper"

src/views/guide/index.vue

@@ -11,25 +11,29 @@ const guide = () => {
     .setOptions({
       steps: [
         {
-          element: document.querySelector("#header-notice"),
+          element: document.querySelector("#header-notice") as
+            | string
+            | HTMLElement,
           title: "消息通知",
           intro: "您可以在这里查看管理员发送的消息",
           position: "left"
         },
         {
-          element: document.querySelector("#header-translation"),
+          element: document.querySelector("#header-translation") as
+            | string
+            | HTMLElement,
           title: "国际化",
           intro: "您可以在这里进行语言切换",
           position: "left"
         },
         {
-          element: document.querySelector(".set-icon"),
+          element: document.querySelector(".set-icon") as string | HTMLElement,
           title: "项目配置",
           intro: "您可以在这里查看项目配置",
           position: "left"
         },
         {
-          element: document.querySelector(".tags-view"),
+          element: document.querySelector(".tags-view") as string | HTMLElement,
           title: "多标签页",
           intro: "这里是您访问过的页面的历史",
           position: "bottom"

src/views/pure-table/high/list.tsx

@@ -3,7 +3,7 @@ import Page from "./page/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
-import Execl from "./execl/index.vue";
+import Excel from "./excel/index.vue";
 import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
 import Print from "./prints/index.vue";
@@ -57,10 +57,10 @@ export const list = [
     component: Edit
   },
   {
-    key: "execl",
+    key: "excel",
-    content: rendContent("execl"),
+    content: rendContent("excel"),
-    title: "导出execl",
+    title: "导出excel",
-    component: Execl
+    component: Excel
   },
   {
     key: "print",

src/views/system/dept/index.vue

@@ -89,7 +89,6 @@ const {
       <template v-slot="{ size, dynamicColumns }">
         <pure-table
           ref="tableRef"
-          border
           adaptive
           :adaptiveConfig="{ offsetBottom: 32 }"
           align-whole="center"
@@ -102,7 +101,7 @@ const {
           :data="dataList"
           :columns="dynamicColumns"
           :header-cell-style="{
-            background: 'var(--el-table-row-hover-bg-color)',
+            background: 'var(--el-fill-color-light)',
             color: 'var(--el-text-color-primary)'
           }"
           @selection-change="handleSelectionChange"

src/views/system/role/index.vue

@@ -103,7 +103,6 @@ const {
       </template>
       <template v-slot="{ size, dynamicColumns }">
         <pure-table
-          border
           align-whole="center"
           showOverflowTooltip
           table-layout="auto"
@@ -115,7 +114,7 @@ const {
           :pagination="pagination"
           :paginationSmall="size === 'small' ? true : false"
           :header-cell-style="{
-            background: 'var(--el-table-row-hover-bg-color)',
+            background: 'var(--el-fill-color-light)',
             color: 'var(--el-text-color-primary)'
           }"
           @selection-change="handleSelectionChange"

src/views/system/user/form/index.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ReCol from "@/components/ReCol";
+import { formRules } from "../utils/rule";
+import { FormProps } from "../utils/types";
+import { usePublicHooks } from "../../hooks";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    title: "新增",
+    higherDeptOptions: [],
+    parentId: 0,
+    nickname: "",
+    username: "",
+    password: "",
+    phone: "",
+    email: "",
+    sex: "",
+    status: 1,
+    remark: ""
+  })
+});
+
+const sexOptions = [
+  {
+    value: 0,
+    label: "男"
+  },
+  {
+    value: 1,
+    label: "女"
+  }
+];
+const ruleFormRef = ref();
+const { switchStyle } = usePublicHooks();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-row :gutter="30">
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="用户昵称" prop="nickname">
+          <el-input
+            v-model="newFormInline.nickname"
+            clearable
+            placeholder="请输入用户昵称"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="用户名称" prop="username">
+          <el-input
+            v-model="newFormInline.username"
+            clearable
+            placeholder="请输入用户名称"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col
+        :value="12"
+        :xs="24"
+        :sm="24"
+        v-if="newFormInline.title === '新增'"
+      >
+        <el-form-item label="用户密码" prop="password">
+          <el-input
+            v-model="newFormInline.password"
+            clearable
+            placeholder="请输入用户密码"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="手机号" prop="phone">
+          <el-input
+            v-model="newFormInline.phone"
+            clearable
+            placeholder="请输入手机号"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            v-model="newFormInline.email"
+            clearable
+            placeholder="请输入邮箱"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="用户性别">
+          <el-select
+            v-model="newFormInline.sex"
+            placeholder="请选择用户性别"
+            class="w-full"
+            clearable
+          >
+            <el-option
+              v-for="(item, index) in sexOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="归属部门">
+          <el-cascader
+            class="w-full"
+            v-model="newFormInline.parentId"
+            :options="newFormInline.higherDeptOptions"
+            :props="{
+              value: 'id',
+              label: 'name',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            filterable
+            placeholder="请选择归属部门"
+          >
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+      </re-col>
+      <re-col
+        :value="12"
+        :xs="24"
+        :sm="24"
+        v-if="newFormInline.title === '新增'"
+      >
+        <el-form-item label="用户状态">
+          <el-switch
+            v-model="newFormInline.status"
+            inline-prompt
+            :active-value="1"
+            :inactive-value="0"
+            active-text="启用"
+            inactive-text="停用"
+            :style="switchStyle"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col>
+        <el-form-item label="备注">
+          <el-input
+            v-model="newFormInline.remark"
+            placeholder="请输入备注信息"
+            type="textarea"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>

src/views/system/user/form/role.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ReCol from "@/components/ReCol";
+import { RoleFormProps } from "../utils/types";
+
+const props = withDefaults(defineProps<RoleFormProps>(), {
+  formInline: () => ({
+    username: "",
+    nickname: "",
+    roleOptions: [],
+    ids: []
+  })
+});
+
+const newFormInline = ref(props.formInline);
+</script>
+
+<template>
+  <el-form :model="newFormInline">
+    <el-row :gutter="30">
+      <!-- <re-col>
+        <el-form-item label="用户名称" prop="username">
+          <el-input disabled v-model="newFormInline.username" />
+        </el-form-item>
+      </re-col> -->
+      <re-col>
+        <el-form-item label="用户昵称" prop="nickname">
+          <el-input disabled v-model="newFormInline.nickname" />
+        </el-form-item>
+      </re-col>
+      <re-col>
+        <el-form-item label="角色列表" prop="ids">
+          <el-select
+            v-model="newFormInline.ids"
+            placeholder="请选择"
+            class="w-full"
+            clearable
+            multiple
+          >
+            <el-option
+              v-for="(item, index) in newFormInline.roleOptions"
+              :key="index"
+              :value="item.id"
+              :label="item.name"
+            >
+              {{ item.name }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>

src/views/system/user/hook.tsx

@@ -1,209 +0,0 @@
-import dayjs from "dayjs";
-import { message } from "@/utils/message";
-import { getUserList } from "@/api/system";
-import { ElMessageBox } from "element-plus";
-import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";
-
-export function useUser() {
-  const form = reactive({
-    username: "",
-    mobile: "",
-    status: ""
-  });
-  const dataList = ref([]);
-  const loading = ref(true);
-  const switchLoadMap = ref({});
-  const pagination = reactive<PaginationProps>({
-    total: 0,
-    pageSize: 10,
-    currentPage: 1,
-    background: true
-  });
-  const columns: TableColumnList = [
-    {
-      label: "序号",
-      type: "index",
-      width: 70,
-      fixed: "left"
-    },
-    {
-      label: "用户编号",
-      prop: "id",
-      minWidth: 130
-    },
-    {
-      label: "用户名称",
-      prop: "username",
-      minWidth: 130
-    },
-    {
-      label: "用户昵称",
-      prop: "nickname",
-      minWidth: 130
-    },
-    {
-      label: "性别",
-      prop: "sex",
-      minWidth: 90,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.sex === 1 ? "danger" : ""}
-          effect="plain"
-        >
-          {row.sex === 1 ? "女" : "男"}
-        </el-tag>
-      )
-    },
-    {
-      label: "部门",
-      prop: "dept",
-      minWidth: 90,
-      formatter: ({ dept }) => dept.name
-    },
-    {
-      label: "手机号码",
-      prop: "mobile",
-      minWidth: 90
-    },
-    {
-      label: "状态",
-      prop: "status",
-      minWidth: 90,
-      cellRenderer: scope => (
-        <el-switch
-          size={scope.props.size === "small" ? "small" : "default"}
-          loading={switchLoadMap.value[scope.index]?.loading}
-          v-model={scope.row.status}
-          active-value={1}
-          inactive-value={0}
-          active-text="已开启"
-          inactive-text="已关闭"
-          inline-prompt
-          onChange={() => onChange(scope as any)}
-        />
-      )
-    },
-    {
-      label: "创建时间",
-      minWidth: 90,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
-    },
-    {
-      label: "操作",
-      fixed: "right",
-      width: 180,
-      slot: "operation"
-    }
-  ];
-  const buttonClass = computed(() => {
-    return [
-      "!h-[20px]",
-      "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
-    ];
-  });
-
-  function onChange({ row, index }) {
-    ElMessageBox.confirm(
-      `确认要<strong>${
-        row.status === 0 ? "停用" : "启用"
-      }</strong><strong style='color:var(--el-color-primary)'>${
-        row.username
-      }</strong>用户吗?`,
-      "系统提示",
-      {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-        dangerouslyUseHTMLString: true,
-        draggable: true
-      }
-    )
-      .then(() => {
-        switchLoadMap.value[index] = Object.assign(
-          {},
-          switchLoadMap.value[index],
-          {
-            loading: true
-          }
-        );
-        setTimeout(() => {
-          switchLoadMap.value[index] = Object.assign(
-            {},
-            switchLoadMap.value[index],
-            {
-              loading: false
-            }
-          );
-          message("已成功修改用户状态", {
-            type: "success"
-          });
-        }, 300);
-      })
-      .catch(() => {
-        row.status === 0 ? (row.status = 1) : (row.status = 0);
-      });
-  }
-
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
-  function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
-  }
-
-  function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
-  }
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const { data } = await getUserList();
-    dataList.value = data.list;
-    pagination.total = data.total;
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  const resetForm = formEl => {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  };
-
-  onMounted(() => {
-    onSearch();
-  });
-
-  return {
-    form,
-    loading,
-    columns,
-    dataList,
-    pagination,
-    buttonClass,
-    onSearch,
-    resetForm,
-    handleUpdate,
-    handleDelete,
-    handleSizeChange,
-    handleCurrentChange,
-    handleSelectionChange
-  };
-}

src/views/system/user/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import tree from "./tree.vue";
-import { useUser } from "./hook";
+import { useUser } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
+import Upload from "@iconify-icons/ri/upload-line";
 import Role from "@iconify-icons/ri/admin-line";
 import Password from "@iconify-icons/ri/lock-password-line";
 import More from "@iconify-icons/ep/more-filled";
@@ -18,28 +19,47 @@ defineOptions({
   name: "User"
 });
 
+const treeRef = ref();
 const formRef = ref();
+const tableRef = ref();
+
 const {
   form,
   loading,
   columns,
   dataList,
+  treeData,
+  treeLoading,
+  selectedNum,
   pagination,
   buttonClass,
   onSearch,
   resetForm,
+  onbatchDel,
+  openDialog,
+  onTreeSelect,
   handleUpdate,
   handleDelete,
+  handleUpload,
+  handleReset,
+  handleRole,
   handleSizeChange,
+  onSelectionCancel,
   handleCurrentChange,
   handleSelectionChange
-} = useUser();
+} = useUser(tableRef, treeRef);
 </script>
 
 <template>
-  <div class="main">
+  <div class="flex justify-between">
-    <tree class="w-[17%] float-left" />
+    <tree
-    <div class="float-right w-[82%]">
+      ref="treeRef"
+      class="min-w-[200px] mr-2"
+      :treeData="treeData"
+      :treeLoading="treeLoading"
+      @tree-select="onTreeSelect"
+    />
+    <div class="w-[calc(100%-200px)]">
       <el-form
         ref="formRef"
         :inline="true"
@@ -54,9 +74,9 @@ const {
             class="!w-[160px]"
           />
         </el-form-item>
-        <el-form-item label="手机号码：" prop="mobile">
+        <el-form-item label="手机号码：" prop="phone">
           <el-input
-            v-model="form.mobile"
+            v-model="form.phone"
             placeholder="请输入手机号码"
             clearable
             class="!w-[160px]"
@@ -88,15 +108,48 @@ const {
         </el-form-item>
       </el-form>
 
-      <PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
+      <PureTableBar
+        title="用户管理（仅演示，操作后不生效）"
+        :columns="columns"
+        @refresh="onSearch"
+      >
         <template #buttons>
-          <el-button type="primary" :icon="useRenderIcon(AddFill)">
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            @click="openDialog()"
+          >
             新增用户
           </el-button>
         </template>
         <template v-slot="{ size, dynamicColumns }">
+          <div
+            v-if="selectedNum > 0"
+            v-motion-fade
+            class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          >
+            <div class="flex-auto">
+              <span
+                style="font-size: var(--el-font-size-base)"
+                class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+              >
+                已选 {{ selectedNum }} 项
+              </span>
+              <el-button type="primary" text @click="onSelectionCancel">
+                取消选择
+              </el-button>
+            </div>
+            <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+              <template #reference>
+                <el-button type="danger" text class="mr-1">
+                  批量删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </div>
           <pure-table
-            border
+            row-key="id"
+            ref="tableRef"
             adaptive
             align-whole="center"
             table-layout="auto"
@@ -107,7 +160,7 @@ const {
             :pagination="pagination"
             :paginationSmall="size === 'small' ? true : false"
             :header-cell-style="{
-              background: 'var(--el-table-row-hover-bg-color)',
+              background: 'var(--el-fill-color-light)',
               color: 'var(--el-text-color-primary)'
             }"
             @selection-change="handleSelectionChange"
@@ -120,12 +173,15 @@ const {
                 link
                 type="primary"
                 :size="size"
-                @click="handleUpdate(row)"
                 :icon="useRenderIcon(EditPen)"
+                @click="openDialog('编辑', row)"
               >
                 修改
               </el-button>
-              <el-popconfirm title="是否确认删除?">
+              <el-popconfirm
+                :title="`是否确认删除用户编号为${row.id}的这条数据`"
+                @confirm="handleDelete(row)"
+              >
                 <template #reference>
                   <el-button
                     class="reset-margin"
@@ -133,7 +189,6 @@ const {
                     type="primary"
                     :size="size"
                     :icon="useRenderIcon(Delete)"
-                    @click="handleDelete(row)"
                   >
                     删除
                   </el-button>
@@ -145,11 +200,23 @@ const {
                   link
                   type="primary"
                   :size="size"
-                  @click="handleUpdate(row)"
                   :icon="useRenderIcon(More)"
+                  @click="handleUpdate(row)"
                 />
                 <template #dropdown>
                   <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <el-button
+                        :class="buttonClass"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon(Upload)"
+                        @click="handleUpload(row)"
+                      >
+                        上传头像
+                      </el-button>
+                    </el-dropdown-item>
                     <el-dropdown-item>
                       <el-button
                         :class="buttonClass"
@@ -157,6 +224,7 @@ const {
                         type="primary"
                         :size="size"
                         :icon="useRenderIcon(Password)"
+                        @click="handleReset(row)"
                       >
                         重置密码
                       </el-button>
@@ -168,6 +236,7 @@ const {
                         type="primary"
                         :size="size"
                         :icon="useRenderIcon(Role)"
+                        @click="handleRole(row)"
                       >
                         分配角色
                       </el-button>
@@ -188,6 +257,10 @@ const {
   margin: 0;
 }
 
+:deep(.el-button:focus-visible) {
+  outline: none;
+}
+
 .search-form {
   :deep(.el-form-item) {
     margin-bottom: 12px;

src/views/system/user/tree.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { handleTree } from "@/utils/tree";
-import { getDeptList } from "@/api/system";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
+import { ref, computed, watch, getCurrentInstance } from "vue";
 
 import Dept from "@iconify-icons/ri/git-branch-line";
-import Reset from "@iconify-icons/ri/restart-line";
+// import Reset from "@iconify-icons/ri/restart-line";
 import Search from "@iconify-icons/ep/search";
 import More2Fill from "@iconify-icons/ri/more-2-fill";
 import OfficeBuilding from "@iconify-icons/ep/office-building";
@@ -20,8 +18,14 @@ interface Tree {
   children?: Tree[];
 }
 
+const props = defineProps({
+  treeLoading: Boolean,
+  treeData: Array
+});
+
+const emit = defineEmits(["tree-select"]);
+
 const treeRef = ref();
-const treeData = ref([]);
 const isExpand = ref(true);
 const searchValue = ref("");
 const highlightMap = ref({});
@@ -59,6 +63,12 @@ function nodeClick(value) {
       v.highlight = false;
     }
   });
+  emit(
+    "tree-select",
+    highlightMap.value[nodeId]?.highlight
+      ? Object.assign({ ...value, selected: true })
+      : Object.assign({ ...value, selected: false })
+  );
 }
 
 function toggleRowExpansionAll(status) {
@@ -69,8 +79,8 @@ function toggleRowExpansionAll(status) {
   }
 }
 
-/** 重置状态（选中状态、搜索框值、树初始化） */
+/** 重置部门树状态（选中状态、搜索框值、树初始化） */
-function onReset() {
+function onTreeReset() {
   highlightMap.value = {};
   searchValue.value = "";
   toggleRowExpansionAll(true);
@@ -80,23 +90,18 @@ watch(searchValue, val => {
   treeRef.value!.filter(val);
 });
 
-onMounted(async () => {
+defineExpose({ onTreeReset });
-  const { data } = await getDeptList();
-  treeData.value = handleTree(data);
-});
 </script>
 
 <template>
   <div
+    v-loading="props.treeLoading"
     class="h-full bg-bg_color overflow-auto"
     :style="{ minHeight: `calc(100vh - 133px)` }"
   >
     <div class="flex items-center h-[34px]">
-      <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
-        部门列表
-      </p>
       <el-input
-        style="flex: 2"
+        class="ml-2"
         size="small"
         v-model="searchValue"
         placeholder="请输入部门名称"
@@ -130,17 +135,17 @@ onMounted(async () => {
                 {{ isExpand ? "折叠全部" : "展开全部" }}
               </el-button>
             </el-dropdown-item>
-            <el-dropdown-item>
+            <!-- <el-dropdown-item>
               <el-button
                 :class="buttonClass"
                 link
                 type="primary"
                 :icon="useRenderIcon(Reset)"
-                @click="onReset"
+                @click="onTreeReset"
               >
                 重置状态
               </el-button>
-            </el-dropdown-item>
+            </el-dropdown-item> -->
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -148,7 +153,7 @@ onMounted(async () => {
     <el-divider />
     <el-tree
       ref="treeRef"
-      :data="treeData"
+      :data="props.treeData"
       node-key="id"
       size="small"
       :props="defaultProps"
@@ -166,12 +171,16 @@ onMounted(async () => {
             'flex',
             'items-center',
             'select-none',
+            'hover:text-primary',
             searchValue.trim().length > 0 &&
               node.label.includes(searchValue) &&
               'text-red-500',
             highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
           ]"
           :style="{
+            color: highlightMap[node.id]?.highlight
+              ? 'var(--el-color-primary)'
+              : '',
             background: highlightMap[node.id]?.highlight
               ? 'var(--el-color-primary-light-7)'
               : 'transparent'
@@ -197,4 +206,8 @@ onMounted(async () => {
 :deep(.el-divider) {
   margin: 0;
 }
+
+:deep(.el-tree) {
+  --el-tree-node-hover-bg-color: transparent;
+}
 </style>

src/views/system/user/upload.vue

@@ -0,0 +1,60 @@
+<script setup lang="tsx">
+import { ref } from "vue";
+import ReCropper from "@/components/ReCropper";
+import { formatBytes } from "@pureadmin/utils";
+
+const props = defineProps({
+  imgSrc: String
+});
+
+const emit = defineEmits(["cropper"]);
+
+const infos = ref();
+const refCropper = ref();
+const showPopover = ref(false);
+const cropperImg = ref<string>("");
+
+function onCropper({ base64, blob, info }) {
+  infos.value = info;
+  cropperImg.value = base64;
+  emit("cropper", { base64, blob, info });
+}
+</script>
+
+<template>
+  <div v-loading="!showPopover" element-loading-background="transparent">
+    <el-popover :visible="showPopover" placement="right" width="18vw">
+      <template #reference>
+        <div class="w-[18vw]">
+          <ReCropper
+            ref="refCropper"
+            :src="props.imgSrc"
+            circled
+            @cropper="onCropper"
+            @readied="showPopover = true"
+          />
+          <p class="mt-1 text-center" v-show="showPopover">
+            温馨提示：右键上方裁剪区可开启功能菜单
+          </p>
+        </div>
+      </template>
+      <div class="flex flex-wrap justify-center items-center text-center">
+        <el-image
+          v-if="cropperImg"
+          :src="cropperImg"
+          :preview-src-list="Array.of(cropperImg)"
+          fit="cover"
+        />
+        <div v-if="infos" class="mt-1">
+          <p>
+            图像大小：{{ parseInt(infos.width) }} ×
+            {{ parseInt(infos.height) }}像素
+          </p>
+          <p>
+            文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
+          </p>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>

src/views/system/user/utils/hook.tsx

@@ -0,0 +1,521 @@
+import "./reset.css";
+import dayjs from "dayjs";
+import roleForm from "../form/role.vue";
+import editForm from "../form/index.vue";
+import { zxcvbn } from "@zxcvbn-ts/core";
+import { handleTree } from "@/utils/tree";
+import { message } from "@/utils/message";
+import croppingUpload from "../upload.vue";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { type PaginationProps } from "@pureadmin/table";
+import type { FormItemProps, RoleFormItemProps } from "../utils/types";
+import { hideTextAtIndex, getKeyList, isAllEmpty } from "@pureadmin/utils";
+import {
+  getRoleIds,
+  getDeptList,
+  getUserList,
+  getAllRoleList
+} from "@/api/system";
+import {
+  ElForm,
+  ElInput,
+  ElFormItem,
+  ElProgress,
+  ElMessageBox
+} from "element-plus";
+import {
+  type Ref,
+  h,
+  ref,
+  toRaw,
+  watch,
+  computed,
+  reactive,
+  onMounted
+} from "vue";
+
+export function useUser(tableRef: Ref, treeRef: Ref) {
+  const form = reactive({
+    // 左侧部门树的id
+    deptId: "",
+    username: "",
+    phone: "",
+    status: ""
+  });
+  const formRef = ref();
+  const ruleFormRef = ref();
+  const dataList = ref([]);
+  const loading = ref(true);
+  // 上传头像信息
+  const avatarInfo = ref();
+  const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
+  const higherDeptOptions = ref();
+  const treeData = ref([]);
+  const treeLoading = ref(true);
+  const selectedNum = ref(0);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "用户编号",
+      prop: "id",
+      width: 90
+    },
+    {
+      label: "用户头像",
+      prop: "avatar",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.avatar}
+          preview-src-list={Array.of(row.avatar)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+      width: 90
+    },
+    {
+      label: "用户名称",
+      prop: "username",
+      minWidth: 130
+    },
+    {
+      label: "用户昵称",
+      prop: "nickname",
+      minWidth: 130
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      minWidth: 90,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.sex === 1 ? "danger" : ""}
+          effect="plain"
+        >
+          {row.sex === 1 ? "女" : "男"}
+        </el-tag>
+      )
+    },
+    {
+      label: "部门",
+      prop: "dept.name",
+      minWidth: 90
+    },
+    {
+      label: "手机号码",
+      prop: "phone",
+      minWidth: 90,
+      formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 })
+    },
+    {
+      label: "状态",
+      prop: "status",
+      minWidth: 90,
+      cellRenderer: scope => (
+        <el-switch
+          size={scope.props.size === "small" ? "small" : "default"}
+          loading={switchLoadMap.value[scope.index]?.loading}
+          v-model={scope.row.status}
+          active-value={1}
+          inactive-value={0}
+          active-text="已启用"
+          inactive-text="已停用"
+          inline-prompt
+          style={switchStyle.value}
+          onChange={() => onChange(scope as any)}
+        />
+      )
+    },
+    {
+      label: "创建时间",
+      minWidth: 90,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 180,
+      slot: "operation"
+    }
+  ];
+  const buttonClass = computed(() => {
+    return [
+      "!h-[20px]",
+      "reset-margin",
+      "!text-gray-500",
+      "dark:!text-white",
+      "dark:hover:!text-primary"
+    ];
+  });
+  // 重置的新密码
+  const pwdForm = reactive({
+    newPwd: ""
+  });
+  const pwdProgress = [
+    { color: "#e74242", text: "非常弱" },
+    { color: "#EFBD47", text: "弱" },
+    { color: "#ffa500", text: "一般" },
+    { color: "#1bbf1b", text: "强" },
+    { color: "#008000", text: "非常强" }
+  ];
+  // 当前密码强度（0-4）
+  const curScore = ref();
+  const roleOptions = ref([]);
+
+  function onChange({ row, index }) {
+    ElMessageBox.confirm(
+      `确认要<strong>${
+        row.status === 0 ? "停用" : "启用"
+      }</strong><strong style='color:var(--el-color-primary)'>${
+        row.username
+      }</strong>用户吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        switchLoadMap.value[index] = Object.assign(
+          {},
+          switchLoadMap.value[index],
+          {
+            loading: true
+          }
+        );
+        setTimeout(() => {
+          switchLoadMap.value[index] = Object.assign(
+            {},
+            switchLoadMap.value[index],
+            {
+              loading: false
+            }
+          );
+          message("已成功修改用户状态", {
+            type: "success"
+          });
+        }, 300);
+      })
+      .catch(() => {
+        row.status === 0 ? (row.status = 1) : (row.status = 0);
+      });
+  }
+
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除用户编号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getUserList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    form.deptId = "";
+    treeRef.value.onTreeReset();
+    onSearch();
+  };
+
+  function onTreeSelect({ id, selected }) {
+    form.deptId = selected ? id : "";
+    onSearch();
+  }
+
+  function formatHigherDeptOptions(treeList) {
+    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      formatHigherDeptOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  }
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}用户`,
+      props: {
+        formInline: {
+          title,
+          higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
+          parentId: row?.dept.id ?? 0,
+          nickname: row?.nickname ?? "",
+          username: row?.username ?? "",
+          password: row?.password ?? "",
+          phone: row?.phone ?? "",
+          email: row?.email ?? "",
+          sex: row?.sex ?? "",
+          status: row?.status ?? 1,
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "46%",
+      draggable: true,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了用户名称为${curData.username}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  /** 上传头像 */
+  function handleUpload(row) {
+    addDialog({
+      title: "裁剪、上传头像",
+      width: "40%",
+      draggable: true,
+      closeOnClickModal: false,
+      contentRenderer: () =>
+        h(croppingUpload, {
+          imgSrc: row.avatar,
+          onCropper: info => (avatarInfo.value = info)
+        }),
+      beforeSure: done => {
+        console.log("裁剪后的图片信息：", avatarInfo.value);
+        // 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
+        done(); // 关闭弹框
+        onSearch(); // 刷新表格数据
+      }
+    });
+  }
+
+  watch(
+    pwdForm,
+    ({ newPwd }) =>
+      (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
+  );
+
+  /** 重置密码 */
+  function handleReset(row) {
+    addDialog({
+      title: `重置 ${row.username} 用户的密码`,
+      width: "30%",
+      draggable: true,
+      closeOnClickModal: false,
+      contentRenderer: () => (
+        <>
+          <ElForm ref={ruleFormRef} model={pwdForm}>
+            <ElFormItem
+              prop="newPwd"
+              rules={[
+                {
+                  required: true,
+                  message: "请输入新密码",
+                  trigger: "blur"
+                }
+              ]}
+            >
+              <ElInput
+                clearable
+                show-password
+                type="password"
+                v-model={pwdForm.newPwd}
+                placeholder="请输入新密码"
+              />
+            </ElFormItem>
+          </ElForm>
+          <div class="mt-4 flex">
+            {pwdProgress.map(({ color, text }, idx) => (
+              <div
+                class="w-[19vw]"
+                style={{ marginLeft: idx !== 0 ? "4px" : 0 }}
+              >
+                <ElProgress
+                  striped
+                  striped-flow
+                  duration={curScore.value === idx ? 6 : 0}
+                  percentage={curScore.value >= idx ? 100 : 0}
+                  color={color}
+                  stroke-width={10}
+                  show-text={false}
+                />
+                <p
+                  class="text-center"
+                  style={{ color: curScore.value === idx ? color : "" }}
+                >
+                  {text}
+                </p>
+              </div>
+            ))}
+          </div>
+        </>
+      ),
+      closeCallBack: () => (pwdForm.newPwd = ""),
+      beforeSure: done => {
+        ruleFormRef.value.validate(valid => {
+          if (valid) {
+            // 表单规则校验通过
+            message(`已成功重置 ${row.username} 用户的密码`, {
+              type: "success"
+            });
+            console.log(pwdForm.newPwd);
+            // 根据实际业务使用pwdForm.newPwd和row里的某些字段去调用重置用户密码接口即可
+            done(); // 关闭弹框
+            onSearch(); // 刷新表格数据
+          }
+        });
+      }
+    });
+  }
+
+  /** 分配角色 */
+  async function handleRole(row) {
+    // 选中的角色列表
+    const ids = (await getRoleIds({ userId: row.id })).data ?? [];
+    addDialog({
+      title: `分配 ${row.username} 用户的角色`,
+      props: {
+        formInline: {
+          username: row?.username ?? "",
+          nickname: row?.nickname ?? "",
+          roleOptions: roleOptions.value ?? [],
+          ids
+        }
+      },
+      width: "400px",
+      draggable: true,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(roleForm),
+      beforeSure: (done, { options }) => {
+        const curData = options.props.formInline as RoleFormItemProps;
+        console.log("curIds", curData.ids);
+        // 根据实际业务使用curData.ids和row里的某些字段去调用修改角色接口即可
+        done(); // 关闭弹框
+      }
+    });
+  }
+
+  onMounted(async () => {
+    treeLoading.value = true;
+    onSearch();
+
+    // 归属部门
+    const { data } = await getDeptList();
+    higherDeptOptions.value = handleTree(data);
+    treeData.value = handleTree(data);
+    treeLoading.value = false;
+
+    // 角色列表
+    roleOptions.value = (await getAllRoleList()).data;
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    treeData,
+    treeLoading,
+    selectedNum,
+    pagination,
+    buttonClass,
+    onSearch,
+    resetForm,
+    onbatchDel,
+    openDialog,
+    onTreeSelect,
+    handleUpdate,
+    handleDelete,
+    handleUpload,
+    handleReset,
+    handleRole,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}

src/views/system/user/utils/reset.css

@@ -0,0 +1,5 @@
+/** 局部重置 ElProgress 的部分样式 */
+.el-progress-bar__outer,
+.el-progress-bar__inner {
+  border-radius: 0;
+}

src/views/system/user/utils/rule.ts

@@ -0,0 +1,39 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+import { isPhone, isEmail } from "@pureadmin/utils";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  nickname: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
+  username: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
+  password: [{ required: true, message: "用户密码为必填项", trigger: "blur" }],
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+      // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
+    }
+  ],
+  email: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isEmail(value)) {
+          callback(new Error("请输入正确的邮箱格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});

src/views/system/user/utils/types.ts

@@ -0,0 +1,36 @@
+interface FormItemProps {
+  id?: number;
+  /** 用于判断是`新增`还是`修改` */
+  title: string;
+  higherDeptOptions: Record<string, unknown>[];
+  parentId: number;
+  nickname: string;
+  username: string;
+  password: string;
+  phone: string | number;
+  email: string;
+  sex: string | number;
+  status: number;
+  dept?: {
+    id?: number;
+    name?: string;
+  };
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+interface RoleFormItemProps {
+  username: string;
+  nickname: string;
+  /** 角色列表 */
+  roleOptions: any[];
+  /** 选中的角色列表 */
+  ids: Record<number, unknown>[];
+}
+interface RoleFormProps {
+  formInline: RoleFormItemProps;
+}
+
+export type { FormItemProps, FormProps, RoleFormItemProps, RoleFormProps };

types/shims-vue.d.ts

@@ -11,3 +11,5 @@ declare module "*.scss" {
 
 declare module "vue-virtual-scroller";
 declare module "vuedraggable/src/vuedraggable";
+declare module "element-plus/dist/locale/en.mjs";
+declare module "element-plus/dist/locale/zh-cn.mjs";