perf: 改版博客文章列表页UI，贴合设计趋势

theme/src/client/components/BackToTop.vue

@@ -77,8 +77,8 @@ function handleClick() {
 .back-to-top-button {
   position: fixed;
   inset-inline-end: 1rem;
-  right: 20px;
-  bottom: 64px;
+  right: 24px;
+  bottom: calc(var(--vp-footer-height, 82px) - 18px);
   z-index: var(--vp-z-index-back-to-top);
   width: 36px;
   height: 36px;
@@ -140,6 +140,7 @@ function handleClick() {
 
 @media (min-width: 768px) {
   .back-to-top-button {
+    bottom: calc(var(--vp-footer-height, 88px) - 24px);
     width: 48px;
     height: 48px;
   }

theme/src/client/components/Blog.vue

@@ -12,16 +12,22 @@ const page = usePageData<PlumeThemePageData>()
 
 <template>
   <div class="blog-wrapper">
-    <PostList v-if="page.type === 'blog'" />
-    <Tags v-if="page.type === 'blog-tags'" />
-    <Archives v-if="page.type === 'blog-archives'" />
-    <BlogAside />
-    <BlogExtract />
+    <div class="blog-container">
+      <PostList v-if="page.type === 'blog'" />
+      <Tags v-if="page.type === 'blog-tags'" />
+      <Archives v-if="page.type === 'blog-archives'" />
+      <BlogAside />
+      <BlogExtract />
+    </div>
   </div>
 </template>
 
 <style scoped>
 .blog-wrapper {
+  min-height: calc(100vh - var(--vp-footer-height, 0px));
+}
+
+.blog-container {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -30,15 +36,31 @@ const page = usePageData<PlumeThemePageData>()
   margin: 0 auto;
 }
 
+@media (min-width: 768px) {
+  .blog-wrapper {
+    min-height: calc(100vh + var(--vp-nav-height) - var(--vp-footer-height, 0px));
+  }
+
+  .blog-wrapper {
+    padding-top: var(--vp-nav-height);
+    margin-top: calc(var(--vp-nav-height) * -1);
+    background-color: var(--vp-c-bg-alt);
+  }
+}
+
 @media (min-width: 960px) {
   .blog-wrapper {
+    min-height: calc(100vh - var(--vp-footer-height, 0px));
+  }
+
+  .blog-container {
     max-width: 784px;
     padding-top: 0;
   }
 }
 
 @media (min-width: 1440px) {
-  .blog-wrapper {
+  .blog-container {
     max-width: 1104px;
   }
 }

theme/src/client/components/BlogAside.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { useBlogExtract, useThemeLocaleData } from '../composables/index.js'
 import AutoLink from './AutoLink.vue'
 import IconArchive from './icons/IconArchive.vue'
 import IconTag from './icons/IconTag.vue'
+import IconChevronRight from './icons/IconChevronRight.vue'
 
 const theme = useThemeLocaleData()
+const route = useRoute()
 
 const avatar = computed(() => theme.value.avatar)
 const { hasBlogExtract, tags, archives } = useBlogExtract()
@@ -14,7 +17,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
 <template>
   <div v-if="avatar" class="blog-aside-wrapper">
     <div class="avatar-profile">
-      <p v-if="avatar.url">
+      <p v-if="avatar.url" :class="{ circle: avatar.circle }">
         <img :src="avatar.url" :alt="avatar.name">
       </p>
       <div>
@@ -23,13 +26,25 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
       </div>
     </div>
     <div v-if="hasBlogExtract" class="blog-nav">
-      <AutoLink class="nav-link" :href="tags.link">
-        <IconTag class="icon" />
-        <span>{{ tags.text }}</span>
+      <AutoLink
+        class="nav-link"
+        :class="{ active: route.path === tags.link }"
+        :href="tags.link"
+      >
+        <IconTag class="icon icon-logo" />
+        <span class="text">{{ tags.text }}</span>
+        <span class="total">{{ tags.total }}</span>
+        <IconChevronRight class="icon" />
       </AutoLink>
-      <AutoLink class="nav-link" :href="archives.link">
-        <IconArchive class="icon" />
-        <span>{{ archives.text }}</span>
+      <AutoLink
+        class="nav-link"
+        :class="{ active: route.path === archives.link }"
+        :href="archives.link"
+      >
+        <IconArchive class="icon icon-logo" />
+        <span class="text">{{ archives.text }}</span>
+        <span class="total">{{ archives.total }}</span>
+        <IconChevronRight class="icon" />
       </AutoLink>
     </div>
   </div>
@@ -41,17 +56,15 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   top: calc(var(--vp-nav-height) + 2rem);
   display: none;
   width: 270px;
-  padding: 1rem 0;
-  margin-top: 2rem;
-  margin-bottom: 12rem;
-  margin-left: 2rem;
+  margin: 2rem 1rem 0 2rem;
   text-align: center;
-  border-left: solid 1px var(--vp-c-divider);
 }
 
 .blog-aside-wrapper img {
-  width: 50%;
+  width: 60%;
   margin: auto;
+
+  object-fit: cover;
 }
 
 .blog-aside-wrapper h3 {
@@ -60,39 +73,74 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   font-weight: 600;
 }
 
-@media (min-width: 768px) {
-  .blog-aside-wrapper {
-    display: block;
-  }
+.avatar-profile {
+  padding: 24px 20px;
+  margin-bottom: 24px;
+  background-color: var(--vp-c-bg);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-2);
+}
+
+.avatar-profile .circle img {
+  overflow: hidden;
+  border-radius: 50%;
 }
 
 .blog-nav {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-  padding: 10px 12px 0;
-  margin: 24px 24px 0;
-  border-top: solid 1px var(--vp-c-divider);
+  padding: 0;
+  text-align: left;
 }
 
 .nav-link {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 3px;
-  font-weight: 600;
-  color: var(--vp-c-brand-1);
+  justify-content: flex-start;
+  padding: 10px 14px 10px 20px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-bg);
   border-radius: 8px;
-  transition: all var(--t-color);
+  box-shadow: var(--vp-shadow-2);
+  transition: color var(--t-color);
 }
 
-.nav-link:hover {
-  color: var(--vp-c-brand-2);
+.nav-link:hover,
+.nav-link.active {
+  color: var(--vp-c-brand-1);
+}
+
+.nav-link .text {
+  flex: 1;
+  min-width: 0;
+  padding-right: 14px;
+}
+
+.nav-link .total {
+  padding-right: 8px;
+  color: var(--vp-c-text-3);
 }
 
 .nav-link .icon {
   width: 1em;
   height: 1em;
-  margin-right: 4px;
+  font-size: 1.2em;
+  color: var(--vp-c-text-3);
+}
+
+.nav-link .icon-logo {
+  margin-right: 10px;
+  color: var(--vp-c-brand-1);
+}
+
+@media (min-width: 768px) {
+  .blog-aside-wrapper {
+    margin: 2rem 1rem 2rem 1.25rem;
+  }
+
+  .blog-aside-wrapper {
+    display: block;
+  }
 }
 </style>

theme/src/client/components/Flyout/index.vue

@@ -129,7 +129,7 @@ export default {
   display: flex;
   align-items: center;
   height: var(--vp-nav-height);
-  padding: 0 12px;
+  padding: 0 10px;
   color: var(--vp-c-text-1);
   transition: color 0.5s;
 }

theme/src/client/components/Friends.vue

@@ -45,11 +45,18 @@ const list = computed(() => matter.value.list || [])
 <style scoped>
 .friends-wrapper {
   width: 100%;
+  min-height: calc(100vh - var(--vp-footer-height, 0px));
   padding-top: var(--vp-nav-height);
   padding-bottom: 5rem;
   margin: 0 auto;
 }
 
+@media (min-width: 960px) {
+  .friends-wrapper {
+    min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
+  }
+}
+
 .friends-wrapper .title {
   padding-top: 3rem;
   padding-left: 1rem;

theme/src/client/components/Nav/NavBarMenuLink.vue

@@ -32,7 +32,7 @@ const page = usePageData()
 .navbar-menu-link {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 10px;
   font-size: 14px;
   font-weight: 500;
   line-height: var(--vp-nav-height);

theme/src/client/components/PageMeta.vue

@@ -5,14 +5,15 @@ import type {
   PlumeThemePageData,
   PlumeThemePostFrontmatter,
 } from '../../shared/index.js'
-import { useReadingTime } from '../composables/index.js'
+import { useExtraBlogData, useReadingTime } from '../composables/index.js'
 import IconBooks from './icons/IconBooks.vue'
 import IconClock from './icons/IconClock.vue'
 import IconTag from './icons/IconTag.vue'
 
 const page = usePageData<PlumeThemePageData>()
 const matter = usePageFrontmatter<PlumeThemePostFrontmatter>()
 const readingTime = useReadingTime()
+const extraData = useExtraBlogData()
 
 const createTime = computed(() => {
   if (matter.value.createTime)
@@ -26,8 +27,12 @@ const categoryList = computed(() => {
 })
 
 const tags = computed(() => {
-  if (matter.value.tags)
-    return matter.value.tags.slice(0, 4)
+  if (matter.value.tags) {
+    return matter.value.tags.slice(0, 4).map(tag => ({
+      name: tag,
+      colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]],
+    }))
+  }
 
   return []
 })
@@ -59,9 +64,13 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
     </p>
     <p v-if="tags.length > 0">
       <IconTag class="icon" />
-      <span v-for="(tag, index) in tags" :key="tag" class="tag">
-        {{ tag }}
-        <template v-if="index < tags.length - 1">,</template>
+      <span
+        v-for="tag in tags"
+        :key="tag.name"
+        class="tag"
+        :style="{ '--vp-tag-color': tag.colors[0], '--vp-tag-bg-color': tag.colors[2] }"
+      >
+        {{ tag.name }}
       </span>
     </p>
     <p v-if="createTime" class="create-time">
@@ -129,11 +138,12 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
 
 .page-meta-wrapper .tag {
   display: inline-block;
-  padding: 3px;
+  padding: 3px 5px;
+  margin-right: 6px;
   line-height: 1;
-  color: var(--vp-c-text-2);
-  background-color: var(--vp-c-mute);
-  border-radius: 4px;
+  color: var(--vp-tag-color);
+  background-color: var(--vp-tag-bg-color);
+  border-radius: 3px;
 }
 
 .page-meta-wrapper .tag:last-of-type {