为指定源码添加中文注释（覆盖函数、变量、解构、Hooks、JSX 组件），并在文件底部生成代码结构图和 ASCII UI 布局图。
当用户要求"给某个文件加注释"，且要求注释对象包含：
{/* ... */}；TS/JS 使用 //。对关键逻辑（核心流程、关键函数、重要组件）的注释以 【N】 开头标注顺序，同层级同编号，辅助代码不编号。
// 说明职责。//useXxx() 调用上方加 // 说明该 hook 的作用（如 // 获取路由信息、// 管理弹窗显隐状态）。{/* ... */}，需包含：
注释完成后，在文件底部以 /* ... */ 注释块生成当前文件的树状结构图。
移动端汉堡菜单图标、页面标题区域）。（条件：xxx） 标注。/*
* 代码结构图：
*
* Header
* ├── TopBanners — 顶部活动横幅
* ├── <header>
* │ ├── 左侧
* │ │ ├── Logo — 网站 Logo，点击回首页
* │ │ └── 移动端汉堡菜单图标
* │ └── 右侧
* │ ├── HeaderMenu — 顶部导航菜单
* │ ├── CreditsInfo — 积分余额展示
* │ └── LoginUserInfo — 登录用户头像/下拉菜单（条件：已登录）
* └── FaroObservability — 前端可观测性上报
*/
当目标文件包含 JSX 代码块时，在"代码结构图"之后再追加一个 /* ... */ 注释块，绘制 ASCII UI 布局图。
文件内包含 JSX 代码块（return ( 内含 JSX 标签，或导出 JSX 表达式）即生效。
纯 hooks、工具函数、类型文件、常量文件跳过。
/*
* ASCII UI 布局图：
*
* ┌─────────────────────────── Header ───────────────────────────┐
* │ ┌─────────────────── TopBanners ──────────────────────────┐ │
* │ │ 顶部活动横幅 (可关闭) │ │
* │ └────────────────────────────────────────────────────────┘ │
* │ ┌──────────────────── <header> ───────────────────────────┐ │
* │ │ ┌──── 左侧 ─────┐ ┌──────── 右侧 ──────────┐ │ │
* │ │ │ Logo │ ☰ 菜单 │ │ Menu │ Credits │ Avatar │ │ │
* │ │ └────────────────┘ └─────────────────────────┘ │ │
* │ └────────────────────────────────────────────────────────┘ │
* └─────────────────────────────────────────────────────────────┘
*/