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,78 @@
+import { Table, Tag, Text } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+const COLUMNS = [
+  { key: 'name', title: '分区' },
+  { key: 'kind', title: '类型', width: 100 },
+  { key: 'count', title: '条目数', width: 100, align: 'right' as const },
+  { key: 'status', title: '状态', width: 120 },
+]
+
+const ROWS = [
+  {
+    id: 'recommend',
+    name: '常用推荐',
+    kind: <Text size="sm">apps</Text>,
+    count: 18,
+    status: <Tag tone="success">已上线</Tag>,
+  },
+  {
+    id: 'movie',
+    name: '推荐电影',
+    kind: <Text size="sm">posters</Text>,
+    count: 12,
+    status: <Tag tone="success">已上线</Tag>,
+  },
+  {
+    id: 'ces',
+    name: 'CES 现场报道',
+    kind: <Text size="sm">articles</Text>,
+    count: 12,
+    status: <Tag tone="warning">草稿</Tag>,
+  },
+]
+
+export function Tables() {
+  return (
+    <Section
+      id="table"
+      title="表格"
+      api="Table"
+      desc="只做展示：列定义 + 行数据 + 空态。排序、筛选、分页由页面组合，组件不内置交互。"
+    >
+      <Demo
+        title="基础表格"
+        desc="列宽、对齐方式按列配置；单元格内容可以是任意 ReactNode（这里用了 Tag 与 Text）。"
+        layout="column"
+        code={`const columns = [
+  { key: 'name', title: '分区' },
+  { key: 'count', title: '条目数', width: 100, align: 'right' },
+]
+
+<Table columns={columns} rows={rows} rowKey="id" />`}
+      >
+        <Table columns={COLUMNS} rows={ROWS} rowKey="id" />
+      </Demo>
+
+      <Demo
+        title="空态"
+        desc="空数据时渲染默认文案；也可以传 emptyText 换一句更具体的说明。"
+        layout="column"
+        code={`<Table columns={columns} rows={[]} emptyText="还没有分区" />`}
+      >
+        <Table columns={COLUMNS} rows={[]} emptyText="还没有分区，先建一个吧。" />
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'columns', type: 'TableColumn[]', required: true, desc: '{ key, title, width?, align? }' },
+          { name: 'rows', type: 'Record<string, ReactNode>[]', required: true, desc: '行数据，键对应列的 key' },
+          { name: 'rowKey', type: 'string', defaultValue: "'id'", desc: '行的唯一键字段' },
+          { name: 'emptyText', type: 'ReactNode', defaultValue: "'暂无数据'", desc: '空态文案' },
+        ]}
+      />
+    </Section>
+  )
+}