ocean/frontend/README.md

项目管理系统 · 前端

依据《产品文档》《API 文档》《交互文档》开发，对接后端 http://127.0.0.1:8000。

目录结构

• index.html - 单页：登录、项目列表、项目详情/编辑、操作日志（抽屉）
• css/style.css - 样式（参考 ui 目录风格）
• js/api.js - API 封装（baseURL、Token、POST JSON、401 处理）
• js/app.js - 业务逻辑（登录、列表搜索/筛选/分页、详情加载/保存、新建、操作日志）
• Agentation（agentation）：可视化反馈工具栏，供 AI 编码代理定位页面元素。需先构建后使用。

本地运行

1. 确保后端已启动：http://127.0.0.1:8000
2. 若使用 Agentation：需 Node 18+。在 frontend 目录下执行
   npm install → npm run build
   会生成 dist/agentation.js，页面加载后右下角出现 Agentation 工具栏。若未构建，工具栏不显示，不影响主应用使用。
3. 任选一种方式提供静态资源：
   • 推荐（不依赖 Node 版本）：在 frontend 目录下执行
     python3 -m http.server 3000
     然后访问 http://127.0.0.1:3000
   • 或直接用浏览器打开 index.html（若后端未配置 CORS，跨域请求可能被拦）
   • 或使用 Node 14+ 时：npx serve .
4. 登录后使用；仅市场部角色显示「新建项目」入口

功能说明

• 登录：POST /api/auth/login，成功后 Token 存 localStorage，后续请求带 Authorization: Bearer <token>
• 项目列表：POST /api/projects/list，支持按名称/编号搜索、进度/费用筛选、日期筛选、日期异常筛选、分页
• 项目详情：POST /api/projects/detail，5 个 Tab（合同信息、成本控制、应收款、应付款、其他）
• 新建项目：POST /api/projects/create（仅市场部）
• 保存：POST /api/projects/update，后端记操作日志
• 操作日志：POST /api/projects/logs，抽屉展示

未登录或 Token 失效（401）时自动退回登录页。