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,58 @@
+import { Breadcrumb } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Breadcrumbs() {
+  return (
+    <Section
+      id="breadcrumb"
+      title="面包屑"
+      api="Breadcrumb"
+      desc="详情页的路径导航：中间项可点，最后一项是当前页（aria-current=page）。"
+    >
+      <Demo
+        title="基础用法"
+        desc="items 里只有最后一项会忽略 href；分隔符默认 `/`。"
+        layout="column"
+        code={`<Breadcrumb
+  items={[
+    { label: '首页', href: '/' },
+    { label: '常用推荐', href: '/c/recommend' },
+    { label: '常用站点' },
+  ]}
+/>`}
+      >
+        <Breadcrumb
+          items={[
+            { label: '首页', href: '#top' },
+            { label: '常用推荐', href: '#top' },
+            { label: '常用站点' },
+          ]}
+        />
+      </Demo>
+
+      <Demo
+        title="自定义分隔符"
+        desc="separator 可以是字符或图标；过深的路径在窄屏会换行。"
+        code={`<Breadcrumb separator="›" items={items} />`}
+      >
+        <Breadcrumb
+          separator="›"
+          items={[
+            { label: '工作台', href: '#top' },
+            { label: '内容库', href: '#top' },
+            { label: '推荐电影' },
+          ]}
+        />
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'items', type: 'BreadcrumbItem[]', required: true, desc: '{ label, href? }[]' },
+          { name: 'separator', type: 'ReactNode', defaultValue: "'/'", desc: '分隔符' },
+        ]}
+      />
+    </Section>
+  )
+}