中国银联·后台管理系统
项目背景：中国银联内部需要一套“零代码、低门槛”的数据监控后台，让业务、风控、运维三条线的人员能够 5 分钟内把核心 KPI 变成可交互的大屏。老系统采用固定模板，新增指标需要 2 名前端 + 1 名后端排期 3 天，无法跟上业务节奏。
技术栈
Vue 3.2 + Vite + TypeScript ｜ Pinia ｜ AntV G2Plot ｜ SortableJS ｜ WebSocket ｜ ESLint + Husky + Vitest
核心亮点：可拖拽配置数据源的图表引擎（DragChart-Engine）
拖拽画布
• 基于 SortableJS + Vue Draggable Next 二次封装，支持栅格/自由两种布局模式，12 级响应式断点，自动对齐银联 4K 大屏标准（7680×2160）。
• 实现“框选批量拖拽”、“跨容器复制”、“撤销/重做” 栈，操作 200+ 组件依然保持 60 FPS。
数据源动态接入
• 左侧数据源面板对接银联 8 大内部网关（Mercury 交易、RiskGo 风控、UOP 运维……），返回格式统一为 { datasetId, fields[], data[] }。
• 图表与数据源解耦：通过 JSON Schema 描述“维度/指标”要求，运行时根据 Schema 自动映射字段，做到“同一个饼图组件，今天可以绑交易渠道，明天可以绑响应耗时”——把原来 3 天的工作量压缩到 30 秒。
可视化物料库
• 封装 22 类高频图表（折线、阶梯、桑基、拓扑、银联 GEO 中国地图等），全部继承自 BaseChart 类，统一暴露 updateDataset() 与 resize() 接口。
• 支持“图表嵌套图表”——例如把“交易成功率”仪表盘嵌入“渠道分布”柱状图的 tooltip 中，满足领导“一屏看完所有结论”的诉求。
实时与离线双模式
• WebSocket 通道采用二进制帧 + gzip，单屏 40 个指标，5 秒刷新一次，网络消耗 < 15 KB/s；
• 离线模式把 Vue SFC 与数据快照一起序列化，生成 .ucard 文件，邮件发出后对方双击即可在本地浏览器还原整屏，方便监管汇报。
性能与稳定性
• 通过 Vue 3 的 defineAsyncComponent + 异步 monaco-editor，首屏 JS 体积从 2.1 MB 降到 780 KB（gzip）。
• 单测覆盖率 87%，E2E 用 Cypress 编写 214 条用例，覆盖拖拽、数据刷新、导出三大核心路径；