feat(frontend): 优化笔记详情布局与视频元数据

[techotaku39]

改动概述

优化 Web 端笔记详情页的信息架构与空间利用率：将生成历史、笔记顶部工具栏、视频封面卡片和视频元数据重新整理，让用户在点击历史笔记后能更快确认「这条笔记对应哪个视频、数据如何、来自哪个平台」，同时减少重复标题和占位文案带来的干扰。

为什么

在实际使用中，原来的 Web 端笔记页有几类体验问题：

• 左侧「视频理解」提示换行后占用较多空间，表单整体显得拥挤。
• 中间生成历史区域和右侧笔记标题附近存在重复的「生成历史」视觉信息，降低了内容识别效率。
• 笔记顶部按钮在 Markdown / 思维导图状态下位置不一致，复制、导出等操作与阅读操作混在一起，创建时间也容易被挤压换行。
• 「原视频」单独占一个按钮，但用户更自然的行为是点击视频封面跳转原视频。
• 仅展示笔记内容不足以回忆上下文，希望补充平台、封面、播放量、评论数、时长、标签、简介、作者、粉丝量、发布时间等信息，并在切换历史笔记时刷新。

做了什么

• 调整 Web 端三栏布局：
  • 去掉中间区域重复标题，生成历史保留必要搜索和列表信息。
  • 将「需使用多模态模型」提示压缩为单行展示，减少左侧表单占用。
  • 补充 Markdown 响应式样式，提升窄宽度下的阅读稳定性。
• 重构笔记顶部工具栏：
  • 创建时间左对齐，思维导图 / 原文参照 / AI 问答等阅读入口右对齐。
  • 「导出Markdown」改为「导出Md」，思维导图态统一改为「返回笔记」。
  • 将复制、导出 Md 放到末尾，减少主要阅读入口被打断。
• 重做视频信息卡片：
  • 放大封面并使用类似视频站首页卡片的信息层级。
  • 封面左下角展示播放量 / 评论数，右下角展示视频时长。
  • 点击封面跳转原视频，避免额外「原视频」按钮占位；标题等文本不触发跳转。
  • 顶部展示平台标识，并按平台风格适配 Bilibili / YouTube / 抖音 / 快手等来源。
• 补充并持久化视频元数据：
  • 下载 / 生成笔记时尽量保存标题、封面、作者、粉丝量、发布时间、播放量、评论数、时长、标签、简介等字段。
  • 点击历史笔记时从后端读取并刷新这些信息，缺失时按平台做兼容回退。
  • 新增 note storage / video metadata 服务，避免前端靠猜测拼数据。

测试方式

• CI=true pnpm build（BillNote_frontend/）通过
• python -m py_compile backend/app/downloaders/bilibili_downloader.py backend/app/downloaders/douyin_downloader.py backend/app/downloaders/kuaishou_downloader.py backend/app/downloaders/youtube_downloader.py backend/app/routers/note.py backend/app/services/note_storage.py backend/app/services/video_metadata.py 通过
  • 备注：douyin_downloader.py 存在既有 SyntaxWarning: invalid escape sequence '\('，不影响本次 py_compile 结果。
• 手动验证步骤：
  • 使用 Bilibili 链接生成笔记，确认封面、播放量、评论数、时长、标签、简介、作者、粉丝量、发布时间展示正常。
  • 点击历史笔记切换，确认右侧视频信息随笔记刷新。
  • 切换 Markdown / 思维导图，确认顶部按钮位置稳定，「返回笔记」文案正确。
  • 点击封面可跳转原视频，点击标题 / 简介等文本不跳转。

回归风险

• 涉及前端笔记详情页、历史笔记列表和后端笔记元数据读取逻辑，需要前后端同步部署。
• 各平台可获取的公开字段不完全一致：缺失字段会隐藏或回退展示，后续如果平台页面结构 / 接口字段变化，可能需要继续维护解析逻辑。
• 老笔记可能没有完整元数据；本次逻辑会尽量兼容既有数据，不强制要求历史记录全部包含新增字段。

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，如适用）
• 未夹带 secrets / .env / 大型二进制
• 单 PR 不跨多个工作区做无关改动