iter(g234): 新增 pinInput 验证码输入组件，N 格数字输入支持进格回删移格与粘贴分发（71 组件）

packages/skin/ui/src/index.ts

@@ -70,3 +70,4 @@ export { avatarGroup } from './avatarGroup.js';
 export { virtualList } from './virtualList.js';
 export { commandPalette } from './commandPalette.js';
 export { timePicker } from './timePicker.js';
+export { pinInput } from './pinInput.js';

packages/skin/ui/src/pinInput.ts

@@ -0,0 +1,62 @@
+import { effect, h } from '@ui-arch/frame';
+import type { PinInputProps } from './types.js';
+
+/*** 验证码输入：N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定 ***/
+export function pinInput(props: PinInputProps): HTMLDivElement {
+  const length = props.length ?? 6; // 格数缺省 6
+  const sanitize = (s: string): string => String(s).replace(/\D/g, '').slice(0, length); // 只留数字并截到格数
+  const inputs: HTMLInputElement[] = []; // 格子引用（格子建一次不重渲染，焦点天然不丢）
+  const focusAt = (i: number): void => inputs[Math.max(0, Math.min(length - 1, i))]?.focus(); // 目标格钳制到首尾
+
+  /*** 写回单一来源：拼接各格内容赋回外部信号（同值短路防 effect 环），并回调当前拼接串 ***/
+  const commit = (): void => {
+    const next = inputs.map((el) => el.value).join('');
+    if (props.value() !== next) props.value(next);
+    if (props.onChange) props.onChange(next);
+  };
+
+  /*** 单格构造：输入进格 / 退格回删 / 方向键移格 / 粘贴分发，非数字键一律拦下 ***/
+  const cell = (i: number): HTMLInputElement => h('input', {
+    class: 'ua-input ua-pin-cell',
+    type: props.mask ? 'password' : 'text',
+    inputmode: 'numeric',
+    autocomplete: props.mask ? 'one-time-code' : 'off',
+    maxlength: 1,
+    'aria-label': `第 ${i + 1} 位`,
+    onFocus: () => inputs[i].select(), // 聚焦全选：直接敲键即覆盖旧值
+    onInput: () => {
+      inputs[i].value = sanitize(inputs[i].value).slice(-1); // 单格只留最后敲入的一位
+      if (inputs[i].value && i < length - 1) focusAt(i + 1); // 敲完进下一格（末格不进）
+      commit();
+    },
+    onKeydown: (e: KeyboardEvent) => {
+      if (e.key === 'Backspace') { e.preventDefault(); if (inputs[i].value) { inputs[i].value = ''; } else if (i > 0) { inputs[i - 1].value = ''; focusAt(i - 1); } commit(); return; } // 本格有值删本格，空格回删上一格并左移
+      if (e.key === 'ArrowLeft') { e.preventDefault(); focusAt(i - 1); return; }
+      if (e.key === 'ArrowRight') { e.preventDefault(); focusAt(i + 1); return; }
+      if (e.key.length === 1 && !/\d/.test(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault(); // 只放行数字与控制键（粘贴由 onPaste 接管）
+    },
+    onPaste: (e: ClipboardEvent) => {
+      const digits = sanitize(e.clipboardData?.getData('text') ?? '');
+      if (!digits) return;
+      e.preventDefault();
+      const from = digits.length >= length ? 0 : i; // 整段验证码从首格铺起，零散片段从当前格续
+      for (let k = 0; k < digits.length && from + k < length; k++) inputs[from + k].value = digits[k]; // 逐格分发
+      focusAt(Math.min(length - 1, from + digits.length)); // 落到末个空格，接着手输也顺手
+      commit();
+    },
+  }) as HTMLInputElement;
+
+  const root = h('div', { class: 'ua-pin-input', role: 'group' }, ...Array.from({ length }, (_, i) => cell(i))) as HTMLDivElement;
+  root.querySelectorAll('input').forEach((el) => inputs.push(el as HTMLInputElement));
+
+  effect(() => { // 外部信号 → 格子回写（同值不写避免打断输入法），禁用态支持布尔或信号
+    const v = sanitize(props.value());
+    const dis = typeof props.disabled === 'function' ? props.disabled() : !!props.disabled;
+    inputs.forEach((el, k) => {
+      const ch = v[k] ?? '';
+      if (el.value !== ch) el.value = ch;
+      el.disabled = dis;
+    });
+  });
+  return root;
+}

packages/skin/ui/src/types.ts

@@ -245,6 +245,15 @@ export interface RateProps {
   onChange?: (value: number) => void;   // 评分变化回调
 }
 
+/*** 验证码输入入参 ***/
+export interface PinInputProps {
+  value: Signal<string>;  // 当前验证码（数字拼接串），双向绑定（输入写回、外部赋值同步）
+  length?: number;        // 格数；缺省 6
+  mask?: boolean;         // 密文显示（type=password + one-time-code 自动填充）；缺省明文
+  disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
+  onChange?: (value: string) => void;   // 任一格变化回调（参数为当前已输入拼接串）
+}
+
 /*** 空状态入参 ***/
 export interface EmptyProps {
   title?: string;       // 主标题；缺省不渲染