From b5f0ca52cee9f887aa33b1c33019c3f9876312f5 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 26 Nov 2022 21:23:43 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=A7=BB=E9=99=A4=20`@pureadmin/compon?=
 =?UTF-8?q?ents`=20,=20=E6=89=93=E5=8C=85=E5=A4=A7=E5=B0=8F=E6=9C=AA?=
 =?UTF-8?q?=E5=90=AF=E7=94=A8=E5=8E=8B=E7=BC=A9=E5=89=8D=E5=87=8F=E5=B0=91?=
 =?UTF-8?q?=20`0.48=20MB`=20,=20=E9=A6=96=E5=B1=8F=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E5=87=8F=E5=B0=91=20`2.3=20MB`=20=E7=9A=84=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=EF=BC=8C=E8=AF=B7=E5=8A=A1=E5=BF=85=E5=8D=87=E7=BA=A7=E5=93=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |  1 -
 pnpm-lock.yaml                         | 44 -----------------
 src/layout/components/notice/index.vue | 68 +++++++++-----------------
 src/main.ts                            |  4 +-
 src/style/dark.scss                    |  5 --
 src/utils/message.ts                   | 33 +++++++++++++
 src/views/login/index.vue              |  4 +-
 types/shims-vue.d.ts                   |  1 -
 8 files changed, 60 insertions(+), 100 deletions(-)
 create mode 100644 src/utils/message.ts

diff --git a/package.json b/package.json
index 1787932..f7339d5 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 11ab3bd..38f892f 100644
--- a/pnpm-lock.yaml
+++ b/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:
       {
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 1c283e8..976b39e 100644
--- a/src/layout/components/notice/index.vue
+++ b/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;
+
+  .noticeList-container {
+    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) {
-    padding: 15px 24px 0 24px;
+  // 如果上面的 notices 长度大于 3 请注释掉下面代码
+  :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>
diff --git a/src/main.ts b/src/main.ts
index 3ea7939..d167d5a 100644
--- a/src/main.ts
+++ b/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";
diff --git a/src/style/dark.scss b/src/style/dark.scss
index e3fb371..f511ad3 100644
--- a/src/style/dark.scss
+++ b/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,
diff --git a/src/utils/message.ts b/src/utils/message.ts
new file mode 100644
index 0000000..86b631c
--- /dev/null
+++ b/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 };
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 87d1d0a..f5adbca 100644
--- a/src/views/login/index.vue
+++ b/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");
             });
           }
         });
diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts
index c94b652..b6d2891 100644
--- a/types/shims-vue.d.ts
+++ b/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";