chore(package): update to version 26.2.25(298)

.vitepress/config.ts

@@ -1,15 +1,17 @@
 import { defineConfig } from "vitepress";
 import packageJson from "../package.json";
 
-// markdown-it plugins
-// https://mdit-plugins.github.io/zh/align.html
-import { align } from "@mdit/plugin-align";
 // https://github.com/valeriangalliat/markdown-it-anchor
 import anchor from "markdown-it-anchor";
+// markdown-it plugins
+// https://mdit-plugins.github.io/align.html
+import { align } from "@mdit/plugin-align";
 // https://mdit-plugins.github.io/footnote.html
 import { footnote } from "@mdit/plugin-footnote";
 // https://mdit-plugins.github.io/tasklist.html
 import { tasklist } from "@mdit/plugin-tasklist";
+// https://mdit-plugins.github.io/img-mark.html
+import { imgMark } from "@mdit/plugin-img-mark";
 import { wrapHeadingsAsSections } from "./theme/utils/sectionWrapper";
 
 export default defineConfig({
@@ -42,6 +44,7 @@ export default defineConfig({
       md.use(footnote);
       md.use(wrapHeadingsAsSections);
       md.use(tasklist, { label: true });
+      md.use(imgMark);
     },
     image: {
       lazyLoading: true,
@@ -94,6 +97,7 @@ export default defineConfig({
     navSegment: [
       { text: "首页", icon: "home", link: "/" },
       { text: "AincradMix", icon: "borg", link: "/posts/AincradMix" },
+      { text: "组件", icon: "code_blocks", link: "/posts/组件" },
       {
         text: "作品集",
         icon: "auto_awesome_mosaic",

.vitepress/theme/components/ButtonGroup.vue

@@ -1,33 +1,62 @@
 <script setup lang="ts">
+/** 外部链接类型定义 */
 interface ExternalLink {
-  type: string;
-  label: string;
-  link: string;
+  ariaLabel?: string;
+  color?: string;
+  icon?: string;
+  label?: string;
+  link?: string;
+  size?: "xs" | "s" | "m" | "l" | "xl";
+  target?: string;
+  type?: string;
+  onClick?: (e?: Event) => void;
 }
 
+/** 组件属性定义 */
 interface Props {
+  ariaLabel?: string;
+  color?: string;
+  icon?: string;
+  layout?: "horizontal" | "vertical";
   links?: ExternalLink[];
   size?: "xs" | "s" | "m" | "l" | "xl";
-  layout?: "horizontal" | "vertical";
+  target?: string;
 }
 
+/** 组件属性默认值 */
 const props = withDefaults(defineProps<Props>(), {
+  layout: "horizontal",
   links: () => [],
   size: "s",
-  layout: "horizontal",
 });
 
-const getButtonColor = (type: string) => {
+/** 组件事件定义 */
+const emit = defineEmits<{
+  (e: "click", event: Event, item: ExternalLink, index: number): void;
+}>();
+
+/**
+ * 根据按钮类型获取对应的颜色
+ * @param type 按钮类型
+ * @returns 对应的颜色
+ */
+const getButtonColor = (type?: string): string => {
   switch (type) {
     case "download":
-      return "tonal";
+      return "filled";
     case "normal":
-    default:
       return "tonal";
+    default:
+      return "text";
   }
 };
 
-const getButtonIcon = (type: string) => {
+/**
+ * 根据按钮类型获取对应的图标
+ * @param type 按钮类型
+ * @returns 对应的图标名称
+ */
+const getButtonIcon = (type?: string): string => {
   switch (type) {
     case "download":
       return "download";
@@ -37,22 +66,37 @@ const getButtonIcon = (type: string) => {
       return "";
   }
 };
+
+/**
+ * 处理按钮点击事件
+ * @param e 事件对象
+ * @param item 链接对象
+ * @param index 索引
+ */
+const handleClick = (e: Event, item: ExternalLink, index: number) => {
+  if (item.onClick) {
+    item.onClick(e);
+  }
+  emit("click", e, item, index);
+};
 </script>
 
 <template>
-  <div v-if="links && links.length > 0" class="ButtonGroup" :class="[props.size, props.layout]">
+  <div class="ButtonGroup" :class="[props.size, props.layout]" :aria-label="props.ariaLabel">
     <MaterialButton
       v-for="(item, index) in links"
+      :key="index"
       class="group"
       :class="props.layout"
-      :key="index"
       :href="item.link"
-      :size="props.size"
-      :color="getButtonColor(item.type)"
-      :icon="getButtonIcon(item.type)"
-      :target="'_blank'"
+      :size="item.size || props.size"
+      :color="item.color || props.color || getButtonColor(item.type)"
+      :icon="item.icon || props.icon || getButtonIcon(item.type)"
+      :target="item.target || props.target || (item.link ? '_blank' : undefined)"
+      :aria-label="item.ariaLabel || props.ariaLabel || item.label"
+      @click="handleClick($event, item, index)"
     >
-      {{ item.label }}
+      <template v-if="item.label">{{ item.label }}</template>
     </MaterialButton>
   </div>
 </template>

.vitepress/theme/components/Footer.vue

@@ -28,7 +28,7 @@ const siteVersion = theme.value.siteVersion;
       </div>
       <div class="beian-info">
         <div class="beian-gongan">
-          <img src="/assets/images/beian.png" loading="eager" />
+          <img src="/assets/images/beian.webp" loading="eager" />
           <a href="https://beian.mps.gov.cn/#/query/webSearch?code=23020002230215" target="_blank"
             >黑公网安备23020002230215</a
           >

.vitepress/theme/components/Header.vue

@@ -217,79 +217,87 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <header ref="headerRef" class="Header">
-    <div class="carousel-container" :impression-color="frontmatter.color">
-      <template v-if="hasMultiple">
-        <div class="stage" :style="{ '--carousel-duration': `${animDuration}ms` }">
-          <div v-for="slot in slotStates" :key="slot.id" class="item" :class="slot.className" :style="{ order: slot.order }">
-            <img :src="slot.imgUrl" />
+  <Transition name="header" mode="in-out" :duration="10000" appear>
+    <header ref="headerRef" class="Header">
+      <div class="carousel-container" :impression-color="frontmatter.color">
+        <template v-if="hasMultiple">
+          <div class="stage" :style="{ '--carousel-duration': `${animDuration}ms` }">
+            <div
+              v-for="slot in slotStates"
+              :key="slot.id"
+              class="item"
+              :class="slot.className"
+              :style="{ order: slot.order }"
+            >
+              <img :src="slot.imgUrl" />
+            </div>
           </div>
-        </div>
-        <div class="progress-ring">
-          <svg width="24" height="24" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="9" fill="none" stroke="var(--md-sys-color-tertiary-container)" stroke-width="5" />
-            <circle
-              cx="12"
-              cy="12"
-              r="9"
-              fill="none"
-              stroke="var(--md-sys-color-tertiary)"
-              stroke-width="5"
-              stroke-linecap="round"
-              :style="{
-                strokeDasharray: `${2 * Math.PI * 9}`,
-                strokeDashoffset: `${2 * Math.PI * 9 * (1 - progress / 100)}`,
-                transition: isFastForwarding ? 'none' : 'stroke-dashoffset 100ms linear',
-              }"
-            />
-          </svg>
-        </div>
-        <div class="controls">
-          <div class="prev" title="上一张" @click="handleNav(-1)"></div>
-          <div class="next" title="下一张" @click="handleNav(1)"></div>
-        </div>
-        <div class="indicators">
-          <button
-            v-for="(_, idx) in rawImgList"
-            :key="idx"
-            class="dot"
-            :class="{ active: currentRealIndex === idx }"
-            @click="jumpTo(idx)"
-          ></button>
-        </div>
-      </template>
-      <template v-else>
-        <ClientOnly>
-          <svg width="0" height="0" style="display: none">
-            <defs>
-              <filter id="noise-filter" x="0" y="0" width="100%" height="100%">
-                <feTurbulence
-                  :seed="frontmatter.date ? new Date(frontmatter.date).getTime() : 0"
-                  type="turbulence"
-                  baseFrequency="0.15"
-                  numOctaves="2"
-                  stitchTiles="stitch"
-                ></feTurbulence>
-                <feColorMatrix type="saturate" values="1"></feColorMatrix>
-                <feComponentTransfer>
-                  <feFuncA type="discrete" tableValues="0 0.1"></feFuncA>
-                </feComponentTransfer>
-                <feBlend mode="multiply" in2="SourceGraphic"></feBlend>
-              </filter>
-            </defs>
-          </svg>
-        </ClientOnly>
-        <div class="single">
-          <h1 class="overlay">{{ frontmatter.title || page.title }}</h1>
-          <h1 :style="`background-image: url(${getGradientUrl(rawImgList[0])})`">
-            {{ frontmatter.title || page.title }}
-          </h1>
-          <img :src="getGradientUrl(rawImgList[0])" />
-          <img :src="rawImgList[0]" />
-        </div>
-      </template>
-    </div>
-  </header>
+          <div class="progress-ring">
+            <svg width="24" height="24" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="9" fill="none" stroke="var(--md-sys-color-tertiary-container)" stroke-width="5" />
+              <circle
+                cx="12"
+                cy="12"
+                r="9"
+                fill="none"
+                stroke="var(--md-sys-color-tertiary)"
+                stroke-width="5"
+                stroke-linecap="round"
+                :style="{
+                  strokeDasharray: `${2 * Math.PI * 9}`,
+                  strokeDashoffset: `${2 * Math.PI * 9 * (1 - progress / 100)}`,
+                  transition: isFastForwarding ? 'none' : 'stroke-dashoffset 100ms linear',
+                }"
+              />
+            </svg>
+          </div>
+          <div class="controls">
+            <div class="prev" title="上一张" @click="handleNav(-1)"></div>
+            <div class="next" title="下一张" @click="handleNav(1)"></div>
+          </div>
+          <div class="indicators">
+            <button
+              v-for="(_, idx) in rawImgList"
+              :key="idx"
+              class="dot"
+              :class="{ active: currentRealIndex === idx }"
+              @click="jumpTo(idx)"
+            ></button>
+          </div>
+        </template>
+        <template v-else>
+          <ClientOnly>
+            <svg width="0" height="0" style="display: none">
+              <defs>
+                <filter id="noise-filter" x="0" y="0" width="100%" height="100%">
+                  <feTurbulence
+                    :seed="frontmatter.date ? new Date(frontmatter.date).getTime() : 0"
+                    type="turbulence"
+                    baseFrequency="0.15"
+                    numOctaves="2"
+                    stitchTiles="stitch"
+                  ></feTurbulence>
+                  <feColorMatrix type="saturate" values="1"></feColorMatrix>
+                  <feComponentTransfer>
+                    <feFuncA type="discrete" tableValues="0 0.1"></feFuncA>
+                  </feComponentTransfer>
+                  <feBlend mode="multiply" in2="SourceGraphic"></feBlend>
+                </filter>
+              </defs>
+            </svg>
+          </ClientOnly>
+          <div class="single">
+            <h1 class="overlay">{{ frontmatter.title || page.title }}</h1>
+            <h1 :style="`background-image: url(${getGradientUrl(rawImgList[0])})`">
+              {{ frontmatter.title || page.title }}
+            </h1>
+            <img :src="getGradientUrl(rawImgList[0])" />
+            <img :src="rawImgList[0]" />
+          </div>
+        </template>
+      </div>
+    </header>
+  </Transition>
 </template>
 
 <style lang="scss" scoped>

.vitepress/theme/components/ImageViewer.vue

@@ -86,7 +86,7 @@ const show = () => {
     // 延迟一帧触发动画，确保 CSS 过渡生效
     isAnimating.value = true;
     // 将焦点转移到查看器内部的关闭按钮
-    const closeBtn = document.querySelector<HTMLElement>(".btn-close");
+    const closeBtn = document.querySelector<HTMLElement>(".ImageViewer .close");
     closeBtn?.focus();
   });
 };
@@ -113,8 +113,32 @@ const hide = () => {
 const prevImage = () => hasPrevious.value && activeIndex.value--;
 const nextImage = () => hasNext.value && activeIndex.value++;
 
-/** 键盘交互处理 */
-useEventListener("keydown", (e: KeyboardEvent) => {
+/** 导航 ButtonGroup 按钮配置 */
+const BUTTONS_NAV_CONFIG = computed(() => [
+  { id: "prev", icon: "chevron_left", ariaLabel: "上一张", type: "normal" },
+  {
+    id: "index",
+    label: `${activeIndex.value + 1} / ${props.images.length}`,
+    color: "tonal",
+    ariaLabel: "当前页码",
+  },
+  { id: "next", icon: "chevron_right", ariaLabel: "下一张", type: "normal" },
+]);
+
+/** 处理按钮组点击事件 */
+const handleButtonGroupClick = (e: Event, item: any) => {
+  switch (item.id) {
+    case "prev":
+      prevImage();
+      break;
+    case "next":
+      nextImage();
+      break;
+  }
+};
+
+/** 处理键盘快捷键 */
+const handleKeyboardShortcuts = (e: KeyboardEvent) => {
   if (!isVisible.value) return;
 
   // 陷阱焦点逻辑
@@ -146,7 +170,10 @@ useEventListener("keydown", (e: KeyboardEvent) => {
       imageScale.value = Math.max(ZOOM_CONFIG.MIN, imageScale.value - ZOOM_CONFIG.STEP);
       break;
   }
-});
+};
+
+/** 键盘交互处理 */
+useEventListener("keydown", handleKeyboardShortcuts);
 
 /** 滚轮缩放与翻页 */
 const handleWheel = (e: WheelEvent) => {
@@ -202,7 +229,7 @@ const handleTouchMove = (e: TouchEvent) => {
     const dist = Math.sqrt(dx * dx + dy * dy);
     imageScale.value = Math.min(
       Math.max((dist / initialTouchDist) * initialTouchScale, ZOOM_CONFIG.MIN),
-      ZOOM_CONFIG.MAX_TOUCH
+      ZOOM_CONFIG.MAX_TOUCH,
     );
   } else if (e.touches.length === 1) {
     const touch = e.touches[0];
@@ -234,23 +261,15 @@ defineExpose({ show, hide });
     aria-modal="true"
     tabindex="-1"
   >
-    <MaterialButton @click="hide" class="btn-close" icon="close" color="text" size="m" aria-label="关闭" />
-    <MaterialButton
-      v-if="hasPrevious"
-      @click="prevImage"
-      class="btn-nav prev"
-      icon="chevron_left"
-      size="l"
-      aria-label="上一张"
-    />
-    <MaterialButton
-      v-if="hasNext"
-      @click="nextImage"
-      class="btn-nav next"
-      icon="chevron_right"
-      size="l"
-      aria-label="下一张"
+    <ButtonGroup
+      :links="BUTTONS_NAV_CONFIG"
+      layout="horizontal"
+      size="m"
+      class="nav-group"
+      @click="handleButtonGroupClick"
     />
+    <MaterialButton color="tonal" icon="close" aria-label="关闭" class="close" @click="hide"></MaterialButton>
+
     <div
       class="content"
       @click.self="hide"
@@ -280,18 +299,6 @@ defineExpose({ show, hide });
         }"
       />
     </div>
-    <p class="index-text">{{ activeIndex + 1 }} / {{ images.length }}</p>
-    <div class="thumbnails" v-if="images.length > 1">
-      <button
-        v-for="(img, idx) in images"
-        :key="idx"
-        class="thumbnail"
-        :class="{ active: idx === activeIndex }"
-        @click="activeIndex = idx"
-      >
-        <img :src="img" alt="thumbnail" />
-      </button>
-    </div>
   </div>
 </template>
 

.vitepress/theme/components/NavBar.vue

@@ -159,7 +159,6 @@ if (isClient()) {
   onMounted(() => {
     screenWidthStore.init();
     navStateStore.init();
-    themeStateStore.init();
 
     nextTick(() => {
       window.dispatchEvent(new Event("resize"));

.vitepress/theme/layouts/Default.vue

@@ -158,7 +158,7 @@ onMounted(() => {
                 <h3>
                   {{ randomGreeting }}
                 </h3>
-                <img src="/assets/images/avatar_transparent.png" alt="" />
+                <img src="/assets/images/avatar_transparent.webp" alt="" />
                 <span></span>
               </div>
             </ClientOnly>

.vitepress/theme/stores/themeState.ts

@@ -3,88 +3,61 @@
  */
 
 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";
+import { computed } from "vue";
+import { useColorMode, useCycleList } from "@vueuse/core";
+import { setCookie, getCookie, deleteCookie } from "../utils/cookie";
 
 export type ThemePreference = "auto" | "light" | "dark";
 
+/** 偏好映射配置 */
+const THEME_MAP = {
+  auto: { icon: "brightness_auto", label: "跟随系统" },
+  light: { icon: "light_mode", label: "亮色模式" },
+  dark: { icon: "dark_mode", label: "深色模式" },
+} as const;
+
 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);
+  const mode = useColorMode({
+    emitAuto: true,
+    storageKey: "theme_preference",
+    storage: {
+      getItem: (key) => getCookie(key) || "auto",
+      setItem: (key, value) => setCookie(key, value),
+      removeItem: (key) => deleteCookie(key),
+    },
+    onChanged: (val, defaultHandler) => {
+      defaultHandler(val);
+      // 确保同时切换 light/dark 类
+      if (typeof document !== "undefined") {
+        document.documentElement.classList.toggle("dark", val === "dark");
+        document.documentElement.classList.toggle("light", val === "light");
       }
     },
-    { immediate: true },
-  );
+  });
 
-  /** 监听用户偏好变化，持久化到 Cookie */
-  watch(preference, (val) => {
-    setCookie("theme_preference", val);
+  /** 循环切换列表 */
+  const { next } = useCycleList(["auto", "light", "dark"] as ThemePreference[], {
+    initialValue: mode.value as ThemePreference,
   });
 
   /** 切换主题模式 */
   const cycleTheme = () => {
-    const modes: ThemePreference[] = ["auto", "light", "dark"];
-    const nextIndex = (modes.indexOf(preference.value) + 1) % modes.length;
-    preference.value = modes[nextIndex];
+    mode.value = next();
   };
 
+  /** 当前偏好设置 */
+  const preference = computed(() => mode.value as ThemePreference);
+
   /** 当前状态对应的图标 */
-  const currentIcon = computed(() => {
-    switch (preference.value) {
-      case "light":
-        return "light_mode";
-      case "dark":
-        return "dark_mode";
-      default:
-        return "brightness_auto";
-    }
-  });
+  const currentIcon = computed(() => THEME_MAP[preference.value].icon);
 
   /** 当前状态对应的文本标签 */
-  const currentLabel = computed(() => {
-    switch (preference.value) {
-      case "light":
-        return "亮色模式";
-      case "dark":
-        return "深色模式";
-      default:
-        return "跟随系统";
-    }
-  });
+  const currentLabel = computed(() => THEME_MAP[preference.value].label);
 
   return {
     preference,
     currentIcon,
     currentLabel,
-    init,
     cycleTheme,
   };
 });

.vitepress/theme/styles/animation.scss

@@ -1,20 +1,3 @@
-.layout-enter-active {
-  transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
-    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
-      var(--md-sys-motion-duration-short1);
-}
-
-.layout-leave-active {
-  transition: opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
-    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
-}
-
-.layout-enter-from,
-.layout-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
 @keyframes fade-out {
   0% {
     opacity: 0;

.vitepress/theme/styles/components/Header.scss

@@ -61,6 +61,9 @@
         &.overlay {
           color: var(--md-ref-palette-primary20);
 
+          background: none;
+
+          animation: none;
           mix-blend-mode: luminosity;
           z-index: 3;
         }
@@ -334,3 +337,58 @@
     grid-column: span 4;
   }
 }
+
+.header-enter-active {
+  transition:
+    opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
+      var(--md-sys-motion-duration-short1);
+
+  .carousel-container .single {
+    h1 {
+      transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+    }
+
+    img {
+      &:nth-of-type(1) {
+        transition: 5s var(--md-sys-motion-spring-slow-effect);
+      }
+
+      &:nth-of-type(2) {
+        transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-default-effect)
+          var(--md-sys-motion-spring-fast-effect-duration);
+      }
+    }
+  }
+}
+
+.header-leave-active {
+  transition:
+    opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+}
+
+.header-enter-from,
+.header-leave-to {
+  opacity: 0;
+  transform: scale(0.985);
+
+  .carousel-container .single {
+    h1 {
+      opacity: 0;
+      transform: translateX(5%);
+    }
+
+    img {
+      &:nth-of-type(1) {
+        opacity: 0;
+        transform: translateX(-25%);
+      }
+
+      &:nth-of-type(2) {
+        opacity: 0;
+        transform: scale(1.005);
+      }
+    }
+  }
+}

.vitepress/theme/styles/components/ImageViewer.scss

@@ -22,47 +22,26 @@
   -moz-user-select: none;
   z-index: 9999;
 
-  .index-text {
-    padding-block: 3px;
-    padding-inline: 9px;
+  .nav-group {
+    position: absolute;
+    bottom: 0px;
 
-    color: var(--md-sys-color-surface-variant);
-
-    border-radius: var(--md-sys-shape-corner-medium);
-
-    background-color: var(--md-sys-color-on-surface-variant);
+    margin-block-end: 12px;
 
     z-index: 3;
   }
 
-  .btn-close,
-  .btn-nav {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .close {
+    position: absolute;
+    right: 0px;
+    top: 0px;
 
-    position: absolute !important;
+    margin-inline-end: 12px;
+    margin-block-start: 12px;
 
     z-index: 3;
   }
 
-  .btn-close {
-    right: 20px;
-    top: 20px;
-  }
-
-  .btn-nav {
-    top: 50%;
-
-    &.prev {
-      left: 20px;
-    }
-
-    &.next {
-      right: 20px;
-    }
-  }
-
   .content {
     display: flex;
     align-items: center;
@@ -74,70 +53,21 @@
     padding-block-start: 5vh;
 
     z-index: 2;
-  }
 
-  .content-image {
-    border-radius: var(--md-sys-shape-corner-full);
+    .content-image {
+      background-color: var(--md-sys-color-surface-variant);
 
-    background-color: var(--md-sys-color-surface-variant);
+      clip-path: circle(10%);
+      object-fit: contain;
+      transition: var(--md-sys-motion-spring-slow-spatial-duration) var(--md-sys-motion-spring-slow-spatial);
 
-    clip-path: circle(10%);
-    object-fit: contain;
-    transition: var(--md-sys-motion-spring-slow-spatial-duration) var(--md-sys-motion-spring-slow-spatial);
+      &.transitioning {
+        opacity: 0.6;
+      }
 
-    &.transitioning {
-      opacity: 0.6;
-    }
-
-    &.notransition {
-      transition: none !important;
-    }
-  }
-
-  .thumbnails {
-    display: flex;
-    gap: 8px;
-
-    max-width: calc(100% - 66px);
-
-    padding: 24px;
-
-    overflow-x: auto;
-    overflow-y: hidden;
-    z-index: 3;
-  }
-
-  .thumbnail {
-    flex-shrink: 0;
-
-    width: 66px;
-    height: 66px;
-
-    padding: 0px;
-
-    border: 0px;
-    border-radius: var(--md-sys-shape-corner-large);
-
-    cursor: pointer;
-    overflow: hidden;
-    transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
-
-    &.active {
-      @include mixin.focus-ring($thickness: 1, $offset: 2);
-
-      outline-color: var(--md-sys-color-on-surface-variant) !important;
-      transition: transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
-    }
-
-    &:hover {
-      transform: scale(0.9);
-    }
-
-    img {
-      height: 100%;
-      width: 100%;
-
-      object-fit: cover;
+      &.notransition {
+        transition: none !important;
+      }
     }
   }
 
@@ -146,8 +76,6 @@
     opacity: 1;
 
     .content-image {
-      border-radius: var(--md-sys-shape-corner-large);
-
       clip-path: circle(100%);
     }
   }

.vitepress/theme/styles/layouts/Article.scss

@@ -625,24 +625,18 @@
       font-variation-settings: "wght" 700;
     }
 
-    &:has(img) {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 6px;
+    img {
+      display: inline-block;
 
-      img {
-        display: inline-block;
+      width: 100%;
 
-        width: 100%;
+      border-radius: var(--md-sys-shape-corner-medium);
 
-        border-radius: var(--md-sys-shape-corner-medium);
+      cursor: pointer;
+      transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
 
-        cursor: pointer;
-        transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
-
-        &:hover {
-          border-radius: var(--md-sys-shape-corner-extra-large);
-        }
+      &:hover {
+        border-radius: var(--md-sys-shape-corner-extra-large);
       }
     }
   }
@@ -842,10 +836,6 @@
 @media screen and (max-width: 600px) {
   #article-content {
     grid-column: 1 / 5;
-
-    p:has(img) {
-      grid-template-columns: 1fr;
-    }
   }
 
   #article-aside {

.vitepress/theme/styles/layouts/Default.scss

@@ -258,3 +258,22 @@
     }
   }
 }
+
+.layout-enter-active {
+  transition:
+    opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
+      var(--md-sys-motion-duration-short1);
+}
+
+.layout-leave-active {
+  transition:
+    opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+}
+
+.layout-enter-from,
+.layout-leave-to {
+  opacity: 0;
+  transform: scale(0.99);
+}

.vitepress/theme/styles/main.scss

@@ -52,6 +52,18 @@ body {
 
     background-color: var(--md-sys-color-on-surface-variant);
   }
+
+  &.light {
+    img[data-mode="darkmode-only"] {
+      display: none !important;
+    }
+  }
+
+  &.dark {
+    img[data-mode="lightmode-only"] {
+      display: none !important;
+    }
+  }
 }
 
 #app {

.vitepress/theme/styles/tokens.scss

@@ -195,73 +195,75 @@
 
 // Colors scheme
 html {
-  --md-sys-color-primary: var(--md-ref-palette-primary40);
-  --md-sys-color-primary-container: var(--md-ref-palette-primary90);
-  --md-sys-color-on-primary: var(--md-ref-palette-primary100);
-  --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
-  --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
-  --md-sys-color-secondary: var(--md-ref-palette-secondary40);
-  --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
-  --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
-  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
-  --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
-  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
-  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
-  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
-  --md-sys-color-surface: var(--md-ref-palette-neutral98);
-  --md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
-  --md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
-  --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
-  --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
-  --md-sys-color-surface-container: var(--md-ref-palette-neutral94);
-  --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
-  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
-  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
-  --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
-  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
-  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
-  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
-  --md-sys-color-background: var(--md-ref-palette-neutral98);
-  --md-sys-color-on-background: var(--md-ref-palette-neutral10);
-  --md-sys-color-error: var(--md-ref-palette-error40);
-  --md-sys-color-error-container: var(--md-ref-palette-error90);
-  --md-sys-color-on-error: var(--md-ref-palette-error100);
-  --md-sys-color-on-error-container: var(--md-ref-palette-error10);
-  --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
-  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
-  --md-sys-color-shadow: var(--md-ref-palette-neutral0);
-  --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
-  --md-sys-color-scrim: var(--md-ref-palette-neutral0);
+  &.light {
+    --md-sys-color-primary: var(--md-ref-palette-primary40);
+    --md-sys-color-primary-container: var(--md-ref-palette-primary90);
+    --md-sys-color-on-primary: var(--md-ref-palette-primary100);
+    --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
+    --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
+    --md-sys-color-secondary: var(--md-ref-palette-secondary40);
+    --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
+    --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
+    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
+    --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
+    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
+    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
+    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
+    --md-sys-color-surface: var(--md-ref-palette-neutral98);
+    --md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
+    --md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
+    --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
+    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
+    --md-sys-color-surface-container: var(--md-ref-palette-neutral94);
+    --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
+    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
+    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
+    --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
+    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
+    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
+    --md-sys-color-background: var(--md-ref-palette-neutral98);
+    --md-sys-color-on-background: var(--md-ref-palette-neutral10);
+    --md-sys-color-error: var(--md-ref-palette-error40);
+    --md-sys-color-error-container: var(--md-ref-palette-error90);
+    --md-sys-color-on-error: var(--md-ref-palette-error100);
+    --md-sys-color-on-error-container: var(--md-ref-palette-error10);
+    --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
+    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
+    --md-sys-color-shadow: var(--md-ref-palette-neutral0);
+    --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
+    --md-sys-color-scrim: var(--md-ref-palette-neutral0);
 
-  --md-sys-color-red: var(--md-ref-palette-red40);
-  --md-sys-color-red-container: var(--md-ref-palette-red90);
-  --md-sys-color-on-red: var(--md-ref-palette-red95);
-  --md-sys-color-on-red-container: var(--md-ref-palette-red10);
-  --md-sys-color-inverse-red: var(--md-ref-palette-red80);
+    --md-sys-color-red: var(--md-ref-palette-red40);
+    --md-sys-color-red-container: var(--md-ref-palette-red90);
+    --md-sys-color-on-red: var(--md-ref-palette-red95);
+    --md-sys-color-on-red-container: var(--md-ref-palette-red10);
+    --md-sys-color-inverse-red: var(--md-ref-palette-red80);
 
-  --md-sys-color-blue: var(--md-ref-palette-blue40);
-  --md-sys-color-blue-container: var(--md-ref-palette-blue90);
-  --md-sys-color-on-blue: var(--md-ref-palette-blue95);
-  --md-sys-color-on-blue-container: var(--md-ref-palette-blue10);
-  --md-sys-color-inverse-blue: var(--md-ref-palette-blue80);
+    --md-sys-color-blue: var(--md-ref-palette-blue40);
+    --md-sys-color-blue-container: var(--md-ref-palette-blue90);
+    --md-sys-color-on-blue: var(--md-ref-palette-blue95);
+    --md-sys-color-on-blue-container: var(--md-ref-palette-blue10);
+    --md-sys-color-inverse-blue: var(--md-ref-palette-blue80);
 
-  --md-sys-color-green: var(--md-ref-palette-green40);
-  --md-sys-color-green-container: var(--md-ref-palette-green90);
-  --md-sys-color-on-green: var(--md-ref-palette-green95);
-  --md-sys-color-on-green-container: var(--md-ref-palette-green10);
-  --md-sys-color-inverse-green: var(--md-ref-palette-green80);
+    --md-sys-color-green: var(--md-ref-palette-green40);
+    --md-sys-color-green-container: var(--md-ref-palette-green90);
+    --md-sys-color-on-green: var(--md-ref-palette-green95);
+    --md-sys-color-on-green-container: var(--md-ref-palette-green10);
+    --md-sys-color-inverse-green: var(--md-ref-palette-green80);
 
-  --md-sys-color-yellow: var(--md-ref-palette-yellow40);
-  --md-sys-color-yellow-container: var(--md-ref-palette-yellow90);
-  --md-sys-color-on-yellow: var(--md-ref-palette-yellow95);
-  --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10);
-  --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80);
+    --md-sys-color-yellow: var(--md-ref-palette-yellow40);
+    --md-sys-color-yellow-container: var(--md-ref-palette-yellow90);
+    --md-sys-color-on-yellow: var(--md-ref-palette-yellow95);
+    --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10);
+    --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80);
 
-  --md-sys-color-purple: var(--md-ref-palette-purple40);
-  --md-sys-color-purple-container: var(--md-ref-palette-purple90);
-  --md-sys-color-on-purple: var(--md-ref-palette-purple95);
-  --md-sys-color-on-purple-container: var(--md-ref-palette-purple10);
-  --md-sys-color-inverse-purple: var(--md-ref-palette-purple80);
+    --md-sys-color-purple: var(--md-ref-palette-purple40);
+    --md-sys-color-purple-container: var(--md-ref-palette-purple90);
+    --md-sys-color-on-purple: var(--md-ref-palette-purple95);
+    --md-sys-color-on-purple-container: var(--md-ref-palette-purple10);
+    --md-sys-color-inverse-purple: var(--md-ref-palette-purple80);
+  }
 
   &.dark {
     --md-sys-color-primary: var(--md-ref-palette-primary80);

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+
+COPY . /app
+
+RUN npm install
+
+EXPOSE 4173
+
+CMD ["npm", "run", "docs:preview"]

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "26.2.8(281)",
+  "version": "26.2.25(298)",
   "scripts": {
     "update-version": "bash ./scripts/update-version.sh",
     "docs:dev": "vitepress dev",
@@ -9,16 +9,17 @@
   },
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.2.1",
     "pinia": "^3.0.4"
   },
   "devDependencies": {
-    "@mdit/plugin-align": "^0.23.0",
-    "@mdit/plugin-footnote": "^0.22.3",
-    "@mdit/plugin-tasklist": "^0.22.2",
+    "@mdit/plugin-align": "^0.24.0",
+    "@mdit/plugin-footnote": "^0.23.0",
+    "@mdit/plugin-img-mark": "^0.23.0",
+    "@mdit/plugin-tasklist": "^0.23.0",
     "markdown-it-anchor": "^9.2.0",
-    "sass-embedded": "^1.93.0",
-    "vitepress": "^2.0.0-alpha.15",
-    "vue": "^3.5.0"
+    "sass-embedded": "^1.97.3",
+    "vitepress": "^2.0.0-alpha.16",
+    "vue": "^3.5.29"
   }
 }

posts/Jekylmt.md

@@ -0,0 +1,75 @@
+---
+title: "关于 Jekylmt"
+description: "一个简洁美观的 Jekyll 主题"
+color: "#0084ff"
+impression: "/assets/images/131559307_p0.webp"
+categories:
+  - 博客主题
+tags:
+  - readme
+date: 2026-02-25T21:44:00Z
+external_links:
+  - type: download
+    icon: rocket_launch
+    label: 使用主题模板
+    link: https://github.com/new?template_name=jekylmt&template_owner=sendevia
+  - type: normal
+    icon: code
+    label: Github 仓库
+    link: https://github.com/sendevia/jekylmt
+  - type: normal
+    icon: arrow_outward
+    label: 在线 Demo
+    link: https://jekylmt.sendevia.top
+---
+
+# 关于主题
+
+不太擅长介绍，既然这个页面存在了，就简单写一下吧。 这是一个遵循 Material3 设计，并且使用了 Material Web 项目，轻量化的 Jekyll 主题。
+
+由于 M3 的设计太好看了，一直想亲自动手设计一款使用这种设计的前端项目，作为练手，这个主题便诞生了。
+
+我借助 Material Foundation 的 [material-color-utilities](https://github.com/material-foundation/material-color-utilities) 实现了 monet 取色。
+
+你可以在每篇文章的头信息 `impression` 配置中指定头图，并通过 `color` 配置指定颜色来让主题生成调色板。
+
+这个主题的参考来源主要是 [material.io](https://material.io) 官网，其次是 Google 提供的设计规范。
+
+代码高亮支持的语言可以在 [rouge-ruby](https://rouge-ruby.github.io/docs/file.Languages.html) 的网站上找到。
+
+# 主题截图
+
+![桌面端第一张亮色截图](/assets/images/26/jekylmt_1.webp#light)
+![桌面端第一张暗色截图](/assets/images/26/jekylmt_2.webp#dark)
+![桌面端第二张亮色截图](/assets/images/26/jekylmt_3.webp#light)
+![桌面端第二张暗色截图](/assets/images/26/jekylmt_4.webp#dark)
+![移动端第一张亮色截图](/assets/images/26/jekylmt_5.webp#light)
+![移动端第一张暗色截图](/assets/images/26/jekylmt_6.webp#dark)
+![移动端第二张亮色截图](/assets/images/26/jekylmt_7.webp#light)
+![移动端第二张暗色截图](/assets/images/26/jekylmt_8.webp#dark)
+
+# 主要功能
+
+1. Material 3 风格；
+2. 支持根据提供的 HEX 颜色动态生成调色板并应用颜色主题；
+3. 支持多种 Material 3 样式的组件；
+4. 响应式布局。
+
+# 头信息
+
+下面是所有头信息的详解：
+
+| name         |               | description      | type    | default                     |
+| ------------ | ------------- | ---------------- | ------- | --------------------------- |
+| 文章相关     | title         | 文章标题         | text    | 使用 `_config.yml` 中的配置 |
+| ^^           | description   | 文章简介         | ^^      | ^^                          |
+| ^^           | author        | 文章作者         | ^^      | ^^                          |
+| ^^           | color         | 文章主题颜色     | ^^      | ^^                          |
+| ^^           | impression    | 文章头图         | ^^      | ^^                          |
+| ^^           | categories    | 目录分类         | list    | 未定义                      |
+| ^^           | tags          | 文章标签         | ^^      | ^^                          |
+| ^^           | published     | 是否发布文章     | boolean | true                        |
+| ^^           | toc           | 是否生成文章目录 | ^^      | true                        |
+| 页面导航相关 | segment_icon  | 导航栏中的图标   | text    | -                           |
+| ^^           | segment_title | 导航栏中的标题   | ^^      | ^^                          |
+| ^^           | navigation    | 是否在导航中显示 | boolean | ^^                          |

posts/关于这个主题的一些事.md

@@ -1,41 +0,0 @@
----
-title: "关于这个主题的一些事"
-description: ""
-color: "#59f3b3"
-impression: "/assets/images/133925125_p0.webp"
-categories:
-  - 随笔
-tags:
-  - readme
-date: 2023-05-28T04:00:00Z
----
-
-# 关于主题
-
-由于 M3 的设计太好看了，一直想亲自动手设计一款使用这种设计的前端项目，作为练手，这个主题便诞生了。
-
-我借助 Material Foundation 的 [material-color-utilities](https://github.com/material-foundation/material-color-utilities) 实现了 monet 取色。
-
-你可以在每篇文章的头信息 `impression` 配置中指定头图，并通过 `color` 配置指定颜色来让主题生成调色板。
-
-这个主题的参考来源主要是 [material.io](https://material.io) 官网，其次是 Google 提供的设计规范。
-
-# 主要功能
-
-1. Material 3 Expressive 设计风格；
-1. 支持根据提供的 HEX 颜色/输入的图片动态生成调色板并应用颜色主题；
-1. 响应式布局。
-
-# 头信息
-
-下面是所有头信息的详解：
-
-| name                      || description      | type    | default                     |
-| ---------- | ------------- | ---------------- | ------- | --------------------------- |
-| 文章相关    | title         | 文章标题          | text    | 使用 `_config.yml` 中的配置  |
-| ^^         | description   | 文章简介          | ^^      | ^^                          |
-| ^^         | author        | 文章作者          | ^^      | ^^                          |
-| ^^         | color         | 文章主题颜色       | ^^      | ^^                          |
-| ^^         | impression    | 文章头图          | ^^      | ^^                          |
-| ^^         | categories    | 目录分类          | list    | 未定义                       |
-| ^^         | tags          | 文章标签          | ^^      | ^^                          |

posts/组件/ButtonGroup.md

@@ -0,0 +1,144 @@
+---
+title: "Button group"
+description: "按钮组组件"
+color: "#42b883"
+categories:
+  - 开发文档
+tags:
+  - Vue 3
+  - 组件
+  - UI
+date: 2026-02-25T21:20:00Z
+---
+
+# ButtonGroup 按钮组组件
+
+`ButtonGroup` 是一个用于聚合多个 `MaterialButton` 的容器组件。它支持灵活的布局切换、统一的属性默认值配置以及全局事件委托监听。
+
+## 核心特性
+
+- **布局自适应**：支持水平（Horizontal）和垂直（Vertical）两种排列方式。
+- **属性继承与覆盖**：可以在组级别设置默认的尺寸、颜色、图标等，也可以在具体的按钮项中进行个性化覆盖。
+- **智能类型识别**：内置了对 `download` 和 `normal` 类型的样式及图标自动匹配逻辑。
+- **事件委托**：支持统一监听 `@click` 事件，便捷获取点击的项信息及索引。
+
+## 组件属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| `links` | `ExternalLink[]` | `[]` | - | 按钮配置数组 |
+| `layout` | `string` | `"horizontal"` | `"horizontal"`, `"vertical"` | 布局方向 |
+| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 默认按钮尺寸 |
+| `color` | `string` | - | - | 默认按钮颜色样式 |
+| `icon` | `string` | - | - | 默认按钮图标 |
+| `target` | `string` | - | - | 默认链接打开方式 |
+| `ariaLabel` | `string` | - | - | 组的无障碍标签 |
+
+## 组件事件 (Emits)
+
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| `@click` | `(event: Event, item: ExternalLink, index: number)` | 当组内任意按钮被点击时触发 |
+
+## 按钮配置项 (ExternalLink)
+
+每一项 `links` 中的对象支持以下配置：
+
+| 属性名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `label` | `string` | 按钮显示的文本内容 |
+| `id` | `string` | (可选) 自定义标识符，方便在事件处理中识别 |
+| `link` | `string` | (可选) 点击跳转的链接地址 |
+| `type` | `string` | (可选) 预设类型：`download` (充满色), `normal` (色调色) |
+| `icon` | `string` | (可选) 覆盖组设置的图标 |
+| `color` | `string` | (可选) 覆盖组设置的颜色 |
+| `size` | `string` | (可选) 覆盖组设置的尺寸 |
+| `target` | `string` | (可选) 覆盖组设置的打开方式 |
+| `ariaLabel` | `string` | (可选) 按钮的无障碍标签 |
+| `onClick` | `Function` | (可选) 单体独立的点击回调函数 |
+
+## 使用示例
+
+### 1. 基础用法 (水平排列)
+
+```vue
+<ButtonGroup
+  :links="[
+    { label: '查看详情', id: 'detail' },
+    { label: '下载资源', id: 'download', type: 'download' }
+  ]"
+  @click="(e, item) => console.log('点击了:', item.id)"
+/>
+```
+
+<ButtonGroup
+  :links="[
+    { label: '查看详情', id: 'detail' },
+    { label: '下载资源', id: 'download', type: 'download' }
+  ]"
+  @click="(e, item) => console.log('点击了:', item.id)"
+/>
+
+### 2. 垂直排列与尺寸控制
+
+```vue
+<ButtonGroup
+  layout="vertical"
+  size="l"
+  :links="[
+    { label: '选项一', icon: 'settings' },
+    { label: '选项二', icon: 'person' }
+  ]"
+/>
+```
+
+<ButtonGroup
+  layout="vertical"
+  size="l"
+  :links="[
+    { label: '选项一', icon: 'settings' },
+    { label: '选项二', icon: 'person' }
+  ]"
+/>
+
+### 3. 混合图标与文本
+
+```vue
+<ButtonGroup
+  size="m"
+  :links="[
+    { id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
+    { id: 'index', label: '1 / 5', color: 'tonal' },
+    { id: 'next', icon: 'chevron_right', ariaLabel: '下一页' }
+  ]"
+/>
+```
+
+<ButtonGroup
+  size="m"
+  :links="[
+    { id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
+    { id: 'index', label: '1 / 5', color: 'tonal' },
+    { id: 'next', icon: 'chevron_right', ariaLabel: '下一页' }
+  ]"
+/>
+
+### 4. 链接跳转
+
+```vue
+<ButtonGroup
+  target="_blank"
+  :links="[
+    { label: 'GitHub', link: 'https://github.com', icon: 'code' },
+    { label: '首页', link: '/', icon: 'home' }
+  ]"
+/>
+```
+
+<ButtonGroup
+  target="_blank"
+  :links="[
+    { label: 'GitHub', link: 'https://github.com', icon: 'code' },
+    { label: '首页', link: '/', icon: 'home' }
+  ]"
+/>