From 34abe3f1e80b46da4a6defce2c1161e32674ccf5 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 11:06:34 +0800 Subject: [PATCH] =?UTF-8?q?iter(g19):=20textarea=20=E5=AD=97=E6=95=B0?= =?UTF-8?q?=E7=BB=9F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/backlog.json | 8 ++++++++ .ua/index.json | 4 ++-- apps/demo/main.ts | 4 ++-- llms-full.txt | 4 ++-- llms.txt | 2 +- packages/skin/ui/src/textarea.ts | 13 +++++++++++-- packages/skin/ui/src/types.ts | 1 + packages/skin/ui/ua.manifest.json | 2 +- packages/skin/ui/ui.css | 11 +++++++++++ 9 files changed, 39 insertions(+), 10 deletions(-) diff --git a/.ua/backlog.json b/.ua/backlog.json index 2b9e446..7ce5aec 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -508,6 +508,14 @@ "acceptance": "clearable 开启后有值时显示清空按钮，点击清空并同步信号与 onInput；空值自动隐藏；npm run check 全绿", "status": "done", "notes": "自补：既有组件可用性细节" + }, + { + "id": "g19", + "title": "textarea 字数统计", + "motivation": "多行输入常配字数上限，用户需要 n/limit 实时反馈而不是提交后才报错", + "acceptance": "maxCount 传入后 textarea 设原生 maxlength 并在下方附加块显示实时计数，与外部写回同步；npm run check 全绿", + "status": "open", + "notes": "自补：既有组件可用性细节" } ] } diff --git a/.ua/index.json b/.ua/index.json index 44d9033..fe4dd82 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T03:02:53.444Z", + "generatedAt": "2026-10-26T03:06:01.165Z", "repoRoot": ".", "packages": [ { @@ -145,7 +145,7 @@ "button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用", "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮", "inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块", - "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块", + "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块，maxCount 显示实时字数并设原生上限", "slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值", "checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用", "switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用", diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 51a9c2d..155b9de 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -214,12 +214,12 @@ const content = h( section( 'sec-form', '表单控件', - 'checkbox / switch / select / radioGroup / textarea：状态一律由调用方信号持有；select 弹层在视口下方空间不足时自动翻到上方，展开后键入字母可快跳选项。', + 'checkbox / switch / select / radioGroup / textarea：状态一律由调用方信号持有；select 弹层在视口下方空间不足时自动翻到上方，展开后键入字母可快跳选项；textarea 传 maxCount 显示实时字数。', h('div', { class: 'row' }, checkbox({ label: '同意条款', checked: agreed }), h('span', { class: 'out' }, () => (agreed() ? '已同意' : '未同意'))), h('div', { class: 'row' }, switchButton({ label: '夜间模式', checked: nightMode }), h('span', { class: 'out' }, () => (nightMode() ? '开' : '关'))), h('div', { class: 'row' }, select({ options: cities.map((c) => ({ value: c, label: c })), value: city, placeholder: '选择城市…' }), h('span', { class: 'out' }, () => (city() ? `城市：${city()}` : '未选择'))), h('div', { class: 'row' }, radioGroup({ options: [{ value: 's', label: '小' }, { value: 'm', label: '中' }, { value: 'l', label: '大' }], value: size })), - textarea({ placeholder: '一句话介绍…', value: bio, rows: 2 }), + textarea({ placeholder: '一句话介绍…', value: bio, rows: 2, maxCount: 30 }), h('span', { class: 'out' }, () => `简介 ${bio().length} 字`), h( 'div', diff --git a/llms-full.txt b/llms-full.txt index e7b5887..eb3421d 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T03:02:53.444Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T03:06:01.165Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -1010,7 +1010,7 @@ API 速览： - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用 - textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮 - inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块 -- textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块 +- textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块，maxCount 显示实时字数并设原生上限 - slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值 - checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用 - switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用 diff --git a/llms.txt b/llms.txt index ba960c5..d4fa3a8 100644 --- a/llms.txt +++ b/llms.txt @@ -50,7 +50,7 @@ - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用 - textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮 - inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块 - - textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块 + - textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块，maxCount 显示实时字数并设原生上限 - slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值 - checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用 - switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用 diff --git a/packages/skin/ui/src/textarea.ts b/packages/skin/ui/src/textarea.ts index 0df2ca7..ff06132 100644 --- a/packages/skin/ui/src/textarea.ts +++ b/packages/skin/ui/src/textarea.ts @@ -2,7 +2,7 @@ import { effect, h } from '@ui-arch/frame'; import { addonWrap } from './addons.js'; import type { TextareaProps } from './types.js'; -/*** 多行输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包纵向附加组 ***/ +/*** 多行输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包纵向附加组，maxCount 显示字数统计 ***/ 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) { @@ -13,5 +13,14 @@ export function textarea(props: TextareaProps): HTMLElement { }); } if (props.onInput) el.addEventListener('input', () => props.onInput!(el.value)); - return addonWrap(el, props.prefix, props.suffix, true); + let counter: HTMLElement | null = null; // 字数统计块；maxCount 未传不创建 + if (props.maxCount) { + el.setAttribute('maxlength', String(props.maxCount)); // 原生拦截超限输入 + counter = h('span', { class: 'ua-textarea-count' }); + const syncCount = (): void => { counter!.textContent = `${el.value.length}/${props.maxCount}`; }; // 实时 n/limit + el.addEventListener('input', syncCount); // 用户输入时同步 + effect(() => { if (props.value) props.value(); syncCount(); }); // 初始与外部写回时同步（读信号建依赖） + } + const suffix = counter ? h('span', { class: 'ua-textarea-count-group' }, counter, props.suffix ?? null) : props.suffix; // 计数并入下方附加组 + return addonWrap(el, props.prefix, suffix, true); } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 9cd3e00..3ecdc00 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -177,6 +177,7 @@ export interface TextareaProps { onInput?: (value: string) => void; // 输入回调 prefix?: string | HTMLElement; // 上方附加块（如标题、计数说明）；缺省不渲染 suffix?: string | HTMLElement; // 下方附加块（如字数提示）；缺省不渲染 + maxCount?: number; // 字数上限；传了即设原生 maxlength 并在下方显示实时计数 } /*** 数字输入入参 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 50f874a..b141c74 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -16,7 +16,7 @@ "button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用", "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号，onInput 输入回调；prefix/suffix 可选渲染为输入框内侧附加块，clearable 开启后有值即显一键清空按钮", "inputNumber(props)：数字输入，−/+ 按钮与键盘 ↑↓ 调节，min/max/step 夹取；prefix/suffix 可选渲染为整组前后附加块", - "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块", + "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号，rows 控行数；prefix/suffix 可选渲染为上下附加块，maxCount 显示实时字数并设原生上限", "slider(props)：滑块，value 信号双向绑定，min/max/step 可配，原生 range 承载键盘交互，右侧可显示当前值", "checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用", "switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用", diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 218924c..f937eaa 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -696,6 +696,17 @@ font-size: var(--ua-font-size-md); resize: vertical; } +.ua-textarea-count-group { + display: flex; /* 字数统计 + 原有 suffix 并排靠右 */ + justify-content: flex-end; + align-items: center; + gap: 4px; +} +.ua-textarea-count { + color: var(--ua-color-text-muted); + font-size: var(--ua-font-size-sm); + font-variant-numeric: tabular-nums; /* 数字等宽，跳动不抖 */ +} /* —— 数字输入 —— */ .ua-input-number {