feat: add queue management and terminal dashboard documentation in Chinese

- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure. - Added terminal dashboard documentation, highlighting its layout, core features, and usage examples. - Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.
2026-03-02 15:23:19 +08:00 · 2026-03-01 10:52:46 +08:00
parent a753327acc
commit 2fb93d20e0
34 changed files with 6908 additions and 257 deletions
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,5 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { withMermaid } from 'vitepress-plugin-mermaid'
+import { transformDemoBlocks } from './theme/markdownTransform'
+import path from 'path'

 const repoName = process.env.GITHUB_REPOSITORY?.split('/')[1]
 const isUserOrOrgSite = Boolean(repoName && repoName.endsWith('.github.io'))
@@ -11,7 +13,7 @@ const base =
 export default withMermaid(defineConfig({
  title: 'Claude Code Workflow Documentation',
  description: 'Claude Code Workspace - Advanced AI-Powered Development Environment',
-  lang: 'zh-CN',
+  lang: 'en-US',
  base,

  // Ignore dead links for incomplete docs
@@ -44,12 +46,22 @@ export default withMermaid(defineConfig({

  // Vite build/dev optimizations
  vite: {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '../../ccw/frontend/src'),
+        '@/components': path.resolve(__dirname, '../../ccw/frontend/src/components'),
+        '@/lib': path.resolve(__dirname, '../../ccw/frontend/src/lib')
+      }
+    },
    optimizeDeps: {
-      include: ['flexsearch']
+      include: ['flexsearch', 'react', 'react-dom']
    },
    build: {
      target: 'es2019',
      cssCodeSplit: true
+    },
+    ssr: {
+      noExternal: ['react', 'react-dom', 'class-variance-authority', 'clsx', 'tailwind-merge']
    }
  },

@@ -68,13 +80,7 @@ export default withMermaid(defineConfig({
      { text: 'Guide', link: '/guide/ch01-what-is-claude-dms3' },
      { text: 'Commands', link: '/commands/claude/' },
      { text: 'Skills', link: '/skills/' },
-      { text: 'Features', link: '/features/spec' },
-      {
-        text: 'Languages',
-        items: [
-          { text: '简体中文', link: '/zh/guide/ch01-what-is-claude-dms3' }
-        ]
-      }
+      { text: 'Features', link: '/features/spec' }
    ],

    // Sidebar - 优化导航结构，增加二级标题和归类
@@ -181,6 +187,17 @@ export default withMermaid(defineConfig({
          ]
        }
      ],
+      '/components/': [
+        {
+          text: 'UI Components',
+          collapsible: true,
+          items: [
+            { text: 'Button', link: '/components/ui/button' },
+            { text: 'Card', link: '/components/ui/card' },
+            { text: 'Input', link: '/components/ui/input' }
+          ]
+        }
+      ],
      '/mcp/': [
        {
          text: '🔗 MCP Tools',
@@ -276,6 +293,14 @@ export default withMermaid(defineConfig({
    ],
    config: (md) => {
      // Add markdown-it plugins if needed
+      // Custom demo block transform is handled by markdownTransform.ts
+      md.core.ruler.before('block', 'demo-blocks', (state) => {
+        const src = state.src
+        const transformed = transformDemoBlocks(src, { path: '' })
+        if (transformed !== src) {
+          state.src = transformed
+        }
+      })
    }
  },

@@ -299,13 +324,7 @@ export default withMermaid(defineConfig({
          { text: '指南', link: '/zh/guide/ch01-what-is-claude-dms3' },
          { text: '命令', link: '/zh/commands/claude/' },
          { text: '技能', link: '/zh/skills/claude-index' },
-          { text: '功能', link: '/zh/features/spec' },
-          {
-            text: '语言',
-            items: [
-              { text: 'English', link: '/guide/ch01-what-is-claude-dms3' }
-            ]
-          }
+          { text: '功能', link: '/zh/features/spec' }
        ],
        sidebar: {
          '/zh/guide/': [
@@ -424,6 +443,74 @@ export default withMermaid(defineConfig({
          ]
        }
      }
+    },
+    'zh-CN': {
+      label: '简体中文',
+      lang: 'zh-CN',
+      title: 'Claude Code Workflow 文档',
+      description: 'Claude Code Workspace - 高级 AI 驱动开发环境',
+      themeConfig: {
+        outline: {
+          level: [2, 3],
+          label: '本页目录'
+        },
+        nav: [
+          { text: '指南', link: '/zh-CN/guide/ch01-what-is-claude-dms3' },
+          { text: '命令', link: '/zh-CN/commands/claude/' },
+          { text: '技能', link: '/zh-CN/skills/claude-index' },
+          { text: '功能', link: '/zh-CN/features/spec' },
+          { text: '组件', link: '/zh-CN/components/' }
+        ],
+        sidebar: {
+          '/zh-CN/guide/': [
+            {
+              text: '📖 指南',
+              collapsible: false,
+              items: [
+                { text: 'Claude Code Workflow 是什么', link: '/zh-CN/guide/ch01-what-is-claude-dms3' },
+                { text: '快速开始', link: '/zh-CN/guide/ch02-getting-started' },
+                { text: '核心概念', link: '/zh-CN/guide/ch03-core-concepts' },
+                { text: '工作流基础', link: '/zh-CN/guide/ch04-workflow-basics' },
+                { text: '高级技巧', link: '/zh-CN/guide/ch05-advanced-tips' },
+                { text: '最佳实践', link: '/zh-CN/guide/ch06-best-practices' }
+              ]
+            },
+            {
+              text: '🚀 快速入口',
+              collapsible: true,
+              items: [
+                { text: '安装', link: '/zh-CN/guide/installation' },
+                { text: '第一个工作流', link: '/zh-CN/guide/first-workflow' },
+                { text: 'CLI 工具', link: '/zh-CN/guide/cli-tools' }
+              ]
+            }
+          ],
+          '/zh-CN/features/': [
+            {
+              text: '⚙️ 核心功能',
+              collapsible: false,
+              items: [
+                { text: 'Spec 规范系统', link: '/zh-CN/features/spec' },
+                { text: 'Memory 记忆系统', link: '/zh-CN/features/memory' },
+                { text: 'CLI 调用', link: '/zh-CN/features/cli' },
+                { text: 'Dashboard 面板', link: '/zh-CN/features/dashboard' },
+                { text: 'CodexLens', link: '/zh-CN/features/codexlens' }
+              ]
+            }
+          ],
+          '/zh-CN/components/': [
+            {
+              text: 'UI 组件',
+              collapsible: true,
+              items: [
+                { text: 'Button 按钮', link: '/zh-CN/components/ui/button' },
+                { text: 'Card 卡片', link: '/zh-CN/components/ui/card' },
+                { text: 'Input 输入框', link: '/zh-CN/components/ui/input' }
+              ]
+            }
+          ]
+        }
+      }
    }
  }
 }))
--- a/docs/.vitepress/demos/README.md
+++ b/docs/.vitepress/demos/README.md
@@ -0,0 +1,64 @@
+# Demo Components
+
+This directory contains React components that are embedded in the documentation as interactive demos.
+
+## Creating a New Demo
+
+1. Create a new `.tsx` file in this directory (e.g., `my-demo.tsx`)
+2. Export a default React component
+3. Use it in markdown with `:::demo my-demo :::`
+
+## Demo Template
+
+```tsx
+import React from 'react'
+
+/**
+ * Brief description of what this demo shows
+ */
+export default function MyDemo() {
+  return (
+    <div style={{ padding: '16px' }}>
+      {/* Your demo content */}
+    </div>
+  )
+}
+```
+
+## Demo Guidelines
+
+- **Keep it simple**: Demos should be focused and easy to understand
+- **Use inline styles**: Avoid external dependencies for portability
+- **Add comments**: Explain what the demo is showing
+- **Test interactions**: Ensure buttons, inputs, etc. work correctly
+- **Handle state**: Use React hooks (`useState`, `useEffect`) for interactive demos
+
+## Demo File Naming
+
+- Use kebab-case: `button-variants.tsx`, `card-basic.tsx`
+- Group by category:
+  - `ui/` - UI component demos
+  - `shared/` - Shared component demos
+  - `pages/` - Page-level demos
+
+## Using Props
+
+If you need to pass custom props to a demo, use the extended markdown syntax:
+
+```markdown
+:::demo my-demo
+title: Custom Title
+height: 300px
+expandable: false
+:::
+```
+
+## Available Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | string | - | Demo component name (required) |
+| title | string | name | Custom demo title |
+| height | string | 'auto' | Container height |
+| expandable | boolean | true | Allow expand/collapse |
+| showCode | boolean | true | Show code tab |
--- a/docs/.vitepress/demos/button-variants.tsx
+++ b/docs/.vitepress/demos/button-variants.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Button } from '@/components/ui/Button'
+
+/**
+ * Button Variants Demo
+ * Shows all 8 visual variants and 4 sizes of the Button component
+ *
+ * Variants include:
+ * - default: Primary brand color button
+ * - destructive: Red danger button
+ * - outline: Bordered light button
+ * - secondary: Gray secondary button
+ * - ghost: Transparent hover button
+ * - link: Link-style button
+ * - gradient: Brand gradient button
+ * - gradientPrimary: Primary gradient button
+ *
+ * Sizes include:
+ * - default: Standard size (h-10)
+ * - sm: Small size (h-9)
+ * - lg: Large size (h-11)
+ * - icon: Square icon size (h-10 w-10)
+ */
+export default function ButtonVariants() {
+  return (
+    <div className="flex flex-col gap-6 p-4">
+      {/* Variants Section */}
+      <div>
+        <h3 className="text-sm font-semibold mb-3 text-muted-foreground">Variants</h3>
+        <div className="flex flex-wrap gap-3">
+          <Button variant="default">Default</Button>
+          <Button variant="destructive">Destructive</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="link">Link</Button>
+          <Button variant="gradient">Gradient</Button>
+          <Button variant="gradientPrimary">Gradient Primary</Button>
+        </div>
+      </div>
+
+      {/* Sizes Section */}
+      <div>
+        <h3 className="text-sm font-semibold mb-3 text-muted-foreground">Sizes</h3>
+        <div className="flex flex-wrap items-center gap-3">
+          <Button size="sm">Small</Button>
+          <Button size="default">Default</Button>
+          <Button size="lg">Large</Button>
+          <Button size="icon">🔍</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/docs/.vitepress/theme/components/CodeViewer.vue
+++ b/docs/.vitepress/theme/components/CodeViewer.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  code: string
+  lang?: string
+  showCopy?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'tsx',
+  showCopy: true
+})
+
+const copyStatus = ref<'idle' | 'copying' | 'copied'>('idle')
+const copyTimeout = ref<number>()
+
+const lineCount = computed(() => props.code.split('\n').length)
+const copyButtonText = computed(() => {
+  switch (copyStatus.value) {
+    case 'copying': return '复制中...'
+    case 'copied': return '已复制'
+    default: return '复制'
+  }
+})
+
+const copyCode = async () => {
+  if (copyStatus.value === 'copying') return
+
+  copyStatus.value = 'copying'
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copyStatus.value = 'copied'
+
+    if (copyTimeout.value) {
+      clearTimeout(copyTimeout.value)
+    }
+    copyTimeout.value = window.setTimeout(() => {
+      copyStatus.value = 'idle'
+    }, 2000)
+  } catch {
+    copyStatus.value = 'idle'
+  }
+}
+</script>
+
+<template>
+  <div class="code-viewer">
+    <div class="code-header">
+      <span class="code-lang">{{ lang }}</span>
+      <button
+        v-if="showCopy"
+        class="copy-button"
+        :class="copyStatus"
+        :disabled="copyStatus === 'copying'"
+        @click="copyCode"
+      >
+        <span class="copy-icon">📋</span>
+        <span class="copy-text">{{ copyButtonText }}</span>
+      </button>
+    </div>
+    <pre class="code-content" :class="`language-${lang}`"><code>{{ code }}</code></pre>
+  </div>
+</template>
+
+<style scoped>
+.code-viewer {
+  background: var(--vp-code-bg);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: var(--vp-code-block-bg);
+  border-bottom: 1px solid var(--vp-c-border);
+}
+
+.code-lang {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.copy-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border: 1px solid var(--vp-c-border);
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.copy-button:hover:not(:disabled) {
+  background: var(--vp-c-bg-mute);
+  border-color: var(--vp-c-brand);
+}
+
+.copy-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.copy-button.copied {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.copy-icon {
+  font-size: 14px;
+}
+
+.copy-text {
+  font-size: 12px;
+}
+
+.code-content {
+  padding: 16px;
+  margin: 0;
+  overflow-x: auto;
+}
+
+.code-content code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--vp-code-color);
+  white-space: pre;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .code-content {
+    padding: 12px;
+    font-size: 13px;
+  }
+}
+</style>
--- a/docs/.vitepress/theme/components/DemoContainer.vue
+++ b/docs/.vitepress/theme/components/DemoContainer.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { createRoot } from 'react-dom/client'
+import type { Root } from 'react-dom/client'
+import CodeViewer from './CodeViewer.vue'
+
+interface Props {
+  name: string              // Demo component name
+  file?: string            // Optional: explicit source file
+  height?: string          // Demo container height
+  expandable?: boolean     // Allow expand/collapse
+  showCode?: boolean       // Show code tab
+  title?: string           // Custom demo title
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: 'auto',
+  expandable: true,
+  showCode: true,
+  title: ''
+})
+
+const demoRoot = ref<HTMLElement>()
+const reactRoot = ref<Root>()
+const sourceCode = ref('')
+const isExpanded = ref(false)
+const activeTab = ref<'preview' | 'code'>('preview')
+const isLoading = ref(true)
+const loadError = ref('')
+
+// Derive demo title
+const demoTitle = computed(() => props.title || props.name)
+
+onMounted(async () => {
+  try {
+    // Dynamically import demo component
+    const demoModule = await import(`../demos/${props.name}.tsx`)
+    const DemoComponent = demoModule.default || demoModule[props.name]
+
+    if (!DemoComponent) {
+      throw new Error(`Demo component "${props.name}" not found`)
+    }
+
+    // Mount React component
+    if (demoRoot.value) {
+      reactRoot.value = createRoot(demoRoot.value)
+      reactRoot.value.render(DemoComponent)
+
+      // Extract source code
+      try {
+        const rawModule = await import(`../demos/${props.name}.tsx?raw`)
+        sourceCode.value = rawModule.default || rawModule
+      } catch {
+        sourceCode.value = '// Source code not available'
+      }
+    }
+  } catch (err) {
+    loadError.value = err instanceof Error ? err.message : 'Failed to load demo'
+    console.error('DemoContainer load error:', err)
+  } finally {
+    isLoading.value = false
+  }
+})
+
+onUnmounted(() => {
+  reactRoot.value?.unmount()
+})
+
+const toggleExpanded = () => {
+  isExpanded.value = !isExpanded.value
+}
+
+const switchTab = (tab: 'preview' | 'code') => {
+  activeTab.value = tab
+}
+</script>
+
+<template>
+  <div class="demo-container" :class="{ expanded: isExpanded }">
+    <!-- Demo Header -->
+    <div class="demo-header">
+      <span class="demo-title">{{ demoTitle }}</span>
+      <div class="demo-actions">
+        <button
+          v-if="expandable"
+          class="demo-toggle"
+          :aria-expanded="isExpanded"
+          @click="toggleExpanded"
+        >
+          {{ isExpanded ? '收起' : '展开' }}
+        </button>
+        <button
+          v-if="showCode"
+          class="tab-button"
+          :class="{ active: activeTab === 'preview' }"
+          :aria-selected="activeTab === 'preview'"
+          @click="switchTab('preview')"
+        >
+          预览
+        </button>
+        <button
+          v-if="showCode"
+          class="tab-button"
+          :class="{ active: activeTab === 'code' }"
+          :aria-selected="activeTab === 'code'"
+          @click="switchTab('code')"
+        >
+          代码
+        </button>
+      </div>
+    </div>
+
+    <!-- Demo Content -->
+    <div
+      class="demo-content"
+      :style="{ height: isExpanded ? 'auto' : height }"
+    >
+      <!-- Loading State -->
+      <div v-if="isLoading" class="demo-loading">
+        <div class="spinner"></div>
+        <span>加载中...</span>
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="loadError" class="demo-error">
+        <span class="error-icon">⚠️</span>
+        <span class="error-message">{{ loadError }}</span>
+      </div>
+
+      <!-- Preview Content -->
+      <div
+        v-else-if="activeTab === 'preview'"
+        ref="demoRoot"
+        class="demo-preview"
+      />
+
+      <!-- Code Content -->
+      <CodeViewer
+        v-else-if="showCode && activeTab === 'code'"
+        :code="sourceCode"
+        lang="tsx"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+  margin: 16px 0;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+
+.demo-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-border);
+}
+
+.demo-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.demo-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.demo-toggle,
+.tab-button {
+  padding: 4px 12px;
+  border: none;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.demo-toggle:hover,
+.tab-button:hover {
+  background: var(--vp-c-bg-mute);
+}
+
+.tab-button.active {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-brand);
+  font-weight: 500;
+}
+
+.demo-content {
+  background: var(--vp-c-bg);
+  transition: height 0.3s ease;
+}
+
+.demo-preview {
+  padding: 24px;
+  min-height: 100px;
+}
+
+.demo-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px;
+  color: var(--vp-c-text-2);
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--vp-c-border);
+  border-top-color: var(--vp-c-brand);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.demo-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px;
+  color: var(--vp-c-danger-1);
+  background: var(--vp-c-danger-soft);
+}
+
+.error-icon {
+  font-size: 24px;
+}
+
+.error-message {
+  font-size: 14px;
+}
+
+.demo-container.expanded .demo-content {
+  height: auto !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .demo-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .demo-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .demo-preview {
+    padding: 16px;
+  }
+}
+</style>
--- a/docs/.vitepress/theme/components/LanguageSwitcher.vue
+++ b/docs/.vitepress/theme/components/LanguageSwitcher.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useData } from 'vitepress'
+
+const { site, lang, page } = useData()
+
+const isOpen = ref(false)
+const switcherRef = ref<HTMLElement>()
+
+// Get available locales from VitePress config
+const locales = computed(() => {
+  const localeConfig = site.value.locales || {}
+  return Object.entries(localeConfig).map(([code, config]) => ({
+    code,
+    label: (config as any).label || code,
+    link: (config as any).link || `/${code === 'root' ? '' : code}/`
+  }))
+})
+
+// Current locale
+const currentLocale = computed(() => {
+  const current = locales.value.find(l => l.code === lang.value)
+  return current || locales.value[0]
+})
+
+// Get alternate language link for current page
+const getAltLink = (localeCode: string) => {
+  if (localeCode === 'root') localeCode = ''
+
+  // Get current page path without locale prefix
+  const currentPath = page.value.relativePath
+  const altPath = localeCode ? `/${localeCode}/${currentPath}` : `/${currentPath}`
+
+  return altPath
+}
+
+const switchLanguage = (localeCode: string) => {
+  const altLink = getAltLink(localeCode)
+  window.location.href = altLink
+}
+
+// Close dropdown when clicking outside
+onMounted(() => {
+  const handleClickOutside = (e: MouseEvent) => {
+    if (switcherRef.value && !switcherRef.value.contains(e.target as Node)) {
+      isOpen.value = false
+    }
+  }
+  document.addEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="switcherRef" class="language-switcher">
+    <button
+      class="switcher-button"
+      :aria-expanded="isOpen"
+      aria-label="Switch language"
+      @click="isOpen = !isOpen"
+    >
+      <span class="current-locale">{{ currentLocale?.label }}</span>
+      <span class="dropdown-icon" :class="{ open: isOpen }">▼</span>
+    </button>
+
+    <Transition name="fade">
+      <ul v-if="isOpen" class="locale-list">
+        <li v-for="locale in locales" :key="locale.code">
+          <button
+            class="locale-button"
+            :class="{ active: locale.code === lang }"
+            @click="switchLanguage(locale.code)"
+          >
+            <span class="locale-label">{{ locale.label }}</span>
+            <span v-if="locale.code === lang" class="check-icon">✓</span>
+          </button>
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.language-switcher {
+  position: relative;
+  display: inline-block;
+}
+
+.switcher-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.switcher-button:hover {
+  background: var(--vp-c-bg-mute);
+  border-color: var(--vp-c-brand);
+}
+
+.current-locale {
+  font-weight: 500;
+}
+
+.dropdown-icon {
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.dropdown-icon.open {
+  transform: rotate(180deg);
+}
+
+.locale-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 150px;
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+}
+
+.locale-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.locale-button:hover {
+  background: var(--vp-c-bg-mute);
+}
+
+.locale-button.active {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.locale-label {
+  font-weight: 500;
+}
+
+.check-icon {
+  font-size: 16px;
+}
+
+/* Transitions */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .locale-list {
+    right: auto;
+    left: 0;
+  }
+}
+</style>
--- a/docs/.vitepress/theme/components/PropsTable.vue
+++ b/docs/.vitepress/theme/components/PropsTable.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+interface Prop {
+  name: string
+  type: string
+  required?: boolean
+  default?: string
+  description: string
+}
+
+interface Props {
+  props: Prop[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="props-table-container">
+    <table class="props-table">
+      <thead>
+        <tr>
+          <th>Prop</th>
+          <th>Type</th>
+          <th>Required</th>
+          <th>Default</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(prop, index) in props" :key="index" class="prop-row">
+          <td class="prop-name">
+            <code>{{ prop.name }}</code>
+          </td>
+          <td class="prop-type">
+            <code>{{ prop.type }}</code>
+          </td>
+          <td class="prop-required">
+            <span v-if="prop.required" class="badge required">Yes</span>
+            <span v-else class="badge optional">No</span>
+          </td>
+          <td class="prop-default">
+            <code v-if="prop.default !== undefined">{{ prop.default }}</code>
+            <span v-else class="empty">-</span>
+          </td>
+          <td class="prop-description">
+            {{ prop.description }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.props-table-container {
+  margin: 16px 0;
+  overflow-x: auto;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+}
+
+.props-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.props-table thead {
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-border);
+}
+
+.props-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.props-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.props-table tr:last-child td {
+  border-bottom: none;
+}
+
+.props-table tr:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.prop-name code,
+.prop-type code,
+.prop-default code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 13px;
+  padding: 2px 6px;
+  background: var(--vp-code-bg);
+  border-radius: 4px;
+  color: var(--vp-code-color);
+}
+
+.prop-name {
+  font-weight: 500;
+  color: var(--vp-c-brand);
+  white-space: nowrap;
+}
+
+.prop-type {
+  white-space: nowrap;
+}
+
+.prop-required {
+  white-space: nowrap;
+  width: 80px;
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.badge.required {
+  background: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger-1);
+}
+
+.badge.optional {
+  background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-2);
+}
+
+.prop-default {
+  white-space: nowrap;
+}
+
+.prop-default .empty {
+  color: var(--vp-c-text-3);
+}
+
+.prop-description {
+  color: var(--vp-c-text-2);
+  max-width: 400px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .props-table {
+    font-size: 13px;
+  }
+
+  .props-table th,
+  .props-table td {
+    padding: 8px 12px;
+  }
+
+  .prop-description {
+    max-width: 200px;
+  }
+}
+</style>
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -7,9 +7,16 @@ import Breadcrumb from './components/Breadcrumb.vue'
 import PageToc from './components/PageToc.vue'
 import ProfessionalHome from './components/ProfessionalHome.vue'
 import Layout from './layouts/Layout.vue'
+// Demo system components
+import DemoContainer from './components/DemoContainer.vue'
+import CodeViewer from './components/CodeViewer.vue'
+import PropsTable from './components/PropsTable.vue'
+// Language switcher component
+import LanguageSwitcher from './components/LanguageSwitcher.vue'
 import './styles/variables.css'
 import './styles/custom.css'
 import './styles/mobile.css'
+import './styles/demo.css'

 export default {
  extends: DefaultTheme,
@@ -23,5 +30,11 @@ export default {
    app.component('Breadcrumb', Breadcrumb)
    app.component('PageToc', PageToc)
    app.component('ProfessionalHome', ProfessionalHome)
+    // Register demo system components
+    app.component('DemoContainer', DemoContainer)
+    app.component('CodeViewer', CodeViewer)
+    app.component('PropsTable', PropsTable)
+    // Register language switcher component
+    app.component('LanguageSwitcher', LanguageSwitcher)
  }
 }
--- a/docs/.vitepress/theme/layouts/Layout.vue
+++ b/docs/.vitepress/theme/layouts/Layout.vue
@@ -3,6 +3,7 @@ import DefaultTheme from 'vitepress/theme'
 import { onBeforeUnmount, onMounted } from 'vue'
 import { useDynamicIcon } from '../composables/useDynamicIcon'
 import ThemeLogo from '../components/ThemeLogo.vue'
+import LanguageSwitcher from '../components/LanguageSwitcher.vue'

 let mediaQuery: MediaQueryList | null = null
 let systemThemeChangeHandler: (() => void) | null = null
@@ -84,6 +85,7 @@ onBeforeUnmount(() => {
        <DocSearch />
        <DarkModeToggle />
        <ThemeSwitcher />
+        <LanguageSwitcher />
      </div>
    </template>
  </DefaultTheme.Layout>
--- a/docs/.vitepress/theme/markdownTransform.ts
+++ b/docs/.vitepress/theme/markdownTransform.ts
@@ -0,0 +1,66 @@
+import type { MarkdownTransformContext } from 'vitepress'
+
+const demoBlockRE = /:::\s*demo\s+(.+?)\s*:::/g
+
+export interface DemoBlockMeta {
+  name: string
+  file?: string
+  height?: string
+  expandable?: boolean
+  showCode?: boolean
+  title?: string
+}
+
+export function transformDemoBlocks(
+  code: string,
+  ctx: MarkdownTransformContext
+): string {
+  return code.replace(demoBlockRE, (match, content) => {
+    const meta = parseDemoBlock(content)
+    const demoId = `demo-${ctx.path.replace(/[^a-z0-9]/gi, '-')}-${Math.random().toString(36).slice(2, 8)}`
+
+    const props = [
+      `id="${demoId}"`,
+      `name="${meta.name}"`,
+      meta.file ? `file="${meta.file}"` : '',
+      meta.height ? `height="${meta.height}"` : '',
+      meta.expandable === false ? ':expandable="false"' : ':expandable="true"',
+      meta.showCode === false ? ':show-code="false"' : ':show-code="true"',
+      meta.title ? `title="${meta.title}"` : ''
+    ].filter(Boolean).join(' ')
+
+    return `<DemoContainer ${props} />`
+  })
+}
+
+function parseDemoBlock(content: string): DemoBlockMeta {
+  const lines = content.trim().split('\n')
+  const firstLine = lines[0] || ''
+
+  // Parse: name or # file
+  const [name, ...rest] = firstLine.split(/\s+/)
+  const file = rest.find(l => l.startsWith('#'))?.slice(1)
+
+  return {
+    name: name.trim(),
+    file,
+    height: extractProp(lines, 'height'),
+    expandable: extractProp(lines, 'expandable') !== 'false',
+    showCode: extractProp(lines, 'showCode') !== 'false',
+    title: extractProp(lines, 'title')
+  }
+}
+
+function extractProp(lines: string[], prop: string): string | undefined {
+  const line = lines.find(l => l.trim().startsWith(`${prop}:`))
+  return line?.split(':', 2)[1]?.trim()
+}
+
+// VitePress markdown configuration hook
+export function markdownTransformSetup() {
+  return {
+    transform: (code: string, ctx: MarkdownTransformContext) => {
+      return transformDemoBlocks(code, ctx)
+    }
+  }
+}
--- a/docs/.vitepress/theme/styles/demo.css
+++ b/docs/.vitepress/theme/styles/demo.css
@@ -0,0 +1,104 @@
+/* Demo system styles for VitePress */
+
+/* Demo container theme-aware styling */
+.demo-container {
+  /* Theme-aware borders */
+  border: 1px solid var(--vp-c-border);
+
+  /* Rounded corners */
+  border-radius: 8px;
+
+  /* Subtle shadow */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  /* Dark mode support */
+  background: var(--vp-c-bg);
+}
+
+.demo-preview {
+  /* Consistent padding */
+  padding: 24px;
+
+  /* Min height for visibility */
+  min-height: 100px;
+
+  /* Center content when small */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Dark mode overrides */
+.dark .demo-container {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-divider);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .demo-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .demo-preview {
+    padding: 16px;
+  }
+
+  .demo-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+/* Demo code viewer styles */
+.code-viewer {
+  background: var(--vp-code-bg);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: var(--vp-code-block-bg);
+  border-bottom: 1px solid var(--vp-c-border);
+}
+
+/* Props table styles */
+.props-table-container {
+  margin: 16px 0;
+  overflow-x: auto;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+}
+
+.props-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.props-table thead {
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-border);
+}
+
+/* Interactive demo feedback */
+.demo-container:has(.demo-preview:hover) {
+  border-color: var(--vp-c-brand);
+  transition: border-color 0.2s;
+}
+
+/* Code syntax highlighting in demos */
+.demo-preview code {
+  font-family: var(--vp-font-family-mono);
+  font-size: 13px;
+  padding: 2px 6px;
+  background: var(--vp-code-bg);
+  border-radius: 4px;
+  color: var(--vp-code-color);
+}