feat: 个人中心和通知浮窗

src/icons/comm.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#62A8FC" /><path d="M380.462545 271.872a75.892364 75.892364 0 0 0-0.442181 7.621818c0 35.316364 29.021091 64.186182 64.500363 64.186182H575.185455c35.490909 0 64.512-28.869818 64.512-64.186182 0-2.583273-0.128-5.108364-0.442182-7.621818h99.118545c12.672 0 25.344 12.672 25.402182 25.344v457.006545c0 12.741818-12.672 25.413818-25.344 25.413819h-457.076364C268.683636 779.636364 256 766.894545 256 754.222545V297.274182c0-12.730182 12.672-25.402182 25.344-25.402182z m233.867637 291.956364H393.053091c-14.091636 0-25.6 11.473455-25.6 25.390545 0 13.986909 11.566545 25.390545 25.6 25.390546h221.277091c14.091636 0 25.6-11.461818 25.6-25.390546 0-13.917091-11.508364-25.320727-25.6-25.378909z m0-139.636364H393.053091c-14.091636 0-25.6 11.473455-25.6 25.390545 0 13.986909 11.566545 25.390545 25.6 25.390546h221.277091c14.091636 0 25.6-11.461818 25.6-25.390546a25.541818 25.541818 0 0 0-25.6-25.378909zM570.065455 221.090909a41.483636 41.483636 0 0 1 41.355636 41.367273v6.132363a41.483636 41.483636 0 0 1-41.355636 41.355637H449.687273a41.483636 41.483636 0 0 1-41.355637-41.355637v-6.132363A41.483636 41.483636 0 0 1 449.687273 221.090909h120.389818z" fill="#FFFFFF" /></svg>

src/icons/exit.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712399022210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="56012" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M870.4 1024H153.6c-84.992 0-153.6-68.608-153.6-153.6V153.6C0 68.608 68.608 0 153.6 0h716.8c84.992 0 153.6 68.608 153.6 153.6v716.8c0 84.992-68.608 153.6-153.6 153.6" fill="#EF7052" p-id="56013"></path><path d="M511.488 799.232c-36.864 0-71.68-7.168-103.936-21.504-32.768-14.336-61.44-33.792-86.016-57.856-24.064-24.064-43.52-52.736-57.856-85.504-13.824-32.256-20.992-67.584-20.992-104.96 0-20.992 2.56-41.984 7.68-62.464s12.288-39.936 21.504-58.368c9.216-18.432 20.48-35.84 34.304-51.712 13.824-15.872 29.184-30.72 46.08-43.52 4.096-3.072 8.192-4.608 12.8-4.608 1.024 0 2.56 0 3.584 0.512 6.144 1.024 10.752 3.584 14.848 8.704 3.584 5.12 5.12 9.728 4.096 15.872-1.024 6.144-3.584 10.752-8.704 14.848-29.184 20.992-51.712 48.128-67.584 79.36-15.872 31.232-23.552 65.536-23.552 100.864 0 30.72 6.144 60.416 17.408 87.552 11.776 27.136 27.648 51.2 48.128 71.68s44.544 36.352 71.68 48.128c27.136 11.776 56.832 17.92 87.552 17.92 30.72 0 60.416-6.144 87.552-17.92 27.136-11.776 51.2-28.16 71.68-48.128 19.968-19.968 36.352-44.032 48.128-71.68 11.776-27.136 17.92-56.832 17.92-87.552 0-36.352-8.704-71.168-25.088-103.424-16.896-32.256-40.448-59.392-71.168-80.384-5.12-3.584-8.192-8.192-9.216-14.336-1.024-6.144 0-11.776 3.584-16.896 3.072-4.608 7.68-7.168 13.824-8.192 1.536-0.512 3.072-0.512 4.608-0.512 4.608 0 8.704 1.536 12.8 4.096 17.92 12.8 33.792 27.136 47.616 43.52 13.824 16.384 26.112 33.792 36.352 52.736 9.728 18.944 17.408 38.912 23.04 59.904 5.12 20.992 7.68 42.496 7.68 64 0 36.864-7.168 72.192-21.504 104.96-14.336 32.768-33.792 61.44-57.856 85.504-24.064 24.064-52.736 43.52-85.504 57.856-32.768 14.336-68.096 21.504-105.472 21.504z m0-286.208c-6.144 0-10.752-2.048-15.36-6.144-4.608-4.608-6.144-9.216-6.144-15.36V246.784c0-6.144 2.048-11.264 6.656-15.872 4.608-4.608 9.216-6.656 15.36-6.656 6.656 0 11.264 2.048 15.872 6.656 4.608 4.608 6.656 9.728 6.656 15.872V491.52c0 6.144-2.048 10.752-6.144 15.36-5.12 4.096-10.24 6.144-16.896 6.144z" fill="#FFFFFF" p-id="56014"></path></svg>

src/icons/form.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#F7A647" /><path d="M663.272727 244.363636a46.545455 46.545455 0 0 1 46.545455 46.545455v84.026182L465.501091 619.264a64 64 0 0 0-2.024727 88.389818l2.024727 2.117818a64 64 0 0 0 88.389818 2.024728l2.117818-2.024728L709.818182 555.950545V733.090909a46.545455 46.545455 0 0 1-46.545455 46.545455H279.272727a46.545455 46.545455 0 0 1-46.545454-46.545455V290.909091a46.545455 46.545455 0 0 1 46.545454-46.545455h384z m108.101818 160.046546a29.090909 29.090909 0 0 1 0.93091 39.633454l-1.44291 1.512728-238.545454 232.727272a29.090909 29.090909 0 0 1-42.065455-40.145454l1.431273-1.512727 238.545455-232.727273a29.090909 29.090909 0 0 1 41.134545 0.512zM401.454545 581.818182H314.181818l-1.745454 0.058182A23.272727 23.272727 0 0 0 314.181818 628.363636h87.272727l1.745455-0.058181A23.272727 23.272727 0 0 0 401.454545 581.818182z m64-110.545455H314.181818l-1.745454 0.058182A23.272727 23.272727 0 0 0 314.181818 517.818182h151.272727l1.745455-0.058182A23.272727 23.272727 0 0 0 465.454545 471.272727z m58.181819-116.363636H314.181818l-1.745454 0.058182A23.272727 23.272727 0 0 0 314.181818 401.454545h209.454546l1.745454-0.058181A23.272727 23.272727 0 0 0 523.636364 354.909091z" fill="#FFFFFF" /></svg>

src/icons/gitee.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712398314069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1658" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M312.07619 0h399.84762c109.714286 0 148.72381 12.190476 187.733333 31.695238 39.009524 21.942857 70.704762 53.638095 92.647619 92.647619S1024 204.8 1024 312.07619v399.84762c0 109.714286-12.190476 148.72381-31.695238 187.733333-21.942857 39.009524-53.638095 70.704762-92.647619 92.647619-39.009524 21.942857-78.019048 31.695238-187.733333 31.695238H312.07619c-109.714286 0-148.72381-12.190476-187.733333-31.695238s-70.704762-53.638095-92.647619-92.647619C12.190476 860.647619 0 819.2 0 711.92381V312.07619c0-109.714286 12.190476-148.72381 31.695238-187.733333s53.638095-70.704762 92.647619-92.647619S204.8 0 312.07619 0z" fill="#C71D23" p-id="1659"></path><path d="M755.809524 458.361905H482.742857c-12.190476 0-24.380952 9.752381-24.380952 24.380952v58.514286c0 12.190476 9.752381 24.380952 24.380952 24.380952h165.790476c12.190476 0 24.380952 9.752381 24.380953 24.380953v12.190476c0 39.009524-31.695238 70.704762-70.704762 70.704762h-226.742857c-12.190476 0-24.380952-9.752381-24.380953-24.380953v-226.742857c0-39.009524 31.695238-70.704762 70.704762-70.704762H755.809524c12.190476 0 24.380952-9.752381 24.380952-24.380952V268.190476c0-12.190476-9.752381-24.380952-24.380952-24.380952H421.790476c-97.52381 0-177.980952 80.457143-177.980952 177.980952V755.809524c0 12.190476 9.752381 24.380952 24.380952 24.380952h351.085714c87.771429 0 160.914286-73.142857 160.914286-160.914286v-136.533333c0-14.628571-9.752381-24.380952-24.380952-24.380952z" fill="#FFFFFF" p-id="1660"></path></svg>

src/icons/home.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 512c0 282.7776-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0s512 229.2224 512 512z" fill="#2962FF" /><path d="M493.5936 234.9056a39.3984 39.3984 0 0 1 36.608 0l1.9584 1.024 1.6384 1.536 243.7376 224.512a45.4144 45.4144 0 0 1 13.7344 49.024 36.8896 36.8896 0 0 1-35.6096 23.168H704V716.8a51.2 51.2 0 0 1-51.2 51.2h-76.8v-115.2a64 64 0 0 0-128 0v115.2h-76.8a51.2 51.2 0 0 1-51.2-51.2V534.1696h-54.2336a36.6336 36.6336 0 0 1-33.024-23.552 44.9536 44.9536 0 0 1 13.9136-48.896l244.992-225.792z" fill="#FFFFFF" /></svg>

src/icons/lock-pwd.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712398621145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="62205" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m282.482759 0l459.034482 0q282.482759 0 282.482759 282.482759l0 459.034482q0 282.482759-282.482759 282.482759l-459.034482 0q-282.482759 0-282.482759-282.482759l0-459.034482q0-282.482759 282.482759-282.482759Z" fill="#8B5AFF" p-id="62206"></path><path d="M557.267862 608.29131a51.694345 51.694345 0 1 0-77.470896 45.620966v60.345379a25.847172 25.847172 0 1 0 51.694344 0v-60.345379a52.18869 52.18869 0 0 0 25.776552-45.620966z m206.706759-105.931034v264.827586a78.81269 78.81269 0 0 1-77.682759 79.660138h-361.577931a78.81269 78.81269 0 0 1-77.682759-79.660138v-264.827586a78.81269 78.81269 0 0 1 77.682759-79.660138h361.754483a78.81269 78.81269 0 0 1 77.506207 79.660138z" fill="#FFFFFF" p-id="62207"></path><path d="M686.468414 396.429241h-77.682759v-28.848551c0-48.657655-13.34731-130.08331-103.353379-130.083311-93.431172 0-103.353379 90.888828-103.353379 130.083311v28.848551h-77.682759v-28.848551c0-127.470345 71.044414-209.743448 180.859586-209.743449s180.859586 82.273103 180.859586 209.743449v28.848551z" fill="#D4C2FF" p-id="62208"></path></svg>

src/icons/set.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#62A8FC" /><path d="M704.570182 266.554182l-90.216727 90.88 75.892363 77.533091 90.391273-91.054546c20.957091 51.688727 10.973091 113.384727-30.161455 155.403637-45.300364 46.277818-113.757091 53.480727-166.946909 22.830545l-38.458182 42.914909-28.066909 31.325091-183.970909 205.312a42.286545 42.286545 0 0 1-60.706909 0l-15.185454-15.511273a44.532364 44.532364 0 0 1 0-62.033454l209.559272-179.293091-139.182545-142.545455-43.938909-0.023272-50.850909-83.549091 40.96-41.902546 83.642182 52.282182 0.581818 43.985455 140.776727 144.384 40.96-35.048728c-40.029091-55.773091-35.863273-134.295273 13.498182-184.715636a137.402182 137.402182 0 0 1 151.424-31.173818zM651.636364 570.181818c64.267636 0 116.363636 52.096 116.363636 116.363637s-52.096 116.363636-116.363636 116.363636-116.363636-52.096-116.363637-116.363636 52.096-116.363636 116.363637-116.363637zM277.178182 746.007273c-8.378182 8.576-8.378182 22.458182 0 31.034182 8.378182 8.564364 21.969455 8.564364 30.370909 0 8.378182-8.564364 8.378182-22.458182 0-31.022546a21.154909 21.154909 0 0 0-30.370909 0z m364.765091-122.496a14.545455 14.545455 0 0 0-14.475637 13.067636l-0.069818 1.477818v74.053818l0.058182 1.396364a14.545455 14.545455 0 0 0 12.986182 13.067636l1.501091 0.081455h61.707636l1.396364-0.069818a14.545455 14.545455 0 0 0 13.067636-12.986182l0.081455-1.489455-0.069819-1.396363a14.545455 14.545455 0 0 0-12.986181-13.079273l-1.489455-0.069818h-47.173818v-59.508364l-0.058182-1.396363a14.545455 14.545455 0 0 0-14.475636-13.149091z" fill="#FFFFFF" /></svg>

src/icons/switch.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#3271FD" /><path d="M718.661818 232.727273a22.341818 22.341818 0 0 1 22.283637 20.677818l0.058181 1.664 0.011637 328.145454a61.463273 61.463273 0 0 1 0 114.501819l-0.011637 71.214545a22.341818 22.341818 0 0 1-44.625454 1.664l-0.058182-1.664v-71.214545a61.463273 61.463273 0 0 1 0-114.501819v-328.145454c0-12.334545 10.007273-22.341818 22.341818-22.341818z m-424.494545 0a22.341818 22.341818 0 0 1 22.283636 20.677818l0.058182 1.664v328.145454a61.463273 61.463273 0 0 1 0 114.501819v71.214545a22.341818 22.341818 0 0 1-44.625455 1.664l-0.058181-1.664-0.011637-71.214545a61.463273 61.463273 0 0 1 0-114.501819l0.011637-328.145454c0-12.334545 10.007273-22.341818 22.341818-22.341818z m212.247272 0a22.341818 22.341818 0 0 1 22.283637 20.677818l0.058182 1.664v81.221818a83.816727 83.816727 0 0 1 0 161.512727v271.127273a22.341818 22.341818 0 0 1-44.625455 1.664l-0.058182-1.664v-271.127273a83.816727 83.816727 0 0 1 0-161.512727v-81.221818c0-12.334545 10.007273-22.341818 22.341818-22.341818z" fill="#FFFFFF" /></svg>

src/icons/user.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712398376704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9740" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m372.363636 0l279.272728 0q372.363636 0 372.363636 372.363636l0 279.272728q0 372.363636-372.363636 372.363636l-279.272728 0q-372.363636 0-372.363636-372.363636l0-279.272728q0-372.363636 372.363636-372.363636Z" fill="#52B852" p-id="9741"></path><path d="M545.454545 488.727273c104.971636 13.218909 189.288727 86.074182 220.811637 181.864727 2.734545 8.308364 5.154909 18.862545 7.261091 31.674182A46.545455 46.545455 0 0 1 727.598545 756.363636H296.192a46.545455 46.545455 0 0 1-45.940364-54.039272c1.780364-10.914909 3.805091-20.014545 6.074182-27.322182C286.696727 577.047273 371.968 502.155636 478.545455 488.727273L512 555.636364zM512 555.636364l-33.454545 100.363636L512 689.454545l33.454545-33.454545L512 555.636364z m-66.909091-316.625455A133.818182 133.818182 0 0 1 645.818182 354.909091C645.818182 428.811636 585.890909 488.727273 512 488.727273s-133.818182-59.915636-133.818182-133.818182a133.818182 133.818182 0 0 1 66.909091-115.898182z" fill="#FFFFFF" p-id="9742"></path></svg>

src/layout/components/Header/components/Notice/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <a-tabs default-active-key="1">
+    <a-tab-pane v-for="item in noticeData" :key="item.id">
+      <template #title>{{ `${item.title}(${item.data.length})` }}</template>
+      <div class="notice" v-for="content in item.data" :key="content.id">
+        <a-image width="36" height="36" fit="cover" :src="Tom" class="notice_img" />
+        <div class="content margin-left-text">
+          <div>
+            <span>{{ content.nickname }}</span>
+            <span>{{ content.time }}</span>
+          </div>
+          <div></div>
+        </div>
+      </div>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script setup lang="ts">
+import Tom from "@/assets/img/tom.jpg";
+const data = ref([
+  { id: 100, img: "", time: "1分钟前", nickname: "兔子先森", content: "一键三连" },
+  { id: 120, img: "", time: "1小时前", nickname: "Crazy Cat's Eye", content: "中午吃什么？" },
+  { id: 130, img: "", time: "2小时前", nickname: "forever", content: "forever you" }
+]);
+const noticeData = ref([
+  {
+    id: 1,
+    title: "通知",
+    data: data.value
+  },
+  { id: 2, title: "消息", data: data.value },
+  { id: 3, title: "代办", data: [] }
+]);
+</script>
+
+<style lang="scss" scoped>
+.notice {
+  margin-bottom: $margin;
+  display: flex;
+  align-items: center;
+  .notice_img {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+  }
+  .content {
+    width: 120px;
+    border: 1px solid blue;
+  }
+}
+</style>

src/layout/components/Header/index.vue

@@ -42,13 +42,14 @@
           </template>
         </a-button>
       </a-tooltip>
-      <a-tooltip content="通知">
+      <a-popover position="bottom" trigger="click">
-        <a-button size="mini" type="text" class="icon_btn">
+        <a-button size="mini" type="text" class="icon_btn notice">
           <template #icon>
             <icon-notification :size="18" />
           </template>
         </a-button>
-      </a-tooltip>
+        <template #content><Notice /></template>
+      </a-popover>
       <a-tooltip content="全屏">
         <a-button size="mini" type="text" class="icon_btn">
           <template #icon>
@@ -73,7 +74,7 @@
       <!-- 我的 -->
       <a-dropdown trigger="hover">
         <div class="my_setting">
-          <a-image width="32" fit="contain" :src="Tom" class="my_image" />
+          <a-image width="32" height="32" fit="cover" :src="Tom" class="my_image" />
           <span>admin</span>
           <div class="icon_down">
             <icon-down style="stroke-width: 3" />
@@ -81,29 +82,29 @@
         </div>
         <template #content>
           <a-doption>
-            <template #icon>
+            <template #default>
-              <icon-location />
+              <SvgIcon :name="'user'" :size="18" />
+              <span class="margin-left-text">个人信息</span>
             </template>
-            <template #default>个人信息</template>
           </a-doption>
           <a-doption>
-            <template #icon>
+            <template #default>
-              <icon-location />
+              <SvgIcon :name="'lock-pwd'" :size="18" />
+              <span class="margin-left-text">修改密码</span>
             </template>
-            <template #default>修改密码</template>
           </a-doption>
           <a-doption>
-            <template #icon>
+            <template #default>
-              <icon-location />
+              <SvgIcon :name="'gitee'" :size="18" />
+              <span class="margin-left-text">项目地址</span>
             </template>
-            <template #default>项目地址</template>
           </a-doption>
           <a-divider margin="0" />
           <a-doption>
-            <template #icon>
+            <template #default>
-              <icon-location />
+              <SvgIcon :name="'exit'" :size="18" />
+              <span class="margin-left-text">退出登录</span>
             </template>
-            <template #default>退出登录</template>
           </a-doption>
         </template>
       </a-dropdown>
@@ -111,6 +112,7 @@
   </a-layout-header>
 </template>
 <script setup lang="ts">
+import Notice from "@/layout/components/Header/components/Notice/index.vue";
 import Tom from "@/assets/img/tom.jpg";
 </script>
 
@@ -159,9 +161,7 @@ import Tom from "@/assets/img/tom.jpg";
     }
 
     .my_setting {
-      // width: 32px;
       height: 32px;
-      // border-radius: 50%;
       margin-left: $margin;
       overflow: hidden;
       display: flex;
@@ -179,6 +179,20 @@ import Tom from "@/assets/img/tom.jpg";
     }
   }
 }
+.notice {
+  position: relative;
+  &::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    position: absolute;
+    right: -2px;
+    top: -4px;
+    background: $color-danger;
+  }
+}
 :deep(.arco-dropdown-open) {
   .icon_down {
     transform: rotate(180deg) !important;

src/layout/components/Tabs/index.vue

@@ -91,15 +91,7 @@ const handleDelete = (key: any) => {
     margin: 0 0 0 $margin;
     .setting {
       margin-right: $margin;
-      transform: rotate(0deg);
       color: $color-text-2;
-      // transition:
-      //   transform 0.2s,
-      //   color 0.2s;
-      // &:hover {
-      //   transform: rotate(180deg);
-      //   color: $color-primary;
-      // }
     }
   }
 }

src/style/global-style.scss

@@ -0,0 +1,9 @@
+/* global style scss */
+// 左间距-行内文字
+.margin-left-text {
+  margin-left: $margin-text;
+}
+// 右间距-行内文字
+.margin-right-text {
+  margin-right: $margin-text;
+}

src/style/global-theme.scss

@@ -1,6 +1,7 @@
 /* global css theme */
 
 $margin: 14px; // 盒子间距
+$margin-text: 8px; // 文字间距-行内
 $padding: 16px; // 盒子和内容的间距
 $radius-box: 4px; // 边框圆角
 $icon-box: 24px; // icon盒子通用大小

src/style/index.scss

@@ -1,6 +1,6 @@
 @import "./global-theme.scss";
 @import "./global-transition.scss";
-
+@import "./global-style.scss";
 * {
   margin: 0;
   padding: 0;