开始使用

使用 VitePress 原生语言菜单切换简体中文与 English。设计规范、组件文档、预览工具栏和交互示例提供对应版本；切换时保留当前页面与章节，明暗主题仍沿用当前偏好。中文页面显示「云乐坊」，英文页面显示「YunLeFun」。

云乐坊设计系统统一维护应用共享的设计规范、品牌视觉与 UI 实现。Vue 组件通过 npm 包统一维护，复杂交互由 Reka UI 提供行为和无障碍能力，视觉由 --ylf-* token 驱动。

仅接入设计 token 的项目可以使用 CSS 入口，不依赖 Vue 或 Sass；Vue 组件目前以 SFC 分发，构建仍需要 Sass。公共接入范围与发布标准见公共使用与发布。

安装

pnpm add @yunlefun/ui @yunlefun/vue
pnpm add -D sass

在应用入口加载设计 token，任选 CSS 或 SCSS：

import '@yunlefun/ui/css'

@use '@yunlefun/ui/styles';

Nuxt 项目可以注册组件自动导入：

export default defineNuxtConfig({
  modules: ['@yunlefun/vue/nuxt'],
  css: ['@yunlefun/ui/styles'],
})

新 CSS 入口及强调样式对应当前源码，使用前需确认安装包已包含这些改动。本地源码可以通过工作区引用或 pnpm -C packages/ui pack 试用。

从哪里开始

• 阅读 Design 与 UI，理解设计系统、样式包和组件库的关系。
• 阅读子包职责，区分共享包、实验工具和内部构建工具。
• 阅读视觉基础，使用晴空蓝主色、字体角色和明暗主题。
• 阅读色彩与组件，复用高饱和纯色 token 与组件的 tone 接口。
• 阅读品牌与界面，了解云景、品牌标志、页面构图与文档体验。
• 在 Vue 接入中查看显式导入与 Nuxt 模块的完整示例。
• 阅读设计体系架构，了解 Reka UI、云乐坊组件与 Registry 的职责。
• 使用 Registry 分发，通过 URL 安装共享 token、YlfButton 或 YlfDialog 源码。
• 在 Vue 组件中查看实时 Demo；每个预览都可以独立切换明暗主题和设备宽度。
• 在 AG-UI 示例中体验 7 种场景，包括任务规划、推荐卡片、表单回传和多工具协作，查看实际协议事件。
• 阅读 Admin 后台规范，为管理表格、筛选器与表单接入中性主题和响应式密度。
• 阅读 Editor 编辑器规范，为复杂工作台接入独立密度与中性表面。
• 阅读字体规范，按需加载展示字体。
• 已有应用按迁移指南逐步接入，区分源码更新、包发布与线上部署。