ymb-site/docs/plans/2026-11-12-premium-ui-interaction-polish.md

YMB 官网高级 UI 与交互优化计划

目标

• 在不改变现有深色品牌基调、真实接口和信息架构的前提下，提升官网的视觉质感与交互连贯性。
• 桌面端重点优化导航层级、内容卡片反馈、搜索与语言切换；移动端重点优化触控尺寸、抽屉与沉浸式内容浏览。
• 保证加载、空态、错误态与播放状态都有明确反馈，并尊重系统减少动画设置。

实施步骤

1. 审计首页、Shorts、观看页、搜索页在桌面与移动视口下的布局和控制台状态。
2. 修复影响内容展示、可访问性和交互流畅度的问题。
3. 统一视觉 token、悬停/按压/焦点反馈、卡片动效、骨架加载与移动端安全区适配。
4. 验证真实接口、图片、Shorts 播放和页面跳转不回退。
5. 运行构建与差异检查，回填验证结果。

范围

• src/components/**
• src/layouts/**
• src/pages/**
• src/styles/**
• src/app/**
• 必要的测试与本计划文件

风险与约束

• 不修改 FruitServer 接口契约，不把匿名浏览改成登录后可见。
• 不改变用户已确认的深色背景与品牌主色，只调整层次、间距、透明度和反馈。
• 不引入重量级 UI 框架，优先复用现有组件与 CSS token。
• 当前分支为 dev，只提交本轮站点文件，不夹带其他仓库改动。

验证

• pnpm build
• git diff --check
• 桌面端 1440px：首页、Shorts、观看页、搜索与语言菜单
• 移动端 390×844：侧栏抽屉、Shorts 滑动、观看页与安全区
• 浏览器控制台无新增 error

实施回执

• 已完成：保留深色 YMB 品牌、真实接口和无底部导航约束，未修改 FruitServer 契约。
• 样式：移除全局 font-weight: 400 !important，恢复标题/按钮/元信息层级；增加页面最小宽度与横向溢出保护；移动端双列网格和 Shorts 横向列表增加宽度约束。
• 交互：补充键盘 :focus-visible 焦点环、搜索聚焦反馈、触屏按压反馈；创建菜单/语言菜单增加轻量入场动画；侧栏与内容区收起/展开增加平滑过渡；尊重 prefers-reduced-motion。
• 真实链路复核：前端 http://127.0.0.1:4179/、后端 /app/categories、/app/home/feed、/app/dramas/1、/app/episodes/1/play 均可达；播放地址响应 application/vnd.apple.mpegurl，图片 hero.jpg 响应 image/jpeg。
• 门禁：pnpm lint 通过；pnpm build 通过（仅保留既有 chunk size warning）；git diff --check 通过。
• 当前状态：本轮文件已提交并推送到 origin/dev（提交 0ab0b04）；未改后端、未引入底部导航，已发送完成通知。