# 项目管理系统 · 前端

依据《产品文档》《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](https://github.com/benjitaylor/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）时自动退回登录页。