iter(g03): 输入组件补 prefix/suffix 附加块

packages/skin/ui/src/addons.ts

@@ -0,0 +1,13 @@
+import { h } from '@ui-arch/frame';
+
+/*** 输入附加块包装：prefix/suffix 存在时把控件包进附加组，否则原样返回（零侵入，结构不变） ***/
+export function addonWrap(
+  el: HTMLElement,
+  prefix?: string | HTMLElement,
+  suffix?: string | HTMLElement,
+  column = false, // 多行控件用纵向布局：prefix 在上、suffix 在下
+): HTMLElement {
+  if (!prefix && !suffix) return el; // 卫语句：无附加不包裹
+  const addon = (v?: string | HTMLElement) => (v == null ? null : h('span', { class: 'ua-input-addon' }, v));
+  return h('div', { class: column ? 'ua-input-group ua-input-group-column' : 'ua-input-group' }, addon(prefix), el, addon(suffix));
+}

packages/skin/ui/src/inputNumber.ts

@@ -1,9 +1,10 @@
 import { effect, h } from '@ui-arch/frame';
 import { button } from './button.js';
+import { addonWrap } from './addons.js';
 import type { InputNumberProps } from './types.js';
 
 /*** 数字输入：−/+ 按钮 + 输入框三段式，value 信号双向绑定，min/max/step 超界自动夹取，键盘 ↑↓ 调节 ***/
-export function inputNumber(props: InputNumberProps): HTMLDivElement {
+export function inputNumber(props: InputNumberProps): HTMLElement {
   const min = props.min ?? -Infinity; // 无下限缺省
   const max = props.max ?? Infinity; // 无上限缺省
   const step = props.step ?? 1; // 步长缺省 1
@@ -22,5 +23,5 @@ export function inputNumber(props: InputNumberProps): HTMLDivElement {
   const inc = button({ label: '+', variant: 'ghost', disabled: props.disabled, onClick: () => emit(props.value() + step) });
   dec.setAttribute('aria-label', '减少');
   inc.setAttribute('aria-label', '增加');
-  return h('div', { class: 'ua-input-number', role: 'group' }, dec, input, inc) as HTMLDivElement;
+  return addonWrap(h('div', { class: 'ua-input-number', role: 'group' }, dec, input, inc) as HTMLDivElement, props.prefix, props.suffix);
 }

packages/skin/ui/src/textField.ts

@@ -1,8 +1,9 @@
 import { effect, h } from '@ui-arch/frame';
+import { addonWrap } from './addons.js';
 import type { TextFieldProps } from './types.js';
 
-/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调 ***/
-export function textField(props: TextFieldProps): HTMLInputElement {
+/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包附加组 ***/
+export function textField(props: TextFieldProps): HTMLElement {
   const el = h('input', { class: 'ua-input', placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性，Signal 走响应式
   if (props.value) {
     const signal = props.value;
@@ -12,5 +13,5 @@ export function textField(props: TextFieldProps): HTMLInputElement {
     });
   }
   if (props.onInput) el.addEventListener('input', () => props.onInput!(el.value));
-  return el;
+  return addonWrap(el, props.prefix, props.suffix);
 }

packages/skin/ui/src/textarea.ts

@@ -1,8 +1,9 @@
 import { effect, h } from '@ui-arch/frame';
+import { addonWrap } from './addons.js';
 import type { TextareaProps } from './types.js';
 
-/*** 多行输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调 ***/
-export function textarea(props: TextareaProps): HTMLTextAreaElement {
+/*** 多行输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包纵向附加组 ***/
+export function textarea(props: TextareaProps): HTMLElement {
   const el = h('textarea', { class: 'ua-textarea', rows: props.rows ?? 3, placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLTextAreaElement; // false/undefined 移除属性，Signal 走响应式
   if (props.value) {
     const signal = props.value;
@@ -12,5 +13,5 @@ export function textarea(props: TextareaProps): HTMLTextAreaElement {
     });
   }
   if (props.onInput) el.addEventListener('input', () => props.onInput!(el.value));
-  return el;
+  return addonWrap(el, props.prefix, props.suffix, true);
 }

packages/skin/ui/src/types.ts

@@ -32,6 +32,8 @@ export interface TextFieldProps {
   value?: Signal<string>;            // 双向绑定的信号
   disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
   onInput?: (value: string) => void; // 输入回调
+  prefix?: string | HTMLElement;     // 输入框内侧前置附加块（如图标、货币符）；缺省不渲染
+  suffix?: string | HTMLElement;     // 输入框内侧后置附加块（如单位）；缺省不渲染
 }
 
 /*** 卡片入参 ***/
@@ -163,6 +165,8 @@ export interface TextareaProps {
   value?: Signal<string>;            // 双向绑定的信号
   disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
   onInput?: (value: string) => void; // 输入回调
+  prefix?: string | HTMLElement;     // 上方附加块（如标题、计数说明）；缺省不渲染
+  suffix?: string | HTMLElement;     // 下方附加块（如字数提示）；缺省不渲染
 }
 
 /*** 数字输入入参 ***/
@@ -173,6 +177,8 @@ export interface InputNumberProps {
   step?: number;           // 步长；缺省 1
   disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
   onChange?: (value: number) => void;   // 值变化回调（已夹取到合法区间）
+  prefix?: string | HTMLElement;        // −/+ 按钮前的附加块（如货币符）；缺省不渲染
+  suffix?: string | HTMLElement;        // +/+ 按钮后的附加块（如单位）；缺省不渲染
 }
 
 /*** 步骤条条目 ***/