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,89 @@
+import { Card, Cover, Space } from '@stash/ui'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+/** 演示用的渐变色块，避免依赖外部图片 */
+const swatch = (from: string, to: string) =>
+  `data:image/svg+xml;utf8,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="600"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${from}"/><stop offset="1" stop-color="${to}"/></linearGradient></defs><rect width="400" height="600" fill="url(#g)"/></svg>`,
+  )}`
+
+export function Covers() {
+  return (
+    <Section
+      id="cover"
+      title="封面卡"
+      api="Cover"
+      desc="比例封面卡：图片 + 底部压暗层 + 标题。海报、图文、宽图共用一套，避免每个列表各写一份 aspect-ratio 和渐变遮罩。"
+    >
+      <Demo
+        title="三种比例"
+        desc="poster 2:3（海报）、article 4:3（图文）、wide 16:9（横幅）；标题最多两行，超出省略。"
+        code={`<Cover ratio="poster" src={cover} alt="海报" caption="海报 2:3" />
+<Cover ratio="article" src={cover} alt="图文" caption="图文 4:3" />
+<Cover ratio="wide" src={cover} alt="横幅" caption="横幅 16:9" />`}
+      >
+        <Space gap="md" align="start">
+          <div style={{ width: 120 }}>
+            <Cover
+              ratio="poster"
+              src={swatch('#7c5cff', '#c04bff')}
+              alt="海报示例"
+              caption="海报 2:3"
+            />
+          </div>
+          <div style={{ width: 180 }}>
+            <Cover
+              ratio="article"
+              src={swatch('#1f6feb', '#4abd86')}
+              alt="图文示例"
+              caption="图文 4:3"
+            />
+          </div>
+          <div style={{ width: 220 }}>
+            <Cover
+              ratio="wide"
+              src={swatch('#ff7a45', '#ffba3a')}
+              alt="横幅示例"
+              caption="横幅 16:9"
+            />
+          </div>
+        </Space>
+      </Demo>
+
+      <Demo
+        title="贴边 + 可点击"
+        desc="放在 Card padding='none' 里时传 radius='none'；传 onClick 整块变成按钮，支持键盘操作。"
+        layout="column"
+        code={`<Card padding="none">
+  <Cover radius="none" ratio="article" onClick={open} caption="可点击的封面" />
+</Card>`}
+      >
+        <Card padding="none" style={{ maxWidth: 280 }}>
+          <Cover
+            radius="none"
+            ratio="article"
+            src={swatch('#3f51b5', '#00bcd4')}
+            alt="可点击的封面"
+            caption="可点击的封面"
+            onClick={() => undefined}
+          />
+        </Card>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'ratio', type: "'poster' | 'article' | 'wide' | number", defaultValue: "'article'", desc: '2:3 / 4:3 / 16:9 / 自定义宽高比' },
+          { name: 'src', type: 'string', desc: '图片地址，不传显示占位字符' },
+          { name: 'alt', type: 'string', required: true, desc: '图片说明，同时作为按钮 title' },
+          { name: 'caption', type: 'ReactNode', desc: '底部标题（最多两行）' },
+          { name: 'radius', type: "'cover' | 'none'", defaultValue: "'cover'", desc: '8px / 贴边' },
+          { name: 'lift', type: 'boolean', defaultValue: 'true', desc: '悬停整块上浮 2px（参考站行为）' },
+          { name: 'hoverZoom', type: 'boolean', defaultValue: 'false', desc: '悬停放大图片（与 lift 二选一）' },
+          { name: 'onClick', type: '() => void', desc: '传了就把整块变成按钮' },
+        ]}
+      />
+    </Section>
+  )
+}