Yoyo Admin 组件

适用范围：Legacy Admin Kit / Schema 与旧 admin-vue。新 admin-nuxtui 的开发入口见管理端 Nuxt UI 指南。

本目录是 Yoyo Admin 官方组件开发者文档入口。这里解释 什么时候用、怎么用、不要怎么用、组件和 Application Composition/Schema/Data Workbench 的边界。

仓库外安装、Vue peer、canonical styles/theme 与版本状态见 External Consumption；组件文档不复制 release contract。

组件使用与证据入口

层	Owner	用途
Package API	packages/yoyo-admin/admin-kit/etc/yoyo-admin-kit.api.md	导出、类型与 package contract
Component Docs	本目录	开发者使用、场景选择、组合与反模式
Live Workbench	Admin Vue「前端模块演示 → 组件工作台」	真实 Theme / Shell 下运行 production component
文档内示例	文档专用 Vue 示例，消费公开包	在阅读页操作组件并查看同源源码；不证明后端业务完成

Workbench 与文档都不是第二套组件实现。发现问题时回到 Admin Kit 或 Application Composition owner 修复。

文档内交互的交付范围

首批目标为 EditorPanel、DataSelectionTask、设置页组合、SchemaForm 与 Data Workbench。当前 Workbench 深链接不等于页面内示例已完成；可用性按组件成熟度矩阵分别说明。

运行示例与展示源码来自同一个 Vue 文件，说明必要样式、provider 和演示数据适配。示例无需登录后台，不连接真实数据库；需要确认 HTTP、权限及持久化时仍进入真实业务页面。阅读顺序为场景 → 示例/源码 → API与限制 → 真实消费者 → Authoring／外部消费。

任务级组合、state owner 与选型规则见 Application UI 指南；本目录只维护单个公共组件的使用合同。

Portal 与 Live Workbench

• 官方文档门户由 packages/yoyo-admin 的 pnpm docs:dev / docs:build / docs:preview 提供，直接读取本目录 Markdown。
• Admin Vue live Workbench 基础路径：/frontend-module-demo/component-workbench。
• 每个 Productized 组件都有稳定 slug，例如 /frontend-module-demo/component-workbench/modal。
• Portal 与 Workbench 可以独立部署；文档只记录稳定 path，不把 localhost 或某个环境域名写成长期合同。

> 在仓库根目录 YoyoBoot 执行：

pnpm --dir packages/yoyo-admin run docs:dev

>

pnpm docs:dev

首批产品化组件

基础组件

• YButton
• YInput
• YSelect

表单

• YDatePicker
• YDateRangePicker
• YFormField
• YSchemaForm

反馈与 Overlay

• YModal（YDialog 为兼容旧名）
• YDrawer
• YConfirmDialog

Application UI

• YEditorPanel

数据工作台

• LegacyYDataTable
• YDataSelectionTask

Batch 2 产品化组件

控件与交互

• YCheckbox
• YSwitch
• YTextarea
• YDropdown
• YTooltip
• YTabs
• YTree
• YCopyButton
• YBackTop

反馈与状态

• YAlert
• YStatusBadge
• YLoadingState
• YEmptyState
• YErrorState
• YForbiddenState

表单组合

• YFormGrid
• YFormSection
• YSettingRow

治理

• 组件成熟度矩阵
• 组件与页面能力选用总表：外壳、管理能力、官方页面、独立网站与文档体验的选用方式、数据边界和责任change。
• 组件文档模板

组件文档只描述 Yoyo public contract。shadcn-vue/Reka/TDesign 的 private DOM、class 或内部类型不是业务侧合同。

每篇 Productized 组件文档都带有由构建产物 .vue.d.ts 生成的 yoyo-public-contract 指纹。pnpm run verify:component-docs 会同时核对 API Extractor public export、文档标题、Workbench path 和该指纹；公开 props/models/emits/slots 变化时，必须先复核正文，再更新指纹，不能让文档静默过期。