2.6 KiB
2.6 KiB
项目管理系统 · 静态页面（前端参考）
依据《产品文档》与《交互文档》实现的静态效果，供前端工程师实现与联调参考。单入口 index.html，4 个页面/视图在同一文件中切换。
页面与交互文档对应关系
| 序号 | 页面 | 在静态中的位置 | 交互文档章节 |
|---|---|---|---|
| 1 | 登录页 | 首次打开即显示 | § 页面1 |
| 2 | 项目列表页 | 登录后主内容区默认视图 | § 页面2 |
| 3 | 项目详情/编辑页 | 点击列表「查看/编辑」或「新建项目」 | § 页面3 |
| 4 | 操作日志 | 详情页点击「查看操作日志」打开的右侧抽屉 | § 页面4 |
如何打开
# 方式一：直接打开（部分浏览器可能限制本地请求）
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，无后端接口。