64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
# 项目管理系统 · 静态页面（前端参考）
|
||
|
||
依据《产品文档》与《交互文档》实现的静态效果，供前端工程师实现与联调参考。**单入口** `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，无后端接口。
|