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/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;
  }