应用迁移
本页跟踪从各应用自有样式迁移到 YunLeFun Design 的边界。设计系统更新、npm 发布、应用升级和线上部署是不同步骤。
当前状态
| 范围 | 状态 |
|---|---|
| 仓库与文档名称 | 已统一为 YunLeFun Design |
| Design / UI 的边界与子包职责 | 已在设计库文档统一 |
| 共享主题 | 当前源码采用晴空蓝为主、高饱和纯色点缀 |
| Vue 组件与文档站 | 使用共享 token，保留品牌展示变体 |
| npm 包与线上 Registry | npm 已发布共享 token 与 Vue 组件；Registry 仍需按版本验收 |
| 主站 | 已加载 @yunlefun/ui/css；仍保留业务 App* 封装 |
| 其他应用 | 尚未逐个完成依赖和视觉验收 |
| 文档域名 | 目前为 ui.yunle.fun；仓库改名不会自动迁移域名 |
主站需要收敛的差异
| 项目 | 当前实现 | 迁移目标 |
|---|---|---|
| 品牌主色 | 主站晴空蓝，共享库原为鸢尾紫 | 共享库已采用晴空蓝，应用接入同一来源 |
| 变量来源 | 主站加载 @yunlefun/ui/css，仍保留业务主题变量 | 逐步用共享 token 映射可复用的框架变量，保留业务专属值 |
| 字体角色 | 主站有站酷小薇展示字和本地字体子集 | 产品标题与正文先统一角色，特殊展示字体在品牌模块内显式使用 |
| 控件接口 | AppButton 等转换旧 API | 按页面渐进替换，最终使用 Ylf* 公共接口 |
| 云景和会员样式 | SkyScene、SkyHero、MemberPass 与业务绑定 | 分离展示数据后再判断能否成为品牌模块 |
变量适配
业务应用先加载共享样式，再在自身主题边界内声明兼容别名。下列是迁移映射示例，目前不是已发布的适配模块：
css
:root,
.dark {
--ui-primary: var(--ylf-c-brand);
--ui-bg: var(--ylf-c-bg);
--ui-bg-muted: var(--ylf-c-bg-soft);
--ui-bg-elevated: var(--ylf-c-surface);
--ui-text: var(--ylf-c-text);
--ui-text-muted: var(--ylf-c-text-2);
--ui-border: var(--ylf-c-border);
--ylf-surface: var(--ylf-c-surface);
--background: var(--ylf-c-bg);
--foreground: var(--ylf-c-text);
--primary: var(--ylf-c-brand);
--primary-foreground: var(--ylf-c-text-on-accent);
}映射只从共享 token 指向框架变量，避免循环引用。接入时移除主站相同变量的旧硬编码值，并检查 CSS 顺序、嵌套主题和 Portal；不要只追加一段样式就宣称迁移完成。
迁移顺序
- 发布并固定共享包版本，安装主题，验证明暗模式和样式加载顺序。
- 用首页验证品牌表达，用探索页验证卡片与筛选，用设置页验证表单与状态。
- 在这些真实页面中确定公共组件接口和组合方式，再推广到登录、个人中心、会员与钱包。
- 对每个应用记录替换范围、验证结果和剩余例外，最后移除不再需要的旧样式与封装。
登录请求、支付状态机、权限判断和数据获取继续由应用负责。设计库接收展示所需的 props 和状态，并通过事件让应用完成业务动作。