perf: 优化归档页、标签页 UI

theme/src/client/components/PostList.vue

@@ -52,16 +52,20 @@ const {
 }
 
 .btn:hover {
-  color: var(--vp-c-brand-2);
+  color: var(--vp-c-bg);
+  background-color: var(--vp-c-brand-2);
   border-color: var(--vp-c-brand-2);
 }
-.btn[disabled] {
+.btn[disabled],
+.btn[disabled]:hover {
   color: var(--vp-c-gray-1);
   border-color: var(--vp-c-divider);
+  background-color: transparent;
+  cursor: not-allowed;
 }
 
 .page-info {
-  color: var(--vp-c-brand-2);
+  color: var(--vp-c-text-3);
   font-weight: 500;
 }
 </style>

theme/src/client/components/ShortPostList.vue

@@ -11,14 +11,16 @@ defineProps<{
 </script>
 
 <template>
-  <div class="post-list">
-    <p v-for="post in postList" :key="post.path">
-      <AutoLink class="post-title" :href="post.path">
-        {{ post.title }}
-      </AutoLink>
+  <ul class="post-list">
+    <li v-for="post in postList" :key="post.path">
+      <p class="post-title">
+        <AutoLink class="post-link" :href="post.path">
+          {{ post.title }}
+        </AutoLink>
+      </p>
       <span class="post-time">{{ post.createTime }}</span>
-    </p>
-  </div>
+    </li>
+  </ul>
 </template>
 
 <style scoped>
@@ -27,7 +29,7 @@ defineProps<{
   padding: 0 12px;
 }
 
-.post-list p {
+.post-list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -37,7 +39,7 @@ defineProps<{
 
 .post-list .post-title {
   flex: 1;
-  margin-right: 20px;
+  margin-right: 14px;
   font-weight: 600;
   transition: all var(--t-color);
   display: -webkit-box;
@@ -52,10 +54,10 @@ defineProps<{
   transition: all var(--t-color);
 }
 
-.post-list p:hover .post-title {
+.post-list li:hover .post-title {
   color: var(--vp-c-brand-1);
 }
-.post-list p:hover .post-time {
+.post-list li:hover .post-time {
   color: var(--vp-c-text-2);
 }
 </style>

theme/src/client/components/Tags.vue

@@ -8,7 +8,7 @@ const { tags: tagsLink } = useBlogExtract()
 </script>
 
 <template>
-  <div class="tags-wrapper">
+  <div class="tags-wrapper" :class="{ 'has-list': postList.length > 0 }">
     <h2 class="tags-title">
       <IconTag class="icon" />
       <span>{{ tagsLink.text }}</span>
@@ -22,26 +22,34 @@ const { tags: tagsLink } = useBlogExtract()
         @click="handleTagClick(tag.name)"
       >
         <span class="tag-name">{{ tag.name }}</span>
-        <span class="tag-count">({{ tag.count }})</span>
+        <span class="tag-count">{{ tag.count }}</span>
       </p>
     </div>
 
+    <h3 v-if="currentTag" class="tag-title">
+      {{ currentTag }}
+    </h3>
+
     <ShortPostList v-if="postList.length" :post-list="postList" />
   </div>
 </template>
 
 <style scoped>
 .tags-wrapper {
-  padding: 32px 24px;
+  padding: 32px 24px 168px;
   flex: 1;
 }
+
+.tags-wrapper.has-list {
+  padding-bottom: 64px;
+}
 .tags-title {
   display: flex;
   align-items: center;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--vp-c-brand-1);
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 .tags-title .icon {
   width: 1em;
@@ -55,20 +63,25 @@ const { tags: tagsLink } = useBlogExtract()
   align-items: center;
 }
 .tags .tag {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   word-wrap: break-word;
   margin: 8px;
-  padding: 2px 10px;
+  padding: 6px 6px 6px 10px;
   background-color: var(--vp-c-default-soft);
-  color: var(--vp-c-text-3);
+  color: var(--vp-c-text-2);
+  line-height: 1;
   border-radius: 4px;
   cursor: pointer;
   transition: all var(--t-color);
 }
-.tags .tag:hover,
-.tags .tag.active {
-  background-color: var(--vp-c-brand-1);
-  color: var(--vp-c-bg);
+
+.tag-title {
+  font-size: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding-bottom: 8px;
+  margin: 20px 12px -10px 12px;
 }
 
 .tag-name {
@@ -76,6 +89,22 @@ const { tags: tagsLink } = useBlogExtract()
 }
 
 .tag-count {
+  display: inline-block;
+  border-left: 1px solid var(--vp-c-divider);
+  padding-left: 6px;
   margin-left: 4px;
+  color: var(--vp-c-text-3);
+  transition: all var(--t-color);
+}
+
+.tags .tag:hover,
+.tags .tag.active {
+  background-color: var(--vp-c-brand-1);
+  color: var(--vp-c-bg);
+}
+
+.tags .tag:hover .tag-count,
+.tags .tag.active .tag-count {
+  color: var(--vp-bg);
 }
 </style>

theme/src/client/components/VFooter.vue

@@ -44,11 +44,12 @@ const { hasSidebar } = useSidebar()
 .plume-footer :deep(a) {
   text-decoration-line: underline;
   text-underline-offset: 2px;
-  transition: color 0.25s;
+  transition: color, text-underline-offset 0.25s;
 }
 
 .plume-footer :deep(a:hover) {
   color: var(--vp-c-text-1);
+  text-underline-offset: 4px;
 }
 
 @media (min-width: 768px) {

theme/src/client/composables/blog.ts

@@ -146,7 +146,7 @@ export function useTags() {
     }).map(item => ({
       title: item.title,
       path: item.path,
-      createTime: item.createTime.split(' ')[0],
+      createTime: item.createTime.split(' ')[0].replace(/\//g, '-'),
     }))
   }
 
@@ -178,7 +178,7 @@ export function useArchives() {
       current.list.push({
         title: item.title,
         path: item.path,
-        createTime: createTime.slice(year.length + 1),
+        createTime: createTime.slice(year.length + 1).replace(/\//g, '-'),
       })
     })