27 KiB
27 KiB
海洋项目管理系统 - 前端页面设计参考
页面结构总览
┌─────────────────────────────────────────────────────────┐
│ 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）
设计系统总结
核心原则
- 精确秩序：严格遵循8px网格系统
- 功能主义：颜色、字体、间距都服务于信息传递
- 极简主义：去除一切不必要的装饰
- 一致性：所有页面遵循统一的设计语言
- 可扩展性：设计系统支持功能的不断扩展
设计质量标准
- 视觉精确：每个像素都经过精确计算
- 专业美学：体现企业级应用的专业性
- 用户友好：操作直观，学习成本低
- 性能优异：动画流畅，响应迅速
- 可维护性：代码结构清晰，易于维护
文档创建日期：2026-01-25 设计师：OpenCode AI UI/UX Designer 版本：v1.0