From 481402e09fe760634b826b09e302e2e1bfec88b1 Mon Sep 17 00:00:00 2001 From: shu Date: Mon, 7 Sep 2026 15:48:36 +0800 Subject: feat: initialize React Spectrum template with layouts and showcases --- src/components/ui-kit/actions-feedback.tsx | 101 +++++++++++++++++++++++++++++ src/components/ui-kit/navigation-data.tsx | 75 +++++++++++++++++++++ src/components/ui-kit/ui-kit.module.css | 80 +++++++++++++++++++++++ src/components/ui-kit/ui-kit.tsx | 6 ++ 4 files changed, 262 insertions(+) create mode 100644 src/components/ui-kit/actions-feedback.tsx create mode 100644 src/components/ui-kit/navigation-data.tsx create mode 100644 src/components/ui-kit/ui-kit.module.css create mode 100644 src/components/ui-kit/ui-kit.tsx (limited to 'src/components/ui-kit') diff --git a/src/components/ui-kit/actions-feedback.tsx b/src/components/ui-kit/actions-feedback.tsx new file mode 100644 index 0000000..ade8d48 --- /dev/null +++ b/src/components/ui-kit/actions-feedback.tsx @@ -0,0 +1,101 @@ +import { useEffect, useRef, useState } from 'react' +import { Button, Text } from '@react-spectrum/s2/Button' +import { ActionButton } from '@react-spectrum/s2/ActionButton' +import { ToggleButton } from '@react-spectrum/s2/ToggleButton' +import { ActionMenu, MenuItem } from '@react-spectrum/s2/ActionMenu' +import { Badge } from '@react-spectrum/s2/Badge' +import { StatusLight } from '@react-spectrum/s2/StatusLight' +import { ProgressBar } from '@react-spectrum/s2/ProgressBar' +import { ProgressCircle } from '@react-spectrum/s2/ProgressCircle' +import { Meter } from '@react-spectrum/s2/Meter' +import { InlineAlert, Heading, Content } from '@react-spectrum/s2/InlineAlert' +import { DialogTrigger, Dialog, ButtonGroup } from '@react-spectrum/s2/Dialog' +import { Popover } from '@react-spectrum/s2/Popover' +import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip' +import { ToastContainer, ToastQueue } from '@react-spectrum/s2/Toast' +import AddIcon from '@react-spectrum/s2/icons/Add' +import EditIcon from '@react-spectrum/s2/icons/Edit' +import InfoIcon from '@react-spectrum/s2/icons/InfoCircle' +import styles from './ui-kit.module.css' + +export default function ActionsFeedback() { + const [message, setMessage] = useState('点击按钮体验交互。') + const [selected, setSelected] = useState(false) + const [progress, setProgress] = useState(40) + const toastClosers = useRef void>>([]) + useEffect(() => () => { toastClosers.current.forEach((close) => close()) }, []) + + return ( + <> +
+

按钮与操作

+
+ + + + + +
+
+ {(['S', 'M', 'L', 'XL'] as const).map((size) => )} + setMessage('已点击图标按钮。')}>编辑示例 + {selected ? '已收藏' : '收藏'} + setMessage(key === 'copy' ? '已选择复制示例。' : '已选择重命名示例。')}> + 复制重命名 + +
+

{message}

+
+ +
+

徽标与状态

+
+ 默认信息成功提醒错误强调 +
+
+ 已完成待处理失败草稿 +
+
+ 信息提示用于展示与当前操作相关的说明。 + 成功提示这是一条成功状态示例。 + 注意事项操作前需要留意的提示信息。 + 错误提示展示问题原因及后续处理方式。 +
+
+ +
+

进度与容量

+
+ + + +
加载中
+
+
+ + +
+
+ +
+

弹层与通知

+
+ + + + {({ close }) => <>对话框示例对话框用于需要用户确认的操作。} + + + + +

Popover 用于在操作附近展示补充内容，点击外部或按 Esc 关闭。

 + + 这是一条 Tooltip 提示。 + + +
+
+ + + ) +} 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(new Set()) + const [sort, setSort] = useState({ column: 'name', direction: 'ascending' }) + const sortedRows = [...rows].sort((a, b) => a.name.localeCompare(b.name, 'zh-CN') * (sort.direction === 'descending' ? -1 : 1)) + + return ( + <> +
+

导航与内容组织

+ HomeUI Kit + + 概览详情禁用 +

这是概览面板。点击“详情”切换内容。

 +

这是详情面板。也可以使用键盘方向键切换标签。

 + + + 组件如何交互？点击、聚焦或使用键盘体验组件的不同状态。 + 如何查看暗色效果？使用顶栏右上角的设置按钮切换亮色和暗色模式。 + +
+ +
+

标签与卡片

+ setTags((current) => current.filter((tag) => !keys.has(tag)))}> + {tags.map((tag) => {tag})} + + {tags.length === 0 &&

标签已清空。

} +
+
+ +
+ 表单组件文本输入、选择、日期、颜色与文件控件。 +
点击查看表单页面
+ + + 内容卡片使用标题、描述和底部状态组织信息。 +
静态展示
+ +
+
+ +
+

数据表格

+

支持多选，点击“名称”可切换排序。

+
+ + 名称分类状态 + {(row) => {row.name}{row.category}{row.status}} + +
+

已选择 {selection === 'all' ? rows.length : selection.size} 项

+
+ + ) +} diff --git a/src/components/ui-kit/ui-kit.module.css b/src/components/ui-kit/ui-kit.module.css new file mode 100644 index 0000000..d590bb4 --- /dev/null +++ b/src/components/ui-kit/ui-kit.module.css @@ -0,0 +1,80 @@ +.section { + min-width: 0; + display: grid; + gap: 24px; + padding: 24px; + margin-bottom: 24px; + border: 1px solid var(--border); + border-radius: 12px; +} + +.section > h2 { + margin: 0; + font-size: 20px; +} + +.row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 16px; +} + +.grid, +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); + gap: 20px; + min-width: 0; +} + +.grid > *, +.cards > * { + min-width: 0; +} + +.caption, +.tabContent, +.popover p { + font-size: 14px; + line-height: 1.6; + overflow-wrap: anywhere; +} + +.tabContent { + padding: 20px 0; +} + +.popover { + display: grid; + gap: 12px; + padding: 16px; + width: min(260px, calc(100vw - 64px)); + box-sizing: border-box; +} + +.cardPreview { + display: grid; + place-items: center; + width: 100%; + height: 100px; + color: var(--accent); + background: var(--social-bg); +} + +.tableContainer { + min-width: 0; + overflow: auto; +} + +.table.table { + height: 280px; + min-width: 440px; + width: 100%; +} + +@media (max-width: 640px) { + .section { + padding: 16px; + } +} diff --git a/src/components/ui-kit/ui-kit.tsx b/src/components/ui-kit/ui-kit.tsx new file mode 100644 index 0000000..e12012d --- /dev/null +++ b/src/components/ui-kit/ui-kit.tsx @@ -0,0 +1,6 @@ +import ActionsFeedback from './actions-feedback' +import NavigationData from './navigation-data' + +export default function UIKit() { + return <> +} -- cgit v1.2.3