temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g19): textarea 字数统计

Browse Source
This commit is contained in:
HIsheR
2026-10-26 11:06:34 +08:00
parent bf05e991ba
commit 34abe3f1e8
9 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/backlog.json
+8
View File
@@ -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": "自补：既有组件可用性细节"
}
]
}
.ua/index.json
+2 -2
View File
@@ -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 支持布尔或信号禁用",
apps/demo/main.ts
+2 -2
View File
@@ -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',
llms-full.txt
+2 -2
View File
@@ -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 支持布尔或信号禁用
llms.txt
+1 -1
View File
@@ -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 支持布尔或信号禁用
packages/skin/ui/src/textarea.ts
+11 -2
View File
@@ -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);
}
packages/skin/ui/src/types.ts
+1
View File
@@ -177,6 +177,7 @@ export interface TextareaProps {
onInput?: (value: string) => void; // 输入回调
prefix?: string | HTMLElement; // 上方附加块（如标题、计数说明）；缺省不渲染
suffix?: string | HTMLElement; // 下方附加块（如字数提示）；缺省不渲染
maxCount?: number; // 字数上限；传了即设原生 maxlength 并在下方显示实时计数
}
/*** 数字输入入参 ***/
packages/skin/ui/ua.manifest.json
+1 -1
View File
@@ -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 支持布尔或信号禁用",
packages/skin/ui/ui.css
+11
View File
@@ -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 {