From d7a0ec56f52c32830a7f40d55091060d13f3387a Mon Sep 17 00:00:00 2001
From: easyai <wangbo@51easyai.com>
Date: Fri, 24 Jul 2026 23:27:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=94=AF=E6=8C=81=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E5=AF=86=E7=A0=81=E6=98=BE=E7=A4=BA=E4=B8=8E=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原因：登录时缺少密码可见性切换，长密码输入难以核对。

影响：新增可复用 PasswordInput，在登录表单提供眼睛按钮，并补充禁用态、焦点样式和无障碍标签。

风险：密码仅在用户主动点击时于当前输入框显示，不改变提交、存储或日志行为。

验证：前端 112 项测试通过；pnpm lint 通过；@easyai-ai-gateway/web 生产构建通过。
---
 apps/web/src/components/AuthPanel.tsx     |  5 +--
 apps/web/src/components/ui/input.test.tsx | 14 +++++++
 apps/web/src/components/ui/input.tsx      | 50 +++++++++++++++++++++++
 apps/web/src/styles/ui.css                | 42 +++++++++++++++++++
 4 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/components/ui/input.test.tsx

diff --git a/apps/web/src/components/AuthPanel.tsx b/apps/web/src/components/AuthPanel.tsx
index 1440d99..34bc373 100644
--- a/apps/web/src/components/AuthPanel.tsx
+++ b/apps/web/src/components/AuthPanel.tsx
@@ -1,6 +1,6 @@
 import type { FormEvent } from 'react';
 import { LogIn, UserPlus } from 'lucide-react';
-import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Tabs } from './ui';
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, PasswordInput, Tabs } from './ui';
 import type { AuthMode, LoadState, LoginForm, RegisterForm } from '../types';
 
 const tabs = [
@@ -70,9 +70,8 @@ function LoginFormView(props: {
       </Label>
       <Label>
         密码
-        <Input
+        <PasswordInput
           autoComplete="current-password"
-          type="password"
           value={props.loginForm.password}
           onChange={(event) => props.onLoginChange({ ...props.loginForm, password: event.target.value })}
           placeholder="至少 8 位"
diff --git a/apps/web/src/components/ui/input.test.tsx b/apps/web/src/components/ui/input.test.tsx
new file mode 100644
index 0000000..ec66017
--- /dev/null
+++ b/apps/web/src/components/ui/input.test.tsx
@@ -0,0 +1,14 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { PasswordInput } from './input';
+
+describe('PasswordInput', () => {
+  it('默认隐藏密码并提供显示密码按钮', () => {
+    const html = renderToStaticMarkup(<PasswordInput autoComplete="current-password" />);
+
+    expect(html).toContain('type="password"');
+    expect(html).toContain('autoComplete="current-password"');
+    expect(html).toContain('aria-label="显示密码"');
+    expect(html).toContain('aria-pressed="false"');
+  });
+});
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 3ea6649..e3bbfaf 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { Eye, EyeOff } from 'lucide-react';
 import { cn } from '../../lib/utils';
 
 const inputVariants = cva('shInput', {
@@ -26,3 +27,52 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 
 Input.displayName = 'Input';
+
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
+  hidePasswordLabel?: string;
+  showPasswordLabel?: string;
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      className,
+      disabled,
+      hidePasswordLabel = '隐藏密码',
+      showPasswordLabel = '显示密码',
+      size,
+      ...props
+    },
+    ref,
+  ) => {
+    const [passwordVisible, setPasswordVisible] = React.useState(false);
+    const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
+    const VisibilityIcon = passwordVisible ? EyeOff : Eye;
+
+    return (
+      <div className="shPasswordInputRoot">
+        <Input
+          ref={ref}
+          className={cn('shPasswordInput', className)}
+          disabled={disabled}
+          size={size}
+          type={passwordVisible ? 'text' : 'password'}
+          {...props}
+        />
+        <button
+          type="button"
+          className="shPasswordInputToggle"
+          aria-label={toggleLabel}
+          aria-pressed={passwordVisible}
+          disabled={disabled}
+          title={toggleLabel}
+          onClick={() => setPasswordVisible((visible) => !visible)}
+        >
+          <VisibilityIcon aria-hidden="true" size={16} />
+        </button>
+      </div>
+    );
+  },
+);
+
+PasswordInput.displayName = 'PasswordInput';
diff --git a/apps/web/src/styles/ui.css b/apps/web/src/styles/ui.css
index 8862d59..85481b3 100644
--- a/apps/web/src/styles/ui.css
+++ b/apps/web/src/styles/ui.css
@@ -420,6 +420,48 @@
   padding: 0 11px;
 }
 
+.shPasswordInputRoot {
+  position: relative;
+  width: 100%;
+}
+
+.shPasswordInput {
+  padding-right: 42px;
+}
+
+.shPasswordInputToggle {
+  position: absolute;
+  top: 50%;
+  right: 3px;
+  display: grid;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  place-items: center;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: calc(var(--control-radius) - 2px);
+  background: transparent;
+  color: var(--text-soft);
+  cursor: pointer;
+  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.shPasswordInputToggle:hover {
+  background: var(--surface-muted);
+  color: var(--text-strong);
+}
+
+.shPasswordInputToggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--ring);
+}
+
+.shPasswordInputToggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .shSelect {
   appearance: none;
   padding-right: 30px;