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

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
+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;
+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; // 评分变化回调
}
+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 分,悬停位置实时预览半格填充"
]
},
{
+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;