yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

perf: 优化 标签 UI

Browse Source
This commit is contained in:
pengzhanbo 2023-12-31 00:12:03 +08:00
parent fd550e460b
commit 2abdb84ae8
4 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
theme/src/client/components/Tags.vue
View File

@ -19,6 +19,7 @@ const { tags: tagsLink } = useBlogExtract()
:key="tag.name" :key="tag.name"
class="tag" class="tag"
:class="{ active: tag.name === currentTag }" :class="{ active: tag.name === currentTag }"
:style="{ '--vp-tag-color': tag.color }"
@click="handleTagClick(tag.name)" @click="handleTagClick(tag.name)"
> >
<span class="tag-name">{{ tag.name }}</span> <span class="tag-name">{{ tag.name }}</span>
@ -68,8 +69,10 @@ const { tags: tagsLink } = useBlogExtract()
word-wrap: break-word; word-wrap: break-word;
margin: 8px; margin: 8px;
padding: 6px 6px 6px 10px; padding: 6px 6px 6px 10px;
background-color: var(--vp-c-default-soft); /* background-color: var(--vp-c-default-soft); */
color: var(--vp-c-text-2); /* color: var(--vp-c-text-2); */
color: var(--vp-tag-color);
border: solid 1px var(--vp-tag-color);
line-height: 1; line-height: 1;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@ -84,27 +87,24 @@ const { tags: tagsLink } = useBlogExtract()
margin: 20px 12px -10px 12px; margin: 20px 12px -10px 12px;
} }
.tag-name {
font-weight: 600;
}
.tag-count { .tag-count {
display: inline-block; display: inline-block;
border-left: 1px solid var(--vp-c-divider); border-left: 1px solid var(--vp-tag-color);
padding-left: 6px; padding-left: 6px;
margin-left: 4px; margin-left: 4px;
color: var(--vp-c-text-3); color: var(--vp-tag-color);
transition: all var(--t-color); transition: all var(--t-color);
} }
.tags .tag:hover, .tags .tag:hover,
.tags .tag.active { .tags .tag.active {
background-color: var(--vp-c-brand-1); background-color: var(--vp-tag-color);
color: var(--vp-c-bg); color: var(--vp-c-bg);
} }
.tags .tag:hover .tag-count, .tags .tag:hover .tag-count,
.tags .tag.active .tag-count { .tags .tag.active .tag-count {
color: var(--vp-bg); color: var(--vp-bg);
border-left-color: var(--vp-c-divider);
} }
</style> </style>

5
theme/src/client/composables/blog.ts
View File

@ -4,7 +4,7 @@ import { computed, ref } from 'vue'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import type { PlumeThemeBlogPostItem } from '../../shared/index.js' import type { PlumeThemeBlogPostItem } from '../../shared/index.js'
import { useLocaleLink, useThemeLocaleData } from '../composables/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() { export function usePostListControl() {
const locale = usePageLang() const locale = usePageLang()
@ -129,7 +129,8 @@ export function useTags() {
}) })
return Object.keys(tagMap).map(tag => ({ return Object.keys(tagMap).map(tag => ({
name: tag, name: tag,
count: tagMap[tag], count: tagMap[tag] > 99 ? '99+' : tagMap[tag],
color: getRandomColor(),
})) }))
}) })

17
theme/src/client/utils/color.ts Normal file
View File

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

1
theme/src/client/utils/index.ts
View File

@ -5,3 +5,4 @@ export * from './dom.js'
export * from './resolveEditLink.js' export * from './resolveEditLink.js'
export * from './resolveRepoType.js' export * from './resolveRepoType.js'
export * from './base.js' export * from './base.js'
export * from './color.js'