diff --git a/docs/ui-refactor-proposal.md b/docs/ui-refactor-proposal.md new file mode 100644 index 0000000..60f0e30 --- /dev/null +++ b/docs/ui-refactor-proposal.md @@ -0,0 +1,218 @@ +# UI 主题与风格重构方案 + +作为资深 Web UI 设计师和前端工程师，针对我们 SaaS 控制台当前的 Next.js + Tailwind CSS 架构，结合 WCAG 可访问性标准和跨端响应式需求，特制定此 UI 重构方案。方案旨在提升整体视觉一致性、深色模式的可访问性，并优化桌面与移动端的用户体验（特别是 iOS/Android 浏览器的触控和渲染差异）。 + +--- + +## 1. 审查现有界面 + +在审查当前的界面代码（如 `tailwind.config.js`, `src/app/globals.css`, `src/components/theme/` 及 `Navbar.tsx`）后，我发现了以下改进点： + +* **色彩硬编码与对比度**：在部分文件（如 `designTokens.ts` 和 `Navbar.tsx` 的内联类名）中仍然存在类似 `#3467e9`, `bg-[#f6f7f9]` 的硬编码颜色，这破坏了主题切换的完整性。同时，深色模式下的次级文本（如 `text-muted` `#cbd5f5`）在深色背景（`#0f172a`）上的对比度可能无法满足 WCAG AA 级 4.5:1 的标准。 +* **语义化不足**：`Navbar.tsx` 中的菜单项过度使用了 `
` 和普通的 `` 标签，缺少 `