feat(docs): add centralized breakpoint configuration module

Create a single source of truth for responsive breakpoints (640px/960px)
with CSS variables for documentation and VueUse hooks for Vue components.

Author: LessUp

docs/.vitepress/theme/breakpoints.ts

@@ -0,0 +1,70 @@
+/**
+ * SGEMM Optimization - 断点配置模块
+ * 单一真相源：所有断点值从此模块导出
+ *
+ * 设计说明：
+ * - CSS 规范不允许在 @media 中使用 var()，因此 CSS 媒体查询使用字面值
+ * - 此模块作为 JS 层的断点真相源，供 Vue 组件和未来扩展使用
+ * - CSS 中的断点变量 (--bp-sm, --bp-lg) 作为文档化引用
+ */
+
+/** 断点常量 - 与 VitePress 核心保持一致 */
+export const BREAKPOINTS = {
+  /** 移动端断点：640px 以下 */
+  sm: 640,
+  /** 平板/桌面断点：960px 以下 */
+  lg: 960,
+} as const
+
+/** 断点名称类型 */
+export type BreakpointName = keyof typeof BREAKPOINTS
+
+/**
+ * 生成媒体查询字符串（min-width 策略）
+ * @param name 断点名称
+ * @returns 媒体查询字符串，如 "(min-width: 640px)"
+ */
+export function minQuery(name: BreakpointName): string {
+  return `(min-width: ${BREAKPOINTS[name]}px)`
+}
+
+/**
+ * 生成媒体查询字符串（max-width 策略）
+ * @param name 断点名称
+ * @returns 媒体查询字符串，如 "(max-width: 639px)"
+ */
+export function maxQuery(name: BreakpointName): string {
+  return `(max-width: ${BREAKPOINTS[name] - 1}px)`
+}
+
+/**
+ * VueUse 响应式断点钩子
+ * 在 Vue 组件中使用，获取当前视口状态
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useBreakpoint } from './breakpoints'
+ * const { isMobile, isDesktop } = useBreakpoint()
+ * </script>
+ *
+ * <template>
+ *   <div v-if="isMobile">移动端视图</div>
+ *   <div v-else>桌面端视图</div>
+ * </template>
+ * ```
+ */
+export function useBreakpoint() {
+  // 动态导入 VueUse，避免在非 Vue 环境中报错
+  // VitePress 已内置 @vueuse/core
+  const { useMediaQuery } = require('@vueuse/core')
+
+  return {
+    /** 是否为移动端（< 640px） */
+    isMobile: useMediaQuery(maxQuery('sm')),
+    /** 是否为平板/移动端（< 960px） */
+    isCompact: useMediaQuery(maxQuery('lg')),
+    /** 是否为桌面端（>= 960px） */
+    isDesktop: useMediaQuery(minQuery('lg')),
+  }
+}

docs/.vitepress/theme/index.ts

@@ -4,6 +4,8 @@ import { watch, onMounted } from 'vue'
 import { useData } from 'vitepress'
 import Citation from '../components/Citation.vue'
 import PerfCompare from '../components/PerfCompare.vue'
+// 导出断点模块供组件使用
+export { useBreakpoint, BREAKPOINTS, minQuery, maxQuery } from './breakpoints'
 
 export default {
   extends: DefaultTheme,

docs/.vitepress/theme/style.css

@@ -7,6 +7,12 @@
  */
 
 :root {
+  /* 断点变量 - 文档化引用，值与 breakpoints.ts 保持同步
+     注意：CSS 规范不允许在 @media 中使用 var()，
+     媒体查询必须使用字面值，变更时需同步更新 */
+  --bp-sm: 640px;
+  --bp-lg: 960px;
+
   --vp-c-brand-1: #76b900;
   --vp-c-brand-2: #679f00;
   --vp-c-brand-3: #8bcd29;
@@ -879,6 +885,7 @@ div[class*='language-'] code,
   padding: 16px 18px;
 }
 
+/* 平板/桌面断点 --bp-lg: 960px (见 breakpoints.ts) */
 @media (max-width: 960px) {
   .VPHero,
   .home-shell {
@@ -916,6 +923,7 @@ div[class*='language-'] code,
   }
 }
 
+/* 移动端断点 --bp-sm: 640px (见 breakpoints.ts) */
 @media (max-width: 640px) {
   .VPNavBar,
   .VPHero,