From 72c5d24961a359cc5c95a03a2abab3cf38bbc683 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 14:34:03 +0800 Subject: [PATCH] =?UTF-8?q?iter(g122):=20=E8=AF=84=E5=88=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=20allowHalf=20=E5=8D=8A=E6=98=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/backlog.json | 8 ++++++++ .ua/index.json | 25 +++++++++++++++++++------ llms-full.txt | 8 +++++--- llms.txt | 4 ++-- packages/skin/ui/src/rate.ts | 21 +++++++++++++-------- packages/skin/ui/src/types.ts | 3 ++- packages/skin/ui/ua.manifest.json | 13 ++++++++++--- packages/skin/ui/ui.css | 6 ++++++ 8 files changed, 65 insertions(+), 23 deletions(-) diff --git a/.ua/backlog.json b/.ua/backlog.json index 1c64d76..1f40750 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -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" } ] } diff --git a/.ua/index.json b/.ua/index.json index 8d6e6a6..acf0ffb 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -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", "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", @@ -1438,7 +1450,8 @@ "steps": [ "用 signal(0) 创建评分信号并传入 value;0 表示未评分", "点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分;悬停高亮预览、移出还原", - "max 可调整星标总数;disabled 支持布尔或信号禁用" + "max 可调整星标总数;disabled 支持布尔或信号禁用", + "要支持半星就传 allowHalf:点星标左半区记 0.5 分,悬停位置实时预览半格填充" ] }, { diff --git a/llms-full.txt b/llms-full.txt index 3166d3e..ec3ea7f 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -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 —— 当前评分(1 基整数值)信号,双向绑定:点选/键盘写回、外部赋值同步 +- value(必填):Signal —— 当前评分(1 基,allowHalf 时 0.5 步进)信号,双向绑定:点选/键盘写回、外部赋值同步 - max(默认 5):number —— 星标总数;缺省 5 +- allowHalf(默认 false):boolean —— 允许半星:点击星标左半区记 0.5 分,键盘步进同为 0.5;缺省整数 - disabled:boolean | Signal —— 禁用态:布尔直接置位,传信号则动态同步 - 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 可调 diff --git a/llms.txt b/llms.txt index f515d3f..0ed09ae 100644 --- a/llms.txt +++ b/llms.txt @@ -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 可调 diff --git a/packages/skin/ui/src/rate.ts b/packages/skin/ui/src/rate.ts index 6cbcfa7..ec9fae5 100644 --- a/packages/skin/ui/src/rate.ts +++ b/packages/skin/ui/src/rate.ts @@ -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; diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index f57dfca..7030611 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -221,8 +221,9 @@ export interface StepperProps { /*** 评分入参 ***/ export interface RateProps { - value: Signal; // 当前评分(1 基整数值),双向绑定(点击/键盘写回、外部赋值同步) + value: Signal; // 当前评分(1 基,allowHalf 时 0.5 步进),双向绑定(点击/键盘写回、外部赋值同步) max?: number; // 星标总数;缺省 5 + allowHalf?: boolean; // 允许半星:点击左半区记 0.5 分,键盘步进同为 0.5;缺省整数 disabled?: boolean | Signal; // 禁用态:布尔直接置位,传信号则动态同步 onChange?: (value: number) => void; // 评分变化回调 } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 10c0b60..a920ffb 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -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", "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", @@ -1315,7 +1321,8 @@ "steps": [ "用 signal(0) 创建评分信号并传入 value;0 表示未评分", "点击星标或聚焦后按 →/↑ 加一分、←/↓ 减一分;悬停高亮预览、移出还原", - "max 可调整星标总数;disabled 支持布尔或信号禁用" + "max 可调整星标总数;disabled 支持布尔或信号禁用", + "要支持半星就传 allowHalf:点星标左半区记 0.5 分,悬停位置实时预览半格填充" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 922f880..ddd6319 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -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;