API 第一版定型
This commit is contained in:
Your Name
+396
@@ -0,0 +1,396 @@
|
|||||||
|
# 项目管理系统 API 文档
|
||||||
|
|
||||||
|
**依据**：《产品文档》《交互文档》《初始需求》
|
||||||
|
**读者**：后端/前端工程师
|
||||||
|
**版本**：v1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 概述
|
||||||
|
|
||||||
|
- **基础路径**：`/api`（按实际部署约定）
|
||||||
|
- **请求方式**：**全部采用 POST**
|
||||||
|
- **认证方式**：登录后使用 Token（如 Bearer Token 或 Session），请求头携带，具体与现有账号体系对齐
|
||||||
|
- **数据格式**：请求体与响应体均为 JSON，编码 UTF-8，Content-Type: application/json
|
||||||
|
- **角色**：管理员、市场部、工程部、技经部、财务部、物贸部；新建项目仅市场部可调，查看/修改所有角色可调
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 认证
|
||||||
|
|
||||||
|
### 2.1 登录
|
||||||
|
|
||||||
|
| 项目 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **接口** | `POST /api/auth/login` |
|
||||||
|
| **说明** | 用户登录，成功返回 Token 及用户信息（含角色） |
|
||||||
|
| **权限** | 无需登录 |
|
||||||
|
|
||||||
|
#### 请求参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| username | string | 是 | 账号 |
|
||||||
|
| password | string | 是 | 密码 |
|
||||||
|
|
||||||
|
#### 响应参数（成功，HTTP 200）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| token | string | 登录凭证，后续请求需携带 |
|
||||||
|
| user | object | 当前用户信息 |
|
||||||
|
| user.id | string | 用户 ID |
|
||||||
|
| user.username | string | 账号 |
|
||||||
|
| user.role | string | 角色：管理员 / 市场部 / 工程部 / 技经部 / 财务部 / 物贸部 |
|
||||||
|
| user.displayName | string | 显示名称 |
|
||||||
|
|
||||||
|
#### 响应参数（失败，HTTP 401）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| code | number | 错误码，401 |
|
||||||
|
| message | string | 错误信息，如「账号或密码错误」 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 项目列表
|
||||||
|
|
||||||
|
| 项目 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **接口** | `POST /api/projects/list` |
|
||||||
|
| **说明** | 分页获取项目列表，支持按名称/编号搜索、按进度/费用筛选 |
|
||||||
|
| **权限** | 已登录，所有角色可访问 |
|
||||||
|
|
||||||
|
#### 请求参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| page | number | 否 | 页码，从 1 开始，默认 1 |
|
||||||
|
| pageSize | number | 否 | 每页条数，默认 20 |
|
||||||
|
| searchType | string | 否 | 搜索维度：`name`（项目名称）、`code`（项目编号） |
|
||||||
|
| keyword | string | 否 | 搜索关键词，与 searchType 配合使用 |
|
||||||
|
| progress | string | 否 | 项目进度筛选，取值与业务枚举一致 |
|
||||||
|
| cost | string | 否 | 项目费用筛选，取值与业务枚举一致 |
|
||||||
|
|
||||||
|
#### 响应参数（成功，HTTP 200）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| list | array | 项目列表，无数据时为空数组 |
|
||||||
|
| list[].id | string | 项目 ID |
|
||||||
|
| list[].projectName | string | 项目名称 |
|
||||||
|
| list[].contractCode | string | 合同编号 |
|
||||||
|
| list[].progress | string | 项目进度 |
|
||||||
|
| list[].cost | string | 项目费用 |
|
||||||
|
| list[].updatedAt | string | 最后更新时间，ISO8601 |
|
||||||
|
| total | number | 总条数，无数据时为 0 |
|
||||||
|
| page | number | 当前页码 |
|
||||||
|
| pageSize | number | 每页条数 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 项目详情
|
||||||
|
|
||||||
|
| 项目 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **接口** | `POST /api/projects/detail` |
|
||||||
|
| **说明** | 获取单个项目完整信息（5 个分类） |
|
||||||
|
| **权限** | 已登录，所有角色可访问 |
|
||||||
|
|
||||||
|
#### 请求参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| id | string | 是 | 项目 ID |
|
||||||
|
|
||||||
|
#### 响应参数（成功，HTTP 200）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| id | string | 项目 ID |
|
||||||
|
| contract | object | 合同信息，字段见第 8.1 节 |
|
||||||
|
| costControl | object | 成本控制，字段见第 8.2 节 |
|
||||||
|
| receivable | object | 应收款，字段见第 8.3 节 |
|
||||||
|
| payable | object | 应付款，字段见第 8.4 节 |
|
||||||
|
| other | object | 其他，字段见第 8.5 节 |
|
||||||
|
| createdAt | string | 创建时间，ISO8601 |
|
||||||
|
| updatedAt | string | 更新时间，ISO8601 |
|
||||||
|
|
||||||
|
#### 响应参数（失败，HTTP 404）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| code | number | 错误码，404 |
|
||||||
|
| message | string | 错误信息，如「项目不存在」 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 新建项目
|
||||||
|
|
||||||
|
| 项目 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **接口** | `POST /api/projects/create` |
|
||||||
|
| **说明** | 新建项目，仅市场部可调用 |
|
||||||
|
| **权限** | 已登录，角色为市场部；非市场部返回 403 |
|
||||||
|
|
||||||
|
#### 请求参数
|
||||||
|
|
||||||
|
请求体为项目 5 个分类的完整或部分数据，未传字段由后端赋默认值。结构见第 8 节「项目信息字段（5 个分类）」；**新建时合同编号、项目名称为必填项**。
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| contract | object | 是 | 合同信息，字段见 8.1；其中 contractCode、projectName 必填 |
|
||||||
|
| contract.contractCode | string | 是 | 合同编号 |
|
||||||
|
| contract.projectName | string | 是 | 项目名称 |
|
||||||
|
| costControl | object | 否 | 成本控制，字段见 8.2 |
|
||||||
|
| receivable | object | 否 | 应收款，字段见 8.3 |
|
||||||
|
| payable | object | 否 | 应付款，字段见 8.4 |
|
||||||
|
| other | object | 否 | 其他，字段见 8.5 |
|
||||||
|
|
||||||
|
#### 响应参数（成功，HTTP 201）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| id | string | 新创建的项目 ID |
|
||||||
|
| message | string | 固定为「创建成功」 |
|
||||||
|
|
||||||
|
#### 响应参数（失败，HTTP 400）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| code | number | 错误码，400 |
|
||||||
|
| message | string | 错误信息，如「合同编号不能为空」「项目名称不能为空」 |
|
||||||
|
| errors | array | 可选，见第 10 节 |
|
||||||
|
|
||||||
|
#### 响应参数（失败，HTTP 403）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| code | number | 错误码，403 |
|
||||||
|
| message | string | 错误信息，如「无权限」 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 更新项目
|
||||||
|
|
||||||
|
| 项目 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **接口** | `POST /api/projects/update` |
|
||||||
|
| **说明** | 更新项目全部或部分信息；每次保存由后端记录一条操作日志 |
|
||||||
|
| **权限** | 已登录，所有角色可访问 |
|
||||||
|
|
||||||
|
#### 请求参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| id | string | 是 | 项目 ID |
|
||||||
|
| contract | object | 否 | 合同信息，传则按约定全量/合并更新，字段见 8.1 |
|
||||||
|
| costControl | object | 否 | 成本控制，字段见 8.2 |
|
||||||
|
| receivable | object | 否 | 应收款，字段见 8.3 |
|
||||||
|
| payable | object | 否 | 应付款，字段见 8.4 |
|
||||||
|
| other | object | 否 | 其他，字段见 8.5 |
|
||||||
|
|
||||||
|
#### 响应参数（成功，HTTP 200）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| id | string | 项目 ID |
|
||||||
|
| message | string | 固定为「保存成功」 |
|
||||||
|
|
||||||
|
#### 响应参数（失败）
|
||||||
|
|
||||||
|
| HTTP 状态 | 参数名 | 类型 | 说明 |
|
||||||
|
|-----------|--------|------|------|
|
||||||
|
| 404 | code | number | 错误码，404 |
|
||||||
|
| 404 | message | string | 如「项目不存在」 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 操作日志
|
||||||
|
|
||||||
|
| 项目 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **接口** | `POST /api/projects/logs` |
|
||||||
|
| **说明** | 获取某项目的修改记录（操作人、时间、修改摘要） |
|
||||||
|
| **权限** | 已登录，所有角色可访问 |
|
||||||
|
|
||||||
|
#### 请求参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 必填 | 说明 |
|
||||||
|
|--------|------|------|------|
|
||||||
|
| id | string | 是 | 项目 ID |
|
||||||
|
| page | number | 否 | 页码，从 1 开始，默认 1 |
|
||||||
|
| pageSize | number | 否 | 每页条数，默认 20 |
|
||||||
|
|
||||||
|
#### 响应参数（成功，HTTP 200）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| list | array | 操作日志列表，无记录时为空数组 |
|
||||||
|
| list[].id | string | 日志 ID |
|
||||||
|
| list[].operatorId | string | 操作人 ID |
|
||||||
|
| list[].operatorName | string | 操作人姓名 |
|
||||||
|
| list[].operatedAt | string | 操作时间，ISO8601 |
|
||||||
|
| list[].summary | string | 修改摘要，如「合同信息」「成本控制」 |
|
||||||
|
| list[].detail | string | 可选，修改内容详情 |
|
||||||
|
| total | number | 总条数，无记录时为 0 |
|
||||||
|
| page | number | 当前页码 |
|
||||||
|
| pageSize | number | 每页条数 |
|
||||||
|
|
||||||
|
#### 响应参数（失败，HTTP 404）
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| code | number | 错误码，404 |
|
||||||
|
| message | string | 如「项目不存在」 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 项目信息字段（5 个分类）
|
||||||
|
|
||||||
|
以下为各分类在 **请求/响应** 中使用的字段定义；单位、是否必填、校验规则由后端统一规定，前端与后端对齐。
|
||||||
|
|
||||||
|
### 8.1 合同信息 `contract`
|
||||||
|
|
||||||
|
| 字段名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| serialNo | string | 序号 |
|
||||||
|
| contractCode | string | 合同编号 |
|
||||||
|
| powerBureauContractCode | string | 供电局项目合同编号 |
|
||||||
|
| projectName | string | 项目名称 |
|
||||||
|
| subItemCount | number | 子项个数 |
|
||||||
|
| subItemCode | string | 子项编码 |
|
||||||
|
| totalInvestment | number | 项目总投资（万元） |
|
||||||
|
| bidContractAmount | number | 中标合同金额（万元） |
|
||||||
|
| warrantyRatio | string \| number | 质保金比例 |
|
||||||
|
| settlementAmount | number | 结算金额（万元） |
|
||||||
|
| totalCostEstimate | number | 总成本测算 |
|
||||||
|
| voltageLevel | string | 工程电压等级 |
|
||||||
|
| projectCategory | string | 工程类别 |
|
||||||
|
| ownerUnit | string | 业主单位 |
|
||||||
|
| ownerContact | string | 业主联系人及电话 |
|
||||||
|
| bidType | string | 中标形式 |
|
||||||
|
| signDate | string | 签订日期（YYYY-MM-DD） |
|
||||||
|
| startDate | string | 开工日期 |
|
||||||
|
| plannedCompletionDate | string | 计划竣工日期 |
|
||||||
|
| actualCompletionDate | string | 实际竣工日期 |
|
||||||
|
| warrantyAmount | number | 质保金（万元） |
|
||||||
|
| warrantyEndDate | string | 质保期截止日 |
|
||||||
|
| actualWarrantyRefundDate | string | 实际退质保金日期 |
|
||||||
|
| projectDepartment | string | 所属项目部 |
|
||||||
|
| projectLeaderContact | string | 项目负责人及电话 |
|
||||||
|
| paymentMethod | string | 工程款拨付方式 |
|
||||||
|
|
||||||
|
### 8.2 成本控制 `costControl`
|
||||||
|
|
||||||
|
| 字段名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| totalCost | number | 总体成本 |
|
||||||
|
| isAdjusted | string | 是否调整：是/否 |
|
||||||
|
| migrantWorkerPlan | string \| number | 农民工工资（按进度计划） |
|
||||||
|
| migrantWorkerActual | number | 农民工工资（实付） |
|
||||||
|
| selfSupplyMaterialControl | number | 乙供材料费（控制） |
|
||||||
|
| materialPayableByRatio | number | 应付材料费（按收款比例） |
|
||||||
|
| materialActualOccurred | number | 实际发生材料费 |
|
||||||
|
| materialActualPaid | number | 实际支付材料费 |
|
||||||
|
| otherCostControl | number | 其他费用（控制） |
|
||||||
|
| otherPayable | number | 应付其他费 |
|
||||||
|
| otherActual | number | 实际其他费用 |
|
||||||
|
| tax | number | 税金 |
|
||||||
|
| profit | number | 利润（万元） |
|
||||||
|
| actualProfit | number | 实际利润（万元） |
|
||||||
|
| costSettlementAmount | number | 成本结算金额（万元） |
|
||||||
|
|
||||||
|
### 8.3 应收款 `receivable`
|
||||||
|
|
||||||
|
| 字段名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| receivableProgress | number | 应收款（完成进度款） |
|
||||||
|
| invoiceAmount | number | 开票金额（万元） |
|
||||||
|
| actualReceiptAmount | number | 实际收款金额（万元） |
|
||||||
|
| actualReceiptRate | string \| number | 实际收款完成率 |
|
||||||
|
|
||||||
|
### 8.4 应付款 `payable`
|
||||||
|
|
||||||
|
| 字段名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| payableAmount | number | 应付款金额（万元） |
|
||||||
|
| actualPaymentAmount | number | 实际付款金额（万元） |
|
||||||
|
| unreceivedAmount | number | 未收款（万元） |
|
||||||
|
| actualPaymentRate | string \| number | 实际付款完成率 |
|
||||||
|
| migrantWorkerArrears | number | 民工工资清欠金额（万元） |
|
||||||
|
|
||||||
|
### 8.5 其他 `other`
|
||||||
|
|
||||||
|
| 字段名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| settlementCostEstimate | number | 结算后成本测算金额 |
|
||||||
|
| settlementLaborCost | number | 结算人工费 |
|
||||||
|
| settlementMaterialCost | number | 结算材料费 |
|
||||||
|
| settlementOtherCost | number | 结算其他费 |
|
||||||
|
| dueSettlementCount | number | 到期应结算项目个数 |
|
||||||
|
| overdueSettlementCount | number | 到期未完成结算个数 |
|
||||||
|
| existingProblems | string | 存在的问题 |
|
||||||
|
| suggestions | string | 建议措施 |
|
||||||
|
| cumulativeProgress | string \| number | 累计进度 |
|
||||||
|
| remark | string | 备注 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 项目列表/筛选枚举
|
||||||
|
|
||||||
|
以下由后端定义并提供给前端（如通过配置接口或文档约定）：
|
||||||
|
|
||||||
|
- **项目进度 progress**：枚举值列表，如「未开始 / 进行中 / 已竣工」等
|
||||||
|
- **项目费用 cost**：枚举值列表，如按金额区间的选项
|
||||||
|
|
||||||
|
具体取值以实际业务与后端实现为准。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. 统一错误响应
|
||||||
|
|
||||||
|
| HTTP 状态 | 说明 |
|
||||||
|
|-----------|------|
|
||||||
|
| 400 | 请求参数错误 |
|
||||||
|
| 401 | 未登录或 Token 无效 |
|
||||||
|
| 403 | 无权限（如非市场部调用新建项目） |
|
||||||
|
| 404 | 资源不存在（如项目 ID 不存在） |
|
||||||
|
| 500 | 服务器内部错误 |
|
||||||
|
|
||||||
|
#### 错误响应体参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 说明 |
|
||||||
|
|--------|------|------|
|
||||||
|
| code | number | HTTP 状态码或业务错误码 |
|
||||||
|
| message | string | 错误描述 |
|
||||||
|
| errors | array | 可选，参数校验详情 |
|
||||||
|
| errors[].field | string | 出错字段名 |
|
||||||
|
| errors[].message | string | 该字段错误说明 |
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"code": 400,
|
||||||
|
"message": "参数校验失败",
|
||||||
|
"errors": [
|
||||||
|
{ "field": "projectName", "message": "项目名称不能为空" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. 接口一览
|
||||||
|
|
||||||
|
| 接口 | 方法 | 说明 | 权限 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| /api/auth/login | POST | 登录 | 公开 |
|
||||||
|
| /api/projects/list | POST | 项目列表（搜索、筛选、分页） | 已登录 |
|
||||||
|
| /api/projects/detail | POST | 项目详情 | 已登录 |
|
||||||
|
| /api/projects/create | POST | 新建项目 | 已登录且市场部 |
|
||||||
|
| /api/projects/update | POST | 更新项目（记操作日志） | 已登录 |
|
||||||
|
| /api/projects/logs | POST | 操作日志列表 | 已登录 |
|
||||||
|
|
||||||
|
字段命名采用驼峰；日期格式建议 ISO8601 或 `YYYY-MM-DD`，前后端约定一致。
|
||||||
+137
@@ -0,0 +1,137 @@
|
|||||||
|
# 交互文档（前端）
|
||||||
|
|
||||||
|
**依据**：《产品文档》
|
||||||
|
**读者**：前端工程师
|
||||||
|
**目标**：明确页面数量、每个页面的功能与用户交互，便于实现与联调。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 页面总览
|
||||||
|
|
||||||
|
| 序号 | 页面名称 | 说明 |
|
||||||
|
|------|--------------|------|
|
||||||
|
| 1 | 登录页 | 用户登录入口（若与现有系统统一，可复用现有登录页） |
|
||||||
|
| 2 | 项目列表页 | 项目列表的入口页，支持搜索、筛选、进入详情、新建项目 |
|
||||||
|
| 3 | 项目详情/编辑页 | 查看/编辑单个项目信息，含 5 个 Tab；新建项目时也为本页（空表单） |
|
||||||
|
| 4 | 操作日志 | 查看某项目的修改记录，可为抽屉或独立页 |
|
||||||
|
|
||||||
|
**合计：4 个页面（或 3 个主页面 + 操作日志以抽屉形式承载）。**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 角色与权限（影响各页显隐）
|
||||||
|
|
||||||
|
| 角色 | 新建项目 | 查看/编辑项目 |
|
||||||
|
|------|----------|----------------|
|
||||||
|
| 市场部 | ✓ | ✓ |
|
||||||
|
| 管理员、工程部、技经部、财务部、物贸部 | ✗ | ✓ |
|
||||||
|
|
||||||
|
- **新建项目**：仅市场部展示入口；其他角色不展示或入口不可用。
|
||||||
|
- **查看/编辑**：所有角色均可进入项目列表、项目详情，并可编辑、保存；每次保存由后端记录一条操作日志。
|
||||||
|
- 前端需按当前用户角色控制按钮/入口的**显隐与禁用**。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 各页面功能与用户交互
|
||||||
|
|
||||||
|
### 页面 1：登录页
|
||||||
|
|
||||||
|
- **功能**：用户登录，进入系统。若项目与现有账号体系统一，则复用现有登录页；否则需单独实现登录页。
|
||||||
|
- **用户交互**：
|
||||||
|
- 用户输入账号、密码（等必填项），点击「登录」。
|
||||||
|
- 成功：跳转至**项目列表页**。
|
||||||
|
- 失败：页内提示错误信息，不跳转。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 页面 2：项目列表页
|
||||||
|
|
||||||
|
- **功能**：展示项目列表，支持按名称/编号搜索、按进度/费用筛选；进入项目详情或新建项目。
|
||||||
|
- **用户交互**：
|
||||||
|
|
||||||
|
| 用户操作 | 系统反馈 |
|
||||||
|
|----------|----------|
|
||||||
|
| 进入页面 | 请求列表数据；请求中显示 Loading；成功则展示表格；无数据时展示空状态文案。 |
|
||||||
|
| 选择搜索维度（项目名称 / 项目编号），输入关键词，点击「搜索」或回车 | 按当前维度和关键词请求列表；请求中可保留原列表或局部 Loading；结果替换列表；无结果时展示空状态。 |
|
||||||
|
| 选择「项目进度」筛选 | 按所选进度请求列表并刷新表格；无结果时展示空状态。 |
|
||||||
|
| 选择「项目费用」筛选 | 按所选费用请求列表并刷新表格；无结果时展示空状态。 |
|
||||||
|
| 点击某一行的「查看」或「编辑」 | 跳转至**项目详情/编辑页**，并传入该项目 ID；详情加载中显示 Loading。 |
|
||||||
|
| 点击「新建项目」（仅市场部可见） | 跳转至**项目详情/编辑页**，不传项目 ID（新建模式）；页面展示 5 个 Tab 的空表单。 |
|
||||||
|
| 分页操作（若有） | 请求对应页数据并刷新列表。 |
|
||||||
|
|
||||||
|
- **列表展示**：至少包含项目名称、合同编号、进度、费用等关键信息列，以及操作列（查看/编辑）。具体列与后端接口字段一致。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 页面 3：项目详情/编辑页
|
||||||
|
|
||||||
|
- **功能**：查看或编辑单个项目的全部信息（5 个分类）；新建时为本页空表单。所有有权限角色均可编辑并保存，保存由后端记操作日志。
|
||||||
|
- **用户交互**：
|
||||||
|
|
||||||
|
| 用户操作 | 系统反馈 |
|
||||||
|
|----------|----------|
|
||||||
|
| 进入页面（带项目 ID） | 请求该项目详情；请求中显示 Loading；成功后在当前页展示 5 个 Tab 及表单内容。 |
|
||||||
|
| 进入页面（新建，无项目 ID） | 直接展示 5 个 Tab 的空表单，无 Loading。 |
|
||||||
|
| 切换 Tab（合同信息 / 成本控制 / 应收款 / 应付款 / 其他） | 切换当前展示的 Tab 内容，无请求。 |
|
||||||
|
| 填写或修改表单字段 | 仅前端状态变化；可做前端校验（与后端约定）。 |
|
||||||
|
| 点击「保存」 | 提交中：保存按钮 Loading，禁止再次点击；成功：提示「保存成功」（如 Toast），新建时可选跳转至该详情或列表；失败：提示接口返回错误信息，不关闭当前页。 |
|
||||||
|
| 点击「返回」或等价入口 | 返回**项目列表页**；是否保留列表页上次的搜索/筛选状态与产品约定。 |
|
||||||
|
| 点击「查看操作日志」 | 打开**操作日志**（抽屉或新页），展示当前项目的修改记录。 |
|
||||||
|
|
||||||
|
- **5 个 Tab**：合同信息、成本控制、应收款、应付款、其他。每个 Tab 内为该分类下的表单字段，字段与《产品文档》一致，单位与校验与后端对齐。字段清单见本文第 5 节。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 页面 4：操作日志
|
||||||
|
|
||||||
|
- **功能**：展示某一项目的修改记录（操作人、时间、修改摘要等），仅查看，无编辑。
|
||||||
|
- **承载形式**：可为详情页右侧**抽屉**，或**独立页面**；与产品/前端约定一致即可。
|
||||||
|
- **用户交互**：
|
||||||
|
|
||||||
|
| 用户操作 | 系统反馈 |
|
||||||
|
|----------|----------|
|
||||||
|
| 打开操作日志（从详情页入口） | 请求该项目下的操作日志；请求中显示 Loading；成功则展示记录列表；无记录时展示空状态文案。 |
|
||||||
|
| 关闭抽屉 / 返回 | 关闭抽屉或返回详情页/列表页。 |
|
||||||
|
|
||||||
|
- **列表内容**：操作人、操作时间、修改内容摘要（如「合同信息」「成本控制」等），具体字段与后端接口一致。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 全局状态与异常
|
||||||
|
|
||||||
|
| 场景 | 交互反馈 |
|
||||||
|
|------|----------|
|
||||||
|
| 列表/详情/日志请求中 | 明确 Loading 态（整页或局部）。 |
|
||||||
|
| 保存提交中 | 保存按钮 Loading，禁止再次点击。 |
|
||||||
|
| 保存成功 | 统一成功提示（如 Toast）。 |
|
||||||
|
| 保存或接口失败 | 页内或 Toast 提示错误信息，不关闭当前页。 |
|
||||||
|
| 无权限（如 403） | 提示无权限，可引导返回列表。 |
|
||||||
|
| 列表无数据 / 无搜索结果 | 空状态文案，无表格内容。 |
|
||||||
|
| 操作日志无记录 | 空状态文案。 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 项目信息字段（5 个 Tab）
|
||||||
|
|
||||||
|
详情/编辑页按 5 个 Tab 组织，字段与《产品文档》一致；单位、校验、是否必填与后端对齐。
|
||||||
|
|
||||||
|
- **合同信息**：序号、合同编号、供电局项目合同编号、项目名称、子项个数、子项编码、项目总投资、中标合同金额、质保金比例、结算金额、总成本测算、工程电压等级、工程类别、业主单位、业主联系人及电话、中标形式、签订日期、开工日期、计划竣工日期、实际竣工日期、质保金、质保期截止日、实际退质保金日期、所属项目部、项目负责人及电话、工程款拨付方式。
|
||||||
|
- **成本控制**：总体成本、是否调整（是/否）、农民工工资（按进度计划/实付）、乙供材料费（控制）、应付材料费（按收款比例）、实际发生/支付材料费、其他费用（控制）、应付其他费、实际其他费用、税金、利润/实际利润、成本结算金额。
|
||||||
|
- **应收款**：应收款（完成进度款）、开票金额、实际收款金额、实际收款完成率。
|
||||||
|
- **应付款**：应付款金额、实际付款金额、未收款、实际付款完成率、民工工资清欠金额。
|
||||||
|
- **其他**：结算后成本测算金额、结算人工费/材料费/其他费、到期应结算项目个数、到期未完成结算个数、存在的问题、建议措施、累计进度、备注。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 小结（给前端）
|
||||||
|
|
||||||
|
- **页面数**：4 个（登录、项目列表、项目详情/编辑、操作日志；操作日志可为抽屉）。
|
||||||
|
- **权限**：仅市场部展示「新建项目」；所有角色可查看、编辑、保存；保存由后端记日志，前端仅提供「查看操作日志」入口与展示。
|
||||||
|
- **搜索**：项目名称、项目编号；触发方式与后端约定（如回车/点击搜索）。
|
||||||
|
- **筛选**：项目进度、项目费用；选项与列表接口参数一致。
|
||||||
|
- **详情页**：5 个 Tab 对应 5 类字段，保存时防重复提交、成功/失败有明确反馈。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**文档版本**：v2
|
||||||
|
**依据**：产品文档
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
# 产品文档
|
||||||
|
|
||||||
|
## 1. 概述
|
||||||
|
|
||||||
|
项目管理系统，多部门协作维护项目信息，支持按名称/编号/进度/费用检索与筛选。
|
||||||
|
|
||||||
|
## 2. 用户与权限
|
||||||
|
|
||||||
|
**角色**：管理员、市场部、工程部、技经部、财务部、物贸部。
|
||||||
|
|
||||||
|
- **创建项目**：仅市场部。
|
||||||
|
- **查看与修改**：所有角色（含市场部）均可查看和修改项目信息。
|
||||||
|
- **修改日志**：对项目信息的修改需记录操作日志。
|
||||||
|
|
||||||
|
## 3. 项目信息（5 个分类）
|
||||||
|
|
||||||
|
**合同信息**：序号、合同编号、供电局项目合同编号、项目名称、子项个数、子项编码、项目总投资、中标合同金额、质保金比例、结算金额、总成本测算、工程电压等级、工程类别、业主单位、业主联系人及电话、中标形式、签订/开工/计划竣工/实际竣工日期、质保金、质保期截止日、实际退质保金日期、所属项目部、项目负责人及电话、工程款拨付方式。
|
||||||
|
|
||||||
|
**成本控制**：总体成本、是否调整（是/否）、农民工工资（按进度计划/实付）、乙供材料费（控制）、应付材料费（按收款比例）、实际发生/支付材料费、其他费用（控制）、应付其他费、实际其他费用、税金、利润/实际利润、成本结算金额。
|
||||||
|
|
||||||
|
**应收款**：应收款（完成进度款）、开票金额、实际收款金额、实际收款完成率。
|
||||||
|
|
||||||
|
**应付款**：应付款金额、实际付款金额、未收款、实际付款完成率、民工工资清欠金额。
|
||||||
|
|
||||||
|
**其他**：结算后成本测算金额、结算人工费/材料费/其他费、到期应结算项目个数、到期未完成结算个数、存在的问题、建议措施、累计进度、备注。
|
||||||
|
|
||||||
|
## 4. 项目统计
|
||||||
|
|
||||||
|
- **搜索**：按项目名称、项目编号。
|
||||||
|
- **筛选**：按项目进度、按项目费用。
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
- 用户系统
|
||||||
|
每个用归属于这些
|
||||||
|
管理员
|
||||||
|
市场部
|
||||||
|
工程部
|
||||||
|
技经部
|
||||||
|
财务部
|
||||||
|
物贸部
|
||||||
|
只有市场部门能创建项目信息，其他用户可以查看和修改项目信息(修改项目信息需要记录日志)。
|
||||||
|
|
||||||
|
- 项目信息
|
||||||
|
有"合同信息"，"成本控制", "应收款", "应付款", "其他" 这5个分类。
|
||||||
|
"合同信息" 这个分类有以下这些字段
|
||||||
|
序号
|
||||||
|
合同编号
|
||||||
|
供电局项目合同编号
|
||||||
|
项目名称
|
||||||
|
子项个数
|
||||||
|
子项编码
|
||||||
|
项目总投资（万元）
|
||||||
|
中标合同金额（万元）
|
||||||
|
质保金比例
|
||||||
|
结算金额（万元）
|
||||||
|
总成本测算
|
||||||
|
工程电压等级
|
||||||
|
工程类别
|
||||||
|
业主单位
|
||||||
|
业主联系人及电话
|
||||||
|
中标形式
|
||||||
|
签订日期
|
||||||
|
开工日期
|
||||||
|
计划竣工日期
|
||||||
|
实际竣工日期
|
||||||
|
质保金（万元）
|
||||||
|
质保期截止日
|
||||||
|
实际退质保金日期
|
||||||
|
所属项目部
|
||||||
|
项目负责人及电话
|
||||||
|
工程款拨付方式
|
||||||
|
|
||||||
|
"成本控制"这个分类有以下这些字段
|
||||||
|
总体成本
|
||||||
|
是否调整（是/否）
|
||||||
|
农民工工资（按进度计划）
|
||||||
|
农民工工资（实付）
|
||||||
|
乙供材料费（控制）
|
||||||
|
应付材料费（按收款比例）
|
||||||
|
实际发生材料费
|
||||||
|
实际支付材料费
|
||||||
|
其他费用（控制）
|
||||||
|
应付其他费
|
||||||
|
实际其他费用
|
||||||
|
税金
|
||||||
|
利润（万元）
|
||||||
|
实际利润（万元）
|
||||||
|
成本结算金额（万元）
|
||||||
|
|
||||||
|
"应收款"这个分类有以下这些字段
|
||||||
|
应收款（完成进度款）
|
||||||
|
开票金额（万元）
|
||||||
|
实际收款金额（万元）
|
||||||
|
实际收款完成率
|
||||||
|
|
||||||
|
"应付款"这个分类有以下这些字段
|
||||||
|
应付款金额（万元）
|
||||||
|
实际付款金额（万元）
|
||||||
|
未收款（万元）
|
||||||
|
实际付款完成率
|
||||||
|
民工工资清欠金额（万元）
|
||||||
|
|
||||||
|
"其他"这个分类有以下这些字段
|
||||||
|
结算后成本测算金额
|
||||||
|
结算人工费
|
||||||
|
结算材料费
|
||||||
|
结算其他费
|
||||||
|
到期应结算项目个数
|
||||||
|
到期未完成结算个数
|
||||||
|
存在的问题
|
||||||
|
建议措施
|
||||||
|
累计进度
|
||||||
|
备注
|
||||||
|
|
||||||
|
- 项目统计
|
||||||
|
可以根据，项目名称和项目编号搜索项目
|
||||||
|
可以根据，项目精度筛选项目
|
||||||
|
可以根据，项目费用筛选项目
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -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，无后端接口。
|
||||||
@@ -0,0 +1,849 @@
|
|||||||
|
/* ========== 变量与基础 ========== */
|
||||||
|
:root {
|
||||||
|
--sidebar-bg: #0f172a;
|
||||||
|
--sidebar-text: #e2e8f0;
|
||||||
|
--sidebar-text-muted: #94a3b8;
|
||||||
|
--sidebar-accent: #38bdf8;
|
||||||
|
--sidebar-hover: rgba(56, 189, 248, 0.12);
|
||||||
|
--main-bg: #f1f5f9;
|
||||||
|
--card-bg: #ffffff;
|
||||||
|
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||||
|
--card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
--border: #e2e8f0;
|
||||||
|
--border-focus: #38bdf8;
|
||||||
|
--text: #1e293b;
|
||||||
|
--text-muted: #64748b;
|
||||||
|
--primary: #0ea5e9;
|
||||||
|
--primary-hover: #0284c7;
|
||||||
|
--primary-light: rgba(14, 165, 233, 0.1);
|
||||||
|
--success: #10b981;
|
||||||
|
--danger: #ef4444;
|
||||||
|
--radius: 10px;
|
||||||
|
--radius-sm: 6px;
|
||||||
|
--font-head: "Outfit", "Noto Sans SC", sans-serif;
|
||||||
|
--font-body: "Noto Sans SC", "Outfit", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--main-bg);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 页面1：登录页 ========== */
|
||||||
|
.view-login {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem;
|
||||||
|
background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #334155 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-login.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 2rem 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand .brand-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--primary);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
font-family: var(--font-head);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
color: var(--text);
|
||||||
|
margin: 0 0 0.35rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-desc {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form .form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form .form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text);
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form .input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.6rem 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-error {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--danger);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background: rgba(239, 68, 68, 0.08);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-login-submit {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.65rem 1rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 布局 ========== */
|
||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 侧栏 ========== */
|
||||||
|
.sidebar {
|
||||||
|
width: 240px;
|
||||||
|
min-width: 240px;
|
||||||
|
background: var(--sidebar-bg);
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0 1.25rem 1.5rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--sidebar-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-text {
|
||||||
|
font-family: var(--font-head);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.65rem 1.25rem;
|
||||||
|
color: var(--sidebar-text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.15s, background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
background: var(--sidebar-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active {
|
||||||
|
color: var(--sidebar-accent);
|
||||||
|
background: var(--sidebar-hover);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-footer {
|
||||||
|
padding: 1rem 1.25rem 0;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-switch {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--sidebar-text-muted);
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0.6rem;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--sidebar-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-logout {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--sidebar-text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-logout:hover {
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
border-color: rgba(255, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 主内容区 ========== */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 1.5rem 2rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 视图切换 ========== */
|
||||||
|
.view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 页面头部 ========== */
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-family: var(--font-head);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
color: var(--text);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title.detail-title {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-back {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-back:hover {
|
||||||
|
background: #f8fafc;
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 按钮 ========== */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background: var(--primary-hover);
|
||||||
|
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
background: var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-new-project .btn-icon {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 工具栏（搜索与筛选） ========== */
|
||||||
|
.toolbar {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row .input-select {
|
||||||
|
width: 120px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row .input-search {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-search {
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-search:hover {
|
||||||
|
background: var(--primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group label {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-filter {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 输入框 ========== */
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-family: inherit;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--card-bg);
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::placeholder {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--border-focus);
|
||||||
|
box-shadow: 0 0 0 3px var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-select,
|
||||||
|
.input-filter {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 0.6rem center;
|
||||||
|
padding-right: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area {
|
||||||
|
min-height: 60px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 表格 ========== */
|
||||||
|
.table-wrap {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-loading,
|
||||||
|
.table-empty {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
background: var(--card-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-empty .empty-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table thead {
|
||||||
|
background: #f8fafc;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-bottom: 1px solid #f1f5f9;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tbody tr {
|
||||||
|
transition: background 0.12s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tbody tr:hover {
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tbody tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table .cell-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table .link-action {
|
||||||
|
color: var(--primary);
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table .link-action:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 分页 ========== */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-info {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-btns {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .btn-sm:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 详情页 Tabs ========== */
|
||||||
|
.detail-loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 240px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-content {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 500;
|
||||||
|
border-bottom-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-panels {
|
||||||
|
padding: 1.5rem 1.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-panel {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-panel.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 表单网格 ========== */
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group-full {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 抽屉（操作日志） ========== */
|
||||||
|
.drawer-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 23, 42, 0.4);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 0.2s, visibility 0.2s;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-overlay.visible {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 400px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--card-bg);
|
||||||
|
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: transform 0.25s ease;
|
||||||
|
z-index: 101;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer.visible {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title {
|
||||||
|
font-family: var(--font-head);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-close {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s, color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-close:hover {
|
||||||
|
background: #f1f5f9;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-loading,
|
||||||
|
.drawer-empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
min-height: 160px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-empty .empty-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
border-bottom: 1px solid #f1f5f9;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item .log-meta {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item .log-desc {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Toast ========== */
|
||||||
|
.toast {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(100px);
|
||||||
|
padding: 0.65rem 1.25rem;
|
||||||
|
background: var(--text);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: transform 0.25s ease, opacity 0.25s, visibility 0.25s;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.visible {
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.success {
|
||||||
|
background: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.error {
|
||||||
|
background: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 响应式 ========== */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.form-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 64px;
|
||||||
|
min-width: 64px;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-text,
|
||||||
|
.nav-item span:not(.nav-icon),
|
||||||
|
.role-label,
|
||||||
|
.role-select,
|
||||||
|
.btn-logout {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-brand {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-footer {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
+268
@@ -0,0 +1,268 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
项目管理系统 · 静态页面（前端参考）
|
||||||
|
依据：docs/产品文档.md、docs/交互文档.md
|
||||||
|
页面：1 登录页 | 2 项目列表页 | 3 项目详情/编辑页 | 4 操作日志（抽屉）
|
||||||
|
详见 ui/README.md
|
||||||
|
-->
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>项目管理系统</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 页面1：登录页（交互文档 § 页面1） -->
|
||||||
|
<section id="view-login" class="view-login">
|
||||||
|
<div class="login-card">
|
||||||
|
<div class="login-brand">
|
||||||
|
<span class="brand-icon">◇</span>
|
||||||
|
<h1 class="login-title">项目管理系统</h1>
|
||||||
|
<p class="login-desc">多部门协作维护项目信息</p>
|
||||||
|
</div>
|
||||||
|
<form id="loginForm" class="login-form" novalidate>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="loginAccount">账号</label>
|
||||||
|
<input type="text" id="loginAccount" class="input" name="account" placeholder="请输入账号" required autocomplete="username" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="loginPassword">密码</label>
|
||||||
|
<input type="password" id="loginPassword" class="input" name="password" placeholder="请输入密码" required autocomplete="current-password" />
|
||||||
|
</div>
|
||||||
|
<div id="loginError" class="login-error" role="alert" style="display: none;"></div>
|
||||||
|
<button type="submit" class="btn btn-primary btn-login-submit" id="btnLoginSubmit">登录</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页面2～4：登录后主应用（侧栏 + 列表/详情 + 操作日志抽屉） -->
|
||||||
|
<div class="app" id="appMain" style="display: none;">
|
||||||
|
<!-- 侧栏 -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="sidebar-brand">
|
||||||
|
<span class="brand-icon">◇</span>
|
||||||
|
<span class="brand-text">项目管理系统</span>
|
||||||
|
</div>
|
||||||
|
<nav class="sidebar-nav">
|
||||||
|
<a href="#" class="nav-item active" id="navList" data-nav="list">
|
||||||
|
<span class="nav-icon">▦</span>
|
||||||
|
<span>项目列表</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="sidebar-footer">
|
||||||
|
<div class="role-switch">
|
||||||
|
<span class="role-label">当前角色</span>
|
||||||
|
<select id="roleSelect" class="role-select" title="切换角色预览权限">
|
||||||
|
<option value="market">市场部</option>
|
||||||
|
<option value="admin">管理员</option>
|
||||||
|
<option value="engineer">工程部</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-logout">退出</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 主内容 -->
|
||||||
|
<main class="main">
|
||||||
|
<!-- 列表视图 -->
|
||||||
|
<section id="view-list" class="view view-list active">
|
||||||
|
<!-- 页面2：项目列表页（交互文档 § 页面2） -->
|
||||||
|
<header class="page-header">
|
||||||
|
<h1 class="page-title">项目列表</h1>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button type="button" class="btn btn-primary btn-new-project" id="btnNewProject" style="display: none;">
|
||||||
|
<span class="btn-icon">+</span> 新建项目
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="search-row">
|
||||||
|
<select id="searchType" class="input input-select">
|
||||||
|
<option value="name">项目名称</option>
|
||||||
|
<option value="code">项目编号</option>
|
||||||
|
</select>
|
||||||
|
<input type="text" id="searchInput" class="input input-search" placeholder="输入关键词搜索" />
|
||||||
|
<button type="button" class="btn btn-search" id="btnSearch">搜索</button>
|
||||||
|
</div>
|
||||||
|
<div class="filter-row">
|
||||||
|
<div class="filter-group">
|
||||||
|
<label>项目进度</label>
|
||||||
|
<select id="filterProgress" class="input input-filter">
|
||||||
|
<option value="">全部</option>
|
||||||
|
<option value="planning">筹备中</option>
|
||||||
|
<option value="ongoing">进行中</option>
|
||||||
|
<option value="completed">已竣工</option>
|
||||||
|
<option value="settled">已结算</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<label>项目费用</label>
|
||||||
|
<select id="filterCost" class="input input-filter">
|
||||||
|
<option value="">全部</option>
|
||||||
|
<option value="normal">正常</option>
|
||||||
|
<option value="over">超支</option>
|
||||||
|
<option value="under">节余</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-wrap">
|
||||||
|
<div class="table-loading" id="listLoading">加载中…</div>
|
||||||
|
<div class="table-empty" id="listEmpty" style="display: none;">
|
||||||
|
<span class="empty-icon">📋</span>
|
||||||
|
<p>暂无项目数据</p>
|
||||||
|
</div>
|
||||||
|
<table class="table" id="projectTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目名称</th>
|
||||||
|
<th>合同编号</th>
|
||||||
|
<th>进度</th>
|
||||||
|
<th>费用状态</th>
|
||||||
|
<th>业主单位</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="projectTableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="pagination" id="pagination">
|
||||||
|
<span class="pagination-info">共 0 条</span>
|
||||||
|
<div class="pagination-btns">
|
||||||
|
<button type="button" class="btn btn-sm" disabled>上一页</button>
|
||||||
|
<button type="button" class="btn btn-sm">下一页</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页面3：项目详情/编辑页（交互文档 § 页面3） -->
|
||||||
|
<section id="view-detail" class="view view-detail">
|
||||||
|
<header class="page-header">
|
||||||
|
<button type="button" class="btn-back" id="btnBack">← 返回列表</button>
|
||||||
|
<h1 class="page-title detail-title" id="detailTitle">项目详情</h1>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button type="button" class="btn btn-ghost" id="btnViewLog">查看操作日志</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="btnSave">
|
||||||
|
<span class="btn-text">保存</span>
|
||||||
|
<span class="btn-loading" style="display: none;">保存中…</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="detail-loading" id="detailLoading">加载中…</div>
|
||||||
|
<div class="detail-content" id="detailContent" style="display: none;">
|
||||||
|
<div class="tabs">
|
||||||
|
<button type="button" class="tab active" data-tab="contract">合同信息</button>
|
||||||
|
<button type="button" class="tab" data-tab="cost">成本控制</button>
|
||||||
|
<button type="button" class="tab" data-tab="receivable">应收款</button>
|
||||||
|
<button type="button" class="tab" data-tab="payable">应付款</button>
|
||||||
|
<button type="button" class="tab" data-tab="other">其他</button>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panels">
|
||||||
|
<div class="tab-panel active" id="panel-contract">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group"><label>项目名称</label><input type="text" class="input" name="projectName" /></div>
|
||||||
|
<div class="form-group"><label>合同编号</label><input type="text" class="input" name="contractCode" /></div>
|
||||||
|
<div class="form-group"><label>供电局项目合同编号</label><input type="text" class="input" name="powerContractCode" /></div>
|
||||||
|
<div class="form-group"><label>子项个数</label><input type="number" class="input" name="subCount" /></div>
|
||||||
|
<div class="form-group"><label>子项编码</label><input type="text" class="input" name="subCode" /></div>
|
||||||
|
<div class="form-group"><label>项目总投资（万元）</label><input type="text" class="input" name="totalInvest" /></div>
|
||||||
|
<div class="form-group"><label>中标合同金额（万元）</label><input type="text" class="input" name="bidAmount" /></div>
|
||||||
|
<div class="form-group"><label>质保金比例</label><input type="text" class="input" name="warrantyRatio" /></div>
|
||||||
|
<div class="form-group"><label>结算金额（万元）</label><input type="text" class="input" name="settlementAmount" /></div>
|
||||||
|
<div class="form-group"><label>工程电压等级</label><input type="text" class="input" name="voltageLevel" /></div>
|
||||||
|
<div class="form-group"><label>工程类别</label><input type="text" class="input" name="projectType" /></div>
|
||||||
|
<div class="form-group"><label>业主单位</label><input type="text" class="input" name="ownerUnit" /></div>
|
||||||
|
<div class="form-group"><label>业主联系人及电话</label><input type="text" class="input" name="ownerContact" /></div>
|
||||||
|
<div class="form-group"><label>中标形式</label><input type="text" class="input" name="bidForm" /></div>
|
||||||
|
<div class="form-group"><label>签订日期</label><input type="date" class="input" name="signDate" /></div>
|
||||||
|
<div class="form-group"><label>开工日期</label><input type="date" class="input" name="startDate" /></div>
|
||||||
|
<div class="form-group"><label>计划竣工日期</label><input type="date" class="input" name="planEndDate" /></div>
|
||||||
|
<div class="form-group"><label>实际竣工日期</label><input type="date" class="input" name="actualEndDate" /></div>
|
||||||
|
<div class="form-group"><label>所属项目部</label><input type="text" class="input" name="department" /></div>
|
||||||
|
<div class="form-group"><label>项目负责人及电话</label><input type="text" class="input" name="managerContact" /></div>
|
||||||
|
<div class="form-group form-group-full"><label>工程款拨付方式</label><input type="text" class="input" name="paymentMethod" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-cost">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group"><label>总体成本</label><input type="text" class="input" name="totalCost" /></div>
|
||||||
|
<div class="form-group"><label>是否调整</label><select class="input" name="adjusted"><option value="">请选择</option><option value="yes">是</option><option value="no">否</option></select></div>
|
||||||
|
<div class="form-group"><label>农民工工资（按进度计划）</label><input type="text" class="input" name="wagePlan" /></div>
|
||||||
|
<div class="form-group"><label>农民工工资（实付）</label><input type="text" class="input" name="wageActual" /></div>
|
||||||
|
<div class="form-group"><label>乙供材料费（控制）</label><input type="text" class="input" name="materialControl" /></div>
|
||||||
|
<div class="form-group"><label>应付材料费（按收款比例）</label><input type="text" class="input" name="materialPayable" /></div>
|
||||||
|
<div class="form-group"><label>实际发生材料费</label><input type="text" class="input" name="materialActual" /></div>
|
||||||
|
<div class="form-group"><label>实际支付材料费</label><input type="text" class="input" name="materialPaid" /></div>
|
||||||
|
<div class="form-group"><label>其他费用（控制）</label><input type="text" class="input" name="otherControl" /></div>
|
||||||
|
<div class="form-group"><label>应付其他费</label><input type="text" class="input" name="otherPayable" /></div>
|
||||||
|
<div class="form-group"><label>实际其他费用</label><input type="text" class="input" name="otherActual" /></div>
|
||||||
|
<div class="form-group"><label>税金</label><input type="text" class="input" name="tax" /></div>
|
||||||
|
<div class="form-group"><label>利润（万元）</label><input type="text" class="input" name="profit" /></div>
|
||||||
|
<div class="form-group"><label>实际利润（万元）</label><input type="text" class="input" name="profitActual" /></div>
|
||||||
|
<div class="form-group"><label>成本结算金额（万元）</label><input type="text" class="input" name="costSettlement" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-receivable">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group"><label>应收款（完成进度款）</label><input type="text" class="input" name="receivable" /></div>
|
||||||
|
<div class="form-group"><label>开票金额（万元）</label><input type="text" class="input" name="invoiceAmount" /></div>
|
||||||
|
<div class="form-group"><label>实际收款金额（万元）</label><input type="text" class="input" name="receivedAmount" /></div>
|
||||||
|
<div class="form-group"><label>实际收款完成率</label><input type="text" class="input" name="receivedRate" placeholder="%" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-payable">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group"><label>应付款金额（万元）</label><input type="text" class="input" name="payableAmount" /></div>
|
||||||
|
<div class="form-group"><label>实际付款金额（万元）</label><input type="text" class="input" name="paidAmount" /></div>
|
||||||
|
<div class="form-group"><label>未收款（万元）</label><input type="text" class="input" name="unreceived" /></div>
|
||||||
|
<div class="form-group"><label>实际付款完成率</label><input type="text" class="input" name="paidRate" placeholder="%" /></div>
|
||||||
|
<div class="form-group"><label>民工工资清欠金额（万元）</label><input type="text" class="input" name="wageArrears" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-panel" id="panel-other">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group"><label>结算后成本测算金额</label><input type="text" class="input" name="afterSettlementCost" /></div>
|
||||||
|
<div class="form-group"><label>结算人工费</label><input type="text" class="input" name="settlementLabor" /></div>
|
||||||
|
<div class="form-group"><label>结算材料费</label><input type="text" class="input" name="settlementMaterial" /></div>
|
||||||
|
<div class="form-group"><label>结算其他费</label><input type="text" class="input" name="settlementOther" /></div>
|
||||||
|
<div class="form-group"><label>到期应结算项目个数</label><input type="number" class="input" name="dueSettlementCount" /></div>
|
||||||
|
<div class="form-group"><label>到期未完成结算个数</label><input type="number" class="input" name="dueUnfinishedCount" /></div>
|
||||||
|
<div class="form-group form-group-full"><label>存在的问题</label><textarea class="input input-area" name="problems" rows="2"></textarea></div>
|
||||||
|
<div class="form-group form-group-full"><label>建议措施</label><textarea class="input input-area" name="suggestions" rows="2"></textarea></div>
|
||||||
|
<div class="form-group"><label>累计进度</label><input type="text" class="input" name="totalProgress" placeholder="%" /></div>
|
||||||
|
<div class="form-group form-group-full"><label>备注</label><textarea class="input input-area" name="remark" rows="2"></textarea></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 页面4：操作日志（抽屉形式，交互文档 § 页面4） -->
|
||||||
|
<div class="drawer-overlay" id="logOverlay" aria-hidden="true"></div>
|
||||||
|
<div class="drawer" id="logDrawer">
|
||||||
|
<div class="drawer-header">
|
||||||
|
<h2 class="drawer-title">操作日志</h2>
|
||||||
|
<button type="button" class="drawer-close" id="logDrawerClose">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="drawer-body">
|
||||||
|
<div class="drawer-loading" id="logLoading">加载中…</div>
|
||||||
|
<div class="drawer-empty" id="logEmpty" style="display: none;">
|
||||||
|
<span class="empty-icon">📜</span>
|
||||||
|
<p>暂无操作记录</p>
|
||||||
|
</div>
|
||||||
|
<ul class="log-list" id="logList"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Toast -->
|
||||||
|
<div id="toast" class="toast" role="alert" aria-live="polite"></div>
|
||||||
|
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+410
@@ -0,0 +1,410 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// ---------- 状态 ----------
|
||||||
|
var isLoggedIn = false; // 页面1 登录态，静态演示默认未登录
|
||||||
|
var currentView = 'list'; // list | detail
|
||||||
|
var currentRole = 'market'; // market | admin | engineer
|
||||||
|
var currentProjectId = null; // 当前详情/编辑的项目 ID，null 表示新建
|
||||||
|
var projects = [];
|
||||||
|
var listFiltered = [];
|
||||||
|
|
||||||
|
// ---------- Mock 数据 ----------
|
||||||
|
function getMockProjects() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: '城东 110kV 输变电工程',
|
||||||
|
contractCode: 'HT-2024-001',
|
||||||
|
progress: '进行中',
|
||||||
|
costStatus: '正常',
|
||||||
|
ownerUnit: '市供电公司',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
name: '高新区配电改造项目',
|
||||||
|
contractCode: 'HT-2024-002',
|
||||||
|
progress: '已竣工',
|
||||||
|
costStatus: '正常',
|
||||||
|
ownerUnit: '高新区管委会',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: '西区 35kV 线路迁改',
|
||||||
|
contractCode: 'HT-2024-003',
|
||||||
|
progress: '筹备中',
|
||||||
|
costStatus: '节余',
|
||||||
|
ownerUnit: '西区建设局',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMockLogs(projectId) {
|
||||||
|
return [
|
||||||
|
{ operator: '张三', time: '2025-01-28 14:30', summary: '修改合同信息' },
|
||||||
|
{ operator: '李四', time: '2025-01-27 10:00', summary: '修改成本控制' },
|
||||||
|
{ operator: '王五', time: '2025-01-26 16:45', summary: '修改应收款' },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- DOM ----------
|
||||||
|
var roleSelect = document.getElementById('roleSelect');
|
||||||
|
var btnNewProject = document.getElementById('btnNewProject');
|
||||||
|
var viewList = document.getElementById('view-list');
|
||||||
|
var viewDetail = document.getElementById('view-detail');
|
||||||
|
var searchType = document.getElementById('searchType');
|
||||||
|
var searchInput = document.getElementById('searchInput');
|
||||||
|
var btnSearch = document.getElementById('btnSearch');
|
||||||
|
var filterProgress = document.getElementById('filterProgress');
|
||||||
|
var filterCost = document.getElementById('filterCost');
|
||||||
|
var listLoading = document.getElementById('listLoading');
|
||||||
|
var listEmpty = document.getElementById('listEmpty');
|
||||||
|
var projectTable = document.getElementById('projectTable');
|
||||||
|
var projectTableBody = document.getElementById('projectTableBody');
|
||||||
|
var pagination = document.getElementById('pagination');
|
||||||
|
var btnBack = document.getElementById('btnBack');
|
||||||
|
var detailTitle = document.getElementById('detailTitle');
|
||||||
|
var detailLoading = document.getElementById('detailLoading');
|
||||||
|
var detailContent = document.getElementById('detailContent');
|
||||||
|
var btnViewLog = document.getElementById('btnViewLog');
|
||||||
|
var btnSave = document.getElementById('btnSave');
|
||||||
|
var logOverlay = document.getElementById('logOverlay');
|
||||||
|
var logDrawer = document.getElementById('logDrawer');
|
||||||
|
var logDrawerClose = document.getElementById('logDrawerClose');
|
||||||
|
var logLoading = document.getElementById('logLoading');
|
||||||
|
var logEmpty = document.getElementById('logEmpty');
|
||||||
|
var logList = document.getElementById('logList');
|
||||||
|
var toast = document.getElementById('toast');
|
||||||
|
var navList = document.getElementById('navList');
|
||||||
|
var viewLogin = document.getElementById('view-login');
|
||||||
|
var appMain = document.getElementById('appMain');
|
||||||
|
var loginForm = document.getElementById('loginForm');
|
||||||
|
var loginError = document.getElementById('loginError');
|
||||||
|
var btnLoginSubmit = document.getElementById('btnLoginSubmit');
|
||||||
|
var btnLogout = document.querySelector('.btn-logout');
|
||||||
|
|
||||||
|
// ---------- 页面1：登录 / 退出 ----------
|
||||||
|
function showLogin() {
|
||||||
|
isLoggedIn = false;
|
||||||
|
if (viewLogin) viewLogin.classList.remove('hidden');
|
||||||
|
if (appMain) appMain.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function showApp() {
|
||||||
|
isLoggedIn = true;
|
||||||
|
if (viewLogin) viewLogin.classList.add('hidden');
|
||||||
|
if (appMain) appMain.style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loginForm) {
|
||||||
|
loginForm.addEventListener('submit', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var account = document.getElementById('loginAccount');
|
||||||
|
var password = document.getElementById('loginPassword');
|
||||||
|
if (!account || !password) return;
|
||||||
|
if (loginError) loginError.style.display = 'none';
|
||||||
|
if (btnLoginSubmit) btnLoginSubmit.disabled = true;
|
||||||
|
|
||||||
|
// 静态演示：任意非空账号密码视为成功；可改为模拟失败（如 password === 'fail'）
|
||||||
|
setTimeout(function () {
|
||||||
|
if (btnLoginSubmit) btnLoginSubmit.disabled = false;
|
||||||
|
if (password.value === 'fail') {
|
||||||
|
if (loginError) {
|
||||||
|
loginError.textContent = '账号或密码错误，请重试';
|
||||||
|
loginError.style.display = 'block';
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showApp();
|
||||||
|
renderList();
|
||||||
|
}, 400);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (btnLogout) {
|
||||||
|
btnLogout.addEventListener('click', function () {
|
||||||
|
showLogin();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 权限：是否市场部 ----------
|
||||||
|
function isMarketRole() {
|
||||||
|
return currentRole === 'market';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRoleUI() {
|
||||||
|
if (btnNewProject) btnNewProject.style.display = isMarketRole() ? '' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (roleSelect) {
|
||||||
|
roleSelect.addEventListener('change', function () {
|
||||||
|
currentRole = roleSelect.value;
|
||||||
|
updateRoleUI();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 视图切换 ----------
|
||||||
|
function showList() {
|
||||||
|
currentView = 'list';
|
||||||
|
if (viewList) viewList.classList.add('active');
|
||||||
|
if (viewDetail) viewDetail.classList.remove('active');
|
||||||
|
document.querySelectorAll('.nav-item').forEach(function (n) { n.classList.remove('active'); });
|
||||||
|
if (navList) navList.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDetail(projectId) {
|
||||||
|
currentView = 'detail';
|
||||||
|
currentProjectId = projectId;
|
||||||
|
if (viewList) viewList.classList.remove('active');
|
||||||
|
if (viewDetail) viewDetail.classList.add('active');
|
||||||
|
document.querySelectorAll('.nav-item').forEach(function (n) { n.classList.remove('active'); });
|
||||||
|
|
||||||
|
if (detailTitle) detailTitle.textContent = projectId ? '项目详情' : '新建项目';
|
||||||
|
if (detailLoading) detailLoading.style.display = 'block';
|
||||||
|
if (detailContent) detailContent.style.display = 'none';
|
||||||
|
|
||||||
|
if (projectId) {
|
||||||
|
// 模拟加载详情
|
||||||
|
setTimeout(function () {
|
||||||
|
if (detailLoading) detailLoading.style.display = 'none';
|
||||||
|
if (detailContent) detailContent.style.display = 'block';
|
||||||
|
fillDetailForm(projectId);
|
||||||
|
}, 400);
|
||||||
|
} else {
|
||||||
|
if (detailLoading) detailLoading.style.display = 'none';
|
||||||
|
if (detailContent) detailContent.style.display = 'block';
|
||||||
|
clearDetailForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fillDetailForm(projectId) {
|
||||||
|
var p = projects.find(function (x) { return x.id === projectId; });
|
||||||
|
if (!p) return;
|
||||||
|
var nameInput = detailContent.querySelector('input[name="projectName"]');
|
||||||
|
if (nameInput) nameInput.value = p.name || '';
|
||||||
|
var codeInput = detailContent.querySelector('input[name="contractCode"]');
|
||||||
|
if (codeInput) codeInput.value = p.contractCode || '';
|
||||||
|
var ownerInput = detailContent.querySelector('input[name="ownerUnit"]');
|
||||||
|
if (ownerInput) ownerInput.value = p.ownerUnit || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearDetailForm() {
|
||||||
|
var inputs = detailContent ? detailContent.querySelectorAll('input, select, textarea') : [];
|
||||||
|
inputs.forEach(function (el) {
|
||||||
|
if (el.type === 'checkbox' || el.type === 'radio') el.checked = false;
|
||||||
|
else el.value = '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- Tab 切换 ----------
|
||||||
|
function bindTabs() {
|
||||||
|
var tabs = document.querySelectorAll('.tab');
|
||||||
|
var panels = document.querySelectorAll('.tab-panel');
|
||||||
|
tabs.forEach(function (tab) {
|
||||||
|
tab.addEventListener('click', function () {
|
||||||
|
var t = tab.getAttribute('data-tab');
|
||||||
|
tabs.forEach(function (x) { x.classList.remove('active'); });
|
||||||
|
panels.forEach(function (p) {
|
||||||
|
var pid = p.id;
|
||||||
|
if (pid === 'panel-' + t) p.classList.add('active');
|
||||||
|
else p.classList.remove('active');
|
||||||
|
});
|
||||||
|
tab.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 列表：渲染 ----------
|
||||||
|
function filterList() {
|
||||||
|
var type = searchType && searchType.value ? searchType.value : 'name';
|
||||||
|
var keyword = (searchInput && searchInput.value || '').trim().toLowerCase();
|
||||||
|
var progressVal = filterProgress && filterProgress.value ? filterProgress.value : '';
|
||||||
|
var costVal = filterCost && filterCost.value ? filterCost.value : '';
|
||||||
|
|
||||||
|
listFiltered = projects.filter(function (p) {
|
||||||
|
if (keyword) {
|
||||||
|
var name = (p.name || '').toLowerCase();
|
||||||
|
var code = (p.contractCode || '').toLowerCase();
|
||||||
|
if (type === 'name' && name.indexOf(keyword) === -1) return false;
|
||||||
|
if (type === 'code' && code.indexOf(keyword) === -1) return false;
|
||||||
|
}
|
||||||
|
if (progressVal) {
|
||||||
|
if ((p.progressKey || '').toLowerCase() !== progressVal.toLowerCase()) return false;
|
||||||
|
}
|
||||||
|
if (costVal) {
|
||||||
|
if ((p.costKey || '').toLowerCase() !== costVal.toLowerCase()) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapProgressToKey(p) {
|
||||||
|
var map = { '筹备中': 'planning', '进行中': 'ongoing', '已竣工': 'completed', '已结算': 'settled' };
|
||||||
|
p.progressKey = map[p.progress] || p.progress;
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapCostToKey(p) {
|
||||||
|
var map = { '正常': 'normal', '超支': 'over', '节余': 'under' };
|
||||||
|
p.costKey = map[p.costStatus] || p.costStatus;
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderList() {
|
||||||
|
if (listLoading) listLoading.style.display = 'block';
|
||||||
|
if (listEmpty) listEmpty.style.display = 'none';
|
||||||
|
if (projectTable) projectTable.style.visibility = 'hidden';
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
filterList();
|
||||||
|
if (listLoading) listLoading.style.display = 'none';
|
||||||
|
|
||||||
|
if (listFiltered.length === 0) {
|
||||||
|
if (listEmpty) listEmpty.style.display = 'flex';
|
||||||
|
if (projectTable) projectTable.style.visibility = 'hidden';
|
||||||
|
} else {
|
||||||
|
if (listEmpty) listEmpty.style.display = 'none';
|
||||||
|
if (projectTable) projectTable.style.visibility = 'visible';
|
||||||
|
var html = listFiltered.map(function (p) {
|
||||||
|
return (
|
||||||
|
'<tr>' +
|
||||||
|
'<td>' + (p.name || '—') + '</td>' +
|
||||||
|
'<td>' + (p.contractCode || '—') + '</td>' +
|
||||||
|
'<td>' + (p.progress || '—') + '</td>' +
|
||||||
|
'<td>' + (p.costStatus || '—') + '</td>' +
|
||||||
|
'<td>' + (p.ownerUnit || '—') + '</td>' +
|
||||||
|
'<td class="cell-actions">' +
|
||||||
|
'<button type="button" class="link-action" data-id="' + p.id + '">查看</button> ' +
|
||||||
|
'<button type="button" class="link-action" data-id="' + p.id + '">编辑</button>' +
|
||||||
|
'</td>' +
|
||||||
|
'</tr>'
|
||||||
|
);
|
||||||
|
}).join('');
|
||||||
|
if (projectTableBody) projectTableBody.innerHTML = html;
|
||||||
|
|
||||||
|
projectTableBody.querySelectorAll('.link-action').forEach(function (btn) {
|
||||||
|
btn.addEventListener('click', function () {
|
||||||
|
var id = btn.getAttribute('data-id');
|
||||||
|
showDetail(id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var totalEl = pagination && pagination.querySelector('.pagination-info');
|
||||||
|
if (totalEl) totalEl.textContent = '共 ' + listFiltered.length + ' 条';
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 搜索与筛选 ----------
|
||||||
|
if (btnSearch) btnSearch.addEventListener('click', renderList);
|
||||||
|
if (searchInput) searchInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') renderList(); });
|
||||||
|
if (filterProgress) filterProgress.addEventListener('change', renderList);
|
||||||
|
if (filterCost) filterCost.addEventListener('change', renderList);
|
||||||
|
|
||||||
|
// ---------- 新建项目 ----------
|
||||||
|
if (btnNewProject) {
|
||||||
|
btnNewProject.addEventListener('click', function () {
|
||||||
|
showDetail(null);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 返回列表 ----------
|
||||||
|
if (btnBack) {
|
||||||
|
btnBack.addEventListener('click', function () {
|
||||||
|
showList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (navList) {
|
||||||
|
navList.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
showList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 保存 ----------
|
||||||
|
if (btnSave) {
|
||||||
|
btnSave.addEventListener('click', function () {
|
||||||
|
var textSpan = btnSave.querySelector('.btn-text');
|
||||||
|
var loadingSpan = btnSave.querySelector('.btn-loading');
|
||||||
|
if (loadingSpan && loadingSpan.style.display === 'inline') return;
|
||||||
|
|
||||||
|
if (textSpan) textSpan.style.display = 'none';
|
||||||
|
if (loadingSpan) loadingSpan.style.display = 'inline';
|
||||||
|
btnSave.disabled = true;
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if (textSpan) textSpan.style.display = 'inline';
|
||||||
|
if (loadingSpan) loadingSpan.style.display = 'none';
|
||||||
|
btnSave.disabled = false;
|
||||||
|
showToast('保存成功', 'success');
|
||||||
|
}, 800);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 操作日志抽屉 ----------
|
||||||
|
function openLogDrawer() {
|
||||||
|
if (logOverlay) logOverlay.classList.add('visible');
|
||||||
|
if (logDrawer) logDrawer.classList.add('visible');
|
||||||
|
if (logOverlay) logOverlay.setAttribute('aria-hidden', 'false');
|
||||||
|
|
||||||
|
if (logLoading) logLoading.style.display = 'block';
|
||||||
|
if (logEmpty) logEmpty.style.display = 'none';
|
||||||
|
if (logList) logList.innerHTML = '';
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if (logLoading) logLoading.style.display = 'none';
|
||||||
|
var logs = getMockLogs(currentProjectId);
|
||||||
|
if (logs.length === 0) {
|
||||||
|
if (logEmpty) logEmpty.style.display = 'flex';
|
||||||
|
} else {
|
||||||
|
logList.innerHTML = logs.map(function (l) {
|
||||||
|
return (
|
||||||
|
'<li class="log-item">' +
|
||||||
|
'<div class="log-meta">' + l.operator + ' · ' + l.time + '</div>' +
|
||||||
|
'<div class="log-desc">' + l.summary + '</div>' +
|
||||||
|
'</li>'
|
||||||
|
);
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeLogDrawer() {
|
||||||
|
if (logOverlay) logOverlay.classList.remove('visible');
|
||||||
|
if (logDrawer) logDrawer.classList.remove('visible');
|
||||||
|
if (logOverlay) logOverlay.setAttribute('aria-hidden', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (btnViewLog) btnViewLog.addEventListener('click', openLogDrawer);
|
||||||
|
if (logDrawerClose) logDrawerClose.addEventListener('click', closeLogDrawer);
|
||||||
|
if (logOverlay) logOverlay.addEventListener('click', closeLogDrawer);
|
||||||
|
|
||||||
|
// ---------- Toast ----------
|
||||||
|
function showToast(message, type) {
|
||||||
|
if (!toast) return;
|
||||||
|
toast.textContent = message;
|
||||||
|
toast.className = 'toast visible' + (type ? ' ' + type : '');
|
||||||
|
clearTimeout(toast._tid);
|
||||||
|
toast._tid = setTimeout(function () {
|
||||||
|
toast.classList.remove('visible');
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 初始化 ----------
|
||||||
|
projects = getMockProjects().map(function (p) {
|
||||||
|
mapProgressToKey(p);
|
||||||
|
mapCostToKey(p);
|
||||||
|
return p;
|
||||||
|
});
|
||||||
|
|
||||||
|
bindTabs();
|
||||||
|
updateRoleUI();
|
||||||
|
|
||||||
|
// 未登录时只显示登录页；已登录则显示主应用（可通过 hash 或 localStorage 模拟，此处默认显示登录页）
|
||||||
|
if (viewLogin && appMain) {
|
||||||
|
showLogin();
|
||||||
|
} else {
|
||||||
|
renderList();
|
||||||
|
}
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user