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 { useMemo, useState } from 'react'
+import { ICON_NAMES, Icon, Input, Space, type IconName } from '../../src'
+import { Demo } from '../components/Demo'
+import { Section } from '../components/Section'
+
+export function Icons() {
+  const [keyword, setKeyword] = useState('')
+  const [copied, setCopied] = useState<IconName | null>(null)
+
+  const visible = useMemo(() => {
+    const query = keyword.trim().toLowerCase()
+    return query === '' ? ICON_NAMES : ICON_NAMES.filter((name) => name.includes(query))
+  }, [keyword])
+
+  const copy = (name: IconName) => {
+    const task = navigator.clipboard?.writeText(name)
+    task?.catch(() => undefined)
+    setCopied(name)
+    window.setTimeout(() => setCopied((current) => (current === name ? null : current)), 1200)
+  }
+
+  return (
+    <Section
+      id="icons"
+      title="图标"
+      api="Icon"
+      desc={`参考站 iconfont 的全量字形（${ICON_NAMES.length} 个，字体 52KB）。线性和填充成对出现，命名规则是「名字_风格」：search_line / search_fill、arrow_left_line / arrow_left_fill。点任意一格可以复制图标名。`}
+    >
+      <Demo
+        title="全部字形"
+        desc="按名字过滤（试试 arrow、fill、user），点击复制 `<Icon name=… />` 里的名字。"
+        layout="column"
+        code={`<Icon name="search_3_line" />
+<Icon name="arrow_left_line" style={{ fontSize: 20 }} />`}
+      >
+        <Space gap="md" wrap>
+          <Input
+            icon="search_3_line"
+            placeholder="过滤图标名，如 arrow / fill / user…"
+            value={keyword}
+            onChange={(event) => setKeyword(event.target.value)}
+            clearable
+            onClear={() => setKeyword('')}
+            style={{ width: 300 }}
+          />
+          <span className="icon-count">
+            {visible.length} / {ICON_NAMES.length}
+          </span>
+        </Space>
+
+        <div className="icon-wall icon-wall--scroll">
+          {visible.map((name) => (
+            <button
+              type="button"
+              className="icon-cell"
+              key={name}
+              title={`复制 ${name}`}
+              onClick={() => copy(name)}
+            >
+              <Icon name={name} />
+              <code>{copied === name ? '已复制' : name}</code>
+            </button>
+          ))}
+        </div>
+
+        {visible.length === 0 && (
+          <p className="icon-empty">没有匹配「{keyword.trim()}」的图标，换个关键词试试。</p>
+        )}
+      </Demo>
+    </Section>
+  )
+}