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,52 @@
+import { useState } from 'react'
+import { ScrollTop } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function ScrollTopSection() {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <Section
+      id="scrolltop"
+      title="回到顶部"
+      api="ScrollTop"
+      desc="固定在视口右侧中部的圆形按钮，可见性由页面根据滚动位置控制。真实位置在页面右侧，不在下面的预览区里。"
+    >
+      <Demo
+        title="显隐控制"
+        desc="桌面端滚的是内容容器（传 targetId），窄屏滚的是窗口（不传）；两种都支持，避免滚错了不生效。"
+        code={`<ScrollTop visible={scrolled} targetId="content-scroll" />`}
+      >
+        <button
+          type="button"
+          onClick={() => setVisible((current) => !current)}
+          style={{
+            padding: '6px 14px',
+            borderRadius: 6,
+            border: '1px solid var(--su-border-strong)',
+            background: 'var(--su-bg-card)',
+            cursor: 'pointer',
+          }}
+        >
+          {visible ? '隐藏' : '显示'}回到顶部按钮
+        </button>
+        <span style={{ alignSelf: 'center', color: 'var(--su-text-muted)', fontSize: 12 }}>
+          点左侧按钮，右下角会淡入 / 淡出
+        </span>
+      </Demo>
+
+      <ScrollTop visible={visible} />
+
+      <PropsTable
+        rows={[
+          { name: 'visible', type: 'boolean', required: true, desc: '是否显示' },
+          { name: 'targetId', type: 'string', desc: '滚动容器 id；不传则滚窗口' },
+          { name: 'label', type: 'string', defaultValue: "'回到顶部'", desc: '无障碍名称与 title' },
+          { name: 'offset', type: 'number', defaultValue: '24', desc: '距右侧距离（px）' },
+        ]}
+      />
+    </Section>
+  )
+}