release: update 4.1.0

* feat: add 表格工具列拖拽

* fix: 修复拖拽

* fix: 修复警告

* fix: 修复点击checkbox表格数据隐藏

* chore: update

---------

Co-authored-by: RealityBoy <1923740402@qq.com>

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)

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)

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)

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(),

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,
+            sort: 0,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 1,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 1,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 1,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 2,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 2,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 2,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 3,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 4,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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,
+            sort: 5,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
+            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: "运维部门"

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/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.1",
+    "@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": {

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "4.0.0",
+  "Version": "4.1.0",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,

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() }
+    );
+  }
+});

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>);

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 };

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) {
+    function handleCheckColumnListChange(val: boolean, label: string) {
-      dynamicColumns.value[index].hide = !val;
+      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
+                          <div class="flex items-center">
-                            key={item}
+                            <DragIcon
-                            label={item}
+                              class={[
-                            onChange={value =>
+                                "drag-btn w-[16px] mr-2",
-                              handleCheckColumnListChange(value, index)
+                                isFixedColumn(item)
-                            }
+                                  ? "!cursor-no-drop"
-                          >
+                                  : "!cursor-grab"
-                            <span
+                              ]}
-                              title={item}
+                              onMouseenter={(event: {
-                              class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                                preventDefault: () => void;
+                              }) => rowDrop(event)}
+                            />
+                            <el-checkbox
+                              key={item}
+                              label={item}
+                              onChange={value =>
+                                handleCheckColumnListChange(value, item)
+                              }
                             >
-                              {item}
+                              <span
-                            </span>
+                                title={item}
-                          </el-checkbox>
+                                class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                              >
+                                {item}
+                              </span>
+                            </el-checkbox>
+                          </div>
                         );
                       })}
                     </el-space>

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>

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);
   }

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) {

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",

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;
       }

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>

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>

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>

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: "",
+    name: "",
-    status: ""
+    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
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
-          size={props.size}
+          {row.status === 1 ? "启用" : "停用"}
-          type={row.status === 1 ? "danger" : "success"}
-          effect="plain"
-        >
-          {row.status === 0 ? "关闭" : "开启"}
         </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();
+    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
-    dataList.value = handleTree(data);
+    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
   };

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="1" />
-          <el-option label="关闭" value="0" />
+          <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>

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"
+    }
+  ]
+});

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 };

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
+  };
+}

src/views/system/role/hook.tsx

@@ -21,16 +21,18 @@ export function useRole() {
     background: true
   });
   const columns: TableColumnList = [
-    {
+    // {
-      label: "勾选列", // 如果需要表格多选，此处label必须设置
+    //   label: "勾选列", // 如果需要表格多选，此处label必须设置
-      type: "selection",
+    //   type: "selection",
-      width: 55,
+    //   width: 55,
-      align: "left"
+    //   align: "left",
-    },
+    //   fixed: "left"
+    // },
     {
       label: "序号",
       type: "index",
-      width: 70
+      width: 70,
+      fixed: "left"
     },
     {
       label: "角色编号",

src/views/system/user/hook.tsx

@@ -24,7 +24,8 @@ export function useUser() {
     {
       label: "序号",
       type: "index",
-      width: 70
+      width: 70,
+      fixed: "left"
     },
     {
       label: "用户编号",

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"

tsconfig.json

@@ -27,10 +27,9 @@
       "vite/client",
       "element-plus/global",
       "@pureadmin/table/volar",
-      "@pureadmin/descriptions/volar",
+      "@pureadmin/descriptions/volar"
-      "unplugin-vue-define-options/macros-global"
     ],
-    "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"]
 }

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" {