``` **涉及位置：** - `BaseLayout.astro` L44 — `z-[9999]` 进度条 - `index.astro` — 浮动卡片使用 `z-50`（与进度条冲突） - `philosophy.astro` — 多处 `z-10`, `z-20`，与固定 header(`z-50`) 交错 **修复建议：** 建立全局 z-index 等级体系（`z-10` 内容 → `z-20` 浮动装饰 → `z-30` Header/Nav → `z-40` 遮罩 → `z-50` Toast/Progress），统一使用 Tailwind token 管理。 --- ### 1.2 未检查 prefers-reduced-motion **问题描述：** 所有 6 个 CSS 动画（`float-slow`/`float-medium`/`float-fast`/`breathe`/`fadeInUp`/`blurIn`）和 2 个弹幕动画均未检查用户系统偏好。页面首页包含 **6 个持续动画元素**（1 个 breathe 光环 + 4 个浮动卡片 + 1 个轨道旋转），远超过 Stack 指南中 "Don't: Multiple bounce animations on page" 的建议。 **涉及文件：** - `global.css` — 8 个 @keyframes 动画定义 - `index.astro` — 5+ 个 animate-float-* + animate-breathe 元素 - `philosophy.astro` — `animate-spin` 轨道 + `animate-float-slow` 箭头 **修复建议：** ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } ``` --- ### 1.3 Light Mode 文字对比度不足 **问题描述：** 多处文字使用 `text-slate-500`（#64748B）在白色背景上对比度仅约 3.8:1，低于 WCAG AA 最低 4.5:1 要求。ux-guidelines 明确："**Don't: Gray text on gray background**"。 | 位置 | 当前颜色 | 对比度 | 标准 | |------|---------|--------|------| | `text-slate-500` 多处副标题 | #64748B | ~3.8:1 | ≥4.5:1 | | `text-slate-400` 标签/小字 | #94A3B8 | ~2.6:1 | ≥4.5:1 | | `text-slate-300` 箭头/循环标签 | #CBD5E1 | ~1.8:1 | ≥4.5:1 | | Footer `color: #94a3b8` ICP 备案号 | #94A3B8 | ~2.6:1 | ≥4.5:1 | **涉及文件：** `index.astro`、`product.astro`、`philosophy.astro`、`Footer.astro`、`waitlist.astro` **修复建议：** 将正文灰色文字最低提升至 `text-slate-600`（#475569，~4.6:1），装饰性文字使用 `text-slate-500`（≥4.5:1 需验证）。ICP 备案号使用 `text-slate-500` 替代 `#94a3b8`。 --- ### 1.4 Focus 状态缺失 **问题描述：** 多个可交互元素缺乏键盘焦点指示。WaitlistForm 中 `input:focus` 的 `outline: none` 虽有 box-shadow 替代，但页面上链接和按钮的 focus 状态不统一。 **涉及位置：** - `Header.astro` — 导航链接无 `:focus-visible` 样式 - `index.astro` — Portal 卡片 (`` 标签) 无 focus 样式 - `product.astro` — Pain point 卡片 (`

` + 无 `tabindex`) 键盘不可达 - `philosophy.astro` — 大量 `

` 卡片无键盘交互 **修复建议：** 为所有可交互元素添加 `focus-visible:ring-2 focus-visible:ring-tech-blue focus-visible:ring-offset-2`，确保 Tab 键可导航所有交互元素。 --- ## 二、高优先级问题 (HIGH) ### 2.1 表单提交按钮无 Loading 状态 **问题描述：** waitlist 表单的提交按钮点击后无 loading 过渡，直接隐藏表单显示成功。ux-guidelines 要求 "Show loading then success/error state"。 ```javascript // waitlist.astro / WaitlistForm.astro — 当前 form?.addEventListener('submit', (e) => { e.preventDefault(); form.hidden = true; successMessage.hidden = false; }); // 问题：无 loading 态、无网络请求失败处理、无防重复提交 ``` **修复建议：** 提交后按钮变为 loading spinner → API 调用 → 成功/失败状态。同时禁用按钮防止重复提交。 --- ### 2.2 滚动进度条无节流 **问题描述：** `BaseLayout.astro` 中 `scroll` 事件监听器未做节流处理，每次滚动触发 DOM 更新。 ```javascript // BaseLayout.astro L55 — 当前 window.addEventListener('scroll', updateProgress, { passive: true }); ``` **修复建议：** 使用 `requestAnimationFrame` 包裹或添加 `throttle(16ms)`。 --- ### 2.3 Footer 使用 inline onmouseover/onmouseout **问题描述：** `Footer.astro` 中超链接使用了内联 JS 事件而非 CSS `:hover` 伪类，违反关注点分离原则。 ```html 隐私政策 ``` **修复建议：** 使用 Tailwind `hover:text-tech-blue transition-colors` 类替代 inline JS。 --- ### 2.4 图片无显式宽高 **问题描述：** `product.astro` 使用 Unsplash 图片未指定 `width`/`height` 属性，导致加载时 Cumulative Layout Shift。 ```html 知习产品界面展示

``` **修复建议：** 添加 `width="1200" height="800"` 或使用 Astro Image 组件优化。 --- ## 三、中优先级问题 (MEDIUM) ### 3.1 表单样式重复定义 **问题描述：** waitlist 表单样式同时存在于两处： - `WaitlistForm.astro` — 使用 scoped `