iter(g205): textField 支持密码显隐切换

packages/skin/ui/src/textField.ts

@@ -2,7 +2,7 @@ import { effect, h } from '@ui-arch/frame';
 import { addonWrap } from './addons.js';
 import type { TextFieldProps } from './types.js';
 
-/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包附加组，clearable 一键清空，maxCount 显示字数统计 ***/
+/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包附加组，clearable 一键清空，password 密码显隐切换，maxCount 显示字数统计 ***/
 export function textField(props: TextFieldProps): HTMLElement {
   const el = h('input', { class: `ua-input${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`, placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性，Signal 走响应式
   if (props.value) {
@@ -38,8 +38,28 @@ export function textField(props: TextFieldProps): HTMLElement {
     el.addEventListener('input', syncCount);                          // 用户输入时同步
     effect(() => { if (props.value) props.value(); syncCount(); });   // 初始与外部写回时同步（读信号建依赖）
   }
-  const suffix = clearBtn || counter
-    ? h('span', { class: 'ua-input-clear-group' }, clearBtn, counter, props.suffix ?? null) // 清空按钮 / 计数并入后置附加组
+  let eyeBtn: HTMLElement | null = null; // 密码显隐按钮；password 未开不创建
+  if (props.password) {
+    el.type = 'password'; // 原生打点渲染，避免自绘遮罩的安全坑
+    let shown = false;    // 当前是否明文
+    eyeBtn = h(
+      'button',
+      {
+        type: 'button',
+        class: 'ua-input-clear', // 复用清空按钮样式：同尺寸同位置，零新增 CSS
+        'aria-label': '显示密码',
+        onClick: () => {
+          shown = !shown;
+          el.type = shown ? 'text' : 'password';
+          eyeBtn!.textContent = shown ? '隐藏' : '显示'; // 文案即状态：按钮永远写「下一步动作」
+          eyeBtn!.setAttribute('aria-label', shown ? '隐藏密码' : '显示密码');
+        },
+      },
+      '显示',
+    );
+  }
+  const suffix = clearBtn || counter || eyeBtn
+    ? h('span', { class: 'ua-input-clear-group' }, clearBtn, eyeBtn, counter, props.suffix ?? null) // 清空 / 显隐 / 计数并入后置附加组
     : props.suffix;
   return addonWrap(el, props.prefix, suffix);
 }

packages/skin/ui/src/types.ts

@@ -39,6 +39,7 @@ export interface TextFieldProps {
   prefix?: string | HTMLElement;     // 输入框内侧前置附加块（如图标、货币符）；缺省不渲染
   suffix?: string | HTMLElement;     // 输入框内侧后置附加块（如单位）；缺省不渲染
   clearable?: boolean;               // 开启后有值时显示一键清空按钮；缺省不渲染
+  password?: boolean;                // 密码框：原生打点渲染并内置「显示/隐藏」切换按钮；缺省普通文本
   maxCount?: number;                 // 字数上限；传了即设原生 maxlength 并在输入框内侧显示实时计数
 }