Wisp · 校招投递档案

一个围绕“投递—流程—面试—复盘”设计的响应式前端原型。当前版本使用真实感模拟数据，重点验证产品信息架构、视觉系统和核心交互，不依赖第三方包，也不会向外部服务发送数据。

已实现

• 今日仪表盘：行动线路、求职温度、投递状态和近期复盘；
• 投递管理：列表/看板切换、状态筛选、即时搜索、投递详情；
• 新建投递：带必填校验的对话框，保存后立即进入列表；
• 面经与复盘：面试记录、薄弱标签和知识掌握图；
• 阶段复盘：去重投递漏斗、投递节奏和渠道表现；
• 设置页：个人与求职信息表单；
• 全局搜索、键盘快捷键 Ctrl/⌘ + K、焦点恢复和响应式导航。

本地运行

需要 Node.js 18 或更高版本。

Windows 用户可以直接双击项目根目录的 启动网站.cmd。脚本会等待健康检查通过后再打开浏览器；服务器窗口需要保持运行。

投递记录和个人设置保存在浏览器的 localStorage 中。请固定使用同一个浏览器和同一个访问地址；http://127.0.0.1:4173/ 与双击 index.html 的存储空间彼此独立。清理浏览器数据或更换设备前，需要自行备份。

批量新增与图片识别

• “新建投递”默认提供多行录入，可一次保存多家公司；渠道、日期、状态和下一步在本批次共用。
• “从图片提取”调用 Windows 10/11 自带的简体中文 OCR，只在本机处理图片，不调用外部服务，支持 PNG、JPG、WebP、BMP，最大 10 MB。
• OCR 只能读取可见文字，无法保证正确理解截图结构。识别结果会先进入可编辑表格，必须人工确认后才会保存。
• 图片识别依赖本地服务器，因此需要通过 启动网站.cmd 运行；只双击 index.html 而没有启动服务器时无法识别图片。

如果只想查看当前前端原型，也可以直接双击 index.html。项目已包含生成好的 dist/app.bundle.js，因此不需要本地服务器；这种方式适合预览，但后续接入真实 API 后仍应使用启动脚本。

也可以在项目目录中运行：

npm start

浏览器打开 http://127.0.0.1:4173。

启动命令所在的终端必须保持运行；关闭终端后，本地地址会立即停止服务。停止服务可在终端按 Ctrl + C。

如果页面显示“拒绝连接”，先访问 http://127.0.0.1:4173/health：返回 {"status":"ok","service":"wisp"} 说明服务正常，否则需要重新执行启动命令。

质量检查

npm run check

该命令会检查 JavaScript 语法、相对导入、入口资源以及基础可访问性约束。

项目还包含基于 Chrome DevTools Protocol 的多视口浏览器审查脚本；它用于开发验收，需要本地调试端口为 9222 的 Chrome 和运行在 4175 端口的页面服务。

当前边界

这是可交互的前端原型，刷新页面后新增的模拟记录会重置。账号、数据库、真实提醒、附件上传和公开面经发布尚未接入；在服务端鉴权、字段加密和数据备份完成前，不应录入真实联系方式、会议链接或受保密约束的面试内容。

详细产品范围见 产品需求文档，视觉决策见 前端视觉与交互方案。