feat: GitHub Pages 颠覆式重构 - Phase 1-4 完成

## 核心改进

### Phase 1: 深浅色模式彻底修复
- 新增 ThemedLogo.vue 主题感知 Logo 组件
- 修复 ArchitectureDiagram.vue 硬编码 fill="white" 问题
- 增强 ThemedSvg.vue 组件，支持多种主题适配策略
- 新增 svg-theme-test.ts SVG 主题测试工具

### Phase 2: 视觉设计重塑
- 新增语义化色彩变量（状态色、图表色、代码高亮色）
- 新增排版系统（Major Third 比例 1.25）
- 新增高级动画（fade-up、pulse-glow-tech、data-flow、shimmer）
- 增强玻璃态效果和深度层级

### Phase 3: 内容深度重构
- 新增技术白皮书板块（性能分析、设计决策记录）
- 新增企业案例研究
- 新增 Prompt 工程深度解读
- 扩展学术引用至 40+ 条
- 更新导航结构，新增"技术白皮书"入口

### Phase 4: 架构优化
- 引入 UnoCSS 原子化 CSS 框架
- 引入 @vueuse/core Vue 组合式工具函数
- 配置 UnoCSS shortcuts（glass、interactive-card、gradient-text 等）

## 文件变更统计
- 新增文件: 12 个
- 修改文件: 9 个
- 新增依赖: unocss, @vueuse/core

Author: LessUp

docs/.vitepress/config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { withMermaid } from 'vitepress-plugin-mermaid'
 import llmstxt from 'vitepress-plugin-llms'
+import UnoCSS from 'unocss/vite'
 import { zhNav, enNav, zhSidebar, enSidebar } from './site/atlas'
 import { siteFacts } from './site/facts'
 
@@ -114,7 +115,10 @@ export default withMermaid(defineConfig({
   ],
 
   vite: {
-    plugins: [llmstxt()]
+    plugins: [
+      UnoCSS(),
+      llmstxt()
+    ]
   },
 
   lastUpdated: true,

docs/.vitepress/site/atlas.ts

@@ -111,23 +111,32 @@ function createRuleSidebarGroups(lang: 'zh' | 'en') {
 
 export const zhNav = [
   { text: '项目导读', link: '/zh/introduction/mission', activeMatch: '/zh/introduction/' },
+  { text: '技术白皮书', link: '/zh/whitepaper/performance', activeMatch: '/zh/whitepaper/' },
   { text: '学院路径', link: '/zh/academy/learning-path', activeMatch: '/zh/academy/' },
   { text: '架构设计', link: '/zh/architecture/system-overview', activeMatch: '/zh/architecture/' },
-  { text: '实施指南', link: '/zh/guides/team-onboarding', activeMatch: '/zh/guides/' },
   { text: '规则索引', link: '/zh/rules/', activeMatch: '/zh/rules/' },
   { text: '研究引用', link: '/zh/research/references', activeMatch: '/zh/research/' },
 ];
 
 export const enNav = [
   { text: 'Introduction', link: '/en/introduction/mission', activeMatch: '/en/introduction/' },
+  { text: 'Whitepaper', link: '/en/whitepaper/performance', activeMatch: '/en/whitepaper/' },
   { text: 'Academy', link: '/en/academy/learning-path', activeMatch: '/en/academy/' },
   { text: 'Architecture', link: '/en/architecture/system-overview', activeMatch: '/en/architecture/' },
-  { text: 'Guides', link: '/en/guides/team-onboarding', activeMatch: '/en/guides/' },
   { text: 'Rules Index', link: '/en/rules/', activeMatch: '/en/rules/' },
   { text: 'Research', link: '/en/research/references', activeMatch: '/en/research/' },
 ];
 
 export const zhSidebar = {
+  '/zh/whitepaper/': [
+    {
+      text: '技术白皮书',
+      items: [
+        { text: '性能分析', link: '/zh/whitepaper/performance' },
+        { text: '设计决策', link: '/zh/whitepaper/design-decisions' },
+      ],
+    },
+  ],
   '/zh/introduction/': [
     {
       text: '项目导读',
@@ -143,6 +152,7 @@ export const zhSidebar = {
       items: [
         { text: '学院路径', link: '/zh/academy/learning-path' },
         { text: '维护者课程', link: '/zh/academy/maintainer-curriculum' },
+        { text: '企业案例研究', link: '/zh/academy/case-studies/enterprise-adoption' },
       ],
     },
   ],
@@ -174,6 +184,7 @@ export const zhSidebar = {
       text: '研究引用',
       items: [
         { text: '参考文献', link: '/zh/research/references' },
+        { text: 'Prompt 工程解读', link: '/zh/research/papers/prompt-engineering' },
         { text: '相关开源项目探究', link: '/zh/resources/ecosystem' },
         { text: '演进思考', link: '/zh/resources/extended-reading' },
         { text: '更新日志', link: '/zh/changelog' },
@@ -208,6 +219,15 @@ export const zhSidebar = {
 };
 
 export const enSidebar = {
+  '/en/whitepaper/': [
+    {
+      text: 'Whitepaper',
+      items: [
+        { text: 'Performance Analysis', link: '/en/whitepaper/performance' },
+        { text: 'Design Decisions', link: '/en/whitepaper/design-decisions' },
+      ],
+    },
+  ],
   '/en/introduction/': [
     {
       text: 'Introduction',
@@ -223,6 +243,7 @@ export const enSidebar = {
       items: [
         { text: 'Academy Path', link: '/en/academy/learning-path' },
         { text: 'Maintainer Curriculum', link: '/en/academy/maintainer-curriculum' },
+        { text: 'Enterprise Case Study', link: '/en/academy/case-studies/enterprise-adoption' },
       ],
     },
   ],
@@ -254,6 +275,7 @@ export const enSidebar = {
       text: 'Research',
       items: [
         { text: 'References', link: '/en/research/references' },
+        { text: 'Prompt Engineering Deep Dive', link: '/en/research/papers/prompt-engineering' },
         { text: 'Open Source Survey', link: '/en/resources/ecosystem' },
         { text: 'Evolution Notes', link: '/en/resources/extended-reading' },
         { text: 'Changelog', link: '/en/changelog' },

docs/.vitepress/theme/components/ArchitectureDiagram.vue

@@ -81,7 +81,7 @@ const svgClasses = computed(() => [
         :x="100"
         :y="76 + i * 95"
         text-anchor="middle"
-        fill="white"
+        :fill="isDark ? 'white' : 'var(--figure-fill-surface)'"
         font-family="var(--font-display)"
         font-size="20"
         font-weight="700"

docs/.vitepress/theme/components/ThemedLogo.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/**
+ * ThemedLogo - Theme-aware Logo component
+ * Automatically adjusts colors based on light/dark mode for perfect visibility
+ */
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  width?: number
+  height?: number
+}>()
+
+const { isDark } = useData()
+
+const width = computed(() => props.width || 100)
+const height = computed(() => props.height || 100)
+
+// Dynamic colors based on theme
+const colors = computed(() => ({
+  gradientStart: isDark.value ? '#7c8aff' : '#5c6ef8',
+  gradientEnd: isDark.value ? '#5ce1e6' : '#3dc9d0',
+  text: isDark.value ? '#1a1a2e' : '#fafafa',
+  mark: isDark.value ? '#ffb347' : '#f5a623'
+}))
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    :width="width"
+    :height="height"
+    role="img"
+    aria-label="Awesome Cursor Rules Logo"
+  >
+    <defs>
+      <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" :stop-color="colors.gradientStart" />
+        <stop offset="100%" :stop-color="colors.gradientEnd" />
+      </linearGradient>
+      <!-- Glow filter for dark mode -->
+      <filter v-if="isDark" id="logo-glow" x="-20%" y="-20%" width="140%" height="140%">
+        <feGaussianBlur stdDeviation="2" result="blur" />
+        <feMerge>
+          <feMergeNode in="blur" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </defs>
+
+    <!-- Background rounded rectangle -->
+    <rect
+      width="100"
+      height="100"
+      rx="20"
+      fill="url(#logo-gradient)"
+      :filter="isDark ? 'url(#logo-glow)' : undefined"
+    />
+
+    <!-- Main text "CR" -->
+    <text
+      x="50"
+      y="50"
+      font-family="ui-sans-serif, system-ui, sans-serif"
+      font-size="45"
+      font-weight="700"
+      :fill="colors.text"
+      text-anchor="middle"
+      dominant-baseline="middle"
+    >
+      CR
+    </text>
+
+    <!-- Accent mark dot -->
+    <circle cx="85" cy="15" r="8" :fill="colors.mark" />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  transition: filter 0.3s ease;
+}
+
+svg:hover {
+  filter: brightness(1.1);
+}
+</style>

docs/.vitepress/theme/components/ThemedSvg.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
- * ThemedSvg - Theme-aware SVG wrapper component
- * Automatically adjusts SVG appearance for light/dark mode
+ * ThemedSvg - Enhanced theme-aware SVG wrapper component
+ * Automatically adjusts SVG appearance for light/dark mode with multiple strategies
  */
 import { useData } from 'vitepress'
 import { computed } from 'vue'
@@ -10,6 +10,14 @@ const props = defineProps<{
   class?: string
   viewBox?: string
   ariaLabel?: string
+  /** Invert colors in dark mode */
+  invertOnDark?: boolean
+  /** Brightness adjustment (1.0 = no change) */
+  adjustBrightness?: number
+  /** Contrast adjustment (1.0 = no change) */
+  adjustContrast?: number
+  /** Saturation adjustment (1.0 = no change) */
+  adjustSaturation?: number
 }>()
 
 const { isDark } = useData()
@@ -19,12 +27,43 @@ const svgClasses = computed(() => [
   props.class,
   { 'themed-svg--dark': isDark.value }
 ])
+
+const filterStyle = computed(() => {
+  if (!isDark.value) return 'none'
+
+  const filters: string[] = []
+
+  // Invert colors for dark mode
+  if (props.invertOnDark) {
+    filters.push('invert(1)')
+  }
+
+  // Brightness adjustment
+  const brightness = props.adjustBrightness ?? 1.05
+  if (brightness !== 1) {
+    filters.push(`brightness(${brightness})`)
+  }
+
+  // Contrast adjustment
+  const contrast = props.adjustContrast ?? 1.02
+  if (contrast !== 1) {
+    filters.push(`contrast(${contrast})`)
+  }
+
+  // Saturation adjustment
+  if (props.adjustSaturation && props.adjustSaturation !== 1) {
+    filters.push(`saturate(${props.adjustSaturation})`)
+  }
+
+  return filters.length > 0 ? filters.join(' ') : 'none'
+})
 </script>
 
 <template>
   <svg
     :class="svgClasses"
     :viewBox="viewBox"
+    :style="{ filter: filterStyle }"
     role="img"
     :aria-label="ariaLabel"
   >
@@ -35,10 +74,20 @@ const svgClasses = computed(() => [
 <style scoped>
 .themed-svg {
   color: var(--figure-text-label);
-  transition: filter var(--duration-normal) var(--ease-out-expo);
+  transition:
+    filter var(--duration-normal, 0.25s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+    opacity var(--duration-normal, 0.25s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
 }
 
 .themed-svg--dark {
-  filter: brightness(1.05) contrast(1.02);
+  /* Enhanced dark mode visibility */
+  opacity: 1;
+}
+
+/* Ensure SVG inherits color for currentColor usage */
+.themed-svg :deep(*) {
+  transition:
+    fill var(--duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+    stroke var(--duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
 }
 </style>

docs/.vitepress/theme/index.ts

@@ -1,4 +1,5 @@
 import DefaultTheme from 'vitepress/theme'
+import 'virtual:uno.css'
 import './style.css'
 import ExecutiveHero from './components/ExecutiveHero.vue'
 import MetricBand from './components/MetricBand.vue'
@@ -17,6 +18,7 @@ import ReferenceCard from './components/ReferenceCard.vue'
 import ArchitectureDiagram from './components/ArchitectureDiagram.vue'
 import RuleDecisionTree from './components/RuleDecisionTree.vue'
 import RuleCard from './components/RuleCard.vue'
+import ThemedLogo from './components/ThemedLogo.vue'
 
 export default {
   ...DefaultTheme,
@@ -38,6 +40,7 @@ export default {
     app.component('ArchitectureDiagram', ArchitectureDiagram)
     app.component('RuleDecisionTree', RuleDecisionTree)
     app.component('RuleCard', RuleCard)
+    app.component('ThemedLogo', ThemedLogo)
 
     // Legacy Components (kept for backward compatibility)
     app.component('ExecutiveHero', ExecutiveHero)