深色
风格
视觉表达
S 循环切换
经典
稳定的技术默认风格
信号流
突出动态流向
蓝图
工程评审
编辑风格
适合发布与上线说明
动态
演示
导出
导出图表
便携、整洁的输出
E
分享
分享卡片
1200×630 PNG
路径分享卡片
1200×630 PNG
可达范围分享卡片
1200×630 PNG
复制分享卡片
复制 PNG 到剪贴板
复制图表
复制 PNG 到剪贴板
图像
PNG
无损图像
JPEG
紧凑图像
WebP
现代图像格式
矢量与动效
SVG
可编辑矢量图
WebM
6 秒动效
MiragenFlow 前后台组件统一迁移方案
←
引导视图
探索此系统
沿精选路径逐步查看,而不改变源图表。
节点
下一步
→
▶
播放故事
#
复制此刻
显示全部
MiragenFlow 前后台组件统一迁移方案
由 Archify 生成的架构图。
用户端页面 · web/src/pages + user-console · 用户端现状与历史节点 · 保留页面与业务流程
用户端页面
web/src/pages + user-console
保留页面与业务流程
历史 Ant Design · 已从当前用户端依赖清理 · 用户端现状与历史节点 · 历史迁移节点
历史 Ant Design
已从当前用户端依赖清理
历史迁移节点
历史 Radix 封装 · 普通控件已收敛 · 用户端现状与历史节点 · 历史迁移节点
历史 Radix 封装
普通控件已收敛
历史迁移节点
用户端样式适配层 · 保留用户 tokens 与页面 API · 目标:统一 TDesign 与 Lineicons › 用户端现状与历史节点 · 过渡与隔离边界
用户端样式适配层
保留用户 tokens 与页面 API
过渡与隔离边界
管理台页面 · admin/src/pages + layouts · 现状:管理台依赖 · 页面业务不变
管理台页面
admin/src/pages + layouts
页面业务不变
管理台 TDesign · tdesign-react + 现有主题 · 现状:管理台依赖 · 保持视觉不变
管理台 TDesign
tdesign-react + 现有主题
保持视觉不变
统一 TDesign 基础层 · 组件、弹层、交互与无障碍 · 目标:统一 TDesign 与 Lineicons · 目标共享层
统一 TDesign 基础层
组件、弹层、交互与无障碍
目标共享层
本地 Lineicons · web 与 admin 精选子集 · 目标:统一 TDesign 与 Lineicons · 两端共用图标规范
本地 Lineicons
web 与 admin 精选子集
两端共用图标规范
共享接口契约 · packages/contracts · 稳定业务边界 · 与 UI 解耦
共享接口契约
packages/contracts
与 UI 解耦
平台服务端 · server/src/app/http.ts · 稳定业务边界 · 业务逻辑不迁移
平台服务端
server/src/app/http.ts
业务逻辑不迁移
页面 props 保留
组件 API 适配
当前已接入
抽取稳定基础能力
图标插槽统一
用户端现状与历史节点
现状:管理台依赖
目标:统一 TDesign 与 Lineicons
稳定业务边界
图例
前端
后端
外部系统
就绪
章节 01 / 01
引导章节
图表指南
探索此系统
×
正在检查已编译语义
01
查找任意节点
搜索标签、职责、类型和稳定 ID。
/
02
追踪路径
查看两个语义节点如何按编写方向连接。
R
03
查看完整系统
打开带实时视口和稳定节点的语义雷达。
M
04
比较语义类型
统计角色、显示流量并比较直接编写的连接。
L
05
播放引导故事
浏览已编写的章节和真实关系。
P
06
进入演示模式
让实时图表占满视口,同时不改变导出。
F
E
导出
T
主题
S
风格
0
重置
+
放大
-
缩小
Esc
关闭
查找节点
×
⌕
/
没有匹配的节点
语义护照
已验证来源
编写可达范围
上游
0
下游
0
×
复制链接
关系
路径探测
选择起点节点
查找起点
复制链接
清除
在图表中选择两个语义节点
←
▶
旅程
→
总览
先选择来源,再选择目标;方向很重要。
语义透镜
比较系统角色
×
最多选择两种语义类型。选择一种可显示其真实流量;选择两种只比较直接编写的关系。
选择一种类型以检查其节点和相连关系。
复制链接
清除
语义雷达
正在构建总览
打开雷达
×
点击节点
拖动平移
语义雷达需要更多地图可见空间。
路径
地图
透镜
阅读
100%
可行性结论
• 可行:UI 组件替换不改变 server、contracts、路由和业务数据
• 管理台 TDesign 作为视觉基准,用户端通过适配层保留现有 tokens 与布局
• 统一后可减少重复弹层、表单状态和依赖加载
保留与删除
• 保留用户端页面、中文文案、主题变量、业务组件和 Lineicons
• 完成等价能力后删除用户端 Ant Design 核心依赖与重复的 Radix 普通控件封装
• 标签多选、搜索下拉、日期、上传和画布控件先由适配层承接
迁移门槛
• 先建立 TDesign 主题桥接和用户端适配 API,禁止新页面继续引入 Ant Design
• 每类控件都要验证键盘、ESC、遮罩、主题、移动端和表单受控状态
• 按普通输入/选择器、反馈弹层、复杂业务组件分批切换并逐批删除旧依赖