feat(ui): 新增 TextButton / ToggleRow，Table 支持紧凑档
- TextButton：文字按钮（tone 主色/危险、可选图标、disabled）， 用于表格行内操作，hover 只加下划线 - ToggleRow：左标签 + 右开关的开关行，支持 hint 与 switchLabel - Table：新增 size='md' | 'sm'，sm 把行内边距收到 space-2 - 展示页：按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」； COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步
This commit is contained in:
+24
-3
@@ -19,10 +19,12 @@
|
||||
| `Typography` | L1 | ✅ | 标题 / 文字 / 段落（Title / Text / Paragraph） | `level` `tone` `size` `lines` |
|
||||
| `Button` | L2 | ✅ | 操作按钮（圆角 / 胶囊） | `variant` `size` `shape` `block` `loading` `icon` |
|
||||
| `IconButton` | L2 | ✅ | 圆形图标按钮（28 / 36 / 44） | `label`(必填) `icon` `variant` `size` `spinning` |
|
||||
| `TextButton` | L2 | ✅ | 文字按钮（行内操作，无外框） | `icon` `tone` `disabled` `title` `label` |
|
||||
| `Input` | L2 | ✅ | 组合式输入框 | `icon` `clearable` `onClear` `shortcut` `inputRef` |
|
||||
| `Textarea` | L2 | ✅ | 多行文本（Markdown / 简介） | `rows` `resize` `invalid` |
|
||||
| `PasswordInput` | L2 | ✅ | 密码输入（锁图标 + 显隐切换） | `icon` `size` `toggle` |
|
||||
| `Switch` | L2 | ✅ | 即时生效的开关 | `checked` `onChange` `size` `label` |
|
||||
| `ToggleRow` | L2 | ✅ | 开关行：左标签 + 右开关 | `label` `checked` `onChange` `hint` `switchLabel` |
|
||||
| `Checkbox` | L2 | ✅ | 复选框（多选 / 确认） | `checked` `onChange` `label` |
|
||||
| `RadioGroup` | L2 | ✅ | 互斥单选组 | `options` `value` `onChange` `direction` |
|
||||
| `Select` | L2 | ✅ | 受控下拉选择 | `options` `value` `onChange` `placeholder` |
|
||||
@@ -42,7 +44,7 @@
|
||||
| `FormField` | L3 | ✅ | 表单字段排版（标签 + 控件 + 提示/错误） | `label` `hint` `error` `required` |
|
||||
| `Grid` | L3 | ✅ | 卡片列表网格 | `columns` `tabletColumns` `mobileColumns` `gap` `as` |
|
||||
| `Space` | L3 | ✅ | 一维间距容器 | `direction` `gap` `wrap` `align` `justify` |
|
||||
| `Table` | L3 | ✅ | 只读数据表格 | `columns` `rows` `rowKey` `emptyText` |
|
||||
| `Table` | L3 | ✅ | 只读数据表格 | `columns` `rows` `rowKey` `size` `emptyText` |
|
||||
| `Notice` | L4 | ✅ | 说明 / 错误提示条 | `tone` `title` `action` |
|
||||
| `Empty` | L4 | ✅ | 空态 | `text` `action` |
|
||||
| `Result` | L4 | ✅ | 整块结果反馈 | `status` `title` `description` `actions` |
|
||||
@@ -448,8 +450,8 @@
|
||||
### 3.30 Table ✅
|
||||
|
||||
- **用途**：数据表格（只读）。
|
||||
- **Props**：`columns: { key, title, width?, align? }[]`、`rows: Record<string, ReactNode>[]`、`rowKey`（默认 `id`）、`emptyText`。
|
||||
- **规则**：排序 / 筛选 / 分页由页面组合，组件不内置交互；空数据渲染 `emptyText`。
|
||||
- **Props**：`columns: { key, title, width?, align? }[]`、`rows: Record<string, ReactNode>[]`、`rowKey`（默认 `id`）、`size: 'md' | 'sm'`（行高密度，默认 `md`）、`emptyText`。
|
||||
- **规则**：排序 / 筛选 / 分页由页面组合，组件不内置交互；空数据渲染 `emptyText`；单元格是任意 `ReactNode`，行内操作直接用 `TextButton` / `IconButton`。
|
||||
- **展示页**：`#table`
|
||||
|
||||
### 3.31 Result ✅
|
||||
@@ -666,6 +668,24 @@
|
||||
- **规则**：`onChange` 给字符串而不是事件——这是它和 `Input` 唯一的语义差别，别在组件里做过滤/请求。
|
||||
- **展示页**：`#site-chrome`
|
||||
|
||||
### 3.46 TextButton ✅
|
||||
|
||||
- **用途**：文字按钮——看起来像链接、行为像按钮，用于表格行内操作（编辑 / 删除 / 新建子项）。
|
||||
- **不该用在哪**：需要底色、尺寸或独立成行的地方（用 `Button`）；只有图标的地方（用 `IconButton`）。
|
||||
- **解剖**：`<button type="button">` + 可选前置图标；正文 `font-size-sm`，`tone` 决定主色 / 危险色。
|
||||
- **Props**：`children`、`icon`、`tone: 'primary' | 'danger'`（默认 `primary`）、`disabled`、`onClick`、`title`、`label`。
|
||||
- **规则**：hover 只加下划线，不加底色；`disabled` 用 `--su-text-disabled`；`focus-visible` 保留焦点环。
|
||||
- **展示页**：`#buttons`
|
||||
|
||||
### 3.47 ToggleRow ✅
|
||||
|
||||
- **用途**：设置面板里「左标签 + 右开关」的一行。
|
||||
- **不该用在哪**：需要用户点「保存」才生效的场景（用 `Checkbox` + 按钮）。
|
||||
- **解剖**：`div` 两端对齐，左侧 `Text`（可加一行 `hint`），右侧 `Switch`。
|
||||
- **Props**：`label`、`checked`、`onChange`、`switchLabel`（默认取 label 文本）、`hint`、`disabled`。
|
||||
- **规则**：开关的无障碍名称必须有值，label 不是字符串时请显式传 `switchLabel`。
|
||||
- **展示页**：`#switch`
|
||||
|
||||
---
|
||||
|
||||
## 4. 组合模式（不进库，但必须照这个拼）
|
||||
@@ -771,3 +791,4 @@
|
||||
| 2026-11-01 | 新增三个「站点外壳」组件，把应用里各自手写的一套收进库：`Brand`（logo / 首字标记 + 名称，`href` 可选）、`Ticker`（无限滚动信息条，按实测宽度位移，循环不跳帧）、`SearchField`（语义版搜索框，`variant` 切普通 / 悬浮条）。同时新增展示级令牌 `--su-font-size-2xl` / `--su-line-height-2xl`（32 / 40）。兼容性：纯新增，无破坏 |
|
||||
| 2026-11-01 | 新增 `EntryRow` / `EntryTile`：把应用里两套手写内容卡（`.app-card` / `.ces-card`）收进库。两者共用同一套点击语义（无修饰键接管、按住修饰键保留默认）与悬停反馈；`EntryTile` 由 `Card padding="none" hoverable` + `Cover` 拼成。兼容性：纯新增 |
|
||||
| 2026-11-01 | `Select` 的下拉箭头从 `arrow_down_line` 换成和 `Menu` 一致的 CSS 折角（6px、收起朝下 / 展开朝上）。影响面：所有 `Select` 的外观，交互不变 |
|
||||
| 2026-11-01 | 新增 `TextButton`（文字按钮：`tone` 主色 / 危险色、可选图标）与 `ToggleRow`（左标签 + 右开关的开关行，支持 `hint`）；`Table` 新增 `size: 'md' \| 'sm'` 紧凑档。目的是把后台配置页里手写的 `.group-action` / `.sidebar-toggle-row` / `<table>` 收进库。兼容性：纯新增，`Table` 默认行为不变 |
|
||||
|
||||
Reference in New Issue
Block a user