PC 图片文档 - 体验优化 Demo

根据 Figma 设计 PC 3 | 体验优化 - 图片基建 实现的 PDF/图片文档查看器界面。

技术栈

• React 18 + Vite
• CSS 变量（与 Figma 设计 token 对齐：--pc-background、--brand-primary 等）
• 无 Tailwind，便于与现有设计体系对接

运行

npm install
npm run dev

在浏览器打开终端显示的本地地址（如 http://localhost:5173）。

实现范围

• 顶部应用栏：首页 / 个人信用报告 / 当前文档 Tab（含关闭）
• 文档头部：CS 品牌 + 面包屑 + 标签（工作、+5）+ 操作 Tab（阅读、图片处理、批注、页面、格式转换）+ 打印/下载/分享/保存
• 工具栏：选择、手型、连续视图/单页/双页/演示模式、搜索
• 左侧边栏：第 1 页 / 第 2 页缩略图、「将文档拖到这里 或点击上传」上传区
• 主内容区：PDF 预览区 + 示例文案与表格（与设计稿一致）
• 底部栏：页码（1/9）、上一页/下一页、视图切换、缩放（100%）、全屏

图标与缩略图使用 Figma MCP 返回的资源 URL；若在浏览器中无法加载，可将资源下载到 public/ 并替换 src/App.jsx 中的 assets 路径。

设计规范

详见 docs/PC设计交互规范.md。