temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(e03): 新增 rate 评分组件

Browse Source
This commit is contained in:
HIsheR
2026-10-23 18:07:42 +08:00
parent dc4bac4d17
commit ee20322e3f
12 changed files with 206 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/backlog.json
+8
View File
@@ -292,6 +292,14 @@
"acceptance": "packages/skin/ui 新增 stepper.ts：stepper({steps, active, clickable?, onChange?})，done/current/upcoming 三态视觉，clickable 时已完成步骤可点回跳并写回 active 信号，aria-current=step；只消费 --ua-* 令牌；导出、manifest、文档、llms-full.txt、README 清单同步；demo 加一节演示；npm run check 全绿",
"status": "done",
"notes": "stepper(props)：active 信号变化整条重渲染（effect 首跑赋值 + replaceWith，条目少开销可忽略）；done 显示 ✓、current 光环聚焦、upcoming 弱化，aria-current=step；clickable 时已完成步骤渲染为 button 回跳写回信号；连接线用 .ua-step + .ua-step::before 横向短线；demo 新增 sec-stepper（上一步/下一步按钮 computed 禁用联动）；README 同步 30 组件"
},
{
"id": "e03",
"title": "新增 rate 评分组件",
"motivation": "评价、打分场景常用，现有组件无覆盖；星标交互可完整复用信号双向绑定与微动画审美约定，单文件可控",
"acceptance": "packages/skin/ui 新增 rate.ts：rate({value, max?, disabled?, onChange?})，max 缺省 5，hover 预览移出还原，键盘 ←→/↑↓ 调节，aria 星标语义；只消费 --ua-* 令牌；导出、manifest、文档、llms-full.txt、README 清单同步；demo 加一节演示；npm run check 全绿",
"status": "done",
"notes": "rate(props)：hover 预览用组件内局部 hover 信号（容器 mouseleave 归零），shown = hover || value 决定点亮数；value/hover 变化整条重渲染（与 stepper 同款 effect + replaceWith 模式）；键盘 →/↑ 加分 ←/↓ 减分并 clamp [1,max]；role=slider + aria-valuenow；选中色取 --ua-color-warning 金黄；demo 新增 sec-rate（可交互 + 只读两实例共用 score 信号）；README 同步 31 组件"
}
]
}
.ua/index.json
+38 -1
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-23T09:57:15.241Z",
"generatedAt": "2026-10-23T10:03:21.198Z",
"repoRoot": ".",
"packages": [
{
@@ -168,6 +168,7 @@
"progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复",
"tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
"stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
"modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区",
"drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭",
"form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
@@ -1144,6 +1145,42 @@
"clickable: true 时已完成步骤可点击回跳并写回信号，配合 onChange 同步业务状态"
]
},
{
"id": "rate",
"title": "评分 Rate",
"demo": "sec-rate",
"props": [
{
"n": "value",
"t": "Signal<number>",
"r": 1,
"d": "当前评分（1 基整数值）信号，双向绑定：点选/键盘写回、外部赋值同步"
},
{
"n": "max",
"t": "number",
"d": "星标总数；缺省 5",
"df": "5"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用态：布尔直接置位，传信号则动态同步"
},
{
"n": "onChange",
"t": "(value: number) => void",
"k": 1,
"d": "评分变化回调"
}
],
"example": "const score = signal(0); rate({ value: score, max: 5, onChange: (v) => console.log(v) })",
"steps": [
"用 signal(0) 创建评分信号并传入 value；0 表示未评分",
"点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分；悬停高亮预览、移出还原",
"max 可调整星标总数；disabled 支持布尔或信号禁用"
]
},
{
"id": "pagination",
"title": "分页器 Pagination",
.ua/iterations.log
+1
View File
@@ -36,3 +36,4 @@
{"ts": "2026-10-23T09:12:49+00:00", "round": 29, "id": "d29", "result": "done", "commit": "", "summary": "menu Home/End 跳转对齐 select"}
{"ts":"2026-10-23T17:50:14+08:00","id":"e01","result":"done","commit":"20d7b94","summary":"新增 inputNumber 数字输入：−/+ 按钮 + 键盘上下步进，信号双向绑定，min/max/step 夹取，门禁全绿"}
{"ts":"2026-10-23T17:57:31+08:00","id":"e02","result":"done","commit":"fc7a1e8","summary":"新增 stepper 步骤条：三态流转 + active 信号双向绑定 + clickable 回跳，门禁全绿"}
{"ts":"2026-10-23T18:03:34+08:00","id":"e03","result":"done","commit":"4f7d1e8","summary":"新增 rate 评分组件：星标点选 + hover 预览 + 键盘方向键调节，信号双向绑定，门禁全绿"}
README.md
+4 -4
View File
@@ -11,13 +11,13 @@ npm run demo # 打开演示：apps/demo/dist/demo.html
npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全量文档 llms-full.txt
```
## 组件（共 30 个）
## 组件（共 31 个）
<!-- ua:components -->
accordion · alert · avatar · badge · breadcrumb · button · card · checkbox · dataTable · drawer · form · inputNumber · menu · modal · pagination · popover · progress · radioGroup · select · skeleton · slider · spinner · stepper · switchButton · tabs · tag · textField · textarea · toast · tooltip
accordion · alert · avatar · badge · breadcrumb · button · card · checkbox · dataTable · drawer · form · inputNumber · menu · modal · pagination · popover · progress · radioGroup · rate · select · skeleton · slider · spinner · stepper · switchButton · tabs · tag · textField · textarea · toast · tooltip
<!-- /ua:components -->
分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / form / formItem）、反馈（alert / toast / spinner / progress / skeleton / badge）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper）、数据（dataTable / tag / avatar / card）。
分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / form / formItem）、反馈（alert / toast / spinner / progress / skeleton / badge）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper）、数据（dataTable / tag / avatar / card）。
## 目录
@@ -25,7 +25,7 @@ accordion · alert · avatar · badge · breadcrumb · button · card · checkbo
|---|---|
| `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） |
| `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） |
| `packages/skin/ui` | @ui-arch/ui：30 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
| `packages/skin/ui` | @ui-arch/ui：31 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
| `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） |
| `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server |
| `apps/demo` | 交互演示（esbuild 打包成单文件） |
apps/demo/main.ts
+16
View File
@@ -19,6 +19,7 @@ import {
popover,
progress,
radioGroup,
rate,
select,
showToast,
skeleton,
@@ -119,6 +120,9 @@ const qty = signal(1);
// —— 步骤条：下单流程演示，按钮推进、点已完成步骤回跳 ——
const stepIdx = signal(0);
// —— 评分：满意度演示，与只读实例共用同一信号 ——
const score = signal(0);
// —— 受控选中：dataTable 内部勾选实时写回，外部可清空 ——
const picked = signal<RowKey[]>([]);
@@ -363,6 +367,18 @@ const content = h(
button({ label: '下一步', disabled: computed(() => stepIdx() === 2), onClick: () => stepIdx(Math.min(2, stepIdx() + 1)) }),
),
),
section(
'sec-rate',
'评分',
'rate：点选星标打分，悬停预览移出还原，键盘 →/↑ 加分 ←/↓ 减分，disabled 只读展示。',
h(
'div',
{ class: 'row' },
rate({ value: score, onChange: (v) => toast.info(`评分 ${v} 星`) }),
h('span', { class: 'out' }, () => `当前：${score() || '未评分'}`),
),
h('div', { class: 'row' }, rate({ value: score, disabled: true })),
),
section(
'sec-menu',
'下拉菜单',
llms-full.txt
+25 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档（无图形版）
> 自动生成于 2026-10-23T09:57:15.241Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 自动生成于 2026-10-23T10:03:21.198Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
## 快速上手
@@ -651,6 +651,29 @@ const step = signal(1); stepper({ steps: [{ label: '下单' }, { label: '支付'
现场演示：apps/docs/demo.html#sec-stepper
### rate — 评分 Rate
参数：
- value（必填）：Signal<number> —— 当前评分（1 基整数值）信号，双向绑定：点选/键盘写回、外部赋值同步
- max（默认 5）：number —— 星标总数；缺省 5
- disabled：boolean | Signal<boolean> —— 禁用态：布尔直接置位，传信号则动态同步
- onChange（回调）：(value: number) => void —— 评分变化回调
示例：
```
const score = signal(0); rate({ value: score, max: 5, onChange: (v) => console.log(v) })
```
手把手：
1. 用 signal(0) 创建评分信号并传入 value；0 表示未评分
2. 点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分；悬停高亮预览、移出还原
3. max 可调整星标总数；disabled 支持布尔或信号禁用
现场演示：apps/docs/demo.html#sec-rate
### pagination — 分页器 Pagination
参数：
@@ -827,6 +850,7 @@ API 速览：
- progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复
- tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签
- stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配
- modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区
- drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭
- form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
llms.txt
+1
View File
@@ -73,6 +73,7 @@
- progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复
- tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签
- stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配
- modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区
- drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭
- form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
packages/skin/ui/src/index.ts
+1
View File
@@ -25,6 +25,7 @@ export { spinner } from './spinner.js';
export { progress } from './progress.js';
export { tabs } from './tabs.js';
export { stepper } from './stepper.js';
export { rate } from './rate.js';
export { modal } from './modal.js';
export { drawer } from './drawer.js';
export { form, formItem } from './form.js';
packages/skin/ui/src/rate.ts
+34
View File
@@ -0,0 +1,34 @@
import { effect, h, signal } from '@ui-arch/frame';
import type { RateProps } from './types.js';
/*** 评分：星标点选，hover 预览移出还原，键盘 ←→/↑↓ 调节，value 信号双向绑定 ***/
export function rate(props: RateProps): HTMLDivElement {
const value = props.value;
const max = props.max ?? 5; // 星标总数缺省 5
const hover = signal(0); // 预览索引（1 基，0 表示无预览）
const emit = (v: number): void => { const n = Math.min(max, Math.max(1, v)); value(n); if (props.onChange) props.onChange(n); }; // 写回信号并回调
const render = (): HTMLElement => {
const shown = hover() || value(); // 预览优先，无预览显示当前值
const stars = [];
for (let i = 1; i <= max; i++) {
stars.push(h('button', {
class: `ua-rate-star${i <= shown ? ' is-on' : ''}`,
type: 'button',
disabled: props.disabled,
'aria-label': `${i} 星`,
onClick: () => emit(i),
onMouseEnter: () => hover(i),
}, '★'));
}
return h('div', { class: 'ua-rate', role: 'slider', 'aria-label': '评分', 'aria-valuemin': 1, 'aria-valuemax': max, 'aria-valuenow': value(), onMouseLeave: () => hover(0) }, ...stars);
};
let el!: HTMLElement; // 当前渲染产物（effect 首跑赋值）
effect(() => { const next = render(); if (el) el.replaceWith(next); el = next; }); // value/hover 变化整条重渲染（星标少，开销可忽略）
const keyNav = (e: KeyboardEvent): void => {
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return; // 卫语句：只拦截方向键
e.preventDefault();
emit(value() + (e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1 : -1)); // →/↑ 加一分，←/↓ 减一分
};
el.addEventListener('keydown', keyNav);
return el as HTMLDivElement;
}
packages/skin/ui/src/types.ts
+8
View File
@@ -189,6 +189,14 @@ export interface StepperProps {
onChange?: (index: number) => void; // 步骤切换回调（点击回跳触发）
}
/*** 评分入参 ***/
export interface RateProps {
value: Signal<number>; // 当前评分（1 基整数值），双向绑定（点击/键盘写回、外部赋值同步）
max?: number; // 星标总数；缺省 5
disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
onChange?: (value: number) => void; // 评分变化回调
}
/*** 徽标入参 ***/
export interface BadgeProps {
label: string; // 徽标文案
packages/skin/ui/ua.manifest.json
+37
View File
@@ -39,6 +39,7 @@
"progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复",
"tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
"stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
"modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区",
"drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭",
"form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
@@ -1015,6 +1016,42 @@
"clickable: true 时已完成步骤可点击回跳并写回信号，配合 onChange 同步业务状态"
]
},
{
"id": "rate",
"title": "评分 Rate",
"demo": "sec-rate",
"props": [
{
"n": "value",
"t": "Signal<number>",
"r": 1,
"d": "当前评分（1 基整数值）信号，双向绑定：点选/键盘写回、外部赋值同步"
},
{
"n": "max",
"t": "number",
"d": "星标总数；缺省 5",
"df": "5"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用态：布尔直接置位，传信号则动态同步"
},
{
"n": "onChange",
"t": "(value: number) => void",
"k": 1,
"d": "评分变化回调"
}
],
"example": "const score = signal(0); rate({ value: score, max: 5, onChange: (v) => console.log(v) })",
"steps": [
"用 signal(0) 创建评分信号并传入 value；0 表示未评分",
"点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分；悬停高亮预览、移出还原",
"max 可调整星标总数；disabled 支持布尔或信号禁用"
]
},
{
"id": "pagination",
"title": "分页器 Pagination",
packages/skin/ui/ui.css
+33 -1
View File
@@ -783,6 +783,37 @@ button.ua-step-dot:hover {
color: var(--ua-color-text-muted);
}
/* —— 评分 —— */
.ua-rate {
display: inline-flex;
gap: 2px;
}
.ua-rate-star {
padding: 0;
border: none;
background: none;
color: var(--ua-color-border); /* 未选中：弱化为边框色 */
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: color 0.15s, transform 0.12s;
}
.ua-rate-star:hover {
transform: scale(1.15); /* 悬停微放大 */
}
.ua-rate-star.is-on {
color: var(--ua-color-warning); /* 选中：警示黄即星标金 */
}
.ua-rate-star:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.ua-rate-star:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent);
border-radius: 4px;
}
/* —— 徽标 —— */
.ua-badge {
display: inline-block;
@@ -1459,7 +1490,8 @@ button.ua-step-dot:hover {
.ua-modal-overlay,
.ua-drawer,
.ua-drawer-overlay,
.ua-step-dot {
.ua-step-dot,
.ua-rate-star {
animation: none !important;
transition: none !important;
}