From 9c2b0f30e8926f331fa6f70170d19a8b51356000 Mon Sep 17 00:00:00 2001
From: studentsning <2300382007@qq.com>
Date: Thu, 9 Jan 2025 09:21:37 +0800
Subject: [PATCH] =?UTF-8?q?recall=20=E2=AD=90=20=E5=9B=9E=E6=BA=AF?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BECard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/theme/index.js |  3 ---
 docs/components/Label.vue      | 48 ++++++++++++++++++++++------------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index a0acd94..5af28f8 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -6,11 +6,9 @@ import UpdatedTime from '../../components/UpdatedTime.vue';
 import WordCount from '../../components/WordCount.vue';
 import Home from '../../components/Home.vue';
 import Layout from '../../components/Layout.vue';
-import { ElTag } from 'element-plus';
 // css
 import '@fortawesome/fontawesome-free/css/all.css';
 import '../style.css'; // 引入 Tailwind CSS
-import 'element-plus/es/components/tag/style/css';
 
 export default {
     ...DefaultTheme,
@@ -19,6 +17,5 @@ export default {
         app.component('WordCount', WordCount);
         app.component('Home', Home);
         app.component('Layout', Layout);
-        app.component('ElTag', ElTag); // 标签
     },
 };
\ No newline at end of file
diff --git a/docs/components/Label.vue b/docs/components/Label.vue
index 7ac7cc0..f69e4df 100644
--- a/docs/components/Label.vue
+++ b/docs/components/Label.vue
@@ -3,9 +3,12 @@
     <span class="text-sm">🏷 标签</span>
 
     <div class="flex flex-wrap items-center gap-x-2 gap-y-6 text-xs mt-2">
-      <el-tag :type="getType(index)" v-for="(label, index) in Labels" effect="dark">{{
-        label
-      }}</el-tag>
+      <span
+        :class="bgHandle(index)"
+        style="padding: 2px 8px; cursor: pointer"
+        v-for="(label, index) in Labels"
+        >{{ label }}</span
+      >
     </div>
   </div>
 </template>
@@ -16,19 +19,13 @@ import { ref, onMounted } from "vue";
 
 const Labels = ref<string[]>([]);
 
-const getType = (index: number) => {
-  const types = ["primary", "success", "warning", "danger", "info"];
-  if (index % 1 === 0) {
-    return types[index % types.length];
-  } else if (index % 2 === 0) {
-    return types[index % types.length];
-  } else if (index % 3 === 0) {
-    return types[index % types.length];
-  } else if (index % 4 === 0) {
-    return types[index % types.length];
-  } else {
-    return types[index % types.length];
-  }
+const bgHandle = (i: number) => {
+  let className = "";
+  if (i % 1 === 0) className = "note-1 br "; // 1的倍数
+  if (i % 2 === 0) className = "note-2 br"; // 2的倍数
+  if (i % 3 === 0) className = "note-3 br"; // 3的倍数
+  if (i % 4 === 0) className = "note-4 br"; // 4的倍数
+  return className;
 };
 
 onMounted(async () => {
@@ -36,3 +33,22 @@ onMounted(async () => {
   Labels.value = res.labels;
 });
 </script>
+
+<style>
+/* 不同颜色的便签 */
+.note-1 {
+  color: #4caf50; /* 绿色 */
+}
+
+.note-2 {
+  color: #2196f3; /* 蓝色 */
+}
+
+.note-3 {
+  color: #ff9800; /* 橙色 */
+}
+
+.note-4 {
+  color: #f44336; /* 红色 */
+}
+</style>