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

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-23T10:58:48.833Z",
+  "generatedAt": "2026-10-23T11:03:12.689Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -143,9 +143,9 @@
         "entry": "src/index.ts",
         "exports": [
           "button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用",
-          "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用",
+          "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块",
-          "inputNumber(props)：数字输入，−/+ 按钮 + 键盘 ↑↓ 调节，value 信号双向绑定，min/max/step 超界自动夹取",
+          "inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块",
-          "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用",
+          "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块",
           "slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值",
           "checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用",
           "switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用",
@@ -325,13 +325,24 @@
                 "t": "(value: string) => void",
                 "k": 1,
                 "d": "输入回调，每次按键触发"
+              },
+              {
+                "n": "prefix",
+                "t": "string | HTMLElement",
+                "d": "前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染"
+              },
+              {
+                "n": "suffix",
+                "t": "string | HTMLElement",
+                "d": "后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染"
               }
             ],
             "example": "const name = signal(''); const el = textField({ value: name, placeholder: '输入名字…', onInput: (v) => console.log(v) })",
             "steps": [
               "先用 signal('') 创建字符串信号",
               "传入 value 完成双向绑定：用户输入自动写回，外部赋值自动回显",
-              "在任意响应式位置用 name() 读取最新值，如 () => `你好，${name()}`"
+              "在任意响应式位置用 name() 读取最新值，如 () => `你好，${name()}`",
+              "需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载"
             ]
           },
           {
@@ -371,13 +382,24 @@
                 "t": "(value: number) => void",
                 "k": 1,
                 "d": "值变化回调（已夹取到合法区间）"
+              },
+              {
+                "n": "prefix",
+                "t": "string | HTMLElement",
+                "d": "前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染"
+              },
+              {
+                "n": "suffix",
+                "t": "string | HTMLElement",
+                "d": "后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染"
               }
             ],
             "example": "const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onChange: (v) => console.log(v) })",
             "steps": [
               "用 signal(1) 创建数字信号并传入 value 完成双向绑定",
               "点击 −/+ 按钮或在输入框聚焦时按 ↑↓ 以 step 调节；直接输入在失焦或回车时解析",
-              "非法输入自动回滚为当前值；min/max 超界自动夹取，disabled 支持布尔或信号禁用"
+              "非法输入自动回滚为当前值；min/max 超界自动夹取，disabled 支持布尔或信号禁用",
+              "需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载"
             ]
           },
           {
@@ -411,13 +433,24 @@
                 "t": "(value: string) => void",
                 "k": 1,
                 "d": "输入回调"
+              },
+              {
+                "n": "prefix",
+                "t": "string | HTMLElement",
+                "d": "前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染"
+              },
+              {
+                "n": "suffix",
+                "t": "string | HTMLElement",
+                "d": "后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染"
               }
             ],
             "example": "const bio = signal(''); textarea({ value: bio, rows: 4, placeholder: '一句话介绍…' })",
             "steps": [
               "创建信号并传入 value",
               "用 rows 控制初始高度，用户可纵向拉伸",
-              "字数统计等派生逻辑直接在响应式文本里读 bio().length"
+              "字数统计等派生逻辑直接在响应式文本里读 bio().length",
+              "需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载"
             ]
           },
           {

apps/demo/main.ts

@@ -127,6 +127,8 @@ const volume = signal(40);
 
 // —— 数字输入：购买数量演示，与禁用态实例共用同一信号 ——
 const qty = signal(1);
+const price = signal('9.9'); // 演示 suffix 附加块
+const amount = signal(2); // 演示 inputNumber 前后缀
 
 // —— 步骤条：下单流程演示，按钮推进、点已完成步骤回跳 ——
 const stepIdx = signal(0);
@@ -169,8 +171,10 @@ const content = h(
   section(
     'sec-bind',
     '双向绑定',
-    'textField 与信号双向同步：输入即回显。',
+    'textField 与信号双向同步：输入即回显；prefix/suffix 渲染为输入框内侧附加块。',
     textField({ placeholder: '输入名字…', value: name }),
+    textField({ placeholder: '搜索…', value: name, prefix: '🔍' }),
+    textField({ value: price, suffix: '元' }),
     h('span', { class: 'out' }, () => (name() ? `你好，${name()}！` : '等待输入…')),
   ),
   section(
@@ -267,6 +271,7 @@ const content = h(
       { class: 'row' },
       inputNumber({ value: qty, min: 1, max: 99, onChange: (v) => toast.info(`数量 ${v}`) }),
       inputNumber({ value: qty, disabled: locked }),
+      inputNumber({ value: amount, min: 0, prefix: '¥', suffix: '件' }),
     ),
   ),
   section(

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-23T10:58:48.833Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-23T11:03:12.689Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -104,6 +104,8 @@ button({ label: '提交', variant: 'primary', onClick: () => console.log('clicke
 - placeholder：string —— 占位文案
 - disabled：boolean | Signal<boolean> —— 禁用态：布尔直接置位，传信号则动态同步
 - onInput（回调）：(value: string) => void —— 输入回调，每次按键触发
+- prefix：string | HTMLElement —— 前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染
+- suffix：string | HTMLElement —— 后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染
 
 示例：
 
@@ -116,6 +118,7 @@ const name = signal(''); const el = textField({ value: name, placeholder: '输
 1. 先用 signal('') 创建字符串信号
 2. 传入 value 完成双向绑定：用户输入自动写回，外部赋值自动回显
 3. 在任意响应式位置用 name() 读取最新值，如 () => `你好，${name()}`
+4. 需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载
 
 现场演示：apps/docs/demo.html#sec-bind
 
@@ -129,6 +132,8 @@ const name = signal(''); const el = textField({ value: name, placeholder: '输
 - step（默认 1）：number —— 步长；缺省 1
 - disabled：boolean | Signal<boolean> —— 禁用态：布尔直接置位，传信号则动态同步
 - onChange（回调）：(value: number) => void —— 值变化回调（已夹取到合法区间）
+- prefix：string | HTMLElement —— 前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染
+- suffix：string | HTMLElement —— 后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染
 
 示例：
 
@@ -141,6 +146,7 @@ const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onC
 1. 用 signal(1) 创建数字信号并传入 value 完成双向绑定
 2. 点击 −/+ 按钮或在输入框聚焦时按 ↑↓ 以 step 调节；直接输入在失焦或回车时解析
 3. 非法输入自动回滚为当前值；min/max 超界自动夹取，disabled 支持布尔或信号禁用
+4. 需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载
 
 现场演示：apps/docs/demo.html#sec-inputnumber
 
@@ -153,6 +159,8 @@ const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onC
 - placeholder：string —— 占位文案
 - disabled：boolean | Signal<boolean> —— 禁用态：布尔直接置位，传信号则动态同步
 - onInput（回调）：(value: string) => void —— 输入回调
+- prefix：string | HTMLElement —— 前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染
+- suffix：string | HTMLElement —— 后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染
 
 示例：
 
@@ -165,6 +173,7 @@ const bio = signal(''); textarea({ value: bio, rows: 4, placeholder: '一句话
 1. 创建信号并传入 value
 2. 用 rows 控制初始高度，用户可纵向拉伸
 3. 字数统计等派生逻辑直接在响应式文本里读 bio().length
+4. 需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载
 
 现场演示：apps/docs/demo.html#sec-form
 
@@ -892,9 +901,9 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓
 API 速览：
 
 - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用
-- textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用
+- textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块
-- inputNumber(props)：数字输入，−/+ 按钮 + 键盘 ↑↓ 调节，value 信号双向绑定，min/max/step 超界自动夹取
+- inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块
-- textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用
+- textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块
 - slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值
 - checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用
 - switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用

llms.txt

@@ -48,9 +48,9 @@
 - 描述: DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / image / tag / avatar / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / drawer / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。
 - API:
   - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用
-  - textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用
+  - textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块
-  - inputNumber(props)：数字输入，−/+ 按钮 + 键盘 ↑↓ 调节，value 信号双向绑定，min/max/step 超界自动夹取
+  - inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块
-  - textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用
+  - textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块
   - slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值
   - checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用
   - switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用

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 为输入回调 ***/
+/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包附加组 ***/
-export function textField(props: TextFieldProps): HTMLInputElement {
+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 为输入回调 ***/
+/*** 多行输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包纵向附加组 ***/
-export function textarea(props: TextareaProps): HTMLTextAreaElement {
+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;        // +/+ 按钮后的附加块（如单位）；缺省不渲染
 }
 
 /*** 步骤条条目 ***/

packages/skin/ui/ua.manifest.json

@@ -14,9 +14,9 @@
     "entry": "src/index.ts",
     "exports": [
       "button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用",
-      "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用",
+      "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块",
-      "inputNumber(props)：数字输入，−/+ 按钮 + 键盘 ↑↓ 调节，value 信号双向绑定，min/max/step 超界自动夹取",
+      "inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块",
-      "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用",
+      "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块",
       "slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值",
       "checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用",
       "switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用",
@@ -196,13 +196,24 @@
             "t": "(value: string) => void",
             "k": 1,
             "d": "输入回调，每次按键触发"
+          },
+          {
+            "n": "prefix",
+            "t": "string | HTMLElement",
+            "d": "前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染"
+          },
+          {
+            "n": "suffix",
+            "t": "string | HTMLElement",
+            "d": "后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染"
           }
         ],
         "example": "const name = signal(''); const el = textField({ value: name, placeholder: '输入名字…', onInput: (v) => console.log(v) })",
         "steps": [
           "先用 signal('') 创建字符串信号",
           "传入 value 完成双向绑定：用户输入自动写回，外部赋值自动回显",
-          "在任意响应式位置用 name() 读取最新值，如 () => `你好，${name()}`"
+          "在任意响应式位置用 name() 读取最新值，如 () => `你好，${name()}`",
+          "需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载"
         ]
       },
       {
@@ -242,13 +253,24 @@
             "t": "(value: number) => void",
             "k": 1,
             "d": "值变化回调（已夹取到合法区间）"
+          },
+          {
+            "n": "prefix",
+            "t": "string | HTMLElement",
+            "d": "前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染"
+          },
+          {
+            "n": "suffix",
+            "t": "string | HTMLElement",
+            "d": "后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染"
           }
         ],
         "example": "const qty = signal(1); const el = inputNumber({ value: qty, min: 1, max: 99, onChange: (v) => console.log(v) })",
         "steps": [
           "用 signal(1) 创建数字信号并传入 value 完成双向绑定",
           "点击 −/+ 按钮或在输入框聚焦时按 ↑↓ 以 step 调节；直接输入在失焦或回车时解析",
-          "非法输入自动回滚为当前值；min/max 超界自动夹取，disabled 支持布尔或信号禁用"
+          "非法输入自动回滚为当前值；min/max 超界自动夹取，disabled 支持布尔或信号禁用",
+          "需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载"
         ]
       },
       {
@@ -282,13 +304,24 @@
             "t": "(value: string) => void",
             "k": 1,
             "d": "输入回调"
+          },
+          {
+            "n": "prefix",
+            "t": "string | HTMLElement",
+            "d": "前置附加块（textField/inputNumber 在输入框内侧前、textarea 在上方）；缺省不渲染"
+          },
+          {
+            "n": "suffix",
+            "t": "string | HTMLElement",
+            "d": "后置附加块（textField/inputNumber 在输入框内侧后、textarea 在下方）；缺省不渲染"
           }
         ],
         "example": "const bio = signal(''); textarea({ value: bio, rows: 4, placeholder: '一句话介绍…' })",
         "steps": [
           "创建信号并传入 value",
           "用 rows 控制初始高度，用户可纵向拉伸",
-          "字数统计等派生逻辑直接在响应式文本里读 bio().length"
+          "字数统计等派生逻辑直接在响应式文本里读 bio().length",
+          "需要图标、货币符、单位等前后缀时传 prefix/suffix（字符串或 DOM），控件会包进带边框的附加组，聚焦光环由组统一承载"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -1608,3 +1608,42 @@ button.ua-step-dot:hover {
     transition: none !important;
   }
 }
+
+/* ---- 输入附加组（prefix/suffix） ---- */
+.ua-input-group {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--ua-color-border);
+  border-radius: var(--ua-radius-md);
+  background: var(--ua-color-bg);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.ua-input-group:focus-within {
+  border-color: var(--ua-color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 18%, transparent);
+}
+.ua-input-group .ua-input,
+.ua-input-group .ua-textarea {
+  border: none;           /* 组已带边框，内层去边防双线 */
+  border-radius: 0;
+  min-width: 160px;
+  background: transparent;
+}
+.ua-input-group .ua-input:focus,
+.ua-input-group .ua-textarea:focus {
+  box-shadow: none;       /* 聚焦光环由组统一承载 */
+  outline: none;
+}
+.ua-input-group-column {
+  flex-direction: column;
+  align-items: stretch;
+}
+.ua-input-addon {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 10px;
+  color: var(--ua-color-text-muted);
+  background: color-mix(in srgb, var(--ua-color-text) 5%, transparent);
+  font-size: var(--ua-font-size-md);
+  user-select: none;
+}