feat: initialize React Spectrum template with layouts and showcases

1 files changed, 75 insertions, 0 deletions

diff --git a/src/components/ui-kit/navigation-data.tsx b/src/components/ui-kit/navigation-data.tsx
new file mode 100644
index 0000000..5ac2605
--- /dev/null
+++ b/src/components/ui-kit/navigation-data.tsx
@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import { Tabs, TabList, Tab, TabPanel } from '@react-spectrum/s2/Tabs'
+import { Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel } from '@react-spectrum/s2/Accordion'
+import { Breadcrumbs, Breadcrumb } from '@react-spectrum/s2/Breadcrumbs'
+import { TagGroup, Tag } from '@react-spectrum/s2/TagGroup'
+import { Button } from '@react-spectrum/s2/Button'
+import { Card, CardPreview, Content, Text, Footer } from '@react-spectrum/s2/Card'
+import { TableView, TableHeader, Column, TableBody, Row, Cell, type Selection, type SortDescriptor } from '@react-spectrum/s2/TableView'
+import { StatusLight } from '@react-spectrum/s2/StatusLight'
+import EditIcon from '@react-spectrum/s2/icons/Edit'
+import styles from './ui-kit.module.css'
+
+const initialTags = ['设计', '开发', '文档']
+const rows = [
+  { id: 'buttons', name: '按钮', category: '基础操作', status: '已完成' },
+  { id: 'navigation', name: '导航', category: '页面组织', status: '已完成' },
+  { id: 'form', name: '表单', category: '数据输入', status: '示例' },
+]
+
+export default function NavigationData() {
+  const [tags, setTags] = useState(initialTags)
+  const [selection, setSelection] = useState<Selection>(new Set())
+  const [sort, setSort] = useState<SortDescriptor>({ column: 'name', direction: 'ascending' })
+  const sortedRows = [...rows].sort((a, b) => a.name.localeCompare(b.name, 'zh-CN') * (sort.direction === 'descending' ? -1 : 1))
+
+  return (
+    <>
+      <section className={styles.section} aria-labelledby="kit-navigation">
+        <h2 id="kit-navigation">导航与内容组织</h2>
+        <Breadcrumbs><Breadcrumb href="/">Home</Breadcrumb><Breadcrumb>UI Kit</Breadcrumb></Breadcrumbs>
+        <Tabs aria-label="组件内容示例" defaultSelectedKey="overview">
+          <TabList aria-label="组件内容示例"><Tab id="overview">概览</Tab><Tab id="details">详情</Tab><Tab id="disabled" isDisabled>禁用</Tab></TabList>
+          <TabPanel id="overview"><p className={styles.tabContent}>这是概览面板。点击“详情”切换内容。</p></TabPanel>
+          <TabPanel id="details"><p className={styles.tabContent}>这是详情面板。也可以使用键盘方向键切换标签。</p></TabPanel>
+        </Tabs>
+        <Accordion allowsMultipleExpanded defaultExpandedKeys={['usage']}>
+          <AccordionItem id="usage"><AccordionItemTitle>组件如何交互？</AccordionItemTitle><AccordionItemPanel>点击、聚焦或使用键盘体验组件的不同状态。</AccordionItemPanel></AccordionItem>
+          <AccordionItem id="theme"><AccordionItemTitle>如何查看暗色效果？</AccordionItemTitle><AccordionItemPanel>使用顶栏右上角的设置按钮切换亮色和暗色模式。</AccordionItemPanel></AccordionItem>
+        </Accordion>
+      </section>
+
+      <section className={styles.section} aria-labelledby="kit-tags">
+        <h2 id="kit-tags">标签与卡片</h2>
+        <TagGroup aria-label="可移除的示例标签" onRemove={(keys) => setTags((current) => current.filter((tag) => !keys.has(tag)))}>
+          {tags.map((tag) => <Tag key={tag} id={tag}>{tag}</Tag>)}
+        </TagGroup>
+        {tags.length === 0 && <p className={styles.caption}>标签已清空。</p>}
+        <div><Button variant="secondary" onPress={() => setTags(initialTags)}>恢复标签</Button></div>
+        <div className={styles.cards}>
+          <Card href="/form" aria-label="查看表单示例">
+            <CardPreview><div className={styles.cardPreview}><EditIcon /></div></CardPreview>
+            <Content><Text slot="title">表单组件</Text><Text slot="description">文本输入、选择、日期、颜色与文件控件。</Text></Content>
+            <Footer><StatusLight variant="informative">点击查看表单页面</StatusLight></Footer>
+          </Card>
+          <Card variant="secondary" aria-label="组件展示卡片">
+            <Content><Text slot="title">内容卡片</Text><Text slot="description">使用标题、描述和底部状态组织信息。</Text></Content>
+            <Footer><StatusLight variant="positive">静态展示</StatusLight></Footer>
+          </Card>
+        </div>
+      </section>
+
+      <section className={styles.section} aria-labelledby="kit-table">
+        <h2 id="kit-table">数据表格</h2>
+        <p className={styles.caption}>支持多选，点击“名称”可切换排序。</p>
+        <div className={styles.tableContainer}>
+          <TableView aria-label="组件示例列表" UNSAFE_className={styles.table} selectionMode="multiple" selectedKeys={selection} onSelectionChange={setSelection} sortDescriptor={sort} onSortChange={setSort}>
+            <TableHeader><Column id="name" isRowHeader allowsSorting>名称</Column><Column id="category">分类</Column><Column id="status">状态</Column></TableHeader>
+            <TableBody items={sortedRows}>{(row) => <Row id={row.id}><Cell>{row.name}</Cell><Cell>{row.category}</Cell><Cell>{row.status}</Cell></Row>}</TableBody>
+          </TableView>
+        </div>
+        <p role="status" className={styles.caption}>已选择 {selection === 'all' ? rows.length : selection.size} 项</p>
+      </section>
+    </>
+  )
+}