Admin · 后台管理界面

YunLeFun 的产品界面分为 Consumer（面向用户）与 Workspace（面向工作任务）两类。Workspace 再按任务密度分成 Admin 与 Editor。三者共享品牌和语义色；表面、字体角色和控件密度分别配置。

维度	Consumer	Admin	Editor
主要任务	浏览、体验、转化	查询、审核、配置、批量操作	画布、时间线、属性编辑
视觉重点	品牌与内容	数据和操作层级	工作内容与工具
字体	正文系统字体，展示区可用品牌字体	系统字体，ID/日志用等宽字体	紧凑系统字体，参数用等宽字体
默认控件	按产品场景选择	32px，次级 28px	28px，次级 24px
表面	品牌表达可更鲜明	中性底色、细边框、少阴影	连续工具面板与工作区

接入

import '@yunlefun/ui/css'
import '@yunlefun/ui/admin.css'

admin.css 是可选 token 层，只声明 --ylf-admin-*，不覆盖 Consumer 或 Editor，不包含 TDesign、Vue 或 Reka UI 依赖。该入口目前属于源码改动，使用前确认安装版本已经发布；首个接入方 YunLeFun/admin 暂存同一份文件，发布后改为包入口。

颜色支持 .dark / .ylf-theme-dark 与 .light / .ylf-theme-light；独立预览可在容器设置 data-ylf-admin-theme="dark" 或 "light"。同时加载 base theme 并设置对应主题，品牌与语义色继续由 base 提供。

页面与控件

• 标题、说明、主要操作位于同一页头；筛选器与刷新放在表格工具栏。筛选条件换行时保持一致间距。
• 主色只用于主要操作、选中状态和链接。状态色搭配文本标签；危险操作用明确动词。
• 面板圆角 10px，控件圆角 6px；正文 14px，辅助信息 12–13px，页面标题 22px。
• 图标与文字在同一 flex 行内垂直居中。独立图标槽与文本相隔 8px，加载图标沿用同一间距；不能叠加组件库自带的 margin。
• 表格撑满容器，必要时设列最小宽度并在表格内部滚动。短字段设固定宽度，主字段留弹性空间；不要把整张表固定成比容器更窄的宽度。
• 输入、悬浮、选中、禁用、焦点、错误、空数据、加载状态都从语义变量取色。日志和编辑器也必须跟随主题。

明暗与移动端

• Admin 使用独立中性表面 token，品牌仍继承 --ylf-c-brand。亮暗模式都检查文字、状态标签和边界的可读性。
• 小于 768px 或触屏时，标准控件增至 44px，次级控件增至 40px。字体不随控件高度盲目放大。
• 页头操作、筛选器和表单按需换行；表单网格使用 minmax(0, 1fr)，长 UID、URL、日志允许换行或局部滚动。
• 数据表可转为带字段名的卡片；需要横向比较的数据保留表格并提供局部滚动。
• 抽屉不超过视口宽高；对话框保留 16px 外边距，正文可滚动，取消、确认、关闭始终可访问。底部操作区考虑安全区域。
• 明确键盘焦点、图标按钮的可访问名称；支持减少动态效果。切换主题后，传送到 body 的浮层也应一致。

组件实现边界

YunLeFun/admin 保留 TDesign 的表格、表单、分页与弹层行为，在适配层把 --ylf-admin-* / --ylf-* 映射到 --td-*。无需为了统一视觉重写成熟控件。需要自定义交互时可用 Reka UI；避免同一功能同时维护两套行为。

验收至少覆盖 1440px 桌面、768px 临界点、390px 与 320px 小屏，以及亮暗主题、带数据/空数据/错误、筛选器、长表单和浮层。截图只能证明视觉状态；还需验证键盘、滚动、筛选、关闭和主题持久化。

参考

Modern Data Table Variants 提供表格层级、状态标签、筛选与移动列表的视觉参考。借鉴信息组织方式，品牌、权限、响应式和无障碍以实际产品要求为准。