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

iter(g122): 评分组件支持 allowHalf 半星

Browse Source
This commit is contained in:
HIsheR
2026-10-26 14:34:03 +08:00
parent f4a51017ae
commit 72c5d24961
8 changed files with 65 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/backlog.json
+8
View File
@@ -1332,6 +1332,14 @@
"acceptance": "TextFieldProps 新增 maxCount（缺省不渲染）：传了即设原生 maxlength 拦截超限输入，输入框内侧附加组显示实时 n/上限（数字等宽不抖）；与 clearable 共存时同组并排；文档参数表 / api 说明 / 手把手与 llms-full.txt 同步；npm run check 全绿",
"notes": "自补：输入类一致性；计数与清空共用后置附加组，零新增布局容器；首轮 verify 曾报 llms-full 漂移，重跑 npm run docs 后恢复（docs 需在 index 之后跑）",
"status": "done"
},
{
"id": "g122",
"title": "评分组件支持 allowHalf 半星",
"motivation": "评分只有整数档：商品 4.5 星、服务 3.5 分这类半档表达不了，调用方只能取整或自己换别的组件；点星也只能选整颗，左半区白白浪费",
"acceptance": "RateProps 新增 allowHalf（缺省整数）：点击星标左半区记 0.5 分、右半区整颗，键盘步进同为 0.5（值按 0.5 量化夹取），悬停位置实时预览半格填充（左半亮右半灭走渐变裁字），value 信号可写入 x.5；文档参数表 / api 说明 / 手把手与 llms-full.txt 同步；npm run check 全绿",
"notes": "自补：组件能力补齐；命中值与键盘步进共用 0.5 量化，不改信号语义",
"status": "open"
}
]
}
.ua/index.json
+19 -6
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T06:12:21.011Z",
"generatedAt": "2026-10-26T06:33:37.851Z",
"repoRoot": ".",
"packages": [
{
@@ -143,7 +143,7 @@
"entry": "src/index.ts",
"exports": [
"button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交）",
"textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮",
"textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮，maxCount 设原生上限并实时显示字数",
"inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节（长按连发步进），min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块",
"textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块，maxCount 显示实时字数并设原生上限",
"slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值",
@@ -169,7 +169,7 @@
"progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复",
"tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签；页签项 closable 时带关闭按钮（聚焦后 Delete 同样可关），关闭只回调 onClose 由调用方摘数据",
"stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配，allowHalf 开启半星（左半区 0.5 分）",
"empty(props)：空状态占位，title/description 可选，action 放操作区",
"divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线",
"space(props)：间距容器，flex gap 统一子元素间距，direction / size / align / justify / wrap / block 可调",
@@ -386,6 +386,11 @@
"t": "boolean",
"df": "false",
"d": "开启后有值即显示一键清空按钮；缺省 false"
},
{
"n": "maxCount",
"t": "number",
"d": "字数上限：同时设原生 maxlength，并在输入框内侧显示实时计数；缺省不限"
}
],
"example": "const name = signal(''); const el = textField({ value: name, placeholder: '输入名字…', onInput: (v) => console.log(v) })",
@@ -393,7 +398,8 @@
"先用 signal('') 创建字符串信号",
"传入 value 完成双向绑定：用户输入自动写回，外部赋值自动回显",
"在任意响应式位置用 name() 读取最新值，如 () => `你好，${name()}`",
"需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载"
"需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载",
"需要限制长度就给 maxCount：超限输入被原生拦截，输入框内侧实时显示 n/上限"
]
},
{
@@ -1414,7 +1420,7 @@
"n": "value",
"t": "Signal<number>",
"r": 1,
"d": "当前评分（1 基整数值）信号，双向绑定：点选/键盘写回、外部赋值同步"
"d": "当前评分（1 基，allowHalf 时 0.5 步进）信号，双向绑定：点选/键盘写回、外部赋值同步"
},
{
"n": "max",
@@ -1422,6 +1428,12 @@
"d": "星标总数；缺省 5",
"df": "5"
},
{
"n": "allowHalf",
"t": "boolean",
"df": "false",
"d": "允许半星：点击星标左半区记 0.5 分，键盘步进同为 0.5；缺省整数"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
@@ -1438,7 +1450,8 @@
"steps": [
"用 signal(0) 创建评分信号并传入 value；0 表示未评分",
"点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分；悬停高亮预览、移出还原",
"max 可调整星标总数；disabled 支持布尔或信号禁用"
"max 可调整星标总数；disabled 支持布尔或信号禁用",
"要支持半星就传 allowHalf：点星标左半区记 0.5 分，悬停位置实时预览半格填充"
]
},
{
llms-full.txt
+5 -3
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档（无图形版）
> 自动生成于 2026-10-26T06:30:27.757Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 自动生成于 2026-10-26T06:33:37.851Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
## 快速上手
@@ -729,8 +729,9 @@ const step = signal(1); stepper({ steps: [{ label: '下单' }, { label: '支付'
参数：
- value（必填）：Signal<number> —— 当前评分（1 基整数值）信号，双向绑定：点选/键盘写回、外部赋值同步
- value（必填）：Signal<number> —— 当前评分（1 基，allowHalf 时 0.5 步进）信号，双向绑定：点选/键盘写回、外部赋值同步
- max（默认 5）：number —— 星标总数；缺省 5
- allowHalf（默认 false）：boolean —— 允许半星：点击星标左半区记 0.5 分，键盘步进同为 0.5；缺省整数
- disabled：boolean | Signal<boolean> —— 禁用态：布尔直接置位，传信号则动态同步
- onChange（回调）：(value: number) => void —— 评分变化回调
@@ -745,6 +746,7 @@ const score = signal(0); rate({ value: score, max: 5, onChange: (v) => console.l
1. 用 signal(0) 创建评分信号并传入 value；0 表示未评分
2. 点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分；悬停高亮预览、移出还原
3. max 可调整星标总数；disabled 支持布尔或信号禁用
4. 要支持半星就传 allowHalf：点星标左半区记 0.5 分，悬停位置实时预览半格填充
现场演示：apps/docs/demo.html#sec-rate
@@ -1689,7 +1691,7 @@ API 速览：
- progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复
- tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签；页签项 closable 时带关闭按钮（聚焦后 Delete 同样可关），关闭只回调 onClose 由调用方摘数据
- stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配，allowHalf 开启半星（左半区 0.5 分）
- empty(props)：空状态占位，title/description 可选，action 放操作区
- divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线
- space(props)：间距容器，flex gap 统一子元素间距，direction / size / align / justify / wrap / block 可调
llms.txt
+2 -2
View File
@@ -48,7 +48,7 @@
- 描述: DOM 皮肤组件库：表单 / 反馈 / 浮层 / 导航 / 数据展示，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌（组件全量见 api.exports 或刚体清单）
- API:
- button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交）
- textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮
- textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮，maxCount 设原生上限并实时显示字数
- inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节（长按连发步进），min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块
- textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块，maxCount 显示实时字数并设原生上限
- slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值
@@ -74,7 +74,7 @@
- progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复
- tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签；页签项 closable 时带关闭按钮（聚焦后 Delete 同样可关），关闭只回调 onClose 由调用方摘数据
- stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配，allowHalf 开启半星（左半区 0.5 分）
- empty(props)：空状态占位，title/description 可选，action 放操作区
- divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线
- space(props)：间距容器，flex gap 统一子元素间距，direction / size / align / justify / wrap / block 可调
packages/skin/ui/src/rate.ts
+13 -8
View File
@@ -1,31 +1,36 @@
import { effect, h, signal } from '@ui-arch/frame';
import type { RateProps } from './types.js';
/*** 评分：星标点选，hover 预览移出还原，键盘 ←→/↑↓ 调节，value 信号双向绑定 ***/
/*** 评分：星标点选（allowHalf 可记半星），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 step = props.allowHalf ? 0.5 : 1; // 半星模式步进 0.5
const hover = signal(0); // 预览值（1 基，0 表示无预览）
const emit = (v: number): void => { const n = Math.round(Math.min(max, Math.max(1, v)) * 2) / 2; const q = props.allowHalf ? n : Math.round(n); value(q); if (props.onChange) props.onChange(q); }; // 写回信号并回调（半星按 0.5 量化）
/*** 键盘调节：focus 在整组上，方向键步进一分（重渲染后仍生效） ***/
/*** 计算星标命中值：allowHalf 时左半区记 0.5 分 ***/
const hitOf = (e: MouseEvent, i: number): number => props.allowHalf && e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2 ? i - 0.5 : i;
/*** 键盘调节：focus 在整组上，方向键按步进调节（重渲染后仍生效） ***/
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)); // →/↑ 加一分，←/↓ 减一分
emit(value() + (e.key === 'ArrowRight' || e.key === 'ArrowUp' ? step : -step)); // →/↑ 加一步，←/↓ 减一步
};
const render = (): HTMLElement => {
const shown = hover() || value(); // 预览优先，无预览显示当前值
const stars = [];
for (let i = 1; i <= max; i++) {
const frac = shown - i + 1; // 该星填充比例（1 满格 / 0.5 半格 / 0 灭）
stars.push(h('button', {
class: `ua-rate-star${i <= shown ? ' is-on' : ''}`,
class: `ua-rate-star${frac >= 1 ? ' is-on' : frac > 0 ? ' is-half' : ''}`,
type: 'button',
disabled: props.disabled,
'aria-label': `${i} 星`,
onClick: () => emit(i),
onMouseEnter: () => hover(i),
onClick: (e: MouseEvent) => emit(hitOf(e, i)),
onMouseMove: (e: MouseEvent) => hover(hitOf(e, i)), // 半星模式下按悬停位置细分预览
}, '★'));
}
const node = h('div', { class: 'ua-rate', role: 'slider', tabindex: '0', 'aria-label': '评分', 'aria-valuemin': 1, 'aria-valuemax': max, 'aria-valuenow': value(), onMouseLeave: () => hover(0) }, ...stars) as HTMLDivElement;
packages/skin/ui/src/types.ts
+2 -1
View File
@@ -221,8 +221,9 @@ export interface StepperProps {
/*** 评分入参 ***/
export interface RateProps {
value: Signal<number>; // 当前评分（1 基整数值），双向绑定（点击/键盘写回、外部赋值同步）
value: Signal<number>; // 当前评分（1 基，allowHalf 时 0.5 步进），双向绑定（点击/键盘写回、外部赋值同步）
max?: number; // 星标总数；缺省 5
allowHalf?: boolean; // 允许半星：点击左半区记 0.5 分，键盘步进同为 0.5；缺省整数
disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
onChange?: (value: number) => void; // 评分变化回调
}
packages/skin/ui/ua.manifest.json
+10 -3
View File
@@ -40,7 +40,7 @@
"progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复",
"tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签；页签项 closable 时带关闭按钮（聚焦后 Delete 同样可关），关闭只回调 onClose 由调用方摘数据",
"stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配，allowHalf 开启半星（左半区 0.5 分）",
"empty(props)：空状态占位，title/description 可选，action 放操作区",
"divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线",
"space(props)：间距容器，flex gap 统一子元素间距，direction / size / align / justify / wrap / block 可调",
@@ -1291,7 +1291,7 @@
"n": "value",
"t": "Signal<number>",
"r": 1,
"d": "当前评分（1 基整数值）信号，双向绑定：点选/键盘写回、外部赋值同步"
"d": "当前评分（1 基，allowHalf 时 0.5 步进）信号，双向绑定：点选/键盘写回、外部赋值同步"
},
{
"n": "max",
@@ -1299,6 +1299,12 @@
"d": "星标总数；缺省 5",
"df": "5"
},
{
"n": "allowHalf",
"t": "boolean",
"df": "false",
"d": "允许半星：点击星标左半区记 0.5 分，键盘步进同为 0.5；缺省整数"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
@@ -1315,7 +1321,8 @@
"steps": [
"用 signal(0) 创建评分信号并传入 value；0 表示未评分",
"点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分；悬停高亮预览、移出还原",
"max 可调整星标总数；disabled 支持布尔或信号禁用"
"max 可调整星标总数；disabled 支持布尔或信号禁用",
"要支持半星就传 allowHalf：点星标左半区记 0.5 分，悬停位置实时预览半格填充"
]
},
{
packages/skin/ui/ui.css
+6
View File
@@ -956,6 +956,12 @@ button.ua-step-dot:hover {
.ua-rate-star.is-on {
color: var(--ua-color-warning); /* 选中：警示黄即星标金 */
}
.ua-rate-star.is-half {
background: linear-gradient(90deg, var(--ua-color-warning) 50%, var(--ua-color-border) 50%); /* 半星：左半亮右半灭 */
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* 渐变裁进字内 */
}
.ua-rate-star:disabled {
cursor: not-allowed;
opacity: 0.45;