release: update 4.1.0

chore: 依赖更新到vue3.3+以及删除unplugin-vue-define-options插件
feat: 优化 PureTableBar 组件，列展示添加拖拽功能 (#545 )
2025-11-03 13:44:47 +08:00 · 2023-05-12 01:45:43 +08:00 · 2023-05-11 20:26:58 +08:00 · 2023-05-11 19:58:49 +08:00 · 2023-05-11 15:11:58 +08:00 · 2023-05-10 17:42:43 +08:00
30 changed files with 1181 additions and 459 deletions
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,23 @@
+# 4.1.0 (2023-05-12)
+
+### 🎫 Feat
+
+- Add a `demo` example combined with `Form` for the functional pop-up box component
+- wrapper `el-col` component of `element-plus`
+- Add `beforeCancel` and `beforeSure` callbacks to the functional popup component, which can suspend the closing of the popup
+- Improve `System Management-Department Management` page
+- Optimize `PureTableBar` component, add drag and drop function for column display
+
+### 🐞 Bug fixes
+
+- Fix the problem that the page cache still exists when you click the tab to reload after turning on `keepAlive`
+- Fix the problem that the left menu will flicker after refreshing the tab in the mixed mode menu
+
+### 🍏 Perf
+
+- Optimize home page layout
+- Dependency update to `vue3.3+` and remove `unplugin-vue-define-options` plugin
+
 # 4.0.0 (2023-05-09)

 [View 4.0.0 version optimization details](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,23 @@
+# 4.1.0 (2023-05-12)
+
+### 🎫 Feat
+
+- Add a `demo` example combined with `Form` for the functional pop-up box component
+- wrapper `el-col` component of `element-plus`
+- Add `beforeCancel` and `beforeSure` callbacks to the functional popup component, which can suspend the closing of the popup
+- Improve `System Management-Department Management` page
+- Optimize `PureTableBar` component, add drag and drop function for column display
+
+### 🐞 Bug fixes
+
+- Fix the problem that the page cache still exists when you click the tab to reload after turning on `keepAlive`
+- Fix the problem that the left menu will flicker after refreshing the tab in the mixed mode menu
+
+### 🍏 Perf
+
+- Optimize home page layout
+- Dependency update to `vue3.3+` and remove `unplugin-vue-define-options` plugin
+
 # 4.0.0 (2023-05-09)

 [View 4.0.0 version optimization details](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,23 @@
+# 4.1.0 (2023-05-12)
+
+### 🎫 Feat
+
+- 函数式弹框组件添加结合 `Form` 的 `demo` 示例
+- 封装 `element-plus` 的 `el-col` 组件
+- 函数式弹框组件添加 `beforeCancel` 和 `beforeSure` 回调，可暂停弹框的关闭
+- 完善 `系统管理-部门管理` 页面
+- 优化 `PureTableBar` 组件，列展示添加拖拽功能
+
+### 🐞 Bug fixes
+
+- 修复开启 `keepAlive` 后点击标签页的重新加载，页面缓存还存在的问题
+- 修复混合模式菜单下刷新页签后左侧菜单会闪烁一下的问题
+
+### 🍏 Perf
+
+- 优化首页布局
+- 依赖更新到 `vue3.3+` 以及删除 `unplugin-vue-define-options` 插件
+
 # 4.0.0 (2023-05-09)

 [查看 4.0.0 版本优化细节](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)
--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -10,7 +10,6 @@ import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
-import DefineOptions from "unplugin-vue-define-options/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";

 export function getPluginsList(
@@ -31,7 +30,6 @@ export function getPluginsList(
    vueJsx(),
    VITE_CDN ? cdn : null,
    configCompressPlugin(VITE_COMPRESSION),
-    DefineOptions(),
    // 线上环境删除console
    removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
    viteBuildInfo(),
--- a/mock/system.ts
+++ b/mock/system.ts
@@ -1,6 +1,7 @@
 import { MockMethod } from "vite-plugin-mock";

 export default [
+  // 角色
  {
    url: "/role",
    method: "post",
@@ -10,7 +11,7 @@ export default [
        data: {
          list: [
            {
-              createTime: 1609837428000,
+              createTime: 1605456000000,
              updateTime: 1645477701000,
              creator: "admin",
              updater: "",
@@ -27,7 +28,7 @@ export default [
              dataScopeDeptIds: null
            },
            {
-              createTime: 1609837428000,
+              createTime: 1605456000000,
              updateTime: 1645477700000,
              creator: "admin",
              updater: "",
@@ -44,7 +45,7 @@ export default [
              dataScopeDeptIds: null
            },
            {
-              createTime: 1609912175000,
+              createTime: 1605456000000,
              updateTime: 1647698441000,
              creator: "",
              updater: "1",
@@ -66,6 +67,7 @@ export default [
      };
    }
  },
+  // 部门
  {
    url: "/dept",
    method: "post",
@@ -75,138 +77,139 @@ export default [
        data: [
          {
            name: "杭州总公司",
-            type: 1, // 1 公司 2 分公司 3 部门
            parentId: 0,
-            sort: 0,
-            leaderUserId: 1,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 100,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 0,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 1, // 1 公司 2 分公司 3 部门
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "郑州分公司",
-            type: 2,
            parentId: 100,
-            sort: 1,
-            leaderUserId: 104,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 101,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 1,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 2,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "研发部门",
-            type: 3,
            parentId: 101,
-            sort: 1,
-            leaderUserId: 104,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 103,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 1,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "市场部门",
-            type: 3,
            parentId: 102,
-            sort: 1,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 108,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 1,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "深圳分公司",
-            type: 2,
            parentId: 100,
-            sort: 2,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 102,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 2,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 2,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "市场部门",
-            type: 3,
            parentId: 101,
-            sort: 2,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 1,
            id: 104,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 2,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "财务部门",
-            type: 3,
            parentId: 102,
-            sort: 2,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 109,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 2,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "测试部门",
-            type: 3,
            parentId: 101,
-            sort: 3,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 105,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 3,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 0,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "财务部门",
-            type: 3,
            parentId: 101,
-            sort: 4,
-            leaderUserId: 103,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 1,
            id: 106,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 4,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          },
          {
            name: "运维部门",
-            type: 3,
            parentId: 101,
-            sort: 5,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
            id: 107,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            sort: 5,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 0,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
          }
        ]
      };
    }
  },
+  // 用户
  {
    url: "/user",
    method: "post",
@@ -225,7 +228,7 @@ export default [
              sex: 0,
              id: 1,
              status: 0,
-              createTime: 1609837427000,
+              createTime: 1605456000000,
              dept: {
                id: 103,
                name: "研发部门"
@@ -241,7 +244,7 @@ export default [
              sex: 0,
              id: 100,
              status: 1,
-              createTime: 1609981637000,
+              createTime: 1605456000000,
              dept: {
                id: 104,
                name: "市场部门"
@@ -257,7 +260,7 @@ export default [
              sex: 1,
              id: 103,
              status: 1,
-              createTime: 1610553035000,
+              createTime: 1605456000000,
              dept: {
                id: 106,
                name: "财务部门"
@@ -273,7 +276,7 @@ export default [
              sex: 0,
              id: 104,
              status: 0,
-              createTime: 1611166433000,
+              createTime: 1605456000000,
              dept: {
                id: 107,
                name: "运维部门"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "4.0.0",
+  "version": "4.1.0",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -65,7 +65,7 @@
    "swiper": "^9.3.0",
    "typeit": "^8.7.1",
    "v-contextmenu": "3.0.0",
-    "vue": "^3.2.47",
+    "vue": "^3.3.1",
    "vue-i18n": "^9.2.2",
    "vue-json-pretty": "^2.2.4",
    "vue-pdf-embed": "^1.1.6",
@@ -94,9 +94,9 @@
    "@types/qrcode": "^1.5.0",
    "@types/qs": "^6.9.7",
    "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "@vitejs/plugin-vue": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "@vitejs/plugin-vue": "^4.2.2",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.3",
@@ -105,7 +105,7 @@
    "cssnano": "^6.0.1",
    "eslint": "^8.40.0",
    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.11.1",
+    "eslint-plugin-vue": "^9.12.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.2",
    "picocolors": "^1.0.0",
@@ -134,7 +134,6 @@
    "tailwindcss": "^3.3.2",
    "terser": "^5.17.1",
    "typescript": "^5.0.4",
-    "unplugin-vue-define-options": "1.1.6",
    "vite": "^4.3.5",
    "vite-plugin-cdn-import": "^0.3.5",
    "vite-plugin-compression": "^0.5.1",
@@ -142,7 +141,7 @@
    "vite-plugin-remove-console": "^2.1.1",
    "vite-svg-loader": "^4.0.0",
    "vue-eslint-parser": "^9.2.1",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.4"
  },
  "pnpm": {
    "peerDependencyRules": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "4.0.0",
+  "Version": "4.1.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/components/ReCol/index.ts
+++ b/src/components/ReCol/index.ts
@@ -0,0 +1,29 @@
+import { ElCol } from "element-plus";
+import { h, defineComponent } from "vue";
+
+// 封装element-plus的el-col组件
+export default defineComponent({
+  name: "ReCol",
+  props: {
+    value: {
+      type: Number,
+      default: 24
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    const val = this.value;
+    return h(
+      ElCol,
+      {
+        xs: val,
+        sm: val,
+        md: val,
+        lg: val,
+        xl: val,
+        ...attrs
+      },
+      { default: () => this.$slots.default() }
+    );
+  }
+});
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -19,7 +19,13 @@ const footerButtons = computed(() => {
            text: true,
            bg: true,
            btnClick: ({ dialog: { options, index } }) => {
-              closeDialog(options, index, { command: "cancel" });
+              const done = () =>
+                closeDialog(options, index, { command: "cancel" });
+              if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+                options.beforeCancel(done, { options, index });
+              } else {
+                done();
+              }
            }
          },
          {
@@ -28,7 +34,13 @@ const footerButtons = computed(() => {
            text: true,
            bg: true,
            btnClick: ({ dialog: { options, index } }) => {
-              closeDialog(options, index, { command: "sure" });
+              const done = () =>
+                closeDialog(options, index, { command: "sure" });
+              if (options?.beforeSure && isFunction(options?.beforeSure)) {
+                options.beforeSure(done, { options, index });
+              } else {
+                done();
+              }
            }
          }
        ] as Array<ButtonProps>);
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -128,7 +128,7 @@ interface DialogOptions extends DialogProps {
    close: Function;
    titleId: string;
    titleClass: string;
-  }) => VNode;
+  }) => VNode | Component;
  /** 自定义内容渲染器 */
  contentRenderer?: ({
    options,
@@ -136,7 +136,7 @@ interface DialogOptions extends DialogProps {
  }: {
    options: DialogOptions;
    index: number;
-  }) => VNode;
+  }) => VNode | Component;
  /** 自定义按钮操作区的内容渲染器，会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
  footerRenderer?: ({
    options,
@@ -144,7 +144,7 @@ interface DialogOptions extends DialogProps {
  }: {
    options: DialogOptions;
    index: number;
-  }) => VNode;
+  }) => VNode | Component;
  /** 自定义底部按钮操作 */
  footerButtons?: Array<ButtonProps>;
  /** `Dialog` 打开后的回调 */
@@ -189,6 +189,28 @@ interface DialogOptions extends DialogProps {
    options: DialogOptions;
    index: number;
  }) => void;
+  /** 点击底部取消按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeCancel?: (
+    done: Function,
+    {
+      options,
+      index
+    }: {
+      options: DialogOptions;
+      index: number;
+    }
+  ) => void;
+  /** 点击底部确定按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeSure?: (
+    done: Function,
+    {
+      options,
+      index
+    }: {
+      options: DialogOptions;
+      index: number;
+    }
+  ) => void;
 }

 export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,6 +1,9 @@
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
-import { defineComponent, ref, computed, type PropType } from "vue";
+import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
+
+import Sortable from "sortablejs";
+import DragIcon from "./svg/drag.svg?component";
 import ExpandIcon from "./svg/expand.svg?component";
 import RefreshIcon from "./svg/refresh.svg?component";
 import SettingIcon from "./svg/settings.svg?component";
@@ -107,16 +110,17 @@ export default defineComponent({
        checkedCount > 0 && checkedCount < checkColumnList.length;
    }

-    function handleCheckColumnListChange(val: boolean, index: number) {
-      dynamicColumns.value[index].hide = !val;
+    function handleCheckColumnListChange(val: boolean, label: string) {
+      dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
    }

-    function onReset() {
+    async function onReset() {
      checkAll.value = true;
      isIndeterminate.value = false;
-      checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
-      checkedColumns.value = checkColumnList;
      dynamicColumns.value = cloneDeep(props?.columns);
+      checkColumnList = [];
+      checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
+      checkedColumns.value = checkColumnList;
    }

    const dropdown = {
@@ -144,6 +148,47 @@ export default defineComponent({
      )
    };

+    /** 列展示拖拽排序 */
+    const rowDrop = (event: { preventDefault: () => void }) => {
+      event.preventDefault();
+      nextTick(() => {
+        const wrapper: HTMLElement = document.querySelector(
+          ".el-checkbox-group>div"
+        );
+        Sortable.create(wrapper, {
+          animation: 300,
+          handle: ".drag-btn",
+          onEnd: ({ newIndex, oldIndex, item }) => {
+            const targetThElem = item;
+            const wrapperElem = targetThElem.parentNode as HTMLElement;
+            const oldColumn = dynamicColumns.value[oldIndex];
+            const newColumn = dynamicColumns.value[newIndex];
+            if (oldColumn?.fixed || newColumn?.fixed) {
+              // 当前列存在fixed属性 则不可拖拽
+              const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+              if (newIndex > oldIndex) {
+                wrapperElem.insertBefore(targetThElem, oldThElem);
+              } else {
+                wrapperElem.insertBefore(
+                  targetThElem,
+                  oldThElem ? oldThElem.nextElementSibling : oldThElem
+                );
+              }
+              return;
+            }
+            const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
+            dynamicColumns.value.splice(newIndex, 0, currentRow);
+          }
+        });
+      });
+    };
+
+    const isFixedColumn = (label: string) => {
+      return dynamicColumns.value.filter(item => item.label === label)[0].fixed
+        ? true
+        : false;
+    };
+
    const reference = {
      reference: () => (
        <SettingIcon
@@ -191,7 +236,6 @@ export default defineComponent({
                />
              </el-tooltip>
              <el-divider direction="vertical" />
-
              <el-tooltip effect="dark" content="密度" placement="top">
                <el-dropdown v-slots={dropdown} trigger="click">
                  <CollapseIcon class={["w-[16px]", iconClass.value]} />
@@ -228,22 +272,35 @@ export default defineComponent({
                      alignment="flex-start"
                      size={0}
                    >
-                      {checkColumnList.map((item, index) => {
+                      {checkColumnList.map(item => {
                        return (
-                          <el-checkbox
-                            key={item}
-                            label={item}
-                            onChange={value =>
-                              handleCheckColumnListChange(value, index)
-                            }
-                          >
-                            <span
-                              title={item}
-                              class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                          <div class="flex items-center">
+                            <DragIcon
+                              class={[
+                                "drag-btn w-[16px] mr-2",
+                                isFixedColumn(item)
+                                  ? "!cursor-no-drop"
+                                  : "!cursor-grab"
+                              ]}
+                              onMouseenter={(event: {
+                                preventDefault: () => void;
+                              }) => rowDrop(event)}
+                            />
+                            <el-checkbox
+                              key={item}
+                              label={item}
+                              onChange={value =>
+                                handleCheckColumnListChange(value, item)
+                              }
                            >
-                              {item}
-                            </span>
-                          </el-checkbox>
+                              <span
+                                title={item}
+                                class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                              >
+                                {item}
+                              </span>
+                            </el-checkbox>
+                          </div>
                        );
                      })}
                    </el-space>
--- a/src/components/RePureTableBar/src/svg/drag.svg
+++ b/src/components/RePureTableBar/src/svg/drag.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zm0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0zM300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0z"/></svg>
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -60,6 +60,7 @@ onBeforeMount(() => {
 watch(
  () => [route.path, usePermissionStoreHook().wholeMenus],
  () => {
+    if (route.path.includes("/redirect")) return;
    getSubMenuData(route.path);
    menuSelect(route.path, routers);
  }
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -169,6 +169,7 @@ function onFresh() {
    path: "/redirect" + fullPath,
    query
  });
+  handleAliveRoute(route as toRouteType, "refresh");
 }

 function deleteDynamicTag(obj: any, current: any, tag?: string) {
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -270,6 +270,12 @@ function handleAliveRoute({ name }: toRouteType, mode?: string) {
        name
      });
      break;
+    case "refresh":
+      usePermissionStoreHook().cacheOperate({
+        mode: "refresh",
+        name
+      });
+      break;
    default:
      usePermissionStoreHook().cacheOperate({
        mode: "delete",
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -24,13 +24,15 @@ export const usePermissionStore = defineStore({
      );
    },
    cacheOperate({ mode, name }: cacheType) {
+      const delIndex = this.cachePageList.findIndex(v => v === name);
      switch (mode) {
+        case "refresh":
+          this.cachePageList = this.cachePageList.filter(v => v !== name);
+          break;
        case "add":
          this.cachePageList.push(name);
          break;
        case "delete":
-          // eslint-disable-next-line no-case-declarations
-          const delIndex = this.cachePageList.findIndex(v => v === name);
          delIndex !== -1 && this.cachePageList.splice(delIndex, 1);
          break;
      }
--- a/src/views/components/dialog/form.vue
+++ b/src/views/components/dialog/form.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+// 声明 props 类型
+export interface FormProps {
+  formInline: {
+    user: string;
+    region: string;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({ user: "", region: "" })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，不能在子组件中更改 prop 值，该 form.vue 文件为子组件
+// 如果需要拿到初始化的 prop 值并使得组件变量可修改，则需要在子组件定义一个新的变量接受这个子组件的 prop
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const newFormInline = ref(props.formInline);
+</script>
+
+<template>
+  <el-form :model="newFormInline">
+    <el-form-item label="姓名">
+      <el-input
+        class="!w-[220px]"
+        v-model="newFormInline.user"
+        placeholder="请输入姓名"
+      />
+    </el-form-item>
+    <el-form-item label="城市">
+      <el-select
+        class="!w-[220px]"
+        v-model="newFormInline.region"
+        placeholder="请选择城市"
+      >
+        <el-option label="上海" value="上海" />
+        <el-option label="浙江" value="浙江" />
+        <el-option label="深圳" value="深圳" />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="tsx">
-import { h, createVNode } from "vue";
+import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
+import { cloneDeep } from "@pureadmin/utils";
+import forms, { type FormProps } from "./form.vue";
 import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";

 defineOptions({
@@ -189,6 +191,7 @@ function onCloseCallBackClick() {
  });
 }

+// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
 function onNestingClick() {
  addDialog({
    title: "嵌套的弹框",
@@ -225,6 +228,140 @@ function onNestingClick() {
    )
  });
 }
+
+// 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
+function onFormOneClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第一种方式）",
+    contentRenderer: () => forms,
+    props: {
+      // 赋默认值
+      formInline: {
+        user: "菜虚鲲",
+        region: "浙江"
+      }
+    },
+    closeCallBack: ({ options, args }) => {
+      // options.props 是响应式的
+      const { formInline } = options.props as FormProps;
+      const text = `姓名：${formInline.user} 城市：${formInline.region}`;
+      if (args?.command === "cancel") {
+        // 您点击了取消按钮
+        message(`您点击了取消按钮，当前表单数据为 ${text}`);
+      } else if (args?.command === "sure") {
+        message(`您点击了确定按钮，当前表单数据为 ${text}`);
+      } else {
+        message(`您点击了右上角关闭按钮或者空白页，当前表单数据为 ${text}`);
+      }
+    }
+  });
+}
+
+// 结合Form表单（第二种方式）h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
+const formInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormInline = cloneDeep(formInline.value);
+function onFormTwoClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第二种方式）",
+    contentRenderer: () => h(forms, { formInline: formInline.value }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
+      );
+      // 重置表单数据
+      formInline.value = cloneDeep(resetFormInline);
+    }
+  });
+}
+
+// 结合Form表单（第三种方式）createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
+const formThreeInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormThreeInline = cloneDeep(formThreeInline.value);
+function onFormThreeClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第三种方式）",
+    contentRenderer: () =>
+      createVNode(forms, { formInline: formThreeInline.value }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
+      );
+      // 重置表单数据
+      formThreeInline.value = cloneDeep(resetFormThreeInline);
+    }
+  });
+}
+
+// 结合Form表单（第四种方式）使用jsx语法
+// 需要注意的是如果 forms 没注册，这里 forms 注册了是因为上面 contentRenderer: () => forms、h(forms) 、createVNode(createVNode) 间接给注册了
+// 如果只使用了jsx语法，如下 `contentRenderer: () => <forms formInline={formFourInline.value} />` 是不会给 forms 组件进行注册的，需要在 `script` 中任意位置（最好是末尾）写上 forms 即可
+// 同理如果在 tsx 文件中，这么使用 `contentRenderer: () => <forms formInline={formFourInline.value} />`，也是不会给 forms 组件进行注册，需要在 return 中写上 forms
+const formFourInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormFourInline = cloneDeep(formFourInline.value);
+function onFormFourClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第四种方式）",
+    contentRenderer: () => <forms formInline={formFourInline.value} />,
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formFourInline.value.user} 城市：${formFourInline.value.region}`
+      );
+      // 重置表单数据
+      formFourInline.value = cloneDeep(resetFormFourInline);
+    }
+  });
+}
+
+function onBeforeCancelClick() {
+  addDialog({
+    title: "点击底部取消按钮的回调",
+    contentRenderer: () => (
+      <p>弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）</p>
+    ),
+    beforeCancel: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onBeforeSureClick() {
+  addDialog({
+    title: "点击底部确定按钮的回调",
+    contentRenderer: () => (
+      <p>
+        弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+      </p>
+    ),
+    beforeSure: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
 </script>

 <template>
@@ -240,7 +377,13 @@ function onNestingClick() {
          >
            Dialog
          </el-link>
-          ，采用函数式调用弹框组件
+          ，采用函数式调用弹框组件（更多操作实例请参考
+          <span
+            class="cursor-pointer text-primary"
+            @click="$router.push({ name: 'Dept' })"
+            >系统管理页面</span
+          >
+          ）
        </span>
      </div>
    </template>
@@ -267,5 +410,29 @@ function onNestingClick() {
      <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
      <el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onFormOneClick">
+        结合Form表单（第一种方式）
+      </el-button>
+      <el-button @click="onFormTwoClick">
+        结合Form表单（第二种方式）
+      </el-button>
+      <el-button @click="onFormThreeClick">
+        结合Form表单（第三种方式）
+      </el-button>
+      <el-button @click="onFormFourClick">
+        结合Form表单（第四种方式）
+      </el-button>
+    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onBeforeCancelClick">
+        点击底部取消按钮的回调（会暂停弹框的关闭）
+      </el-button>
+      <el-button @click="onBeforeSureClick">
+        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+      </el-button>
+    </el-space>
  </el-card>
 </template>
--- a/src/views/system/dept/form.vue
+++ b/src/views/system/dept/form.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./rule";
+import { FormProps } from "./types";
+import ReCol from "@/components/ReCol";
+import { usePublicHooks } from "../hooks";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    higherDeptOptions: [],
+    parentId: 0,
+    name: "",
+    principal: "",
+    phone: "",
+    email: "",
+    sort: 0,
+    status: 1,
+    remark: ""
+  })
+});
+
+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>
+        <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">
+        <el-form-item label="部门名称" prop="name">
+          <el-input
+            v-model="newFormInline.name"
+            clearable
+            placeholder="请输入部门名称"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门负责人">
+          <el-input
+            v-model="newFormInline.principal"
+            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-input-number
+            v-model="newFormInline.sort"
+            :min="0"
+            :max="9999"
+            controls-position="right"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <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>
--- a/src/views/system/dept/hook.tsx
+++ b/src/views/system/dept/hook.tsx
@@ -1,22 +1,26 @@
 import dayjs from "dayjs";
+import editForm from "./form.vue";
 import { handleTree } from "@/utils/tree";
+import { usePublicHooks } from "../hooks";
+import { message } from "@/utils/message";
 import { getDeptList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
+import { type FormItemProps } from "./types";
+import { addDialog } from "@/components/ReDialog";
+import { reactive, ref, onMounted, h } from "vue";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";

 export function useDept() {
  const form = reactive({
-    user: "",
-    status: ""
+    name: "",
+    status: null
  });
+
+  const formRef = ref();
  const dataList = ref([]);
  const loading = ref(true);
+  const { tagStyle } = usePublicHooks();

  const columns: TableColumnList = [
-    {
-      label: "序号",
-      type: "index",
-      minWidth: 70
-    },
    {
      label: "部门名称",
      prop: "name",
@@ -33,12 +37,8 @@ export function useDept() {
      prop: "status",
      minWidth: 100,
      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.status === 1 ? "danger" : "success"}
-          effect="plain"
-        >
-          {row.status === 0 ? "关闭" : "开启"}
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
+          {row.status === 1 ? "启用" : "停用"}
        </el-tag>
      )
    },
@@ -52,7 +52,7 @@ export function useDept() {
    {
      label: "备注",
      prop: "remark",
-      minWidth: 200
+      minWidth: 320
    },
    {
      label: "操作",
@@ -62,14 +62,6 @@ export function useDept() {
    }
  ];

-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }
@@ -82,13 +74,86 @@ export function useDept() {

  async function onSearch() {
    loading.value = true;
-    const { data } = await getDeptList();
-    dataList.value = handleTree(data);
+    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+    let newData = data;
+    if (!isAllEmpty(form.name)) {
+      // 前端搜索部门名称
+      newData = newData.filter(item => item.name.includes(form.name));
+    }
+    if (!isAllEmpty(form.status)) {
+      // 前端搜索状态
+      newData = newData.filter(item => item.status === form.status);
+    }
+    dataList.value = handleTree(newData); // 处理成树结构
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

+  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: {
+          higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
+          parentId: row?.parentId ?? 0,
+          name: row?.name ?? "",
+          principal: row?.principal ?? "",
+          phone: row?.phone ?? "",
+          email: row?.email ?? "",
+          sort: row?.sort ?? 0,
+          status: row?.status ?? 1,
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: 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.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  function handleDelete(row) {
+    message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
  onMounted(() => {
    onSearch();
  });
@@ -98,9 +163,13 @@ export function useDept() {
    loading,
    columns,
    dataList,
+    /** 搜索 */
    onSearch,
+    /** 重置 */
    resetForm,
-    handleUpdate,
+    /** 新增、编辑部门 */
+    openDialog,
+    /** 删除部门 */
    handleDelete,
    handleSelectionChange
  };
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -23,7 +23,7 @@ const {
  dataList,
  onSearch,
  resetForm,
-  handleUpdate,
+  openDialog,
  handleDelete,
  handleSelectionChange
 } = useDept();
@@ -37,9 +37,9 @@ const {
      :model="form"
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
-      <el-form-item label="部门名称：" prop="user">
+      <el-form-item label="部门名称：" prop="name">
        <el-input
-          v-model="form.user"
+          v-model="form.name"
          placeholder="请输入部门名称"
          clearable
          class="!w-[200px]"
@@ -52,8 +52,8 @@ const {
          clearable
          class="!w-[180px]"
        >
-          <el-option label="开启" value="1" />
-          <el-option label="关闭" value="0" />
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
@@ -72,13 +72,17 @@ const {
    </el-form>

    <PureTableBar
-      title="部门列表"
+      title="部门列表（仅演示，操作后不生效）"
      :columns="columns"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
    >
      <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
          新增部门
        </el-button>
      </template>
@@ -107,12 +111,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.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
              <template #reference>
                <el-button
                  class="reset-margin"
@@ -120,7 +127,6 @@ const {
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(Delete)"
-                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
--- a/src/views/system/dept/rule.ts
+++ b/src/views/system/dept/rule.ts
@@ -0,0 +1,37 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+import { isPhone, isEmail } from "@pureadmin/utils";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ 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"
+    }
+  ]
+});
--- a/src/views/system/dept/types.ts
+++ b/src/views/system/dept/types.ts
@@ -0,0 +1,16 @@
+interface FormItemProps {
+  higherDeptOptions: Record<string, unknown>[];
+  parentId: number;
+  name: string;
+  principal: string;
+  phone: string | number;
+  email: string;
+  sort: number;
+  status: number;
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };
--- a/src/views/system/hooks.ts
+++ b/src/views/system/hooks.ts
@@ -0,0 +1,39 @@
+// 抽离可公用的工具函数等用于系统管理页面逻辑
+import { computed } from "vue";
+import { useDark } from "@pureadmin/utils";
+
+export function usePublicHooks() {
+  const { isDark } = useDark();
+
+  const switchStyle = computed(() => {
+    return {
+      "--el-switch-on-color": "#6abe39",
+      "--el-switch-off-color": "#e84749"
+    };
+  });
+
+  const tagStyle = computed(() => {
+    return (status: number) => {
+      return status === 1
+        ? {
+            "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
+            "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
+            "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
+          }
+        : {
+            "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
+            "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
+            "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
+          };
+    };
+  });
+
+  return {
+    /** 当前网页是否为`dark`模式 */
+    isDark,
+    /** 表现更鲜明的`el-switch`组件  */
+    switchStyle,
+    /** 表现更鲜明的`el-tag`组件  */
+    tagStyle
+  };
+}
--- a/src/views/system/role/hook.tsx
+++ b/src/views/system/role/hook.tsx
@@ -21,16 +21,18 @@ export function useRole() {
    background: true
  });
  const columns: TableColumnList = [
-    {
-      label: "勾选列", // 如果需要表格多选，此处label必须设置
-      type: "selection",
-      width: 55,
-      align: "left"
-    },
+    // {
+    //   label: "勾选列", // 如果需要表格多选，此处label必须设置
+    //   type: "selection",
+    //   width: 55,
+    //   align: "left",
+    //   fixed: "left"
+    // },
    {
      label: "序号",
      type: "index",
-      width: 70
+      width: 70,
+      fixed: "left"
    },
    {
      label: "角色编号",
--- a/src/views/system/user/hook.tsx
+++ b/src/views/system/user/hook.tsx
@@ -24,7 +24,8 @@ export function useUser() {
    {
      label: "序号",
      type: "index",
-      width: 70
+      width: 70,
+      fixed: "left"
    },
    {
      label: "用户编号",
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -6,6 +6,7 @@ import Bar from "./components/Bar.vue";
 import Pie from "./components/Pie.vue";
 import Line from "./components/Line.vue";
 import TypeIt from "@/components/ReTypeit";
+import { useWindowSize } from "@vueuse/core";
 import { ref, computed, markRaw } from "vue";
 import Github from "./components/Github.vue";
 import { randomColor } from "@pureadmin/utils";
@@ -17,10 +18,13 @@ defineOptions({

 const list = ref();
 const loading = ref<boolean>(true);
+const { version } = __APP_INFO__.pkg;
 const titleClass = computed(() => {
  return ["text-base", "font-medium"];
 });

+const { height } = useWindowSize();
+
 setTimeout(() => {
  loading.value = !loading.value;
 }, 800);
@@ -65,7 +69,10 @@ axios
          }
        }"
      >
-        <el-card shadow="never" style="height: 347px">
+        <el-card
+          shadow="never"
+          :style="{ height: `calc(${height}px - 35vh - 250px)` }"
+        >
          <template #header>
            <a
              :class="titleClass"
@@ -74,15 +81,15 @@ axios
            >
              <TypeIt
                :className="'type-it2'"
-                :values="['PureAdmin 版本日志']"
+                :values="[`PureAdmin 版本日志（当前版本 v${version}）`]"
                :cursor="false"
-                :speed="80"
+                :speed="60"
              />
            </a>
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
-              <el-scrollbar height="324px">
+              <el-scrollbar :height="`calc(${height}px - 35vh - 340px)`">
                <el-timeline v-show="list?.length > 0">
                  <el-timeline-item
                    v-for="(item, index) in list"
@@ -120,7 +127,10 @@ axios
          }
        }"
      >
-        <el-card shadow="never" style="height: 347px">
+        <el-card
+          shadow="never"
+          :style="{ height: `calc(${height}px - 35vh - 250px)` }"
+        >
          <template #header>
            <a
              :class="titleClass"
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,10 +27,9 @@
      "vite/client",
      "element-plus/global",
      "@pureadmin/table/volar",
-      "@pureadmin/descriptions/volar",
-      "unplugin-vue-define-options/macros-global"
+      "@pureadmin/descriptions/volar"
    ],
-    "typeRoots": ["./node_modules/@types/", "./types"]
+    "typeRoots": ["./types", "./node_modules/@types/"]
  },
  "include": [
    "mock/*.ts",
@@ -40,5 +39,5 @@
    "types/*.d.ts",
    "vite.config.ts"
  ],
-  "exclude": ["node_modules", "dist", "**/*.js"]
+  "exclude": ["dist", "**/*.js", "node_modules"]
 }
--- a/types/global-components.d.ts
+++ b/types/global-components.d.ts
@@ -11,7 +11,7 @@ declare module "vue" {
 }

 /**
- * todo：https://github.com/element-plus/element-plus/blob/dev/global.d.ts#L2
+ * TODO https://github.com/element-plus/element-plus/blob/dev/global.d.ts#L2
 * No need to install @vue/runtime-core
 */
 declare module "vue" {
Author	SHA1	Message	Date
xiaoxian521	6d141bfd2f	release: update `4.1.0`	2023-05-12 01:45:43 +08:00
xiaoxian521	86ec72f3c0	chore: 依赖更新到`vue3.3+`以及删除`unplugin-vue-define-options`插件	2023-05-11 20:26:58 +08:00
许诺	43ddf7aba8	feat: 优化 `PureTableBar` 组件，列展示添加拖拽功能 (#545 ) * feat: add 表格工具列拖拽 * fix: 修复拖拽 * fix: 修复警告 * fix: 修复点击checkbox表格数据隐藏 * chore: update --------- Co-authored-by: RealityBoy <1923740402@qq.com>	2023-05-11 19:58:49 +08:00
xiaoxian521	a71bf0befb	perf: 完善`系统管理-部门管理`页面	2023-05-11 15:11:58 +08:00
xiaoxian521	47f951312e	feat: 函数式弹框组件添加 `beforeCancel`和`beforeSure`回调	2023-05-10 17:42:43 +08:00
xiaoxian521	b2d06d2b3b	feat: 封装 `element-plus` 的 `el-col` 组件	2023-05-10 17:20:42 +08:00
xiaoxian521	7957dc2c18	feat: 函数式弹框组件添加结合`Form`的`demo`示例	2023-05-10 01:47:43 +08:00
HappyBoy	fd9c19dd00	fix: 修复在混合模式下刷新页签后，左侧菜单会消失闪一下的问题 (#543 ) Co-authored-by: lixiangpeng <lixiangpeng@tbea.com>	2023-05-09 22:14:15 +08:00
xiaoxian521	b77586da07	perf: 优化首页布局	2023-05-09 22:03:57 +08:00
xiaoxian521	09cbc7ddc3	fix: 修复开启`keepAlive`后点击标签页的重新加载，页面缓存还存在的问题	2023-05-09 20:28:11 +08:00
				`@@ -0,0 +1 @@`
				`<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zm0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0zM300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0z"/></svg>`