feat: add @pureadmin/components

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;
+// }