feat: stash-ui 0.1.0（40 个组件 + 文档站 + 主题机制）

2026-10-28 20:44:18 +08:00
commit 52296b3368
153 changed files with 17129 additions and 0 deletions
@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { Space, Switch, Text } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Switches() {
+  const [autoSync, setAutoSync] = useState(true)
+  const [showCover, setShowCover] = useState(false)
+  const [compact] = useState(true)
+
+  return (
+    <Section
+      id="switch"
+      title="开关"
+      api="Switch"
+      desc="设置项的即时开关：改了立刻生效，不需要「保存」。需要用户确认的场景用 Checkbox + 提交按钮，不要用开关。"
+    >
+      <Demo
+        title="基础用法"
+        desc="受控组件：checked + onChange。旁边有文字说明时，文字用 Text，开关的 label 仍要传（供读屏）。"
+        layout="column"
+        code={`<Space justify="between" style={{ width: 280 }}>
+  <Text>自动同步</Text>
+  <Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
+</Space>`}
+      >
+        <Space justify="between" style={{ width: 300 }}>
+          <Text>自动同步</Text>
+          <Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
+        </Space>
+        <Space justify="between" style={{ width: 300 }}>
+          <Text>显示封面图</Text>
+          <Switch checked={showCover} onChange={setShowCover} label="显示封面图" />
+        </Space>
+      </Demo>
+
+      <Demo
+        title="尺寸"
+        desc="sm 用于行内紧凑列表，md 用于设置表单。"
+        code={`<Switch size="sm" checked={on} onChange={setOn} label="紧凑模式" />
+<Switch size="md" checked={on} onChange={setOn} label="紧凑模式" />`}
+      >
+        <Space gap="lg">
+          <Switch size="sm" checked={compact} onChange={() => undefined} label="紧凑模式" />
+          <Switch size="md" checked={compact} onChange={() => undefined} label="紧凑模式" />
+        </Space>
+      </Demo>
+
+      <Demo
+        title="禁用"
+        desc="禁用时保留当前状态的可读性，只降透明度并改光标。"
+        code={`<Switch checked onChange={() => {}} disabled label="不可修改" />`}
+      >
+        <Space gap="lg">
+          <Switch checked onChange={() => undefined} disabled label="不可修改（开）" />
+          <Switch checked={false} onChange={() => undefined} disabled label="不可修改（关）" />
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'checked', type: 'boolean', required: true, desc: '受控状态' },
+          { name: 'onChange', type: '(checked: boolean) => void', required: true, desc: '切换回调' },
+          { name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '32×18 / 40×22' },
+          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用' },
+          { name: 'label', type: 'string', desc: '无障碍名称：旁边没有文字时必填' },
+        ]}
+      />
+    </Section>
+  )
+}