xsl/ocean_project_manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save code

Browse Source
This commit is contained in:
xsl
2026-01-25 15:05:03 +08:00
parent 29565e9dfe
commit 0895398138
23 changed files with 11859 additions and 966 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/desigen/frontend-pages-reference.md
+727
View File
@@ -0,0 +1,727 @@
# 海洋项目管理系统 - 前端页面设计参考
## 页面结构总览
```
┌─────────────────────────────────────────────────────────┐
│ Header (顶部导航) │
│ Logo | 用户信息 | 登出 深蓝色背景 │
├──────────┬──────────────────────────────────────────────┤
│ │ │
│ Sidebar │ Content (内容区) │
│ 侧边栏 │ 灰色背景 │
│ │ │
│ - 仪表盘 │ │
│ - 项目 │ 动态内容区域 │
│ - 用户 │ │
│ - 统计 │ │
│ │ │
└──────────┴──────────────────────────────────────────────┘
```
---
## 1. 登录页面 (Login Page)
### 布局说明
- **全屏居中布局**：登录框位于屏幕中央
- **背景渐变**：从深蓝到浅蓝的垂直渐变
- **最小高度**：100vh
### 视觉元素
```
┌─────────────────────────────────────────────┐
│ │
│ 海洋项目管理系统 │
│ LOGO │
│ │
│ ┌───────────────────────────────────┐ │
│ │ │ │
│ │ 用户名 │ │
│ │ [_____________________________] │ │
│ │ │ │
│ │ 密码 │ │
│ │ [_____________________________] │ │
│ │ □ 记住密码 │ │
│ │ │ │
│ │ [ 登 录 ] 蓝色按钮 │ │
│ │ │ │
│ └───────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
### 设计规范
- **背景**：线性渐变 `linear-gradient(135deg, #001529 0%, #1890ff 100%)`
- **登录框**：
- 宽度：400px
- 背景：白色 `#ffffff`
- 圆角：8px
- 阴影：`0 4px 12px rgba(0, 0, 0, 0.15)`
- 内边距：40px
- **标题**：
- 字体大小：24px
- 字重：600
- 颜色：`#1890ff`
- 下边距：32px
- **输入框**：
- 宽度：100%
- 高度：40px
- 边框：`1px solid #d9d9d9`
- 圆角：4px
- 内边距：8px 12px
- 字体大小：14px
- Focus时边框颜色：`#1890ff`
- Focus阴影：`0 0 0 2px rgba(24, 144, 255, 0.2)`
- **按钮**：
- 宽度：100%
- 高度：40px
- 背景：`#1890ff`
- 文字颜色：白色
- 字重：500
- 圆角：4px
- Hover背景：`#40a9ff`
- **复选框**：
- 颜色：`#1890ff`
- 字体大小：14px
- 文字颜色：`#666666`
### 交互行为
- 输入框获得焦点时，边框变为蓝色，显示蓝色光晕
- 点击登录按钮时，显示加载状态（旋转图标）
- 登录失败时，在输入框下方显示红色错误提示
- 登录成功后，自动跳转到仪表盘页面
---
## 2. 仪表盘页面 (Dashboard)
### 布局说明
- **顶部**：4个统计卡片横向排列
- **中部**：左侧图表区域，右侧最近项目列表
- **响应式**：平板2列，移动端1列
### 视觉元素
```
┌─────────────────────────────────────────────────────────┐
│ 统计概览 │
│ │
│ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │项目总数│ │进行中 │ │已完成 │ │总合同 │ │
│ │ 156 │ │ 68 │ │ 88 │ │12,450 │ │
│ └───────┘ └───────┘ └───────┘ └───────┘ │
│ │
│ ┌──────────────────────────┐ ┌────────────────────┐ │
│ │ 项目趋势图 │ │ 最近项目 │ │
│ │ │ │ │ │
│ │ [柱状图/折线图] │ │ 1. 某电力基建工程 │ │
│ │ │ │ 2026-01-25 │ │
│ │ │ │ 950万元 │ │
│ │ │ │ │ │
│ │ │ │ 2. 业扩工程项目 │ │
│ │ │ │ 2026-01-24 │ │
│ │ │ │ 500万元 │ │
│ └──────────────────────────┘ └────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
```
### 设计规范
#### 统计卡片
- **布局**：Grid 4列，间距24px
- **卡片**：
- 背景：白色 `#ffffff`
- 圆角：8px
- 内边距：24px
- 阴影：`0 2px 8px rgba(0, 0, 0, 0.08)`
- 高度：120px
- **标签**：
- 字体大小：14px
- 颜色：`#666666`
- 下边距：8px
- **数值**：
- 字体大小：32px
- 字重：600
- 颜色：`#1890ff`
- **图标**：
- 右侧浮动
- 大小：48px
- 颜色：`#1890ff`
- 透明度：0.3
#### 图表区域
- **容器**：
- 背景：白色
- 圆角：8px
- 内边距：24px
- 阴影：`0 2px 8px rgba(0, 0, 0, 0.08)`
- 高度：400px
- **标题**：
- 字体大小：16px
- 字重：600
- 颜色：`#333333`
- 下边距：20px
- **图表**：
- X轴：时间（月/年）
- Y轴：金额或数量
- 颜色：蓝色 `#1890ff`
- 柱子宽度：自动计算
- 支持悬停显示详细数据
#### 最近项目列表
- **容器**：
- 背景：白色
- 圆角：8px
- 内边距：24px
- 阴影：`0 2px 8px rgba(0, 0, 0, 0.08)`
- **标题**：
- 字体大小：16px
- 字重：600
- 颜色：`#333333`
- 下边距：16px
- **项目项**：
- 间距：12px
- 内边距：12px
- 边框：底部 `1px solid #f0f0f0`
- Hover背景：`#fafafa`
- Cursor：pointer
- **项目名称**：
- 字体大小：14px
- 字重：500
- 颜色：`#333333`
- **项目日期**：
- 字体大小：12px
- 颜色：`#999999`
- **项目金额**：
- 字体大小：14px
- 字重：600
- 颜色：`#1890ff`
### 交互行为
- 点击卡片可以跳转到对应功能的详细页面
- 图表支持鼠标悬停查看数据详情
- 点击最近项目可以跳转到项目详情页
- 统计数据每5秒自动刷新（可选）
---
## 3. 项目列表页面 (Project List)
### 布局说明
- **顶部**：工具栏（搜索、筛选、新建按钮）
- **中部**：项目列表表格
- **底部**：分页控件
### 视觉元素
```
┌─────────────────────────────────────────────────────────┐
│ [搜索框] [工程类别▼] [项目部▼] [新建项目] │
├─────────────────────────────────────────────────────────┤
│ 合同编号 │ 项目名称 │ 工程类别 │ 金额 │ 状态 │ 操作 │
├─────────────────────────────────────────────────────────┤
│ PRJ001 │ 某基建工程 │ 基建 │ 950 │ 进行中│[查看]│
│ PRJ002 │ 业扩工程 │ 业扩 │ 500 │ 完成 │[查看]│
│ PRJ003 │ 客户工程 │ 客户 │ 300 │ 进行中│[查看]│
├─────────────────────────────────────────────────────────┤
│ [< 1 2 3 4 5 >] │
└─────────────────────────────────────────────────────────┘
```
### 设计规范
#### 工具栏
- **高度**：56px
- **背景**：白色
- **阴影**：底部 `1px solid #e8e8e8`
- **布局**：Flexbox，两端对齐
- **左侧**：筛选器组
- **右侧**：操作按钮组
#### 搜索框
- **宽度**：240px
- **高度**：32px
- **边框**：`1px solid #d9d9d9`
- **圆角**：4px
- **Placeholder**："搜索项目名称、合同编号"
- **图标**：搜索图标（16px，灰色）
#### 下拉筛选器
- **宽度**：120px
- **高度**：32px
- **边框**：`1px solid #d9d9d9`
- **圆角**：4px
- **右侧下拉图标**：灰色箭头
#### 新建按钮
- **高度**：32px
- **内边距**：0 16px
- **背景**：`#1890ff`
- **文字**：白色
- **圆角**：4px
- **图标**：+ 号（左侧）
- **Hover**：`#40a9ff`
#### 表格
- **容器**：
- 背景：白色
- 圆角：8px
- 阴影：`0 2px 8px rgba(0, 0, 0, 0.08)`
- 溢出：auto
- **表头**：
- 背景：`#fafafa`
- 高度：48px
- 字体大小：14px
- 字重：600
- 颜色：`#333333`
- 边框：底部 `1px solid #e8e8e8`
- **表格行**：
- 高度：48px
- 字体大小：14px
- 颜色：`#666666`
- 边框：底部 `1px solid #e8e8e8`
- Hover背景：`#fafafa`
- **操作按钮**：
- 查看按钮：链接样式，蓝色 `#1890ff`
- 编辑按钮：链接样式，蓝色 `#1890ff`（有权限时显示）
- 删除按钮：链接样式，红色 `#ff4d4f`（有权限时显示）
- Cursor：pointer
#### 分页
- **容器**：
- 高度：48px
- 背景：白色
- 边框：顶部 `1px solid #e8e8e8`
- 布局：Flexbox，居中对齐
- **页码按钮**：
- 宽度：32px
- 高度：32px
- 边框：`1px solid #d9d9d9`
- 圆角：4px
- 文字：`#666666`
- Hover背景：`#e6f7ff`
- Hover文字：`#1890ff`
- 激活状态：背景 `#1890ff`，文字白色
- **上/下页按钮**：
- 文字：`<` 或 `>`
- 禁用状态：`#cccccc`
- Hover：`#1890ff`
### 交互行为
- 点击搜索框后，输入关键词实时筛选
- 下拉筛选器点击后显示选项列表，选择后自动筛选
- 点击"新建项目"按钮，打开新建项目模态框
- 点击"查看"按钮，跳转到项目详情页
- 点击"编辑"按钮，打开编辑项目模态框
- 点击"删除"按钮，显示确认对话框
- 点击页码，跳转到对应页
- 鼠标悬停在表格行上，背景变为浅灰色
- 长表格支持固定表头
---
## 4. 项目详情页面 (Project Detail)
### 布局说明
- **顶部**：面包屑导航 + 页面标题 + 操作按钮组
- **中部**：信息卡片分组展示
- **分组**：基本信息、项目时间、成本管理、合同财务、收款付款、结算信息、项目管理
### 视觉元素
```
┌─────────────────────────────────────────────────────────┐
│ 首页 > 项目管理 > 项目详情 │
│ 某电力基建工程项目 [编辑] [删除] │
├─────────────────────────────────────────────────────────┤
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ 基本信息 │ │ 项目时间 │ │
│ │ │ │ │ │
│ │ 合同编号: PRJ001│ │ 签订日期: ... │ │
│ │ 项目名称: ... │ │ 开工日期: ... │ │
│ │ 工程类别: 基建 │ │ 竣工日期: ... │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ 成本管理 │ │ 合同财务 │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ 收款付款 │ │ 结算信息 │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 项目管理 │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
```
### 设计规范
#### 面包屑导航
- **高度**：32px
- **背景**：`#f0f2f5`
- **文字大小**：14px
- **颜色**：`#666666`
- **分隔符**：`/`（灰色）
- **当前页**：`#333333`，字重500
#### 页面标题
- **字体大小**：24px
- **字重**：600
- **颜色**：`#333333`
- **下边距**：24px
#### 操作按钮组
- **布局**：Flexbox，右对齐
- **编辑按钮**：
- 背景：`#1890ff`
- 文字：白色
- 高度：32px
- 内边距：0 16px
- 圆角：4px
- **删除按钮**：
- 背景：`#ff4d4f`
- 文字：白色
- 高度：32px
- 内边距：0 16px
- 圆角：4px
#### 信息卡片
- **布局**：Grid 2列，间距24px
- **单个卡片**：
- 背景：白色
- 圆角：8px
- 内边距：24px
- 阴影：`0 2px 8px rgba(0, 0, 0, 0.08)`
- **卡片标题**：
- 字体大小：16px
- 字重：600
- 颜色：`#333333`
- 下边距：16px
- 边框：底部 `1px solid #e8e8e8`
- 内边距：12px
- **信息项**：
- 布局：Flexbox，每行2列（标签 + 值）
- 高度：36px
- 下边距：12px
- **信息标签**：
- 宽度：120px
- 字体大小：14px
- 颜色：`#666666`
- **信息值**：
- 字体大小：14px
- 颜色：`#333333`
- 字重：400
- Flex：1
#### 全宽卡片
- **特殊卡片**：项目管理卡片占据全宽
- **其他属性**：与其他卡片相同
### 交互行为
- 点击"编辑"按钮，打开编辑模态框（根据权限显示可编辑字段）
- 点击"删除"按钮，显示确认对话框
- 长文本字段支持悬停显示完整内容（Tooltip）
- 数字字段右对齐显示
- 日期字段统一格式：YYYY-MM-DD
- 金额字段显示单位：万元
---
## 5. 新建/编辑项目模态框 (Create/Edit Project Modal)
### 布局说明
- **全屏遮罩**：深色半透明背景
- **模态框**：居中显示，固定宽度
- **内容区域**：分组表单，滚动显示
- **底部**：操作按钮
### 视觉元素
```
┌────────────────────────────────────────────────────┐
│ 新建项目 [×] │
├────────────────────────────────────────────────────┤
│ ┌────────────────────────────────────────────┐ │
│ │ 基本信息 │ │
│ │ │ │
│ │ 合同编号 * [_________________] │ │
│ │ 项目名称 * [_________________] │ │
│ │ 工程类别 * [________▼] │ │
│ └────────────────────────────────────────────┘ │
│ │
│ [取 消] [保 存] │
└────────────────────────────────────────────────────┘
```
### 设计规范
#### 遮罩层
- **背景**：`rgba(0, 0, 0, 0.45)`
- **布局**：Flexbox，居中对齐
- **层级**：z-index 1000
#### 模态框
- **宽度**：800px
- **最大宽度**：90vw
- **最大高度**：90vh
- **背景**：白色
- **圆角**：8px
- **阴影**：`0 4px 12px rgba(0, 0, 0, 0.15)`
- **溢出**：auto
#### 模态框头部
- **高度**：56px
- **内边距**：16px 24px
- **边框**：底部 `1px solid #e8e8e8`
- **字体大小**：16px
- **字重**：600
- **颜色**：`#333333`
- **关闭按钮**：右上角，24px x 24px，灰色
#### 表单组
- **标题**：
- 字体大小：14px
- 字重：600
- 颜色：`#333333`
- 上边距：16px
- 下边距：12px
- **表单项**：
- 布局：Grid 2列，间距20px
- 下边距：20px
#### 表单字段
- **标签**：
- 字体大小：14px
- 字重：500
- 颜色：`#333333`
- 下边距：8px
- 必填标记：红色星号
- **输入框**：
- 宽度：100%
- 高度：32px
- 边框：`1px solid #d9d9d9`
- 圆角：4px
- 内边距：4px 12px
- 字体大小：14px
- Focus时边框：`#1890ff`
- Focus阴影：`0 0 0 2px rgba(24, 144, 255, 0.2)`
#### 模态框底部
- **高度**：64px
- **内边距：16px 24px
- **边框**：顶部 `1px solid #e8e8e8`
- **布局**：Flexbox，右对齐
- **间距**：12px
#### 底部按钮
- **取消按钮**：
- 背景：白色
- 边框：`1px solid #d9d9d9`
- 文字：`#666666`
- 高度：32px
- 内边距：0 16px
- 圆角：4px
- Hover：边框 `#1890ff`，文字 `#1890ff`
- **保存按钮**：
- 背景：`#1890ff`
- 文字：白色
- 高度：32px
- 内边距：0 16px
- 圆角：4px
- Hover：`#40a9ff`
### 交互行为
- 点击遮罩层或关闭按钮，关闭模态框
- 点击"取消"按钮，关闭模态框
- 点击"保存"按钮，提交表单
- 表单验证：必填字段为空时显示错误提示
- 保存成功后关闭模态框，刷新列表
- 支持Tab键在字段间切换
---
## 6. 用户管理页面（仅管理员）(User Management)
### 布局说明
- **顶部**：工具栏（搜索、新建用户按钮）
- **中部**：用户列表表格
- **底部**：分页控件
### 视觉元素
```
┌─────────────────────────────────────────────────────────┐
│ [搜索框] [新建用户] │
├─────────────────────────────────────────────────────────┤
│ 用户名 │ 真实姓名 │ 部门 │ 角色 │ 状态 │ 操作 │
├─────────────────────────────────────────────────────────┤
│ admin │ 系统管理 │ 管理部 │ 管理员 │ 正常 │[编辑][删除]│
│ zhangsan│ 张三 │ 市场部 │ 市场部 │ 正常 │[编辑][删除]│
│ lisi │ 李四 │ 技术部 │ 其他 │ 正常 │[编辑][删除]│
├─────────────────────────────────────────────────────────┤
│ [< 1 2 3 4 5 >] │
└─────────────────────────────────────────────────────────┘
```
### 设计规范
#### 表格列
- **用户名**：150px
- **真实姓名**：120px
- **部门**：100px
- **角色**：100px（标签显示）
- **状态**：80px（标签显示）
- **操作**：200px（编辑、删除、重置密码）
#### 角色标签
- **管理员**：红色标签
- **市场部**：蓝色标签
- **其他**：蓝色标签
#### 状态标签
- **正常**：绿色标签
- **禁用**：灰色标签
#### 操作按钮
- **编辑**：蓝色链接
- **删除**：红色链接
- **重置密码**：蓝色链接
### 交互行为
- 点击"新建用户"，打开新建用户模态框
- 点击"编辑"，打开编辑用户模态框
- 点击"删除"，显示确认对话框
- 点击"重置密码"，显示确认对话框
- 其他交互与项目列表相同
---
## 7. 项目统计页面 (Project Statistics)
### 布局说明
- **顶部**：筛选工具栏
- **中部**：统计图表区域（横向排列）
- **底部**：分组统计表格
### 视觉元素
```
┌─────────────────────────────────────────────────────────┐
│ [工程类别▼] [日期范围] [导出报表] │
├─────────────────────────────────────────────────────────┤
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 基础统计卡片 │ │ 分组统计图表 │ │ 时间趋势图表 │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ 按工程类别统计 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 工程类别 │ 项目数 │ 合同金额 │ 收款金额 │ 付款金额 │ │
│ ├─────────────────────────────────────────────────┤ │
│ │ 基建 │ 50 │ 30,000 │ 28,000 │ 26,000 │ │
│ │ 业扩 │ 30 │ 12,000 │ 10,000 │ 9,500 │ │
│ │ 客户 │ 20 │ 6,000 │ 4,000 │ 4,500 │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
```
### 设计规范
#### 筛选工具栏
- **布局**：Flexbox，两端对齐
- **左侧**：筛选器（工程类别、日期范围）
- **右侧**：导出按钮
#### 统计卡片
- **布局**：Grid 3列，间距24px
- **高度**：350px
- **其他属性**：与仪表盘统计卡片相同
#### 图表类型
- **饼图**：显示各类别占比
- **柱状图**：显示各类别金额对比
- **折线图**：显示时间趋势
#### 分组统计表格
- **表格属性**：与项目列表表格相同
- **特殊列**：
- 合同金额、收款金额、付款金额：右对齐
- 数值格式：千分位分隔
### 交互行为
- 选择筛选条件后，自动刷新统计数据
- 鼠标悬停在图表上显示详细数据
- 点击"导出报表"，下载Excel文件
- 支持切换图表类型
---
## 响应式设计
### 断点定义
- **移动端**：< 768px
- **平板**：768px - 1024px
- **桌面端**：> 1024px
### 移动端适配
- **侧边栏**：隐藏，显示汉堡菜单
- **统计卡片**：1列布局
- **表格**：横向滚动
- **工具栏**：垂直排列
- **模态框**：宽度95%，几乎全屏
### 平板适配
- **统计卡片**：2列布局
- **侧边栏**：宽度200px
- **表单**：1列布局
---
## 动画效果
### 过渡动画
- **持续时间**：0.3s
- **缓动函数**：ease-in-out
- **适用元素**：按钮、输入框、卡片、模态框
### 加载动画
- **旋转图标**：用于数据加载
- **骨架屏**：用于列表加载
### 页面切换
- **淡入效果**：fade-in 0.3s
---
## 可访问性
### 键盘导航
- **Tab键**：在表单字段和按钮间切换
- **Enter键**：提交表单或确认操作
- **Esc键**：关闭模态框
### 屏幕阅读器
- **ARIA标签**：所有交互元素都添加适当的ARIA属性
- **焦点指示**：清晰的焦点状态
- **颜色对比度**：符合WCAG AA标准（4.5:1）
---
## 设计系统总结
### 核心原则
1. **精确秩序**：严格遵循8px网格系统
2. **功能主义**：颜色、字体、间距都服务于信息传递
3. **极简主义**：去除一切不必要的装饰
4. **一致性**：所有页面遵循统一的设计语言
5. **可扩展性**：设计系统支持功能的不断扩展
### 设计质量标准
- **视觉精确**：每个像素都经过精确计算
- **专业美学**：体现企业级应用的专业性
- **用户友好**：操作直观，学习成本低
- **性能优异**：动画流畅，响应迅速
- **可维护性**：代码结构清晰，易于维护
---
**文档创建日期**：2026-01-25
**设计师**：OpenCode AI UI/UX Designer
**版本**：v1.0