API 第一版定型

ui/README.md

@@ -0,0 +1,63 @@
+# 项目管理系统 · 静态页面（前端参考）
+
+依据《产品文档》与《交互文档》实现的静态效果，供前端工程师实现与联调参考。**单入口** `index.html`，4 个页面/视图在同一文件中切换。
+
+---
+
+## 页面与交互文档对应关系
+
+| 序号 | 页面       | 在静态中的位置           | 交互文档章节   |
+|------|------------|--------------------------|----------------|
+| 1    | 登录页     | 首次打开即显示           | § 页面1        |
+| 2    | 项目列表页 | 登录后主内容区默认视图   | § 页面2        |
+| 3    | 项目详情/编辑页 | 点击列表「查看/编辑」或「新建项目」 | § 页面3 |
+| 4    | 操作日志   | 详情页点击「查看操作日志」打开的右侧抽屉 | § 页面4 |
+
+---
+
+## 如何打开
+
+```bash
+# 方式一：直接打开（部分浏览器可能限制本地请求）
+xdg-open ui/index.html   # Linux
+open ui/index.html       # macOS
+
+# 方式二：本地 HTTP 服务（推荐）
+cd ui && python3 -m http.server 8080
+# 浏览器访问 http://localhost:8080
+```
+
+---
+
+## 各页面功能与操作（与交互文档一致）
+
+**页面1 - 登录页**  
+- 输入账号、密码，点击「登录」。  
+- 成功：进入项目列表页（主应用）。  
+- 失败：页内提示错误（静态演示：密码填 `fail` 可触发失败）。
+
+**页面2 - 项目列表页**  
+- 进入即请求列表（Mock）；Loading → 表格或空状态。  
+- 搜索：选择「项目名称/项目编号」+ 输入关键词，点击「搜索」或回车。  
+- 筛选：选择「项目进度」「项目费用」后自动刷新列表。  
+- 操作列：「查看」「编辑」进入详情页；「新建项目」仅市场部可见（侧栏「当前角色」选市场部）。
+
+**页面3 - 项目详情/编辑页**  
+- 带项目 ID 进入：Loading → 5 个 Tab 表单；新建（无 ID）：直接展示空表单。  
+- 切换 Tab：合同信息、成本控制、应收款、应付款、其他。  
+- 保存：按钮 Loading、防重复点击；成功 Toast「保存成功」。  
+- 返回：回到项目列表。  
+- 查看操作日志：打开页面4 抽屉。
+
+**页面4 - 操作日志**  
+- 抽屉内展示当前项目的修改记录（Mock）；Loading、空状态。
+
+---
+
+## 文件说明
+
+- `index.html`：4 个页面/视图的 DOM（登录、列表、详情、操作日志抽屉）。  
+- `css/style.css`：全局与各页面样式。  
+- `js/app.js`：登录/退出、视图切换、Mock 数据、搜索/筛选、保存与 Toast、操作日志抽屉。  
+
+数据均为前端 Mock，无后端接口。