perf: 大优化，移除 `@pureadmin/components` , 打包大小未启用压缩前减少 `0.4 MB` , 首屏请求减少 `2.3 MB` 的资源

locales/en.yaml

@@ -84,9 +84,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

@@ -84,9 +84,6 @@ menus:
   hsIconSelect: 图标选择器
   hsTimeline: 时间线
   hsLineTree: 树形连接线
-  hsAntTabs: 仿antdv标签页
-  hsAntAnchor: 仿antdv锚点
-  hsAntTreeSelect: 仿antdv树型选择器
   hsList: 列表页
   hsListCard: 卡片列表页
   hsDebounce: 防抖节流
@@ -100,8 +97,8 @@ menus:
   hsExecl: 导出Excel
   hsInfiniteScroll: 表格无限滚动
   hsdanmaku: 弹幕组件
-  hsPureTableBase: 基础用法
-  hsPureTableHigh: 高级用法
+  hsPureTableBase: 基础用法（23个示例）
+  hsPureTableHigh: 高级用法（8个示例）
   hsTree: 大数据树业务组件
 status:
   hsLoad: 加载中...

package.json

@@ -34,7 +34,6 @@
     "@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",

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 => {
-  noticesNum.value += notice.list.length;
-});
+const notices = ref(noticesData);
+const activeKey = ref(noticesData[0].key);
 
-function tabClick() {
-  (dropdownDom as any).value.handleOpen();
-}
+notices.value.map(v => (noticesNum.value += v.list.length));
 </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
-          centered
-          class="dropdown-tabs"
-          :tabBarStyle="{ marginLeft: notices?.length > 4 ? '8px' : '0' }"
-          v-model:activeKey="activeKey"
-          @tabClick="tabClick"
-        >
+        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
           <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;
-  background-color: #fff;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
-  border-radius: 4px;
+  width: 330px;
 
-  :deep(.el-tabs__header) {
-    margin: 0;
+  .noticeList-container {
+    padding: 15px 24px 0 24px;
   }
 
-  :deep(.el-tabs__nav-scroll) {
-    display: flex;
-    justify-content: center;
+  :deep(.el-tabs__header) {
+    margin: 0;
   }
 
   :deep(.el-tabs__nav-wrap)::after {
     height: 1px;
   }
 
-  :deep(.noticeList-container) {
-    padding: 15px 24px 0 24px;
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 36px 0 36px;
   }
-}
 
-:deep(.ant-tabs-nav) {
-  margin-bottom: 0;
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :deep(.el-tabs__active-bar) {
+    margin: 0 36px 0 36px;
+  }
 }
 </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/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/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,

src/utils/message.ts

@@ -0,0 +1,33 @@
+import { type MessageHandler, ElMessage } from "element-plus";
+
+// 更多配置请看：https://element-plus.org/zh-CN/component/message.html#message-%E9%85%8D%E7%BD%AE%E9%A1%B9
+
+type messageTypes = "success" | "info" | "warning" | "error";
+
+/**
+ * `element-plus` 的 `info` 消息类型
+ */
+const message = (
+  message: string,
+  type = "info" as messageTypes,
+  showClose = true,
+  duration = 2000,
+  center = false,
+  grouping = false
+): MessageHandler => {
+  return ElMessage({
+    message,
+    type,
+    showClose,
+    duration,
+    center,
+    grouping
+  });
+};
+
+/**
+ * 关闭 `element-plus` 的所有消息实例
+ */
+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/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")), "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,12 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
       if (checked.value) {
         // 模拟请求，需根据实际开发进行修改
         setTimeout(() => {
-          message.success(transformI18n($t("login.registerSuccess")));
+          message(transformI18n($t("login.registerSuccess")), "success");
           loading.value = false;
         }, 2000);
       } else {
         loading.value = false;
-        message.warning(transformI18n($t("login.tickPrivacy")));
+        message(transformI18n($t("login.tickPrivacy")), "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,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
     if (valid) {
       // 模拟请求，需根据实际开发进行修改
       setTimeout(() => {
-        message.success(transformI18n($t("login.passwordUpdateReg")));
+        message(transformI18n($t("login.passwordUpdateReg")), "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("登录成功", "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,14 @@ export function useColumns() {
   ];
 
   const handleEdit = (index: number, row) => {
-    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(
+      `您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
+      "success"
+    );
   };
 
   const handleDelete = (index: number, row) => {
-    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
   };
 
   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,14 @@ export function useColumns() {
   );
 
   const handleEdit = (index: number, row) => {
-    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(
+      `您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
+      "success"
+    );
   };
 
   const handleDelete = (index: number, row) => {
-    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
   };
 
   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,21 +38,30 @@ defineOptions({
       :closable="false"
     />
 
-    <Tabs :destroyInactiveTabPane="true">
-      <TabPane v-for="item of list" :key="item.key">
-        <template #tab>
-          <el-tooltip :content="item.content" placement="top-end">
-            <span>{{ item.title }}</span>
-          </el-tooltip>
-        </template>
-        <component :is="item.component" />
-      </TabPane>
-    </Tabs>
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component v-if="selected == index" :is="item.component" />
+        </el-tab-pane>
+      </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;
 }
 

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,11 @@ 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)}`,
+            "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,9 @@ export function useColumns() {
       {
         name: "click",
         callback: ({ data: { name, value } }) => {
-          message.success(
-            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`
+          message(
+            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`,
+            "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,11 @@ export function useColumns() {
 
   function onSure(index) {
     dataList.value[index].id = inputValMap.value[index].value;
-    message.success(
+    message(
       `您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
         dataList.value[index]
-      )}`
+      )}`,
+      "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,7 @@ export function useColumns() {
     const workBook = utils.book_new();
     utils.book_append_sheet(workBook, workSheet, "数据报表");
     writeFile(workBook, "pure-admin-table.xlsx");
-    message.success("导出成功");
+    message("导出成功", "success");
   };
 
   return {

src/views/pure-table/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { list } from "./base/list";
-import { Tabs, TabPane } from "@pureadmin/components";
 
 defineOptions({
   name: "PureTable"
@@ -33,21 +32,30 @@ defineOptions({
       :closable="false"
     />
 
-    <Tabs :destroyInactiveTabPane="true">
-      <TabPane v-for="item of list" :key="item.key">
-        <template #tab>
-          <el-tooltip :content="item.content" placement="top-end">
-            <span>{{ item.title }}</span>
-          </el-tooltip>
-        </template>
-        <component :is="item.component" />
-      </TabPane>
-    </Tabs>
+    <el-tabs>
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane>
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" />
+        </el-tab-pane>
+      </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;
 }
 

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}
-          checkedValue={1}
-          unCheckedValue={0}
-          checked-children="已开启"
-          un-checked-children="已关闭"
+          v-model={scope.row.status}
+          active-value={1}
+          inactive-value={0}
+          active-text="已开启"
+          inactive-text="已关闭"
+          inline-prompt
           onChange={() => onChange(scope as any)}
         />
       )
@@ -112,7 +113,7 @@ export function useColumns() {
               loading: false
             }
           );
-          message.success("已成功修改角色状态");
+          message("已成功修改角色状态", "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}
-          checkedValue={1}
-          unCheckedValue={0}
-          checked-children="已开启"
-          un-checked-children="已关闭"
+          v-model={scope.row.status}
+          active-value={1}
+          inactive-value={0}
+          active-text="已开启"
+          inactive-text="已关闭"
+          inline-prompt
           onChange={() => onChange(scope as any)}
         />
       )
@@ -117,7 +118,7 @@ export function useColumns() {
               loading: false
             }
           );
-          message.success("已成功修改用户状态");
+          message("已成功修改用户状态", "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"
-      show-search
-      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+      node-key="uniqueId"
       placeholder="请选择要关闭的标签"
-      :fieldNames="{
+      clearable
+      multiple
+      filterable
+      default-expand-all
+      :props="{
+        label: data => transformI18n(data.meta.title),
+        value: 'uniqueId',
         children: 'children',
-        key: 'uniqueId',
-        value: 'uniqueId'
+        disabled: 'disabled'
       }"
-      allow-clear
-      multiple
-      tree-default-expand-all
-      :tree-data="treeData"
+      :data="treeData"
+      v-model="currentValues"
     >
-      <template #tagRender="{ closable, onClose, option }">
-        <el-tag class="mr-[3px]" :closable="closable" @close="onClose">
-          {{ transformI18n(option.meta.title) }}
-        </el-tag>
-      </template>
-
-      <template #title="{ data }">
+      <template #default="{ data }">
         <span>{{ transformI18n(data.meta.title) }}</span>
       </template>
-    </TreeSelect>
+    </el-tree-select>
     <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
 
     <el-divider />

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