release: update 3.8.7

CHANGELOG.en_US.md

@@ -1,3 +1,25 @@
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- Add `message` message prompt function, compatible with `Element Plus` and `Ant ​​Design` two `Message` style styles, use and package size are extremely low cost and adapt to dark mode, really fragrant 😂
+
+### 🍏 Perf
+
+- perf: No need to install `@vue/runtime-core`, compatible with `volar` hints of all `element-plus` components
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- Great optimization, remove `@pureadmin/components` and use compatible writing, the package size of the platform is reduced by `0.4` MB before compression is not enabled, and the resource of `2.3` MB is reduced for the first screen request, which is for the [lite version ](https://github.com/xiaoxian521/pure-admin-thin) is a very big optimization, the streamlined version has synchronized code
+
 # 3.8.0 (2022-11-26)
 
 ### 🎫 Feat

CHANGELOG.md

@@ -1,3 +1,25 @@
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- Add `message` message prompt function, compatible with `Element Plus` and `Ant ​​Design` two `Message` style styles, use and package size are extremely low cost and adapt to dark mode, really fragrant 😂
+
+### 🍏 Perf
+
+- perf: No need to install `@vue/runtime-core`, compatible with `volar` hints of all `element-plus` components
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- Great optimization, remove `@pureadmin/components` and use compatible writing, the package size of the platform is reduced by `0.4` MB before compression is not enabled, and the resource of `2.3` MB is reduced for the first screen request, which is for the [lite version ](https://github.com/xiaoxian521/pure-admin-thin) is a very big optimization, the streamlined version has synchronized code
+
 # 3.8.0 (2022-11-26)
 
 ### 🎫 Feat

CHANGELOG.zh_CN.md

@@ -1,3 +1,25 @@
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: 打包大优化，请务必升级！使用 `unplugin-vue-define-options` 替换 `unplugin-vue-macros` ，打包速度提升数倍，使用 `unplugin-vue-macros` 以性能中等偏上的 `mac` 为例完整版打包时长为 `6` 分钟 😭，使用 `unplugin-vue-define-options` 替换后，相同电脑下打包时长为 `50` 秒 ☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- 添加 `message` 消息提示函数，兼容 `Element Plus` 和 `Ant Design` 两种 `Message` 样式风格，使用和打包大小成本极低并适配暗黑模式，真香 😂
+
+### 🍏 Perf
+
+- perf: 无需安装 `@vue/runtime-core` ，兼容所有 `element-plus` 组件的 `volar` 提示
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- 大优化，移除 `@pureadmin/components` 并采用兼容写法，平台打包大小在未启用压缩前对比优化前减少 `0.4` MB , 首屏请求减少 `2.3` MB 的资源，这对于 [精简版](https://github.com/xiaoxian521/pure-admin-thin) 来说是非常大的优化，精简版已经同步代码
+
 # 3.8.0 (2022-11-26)
 
 ### 🎫 Feat

README.en-US.md

@@ -10,6 +10,13 @@
 
 `vue-pure-admin` is an open source free and out-of-the-box middle and background management system template. Developed using the latest mainstream technologies such as `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss`
 
+## Thin version (offering non-internationalized and internationalized versions)
+
+The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
+
+- [Click me to view the non-internationalized version](https://github.com/xiaoxian521/pure-admin-thin)
+- [Click me to view Internationalization version](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
+
 ## Supporting Video
 
 - [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
@@ -20,11 +27,6 @@
 - [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
 - [Click me to view foreign document site](https://xiaoxian521.github.io/pure-admin-doc)
 
-## Thin version (offering non-internationalized and internationalized versions)
-
-- [Click me to view the non-internationalized version](https://github.com/xiaoxian521/pure-admin-thin)
-- [Click me to view Internationalization version](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
-
 ## Tauri
 
 - [Click Watch Tauri](https://github.com/xiaoxian521/tauri-pure-admin)

README.md

@@ -10,6 +10,13 @@
 
 `vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
 
+## 精简版（实际项目开发请用精简版，提供 `非国际化` 、`国际化` 两个版本选择）
+
+精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
+
+- [点我查看非国际化精简版](https://github.com/xiaoxian521/pure-admin-thin)
+- [点我查看国际化精简版](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
+
 ## 配套视频
 
 - [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
@@ -20,11 +27,6 @@
 - [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
 - [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)
 
-## 精简版（实际项目开发请用精简版，提供 `非国际化` 、`国际化` 两个版本选择）
-
-- [点我查看非国际化精简版](https://github.com/xiaoxian521/pure-admin-thin)
-- [点我查看国际化精简版](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
-
 ## `Tauri` 版
 
 - [点我查看 Tauri 版](https://github.com/xiaoxian521/tauri-pure-admin)

build/optimize.ts

@@ -5,13 +5,20 @@
  * 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
  */
 export const include = [
+  "qs",
+  "mitt",
   "xlsx",
   "dayjs",
+  "axios",
   "pinia",
   "swiper",
   "lodash",
+  "echarts",
   "intro.js",
   "vue-i18n",
+  "xe-utils",
+  "vxe-table",
+  "js-cookie",
   "lodash-es",
   "cropperjs",
   "jsbarcode",
@@ -22,13 +29,16 @@ export const include = [
   "v-contextmenu",
   "vue-pdf-embed",
   "lodash-unified",
+  "@ctrl/tinycolor",
   "china-area-data",
   "@faker-js/faker",
   "vue-json-pretty",
   "@logicflow/core",
   "@pureadmin/utils",
+  "responsive-storage",
   "@howdyjs/mouse-menu",
   "@logicflow/extension",
+  "element-resize-detector",
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "@wangeditor/editor-for-vue",

build/plugins.ts

@@ -4,13 +4,13 @@ import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import VueMacros from "unplugin-vue-macros/vite";
 import { viteMockServe } from "vite-plugin-mock";
 import { configCompressPlugin } from "./compress";
 import VueI18n from "@intlify/vite-plugin-vue-i18n";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
+import DefineOptions from "unplugin-vue-define-options/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";
 
 export function getPluginsList(
@@ -32,7 +32,7 @@ export function getPluginsList(
     vueJsx(),
     VITE_CDN ? cdn : null,
     configCompressPlugin(VITE_COMPRESSION),
-    VueMacros(),
+    DefineOptions(),
     // 线上环境删除console
     removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
     viteBuildInfo(),

locales/en.yaml

@@ -37,6 +37,7 @@ menus:
   hsfourZeroOne: "403"
   hsFive: "500"
   hscomponents: Components
+  hsmessage: Message Tips Components
   hsvideo: Video Components
   hsmap: Map Components
   hsdraggable: Draggable Components
@@ -84,9 +85,6 @@ menus:
   hsIconSelect: Icon Select
   hsTimeline: Time Line
   hsLineTree: LineTree
-  hsAntTabs: Imitate Antdv Tabs
-  hsAntAnchor: Imitate Antdv Anchor
-  hsAntTreeSelect: Imitate Antdv TreeSelector
   hsList: List Page
   hsListCard: Card List Page
   hsDebounce: Debounce & Throttle

locales/zh-CN.yaml

@@ -37,6 +37,7 @@ menus:
   hsfourZeroOne: "403"
   hsFive: "500"
   hscomponents: 组件
+  hsmessage: 消息提示组件
   hsvideo: 视频组件
   hsmap: 地图组件
   hsdraggable: 拖拽组件
@@ -84,9 +85,6 @@ menus:
   hsIconSelect: 图标选择器
   hsTimeline: 时间线
   hsLineTree: 树形连接线
-  hsAntTabs: 仿antdv标签页
-  hsAntAnchor: 仿antdv锚点
-  hsAntTreeSelect: 仿antdv树型选择器
   hsList: 列表页
   hsListCard: 卡片列表页
   hsDebounce: 防抖节流
@@ -100,8 +98,8 @@ menus:
   hsExecl: 导出Excel
   hsInfiniteScroll: 表格无限滚动
   hsdanmaku: 弹幕组件
-  hsPureTableBase: 基础用法
+  hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法
+  hsPureTableHigh: 高级用法（8个示例）
   hsTree: 大数据树业务组件
 status:
   hsLoad: 加载中...

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pure-admin",
-  "version": "3.8.0",
+  "version": "3.8.7",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -34,11 +34,10 @@
     "@howdyjs/mouse-menu": "^2.0.5",
     "@logicflow/core": "^1.1.30",
     "@logicflow/extension": "^1.1.30",
-    "@pureadmin/components": "^1.1.0",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.8.0",
     "@pureadmin/utils": "^1.6.7",
-    "@vueuse/core": "^9.5.0",
+    "@vueuse/core": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",
     "@wangeditor/editor-for-vue": "^5.1.12",
@@ -115,7 +114,6 @@
     "@vitejs/plugin-vue-jsx": "^2.1.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/runtime-core": "^3.2.45",
     "autoprefixer": "^10.4.13",
     "cloc": "^2.10.0",
     "cssnano": "^5.1.14",
@@ -146,7 +144,7 @@
     "tailwindcss": "^3.2.4",
     "terser": "^5.15.1",
     "typescript": "^4.9.3",
-    "unplugin-vue-macros": "^0.16.3",
+    "unplugin-vue-define-options": "^1.0.0",
     "vite": "3.1.8",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",

public/serverConfig.json

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

src/layout/components/notice/index.vue

@@ -2,25 +2,16 @@
 import { ref } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./noticeList.vue";
-import { Tabs, TabPane } from "@pureadmin/components";
-
-const dropdownDom = ref();
-const activeKey = ref(noticesData[0].key);
-
-const notices = ref(noticesData);
 
 const noticesNum = ref(0);
-notices.value.forEach(notice => {
+const notices = ref(noticesData);
-  noticesNum.value += notice.list.length;
+const activeKey = ref(noticesData[0].key);
-});
 
-function tabClick() {
+notices.value.map(v => (noticesNum.value += v.list.length));
-  (dropdownDom as any).value.handleOpen();
-}
 </script>
 
 <template>
-  <el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
+  <el-dropdown trigger="click" placement="bottom-end">
     <span class="dropdown-badge navbar-bg-hover select-none">
       <el-badge :value="noticesNum" :max="99">
         <span class="header-notice-icon">
@@ -30,34 +21,25 @@ function tabClick() {
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <Tabs
+        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
-          centered
-          class="dropdown-tabs"
-          :tabBarStyle="{ marginLeft: notices?.length > 4 ? '8px' : '0' }"
-          v-model:activeKey="activeKey"
-          @tabClick="tabClick"
-        >
           <template v-for="item in notices" :key="item.key">
-            <TabPane :tab="`${item.name}(${item.list.length})`">
+            <el-tab-pane
+              :label="`${item.name}(${item.list.length})`"
+              :name="`${item.key}`"
+            >
               <el-scrollbar max-height="330px">
                 <div class="noticeList-container">
                   <NoticeList :list="item.list" />
                 </div>
               </el-scrollbar>
-            </TabPane>
+            </el-tab-pane>
           </template>
-        </Tabs>
+        </el-tabs>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
 </template>
 
-<style>
-.ant-tabs-dropdown {
-  z-index: 2900 !important;
-}
-</style>
-
 <style lang="scss" scoped>
 .dropdown-badge {
   display: flex;
@@ -73,30 +55,28 @@ function tabClick() {
 }
 
 .dropdown-tabs {
-  width: 336px;
+  width: 330px;
-  background-color: #fff;
+
-  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+  .noticeList-container {
-  border-radius: 4px;
+    padding: 15px 24px 0 24px;
+  }
 
   :deep(.el-tabs__header) {
     margin: 0;
   }
 
-  :deep(.el-tabs__nav-scroll) {
-    display: flex;
-    justify-content: center;
-  }
-
   :deep(.el-tabs__nav-wrap)::after {
     height: 1px;
   }
 
-  :deep(.noticeList-container) {
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
-    padding: 15px 24px 0 24px;
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 36px 0 36px;
+  }
+
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__active-bar) {
+    margin: 0 36px 0 36px;
   }
 }
-
-:deep(.ant-tabs-nav) {
-  margin-bottom: 0;
-}
 </style>

src/main.ts

@@ -20,9 +20,6 @@ import "./style/reset.scss";
 // 导入公共样式
 import "./style/index.scss";
 import "element-plus/dist/index.css";
-import "@pureadmin/components/dist/index.css";
-import "@pureadmin/components/dist/theme.css";
-import "@pureadmin/components/dist/dark.scss";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";

src/router/enums.ts

@@ -5,8 +5,8 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
   utils = 2,
   table = 3,
   tree = 4,
-  able = 5,
+  components = 5,
-  components = 6,
+  able = 6,
   frame = 7,
   nested = 8,
   result = 9,
@@ -28,8 +28,8 @@ export {
   utils,
   table,
   tree,
-  able,
   components,
+  able,
   frame,
   nested,
   result,

src/router/modules/able.ts

@@ -66,30 +66,6 @@ export default {
         title: $t("menus.hsLineTree")
       }
     },
-    {
-      path: "/able/antTabs",
-      name: "AntTabs",
-      component: () => import("@/views/able/ant-tabs.vue"),
-      meta: {
-        title: $t("menus.hsAntTabs")
-      }
-    },
-    {
-      path: "/able/antAnchor",
-      name: "AntAnchor",
-      component: () => import("@/views/able/ant-anchor.vue"),
-      meta: {
-        title: $t("menus.hsAntAnchor")
-      }
-    },
-    {
-      path: "/able/antTreeSelect",
-      name: "AntTreeSelect",
-      component: () => import("@/views/able/ant-treeSelect.vue"),
-      meta: {
-        title: $t("menus.hsAntTreeSelect")
-      }
-    },
     {
       path: "/able/debounce",
       name: "Debounce",

src/router/modules/components.ts

@@ -10,6 +10,22 @@ export default {
     rank: components
   },
   children: [
+    {
+      path: "/components/message",
+      name: "Message",
+      component: () => import("@/views/components/message/index.vue"),
+      meta: {
+        title: $t("menus.hsmessage"),
+        extraIcon: {
+          svg: true,
+          name: "team-iconxinpinrenqiwang"
+        },
+        transition: {
+          enterTransition: "animate__fadeInLeft",
+          leaveTransition: "animate__fadeOutRight"
+        }
+      }
+    },
     {
       path: "/components/video",
       name: "Video",
@@ -47,11 +63,7 @@ export default {
       name: "SplitPane",
       component: () => import("@/views/components/split-pane/index.vue"),
       meta: {
-        title: $t("menus.hssplitPane"),
+        title: $t("menus.hssplitPane")
-        extraIcon: {
-          svg: true,
-          name: "team-iconxinpinrenqiwang"
-        }
       }
     },
     {

src/style/dark.scss

@@ -28,11 +28,6 @@ html.dark {
     filter: invert(0.9) hue-rotate(180deg);
   }
 
-  .ant-tabs {
-    background: var(--el-bg-color);
-    color: $color-white;
-  }
-
   /* 标签页 */
   .tags-view {
     .arrow-left,
@@ -191,4 +186,25 @@ html.dark {
   .el-dropdown-menu__item:not(.is-disabled):hover {
     background: transparent;
   }
+
+  /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
+  .pure-message {
+    background-image: initial !important;
+    background-color: rgb(36, 37, 37) !important;
+    box-shadow: rgb(13 13 13 / 12%) 0px 3px 6px -4px,
+      rgb(13 13 13 / 8%) 0px 6px 16px 0px, rgb(13 13 13 / 5%) 0px 9px 28px 8px !important;
+
+    & .el-message__content {
+      color: $color-white !important;
+      pointer-events: all !important;
+      background-image: initial !important;
+    }
+
+    & .el-message__closeBtn {
+      &:hover {
+        color: rgba(255, 255, 255, 0.85);
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+  }
 }

src/style/element-plus.scss

@@ -62,3 +62,37 @@
     border-left-color: var(--el-color-primary);
   }
 }
+
+/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
+.pure-message {
+  border-width: 0 !important;
+  background: #fff !important;
+  padding: 10px 13px !important;
+  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
+    0 9px 28px 8px #0000000d !important;
+
+  &.el-message.is-closable .el-message__content {
+    padding-right: 17px !important;
+  }
+
+  & .el-message__content {
+    color: #000000d9 !important;
+    pointer-events: all !important;
+    background-image: initial !important;
+  }
+
+  & .el-message__icon {
+    margin-right: 8px !important;
+  }
+
+  & .el-message__closeBtn {
+    outline: none;
+    border-radius: 4px;
+    right: 9px !important;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+  }
+}

src/utils/message.ts

@@ -0,0 +1,85 @@
+import { type VNode } from "vue";
+import { isFunction } from "@pureadmin/utils";
+import { type MessageHandler, ElMessage } from "element-plus";
+
+type messageStyle = "el" | "antd";
+type messageTypes = "info" | "success" | "warning" | "error";
+
+interface MessageParams {
+  /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
+  type?: messageTypes;
+  /** 自定义图标，该属性会覆盖 `type` 的图标 */
+  icon?: any;
+  /** 是否将 `message` 属性作为 `HTML` 片段处理，默认 `false` */
+  dangerouslyUseHTMLString?: boolean;
+  /** 消息风格，可选 `el` 、`antd` ，默认 `antd` */
+  customClass?: messageStyle;
+  /** 显示时间，单位为毫秒。设为 `0` 则不会自动关闭，`element-plus` 默认是 `3000` ，平台改成默认 `2000` */
+  duration?: number;
+  /** 是否显示关闭按钮，默认值 `false` */
+  showClose?: boolean;
+  /** 文字是否居中，默认值 `false` */
+  center?: boolean;
+  /** `Message` 距离窗口顶部的偏移量，默认 `20` */
+  offset?: number;
+  /** 设置组件的根元素，默认 `document.body` */
+  appendTo?: string | HTMLElement;
+  /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
+  grouping?: boolean;
+  /** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
+  onClose?: Function | null;
+}
+
+/** 用法非常简单，参考 src/views/components/message/index.vue 文件 */
+
+/**
+ * `Message` 消息提示函数
+ */
+const message = (
+  message: string | VNode | (() => VNode),
+  params?: MessageParams
+): MessageHandler => {
+  if (!params) {
+    return ElMessage({
+      message,
+      customClass: "pure-message"
+    });
+  } else {
+    const {
+      icon,
+      type = "info",
+      dangerouslyUseHTMLString = false,
+      customClass = "antd",
+      duration = 2000,
+      showClose = false,
+      center = false,
+      offset = 20,
+      appendTo = document.body,
+      grouping = false,
+      onClose
+    } = params;
+
+    return ElMessage({
+      message,
+      type,
+      icon,
+      dangerouslyUseHTMLString,
+      duration,
+      showClose,
+      center,
+      offset,
+      appendTo,
+      grouping,
+      // 全局搜 pure-message 即可知道该类的样式位置
+      customClass: customClass === "antd" ? "pure-message" : "",
+      onClose: () => (isFunction(onClose) ? onClose() : null)
+    });
+  }
+};
+
+/**
+ * 关闭所有 `Message` 消息提示函数
+ */
+const closeAllMessage = (): void => ElMessage.closeAll();
+
+export { message, closeAllMessage };

src/views/able/ant-anchor.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { Anchor, AnchorLink } from "@pureadmin/components";
-
-defineOptions({
-  name: "AntAnchor"
-});
-
-function handleAnchorClick(e, link) {
-  e.preventDefault();
-  const srcolls = document.getElementById(link.href);
-  srcolls.scrollIntoView({ block: "start", behavior: "smooth" });
-}
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          仿antdv锚点，采用
-          <el-link
-            href="https://www.npmjs.com/package/@pureadmin/components"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            @pureadmin/components
-          </el-link>
-          ，完全兼容antdv的
-          <el-link
-            href="https://next.antdv.com/components/anchor-cn"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            Anchor
-          </el-link>
-          写法
-        </span>
-      </div>
-    </template>
-    <div class="w-[400px]">
-      <Anchor class="float-left mt-[200px]" @click="handleAnchorClick">
-        <AnchorLink href="one" title="测试one" />
-        <AnchorLink href="two" title="测试two" />
-        <AnchorLink href="three" title="测试three" />
-      </Anchor>
-
-      <el-scrollbar class="float-right overflow-auto" height="600px">
-        <header
-          id="one"
-          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
-          style="background: #409eff"
-        >
-          测试one
-        </header>
-        <header
-          id="two"
-          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
-          style="background: #67c23a"
-        >
-          测试two
-        </header>
-        <header
-          id="three"
-          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
-          style="background: #f56c6c"
-        >
-          测试three
-        </header>
-      </el-scrollbar>
-    </div>
-  </el-card>
-</template>

src/views/able/ant-tabs.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { Tabs, TabPane } from "@pureadmin/components";
-
-defineOptions({
-  name: "AntTabs"
-});
-
-const mode = ref("top");
-const activeKey = ref(1);
-const callback = (val: string) => {
-  console.log(val);
-};
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          仿antdv标签页，采用
-          <el-link
-            href="https://www.npmjs.com/package/@pureadmin/components"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            @pureadmin/components
-          </el-link>
-          ，完全兼容antdv的
-          <el-link
-            href="https://next.antdv.com/components/tabs-cn"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            Tabs
-          </el-link>
-          写法
-        </span>
-      </div>
-    </template>
-    <el-radio-group v-model="mode" size="small" class="mb-2">
-      <el-radio label="top" border>Horizontal</el-radio>
-      <el-radio label="left" border>Vertical</el-radio>
-    </el-radio-group>
-    <Tabs
-      v-model:activeKey="activeKey"
-      :tab-position="mode"
-      :style="{ height: '200px' }"
-      @tabScroll="callback"
-    >
-      <TabPane v-for="i in 30" :key="i" :tab="`Tab-${i}`">
-        Content of tab {{ i }}
-      </TabPane>
-    </Tabs>
-  </el-card>
-</template>

src/views/able/ant-treeSelect.vue

@@ -1,217 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { TreeSelect } from "@pureadmin/components";
-
-defineOptions({
-  name: "AntTreeSelect"
-});
-
-const value1 = ref<string>("");
-const treeData1 = ref([
-  {
-    title: "parent 1",
-    value: "parent 1",
-    children: [
-      {
-        title: "parent 1-0",
-        value: "parent 1-0",
-        children: [
-          {
-            title: "my leaf",
-            value: "leaf1"
-          },
-          {
-            title: "your leaf",
-            value: "leaf2"
-          }
-        ]
-      },
-      {
-        title: "parent 1-1",
-        value: "parent 1-1"
-      }
-    ]
-  }
-]);
-
-const SHOW_PARENT = TreeSelect.SHOW_PARENT;
-
-function dig(path = "0", level = 3) {
-  const list = [];
-  for (let i = 0; i < 10; i += 1) {
-    const value = `${path}-${i}`;
-    const treeNode = {
-      title: value,
-      value
-    };
-
-    if (level > 0) {
-      (treeNode as any).children = dig(value, level - 1);
-    }
-
-    list.push(treeNode);
-  }
-  return list;
-}
-
-const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
-
-const value2 = ref<string[]>(["0-0-0"]);
-const treeData2 = [
-  {
-    title: "Node1",
-    value: "0-0",
-    children: [
-      {
-        title: "Child Node1",
-        value: "0-0-0"
-      }
-    ]
-  },
-  {
-    title: "Node2",
-    value: "0-1",
-
-    children: [
-      {
-        title: "Child Node3",
-        value: "0-1-0",
-        disabled: true
-      },
-      {
-        title: "Child Node4",
-        value: "0-1-1"
-      },
-      {
-        title: "Child Node5",
-        value: "0-1-2"
-      }
-    ]
-  }
-];
-
-const value3 = ref<string>();
-const treeData3 = ref([
-  { id: 1, pId: 0, value: "1", title: "Expand to load" },
-  { id: 2, pId: 0, value: "2", title: "Expand to load" },
-  { id: 3, pId: 0, value: "3", title: "Tree Node", isLeaf: true }
-]);
-const genTreeNode = (parentId: number, isLeaf = false) => {
-  const random = Math.random().toString(36).substring(2, 6);
-  return {
-    id: random,
-    pId: parentId,
-    value: random,
-    title: isLeaf ? "Tree Node" : "Expand to load",
-    isLeaf
-  };
-};
-const onLoadData = treeNode => {
-  return new Promise(resolve => {
-    const { id } = treeNode.dataRef;
-    setTimeout(() => {
-      treeData3.value = (treeData3 as any).value.concat([
-        genTreeNode(id, false),
-        genTreeNode(id, true)
-      ]);
-      resolve(true);
-    }, 300);
-  });
-};
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          仿antdv树选择，采用
-          <el-link
-            href="https://www.npmjs.com/package/@pureadmin/components"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            @pureadmin/components
-          </el-link>
-          ，完全兼容antdv的
-          <el-link
-            href="https://next.antdv.com/components/tree-select-cn"
-            target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
-          >
-            TreeSelect
-          </el-link>
-          写法
-        </span>
-      </div>
-    </template>
-    <div class="flex justify-around flex-wrap">
-      <div>
-        <span>线性样式：</span>
-        <TreeSelect
-          class="w-[200px]"
-          v-model:value="value1"
-          show-search
-          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-          placeholder="Please select"
-          allow-clear
-          :tree-line="true"
-          tree-default-expand-all
-          :tree-data="treeData1"
-        >
-          <template #title="{ value: val, title }">
-            <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
-            <template v-else>{{ title }}</template>
-          </template>
-        </TreeSelect>
-      </div>
-
-      <div>
-        <span>虚拟滚动：</span>
-        <TreeSelect
-          class="w-[200px] mt-6"
-          v-model:value="checkedKeys"
-          tree-checkable
-          tree-default-expand-all
-          :show-checked-strategy="SHOW_PARENT"
-          :height="233"
-          :tree-data="dig()"
-          :max-tag-count="10"
-        >
-          <template #title="{ title, value }">
-            <span v-if="value === '0-0-1-0'" style="color: #1890ff">
-              {{ title }}
-            </span>
-            <template v-else>{{ title }}</template>
-          </template>
-        </TreeSelect>
-      </div>
-
-      <div>
-        <span>可勾选：</span>
-        <TreeSelect
-          class="w-[200px]"
-          v-model:value="value2"
-          :tree-data="treeData2"
-          tree-checkable
-          allow-clear
-          :show-checked-strategy="SHOW_PARENT"
-          placeholder="Please select"
-        />
-      </div>
-
-      <div>
-        <span>异步加载：</span>
-        <TreeSelect
-          class="w-[200px]"
-          v-model:value="value3"
-          tree-data-simple-mode
-          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-          :tree-data="treeData3"
-          placeholder="Please select"
-          :load-data="onLoadData"
-        />
-      </div>
-    </div>
-  </el-card>
-</template>

src/views/able/debounce.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import { ElMessage } from "element-plus";
+import { message } from "@/utils/message";
 import { debounce, throttle } from "@pureadmin/utils";
 
 defineOptions({
   name: "Debounce"
 });
 
-const handle = () => {
+const handle = () => message("恭喜你，这是一条成功消息", { type: "success" });
-  ElMessage({
-    message: "恭喜你，这是一条成功消息",
-    type: "success"
-  });
-};
 
 const immediateDebounce = debounce(handle, 1000, true);
 

src/views/able/qrcode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, unref } from "vue";
-import { ElMessage } from "element-plus";
+import { message } from "@/utils/message";
 import ReQrcode from "@/components/ReQrcode";
 
 defineOptions({
@@ -14,10 +14,10 @@ setTimeout(() => {
   asyncTitle.value = unref(qrcodeText);
 }, 3000);
 const codeClick = () => {
-  ElMessage.info("点击事件");
+  message("点击事件", { type: "info" });
 };
 const disabledClick = () => {
-  ElMessage.info("失效");
+  message("失效", { type: "info" });
 };
 </script>
 

src/views/components/message/index.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { h } from "vue";
+import hot from "@/assets/svg/hot.svg?component";
+import { message, closeAllMessage } from "@/utils/message";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "Message"
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"> Message提示 </span>
+      </div>
+    </template>
+
+    <h4 class="mb-4">element-plus 的消息提示，点击弹出提示信息</h4>
+
+    <el-space wrap>
+      <el-button
+        type="info"
+        @click="message('Info类型消息', { customClass: 'el' })"
+      >
+        Info
+      </el-button>
+      <el-button
+        type="success"
+        @click="
+          message('Success类型消息', { customClass: 'el', type: 'success' })
+        "
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="
+          message('Warning类型消息', { customClass: 'el', type: 'warning' })
+        "
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { customClass: 'el', type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button
+        @click="message('可关闭消息', { customClass: 'el', showClose: true })"
+      >
+        可关闭
+      </el-button>
+      <el-button
+        @click="
+          message('分组消息合并', {
+            customClass: 'el',
+            type: 'success',
+            grouping: true
+          })
+        "
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            customClass: 'el',
+            icon: useRenderIcon('check')
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            customClass: 'el',
+            duration: 3000,
+            onClose: () =>
+              message('消息已关闭', { customClass: 'el', type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ]),
+            { customClass: 'el' }
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            customClass: 'el',
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <h4 class="mb-4">
+      类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage
+      样式改版，不会影响 ElMessage
+      原本样式，使用和打包大小成本极低并适配暗黑模式）
+    </h4>
+
+    <el-space wrap>
+      <el-button type="info" @click="message('Info类型消息')">Info</el-button>
+      <el-button
+        type="success"
+        @click="message('Success类型消息', { type: 'success' })"
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="message('Warning类型消息', { type: 'warning' })"
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button @click="message('可关闭消息', { showClose: true })">
+        可关闭
+      </el-button>
+      <el-button
+        @click="message('分组消息合并', { type: 'success', grouping: true })"
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            icon: hot
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            duration: 3000,
+            onClose: () => message('消息已关闭', { type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ])
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
+  </el-card>
+</template>

src/views/list/card/components/DialogForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { ElMessage, FormInstance } from "element-plus";
+import { message } from "@/utils/message";
+import { FormInstance } from "element-plus";
 
 const SELECT_OPTIONS = [
   { label: "网关", value: 1 },
@@ -33,7 +34,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(valid => {
     if (valid) {
-      ElMessage.success("提交成功");
+      message("提交成功", { type: "success" });
       formVisible.value = false;
       resetForm(formEl);
     }

src/views/list/card/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import Card from "./components/Card.vue";
 import { getCardList } from "@/api/list";
+import { message } from "@/utils/message";
+import { ElMessageBox } from "element-plus";
 import { ref, onMounted, nextTick } from "vue";
 import dialogForm from "./components/DialogForm.vue";
-import { ElMessage, ElMessageBox } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
 defineOptions({
@@ -77,10 +78,7 @@ const handleDeleteItem = product => {
     }
   )
     .then(() => {
-      ElMessage({
+      message("删除成功", { type: "success" });
-        type: "success",
-        message: "删除成功"
-      });
     })
     .catch(() => {});
 };

src/views/login/components/phone.vue

@@ -2,8 +2,8 @@
 import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
+import { message } from "@/utils/message";
 import { phoneRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useVerifyCode } from "../utils/verifyCode";
@@ -26,7 +26,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
     if (valid) {
       // 模拟登录请求，需根据实际开发进行修改
       setTimeout(() => {
-        message.success(transformI18n($t("login.loginSuccess")));
+        message(transformI18n($t("login.loginSuccess")), { type: "success" });
         loading.value = false;
       }, 2000);
     } else {

src/views/login/components/regist.vue

@@ -2,8 +2,8 @@
 import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
+import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
@@ -45,12 +45,14 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
       if (checked.value) {
         // 模拟请求，需根据实际开发进行修改
         setTimeout(() => {
-          message.success(transformI18n($t("login.registerSuccess")));
+          message(transformI18n($t("login.registerSuccess")), {
+            type: "success"
+          });
           loading.value = false;
         }, 2000);
       } else {
         loading.value = false;
-        message.warning(transformI18n($t("login.tickPrivacy")));
+        message(transformI18n($t("login.tickPrivacy")), { type: "warning" });
       }
     } else {
       loading.value = false;

src/views/login/components/update.vue

@@ -2,8 +2,8 @@
 import { useI18n } from "vue-i18n";
 import { ref, reactive } from "vue";
 import Motion from "../utils/motion";
+import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
@@ -42,7 +42,9 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
     if (valid) {
       // 模拟请求，需根据实际开发进行修改
       setTimeout(() => {
-        message.success(transformI18n($t("login.passwordUpdateReg")));
+        message(transformI18n($t("login.passwordUpdateReg")), {
+          type: "success"
+        });
         loading.value = false;
       }, 2000);
     } else {

src/views/login/index.vue

@@ -10,6 +10,7 @@ import {
 import { useI18n } from "vue-i18n";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
+import { message } from "@/utils/message";
 import { loginRules } from "./utils/rule";
 import phone from "./components/phone.vue";
 import TypeIt from "@/components/ReTypeit";
@@ -18,7 +19,6 @@ import regist from "./components/regist.vue";
 import update from "./components/update.vue";
 import { initRouter } from "@/router/utils";
 import { useNav } from "@/layout/hooks/useNav";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { operates, thirdParty } from "./utils/enums";
@@ -72,8 +72,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
           if (res.success) {
             // 获取后端路由
             initRouter().then(() => {
-              message.success("登录成功");
               router.push("/");
+              message("登录成功", { type: "success" });
             });
           }
         });

src/views/pure-table/base/column-template/columns.tsx

@@ -1,4 +1,4 @@
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 import { tableData } from "../data";
 
 // 如果您不习惯tsx写法，可以传slot，然后在template里写
@@ -56,11 +56,13 @@ export function useColumns() {
   ];
 
   const handleEdit = (index: number, row) => {
-    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+      type: "success"
+    });
   };
 
   const handleDelete = (index: number, row) => {
-    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
   };
 
   return {

src/views/pure-table/base/header-renderer/columns.tsx

@@ -1,4 +1,4 @@
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 import { tableData } from "../data";
 import { ref, computed } from "vue";
 
@@ -15,11 +15,13 @@ export function useColumns() {
   );
 
   const handleEdit = (index: number, row) => {
-    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+      type: "success"
+    });
   };
 
   const handleDelete = (index: number, row) => {
-    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
   };
 
   const columns: TableColumnList = [

src/views/pure-table/high.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { list } from "./high/list";
-import { Tabs, TabPane } from "@pureadmin/components";
 
 defineOptions({
   name: "PureTableHigh"
 });
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
 </script>
 
 <template>
@@ -32,25 +38,45 @@ defineOptions({
       :closable="false"
     />
 
-    <Tabs :destroyInactiveTabPane="true">
+    <el-tabs @tab-click="tabClick">
-      <TabPane v-for="item of list" :key="item.key">
+      <template v-for="(item, index) of list" :key="item.key">
-        <template #tab>
+        <el-tab-pane :lazy="true">
-          <el-tooltip :content="item.content" placement="top-end">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
               <span>{{ item.title }}</span>
             </el-tooltip>
           </template>
-        <component :is="item.component" />
+          <component v-if="selected == index" :is="item.component" />
-      </TabPane>
+        </el-tab-pane>
-    </Tabs>
+      </template>
+    </el-tabs>
   </el-card>
 </template>
 
 <style scoped>
-:deep(.ant-tabs-content-holder) {
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
   margin-top: 10px;
 }
 
 :deep(.el-alert__title) {
   font-size: 16px;
 }
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
 </style>

src/views/pure-table/high/contextmenu/columns.tsx

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import { tableDataDrag } from "../data";
 import { clone } from "@pureadmin/utils";
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 import { CustomMouseMenu } from "@howdyjs/mouse-menu";
 
 export function useColumns() {
@@ -33,10 +33,13 @@ export function useColumns() {
         label: "编辑",
         tips: "Edit",
         fn: row =>
-          message.success(
+          message(
             `您编辑了第 ${
               dataList.value.findIndex(v => v.id === row.id) + 1
-            } 行，数据为：${JSON.stringify(row)}`
+            } 行，数据为：${JSON.stringify(row)}`,
+            {
+              type: "success"
+            }
           )
       }
     ]

src/views/pure-table/high/echarts/columns.tsx

@@ -5,9 +5,9 @@ import {
   type EchartOptions
 } from "@pureadmin/utils";
 import { tableDataDrag } from "../data";
+import { message } from "@/utils/message";
 import { templateRef } from "@vueuse/core";
 import { ref, type Ref, computed } from "vue";
-import { message } from "@pureadmin/components";
 
 export function useColumns() {
   const dataList = ref(clone(tableDataDrag, true).splice(0, 4));
@@ -76,8 +76,11 @@ export function useColumns() {
       {
         name: "click",
         callback: ({ data: { name, value } }) => {
-          message.success(
+          message(
-            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`
+            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`,
+            {
+              type: "success"
+            }
           );
         }
       }

src/views/pure-table/high/edit/columns.tsx

@@ -1,6 +1,6 @@
 import { tableDataEdit } from "../data";
+import { message } from "@/utils/message";
 import { ref, computed, Transition } from "vue";
-import { message } from "@pureadmin/components";
 import { clone, delay } from "@pureadmin/utils";
 
 // 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
@@ -109,10 +109,13 @@ export function useColumns() {
 
   function onSure(index) {
     dataList.value[index].id = inputValMap.value[index].value;
-    message.success(
+    message(
       `您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
         dataList.value[index]
-      )}`
+      )}`,
+      {
+        type: "success"
+      }
     );
     // 编辑状态关闭
     editStatus.value[index] = Object.assign({}, editStatus.value[index], {

src/views/pure-table/high/execl/columns.tsx

@@ -2,7 +2,7 @@ import { ref } from "vue";
 import { utils, writeFile } from "xlsx";
 import { tableDataDrag } from "../data";
 import { clone } from "@pureadmin/utils";
-import { message } from "@pureadmin/components";
+import { message } from "@/utils/message";
 
 export function useColumns() {
   const dataList = ref(clone(tableDataDrag, true));
@@ -39,7 +39,9 @@ export function useColumns() {
     const workBook = utils.book_new();
     utils.book_append_sheet(workBook, workSheet, "数据报表");
     writeFile(workBook, "pure-admin-table.xlsx");
-    message.success("导出成功");
+    message("导出成功", {
+      type: "success"
+    });
   };
 
   return {

src/views/pure-table/index.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { list } from "./base/list";
-import { Tabs, TabPane } from "@pureadmin/components";
 
 defineOptions({
   name: "PureTable"
 });
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
 </script>
 
 <template>
@@ -33,25 +39,45 @@ defineOptions({
       :closable="false"
     />
 
-    <Tabs :destroyInactiveTabPane="true">
+    <el-tabs @tab-click="tabClick">
-      <TabPane v-for="item of list" :key="item.key">
+      <template v-for="(item, index) of list" :key="item.key">
-        <template #tab>
+        <el-tab-pane :lazy="true">
-          <el-tooltip :content="item.content" placement="top-end">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
               <span>{{ item.title }}</span>
             </el-tooltip>
           </template>
-        <component :is="item.component" />
+          <component v-if="selected == index" :is="item.component" />
-      </TabPane>
+        </el-tab-pane>
-    </Tabs>
+      </template>
+    </el-tabs>
   </el-card>
 </template>
 
 <style scoped>
-:deep(.ant-tabs-content-holder) {
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
   margin-top: 10px;
 }
 
 :deep(.el-alert__title) {
   font-size: 16px;
 }
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
 </style>

src/views/system/role/columns.tsx

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import dayjs from "dayjs";
+import { message } from "@/utils/message";
 import { ElMessageBox } from "element-plus";
-import { Switch, message } from "@pureadmin/components";
 
 export function useColumns() {
   const switchLoadMap = ref({});
@@ -53,14 +53,15 @@ export function useColumns() {
       prop: "status",
       width: 130,
       cellRenderer: scope => (
-        <Switch
+        <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
           loading={switchLoadMap.value[scope.index]?.loading}
-          v-model:checked={scope.row.status}
+          v-model={scope.row.status}
-          checkedValue={1}
+          active-value={1}
-          unCheckedValue={0}
+          inactive-value={0}
-          checked-children="已开启"
+          active-text="已开启"
-          un-checked-children="已关闭"
+          inactive-text="已关闭"
+          inline-prompt
           onChange={() => onChange(scope as any)}
         />
       )
@@ -112,7 +113,9 @@ export function useColumns() {
               loading: false
             }
           );
-          message.success("已成功修改角色状态");
+          message("已成功修改角色状态", {
+            type: "success"
+          });
         }, 300);
       })
       .catch(() => {

src/views/system/user/columns.tsx

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import dayjs from "dayjs";
+import { message } from "@/utils/message";
 import { ElMessageBox } from "element-plus";
-import { Switch, message } from "@pureadmin/components";
 
 export function useColumns() {
   const switchLoadMap = ref({});
@@ -58,14 +58,15 @@ export function useColumns() {
       prop: "status",
       width: 130,
       cellRenderer: scope => (
-        <Switch
+        <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
           loading={switchLoadMap.value[scope.index]?.loading}
-          v-model:checked={scope.row.status}
+          v-model={scope.row.status}
-          checkedValue={1}
+          active-value={1}
-          unCheckedValue={0}
+          inactive-value={0}
-          checked-children="已开启"
+          active-text="已开启"
-          un-checked-children="已关闭"
+          inactive-text="已关闭"
+          inline-prompt
           onChange={() => onChange(scope as any)}
         />
       )
@@ -117,7 +118,9 @@ export function useColumns() {
               loading: false
             }
           );
-          message.success("已成功修改用户状态");
+          message("已成功修改用户状态", {
+            type: "success"
+          });
         }, 300);
       })
       .catch(() => {

src/views/tabs/index.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { clone } from "@pureadmin/utils";
-import { transformI18n } from "@/plugins/i18n";
-import { TreeSelect } from "@pureadmin/components";
-import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { usePermissionStoreHook } from "@/store/modules/permission";
 import {
   deleteChildren,
   getNodeByUniqueId,
   appendFieldByUniqueId
 } from "@/utils/tree";
 import { useDetail } from "./hooks";
+import { ref, computed } from "vue";
+import { clone } from "@pureadmin/utils";
+import { transformI18n } from "@/plugins/i18n";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { usePermissionStoreHook } from "@/store/modules/permission";
 
 defineOptions({
   name: "Tabs"
@@ -25,14 +24,15 @@ const treeData = computed(() => {
   });
 });
 
-const value = ref<string[]>([]);
+const currentValues = ref<string[]>([]);
 
 const multiTags = computed(() => {
   return useMultiTagsStoreHook()?.multiTags;
 });
 
 function onCloseTags() {
-  value.value.forEach(uniqueId => {
+  if (currentValues.value.length === 0) return;
+  currentValues.value.forEach(uniqueId => {
     const currentPath =
       getNodeByUniqueId(treeData.value, uniqueId).redirect ??
       getNodeByUniqueId(treeData.value, uniqueId).path;
@@ -77,32 +77,27 @@ function onCloseTags() {
     </div>
 
     <el-divider />
-    <TreeSelect
+    <el-tree-select
       class="w-[300px]"
-      v-model:value="value"
+      node-key="uniqueId"
-      show-search
-      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
       placeholder="请选择要关闭的标签"
-      :fieldNames="{
+      clearable
-        children: 'children',
-        key: 'uniqueId',
-        value: 'uniqueId'
-      }"
-      allow-clear
       multiple
-      tree-default-expand-all
+      filterable
-      :tree-data="treeData"
+      default-expand-all
+      :props="{
+        label: data => transformI18n(data.meta.title),
+        value: 'uniqueId',
+        children: 'children',
+        disabled: 'disabled'
+      }"
+      :data="treeData"
+      v-model="currentValues"
     >
-      <template #tagRender="{ closable, onClose, option }">
+      <template #default="{ data }">
-        <el-tag class="mr-[3px]" :closable="closable" @close="onClose">
-          {{ transformI18n(option.meta.title) }}
-        </el-tag>
-      </template>
-
-      <template #title="{ data }">
         <span>{{ transformI18n(data.meta.title) }}</span>
       </template>
-    </TreeSelect>
+    </el-tree-select>
     <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
 
     <el-divider />

tsconfig.json

@@ -21,8 +21,7 @@
     "incremental": true,
     "paths": {
       "@/*": ["src/*"],
-      "@build/*": ["build/*"],
+      "@build/*": ["build/*"]
-      "/#/*": ["types/*"]
     },
     "types": [
       "node",
@@ -30,16 +29,16 @@
       "element-plus/global",
       "@pureadmin/table/volar",
       "@pureadmin/descriptions/volar",
-      "unplugin-vue-macros/macros-global"
+      "unplugin-vue-define-options/macros-global"
     ],
     "typeRoots": ["./node_modules/@types/", "./types"]
   },
   "include": [
+    "mock/*.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
     "types/*.d.ts",
-    "mock/*.ts",
     "vite.config.ts"
   ],
   "exclude": ["node_modules", "dist", "**/*.js"]

types/global-components.d.ts

@@ -0,0 +1,124 @@
+declare module "vue" {
+  /**
+   * 自定义全局组件获得 Volar 提示（自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦）
+   */
+  export interface GlobalComponents {
+    IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
+    IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
+    FontIcon: typeof import("../src/components/ReIcon")["FontIcon"];
+    Auth: typeof import("../src/components/ReAuth")["Auth"];
+  }
+}
+
+/**
+ * todo：https://github.com/element-plus/element-plus/blob/dev/global.d.ts#L2
+ * No need to install @vue/runtime-core
+ */
+declare module "vue" {
+  export interface GlobalComponents {
+    ElAffix: typeof import("element-plus")["ElAffix"];
+    ElAlert: typeof import("element-plus")["ElAlert"];
+    ElAside: typeof import("element-plus")["ElAside"];
+    ElAutocomplete: typeof import("element-plus")["ElAutocomplete"];
+    ElAvatar: typeof import("element-plus")["ElAvatar"];
+    ElBacktop: typeof import("element-plus")["ElBacktop"];
+    ElBadge: typeof import("element-plus")["ElBadge"];
+    ElBreadcrumb: typeof import("element-plus")["ElBreadcrumb"];
+    ElBreadcrumbItem: typeof import("element-plus")["ElBreadcrumbItem"];
+    ElButton: typeof import("element-plus")["ElButton"];
+    ElButtonGroup: typeof import("element-plus")["ElButtonGroup"];
+    ElCalendar: typeof import("element-plus")["ElCalendar"];
+    ElCard: typeof import("element-plus")["ElCard"];
+    ElCarousel: typeof import("element-plus")["ElCarousel"];
+    ElCarouselItem: typeof import("element-plus")["ElCarouselItem"];
+    ElCascader: typeof import("element-plus")["ElCascader"];
+    ElCascaderPanel: typeof import("element-plus")["ElCascaderPanel"];
+    ElCheckbox: typeof import("element-plus")["ElCheckbox"];
+    ElCheckboxButton: typeof import("element-plus")["ElCheckboxButton"];
+    ElCheckboxGroup: typeof import("element-plus")["ElCheckboxGroup"];
+    ElCol: typeof import("element-plus")["ElCol"];
+    ElCollapse: typeof import("element-plus")["ElCollapse"];
+    ElCollapseItem: typeof import("element-plus")["ElCollapseItem"];
+    ElCollapseTransition: typeof import("element-plus")["ElCollapseTransition"];
+    ElColorPicker: typeof import("element-plus")["ElColorPicker"];
+    ElContainer: typeof import("element-plus")["ElContainer"];
+    ElConfigProvider: typeof import("element-plus")["ElConfigProvider"];
+    ElDatePicker: typeof import("element-plus")["ElDatePicker"];
+    ElDialog: typeof import("element-plus")["ElDialog"];
+    ElDivider: typeof import("element-plus")["ElDivider"];
+    ElDrawer: typeof import("element-plus")["ElDrawer"];
+    ElDropdown: typeof import("element-plus")["ElDropdown"];
+    ElDropdownItem: typeof import("element-plus")["ElDropdownItem"];
+    ElDropdownMenu: typeof import("element-plus")["ElDropdownMenu"];
+    ElEmpty: typeof import("element-plus")["ElEmpty"];
+    ElFooter: typeof import("element-plus")["ElFooter"];
+    ElForm: typeof import("element-plus")["ElForm"];
+    ElFormItem: typeof import("element-plus")["ElFormItem"];
+    ElHeader: typeof import("element-plus")["ElHeader"];
+    ElIcon: typeof import("element-plus")["ElIcon"];
+    ElImage: typeof import("element-plus")["ElImage"];
+    ElImageViewer: typeof import("element-plus")["ElImageViewer"];
+    ElInput: typeof import("element-plus")["ElInput"];
+    ElInputNumber: typeof import("element-plus")["ElInputNumber"];
+    ElLink: typeof import("element-plus")["ElLink"];
+    ElMain: typeof import("element-plus")["ElMain"];
+    ElMenu: typeof import("element-plus")["ElMenu"];
+    ElMenuItem: typeof import("element-plus")["ElMenuItem"];
+    ElMenuItemGroup: typeof import("element-plus")["ElMenuItemGroup"];
+    ElOption: typeof import("element-plus")["ElOption"];
+    ElOptionGroup: typeof import("element-plus")["ElOptionGroup"];
+    ElPageHeader: typeof import("element-plus")["ElPageHeader"];
+    ElPagination: typeof import("element-plus")["ElPagination"];
+    ElPopconfirm: typeof import("element-plus")["ElPopconfirm"];
+    ElPopper: typeof import("element-plus")["ElPopper"];
+    ElPopover: typeof import("element-plus")["ElPopover"];
+    ElProgress: typeof import("element-plus")["ElProgress"];
+    ElRadio: typeof import("element-plus")["ElRadio"];
+    ElRadioButton: typeof import("element-plus")["ElRadioButton"];
+    ElRadioGroup: typeof import("element-plus")["ElRadioGroup"];
+    ElRate: typeof import("element-plus")["ElRate"];
+    ElRow: typeof import("element-plus")["ElRow"];
+    ElScrollbar: typeof import("element-plus")["ElScrollbar"];
+    ElSelect: typeof import("element-plus")["ElSelect"];
+    ElSlider: typeof import("element-plus")["ElSlider"];
+    ElStep: typeof import("element-plus")["ElStep"];
+    ElSteps: typeof import("element-plus")["ElSteps"];
+    ElSubMenu: typeof import("element-plus")["ElSubMenu"];
+    ElSwitch: typeof import("element-plus")["ElSwitch"];
+    ElTabPane: typeof import("element-plus")["ElTabPane"];
+    ElTable: typeof import("element-plus")["ElTable"];
+    ElTableColumn: typeof import("element-plus")["ElTableColumn"];
+    ElTabs: typeof import("element-plus")["ElTabs"];
+    ElTag: typeof import("element-plus")["ElTag"];
+    ElTimePicker: typeof import("element-plus")["ElTimePicker"];
+    ElTimeSelect: typeof import("element-plus")["ElTimeSelect"];
+    ElTimeline: typeof import("element-plus")["ElTimeline"];
+    ElTimelineItem: typeof import("element-plus")["ElTimelineItem"];
+    ElTooltip: typeof import("element-plus")["ElTooltip"];
+    ElTransfer: typeof import("element-plus")["ElTransfer"];
+    ElTree: typeof import("element-plus")["ElTree"];
+    ElTreeV2: typeof import("element-plus")["ElTreeV2"];
+    ElUpload: typeof import("element-plus")["ElUpload"];
+    ElSpace: typeof import("element-plus")["ElSpace"];
+    ElSkeleton: typeof import("element-plus")["ElSkeleton"];
+    ElSkeletonItem: typeof import("element-plus")["ElSkeletonItem"];
+    ElCheckTag: typeof import("element-plus")["ElCheckTag"];
+    ElDescriptions: typeof import("element-plus")["ElDescriptions"];
+    ElDescriptionsItem: typeof import("element-plus")["ElDescriptionsItem"];
+    ElResult: typeof import("element-plus")["ElResult"];
+    ElSelectV2: typeof import("element-plus")["ElSelectV2"];
+  }
+
+  interface ComponentCustomProperties {
+    $message: typeof import("element-plus")["ElMessage"];
+    $notify: typeof import("element-plus")["ElNotification"];
+    $msgbox: typeof import("element-plus")["ElMessageBox"];
+    $messageBox: typeof import("element-plus")["ElMessageBox"];
+    $alert: typeof import("element-plus")["ElMessageBox"]["alert"];
+    $confirm: typeof import("element-plus")["ElMessageBox"]["confirm"];
+    $prompt: typeof import("element-plus")["ElMessageBox"]["prompt"];
+    $loading: typeof import("element-plus")["ElLoadingService"];
+  }
+}
+
+export {};

types/global.d.ts

@@ -214,6 +214,7 @@ declare global {
         /**
          * @description 当前路由动画效果
          * @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
+         * @see animate.css {@link https://animate.style}
          */
         name?: string;
         /** 进场动画 */
@@ -265,15 +266,3 @@ declare global {
     $config: ServerConfigs;
   }
 }
-
-declare module "vue" {
-  /**
-   * 自定义全局组件获得 Volar 提示（自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦）
-   */
-  export interface GlobalComponents {
-    IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
-    IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
-    FontIcon: typeof import("../src/components/ReIcon")["FontIcon"];
-    Auth: typeof import("../src/components/ReAuth")["Auth"];
-  }
-}

types/shims-vue.d.ts

@@ -9,8 +9,7 @@ declare module "*.scss" {
   export default scss;
 }
 
-declare module "vuedraggable/src/vuedraggable";
-declare module "vue-virtual-scroller";
-declare module "@pureadmin/components";
 declare module "@pureadmin/theme";
+declare module "vue-virtual-scroller";
+declare module "vuedraggable/src/vuedraggable";
 declare module "@pureadmin/theme/dist/browser-utils";