无鱼软件文档中心

Appearance

历史资料说明：本文保留用于版本、制作或技术历史查阅，不作为沐霖 V4.5.0 当前产品功能说明。当前产品以项目工时记录、审核和统计为核心，任务相关功能已移除。

SVG 示意图创建完成总结 ​

✅ 已完成的 SVG 示意图（共 8 张） ​

序号章节SVG文件说明状态
1一、创建项目create-project-flow.svg项目创建3步流程图✅ 完成
2一、创建项目project-list-ui.svg项目列表界面线框图✅ 完成
3二、创建任务create-task-flow.svg任务创建流程图+表单示意✅ 完成
4三、普通工时填报hour-fill-flow.svg工时填报流程对比图✅ 完成
5四、任务工时填报task-hour-fill-flow.svg任务工时填报5步流程+工作类型说明✅ 完成
6五、我的周报/月报weekly-report-cards.svg周报4个统计卡片示意图✅ 完成
7六、工时审核hour-review-flow.svg审核流程三栏布局（待审核→审核操作→已审核）✅ 完成
8七、数据统计data-statistics-overview.svg统计维度+柱状图+饼图示意✅ 完成

📁 SVG 文件位置 ​

所有 SVG 文件统一存放在：

docs/public/images/guide/

🎨 SVG 示意图特色 ​

1. 统一的视觉风格 ​

  • 背景色: #f8f9fa 浅灰色
  • 主色调: Element Plus 主题色
    • 蓝色 #409eff - 主要操作
    • 绿色 #67c23a - 成功/通过
    • 橙色 #e6a23c - 警告/待处理
    • 红色 #f56c6c - 错误/驳回
  • 字体: Arial, sans-serif
  • 圆角: 统一使用 rx 属性

2. 清晰的流程展示 ​

  • 使用圆形数字节点表示步骤
  • 使用箭头连接流程
  • 底部补充详细说明或表单示意

3. 标注真实截图需求 ​

在需要真实截图的位置，添加明显的提示：

📸 需要真实截图：XXX页面的完整界面

📊 各章节示意图详情 ​

一、创建项目（2张） ​

1. create-project-flow.svg ​

  • 内容: 3步创建流程
    • 步骤1: 点击"新增项目"
    • 步骤2: 填写项目信息
    • 步骤3: 保存完成
  • 特色: 底部包含项目表单字段示意

2. project-list-ui.svg ​

  • 内容: 项目列表界面线框图
  • 包含元素:
    • 搜索框和搜索按钮
    • "新增项目"按钮
    • 数据表格（项目编码、名称、负责人等）
    • 操作列（编辑、删除）
  • 标注: 底部提示需要真实截图

二、创建任务（1张） ​

3. create-task-flow.svg ​

  • 内容: 3步任务创建流程
    • 步骤1: 进入任务管理，选择目标项目
    • 步骤2: 点击"新增任务"，填写任务信息
    • 步骤3: 提交创建任务，分配到成员
  • 特色: 底部包含完整的任务信息表单示意
    • 任务名称（必填）
    • 负责人（必填）
    • 开始时间（必填）
    • 计划结束时间（可选）
    • 任务状态
    • 优先级
    • 任务描述

三、普通工时填报（1张） ​

4. hour-fill-flow.svg ​

  • 内容: 左右对比两种工时填报流程
    • 左侧: 普通工时（3步）
      • 选择日期
      • 选择项目
      • 填写工时和备注
    • 右侧: 任务工时（4步）
      • 选择日期
      • 选择项目和任务
      • 选择工作类型
      • 填写工时
  • 特色: 直观对比两种填报方式的差异

四、任务工时填报（1张） ​

5. task-hour-fill-flow.svg ​

  • 内容: 详细的5步任务工时填报流程
    • 步骤1: 选择日期（日历/列表）
    • 步骤2: 选择项目（下拉列表）
    • 步骤3: 选择任务（项目关联）
    • 步骤4: 选择工作类型（开发/测试等）
    • 步骤5: 填写工时（小时数）
    • 完成: 保存提交
  • 特色: 底部包含完整的工作类型说明表格
    • 7种工作类型详细说明
    • 每种类型的适用场景
    • 填报提示

五、我的周报/月报（1张） ​

6. weekly-report-cards.svg ​

  • 内容: 4个统计信息卡片
    • 卡片1: 总工时（176.5小时）
    • 卡片2: 已通过（150.0小时）
    • 卡片3: 审核中（20.5小时）
    • 卡片4: 已驳回（6.0小时）
  • 特色: 直观展示周报的核心数据展示方式

六、工时审核（1张） ​

7. hour-review-flow.svg ​

  • 内容: 三栏审核流程布局
    • 左栏: 待审核工时列表（橙色主题）
      • 3条待审核记录示例
      • 显示填报人、日期、工时、项目
    • 中栏: 审核操作区（蓝色主题）
      • 工时详情展示
      • 审核意见输入框
      • 通过/驳回按钮
      • 批量审核提示
    • 右栏: 已审核工时（绿色/红色主题）
      • 已通过记录（绿色）
      • 已驳回记录（红色）+ 驳回原因
      • 统计卡片
  • 特色: 完整展示审核工作流程

七、数据统计（1张） ​

8. data-statistics-overview.svg ​

  • 内容: 统计维度 + 图表展示
    • 顶部: 4个统计维度
      • 每日工时统计
      • 项目工时统计
      • 人员工时统计
      • 工时类型分布统计
    • 左下: 每日工时趋势柱状图
      • X轴: 日期
      • Y轴: 工时数（0-10小时）
      • 6天的数据柱状图
    • 右下: 项目工时分布饼图
      • 3个项目的占比
      • 图例说明
  • 特色: 展示多种统计图表类型
  • 标注: 底部提示需要真实截图

🔧 后续工作 ​

1. 将 SVG 插入到文档中 ​

需要在以下文档中插入对应的 SVG 示意图：

文档需要插入的 SVG状态
create-project.mdcreate-project-flow.svg, project-list-ui.svg✅ 已插入
create-task.mdcreate-task-flow.svg❌ 待插入
hour-fill.mdhour-fill-flow.svg❌ 待插入
task-hour-fill.mdtask-hour-fill-flow.svg❌ 待插入
weekly-monthly-report.mdweekly-report-cards.svg❌ 待插入
hour-review.mdhour-review-flow.svg❌ 待插入
data-statistics.mddata-statistics-overview.svg❌ 待插入

2. 真实截图收集 ​

参考 screenshot-checklist.md，截取真实界面图替换或补充 SVG 示意图

3. 更新截图清单 ​

由于新增了多个 SVG，可能需要更新截图清单，明确哪些位置可以用 SVG，哪些必须用真实截图

📝 使用建议 ​

  1. SVG 示意图的优势:

    • 清晰展示流程和结构
    • 不受实际数据影响
    • 可以随时修改和调整
    • 文件小，加载快

  2. 真实截图的必要性:

    • 展示真实的界面效果
    • 包含实际数据示例
    • 更直观的用户体验
    • 增强文档的可信度

  3. 最佳实践:

    • 流程图、结构图使用 SVG
    • 界面展示使用真实截图
    • 关键操作同时提供 SVG + 真实截图
    • 在 SVG 中标注"需要真实截图"的位置

📞 下一步行动 ​

选项1: 继续将 SVG 插入到所有文档中
选项2: 更新现有文档，优化内容
选项3: 协助准备真实截图清单
选项4: 其他需求

请告诉我您希望进行哪一步？

Released under the MIT License.

Copyright © 2026 无鱼软件