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);
 }