ui(frontend): 新增 Logo 首页入口并优化窄屏表单

[techotaku39]

改动概述

新增 Web 端顶部 Logo / 标题的首页入口，并补齐浏览器插件中“打开笔记”的快捷入口；同时优化窄屏下左侧表单滚动、按钮宽度和视频理解配置项换行挤压的问题。

把用户实际会点击的 Logo / 标题区域 做成一致、明确的导航入口：在笔记页和设置页都保持同样的 Logo 尺寸、间距和返回首页行为，避免不同页面顶部入口表现不一致。

为什么

实际使用时有几个体验问题比较明显：

1. Web 端 Logo / 标题缺少稳定的首页入口
   笔记页和设置页顶部 Logo / 标题的尺寸、位置和可点击行为不一致，部分页面缺少点击 Logo 返回首页的入口。用户通常会自然地把左上角 Logo 当成“回首页”的入口，如果有的页面能点、有的页面不能点，或者样式不一致，就会造成困惑。

2. 插件里缺少直接打开当前笔记页的入口
   在浏览器插件的 Popup / Sidepanel 里查看任务时，如果想跳到完整笔记预览页，需要有一个更直接、更稳定的入口，而不是让用户自己找链接或重新进入 Web 页面。

3. 窄屏表单布局有细节问题
   在较窄宽度下，左侧表单会出现双滚动条；编辑状态下“重新生成 / 新建笔记”按钮宽度不一致；视频理解里的“采样间隔”和“拼图尺寸”标签容易换行并挤压输入框。这些都会让移动端或窄窗口下的操作显得不稳定。

做了什么

• Web 端 Logo 入口

  • 新增 BrandLogo 组件，统一封装 Logo / 标题展示和点击返回首页行为。
  • HomeLayout 和 SettingLayout 复用同一个 Logo 入口，保证尺寸、间距、位置和交互一致。

• 浏览器插件打开笔记入口

  • 新增 open-note-page 工具，统一生成并打开当前笔记预览页。
  • Sidepanel 顶部新增“打开笔记”，可打开当前任务对应的笔记预览，并保留当前任务与视图参数。
  • Popup 顶部新增“打开笔记”，优先打开当前任务，缺失时回退到最近任务。

• 窄屏表单布局优化

  • 调整 ScrollArea，避免 Radix ScrollArea 和浏览器原生滚动条叠加形成双滚动条。
  • 编辑已有笔记时，“重新生成 / 新建笔记”按钮等宽显示。
  • 视频理解配置中，“采样间隔”和“拼图尺寸（列×行）”保持同一行；长标签截断不换行，避免挤压输入框。

测试方式

• pnpm build（Web 前端）通过
• pnpm typecheck && pnpm build（浏览器插件）通过
• 后端验证不适用：本 PR 不涉及 backend 代码
• 手动验证步骤：
  • 打开 Web 笔记页与设置页，确认 Logo / 标题尺寸、位置一致，点击后返回首页。
  • 在窄屏或左侧较窄布局下确认左侧表单不再出现双滚动条。
  • 编辑已有笔记时确认“重新生成 / 新建笔记”等宽显示。
  • 开启视频理解后确认“采样间隔”和“拼图尺寸（列×行）”保持同一行，标签不换行且输入框可完整操作。
  • 构建并加载浏览器插件，确认 Popup / Sidepanel 顶部“打开笔记”可打开当前插件预览页。

回归风险

影响范围集中在 Web 前端布局和浏览器插件 Popup / Sidepanel 顶部入口：

• Web 端：HomeLayout、SettingLayout、Logo / 标题入口、左侧表单滚动区域和视频理解表单布局。
• 插件端：Popup / Sidepanel 顶部“打开笔记”入口，以及新标签页打开当前笔记预览页时携带的 query 参数。

不涉及后端接口、数据库迁移或配置变更。主要风险是不同浏览器对扩展页 URL 的打开行为可能存在细微差异，需要在插件环境中重点确认“打开笔记”入口。

Checklist

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