xsl/ocean_project_manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
ocean_project_manager/docs/desigen/frontend-pages-reference.md
T
xsl 0895398138 save code
2026-01-25 15:05:03 +08:00

728 lines
27 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 海洋项目管理系统 - 前端页面设计参考
## 页面结构总览
```
┌─────────────────────────────────────────────────────────┐
│ 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
Reference in New Issue View Git Blame Copy Permalink