chore(package): update to version 26.1.30(268)

.vitepress/theme/components/ArticleMasonry.vue

@@ -253,93 +253,95 @@ const clearTags = () => {
           </div>
 
           <Transition name="expand" mode="out-in">
-            <aside v-if="isSettingsOpen" ref="settingsPanelRef" class="panel">
-              <div class="section">
-                <div class="section-header">
-                  <h6>排序</h6>
-                </div>
-                <div class="page-size-options">
-                  <MaterialButton
-                    :color="sortField === 'date' ? 'filled' : 'tonal'"
-                    size="s"
-                    class="group horizontal"
-                    icon="acute"
-                    @click="sortField = 'date'"
-                  >
-                    时间
-                  </MaterialButton>
-                  <MaterialButton
-                    :color="sortField === 'title' ? 'filled' : 'tonal'"
-                    size="s"
-                    class="group horizontal"
-                    icon="match_case"
-                    @click="sortField = 'title'"
-                  >
-                    标题
-                  </MaterialButton>
-                  <div>
+            <aside v-if="isSettingsOpen" class="panel">
+              <div ref="settingsPanelRef" class="container">
+                <div class="section">
+                  <div class="section-header">
+                    <h6>排序</h6>
+                  </div>
+                  <div class="page-size-options">
                     <MaterialButton
-                      :icon="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
-                      color="tonal"
+                      :color="sortField === 'date' ? 'filled' : 'tonal'"
                       size="s"
-                      @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'"
+                      class="group horizontal"
+                      icon="acute"
+                      @click="sortField = 'date'"
                     >
-                      {{ sortOrder === "asc" ? "正序" : "倒序" }}
+                      时间
+                    </MaterialButton>
+                    <MaterialButton
+                      :color="sortField === 'title' ? 'filled' : 'tonal'"
+                      size="s"
+                      class="group horizontal"
+                      icon="match_case"
+                      @click="sortField = 'title'"
+                    >
+                      标题
+                    </MaterialButton>
+                    <div>
+                      <MaterialButton
+                        :icon="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
+                        color="tonal"
+                        size="s"
+                        @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'"
+                      >
+                        {{ sortOrder === "asc" ? "正序" : "倒序" }}
+                      </MaterialButton>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="section">
+                  <div class="section-header">
+                    <h6>每页显示</h6>
+                  </div>
+                  <div class="page-size-options">
+                    <MaterialButton
+                      v-for="opt in pageSizeOptions"
+                      :key="opt"
+                      :color="pageSize === opt ? 'filled' : 'tonal'"
+                      :icon="pageSize === opt ? 'check' : ''"
+                      class="group horizontal"
+                      size="s"
+                      @click="pageSize = opt"
+                    >
+                      {{ opt }}
                     </MaterialButton>
                   </div>
                 </div>
-              </div>
 
-              <div class="section">
-                <div class="section-header">
-                  <h6>每页显示</h6>
+                <div class="section">
+                  <div class="section-header">
+                    <h6>分类 <span v-if="selectedCategory" @click="selectedCategory = ''">clear</span></h6>
+                  </div>
+                  <div class="chip-container">
+                    <MaterialChip
+                      v-for="cat in postsStore.allCategories"
+                      :key="cat"
+                      :color="selectedCategory === cat ? 'tonal' : 'outlined'"
+                      :icon="selectedCategory === cat ? 'check' : ''"
+                      @click="toggleCategory(cat)"
+                    >
+                      {{ cat }}
+                    </MaterialChip>
+                  </div>
                 </div>
-                <div class="page-size-options">
-                  <MaterialButton
-                    v-for="opt in pageSizeOptions"
-                    :key="opt"
-                    :color="pageSize === opt ? 'filled' : 'tonal'"
-                    :icon="pageSize === opt ? 'check' : ''"
-                    class="group horizontal"
-                    size="s"
-                    @click="pageSize = opt"
-                  >
-                    {{ opt }}
-                  </MaterialButton>
-                </div>
-              </div>
 
-              <div class="section">
-                <div class="section-header">
-                  <h6>分类 <span v-if="selectedCategory" @click="selectedCategory = ''">clear</span></h6>
-                </div>
-                <div class="chip-container">
-                  <MaterialChip
-                    v-for="cat in postsStore.allCategories"
-                    :key="cat"
-                    :color="selectedCategory === cat ? 'tonal' : 'outlined'"
-                    :icon="selectedCategory === cat ? 'check' : ''"
-                    @click="toggleCategory(cat)"
-                  >
-                    {{ cat }}
-                  </MaterialChip>
-                </div>
-              </div>
-
-              <div class="section">
-                <div class="section-header">
-                  <h6>标签 <span v-if="selectedTags.length" @click="clearTags">clear</span></h6>
-                </div>
-                <div class="chip-container">
-                  <MaterialChip
-                    v-for="tag in postsStore.allTags"
-                    :key="tag"
-                    :color="selectedTags.includes(tag) ? 'tonal' : 'outlined'"
-                    :icon="selectedTags.includes(tag) ? 'check' : ''"
-                    @click="toggleTag(tag)"
-                  >
-                    {{ tag }}
-                  </MaterialChip>
+                <div class="section">
+                  <div class="section-header">
+                    <h6>标签 <span v-if="selectedTags.length" @click="clearTags">clear</span></h6>
+                  </div>
+                  <div class="chip-container">
+                    <MaterialChip
+                      v-for="tag in postsStore.allTags"
+                      :key="tag"
+                      :color="selectedTags.includes(tag) ? 'tonal' : 'outlined'"
+                      :icon="selectedTags.includes(tag) ? 'check' : ''"
+                      @click="toggleTag(tag)"
+                    >
+                      {{ tag }}
+                    </MaterialChip>
+                  </div>
                 </div>
               </div>
             </aside>

.vitepress/theme/components/NavBar.vue

@@ -6,14 +6,19 @@ import { useGlobalData } from "../composables/useGlobalData";
 import { useNavStateStore } from "../stores/navState";
 import { useScreenWidthStore } from "../stores/screenWidth";
 import { useSearchStateStore } from "../stores/searchState";
+import { useThemeStateStore } from "../stores/themeState";
 
 const { page, theme } = useGlobalData();
 const screenWidthStore = useScreenWidthStore();
 const searchStateStore = useSearchStateStore();
 const navStateStore = useNavStateStore();
+const themeStateStore = useThemeStateStore();
 
+/** 标签动画状态 */
 const isLabelAnimating = ref(false);
+/** 清理函数列表 */
 const cleanupFunctions: Array<() => void> = [];
+/** 已观察元素集合 */
 const observedElements = new WeakSet<HTMLElement>();
 
 /**
@@ -32,17 +37,18 @@ function observeWidth(el: HTMLElement, parentSelector: string) {
       parentSelector,
       ignoreParentLimit: true, // 允许撑开父级
     },
-    [el]
+    [el],
   );
   cleanupFunctions.push(cleanup);
 }
 
-// 计算 Segments
+/** 计算导航分段数据 */
 const navSegment = computed(() => {
   const items = theme.value.navSegment;
   return Array.isArray(items) && items.length > 0 ? items : [];
 });
 
+/** 计算导航栏容器类名 */
 const navClass = computed(() => {
   let baseClass = "";
   if (screenWidthStore.screenWidth > 840) {
@@ -56,14 +62,15 @@ const navClass = computed(() => {
   return `${baseClass} ${expansionClass}`;
 });
 
+/** 计算标签类名 */
 const labelClass = computed(() => [
   navStateStore.isNavExpanded ? "right" : "bottom",
   isLabelAnimating.value ? "animating" : "",
 ]);
 
 /**
- * 规范化路径，去除 /index.md、.md、.html 后缀及末尾斜杠
- * @param path
+ * 规范化路径，去除后缀及末尾斜杠
+ * @param path 原始路径
  */
 function normalizePath(path: string): string {
   return path.replace(/(\/index)?\.(md|html)$/, "").replace(/\/$/, "");
@@ -71,7 +78,7 @@ function normalizePath(path: string): string {
 
 /**
  * 检查链接是否为当前活动页面的链接
- * @param link
+ * @param link 目标链接
  */
 function isActive(link: string): boolean {
   const currentPath = normalizePath(page.value.relativePath);
@@ -81,7 +88,7 @@ function isActive(link: string): boolean {
 
 /**
  * 检查链接是否为外部链接
- * @param link
+ * @param link 目标链接
  */
 function isExternalLink(link: string): boolean {
   return /^https?:\/\//.test(link);
@@ -89,7 +96,7 @@ function isExternalLink(link: string): boolean {
 
 /**
  * 切换搜索栏状态
- * @param event
+ * @param event 鼠标事件
  */
 function toggleSearch(event: MouseEvent) {
   event.stopPropagation();
@@ -97,21 +104,29 @@ function toggleSearch(event: MouseEvent) {
 }
 
 /**
- * 切换导航栏状态
- * @param event
+ * 切换导航栏展开状态
+ * @param event 鼠标事件
  */
 function toggleNav(event: MouseEvent) {
   event.stopPropagation();
-  // 暂时只有在屏幕宽度大于断点时才能切换导航栏状态
   if (screenWidthStore.isAboveBreakpoint) {
     navStateStore.toggle();
   }
 }
 
+/**
+ * 切换颜色偏好 (自动/亮/暗)
+ * @param event 鼠标事件
+ */
+function toggleTheme(event: MouseEvent) {
+  event.stopPropagation();
+  themeStateStore.cycleTheme();
+}
+
 /**
  * 设置 label 引用并初始化观察器
- * @param el
- * @param parentSelector
+ * @param el DOM 元素
+ * @param parentSelector 父级选择器
  */
 function setLabelRef(el: any, parentSelector: string) {
   if (el instanceof HTMLElement) {
@@ -120,8 +135,8 @@ function setLabelRef(el: any, parentSelector: string) {
 }
 
 /**
- * 处理动画结束
- * @param el
+ * 处理动画结束事件
+ * @param el 事件目标
  */
 function onAnimationEnd(el: EventTarget | null) {
   if (el) {
@@ -129,7 +144,7 @@ function onAnimationEnd(el: EventTarget | null) {
   }
 }
 
-/** 监听状态变化，触发宽度计算 */
+/** 监听导航栏展开状态，触发重绘和动画 */
 watch(
   () => [navStateStore.isNavExpanded],
   () => {
@@ -137,13 +152,14 @@ watch(
     nextTick(() => {
       window.dispatchEvent(new Event("resize"));
     });
-  }
+  },
 );
 
 if (isClient()) {
   onMounted(() => {
     screenWidthStore.init();
     navStateStore.init();
+    themeStateStore.init();
 
     nextTick(() => {
       window.dispatchEvent(new Event("resize"));
@@ -185,6 +201,18 @@ if (isClient()) {
         </a>
       </div>
     </div>
+
+    <div class="actions">
+      <MaterialButton
+        class="theme-btn"
+        size="m"
+        color="text"
+        :title="themeStateStore.currentLabel"
+        :icon="themeStateStore.currentIcon"
+        @click="toggleTheme"
+      >
+      </MaterialButton>
+    </div>
   </nav>
 </template>
 

.vitepress/theme/stores/navState.ts

@@ -11,7 +11,7 @@ import { useScreenWidthStore } from "./screenWidth";
 /** 导出 */
 export const useNavStateStore = defineStore("navState", () => {
   const isNavExpanded = ref<boolean>(false);
-  const cookieName = "nav-expanded";
+  const cookieName = "navbar_expanded";
   const screenWidthStore = useScreenWidthStore();
 
   /** 初始从 Cookie 读取状态 */
@@ -36,7 +36,7 @@ export const useNavStateStore = defineStore("navState", () => {
                 isNavExpanded.value = true;
                 stop();
               }
-            }
+            },
           );
         }
       } else {
@@ -91,7 +91,7 @@ export const useNavStateStore = defineStore("navState", () => {
       if (!isAbove) {
         isNavExpanded.value = false;
       }
-    }
+    },
   );
 
   return {

.vitepress/theme/stores/themeState.ts

@@ -0,0 +1,90 @@
+/**
+ * 颜色主题偏好管理
+ */
+
+import { defineStore } from "pinia";
+import { ref, computed, watch } from "vue";
+import { usePreferredDark } from "@vueuse/core";
+import { setCookie, getCookie } from "../utils/cookie";
+import { isClient } from "../utils/env";
+
+export type ThemePreference = "auto" | "light" | "dark";
+
+export const useThemeStateStore = defineStore("themeState", () => {
+  /** 系统是否偏好深色模式 */
+  const systemDark = usePreferredDark();
+
+  /** 用户当前的偏好设置 */
+  const preference = ref<ThemePreference>("auto");
+
+  /** 计算当前实际生效的颜色模式 */
+  const isDarkActive = computed(() => {
+    if (preference.value === "auto") {
+      return systemDark.value;
+    }
+    return preference.value === "dark";
+  });
+
+  /** 初始化颜色主题，从 Cookie 读取配置，默认为 auto */
+  const init = () => {
+    const stored = getCookie("theme_preference");
+    if (stored === "light" || stored === "dark" || stored === "auto") {
+      preference.value = stored;
+    }
+  };
+
+  /** 监听实际生效的深色状态变化，操作 DOM */
+  watch(
+    isDarkActive,
+    (isDark) => {
+      if (isClient()) {
+        document.documentElement.classList.toggle("dark", isDark);
+      }
+    },
+    { immediate: true },
+  );
+
+  /** 监听用户偏好变化，持久化到 Cookie */
+  watch(preference, (val) => {
+    setCookie("theme_preference", val);
+  });
+
+  /** 切换主题模式 */
+  const cycleTheme = () => {
+    const modes: ThemePreference[] = ["auto", "light", "dark"];
+    const nextIndex = (modes.indexOf(preference.value) + 1) % modes.length;
+    preference.value = modes[nextIndex];
+  };
+
+  /** 当前状态对应的图标 */
+  const currentIcon = computed(() => {
+    switch (preference.value) {
+      case "light":
+        return "light_mode";
+      case "dark":
+        return "dark_mode";
+      default:
+        return "brightness_auto";
+    }
+  });
+
+  /** 当前状态对应的文本标签 */
+  const currentLabel = computed(() => {
+    switch (preference.value) {
+      case "light":
+        return "亮色模式";
+      case "dark":
+        return "深色模式";
+      default:
+        return "跟随系统";
+    }
+  });
+
+  return {
+    preference,
+    currentIcon,
+    currentLabel,
+    init,
+    cycleTheme,
+  };
+});

.vitepress/theme/styles/components/ArticleMasonry.scss

@@ -20,28 +20,32 @@
       position: relative;
 
       .panel {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-
         position: absolute;
         left: -12px;
         top: -12px;
 
-        padding: 24px;
-
-        max-width: 520px;
-        min-width: 340px;
-
-        border-radius: var(--md-sys-shape-corner-extra-large);
-
-        background-color: var(--md-sys-color-surface-container-low);
-
-        box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);
-        overflow-y: overlay;
-        transform-origin: 0px 0px;
+        transform-origin: top left;
         z-index: 100;
 
+        .container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+
+          padding: 24px;
+
+          max-width: 520px;
+          min-width: 340px;
+
+          border-radius: var(--md-sys-shape-corner-extra-large);
+
+          background-color: var(--md-sys-color-surface-container-low);
+
+          box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);
+          overflow-y: overlay;
+          transform-origin: top left;
+        }
+
         .section {
           h6 {
             display: inline-flex;
@@ -52,6 +56,9 @@
 
             margin-block-end: 12px;
 
+            user-select: none;
+            -moz-user-select: none;
+
             span {
               @include mixin.material-symbols($size: 16);
 
@@ -73,6 +80,36 @@
             gap: 4px;
           }
         }
+
+        @media screen and (max-width: 1600px) {
+          left: 0px;
+          top: 0px;
+        }
+
+        @media screen and (max-width: 840px) {
+          position: fixed;
+          left: 0px;
+          top: 0px;
+
+          height: 100%;
+          width: 100%;
+
+          backdrop-filter: brightness(0.5);
+          transform-origin: center center;
+          z-index: 999;
+
+          .container {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+
+            max-width: 380px;
+            min-width: 330px;
+
+            transform-origin: center center;
+            translate: -50% -50%;
+          }
+        }
       }
     }
   }
@@ -148,20 +185,27 @@
 
   .expand-enter-active,
   .expand-leave-active {
-    transition:
-      transform var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
-      opacity var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+    transition: opacity var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+
+    .container {
+      transition: transform var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial);
+    }
   }
 
   .expand-enter-from,
   .expand-leave-to {
     opacity: 0;
     pointer-events: none;
-    transform: scale(0.8);
+
+    .container {
+      transform: scale(0.8);
+    }
   }
 
   .expand-enter-to,
   .expand-leave-from {
-    transform: scale(1);
+    .container {
+      transform: scale(1);
+    }
   }
 }

.vitepress/theme/styles/components/NavBar.scss

@@ -44,7 +44,8 @@
       background-color: var(--md-sys-color-secondary-container);
 
       cursor: pointer;
-      transition: grid var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
+      transition:
+        grid var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
         gap var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
       overflow: hidden;
 
@@ -57,7 +58,9 @@
         width: 56px;
 
         text-align: center;
-        font-variation-settings: "FILL" 1, "wght" 300;
+        font-variation-settings:
+          "FILL" 1,
+          "wght" 300;
 
         transition: font-variation-settings var(--md-sys-motion-spring-fast-spatial-duration)
           var(--md-sys-motion-spring-fast-spatial);
@@ -77,11 +80,15 @@
       }
 
       &:hover span {
-        font-variation-settings: "FILL" 1, "wght" 600;
+        font-variation-settings:
+          "FILL" 1,
+          "wght" 600;
       }
 
       &:active span {
-        font-variation-settings: "FILL" 1, "wght" 200;
+        font-variation-settings:
+          "FILL" 1,
+          "wght" 200;
       }
     }
   }
@@ -104,7 +111,8 @@
 
         position: relative;
 
-        transition: grid var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
+        transition:
+          grid var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
           gap var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
       }
 
@@ -122,7 +130,8 @@
         border-radius: var(--md-sys-shape-corner-full);
 
         overflow: hidden;
-        transition: height var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
+        transition:
+          height var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
           width var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);
         z-index: 1;
 
@@ -135,7 +144,9 @@
           span {
             @include mixin.material-symbols();
 
-            font-variation-settings: "FILL" 1, "wght" 300;
+            font-variation-settings:
+              "FILL" 1,
+              "wght" 300;
 
             transition: font-variation-settings var(--md-sys-motion-spring-fast-spatial-duration)
               var(--md-sys-motion-spring-fast-spatial);
@@ -195,7 +206,8 @@
         border-radius: var(--md-sys-shape-corner-full);
 
         pointer-events: none;
-        transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
+        transition:
+          background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
           height var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
           width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
         z-index: 0;
@@ -220,19 +232,40 @@
       }
 
       &.inactive .accent .icon span {
-        font-variation-settings: "FILL" 0, "wght" 200;
+        font-variation-settings:
+          "FILL" 0,
+          "wght" 200;
       }
 
       &:hover .accent .icon span {
-        font-variation-settings: "FILL" 1, "wght" 400;
+        font-variation-settings:
+          "FILL" 1,
+          "wght" 400;
       }
 
       &:active .accent .icon span {
-        font-variation-settings: "FILL" 1, "wght" 200;
+        font-variation-settings:
+          "FILL" 1,
+          "wght" 200;
       }
     }
   }
 
+  .actions {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    margin-block: 24px;
+
+    width: 100%;
+
+    @media screen and (max-width: 840px) {
+      display: none;
+    }
+  }
+
   &.bar {
     flex-direction: row;
 
@@ -310,6 +343,12 @@
             height: 40px;
             width: 100%;
           }
+
+          @media screen and (max-width: 840px) {
+            .label {
+              @include mixin.typescale-style("label-large");
+            }
+          }
         }
       }
     }
@@ -474,11 +513,9 @@
         }
       }
     }
-  }
-}
 
-@media screen and (max-width: 840px) {
-  .NavBar.rail {
-    display: none;
+    @media screen and (max-width: 840px) {
+      display: none;
+    }
   }
 }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sendevia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "26.1.18(262)",
+  "version": "26.1.30(268)",
   "scripts": {
     "update-version": "bash ./scripts/update-version.sh",
     "docs:dev": "vitepress dev",
@@ -13,7 +13,7 @@
     "pinia": "^3.0.4"
   },
   "devDependencies": {
-    "@mdit/plugin-align": "^0.22.2",
+    "@mdit/plugin-align": "^0.23.0",
     "@mdit/plugin-footnote": "^0.22.3",
     "@mdit/plugin-tasklist": "^0.22.2",
     "markdown-it-anchor": "^9.2.0",