feat: add documentation for Checkbox, Input, and Select components; enhance Queue and Terminal features

- Introduced Checkbox component documentation in Chinese, covering usage, properties, and examples. - Added Input component documentation in Chinese, detailing its attributes and various states. - Created Select component documentation in Chinese, including subcomponents and usage examples. - Developed Queue management documentation, outlining its core functionalities and component structure. - Added Terminal dashboard documentation, describing its layout, core features, and usage examples. - Documented team workflows, detailing various team skills and their applications in project management.
2026-03-03 15:43:11 +08:00 · 2026-03-02 19:38:30 +08:00
parent a58aa26a30
commit 99d6438303
26 changed files with 1017 additions and 378 deletions
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -102,6 +102,15 @@ export default withMermaid(defineConfig({
            { text: 'First Workflow', link: '/guide/first-workflow' },
            { text: 'CLI Tools', link: '/guide/cli-tools' }
          ]
+        },
+        {
+          text: '📝 CLAUDE.md & MCP',
+          collapsible: true,
+          items: [
+            { text: 'CLAUDE.md Guide', link: '/guide/claude-md' },
+            { text: 'CCW MCP Tools', link: '/guide/ccwmcp' },
+            { text: 'MCP Setup', link: '/guide/mcp-setup' }
+          ]
        }
      ],
      '/commands/': [
@@ -128,6 +137,13 @@ export default withMermaid(defineConfig({
            { text: 'Prep', link: '/commands/codex/prep' },
            { text: 'Review', link: '/commands/codex/review' }
          ]
+        },
+        {
+          text: '🔧 CLI Reference',
+          collapsible: true,
+          items: [
+            { text: 'CLI Commands', link: '/cli/commands' }
+          ]
        }
      ],
      '/skills/': [
@@ -175,6 +191,34 @@ export default withMermaid(defineConfig({
            { text: 'Core Skills', link: '/skills/core-skills' },
            { text: 'Reference', link: '/skills/reference' }
          ]
+        },
+        {
+          text: '📋 Skill Specifications',
+          collapsible: true,
+          items: [
+            { text: 'Document Standards', link: '/skills/specs/document-standards' },
+            { text: 'Issue Classification', link: '/skills/specs/issue-classification' },
+            { text: 'Quality Gates', link: '/skills/specs/quality-gates' },
+            { text: 'Quality Standards', link: '/skills/specs/quality-standards' },
+            { text: 'Reference Docs Spec', link: '/skills/specs/reference-docs-spec' },
+            { text: 'Review Dimensions', link: '/skills/specs/review-dimensions' }
+          ]
+        },
+        {
+          text: '📄 Skill Templates',
+          collapsible: true,
+          items: [
+            { text: 'Architecture Doc', link: '/skills/templates/architecture-doc' },
+            { text: 'Autonomous Action', link: '/skills/templates/autonomous-action' },
+            { text: 'Autonomous Orchestrator', link: '/skills/templates/autonomous-orchestrator' },
+            { text: 'Epics Template', link: '/skills/templates/epics-template' },
+            { text: 'Issue Template', link: '/skills/templates/issue-template' },
+            { text: 'Product Brief', link: '/skills/templates/product-brief' },
+            { text: 'Requirements PRD', link: '/skills/templates/requirements-prd' },
+            { text: 'Review Report', link: '/skills/templates/review-report' },
+            { text: 'Sequential Phase', link: '/skills/templates/sequential-phase' },
+            { text: 'Skill Markdown', link: '/skills/templates/skill-md' }
+          ]
        }
      ],
      '/features/': [
@@ -194,7 +238,35 @@ export default withMermaid(defineConfig({
          collapsible: true,
          items: [
            { text: 'API Settings', link: '/features/api-settings' },
-            { text: 'System Settings', link: '/features/system-settings' }
+            { text: 'System Settings', link: '/features/system-settings' },
+            { text: 'Settings', link: '/features/settings' }
+          ]
+        },
+        {
+          text: '🔍 Discovery & Explorer',
+          collapsible: true,
+          items: [
+            { text: 'Discovery', link: '/features/discovery' },
+            { text: 'Explorer', link: '/features/explorer' },
+            { text: 'Extensions', link: '/features/extensions' }
+          ]
+        },
+        {
+          text: '📋 Issues & Tasks',
+          collapsible: true,
+          items: [
+            { text: 'Issue Hub', link: '/features/issue-hub' },
+            { text: 'Orchestrator', link: '/features/orchestrator' },
+            { text: 'Queue', link: '/features/queue' },
+            { text: 'Sessions', link: '/features/sessions' },
+            { text: 'Tasks History', link: '/features/tasks-history' }
+          ]
+        },
+        {
+          text: '🖥️ Terminal',
+          collapsible: true,
+          items: [
+            { text: 'Terminal Dashboard', link: '/features/terminal' }
          ]
        }
      ],
@@ -228,7 +300,8 @@ export default withMermaid(defineConfig({
          collapsible: true,
          items: [
            { text: 'Commands & Skills', link: '/reference/commands-skills' },
-            { text: 'Claude Code Hooks', link: '/reference/claude-code-hooks-guide' }
+            { text: 'Claude Code Hooks', link: '/reference/claude-code-hooks-guide' },
+            { text: 'Hook Templates Analysis', link: '/reference/hook-templates-analysis' }
          ]
        }
      ],
@@ -350,6 +423,7 @@ export default withMermaid(defineConfig({
          { text: '命令', link: '/zh/commands/claude/' },
          { text: '技能', link: '/zh/skills/claude-index' },
          { text: '功能', link: '/zh/features/spec' },
+          { text: '组件', link: '/zh/components/' },
          { text: '参考', link: '/zh/reference/commands-skills' }
        ],
        sidebar: {
@@ -458,6 +532,8 @@ export default withMermaid(defineConfig({
                { text: 'Memory 记忆系统', link: '/zh/features/memory' },
                { text: 'CLI 调用', link: '/zh/features/cli' },
                { text: 'Dashboard 面板', link: '/zh/features/dashboard' },
+                { text: 'Terminal 终端仪表板', link: '/zh/features/terminal' },
+                { text: 'Queue 队列管理', link: '/zh/features/queue' },
                { text: 'CodexLens', link: '/zh/features/codexlens' }
              ]
            },
@@ -470,6 +546,21 @@ export default withMermaid(defineConfig({
              ]
            }
          ],
+          '/zh/components/': [
+            {
+              text: 'UI 组件',
+              collapsible: true,
+              items: [
+                { text: '概述', link: '/zh/components/index' },
+                { text: 'Button 按钮', link: '/zh/components/ui/button' },
+                { text: 'Card 卡片', link: '/zh/components/ui/card' },
+                { text: 'Input 输入框', link: '/zh/components/ui/input' },
+                { text: 'Select 选择器', link: '/zh/components/ui/select' },
+                { text: 'Checkbox 复选框', link: '/zh/components/ui/checkbox' },
+                { text: 'Badge 徽章', link: '/zh/components/ui/badge' }
+              ]
+            }
+          ],
          '/zh/workflows/': [
            {
              text: '🔄 工作流系统',
@@ -495,33 +586,5 @@ 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/features/dashboard' }
-        ],
-        sidebar: {
-          '/zh-CN/features/': [
-            {
-              text: '⚙️ 核心功能',
-              collapsible: false,
-              items: [
-                { text: 'Dashboard 面板', link: '/zh-CN/features/dashboard' },
-                { text: 'Terminal 终端监控', link: '/zh-CN/features/terminal' },
-                { text: 'Queue 队列管理', link: '/zh-CN/features/queue' }
-              ]
-            }
-          ]
-        }
-      }
-    }
  }
 }))
--- a/docs/.vitepress/theme/components/DemoContainer.vue
+++ b/docs/.vitepress/theme/components/DemoContainer.vue
@@ -80,7 +80,7 @@ onMounted(async () => {
      }
    } else {
      // Dynamically import demo component from file
-      const demoModule = await import(`../demos/${props.name}.tsx`)
+      const demoModule = await import(`../../demos/${props.name}.tsx`)
      const DemoComponent = demoModule.default || demoModule[props.name]

      if (!DemoComponent) {
@@ -94,7 +94,7 @@ onMounted(async () => {

        // Extract source code
        try {
-          const rawModule = await import(`../demos/${props.name}.tsx?raw`)
+          const rawModule = await import(`../../demos/${props.name}.tsx?raw`)
          sourceCode.value = rawModule.default || rawModule
        } catch {
          sourceCode.value = '// Source code not available'
--- a/docs/.vitepress/theme/components/LanguageSwitcher.vue
+++ b/docs/.vitepress/theme/components/LanguageSwitcher.vue
@@ -27,13 +27,20 @@ const currentLocale = computed(() => {

 // Get alternate language link for current page
 const getAltLink = (localeCode: string) => {
-  if (localeCode === 'root') localeCode = ''
+  // Get current path and strip any existing locale prefix
+  let currentPath = page.value.relativePath

-  // Get current page path without locale prefix
-  const currentPath = page.value.relativePath
-  const altPath = localeCode ? `/${localeCode}/${currentPath}` : `/${currentPath}`
+  // Strip locale prefixes (zh/, zh-CN/) from path
+  currentPath = currentPath.replace(/^(zh-CN|zh)\//, '')

-  return altPath
+  // Remove .md extension for clean URL (VitePress uses .html)
+  currentPath = currentPath.replace(/\.md$/, '')
+
+  // Construct target path with locale prefix
+  if (localeCode === 'root' || localeCode === '') {
+    return `/${currentPath}`
+  }
+  return `/${localeCode}/${currentPath}`
 }

 const switchLanguage = (localeCode: string) => {
--- a/docs/.vitepress/theme/layouts/Layout.vue
+++ b/docs/.vitepress/theme/layouts/Layout.vue
@@ -196,7 +196,7 @@ onBeforeUnmount(() => {
 /* Container queries in mobile.css provide additional responsiveness */

 /* Mobile-specific styles */
-@media (max-width: var(--bp-sm)) {
+@media (max-width: 767px) {
  .hero-extensions {
    margin-top: 1rem;
    padding: 0 12px;
--- a/docs/.vitepress/theme/styles/demo.css
+++ b/docs/.vitepress/theme/styles/demo.css
@@ -35,7 +35,7 @@
 }

 /* Responsive design */
-@media (max-width: var(--bp-sm)) {
+@media (max-width: 767px) {
  .demo-header {
    flex-direction: column;
    align-items: flex-start;
--- a/docs/.vitepress/theme/styles/mobile.css
+++ b/docs/.vitepress/theme/styles/mobile.css
@@ -1,8 +1,10 @@
 /**
 * Mobile-Responsive Styles
 * Breakpoints: < 480px (xs), < 768px (sm/mobile), 768px-1024px (md/tablet), > 1024px (lg/desktop)
- * Uses CSS custom properties from variables.css: --bp-xs, --bp-sm, --bp-md, --bp-lg
 * WCAG 2.1 AA compliant
+ *
+ * NOTE: Media/container queries MUST use literal pixel values (CSS spec limitation)
+ * --bp-xs: 480px, --bp-sm: 768px, --bp-md: 1024px, --bp-lg: 1440px
 */

 /* ============================================
@@ -19,7 +21,7 @@
    max-width: 320px;
  }

-  @media (min-width: var(--bp-sm)) {
+  @media (min-width: 768px) {
    .VPSidebar {
      width: var(--vp-sidebar-width, 272px);
      max-width: none;
@@ -31,13 +33,13 @@
    padding: 16px;
  }

-  @media (min-width: var(--bp-sm)) {
+  @media (min-width: 768px) {
    .VPContent {
      padding: 24px;
    }
  }

-  @media (min-width: var(--bp-md)) {
+  @media (min-width: 1024px) {
    .VPContent {
      padding: 32px 48px;
    }
@@ -48,14 +50,14 @@
    display: none;
  }

-  @media (min-width: var(--bp-sm)) {
+  @media (min-width: 768px) {
    .VPDocOutline {
      display: block;
      width: 200px;
    }
  }

-  @media (min-width: var(--bp-md)) {
+  @media (min-width: 1024px) {
    .VPDocOutline {
      width: 256px;
    }
@@ -65,7 +67,7 @@
 /* Container Query Rules (modern browsers) */
@supports (container-type: inline-size) {
  /* Sidebar Container Queries */
-  @container sidebar (max-width: var(--bp-xs)) {
+  @container sidebar (max-width: 480px) {
    .VPSidebar .group {
      padding: 12px 16px;
    }
@@ -75,7 +77,7 @@
    }
  }

-  @container sidebar (min-width: var(--bp-xs)) and (max-width: var(--bp-sm)) {
+  @container sidebar (min-width: 480px) and (max-width: 768px) {
    .VPSidebar .group {
      padding: 16px 20px;
    }
@@ -85,7 +87,7 @@
    }
  }

-  @container sidebar (min-width: var(--bp-sm)) {
+  @container sidebar (min-width: 768px) {
    .VPSidebar .group {
      padding: 16px 24px;
    }
@@ -221,25 +223,25 @@
 }

 /* Generic Container-Responsive Utility Class */
-@container (max-width: var(--bp-xs)) {
+@container (max-width: 480px) {
  .container-responsive {
    padding: 0 var(--spacing-fluid-xs);
  }
 }

-@container (min-width: var(--bp-xs)) and (max-width: var(--bp-sm)) {
+@container (min-width: 480px) and (max-width: 768px) {
  .container-responsive {
    padding: 0 var(--spacing-fluid-sm);
  }
 }

-@container (min-width: var(--bp-sm)) and (max-width: var(--bp-md)) {
+@container (min-width: 768px) and (max-width: 1024px) {
  .container-responsive {
    padding: 0 var(--spacing-fluid-md);
  }
 }

-@container (min-width: var(--bp-md)) {
+@container (min-width: 1024px) {
  .container-responsive {
    padding: 0 var(--spacing-fluid-lg);
  }
@@ -250,7 +252,7 @@
 * ============================================ */

 /* Base Mobile Styles (320px+) */
-@media (max-width: var(--bp-sm)) {
+@media (max-width: 767px) {
  /* Typography */
  :root {
    --vp-font-size-base: 14px;
@@ -598,7 +600,7 @@
 /* ============================================
 * Tablet Styles (768px - 1024px)
 * ============================================ */
-@media (min-width: var(--bp-sm)) and (max-width: var(--bp-md)) {
+@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --vp-content-width: 760px;
    --vp-sidebar-width: 240px;
@@ -639,7 +641,7 @@
 /* ============================================
 * Desktop Styles (1024px+)
 * ============================================ */
-@media (min-width: var(--bp-md)) {
+@media (min-width: 1024px) {
  :root {
    --vp-layout-max-width: 1600px;
    --vp-content-width: 960px;
@@ -692,7 +694,7 @@
 /* ============================================
 * Large Desktop (1440px+)
 * ============================================ */
-@media (min-width: var(--bp-lg)) {
+@media (min-width: 1440px) {
  :root {
    --vp-content-width: 1040px;
    --vp-sidebar-width: 280px;
@@ -749,7 +751,7 @@
 /* ============================================
 * ProfessionalHome Component - Mobile Optimizations
 * ============================================ */
-@media (max-width: var(--bp-sm)) {
+@media (max-width: 767px) {
  /* Root level overflow prevention */
  html, body {
    max-width: 100vw;
@@ -921,7 +923,7 @@
 }

 /* ProfessionalHome - Tablet Optimizations */
-@media (min-width: var(--bp-sm)) and (max-width: var(--bp-md)) {
+@media (min-width: 768px) and (max-width: 1023px) {
  .pro-home .hero-section {
    padding: 3rem 0 2.5rem;
  }
@@ -941,7 +943,7 @@
 }

 /* ProfessionalHome - Small Mobile (< 480px) */
-@media (max-width: var(--bp-xs)) {
+@media (max-width: 479px) {
  .pro-home .hero-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
@@ -965,7 +967,7 @@
 /* ============================================
 * Dark Mode Specific
 * ============================================ */
-@media (max-width: var(--bp-sm)) {
+@media (max-width: 767px) {
  .dark {
    --vp-c-bg: #0f172a;
    --vp-c-text-1: #f1f5f9;
@@ -975,7 +977,7 @@
 /* ============================================
 * Print Styles for Mobile
 * ============================================ */
-@media print and (max-width: var(--bp-sm)) {
+@media print and (max-width: 767px) {
  .VPContent {
    font-size: 10pt;
  }