# 海洋项目管理系统 - 前端页面设计参考 ## 页面结构总览 ``` ┌─────────────────────────────────────────────────────────┐ │ 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