更新主页视觉UI，重构登陆页面UI

[zerosnowe]

1.更新主页视觉UI，重构登陆页面UI
2.更新Git排除文件，排除了opencode.json

[WUHINS]

下面是我根据你给出的 PR #34（HiPM-Tech/HiDNS）的变更文件（主要是前端：Landing 页面重构、登录页重构、LoginCard 新增、样式与 i18n 更新等）做的逐项审查与建议。按照 root.ai.ma 常见审查要点（功能/安全/无障碍/国际化/性能/可维护性）来组织，包含优先级与可操作修复建议。

快速结论

• 本次 PR 大量重构前端 UI（Landing、Login），视觉与交互进行了现代化改Card）
• 新增（added）
  • client/public/logto.png
  • client/src/pages/LoginCard.tsx（完整的新登录组件，含 Username/Password/2FA 步骤与 Reset）
  • client/src/utils/loginSvgPaths.ts（SVG 路径常量）

2. 高优先级问题（需在合并前修复或讨论）
   A. 安全：密码加密失败回退到明文发送（严重）

• 位置：LoginCard.tsx / Login.tsx 的 encryptPassword 调用处（多处）。
• 问题：实现里若 encryptPassword 失败会回退到 plain-text（注释/代码均显示 fallback）。在网络/中间件配置不当或 TLS 被篡改时，这会导致发送明文密码到后端。
• 建议：
  • 不要在生产环境下沉默回退到明文。要么：
    • 如果加密失败则阻止登录请求并向用户弹出明确错误（并记录 telemetry / 错误），或者
    • 明确只在 dev 环境允许 fallback（非常小心）。
  • 更好做法：确保前端到后端使用 HTTPS + 后端也支持公钥加密时的兼容方式；若后端要求 RSA 加密则无法回退。
• 参考修复（示例思路）：
  • 当 encryptPassword 抛错：setError('Encryption failed, please try again'); 不发送明文。

B. WebAuthn（passkey）流程对 username 的依赖与错误处理

• 位置：LoginCard.tsx，handlePasskeyLogin 使用 username 去请求 webauthnLoginOptions。
• 问题：
  • 如果 username 为空，后端可能返回错误或产生无效请求。组件没有在 username 为空时隐藏/禁用 passkey 按钮。
  • 错误消息未经统一包装（直接 setError(e.message)），可能泄露敏感信息。
• 建议：
  • 禁用/隐藏 passkey 登录按钮直到填写 username（或明确提示需要）。
  • 对错误进行用户友好化处理且记录原始详情到开发日志。

C. 焦点与键盘可用性（可访问性、UX）

• 位置：LoginCard 的步骤切换（username → password → 2FA）没有自动聚焦到新表单输入。
• 问题：使用键盘或屏幕阅读器的用户在步骤切换时会失去焦点，影响可用性。
• 建议：
  • 在步骤切换完成后把焦点 programmatically 设到对应的 input（useRef + useEffect 监听 viewStep）。
  • 为关键按钮/控件添加 aria-label、role（例如 SSO 按钮、返回按钮应有 aria-label）。
• 参考修复（伪代码）：
  • const usernameRef = useRef(null); 在 UsernamePanel 渲染 input 时 ref={usernameRef}；在 viewStep === 'username' 时 usernameRef.current?.focus()。

D. 登录相关：错误信息与用户提示

• 位置：LoginCard 中对 error 的展示（lc-error）是全局字符串。
• 建议：
  • 统一错误文案（i18n）并避免暴露原始后端堆栈或 internal message。
  • 对失败次数/锁定策略需与后端协调（防暴力破解提示）。

3. 中优先级问题（建议修复）
   A. 动画/状态切换的可聚焦性与辅助功能

• 动画使用 transform/translate 隐藏面板并且切换 pointerEvents，这对屏读器可能不友好（屏读器仍可能读取不可见面板）。
• 建议：除了视觉动画外，也在 DOM 上加 aria-hidden 或移除不可见面板以避免屏读器读取隐藏内容。

B. IntersectionObserver / window listener 清理与依赖

• Landing.tsx 中 useScrollReveal 有正确的 disconnect 清理。ScrollRevealText 的 useEffect 添加了 window.scroll listener 并正确移除，整体看是 OK。
• 但注意：ScrollRevealText 的 handleScroll 使用 containerRef.current；建议在 effect 开头使用 guard（if (!container) return）并将 containerRef 作为依赖或在订阅時保留引用，当前实现已处理但注意边界。

C. i18n 字段一致性

• PR 增加了 en.json/zh-CN.json 中一些新 key（brandLine1/2/3 等）。Landing.tsx、LoginCard.tsx 使用了部分 t('landing.hero.subtitle') / t('landing.hero.description') / t('login.*') 等。
• 建议：
  • 在合并前运行一遍 i18n key 检查（确保组件使用的所有 key 在所有语言文件中都有 fallback），或为未提供的 key 提供 defaultValue。
  • 已新增的 keys 出现在 en/zh-CN，但请确认 t(...) 使用的所有 keys 都存在。

D. ProviderIcon 依赖

• Landing.tsx import { ProviderIcon } from '../components/ProviderIcon';
• PR 没有包含该组件（在本次 diff 中未找到）。如果 repo 中原本有该组件则 OK；若没有将引起编译错误。
• 建议：确认 ProviderIcon 已存在或随 PR 一并添加。

4. 低优先级 / 建议改进（代码质量、性能）
   A. 不要在 react 中直接使用 document.getElementById 除非必要

• Landing.tsx 的 scrollToCards 调用 document.getElementById('cards')。可改为 useRef 绑定 main 元素以避免查询 DOM。

B. CSS/命名

• Landing.css 进行了大幅改写并引入许多新类名，注意与现有组件样式冲突（全局样式命名）。建议：
  • 若可行，使用 CSS module / BEM 命名空间或前缀以减少全局污染。
  • 检查 .landing 等类在小屏幕下表现，PR 已做大量响应式规则，看起来覆盖面较全。

C. 资源大小与 svgPaths

• loginSvgPaths 所定义的大段字符串嵌入在 JS 中会增加打包体积；考虑将复杂 svg 以文件（.svg）形式管理并按需加载/作为组件使用。

D. Unit/e2e 测试

• 这次对登录流程与 Landing 大量改动，建议添加几个关键端到端测试（登录成功/失败、2FA 流、reset password 流、Landing 动作按钮导航）以防回归。

5. 可操作修复清单（优先级排序）
   阻塞/高优先级（必须修改或明确接受风险）

1. 不要 silent fallback 到 plaintext password：
   • 修改 encryptPassword 的 catch 分支，禁止发送明文。提示用户并要求重试或上报。
2. 禁用 passkey 按钮直到 username 有值，或在点击时提示“请输入用户名”。
3. 为步骤切换添加自动聚焦（username、password、2FA 输入）以提高可访问性。
4. 确认 ProviderIcon 组件存在（或把它加入 repo）。

重要但非阻塞（建议修改）
5. 为关键按钮和输入添加 aria-label/role，确保屏读器友好。
6. 在不可见面板上设置 aria-hidden=true 或从 DOM 中移除不可见内容以改善屏读器体验。
7. 统一错误提示 i18n（不要直接展示后端 message）。
8. 检查 i18n key 完整性（运行脚本或手动确认）。

可选改进
9. 将 document.getElementById 改为 useRef 绑定。
10. 考虑把大型 svgPaths 拆为独立 svg 文件以便按需加载。
11. 增加自动化测试覆盖登录与 landing 的关键路径。

6. 代码片段参考（示例修复）
   A. 禁止回退到明文（示例）

• 当前（伪）：
  try { passwordToSend = await encryptPassword(password); } catch { passwordToSend = password; }
• 建议：
  try {
  passwordToSend = await encryptPassword(password);
  } catch (err) {
  setError(t('login.encryptionFailed', { defaultValue: '密码加密失败，请重试或联系管理员' }));
  setLoading(false);
  return;
  }

B. 自动聚焦示例（简化）

• 在 UsernamePanel:
  const inputRef = useRef<HTMLInputElement | null>(null);
  useEffect(() => { if (viewStep === 'username') inputRef.current?.focus(); }, [viewStep]);
  <input ref={inputRef} ... />

C. 禁用 passkey 直到 username

• Passkey

7. 测试/验证清单（合并前）

• 本地运行应用，验证：
  • 登录页：用户名→密码→2FA 流顺利切换，焦点逻辑良好。
  • WebAuthn 情景：当 username 存在时可触发，错误友好提示。
  • 密码加密失败时代码不发送明文（模拟 encryptPassword 抛错）。
  • Landing 页面在多分辨率下样式正常（desktop/tablet/mobile）。
  • i18n keys 在中/英语言下没有 missing key 错误。

8. 其他注意点

• .gitignore 新增 opencode.json 意图不清（可确认是否必要）。
• 新增 login 视觉设计与动画较多，若你们有设计系统（tokens），建议对照统一色彩/间距 token。
• 提示：LoginCard 功能较多，拆分得很好（Username/Password/2FA），但文件较大（~568 行），可后续拆成更小组件便于测试与维护。

最后建议（行动项）

• 我建议先修复“明文回退”与“passkey 控制/错误处理”与“焦点可用性”这三项高优先级问题，然后补充一些无障碍标签与 i18n 完整性检查。修复后再运行一轮功能/视觉回归测试，确认无回归后合并。

[WUHINS]

密码登陆要求允许回退（AI写的不对，我们要兼容http，但无法加密传输密码时登录前需弹窗提示）

[WUHINS]

@codex 根据root.ai.md分析PR

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[WUHINS]

请在 PR 或 repo 文档中写明加密/回退策略；并把 confirm 行为替换为统一的 modal（可本地化）而不是 window.confirm。