代表案例

五个系统级脱敏案例，覆盖财政财务、数据大屏、预算绩效、政务配置、支出管理五类场景。所有演示均为单文件 HTML、双击即运行、全虚构数据——「在线演示」按钮点开即是交付物本身。

案例 01

省级公共卫生机构 · 预算经费管理系统

财政财务角色权限复杂金额联动需求确认原型

项目—子项目—经费科目—资金拨入—合同—报销执行，六类金额环环相扣，还叠加财务管理员与经办人两套数据权限。三方靠会议和文字 PRD 对齐，一轮确认要两周。用可点击原型替代文字 PRD 后，评审会一次过。

难点

  • 金额逻辑复杂：可用 = 已拨入 − 支出 − 冻结，六类金额要在列表、汇总区、明细页签三处联动，文字描述极易歧义
  • 角色视角差异：财务管理员看全量可批量，经办人只看本部门走流程，同一页面两套行为 PRD 写不清
  • 明细层级深：9 个明细页签 + 6 类弹窗 + 审批流，交互状态多

做法

  • 真实样例数据：6 项目 / 18 部门 / 合同分期全填充，评审会当场点开算账
  • 角色切换演示：顶部一键切换，按钮区、列表范围、明细过滤同步变化
  • 全联动交互：行点击展开 9 页签，拨入 / 拆分 / 调整弹窗均可操作，汇总三行统计实时重算
  • 规范化交付：统一 B 端规范，原型即设计稿，研发直接取用

交付物

  • 列表页（搜索区 + 三级汇总 + 批量操作）
  • 9 个明细页签 + 6 类弹窗 + 角色权限体系
  • 单文件 HTML 2900 行，零依赖双击即开
  • 5 个工作日交付，含 3 轮修改
✔ 需求评审会一次过，确认周期从两周缩短到一天
✔ 研发将原型作为验收基准，返工显著减少
项目列表页
列表页：搜索区、三级汇总、批量操作、金额右对齐
项目明细页
行点击联动：项目明细 9 页签、子项目表与行内操作
新建项目弹窗
新建项目抽屉：分区表单、必填校验位、底部操作栏
在线演示 · 预算经费管理系统 建议演示顺序：切角色 → 筛选搜索 → 点行看明细 → 开资金拨入弹窗 → 新建项目
案例 02

一体化运行监控驾驶舱（大屏）

数据大屏内网离线等比适配ECharts

某省级单位指挥中心值班大屏：一屏汇聚资金监控、报销销量、异常接口、趋势分析等 9 大业务页签，供值班巡视与领导汇报投屏使用。内网不通外网，必须 file:// 双击直开。

难点

  • 离线可用：内网不通外网，CDN 图表库不可用，必须双击直开
  • 任意屏适配：1920×1080 固定舞台，任意分辨率投屏等比不变形
  • 图表密度高：堆叠柱、环图 + 9 项图例、双 Y 轴趋势、省地图点阵纹理 + 发光描边 + 城市角标

做法

  • 单 HTML + 本地 echarts.min.js + 省份 GeoJSON，全离线
  • 固定舞台 + transform scale 等比适配窗口
  • 9 个斜切页签可点击切换，6 指标卡带同环比箭头
  • 空态自绘 SVG 插画，不摆白块
  • headless 截图与设计稿逐块比对，修正环图与图例重叠

交付物

  • 单 html + 2 个本地 js，zip 传阅即开
  • 断网环境 file:// 全功能验证通过
✔ 指挥中心直接投屏演示，9 页签现场切换无卡顿
✔ 离线双开验证通过，断网环境全功能可用
驾驶舱总览
总览：资金监控 / 数据总览 / 省地图 / 异常分布 / 趋势 / 接口监控
页签切换
9 个斜切页签切换态（智能巡检默认高亮）
在线演示 · 运行监控驾驶舱 全屏观看效果最佳；演示包含本地 ECharts，无需联网
案例 03

预算绩效监控与审核（绩效系统）

预算绩效审核规则分支自动汇总报告搜索模版

预算绩效管理闭环：各项目单位填报绩效监控表 → 财务逐项目审核（数据逻辑校验 / 异常预警）→ 审核通过后自动汇总成单位整体监控报告。需求评审前用可点原型预演全部规则分支。

难点

  • 审核规则分支多：四类校验；有错误→禁用「通过」只能退回；有预警→必须填意见才能通过；退回必须填意见
  • 汇总口径：仅统计「审核通过」项目，报告结论按通过 / 预警情况自动生成文案
  • 搜索条件复用：常用筛选条件保存为模版、一键套用、可删除

做法

  • 单文件零依赖：组织树 + 筛选 + 表格 + 分页
  • 1060px 审核抽屉：四类校验面板（错误红 / 预警橙 / 通过绿）+ 指标执行明细 + 底部按分支禁用按钮
  • 汇总报告弹窗：6 统计卡 + 通过项目汇总 + 异常预警汇总 + 自动结论 + 导出
  • 搜索模版：自定义下拉 + 重名校验保存弹窗
  • 5 条演示数据覆盖 4 分支，headless 自测 hash 直达

交付物

  • 绩效监控审核与汇总 html（单文件）
  • 项目绩效监控 · 搜索模版 html（单文件）
✔ 需求预演一次过：4 个审核分支当场点完确认，规则无返工
✔ 搜索模版交互被客户采纳，进入正式需求文档
审核列表
监控审核列表：组织树 + 筛选 + 分页
审核抽屉错误分支
审核抽屉：四类校验、有错误时禁用「审核通过」
汇总报告
汇总报告弹窗：统计卡 + 自动结论
搜索模版
监控列表 + 搜索模版下拉（套用 / 删除 / 保存当前条件）
在线演示 · 审核与汇总 在线演示 · 搜索模版 演示直达分支：地址栏加 #review=20260014 看错误分支，#summary 看汇总报告
案例 04

表单配置与机构管理（政务配置平台）

政务配置信息架构跨机构复制Excel 批量导入

政务表单配置平台：单位详情下 14 个一级页签（基础信息 / 工作流 / 表单和流程 / 费用标准 / 人员 / 票据 / 支付 / 业务规则…）。表单需跨机构批量复制，目标机构支持 Excel 批量导入，且内网环境需离线解析回退。

难点

  • 复制规则复杂：双条提示文案、单据名称与业务标签自动带入、关联标签联动、上架 / 覆盖开关组合
  • Excel 导入离线回退：内网 SheetJS CDN 不可用时回退解析 HTML 表格型 .xls；模板下载带 BOM 防乱码
  • 标签交互细：多选可删、hover 显示名称 + 信用代码、回车手动加、导入后计数提示

做法

  • 单文件：顶部导航 + 可收起侧栏 + 面包屑 + 14 一级 tab + 2 二级 tab
  • 搜索真实过滤表格、列拖拽排序、上架开关、条件化删除
  • 复制弹窗必填校验 → 机构导入弹窗：模板真实下载 + 上传解析 + 标签入框
  • headless 注入点击行内「复制」，验证弹窗分支与校验

交付物

  • 单 html，zip 传阅即开
  • 14 tab 信息架构被采纳为正式 IA
✔ 客户评审当场走通复制 + 导入全链路
✔ 导入离线回退一次通过验证
单据配置列表
单据配置列表：14 tab + 搜索 + 拖拽排序 + 上架开关
复制单据弹窗
复制弹窗：双提示 + 开通类型 + 机构批量导入入口
在线演示 · 表单配置与机构管理 建议演示顺序：切 14 个页签 → 搜索过滤 → 行内「复制」→ 机构 Excel 导入
案例 05

支出管理与费控规则（公务接待 / 出行 / 劳务费）

支出管理跨单据联动补贴规则配置申请—报销带出

一套「支出管理」模块的 5 个页面：公务接待、公务出行（差旅）、劳务费的申请单与报销单，外加伙食费、公杂费两个费控规则配置页。难点在跨单据联动：报销选申请单整行带出行程、食堂用餐联动接待就餐明细、常驻地与出差地组合决定补贴有无——规则散在制度文件里，靠表格对不齐。

难点

  • 申请—报销两级联动：报销单选申请单后行程整行带出，申请单改了已带出的行跟不跟、怎么提示，需求方自己也没想清楚
  • 补贴规则多分支：市内无补贴、跨市按天折算、半天算 0.5 天，三层条件组合计算
  • 费控要可配置：伙食 / 公杂标准按出差地、人员类别分档，公杂还有进修时间阈值切换与满月规则弹窗

做法

  • 规则先列分支清单（市内 / 半天 / 进修阈值……）逐条确认，再落页面
  • 申请→报销带出、接待就餐隐显与金额重算，原型里真实可点
  • 费控配置页用分档表格 + 阈值弹窗承载制度参数，改默认值立即影响取数预览
  • headless 自测全部联动点与抽屉分支

交付物

  • 5 个单文件页面，zip 传阅即开
  • 10+ 组联动一次评审定稿，返工为零
  • 费控配置页被直接用作制度宣贯材料
✔ 补贴与费控规则一次评审定稿
✔ 申请—报销带出、就餐联动当场点完确认
单据列表
单据列表：页签 + 快捷搜索 + 三类创建入口
接待报销单抽屉
接待报销单抽屉：来访信息 + 食堂用餐联动
出行申请单抽屉
出行申请单：行程信息 + 出差人标签 + 出发地/目的地选择
出行报销单抽屉
出行报销单：选申请单带出行程，行程行标注生成来源
伙食费费控规则
伙食费规则第2步：出差类型分档 + 基本/特殊规则标准表
公杂费费控规则
公杂费规则：进修阈值（默认30天）切 ≤/> 两表 + 满月规则入口
在线演示 · 公务接待 在线演示 · 公务出行 在线演示 · 劳务费 在线演示 · 伙食费规则 在线演示 · 公杂费规则 建议演示顺序：接待列表 → 创建报销单（选申请单带出来访信息）→ 食堂用餐切「是」看就餐明细联动 → 出行报销单带出行程 → 公杂费规则改进修阈值

你的系统，也可以有这样一份「当场点得动」的演示。

欢迎带着截图、PRD 或一句话需求来聊，首次沟通免费评估工作量与报价。

联系我 →