refactor(ymb): polish responsive youtube interactions

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

@@ -0,0 +1,48 @@
+# 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` 通过。
+- 当前状态：待提交本轮 `src/shared/styles/youtube-overrides.css` 与本计划文件；未改后端、未引入底部导航、未发送完成通知。