feat(theme): 调整主题样式

packages/theme/src/client/components/Archive.vue

@@ -145,7 +145,7 @@ const headers = computed(() => {
         padding: 0.5rem 1.25rem;
         background-color: var(--c-bg-container);
         border-radius: var(--p-around);
-        box-shadow: var(--shadow-sm);
+        // box-shadow: var(--shadow-sm);
         color: var(--c-text);
         transition: color var(--t-color), box-shadow var(--t-color);
       }
@@ -156,9 +156,9 @@ const headers = computed(() => {
           color: var(--c-text-accent);
         }
 
-        > a {
+        // > a {
-          box-shadow: var(--shadow);
+        // box-shadow: var(--shadow);
-        }
+        // }
 
         &::before {
           border-color: var(--c-text-accent);

packages/theme/src/client/components/BlogInfo.vue

@@ -21,6 +21,7 @@ const showInfo = computed(() => {
   margin-left: 1.25rem;
   position: sticky;
   top: calc(var(--navbar-height) + 1.25rem);
+  border-left: solid 1px var(--c-border);
 }
 
 @media (max-width: $MQMobile) {

packages/theme/src/client/components/BloggerInfo.vue

@@ -73,11 +73,15 @@ const postStat = usePostStat()
 <template>
   <DropdownTransition>
     <section class="blogger-info">
-      <p v-if="avatar.url" class="avatar-img">
+      <div class="blogger-profile">
-        <img :src="avatar.url" :alt="avatar.name" />
+        <p v-if="avatar.url" class="avatar-img">
-      </p>
+          <img :src="avatar.url" :alt="avatar.name" />
-      <h3>{{ avatar.name }}</h3>
+        </p>
-      <p>{{ avatar.description }}</p>
+        <div>
+          <h3>{{ avatar.name }}</h3>
+          <p>{{ avatar.description }}</p>
+        </div>
+      </div>
       <p class="blogger-social">
         <a
           v-for="item in socialList"
@@ -108,25 +112,36 @@ const postStat = usePostStat()
 <style lang="scss">
 .blogger-info {
   padding: 1.25rem;
-  border-radius: var(--p-around);
+  // border-radius: var(--p-around);
-  background-color: var(--c-bg-container);
+  // background-color: var(--c-bg-container);
-  box-shadow: var(--shadow);
+  // box-shadow: var(--shadow);
+
+  .blogger-profile {
+    display: flex;
+    align-items: center;
+
+    p {
+      font-size: 14px;
+    }
+  }
 
   .avatar-img {
-    padding-bottom: 0.8rem;
+    width: 30%;
+    padding-right: 0.8rem;
     img {
-      width: 75%;
+      width: 100%;
     }
   }
 
   p,
   h3 {
-    text-align: center;
+    text-align: left;
     margin: 0;
   }
 
   h3 {
     padding-bottom: 0.5rem;
+    font-size: 18px;
   }
 
   .blogger-social {
@@ -152,11 +167,12 @@ const postStat = usePostStat()
   }
 
   .post-stat {
-    display: flex;
+    // display: flex;
+    display: none;
     justify-content: space-around;
     align-items: center;
     border-top: 1px solid var(--c-border);
-    margin-top: 0.75rem;
+    margin-top: 1.75rem;
     padding-top: 1rem;
 
     .post-stat-item {

packages/theme/src/client/components/CategoryGroup.vue

@@ -56,7 +56,7 @@ const Heading: FunctionalComponent = () => {
   background-color: var(--c-bg-container);
   border-radius: var(--p-around);
   margin-bottom: 1.25rem;
-  box-shadow: var(--shadow);
+  // box-shadow: var(--shadow);
   transition: box-shadow var(--t-color);
 
   .category-group-wrapper {

packages/theme/src/client/components/DarkModeButton.vue

@@ -57,7 +57,6 @@ const toggleDarkMode = (): void => {
 <style lang="scss">
 .toggle-dark-button {
   display: flex;
-  margin: auto;
   margin-left: 1rem;
   border: 0;
   background: none;

packages/theme/src/client/components/Navbar.vue

@@ -48,15 +48,17 @@ onMounted(() => {
 <template>
   <header ref="navbar" class="navbar-wrapper">
     <ToggleSidebarButton @toggle="triggerAsideNavbar(true)" />
-    <span ref="navbarBrand">
+    <span ref="navbarBrand" class="navbar-brand-wrapper">
       <NavbarBrand />
     </span>
     <div class="navbar-items-wrapper" :style="linksWrapperStyle">
       <slot name="before" />
+      <div class="navbar-item-search">
+        <NavbarSearch />
+      </div>
       <NavbarItems class="can-hide" is-header />
       <slot name="after" />
       <DarkModeButton v-if="enableDarkMode" />
-      <NavbarSearch />
     </div>
   </header>
 </template>
@@ -74,15 +76,19 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 100v;
+  width: 100%;
   height: var(--navbar-height);
-  padding: var(--navbar-padding-v) var(--navbar-padding-h);
+  padding: 0 0 0 var(--navbar-padding-h);
   background-color: var(--c-bg-navbar);
   backdrop-filter: saturate(50%) blur(8px);
   // box-shadow: var(--shadow);
   line-height: var(--navbar-line-height);
   transition: background-color 0.3s ease;
 
+  .navbar-brand-wrapper {
+    display: inline-block;
+    height: 100%;
+  }
   .logo {
     height: var(--navbar-line-height);
     margin-right: var(--navbar-padding-v);
@@ -99,9 +105,17 @@ onMounted(() => {
 
   .navbar-items-wrapper {
     display: flex;
+    align-items: center;
+    flex-grow: 1;
     white-space: nowrap;
     font-size: 0.9rem;
-    height: var(--navbar-line-height);
+    height: 100%;
+    padding-right: var(--navbar-padding-h);
+
+    .navbar-item-search {
+      flex-grow: 1;
+      padding-left: 1.5rem;
+    }
 
     .search-box {
       flex: 0 0 auto;
@@ -134,6 +148,13 @@ onMounted(() => {
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
+    .navbar-items-wrapper {
+      justify-content: flex-end;
+      .navbar-item-search {
+        flex-grow: 0;
+      }
+    }
   }
 }
 </style>

packages/theme/src/client/components/NavbarBrand.vue

@@ -8,12 +8,17 @@ import {
 import { computed, h } from 'vue'
 import type { FunctionalComponent } from 'vue'
 import type { NavLink } from '../../shared'
-import { useDarkMode, useThemeLocaleData } from '../composables'
+import {
+  useDarkMode,
+  useSidebarIndex,
+  useThemeLocaleData,
+} from '../composables'
 
 const routeLocale = useRouteLocale()
 const siteLocale = useSiteLocaleData()
 const themeLocale = useThemeLocaleData()
 const isDarkMode = useDarkMode()
+const { hasSidebar } = useSidebarIndex()
 
 const navbarBrandLink = computed(
   () => (themeLocale.value.home as NavLink)?.link || routeLocale.value
@@ -40,7 +45,13 @@ const NavbarBrandLogo: FunctionalComponent = () => {
 </script>
 
 <template>
-  <RouterLink :to="navbarBrandLink">
+  <RouterLink
+    :to="navbarBrandLink"
+    :class="{
+      'navbar-brand': true,
+      'has-sidebar': hasSidebar,
+    }"
+  >
     <NavbarBrandLogo />
     <span
       v-if="navbarBrandTitle"
@@ -51,3 +62,15 @@ const NavbarBrandLogo: FunctionalComponent = () => {
     </span>
   </RouterLink>
 </template>
+<style lang="scss">
+.navbar-brand {
+  display: flex;
+  height: 100%;
+  align-items: center;
+
+  &.has-sidebar {
+    width: calc(18rem - var(--navbar-padding-h));
+    border-bottom: solid 1px var(--c-border);
+  }
+}
+</style>

packages/theme/src/client/components/NavbarDropdown.vue

@@ -4,7 +4,8 @@ import DropdownTransition from '@theme-plume/DropdownTransition.vue'
 import type { PropType } from 'vue'
 import { computed, ref, toRefs, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import type { NavbarItem, NavGroup, ResolveNavbarItem } from '../../shared'
+import { NavbarItem, NavGroup } from '../../shared'
+import type { ResolveNavbarItem } from '../../shared'
 
 const props = defineProps({
   item: {
@@ -312,7 +313,7 @@ const onGrandChildFocusout = (grandchild, child): void => {
       top: 100%;
       right: 0;
       box-sizing: border-box;
-      background-color: var(--c-bg-navbar);
+      background-color: var(--c-bg-container);
       padding: 0.6rem 0;
       border: 1px solid var(--c-border);
       border-bottom-color: var(--c-border-dark);

packages/theme/src/client/components/PageFooter.vue

@@ -34,7 +34,7 @@ const footer = computed(() => {
   width: 100%;
   padding: 1.25rem;
   background-color: var(--c-bg-container);
-  box-shadow: var(--shadow-footer);
+  // box-shadow: var(--shadow-footer);
   font-size: 0.875rem;
   text-align: center;
 

packages/theme/src/client/components/Pagination.vue

@@ -119,7 +119,7 @@ function handleJump(): void {
     flex: 1;
 
     button {
-      border-right: solid 1px var(--c-border);
+      // border-right: solid 1px var(--c-border);
 
       &:last-of-type {
         border-right: none;
@@ -136,7 +136,7 @@ function handleJump(): void {
     line-height: 2.125rem;
     border: solid 1px transparent;
     color: var(--c-text);
-    box-shadow: var(--shadow-sm);
+    // box-shadow: var(--shadow-sm);
 
     &:disabled {
       color: var(--c-text-accent);
@@ -172,8 +172,9 @@ function handleJump(): void {
       line-height: 2.125rem;
       border: solid 1px transparent;
       color: var(--c-text);
-      box-shadow: var(--shadow-sm);
+      // box-shadow: var(--shadow-sm);
       outline: 0;
+      background-color: var(--c-bg-light);
       margin-right: 0.5rem;
 
       &:focus {

packages/theme/src/client/components/PostList.vue

@@ -84,21 +84,27 @@ const togglePage = (currentPage: number): void => {
 @import '../styles/_variables';
 .post-list-wrapper {
   flex: 1;
+  padding-top: 4rem;
 
   .post-list-item {
     > div {
       position: relative;
       padding: 1.25rem 1.5rem;
+      padding-bottom: 3rem;
       background-color: var(--c-bg-container);
       border-radius: var(--p-around);
       margin-bottom: 1.25rem;
-      box-shadow: var(--shadow);
+      // box-shadow: var(--shadow);
       transition: box-shadow var(--t-color);
       overflow: hidden;
 
-      &:hover {
+      // &:hover {
-        box-shadow: var(--shadow-lg);
+      //   box-shadow: var(--shadow-lg);
-      }
+      // }
+    }
+
+    &:last-child > div {
+      padding-bottom: 1.5rem;
     }
 
     .top-icon {

packages/theme/src/client/components/Sidebar.vue

@@ -14,16 +14,14 @@ defineProps({
   },
 })
 const route = useRoute()
-const { sidebarList, initSidebarList } = useSidebarIndex()
+const { sidebarList } = useSidebarIndex()
 const { triggerAsideNavbar } = useAsideNavbar()
 watchEffect(() => {
-  initSidebarList(route.path)
   triggerAsideNavbar(false)
 })
 
 const el = ref<HTMLElement | null>(null)
 onMounted(() => {
-  initSidebarList(route.path)
   const activeEl = el.value?.querySelector<HTMLElement>('.router-link-active')
   activeEl && activeEl.scrollIntoView(false)
 })
@@ -45,6 +43,7 @@ onMounted(() => {
   position: sticky;
   top: calc(var(--navbar-height) + 1.25rem);
   width: 18rem;
+  flex-shrink: 0;
   height: calc(100vh - var(--navbar-height) - 1.25rem);
   border-right: solid 1px var(--c-border);
   font-size: 1.125rem;

packages/theme/src/client/components/Tag.vue

@@ -93,7 +93,7 @@ const handleTag = (tag: string): void => {
       background-color: var(--c-bg-lighter);
       cursor: pointer;
       color: #fff;
-      box-shadow: var(--shadow-sm);
+      // box-shadow: var(--shadow-sm);
     }
   }
 }

packages/theme/src/client/composables/sidebarIndex.ts

@@ -1,38 +1,43 @@
 import { sidebarIndex as sidebarIndexRaw } from '@internal/sidebarIndex.js'
-import { ref } from 'vue'
+import { usePageFrontmatter } from '@vuepress/client'
-import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import { useRoute } from 'vue-router'
 import type { SidebarOptions } from '../../shared'
 import { useThemeLocaleData } from './themeData'
 
 export type SidebarIndexRef = Ref<Record<string, SidebarOptions>>
 
-export type SidebarRef = Ref<SidebarOptions>
+export type SidebarRef = ComputedRef<SidebarOptions>
 
 export const sidebarIndex: SidebarIndexRef = ref(sidebarIndexRaw)
 
 interface UseSidebarIndex {
   sidebarList: SidebarRef
-  initSidebarList: (path: string) => void
+  hasSidebar: ComputedRef<boolean>
 }
 
 export const useSidebarIndex = (): UseSidebarIndex => {
-  const sidebarList: SidebarRef = ref([])
+  // const sidebarList: SidebarRef = ref([])
   const themeLocale = useThemeLocaleData()
-  const notes = themeLocale.value.notes
+  const route = useRoute()
-  function initSidebarList(path = ''): void {
+  const frontmatter = usePageFrontmatter()
-    if (!notes) return
+  const sidebarList = computed(() => {
+    const notes = themeLocale.value.notes
+    if (!notes) return []
     const prefix = notes.link?.replace(/^\/|\/$/g, '')
-    if (path.startsWith(`/${prefix}`)) {
+    if (route.path.startsWith(`/${prefix}`)) {
-      Object.keys(sidebarIndex.value).forEach((key) => {
+      const key = Object.keys(sidebarIndex.value).find((key) =>
-        if (path.startsWith(key)) {
+        route.path.startsWith(key)
-          sidebarList.value = sidebarIndex.value[key]
+      )
-        }
+      if (key) return sidebarIndex.value[key]
-      })
-    } else {
-      sidebarList.value = []
     }
-  }
+    return []
-  return { sidebarList, initSidebarList }
+  })
+  const hasSidebar = computed(() => {
+    return !frontmatter.value.home && sidebarList.value.length > 0
+  })
+  return { sidebarList, hasSidebar }
 }
 
 if (import.meta.hot) {

packages/theme/src/client/styles/_mixins.scss

@@ -1,6 +1,6 @@
 @import '_variables';
 
-@mixin  content_wrapper {
+@mixin content_wrapper {
   max-width: var(--content-width);
   margin: 0 auto;
   padding: 2rem 2.5rem;
@@ -14,7 +14,7 @@
   }
 }
 
-@mixin  dropdown_wrapper {
+@mixin dropdown_wrapper {
   transition: height 0.1s ease-out;
   overflow: hidden;
 }
@@ -33,6 +33,6 @@
 @mixin content {
   padding: 1.25rem;
   background-color: var(--c-bg-container);
-  border-radius: var(--p-around);
+  // border-radius: var(--p-around);
-  box-shadow: var(--shadow);
+  // box-shadow: var(--shadow);
 }

packages/theme/src/client/styles/vars-dark.scss

@@ -5,8 +5,8 @@ html.dark {
   --c-bg: #22272e;
   --c-bg-light: #2b313a;
   --c-bg-lighter: #262c34;
-  --c-bg-container: rgb(38, 44, 52);
+  --c-bg-container: #22272e;
-  --c-bg-navbar: rgba(38, 44, 52, 0.75);
+  --c-bg-navbar: rgba(34, 39, 46, 0.75);
 
   --c-text: #adbac7;
   --c-text-light: #96a7b7;

packages/theme/src/client/styles/vars.scss

@@ -4,7 +4,7 @@
   --c-brand-light: #2ca9e1;
 
   // background color
-  --c-bg: #f3f4f6;
+  --c-bg: #fff;
   --c-bg-light: #e5e7eb;
   --c-bg-lighter: #d1d5db;
   --c-bg-container: #fff;
@@ -90,7 +90,7 @@
   --content-note-width: 1000px;
 
   // search box vars
-  --search-bg-color: transparent;
+  --search-bg-color: var(--c-bg-container);
   --search-accent-color: var(--c-text-accent);
   --search-text-color: var(--c-text);
   --search-border-color: var(--c-border);

packages/theme/template/index.build.html

@@ -7,7 +7,7 @@
     <meta name="generator" content="VuePress {{ version }}">
     <style>
       :root {
-        --c-bg: rgba(0,0,0,0.15);
+        --c-bg: #fff;
       }
       html.dark {
         --c-bg: #22272e;

pnpm-lock.yaml

@@ -4769,8 +4769,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      is-text-path: 1.0.1
       JSONStream: 1.3.5
+      is-text-path: 1.0.1
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -7542,6 +7542,18 @@ packages:
       debug: 2.6.9
     dev: false
 
+  /follow-redirects/1.15.1_debug@4.3.4:
+    resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dependencies:
+      debug: 4.3.4
+    dev: false
+
   /for-in/1.0.2:
     resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==}
     engines: {node: '>=0.10.0'}
@@ -8466,7 +8478,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.1_debug@2.6.9
+      follow-redirects: 1.15.1_debug@4.3.4
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug