From 2abdb84ae83f7bbc2f9502a42e70583a2f6fa4b6 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 31 Dec 2023 00:12:03 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/Tags.vue | 18 +++++++++---------
 theme/src/client/composables/blog.ts |  5 +++--
 theme/src/client/utils/color.ts      | 17 +++++++++++++++++
 theme/src/client/utils/index.ts      |  1 +
 4 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 theme/src/client/utils/color.ts

diff --git a/theme/src/client/components/Tags.vue b/theme/src/client/components/Tags.vue
index ae64dc71..26a0d738 100644
--- a/theme/src/client/components/Tags.vue
+++ b/theme/src/client/components/Tags.vue
@@ -19,6 +19,7 @@ const { tags: tagsLink } = useBlogExtract()
         :key="tag.name"
         class="tag"
         :class="{ active: tag.name === currentTag }"
+        :style="{ '--vp-tag-color': tag.color }"
         @click="handleTagClick(tag.name)"
       >
         <span class="tag-name">{{ tag.name }}</span>
@@ -68,8 +69,10 @@ const { tags: tagsLink } = useBlogExtract()
   word-wrap: break-word;
   margin: 8px;
   padding: 6px 6px 6px 10px;
-  background-color: var(--vp-c-default-soft);
-  color: var(--vp-c-text-2);
+  /* background-color: var(--vp-c-default-soft); */
+  /* color: var(--vp-c-text-2); */
+  color: var(--vp-tag-color);
+  border: solid 1px var(--vp-tag-color);
   line-height: 1;
   border-radius: 4px;
   cursor: pointer;
@@ -84,27 +87,24 @@ const { tags: tagsLink } = useBlogExtract()
   margin: 20px 12px -10px 12px;
 }
 
-.tag-name {
-  font-weight: 600;
-}
-
 .tag-count {
   display: inline-block;
-  border-left: 1px solid var(--vp-c-divider);
+  border-left: 1px solid var(--vp-tag-color);
   padding-left: 6px;
   margin-left: 4px;
-  color: var(--vp-c-text-3);
+  color: var(--vp-tag-color);
   transition: all var(--t-color);
 }
 
 .tags .tag:hover,
 .tags .tag.active {
-  background-color: var(--vp-c-brand-1);
+  background-color: var(--vp-tag-color);
   color: var(--vp-c-bg);
 }
 
 .tags .tag:hover .tag-count,
 .tags .tag.active .tag-count {
   color: var(--vp-bg);
+  border-left-color: var(--vp-c-divider);
 }
 </style>
diff --git a/theme/src/client/composables/blog.ts b/theme/src/client/composables/blog.ts
index 1d6789a6..deca7db4 100644
--- a/theme/src/client/composables/blog.ts
+++ b/theme/src/client/composables/blog.ts
@@ -4,7 +4,7 @@ import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 import type { PlumeThemeBlogPostItem } from '../../shared/index.js'
 import { useLocaleLink, useThemeLocaleData } from '../composables/index.js'
-import { toArray } from '../utils/index.js'
+import { getRandomColor, toArray } from '../utils/index.js'
 
 export function usePostListControl() {
   const locale = usePageLang()
@@ -129,7 +129,8 @@ export function useTags() {
     })
     return Object.keys(tagMap).map(tag => ({
       name: tag,
-      count: tagMap[tag],
+      count: tagMap[tag] > 99 ? '99+' : tagMap[tag],
+      color: getRandomColor(),
     }))
   })
 
diff --git a/theme/src/client/utils/color.ts b/theme/src/client/utils/color.ts
new file mode 100644
index 00000000..0bf7541c
--- /dev/null
+++ b/theme/src/client/utils/color.ts
@@ -0,0 +1,17 @@
+const colorList = [
+  'var(--vp-c-brand-1)',
+  'var(--vp-c-brand-2)',
+  'var(--vp-c-green-1)',
+  'var(--vp-c-green-2)',
+  'var(--vp-c-green-3)',
+  'var(--vp-c-yellow-1)',
+  'var(--vp-c-yellow-2)',
+  'var(--vp-c-yellow-3)',
+  'var(--vp-c-red-1)',
+  'var(--vp-c-red-2)',
+  'var(--vp-c-red-3)',
+]
+
+export function getRandomColor() {
+  return colorList[Math.floor(Math.random() * colorList.length)]
+}
diff --git a/theme/src/client/utils/index.ts b/theme/src/client/utils/index.ts
index 14a67353..938922a1 100644
--- a/theme/src/client/utils/index.ts
+++ b/theme/src/client/utils/index.ts
@@ -5,3 +5,4 @@ export * from './dom.js'
 export * from './resolveEditLink.js'
 export * from './resolveRepoType.js'
 export * from './base.js'
+export * from './color.js'