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,73 @@
+import { useState } from 'react'
+import { Card, Pagination, Space } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Paginations() {
+  const [page, setPage] = useState(1)
+  const [longPage, setLongPage] = useState(6)
+
+  return (
+    <Section
+      id="pagination"
+      title="分页"
+      api="Pagination"
+      desc="对齐参考站 .page-numbers：32×32 方块、4px 圆角、当前页主色实底白字；页数多时自动用省略号收起。"
+    >
+      <Demo
+        title="基础用法"
+        desc="总数 + 每页条数算出页数；上一页/下一页在边界自动禁用。"
+        layout="column"
+        code={`const [page, setPage] = useState(1)
+
+<Pagination page={page} total={42} pageSize={10} onChange={setPage} />`}
+      >
+        <Space justify="between" wrap>
+          <span style={{ color: 'var(--su-text-muted)', fontSize: 13 }}>
+            第 {page} 页 / 共 5 页
+          </span>
+          <Pagination page={page} total={42} pageSize={10} onChange={setPage} />
+        </Space>
+      </Demo>
+
+      <Demo
+        title="页数很多"
+        desc="当前页左右各留 1 个页码，首尾固定，其余折叠成省略号。"
+        layout="column"
+        code={`<Pagination page={page} total={200} pageSize={10} onChange={setPage} />`}
+      >
+        <Pagination page={longPage} total={200} pageSize={10} onChange={setLongPage} />
+      </Demo>
+
+      <Demo
+        title="放进卡片底部"
+        desc="分页通常和「共 N 条」一起出现，用 Space justify=between 撑开即可。"
+        layout="column"
+        code={`<Card padding="sm">
+  <Space justify="between">
+    <span>共 16 条内容</span>
+    <Pagination page={page} total={16} pageSize={6} onChange={setPage} />
+  </Space>
+</Card>`}
+      >
+        <Card padding="sm">
+          <Space justify="between" wrap>
+            <span style={{ color: 'var(--su-text-muted)', fontSize: 13 }}>共 16 条内容</span>
+            <Pagination page={Math.min(page, 3)} total={16} pageSize={6} onChange={setPage} />
+          </Space>
+        </Card>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'page', type: 'number', required: true, desc: '当前页，从 1 开始' },
+          { name: 'total', type: 'number', required: true, desc: '总条数' },
+          { name: 'pageSize', type: 'number', defaultValue: '10', desc: '每页条数' },
+          { name: 'onChange', type: '(page: number) => void', required: true, desc: '翻页回调' },
+          { name: 'siblings', type: 'number', defaultValue: '1', desc: '当前页左右各显示几个页码' },
+        ]}
+      />
+    </Section>
+  )
+}