求职申请管理看板 Demo

这是一个前后端分离的轻量 Demo，用于管理自己的求职信息（当前有mock数据，可删去）。

目录结构

.
├── backend/                # Express API + 截图识别/网页渲染抓取
├── frontend/               # Vite 前端看板
├── scripts/                # 本地环境检测与安装脚本
├── requirements.md         # 需求文档
└── fields.md               # 字段表

功能概览

• 看板式管理求职申请状态
• 保存平台来源和岗位原始链接
• 记录截止日期、下一步动作、备注
• 支持“手动填写 + 截图辅助填充”同一张岗位卡片
• 上传截图后由 LongCat 多模态识别岗位信息和岗位自己的时间轴，并直接填充到表单中供预览、核对和手动修正
• 支持首次进入时由体验者填写自己的 LongCat API Key，并从预设模型列表中选择模型；配置会持久化保存到本地文件，右上角可随时更新模型接入信息
• LongCat API 配置会持久化写入本地文件 backend/data/runtime/agent-config.json，该目录已被 .gitignore 忽略，不会提交到 git
• 接口地址固定为官方 LongCat OpenAI 兼容入口，用户无需手动填写；完整 API Key 只会在保存配置时提交给后端一次；后端后续调用 LongCat 时直接使用本地文件中的配置，前端只获取掩码信息，截图识别请求不会重复携带完整 Key
• 支持输入固定岗位网址生成“意向单卡片”；当静态 HTML 不足时，后端会自动回退到 Playwright + Chromium 渲染抓取页面文字
• 使用本地 JSON 文件存储，方便演示和轻量部署

技术方案

前端

• Vite 原生 JavaScript
• 无 UI 框架，依赖少，启动快

后端

• Node.js + Express
• Multer 处理截图上传
• 使用 jpeg-js / pngjs 做截图预处理，辅助多模态识别稳定性
• 使用 Playwright + Chromium 做动态岗位网页渲染抓取

快速启动

0. 一键本地启动

./scripts/start_local.sh

脚本会自动补 .env、检查依赖、安装 Playwright Chromium（若缺失），并在后台启动前后端服务。

1. 检查运行环境

bash ./scripts/check_ocr_env.sh

2. 如有需要，尝试安装运行环境

bash ./scripts/install_ocr_env.sh

该脚本也会在后端已安装 playwright 时自动安装 Chromium 浏览器，供岗位网址渲染抓取使用。

3. 安装后端依赖

cd backend
npm install
npx playwright install chromium
npm run dev

默认端口：3000

4. 安装前端依赖

cd frontend
npm install
npm run dev

默认端口：5173

环境变量

后端

复制 backend/.env.example 为 .env，可按需调整。

前端

复制 frontend/.env.example 为 .env，默认请求本地后端 http://localhost:3000。

CloudStudio 部署建议

• 前端和后端分别作为两个项目部署
• 前端导入 frontend/ 目录
• 后端导入 backend/ 目录
• 如果分别导入前端或后端子目录，也可直接使用对应目录下的 frontend/.vscode/preview.yml 与 backend/.vscode/preview.yml
• preview.yml 中必须保留 port: 字段；当前示例已为前端配置 5173、后端配置 3000
• 前端服务已设置 mainPort: true，在 CloudStudio 的应用主页预览场景下会优先打开前端页面

截图识别说明

• 不要求用户提供招聘平台账号密码，不直接抓取登录态网页
• 截图识别当前依赖 LongCat 多模态模型
• 前端交互上，截图识别作为“辅助填充当前表单”的方式使用，识别结果会直接写入岗位卡片表单，便于用户立即预览、核对和修正
• 安全说明：如果用户在浏览器页面中输入 API Key，那么“用户自己”仍然可以在浏览器开发者工具中看到自己提交的那一次请求

排错文档

• LongCat 视觉识别接入排错记录：docs/longcat-vision-troubleshooting.md