perf: 优化 标签 UI

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>

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(),
     }))
   })
 

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)]
+}

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'