perf: 移除 @pureadmin/components , 打包大小未启用压缩前减少 0.48 MB , 首屏请求减少 2.3 MB 的资源，请务必升级哦

package.json

@@ -30,7 +30,6 @@
   ],
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.1",
-    "@pureadmin/components": "^1.1.0",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.8.0",
     "@pureadmin/utils": "^1.6.7",

pnpm-lock.yaml

@@ -7,7 +7,6 @@ specifiers:
   "@iconify-icons/ep": ^1.2.7
   "@iconify-icons/ri": ^1.2.3
   "@iconify/vue": ^4.0.0
-  "@pureadmin/components": ^1.1.0
   "@pureadmin/descriptions": ^1.1.0
   "@pureadmin/table": ^1.8.0
   "@pureadmin/theme": ^2.4.0
@@ -94,7 +93,6 @@ specifiers:
 
 dependencies:
   "@ctrl/tinycolor": 3.4.1
-  "@pureadmin/components": 1.1.0_vue@3.2.45
   "@pureadmin/descriptions": 1.1.1_element-plus@2.2.25
   "@pureadmin/table": 1.8.0_element-plus@2.2.25
   "@pureadmin/utils": 1.6.7_aotapuqn7htzdjltsyimavekky
@@ -198,35 +196,6 @@ packages:
       "@jridgewell/trace-mapping": 0.3.17
     dev: true
 
-  /@ant-design/colors/6.0.0:
-    resolution:
-      {
-        integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
-      }
-    dependencies:
-      "@ctrl/tinycolor": 3.4.1
-    dev: false
-
-  /@ant-design/icons-svg/4.2.1:
-    resolution:
-      {
-        integrity: sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
-      }
-    dev: false
-
-  /@ant-design/icons-vue/6.1.0_vue@3.2.45:
-    resolution:
-      {
-        integrity: sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==
-      }
-    peerDependencies:
-      vue: ">=3.0.3"
-    dependencies:
-      "@ant-design/colors": 6.0.0
-      "@ant-design/icons-svg": 4.2.1
-      vue: 3.2.45
-    dev: false
-
   /@antfu/utils/0.6.3:
     resolution:
       {
@@ -1074,19 +1043,6 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@pureadmin/components/1.1.0_vue@3.2.45:
-    resolution:
-      {
-        integrity: sha512-Y7FCUVQVkZ2P3K/3vLrfQOfpjbf8g0TDPUWuFUlaq6aIW3BRduiVfqn4k/r3TX6LtasxGvgnJ/TO9tGed5VlTg==
-      }
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      "@ant-design/icons-svg": 4.2.1
-      "@ant-design/icons-vue": 6.1.0_vue@3.2.45
-      vue: 3.2.45
-    dev: false
-
   /@pureadmin/descriptions/1.1.1_element-plus@2.2.25:
     resolution:
       {

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

@@ -18,9 +18,7 @@ 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/style/dark.scss

@@ -26,11 +26,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/login/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
+import { message } from "@/utils/message";
 import { loginRules } from "./utils/rule";
 import { initRouter } from "@/router/utils";
 import { useNav } from "@/layout/hooks/useNav";
-import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
@@ -46,8 +46,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
           if (res.success) {
             // 获取后端路由
             initRouter().then(() => {
-              message.success("登录成功");
               router.push("/");
+              message("登录成功", "success");
             });
           }
         });

types/shims-vue.d.ts

@@ -10,5 +10,4 @@ declare module "*.scss" {
 }
 
 declare module "@pureadmin/theme";
-declare module "@pureadmin/components";
 declare module "@pureadmin/theme/dist/browser-utils";