# 项目管理系统 · 静态页面（前端参考）

依据《产品文档》与《交互文档》实现的静态效果，供前端工程师实现与联调参考。**单入口** `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，无后端接口。