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

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;

packages/skin/ui/src/types.ts

@@ -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;   // 评分变化回调
 }