37 lines
2.1 KiB
Markdown
37 lines
2.1 KiB
Markdown
# 项目管理系统 · 前端
|
||
|
||
依据《产品文档》《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）时自动退回登录页。
|