ui(frontend): 适配移动端布局与笔记预览换行

[techotaku39]

改动概述

适配 BiliNote Web 前端移动端布局，并修复笔记预览在手机/窄面板下长文本不换行、内容被遮挡的问题。

为什么

当前首页与设置页主要按桌面三栏布局设计，在手机端操作不便；同时 Markdown 笔记预览中的长链接、长英文、代码块、视频横幅标题等会撑开预览容器，导致手机端或 PC 拖窄预览面板时内容被遮挡，无法按可用宽度自适应。

做了什么

• 新增 useIsMobile，首页移动端切换为顶部 Header + 底部 生成 / 历史 / 笔记 Tab。
• 调整首页、设置页、模型/下载/转写/监控/关于页面的窄屏布局与滚动容器。
• 为 Markdown 预览新增 markdown-responsive.css，覆盖 github-markdown-css 中不利于窄屏显示的默认样式：
  • 长段落、标题、链接、列表、表格单元格按容器宽度断行；
  • 行内代码和代码块支持换行；
  • 图片/视频/SVG 不超过容器宽度。
• 调整 VideoBanner，标题和元信息在窄屏/窄面板下可换行。
• AI 问答、原文参照在移动端使用全屏浮层并提供关闭入口；AI 问答索引中 / 索引失败状态也保留关闭入口。
• ScrollArea viewport 增加 min-w-0/max-w-full，避免子内容撑宽父容器。

测试方式

• npm run build（BillNote_frontend，Vite production build）通过。
• npx -y pnpm@9.15.0 install --frozen-lockfile && npx -y pnpm@9.15.0 build（BillNote_frontend）通过。
  • 说明：GitHub workflow 中前端构建固定使用 pnpm 9.15.0；本机全局 pnpm 11.2.2 会因依赖构建审批策略触发 ERR_PNPM_IGNORED_BUILDS。
• typecheck 状态已确认：BillNote_frontend 当前没有 typecheck script；直接执行 tsc --noEmit 在 develop 基线已有类型错误，本 PR 未引入新的生产构建失败。
• 后端验证：不适用，本 PR 不涉及 backend 代码，无需 python -m py_compile。
• 手动验证步骤：
  • 本地启动前端 http://localhost:3015，后端使用本机已有 8483 服务。
  • PC 端拖动左侧工作区和历史记录面板宽度，右侧视频横幅和 Markdown 内容随预览区宽度重新换行。
  • 手机访问局域网前端地址，验证底部 Tab、笔记预览、关于页面长文本/命令不再横向撑开。
  • 移动端打开 AI 问答浮层，验证索引中 / 索引失败 / 正常问答状态均有关闭入口。

回归风险

• 影响范围集中在 BillNote_frontend 的布局与样式，后端/API/配置无变更。
• Markdown 响应式 CSS 使用专用 .bilinote-markdown-body 作用域，降低对其他页面的影响。
• 代码块现在默认换行而非横向滚动，窄屏可读性提升；如用户偏好保留原始代码横向滚动，可能需要后续提供开关或样式微调。

Checklist

• 分支命名遵循 CONTRIBUTING.md §3（feature/* / fix/* / release/* / hotfix/*）
• base 分支正确（常规改动 → develop；线上紧急 → master；发版 → 见 §4.3）
• Commit message 遵循 type(scope): subject 格式（CONTRIBUTING.md §5.1）
• 已自测核心流程
• 已更新相关文档（README.md / CHANGELOG.md / CLAUDE.md / 模块 README，如适用）
  • 不适用：本 PR 为 UI 响应式适配，无用户文档/API 变更。
• 未夹带 secrets / .env / 大型二进制
• 单 PR 不跨多个工作区做无关改动