release: update 4.2.0

feat: 新增分段控制器组件并适配暗黑模式
feat: 新增组件-瀑布流demo
2025-11-09 13:53:38 +08:00 · 2023-05-15 15:03:57 +08:00 · 2023-05-15 14:41:35 +08:00 · 2023-05-14 16:38:29 +08:00 · 2023-05-14 14:20:06 +08:00 · 2023-05-14 10:37:45 +08:00
54 changed files with 2447 additions and 876 deletions
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,37 @@
+# 4.2.0 (2023-05-15)
+
+### 🎫 Feat
+
+- Added segment controller component and adapted to dark mode
+- Static routing supports configuration array format
+- Functional bullet box component adds full screen and exit full screen operation buttons
+- New component - Waterfall `demo`
+- Add `Exclusive` type mutual exclusion syntactic sugar
+
+### 🍏 Perf
+
+- Standardize the way of writing routes in `template` template, no longer use `$route` and `$router`, this way of writing `vue-tsc` fails to compile
+
+# 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,37 @@
+# 4.2.0 (2023-05-15)
+
+### 🎫 Feat
+
+- Added segment controller component and adapted to dark mode
+- Static routing supports configuration array format
+- Functional bullet box component adds full screen and exit full screen operation buttons
+- New component - Waterfall `demo`
+- Add `Exclusive` type mutual exclusion syntactic sugar
+
+### 🍏 Perf
+
+- Standardize the way of writing routes in `template` template, no longer use `$route` and `$router`, this way of writing `vue-tsc` fails to compile
+
+# 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,37 @@
+# 4.2.0 (2023-05-15)
+
+### 🎫 Feat
+
+- 新增分段控制器组件并适配暗黑模式
+- 静态路由支持配置数组格式
+- 函数式弹框组件添加全屏、退出全屏操作按钮
+- 新增组件-瀑布流 `demo`
+- 添加 `Exclusive` 类型互斥语法糖
+
+### 🍏 Perf
+
+- 规范 `template` 模版中路由写法，不再使用 `$route` 和 `$router`，此写法 `vue-tsc` 编译不通过
+
+# 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/optimize.ts
+++ b/build/optimize.ts
@@ -36,6 +36,7 @@ const include = [
  "element-resize-detector",
  "@amap/amap-jsapi-loader",
  "el-table-infinite-scroll",
+  "vue-waterfall-plugin-next",
  "@wangeditor/editor-for-vue",
  "vuedraggable/src/vuedraggable"
 ];
--- 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/locales/en.yaml
+++ b/locales/en.yaml
@@ -39,6 +39,8 @@ menus:
  hsdialog: Dialog Components
  hsmessage: Message Tips Components
  hsvideo: Video Components
+  hssegmented: Segmented Components
+  hswaterfall: Waterfall Components
  hsmap: Map Components
  hsdraggable: Draggable Components
  hssplitPane: Split Pane
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -39,6 +39,8 @@ menus:
  hsdialog: 函数式弹框组件
  hsmessage: 消息提示组件
  hsvideo: 视频组件
+  hssegmented: 分段控制器组件
+  hswaterfall: 瀑布流组件
  hsmap: 地图组件
  hsdraggable: 拖拽组件
  hssplitPane: 切割面板
--- 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.2.0",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -31,14 +31,14 @@
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@howdyjs/mouse-menu": "^2.0.7",
-    "@logicflow/core": "^1.2.5",
-    "@logicflow/extension": "^1.2.5",
+    "@logicflow/core": "^1.2.6",
+    "@logicflow/extension": "^1.2.6",
    "@pureadmin/descriptions": "^1.1.1",
    "@pureadmin/table": "^2.1.0",
    "@pureadmin/utils": "^1.8.9",
    "@vueuse/core": "^10.1.2",
    "@vueuse/motion": "2.0.0-beta.12",
-    "@wangeditor/editor": "^5.1.21",
+    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "animate.css": "^4.1.1",
    "axios": "^1.4.0",
@@ -62,16 +62,17 @@
    "qs": "^6.11.1",
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.0",
-    "swiper": "^9.3.0",
+    "swiper": "^9.3.1",
    "typeit": "^8.7.1",
    "v-contextmenu": "3.0.0",
-    "vue": "^3.2.47",
+    "vue": "^3.3.2",
    "vue-i18n": "^9.2.2",
    "vue-json-pretty": "^2.2.4",
    "vue-pdf-embed": "^1.1.6",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.2.0",
    "vue-types": "^5.0.2",
    "vue-virtual-scroller": "2.0.0-beta.7",
+    "vue-waterfall-plugin-next": "^2.2.1",
    "vue3-danmaku": "1.4.0-beta.1",
    "vuedraggable": "^4.1.0",
    "xgplayer": "^3.0.2",
@@ -94,9 +95,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.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.3",
@@ -105,7 +106,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",
@@ -132,17 +133,16 @@
    "stylelint-scss": "^5.0.0",
    "svgo": "^3.0.2",
    "tailwindcss": "^3.3.2",
-    "terser": "^5.17.1",
+    "terser": "^5.17.3",
    "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",
    "vite-plugin-mock": "^2.9.6",
    "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-eslint-parser": "^9.3.0",
+    "vue-tsc": "^1.6.5"
  },
  "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.2.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
@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { isFunction } from "@pureadmin/utils";
 import {
-  type DialogOptions,
-  type ButtonProps,
-  type EventType,
+  closeDialog,
  dialogStore,
-  closeDialog
+  type EventType,
+  type ButtonProps,
+  type DialogOptions
 } from "./index";
+import { ref, computed } from "vue";
+import { isFunction } from "@pureadmin/utils";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+
+const fullscreen = ref(false);

 const footerButtons = computed(() => {
  return (options: DialogOptions) => {
@@ -19,7 +23,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,18 +38,35 @@ 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>);
  };
 });

+const fullscreenClass = computed(() => {
+  return [
+    "el-icon",
+    "el-dialog__close",
+    "-translate-x-2",
+    "cursor-pointer",
+    "hover:!text-[red]"
+  ];
+});
+
 function eventsCallBack(
  event: EventType,
  options: DialogOptions,
  index: number
 ) {
+  fullscreen.value = options?.fullscreen ?? false;
  if (options?.[event] && isFunction(options?.[event])) {
    return options?.[event]({ options, index });
  }
@@ -57,25 +84,49 @@ function handleClose(

 <template>
  <el-dialog
+    class="pure-dialog"
    v-for="(options, index) in dialogStore"
    :key="index"
    v-bind="options"
    v-model="options.visible"
-    @opened="eventsCallBack('open', options, index)"
+    :fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
    @close="handleClose(options, index)"
+    @opened="eventsCallBack('open', options, index)"
    @openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
    @closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
  >
    <!-- header -->
    <template
-      v-if="options?.headerRenderer"
+      v-if="options?.fullscreenIcon || options?.headerRenderer"
      #header="{ close, titleId, titleClass }"
    >
+      <div
+        v-if="options?.fullscreenIcon"
+        class="flex items-center justify-between"
+      >
+        <span :id="titleId" :class="titleClass">{{ options?.title }}</span>
+        <i
+          v-if="!options?.fullscreen"
+          :class="fullscreenClass"
+          @click="fullscreen = !fullscreen"
+        >
+          <IconifyIconOffline
+            class="pure-dialog-svg"
+            :icon="
+              options?.fullscreen
+                ? ExitFullscreen
+                : fullscreen
+                ? ExitFullscreen
+                : Fullscreen
+            "
+          />
+        </i>
+      </div>
      <component
+        v-else
        :is="options?.headerRenderer({ close, titleId, titleClass })"
      />
    </template>
-    <!-- default -->
    <component
      v-bind="options?.props"
      :is="options.contentRenderer({ options, index })"
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -15,8 +15,10 @@ type DialogProps = {
  title?: string;
  /** `Dialog` 的宽度，默认 `50%` */
  width?: string | number;
-  /** 是否为全屏 `Dialog`，默认 `false` */
+  /** 是否为全屏 `Dialog`（会一直处于全屏状态，除非弹框关闭），默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
  fullscreen?: boolean;
+  /** 是否显示全屏操作图标，默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
+  fullscreenIcon?: boolean;
  /** `Dialog CSS` 中的 `margin-top` 值，默认 `15vh` */
  top?: string;
  /** 是否需要遮罩层，默认 `true` */
@@ -128,7 +130,7 @@ interface DialogOptions extends DialogProps {
    close: Function;
    titleId: string;
    titleClass: string;
-  }) => VNode;
+  }) => VNode | Component;
  /** 自定义内容渲染器 */
  contentRenderer?: ({
    options,
@@ -136,7 +138,7 @@ interface DialogOptions extends DialogProps {
  }: {
    options: DialogOptions;
    index: number;
-  }) => VNode;
+  }) => VNode | Component;
  /** 自定义按钮操作区的内容渲染器，会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
  footerRenderer?: ({
    options,
@@ -144,7 +146,7 @@ interface DialogOptions extends DialogProps {
  }: {
    options: DialogOptions;
    index: number;
-  }) => VNode;
+  }) => VNode | Component;
  /** 自定义底部按钮操作 */
  footerButtons?: Array<ButtonProps>;
  /** `Dialog` 打开后的回调 */
@@ -189,6 +191,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/components/ReSegmented/index.ts
+++ b/src/components/ReSegmented/index.ts
@@ -0,0 +1,8 @@
+import reSegmented from "./src/index";
+import { withInstall } from "@pureadmin/utils";
+
+/** 分段控制器组件 */
+export const ReSegmented = withInstall(reSegmented);
+
+export default ReSegmented;
+export type { OptionsType } from "./src/type";
--- a/src/components/ReSegmented/src/index.css
+++ b/src/components/ReSegmented/src/index.css
@@ -0,0 +1,78 @@
+.pure-segmented {
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 2px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: rgb(0 0 0 / 4%);
+  border-radius: 2px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.pure-segmented-group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+}
+
+.pure-segmented-item-selected {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: none;
+  width: 0;
+  height: 100%;
+  padding: 4px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px -2px rgb(0 0 0 / 5%), 0 1px 4px -1px rgb(0 0 0 / 7%),
+    0 0 1px rgb(0 0 0 / 7%);
+  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
+    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
+  will-change: transform, width;
+}
+
+.pure-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.pure-segmented-item > div {
+  min-height: 28px;
+  line-height: 28px;
+  padding: 0 11px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pure-segmented-item > input {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.pure-segmented-item-label {
+  display: flex;
+  align-items: center;
+}
+
+.pure-segmented-item-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.pure-segmented-item-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@@ -0,0 +1,150 @@
+import "./index.css";
+import {
+  h,
+  ref,
+  watch,
+  nextTick,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+import type { OptionsType } from "./type";
+import { isFunction, useDark } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+const props = {
+  options: {
+    type: Array<OptionsType>,
+    default: () => []
+  },
+  /** 默认选中，按照第一个索引为 `0` 的模式 */
+  defaultValue: {
+    type: Number,
+    default: 0
+  }
+};
+
+export default defineComponent({
+  name: "ReSegmented",
+  props,
+  emits: ["change"],
+  setup(props, { emit }) {
+    const width = ref(0);
+    const translateX = ref(0);
+    const { isDark } = useDark();
+    const initStatus = ref(false);
+    const curMouseActive = ref(-1);
+    const segmentedItembg = ref("");
+    const instance = getCurrentInstance()!;
+    const curIndex = ref(props.defaultValue);
+
+    function handleChange({ option, index }, event: Event) {
+      if (option.disabled) return;
+      event.preventDefault();
+      curIndex.value = index;
+      segmentedItembg.value = "";
+      emit("change", { index, option });
+    }
+
+    function handleMouseenter({ option, index }, event: Event) {
+      event.preventDefault();
+      curMouseActive.value = index;
+      if (option.disabled || curIndex.value === index) {
+        segmentedItembg.value = "";
+      } else {
+        segmentedItembg.value = isDark.value
+          ? "#1f1f1f"
+          : "rgba(0, 0, 0, 0.06)";
+      }
+    }
+
+    function handleMouseleave(_, event: Event) {
+      event.preventDefault();
+      curMouseActive.value = -1;
+    }
+
+    function handleInit(index = curIndex.value) {
+      nextTick(() => {
+        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
+        width.value = curLabelRef.clientWidth;
+        translateX.value = curLabelRef.offsetLeft;
+        initStatus.value = true;
+      });
+    }
+
+    watch(
+      () => curIndex.value,
+      index => {
+        nextTick(() => {
+          handleInit(index);
+        });
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+
+    const rendLabel = () => {
+      return props.options.map((option, index) => {
+        return (
+          <label
+            ref={`labelRef${index}`}
+            class={[
+              "pure-segmented-item",
+              option?.disabled && "pure-segmented-item-disabled"
+            ]}
+            style={{
+              background:
+                curMouseActive.value === index ? segmentedItembg.value : "",
+              color:
+                !option.disabled &&
+                (curIndex.value === index || curMouseActive.value === index)
+                  ? isDark.value
+                    ? "rgba(255, 255, 255, 0.85)"
+                    : "rgba(0,0,0,.88)"
+                  : ""
+            }}
+            onMouseenter={event => handleMouseenter({ option, index }, event)}
+            onMouseleave={event => handleMouseleave({ option, index }, event)}
+            onClick={event => handleChange({ option, index }, event)}
+          >
+            <input type="radio" name="segmented" />
+            <div class="pure-segmented-item-label">
+              {option.icon && !isFunction(option.label) ? (
+                <span
+                  class="pure-segmented-item-icon"
+                  style={{ marginRight: option.label ? "6px" : 0 }}
+                >
+                  {h(useRenderIcon(option.icon))}
+                </span>
+              ) : null}
+              {option.label ? (
+                isFunction(option.label) ? (
+                  h(option.label)
+                ) : (
+                  <span>{option.label}</span>
+                )
+              ) : null}
+            </div>
+          </label>
+        );
+      });
+    };
+
+    return () => (
+      <div class="pure-segmented">
+        <div class="pure-segmented-group">
+          <div
+            class="pure-segmented-item-selected"
+            style={{
+              width: `${width.value}px`,
+              transform: `translateX(${translateX.value}px)`,
+              display: initStatus.value ? "block" : "none"
+            }}
+          ></div>
+          {rendLabel()}
+        </div>
+      </div>
+    );
+  }
+});
--- a/src/components/ReSegmented/src/type.ts
+++ b/src/components/ReSegmented/src/type.ts
@@ -0,0 +1,15 @@
+import type { VNode, Component } from "vue";
+
+export interface OptionsType {
+  /** 文字 */
+  label?: string | (() => VNode | Component);
+  /**
+   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
+   * @see {@link 用法参考 https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
+   */
+  icon?: string | Component;
+  /** 值 */
+  value?: string | number;
+  /** 是否禁用 */
+  disabled?: boolean;
+}
--- 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) {
@@ -524,7 +525,7 @@ onMounted(() => {
          :class="[
            'scroll-item is-closable',
            linkIsActive(item),
-            $route.path === item.path && showModel === 'card'
+            route.path === item.path && showModel === 'card'
              ? 'card-active'
              : ''
          ]"
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -47,13 +47,13 @@ Object.keys(modules).forEach(key => {

 /** 导出处理后的静态路由（三级及以上的路由全部拍成二级） */
 export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
-  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
 );

 /** 用于渲染菜单，保持原始层级 */
-export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
-  ...remainingRouter
-);
+export const constantMenus: Array<RouteComponent> = ascending(
+  routes.flat(Infinity)
+).concat(...remainingRouter);

 /** 不参与菜单的路由 */
 export const remainingPaths = Object.keys(remainingRouter).map(v => {
@@ -87,7 +87,9 @@ export function resetRouter() {
    if (name && router.hasRoute(name) && meta?.backstage) {
      router.removeRoute(name);
      router.options.routes = formatTwoStageRoutes(
-        formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+        formatFlatteningRoutes(
+          buildHierarchyTree(ascending(routes.flat(Infinity)))
+        )
      );
    }
  });
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -31,6 +31,24 @@ export default {
        title: $t("menus.hsmessage")
      }
    },
+    {
+      path: "/components/segmented",
+      name: "Segmented",
+      component: () => import("@/views/components/segmented/index.vue"),
+      meta: {
+        title: $t("menus.hssegmented"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/components/waterfall",
+      name: "Waterfall",
+      component: () => import("@/views/components/waterfall/index.vue"),
+      meta: {
+        title: $t("menus.hswaterfall"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
    {
      path: "/components/video",
      name: "Video",
--- 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/style/dark.scss
+++ b/src/style/dark.scss
@@ -110,6 +110,10 @@ html.dark {
      &:hover {
        color: rgb(255 255 255 / 85%) !important;
        background-color: rgb(255 255 255 / 12%);
+
+        .pure-dialog-svg {
+          color: rgb(255 255 255 / 85%) !important;
+        }
      }
    }
  }
@@ -134,4 +138,18 @@ html.dark {
      }
    }
  }
+
+  /* ReSegmented 组件 */
+  .pure-segmented {
+    color: rgb(255 255 255 / 65%);
+    background-color: #000;
+
+    .pure-segmented-item-selected {
+      background-color: #1f1f1f;
+    }
+
+    .pure-segmented-item-disabled {
+      color: rgb(255 255 255 / 25%);
+    }
+  }
 }
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -69,6 +69,19 @@
  }
 }

+.pure-dialog {
+  .pure-dialog-svg {
+    color: var(--el-color-info);
+  }
+
+  .el-dialog__headerbtn {
+    top: 20px;
+    right: 14px;
+    width: 24px;
+    height: 24px;
+  }
+}
+
 /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
 .el-dialog__headerbtn,
 .el-message-box__headerbtn {
@@ -94,6 +107,10 @@
      color: rgb(0 0 0 / 88%) !important;
      text-decoration: none;
      background-color: rgb(0 0 0 / 6%);
+
+      .pure-dialog-svg {
+        color: rgb(0 0 0 / 88%) !important;
+      }
    }
  }
 }
--- a/src/views/able/timeline.vue
+++ b/src/views/able/timeline.vue
@@ -70,7 +70,7 @@ const activities = [
          placement="bottom"
        >
          <div class="message">
-            vue-pure-admin是基于Vue3.0+TypeScript+Vite2.0+Element-Plus编写的一套后台管理系统
+            vue-pure-admin是基于Vue3.0+TypeScript+Vite+Element-Plus编写的一套后台管理系统
          </div>
        </el-timeline-item>
      </el-timeline>
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -28,19 +28,19 @@ Object.keys(devDependencies).forEach(key => {

 <template>
  <div>
-    <el-card class="box-card mb-4" shadow="never">
+    <el-card class="mb-4 box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-medium">关于</span>
        </div>
      </template>
      <span style="font-size: 15px">
-        Pure-Admin 是一个基于Vue3、Vite2、TypeScript、Element-Plus
+        Pure-Admin 是一个基于Vue3、Vite、TypeScript、Element-Plus
        的中后台解决方案，它可以帮助您快速搭建企业级中后台，提供现成的开箱解决方案及丰富的示例。原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
      </span>
    </el-card>

-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-medium">项目信息</span>
@@ -49,7 +49,7 @@ Object.keys(devDependencies).forEach(key => {
      <PureDescriptions :columns="columns" border :column="3" align="left" />
    </el-card>

-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-medium">生产环境依赖</span>
@@ -73,7 +73,7 @@ Object.keys(devDependencies).forEach(key => {
      </el-descriptions>
    </el-card>

-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-medium">开发环境依赖</span>
--- 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,12 +1,17 @@
 <script setup lang="tsx">
-import { h, createVNode } from "vue";
+import { useRouter } from "vue-router";
+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({
  name: "Dialog"
 });

+const router = useRouter();
+
 function onBaseClick() {
  addDialog({
    title: "基本使用",
@@ -30,6 +35,14 @@ function onFullscreenClick() {
  });
 }

+function onFullscreenIconClick() {
+  addDialog({
+    title: "全屏按钮",
+    fullscreenIcon: true,
+    contentRenderer: () => <p>弹框内容-全屏按钮</p>
+  });
+}
+
 function onModalClick() {
  addDialog({
    title: "无背景遮罩层",
@@ -189,6 +202,7 @@ function onCloseCallBackClick() {
  });
 }

+// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
 function onNestingClick() {
  addDialog({
    title: "嵌套的弹框",
@@ -225,6 +239,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 +388,13 @@ function onNestingClick() {
          >
            Dialog
          </el-link>
-          ，采用函数式调用弹框组件
+          ，采用函数式调用弹框组件（更多操作实例请参考
+          <span
+            class="cursor-pointer text-primary"
+            @click="router.push({ name: 'Dept' })"
+            >系统管理页面</span
+          >
+          ）
        </span>
      </div>
    </template>
@@ -248,6 +402,7 @@ function onNestingClick() {
      <el-button @click="onBaseClick"> 基本使用 </el-button>
      <el-button @click="onDraggableClick"> 可拖拽 </el-button>
      <el-button @click="onFullscreenClick"> 全屏 </el-button>
+      <el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
      <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
      <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
      <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>
@@ -267,5 +422,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/components/segmented/index.vue
+++ b/src/views/components/segmented/index.vue
@@ -0,0 +1,201 @@
+<script setup lang="tsx">
+import { h } from "vue";
+import { message } from "@/utils/message";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Segmented, { type OptionsType } from "@/components/ReSegmented";
+
+defineOptions({
+  name: "Segmented"
+});
+
+/** 基础用法 */
+const optionsBasis: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3
+  },
+  {
+    label: "周四",
+    value: 4
+  },
+  {
+    label: "周五",
+    value: 5
+  }
+];
+
+/** 禁用 */
+const optionsDisabled: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3,
+    disabled: true
+  },
+  {
+    label: "周四",
+    value: 4
+  },
+  {
+    label: "周五",
+    value: 5,
+    disabled: true
+  }
+];
+
+/** 设置图标 */
+const optionsIcon: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1,
+    icon: HomeFilled
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3,
+    icon: "terminalWindowLine"
+  },
+  {
+    label: "周四",
+    value: 4,
+    icon: "streamline-emojis:airplane"
+  },
+  {
+    label: "周五",
+    value: 5,
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 只设置图标 */
+const optionsOnlyIcon: Array<OptionsType> = [
+  {
+    value: 1,
+    icon: HomeFilled
+  },
+  {
+    value: 2,
+    icon: "terminalWindowLine"
+  },
+  {
+    value: 3,
+    icon: "streamline-emojis:cow-face"
+  },
+  {
+    value: 4,
+    icon: "streamline-emojis:airplane"
+  },
+  {
+    value: 5,
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 自定义渲染 */
+const optionsLabel: Array<OptionsType> = [
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon(HomeFilled), {
+          class: "m-auto w-[20px] h-[20px]"
+        })}
+        <p>周一</p>
+      </div>
+    ),
+    value: 1
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("terminalWindowLine"), {
+          class: "m-auto w-[20px] h-[20px]"
+        })}
+        <p>周二</p>
+      </div>
+    ),
+    value: 2
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("streamline-emojis:cow-face"), {
+          class: "m-auto w-[20px] h-[20px]"
+        })}
+        <p>周三</p>
+      </div>
+    ),
+    value: 3
+  }
+];
+
+const optionsChange: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3
+  }
+];
+
+/** change事件 */
+function onChange({ index, option }) {
+  const { label, value } = option;
+  message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
+    type: "success"
+  });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">分段控制器</span>
+      </div>
+    </template>
+    <p class="mb-2">基础用法</p>
+    <Segmented :options="optionsBasis" />
+    <el-divider />
+    <p class="mb-2">默认选中和禁用</p>
+    <Segmented :options="optionsDisabled" :defaultValue="2" />
+    <el-divider />
+    <p class="mb-2">设置图标</p>
+    <Segmented :options="optionsIcon" />
+    <el-divider />
+    <p class="mb-2">只设置图标</p>
+    <Segmented :options="optionsOnlyIcon" />
+    <el-divider />
+    <p class="mb-2">自定义渲染</p>
+    <Segmented :options="optionsLabel" />
+    <el-divider />
+    <p class="mb-2">change事件</p>
+    <Segmented :options="optionsChange" @change="onChange" />
+    <el-divider />
+  </el-card>
+</template>
--- a/src/views/components/waterfall/api.ts
+++ b/src/views/components/waterfall/api.ts
@@ -0,0 +1,38 @@
+export function randomID(length = 6) {
+  return Number(
+    Math.random().toString().substr(3, length) + Date.now()
+  ).toString(36);
+}
+
+const COLORS = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
+
+function getRandomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomColor() {
+  return COLORS[getRandomNum(0, 4)];
+}
+
+const website = "https://www.getphotoblanket.com";
+
+export const getList = ({ page = 1, pageSize = 20 }) => {
+  const url = `${website}/products.json?page=${page}&limit=${pageSize}`;
+  return fetch(url)
+    .then(res => res.json())
+    .then(res => res.products)
+    .then(res => {
+      return res.map((item: any) => {
+        return {
+          id: randomID(),
+          star: false,
+          price: item.variants[0].price,
+          src: {
+            original: item.images[0].src
+          },
+          backgroundColor: randomColor(),
+          name: item.title
+        };
+      });
+    });
+};
--- a/src/views/components/waterfall/error.png
+++ b/src/views/components/waterfall/error.png
--- a/src/views/components/waterfall/index.vue
+++ b/src/views/components/waterfall/index.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { getList } from "./api";
+import error from "./error.png";
+import loading from "./loading.png";
+import { onMounted, reactive, ref } from "vue";
+import "vue-waterfall-plugin-next/dist/style.css";
+import backTop from "@/assets/svg/back_top.svg?component";
+import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
+
+const options = reactive({
+  // 唯一key值
+  rowKey: "id",
+  // 卡片之间的间隙
+  gutter: 10,
+  // 是否有周围的gutter
+  hasAroundGutter: true,
+  // 卡片在PC上的宽度
+  width: 320,
+  // 自定义行显示个数，主要用于对移动端的适配
+  breakpoints: {
+    1200: {
+      // 当屏幕宽度小于等于1200
+      rowPerView: 4
+    },
+    800: {
+      // 当屏幕宽度小于等于800
+      rowPerView: 3
+    },
+    500: {
+      // 当屏幕宽度小于等于500
+      rowPerView: 2
+    }
+  },
+  // 动画效果
+  animationEffect: "animate__fadeInUp",
+  // 动画时间
+  animationDuration: 1000,
+  // 动画延迟
+  animationDelay: 300,
+  // 背景色
+  // backgroundColor: "#2C2E3A",
+  // 图片字段选择器，如果层级较深，使用 xxx.xxx.xxx 方式
+  imgSelector: "src.original",
+  // 加载配置
+  loadProps: {
+    loading,
+    error
+  },
+  // 是否懒加载
+  lazyload: true
+});
+
+const page = ref(1);
+const list = ref([]);
+const pageSize = ref();
+
+/** 加载更多 */
+function handleLoadMore() {
+  getList({
+    page: page.value,
+    pageSize: pageSize.value
+  }).then(res => {
+    list.value.push(...res);
+    page.value += 1;
+  });
+}
+
+function handleDelete(item, index) {
+  list.value.splice(index, 1);
+}
+
+function handleClick(item) {
+  console.log(item);
+}
+
+onMounted(() => {
+  handleLoadMore();
+});
+</script>
+
+<template>
+  <el-card shadow="never" class="!h-[85vh]">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          瀑布流组件，采用开源的
+          <el-link
+            href="https://github.com/heikaimu/vue3-waterfall-plugin"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vue-waterfall-plugin-next
+          </el-link>
+        </span>
+      </div>
+    </template>
+    <el-scrollbar height="78vh" class="content">
+      <Waterfall :list="list" v-bind="options">
+        <template #item="{ item, url, index }">
+          <div
+            class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
+            @click="handleClick(item)"
+          >
+            <div class="overflow-hidden">
+              <LazyImg
+                :url="url"
+                class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+              />
+            </div>
+            <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
+              <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
+                {{ item.name }}
+              </h4>
+              <div
+                class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
+              >
+                <div class="text-gray-50">$ {{ item.price }}</div>
+                <div>
+                  <button
+                    class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
+                    @click.stop="handleDelete(item, index)"
+                  >
+                    删除
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </Waterfall>
+
+      <div class="flex justify-center py-10">
+        <button
+          class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
+          @click="handleLoadMore"
+        >
+          加载更多
+        </button>
+      </div>
+
+      <el-backtop
+        title="回到顶部"
+        :right="35"
+        :visibility-height="400"
+        target=".content .el-scrollbar__wrap"
+      >
+        <backTop />
+      </el-backtop>
+    </el-scrollbar>
+  </el-card>
+</template>
--- a/src/views/components/waterfall/loading.png
+++ b/src/views/components/waterfall/loading.png
--- a/src/views/empty/index.vue
+++ b/src/views/empty/index.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import back from "@/assets/svg/back.svg?component";

 defineOptions({
  name: "Empty"
 });
+
+const router = useRouter();
 </script>

 <template>
  <div class="w-full h-full text-center">
    <h1>业务内容模块</h1>
    <p>使用场景：需要外嵌平台某个页面，不需要展示菜单导航以及额外模块</p>
-    <div class="back" title="返回上一页" @click="$router.go(-1)">
+    <div class="back" title="返回上一页" @click="router.go(-1)">
      <back class="w-[80px] h-[80px]" />
    </div>
  </div>
--- a/src/views/error/403.vue
+++ b/src/views/error/403.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import noAccess from "@/assets/status/403.svg?component";

 defineOptions({
  name: "403"
 });
+
+const router = useRouter();
 </script>

 <template>
@@ -46,7 +49,7 @@ defineOptions({
      </p>
      <el-button
        type="primary"
-        @click="$router.push('/')"
+        @click="router.push('/')"
        v-motion
        :initial="{
          opacity: 0,
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import noExist from "@/assets/status/404.svg?component";

 defineOptions({
  name: "404"
 });
+
+const router = useRouter();
 </script>

 <template>
@@ -46,7 +49,7 @@ defineOptions({
      </p>
      <el-button
        type="primary"
-        @click="$router.push('/')"
+        @click="router.push('/')"
        v-motion
        :initial="{
          opacity: 0,
--- a/src/views/error/500.vue
+++ b/src/views/error/500.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import noServer from "@/assets/status/500.svg?component";

 defineOptions({
  name: "500"
 });
+
+const router = useRouter();
 </script>

 <template>
@@ -46,7 +49,7 @@ defineOptions({
      </p>
      <el-button
        type="primary"
-        @click="$router.push('/')"
+        @click="router.push('/')"
        v-motion
        :initial="{
          opacity: 0,
--- 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,87 @@ 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,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了部门名称为${curData.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 +164,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/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -101,14 +101,14 @@ function onCloseTags() {
    <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>

    <el-divider />
-    <el-button @click="$router.push({ name: 'Menu1-2-2' })">
+    <el-button @click="router.push({ name: 'Menu1-2-2' })">
      跳转页内菜单（传name对象，优先推荐）
    </el-button>
-    <el-button @click="$router.push('/nested/menu1/menu1-2/menu1-2-2')">
+    <el-button @click="router.push('/nested/menu1/menu1-2/menu1-2-2')">
      跳转页内菜单（直接传要跳转的路径）
    </el-button>
    <el-button
-      @click="$router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
+      @click="router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
    >
      跳转页内菜单（传path对象）
    </el-button>
@@ -116,7 +116,7 @@ function onCloseTags() {
    <el-divider />
    <el-button
      @click="
-        $router.push({
+        router.push({
          name: 'Menu1-2-2',
          query: { text: '传name对象，优先推荐' }
        })
@@ -126,7 +126,7 @@ function onCloseTags() {
    </el-button>
    <el-button
      @click="
-        $router.push({
+        router.push({
          path: '/nested/menu1/menu1-2/menu1-2-2',
          query: { text: '传path对象' }
        })
@@ -143,7 +143,7 @@ function onCloseTags() {
    </el-link>

    <el-divider />
-    <el-button @click="$router.push({ name: 'Empty' })">
+    <el-button @click="router.push({ name: 'Empty' })">
      跳转无Layout的空白页面
    </el-button>
  </el-card>
--- 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" {
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -41,6 +41,10 @@ type DeepPartial<T> = {
  [P in keyof T]?: DeepPartial<T[P]>;
 };

+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+
+type Exclusive<T, U> = (Without<T, U> & U) | (Without<U, T> & T);
+
 type TimeoutHandle = ReturnType<typeof setTimeout>;

 type IntervalHandle = ReturnType<typeof setInterval>;
Author	SHA1	Message	Date
xiaoxian521	ee4fb9129e	release: update `4.2.0`	2023-05-15 15:03:57 +08:00
xiaoxian521	ecebb98ab6	feat: 新增分段控制器组件并适配暗黑模式	2023-05-15 14:41:35 +08:00
xiaoxian521	4e3d752fb6	feat: 新增`组件-瀑布流demo`	2023-05-14 16:38:29 +08:00
xiaoxian521	799a5140e3	feat: 静态路由支持配置数组格式	2023-05-14 14:20:06 +08:00
xiaoxian521	c19cb6004b	chore(deps): update	2023-05-14 10:37:45 +08:00
许诺	0b8412c109	feat: 函数式弹框组件添加全屏、退出全屏操作按钮 (#546 ) feat: 函数式弹框组件添加全屏、退出全屏操作按钮	2023-05-14 00:13:10 +08:00
xiaoxian521	5f3210f69e	types: 添加 `Exclusive` 类型互斥语法糖	2023-05-13 19:39:16 +08:00
xiaoxian521	1aba27590f	perf: 规范`template`模版中路由写法，不再使用`$route`和`$router`，此写法`vue-tsc`编译不通过	2023-05-12 13:01:59 +08:00
xiaoxian521	a1b8b27a1c	chore: update	2023-05-12 12:59:42 +08:00
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>`