feat: add @pureadmin/components

package.json

@@ -30,6 +30,7 @@
     "@ctrl/tinycolor": "^3.4.0",
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
+    "@pureadmin/components": "^0.0.9",
     "@vueuse/core": "^7.7.0",
     "@vueuse/motion": "^2.0.0-beta.9",
     "@vueuse/shared": "^7.7.0",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   "@iconify/vue": ^3.1.3
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
+  "@pureadmin/components": ^0.0.9
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
   "@types/lodash-es": ^4.17.6
@@ -104,6 +105,7 @@ dependencies:
   "@ctrl/tinycolor": 3.4.0
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
+  "@pureadmin/components": 0.0.9_vue@3.2.31
   "@vueuse/core": 7.7.0_vue@3.2.31
   "@vueuse/motion": 2.0.0-beta.9_vue@3.2.31
   "@vueuse/shared": 7.7.0_vue@3.2.31
@@ -218,6 +220,37 @@ packages:
       "@jridgewell/trace-mapping": 0.3.4
     dev: true
 
+  /@ant-design/colors/5.1.1:
+    resolution:
+      {
+        integrity: sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==
+      }
+    dependencies:
+      "@ctrl/tinycolor": 3.4.0
+    dev: false
+
+  /@ant-design/icons-svg/4.2.1:
+    resolution:
+      {
+        integrity: sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
+      }
+    dev: false
+
+  /@ant-design/icons-vue/6.0.1_vue@3.2.31:
+    resolution:
+      {
+        integrity: sha512-HigIgEVV6bbcrz2A92/qDzi/aKWB5EC6b6E1mxMB6aQA7ksiKY+gi4U94TpqyEIIhR23uaDrjufJ+xCZQ+vx6Q==
+      }
+    peerDependencies:
+      vue: ">=3.0.3"
+    dependencies:
+      "@ant-design/colors": 5.1.1
+      "@ant-design/icons-svg": 4.2.1
+      "@types/lodash": 4.14.179
+      lodash: 4.17.21
+      vue: 3.2.31
+    dev: false
+
   /@antfu/utils/0.5.0:
     resolution:
       {
@@ -1110,6 +1143,19 @@ packages:
       }
     dev: false
 
+  /@pureadmin/components/0.0.9_vue@3.2.31:
+    resolution:
+      {
+        integrity: sha512-WCxmnKRDwB+51aEFHr5snIytDCjJuovucfQhVJroQleFYsFga+aYKwmvIRFutOkqVa5hndUXLcUm9k8oTKngcQ==
+      }
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      "@ant-design/icons-svg": 4.2.1
+      "@ant-design/icons-vue": 6.0.1_vue@3.2.31
+      vue: 3.2.31
+    dev: false
+
   /@rollup/plugin-node-resolve/13.1.3:
     resolution:
       {
@@ -1202,7 +1248,6 @@ packages:
       {
         integrity: sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
       }
-    dev: true
 
   /@types/minimatch/3.0.5:
     resolution:

src/layout/components/notice/index.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import NoticeList from "./noticeList.vue";
 import { noticesData } from "./data";
+import NoticeList from "./noticeList.vue";
+import { templateRef } from "@vueuse/core";
+import { Tabs, TabPane } from "@pureadmin/components";
 
+const dropdownDom = templateRef<ElRef | null>("dropdownDom", null);
 const activeName = ref(noticesData[0].name);
 const notices = ref(noticesData);
 
@@ -10,10 +13,15 @@ let noticesNum = ref(0);
 notices.value.forEach(notice => {
   noticesNum.value += notice.list.length;
 });
+
+function tabClick() {
+  // @ts-expect-error
+  dropdownDom.value.handleOpen();
+}
 </script>
 
 <template>
-  <el-dropdown trigger="click" placement="bottom-end">
+  <el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
     <span class="dropdown-badge">
       <el-badge :value="noticesNum" :max="99">
         <el-icon class="header-notice-icon"
@@ -23,25 +31,33 @@ notices.value.forEach(notice => {
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-tabs v-model="activeName" class="dropdown-tabs">
+        <Tabs
+          centered
+          class="dropdown-tabs"
+          v-model:activeName="activeName"
+          @tabClick="tabClick"
+        >
           <template v-for="item in notices" :key="item.key">
-            <el-tab-pane
-              :label="`${item.name}(${item.list.length})`"
-              :name="item.name"
-            >
+            <TabPane :tab="`${item.name}(${item.list.length})`">
               <el-scrollbar max-height="330px">
                 <div class="noticeList-container">
                   <NoticeList :list="item.list" />
                 </div>
               </el-scrollbar>
-            </el-tab-pane>
+            </TabPane>
           </template>
-        </el-tabs>
+        </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;
@@ -79,4 +95,8 @@ notices.value.forEach(notice => {
     padding: 15px 24px 0 24px;
   }
 }
+
+:deep(.ant-tabs-nav) {
+  margin-bottom: 0;
+}
 </style>

src/layout/components/notice/noticeItem.vue

@@ -10,8 +10,8 @@ const props = defineProps({
 });
 
 const titleRef = ref(null);
-const descriptionRef = ref(null);
 const titleTooltip = ref(false);
+const descriptionRef = ref(null);
 const descriptionTooltip = ref(false);
 
 function hoverTitle() {

src/layout/components/notice/noticeList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PropType } from "vue";
-import NoticeItem from "./noticeItem.vue";
 import { ListItem } from "./data";
+import NoticeItem from "./noticeItem.vue";
 
 const props = defineProps({
   list: {

src/main.ts

@@ -13,6 +13,7 @@ import "animate.css";
 import "virtual:windi.css";
 // 导入公共样式
 import "./style/index.scss";
+import "@pureadmin/components/dist/index.min.css";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";

src/style/index.scss

@@ -93,3 +93,29 @@ ul {
 .mobile-spacing {
   margin: 0;
 }
+
+// @pureadmin/components 样式覆盖
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: var(--el-color-primary) !important;
+}
+.ant-tabs-ink-bar {
+  background: var(--el-color-primary) !important;
+}
+.ant-tabs-tab,
+.ant-tabs-tab-btn {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+// .ant-tabs-tab-btn:focus,
+// .ant-tabs-tab-remove:focus,
+// .ant-tabs-tab-btn:active,
+// .ant-tabs-tab-remove:active {
+//   color: var(--el-color-primary) !important;
+// }
+// .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+//   color: var(--el-color-primary) !important;
+// }
+// .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
+//   color: var(--el-color-primary) !important;
+// }