@manohub/app-ui

AIHub 自绘组件层：不依赖 farris 的手写 Vue TSX 组件 + 自带令牌层。

本包分三层，可分别引用：

| 层 | 入口 | 内容 | |---|---|---| | ① 主题 | @manohub/app-ui/theme/default.css（兜底）/ theme/farris.css（Farris 规范） | 令牌（值）—— 换主题只换这一行 | | ② 组件面 | @manohub/app-ui/styles.css | 类与状态协议，无需 JS 即可使用 | | ③ Vue 层 | @manohub/app-ui | Vue 组件：渲染 ② 的类 + 行为增强 |

• 视觉与几何：《Farris Web 基础视觉规范》（@aihub/theme 的令牌与组件实测值）
• 令牌命名：daisyUI 式语义槽位（--ui-primary / --ui-base-content / --ui-info* / --ui-warning* …，default ≠ primary）
• 组件 API：shadcn 通行词汇（变体维度 tone × shape × size、compound 点号子件、受控 prop + 语义事件）
• 实现：零依赖手写 CSS，类名 .mh-*（bem-lite）

安装

pnpm add @manohub/app-ui

接入

样式两行，顺序固定（先主题后组件面；若应用的样式链已级联本包，则不必单独引）：

@import "@manohub/app-ui/theme/default.css"; /* ① 令牌（值） */
@import "@manohub/app-ui/styles.css";        /* ② 组件面（类） */

只写静态页（不装 Vue）时引这两行即可 —— 类名与 data-* 状态协议直接可用。

本包可独立发布：组件与类型一律从 @manohub/app-ui 直接引；下游（如 @manohub/app-kit）若转出口，是下游自己的选择。

import { Card, Form, Tree, Checkbox } from '@manohub/app-ui'

组件清单

| 分组 | 组件 | |---|---| | 容器与分区 | Panel（+ .Header / .Body / .Footer）、Card（+ 三件）、Section、Nav | | 数据展示 | Tree、ListView（+ .CardItem）、Badge、Tag（常规 / 状态 / 可选 / 新增 / 筛选片） | | 展示 | Avatar（+ .Group）、Skeleton（行 / 列表 / 块状） | | 表单基础（自绘） | Button（+ .Group / .Divider；五型 / 小号 / 加载 / 菜单按钮 / 连体切换）、Input（+ .Group / .Chip / .Display / .Textarea；清除 / 可见性切换 / 校验）、Select（单选 / 多选 / 搜索 / 加载；面板用原生 popover）、Switch（表格档 / 表单档） | | 表单与选择 | Form（+ .Item / .Section）、Checkbox、Radio（+ .Group）、RadioCard、Capsule（胶囊选择器；与 Tabset 组合即页签） | | 反馈与三态 | Notice（条状提示）、Notification（通知卡：标题 + 头像 / 标签 / 操作 / 关闭位）、QueryState、StateIllustrationEmpty / StateIllustrationError | | 反馈与引导（自绘） | Toast（消息提示：语义四档 / loading + 可选动作 + 自动消失计时 + .Stack 堆叠）、Steps（步骤条：节点式 / 燕尾段式 / .Progress 进度条） | | 数据展示（自绘） | Table（列 × 数据 + 选择列 + 排序事件 + 固定表头 / 固定列 + 批量栏 / 合计行；排序与列宽拖拽算法归调用方）、Pagination（总数 / 每页条数 / 页码窗口 / 简单档 / 外框档）、Tabs（下划线页签 + 「更多」收纳） | | 内容与文件 | Code（行内 chip / 代码块 + 复制）、Upload（+ .Thumbs；拖拽 / 点击上传区 + 已传文件列表） | | 浮层（自绘） | Dialog（原生 <dialog> + 模态皮肤；关闭受控）、Tooltip（零 JS：显隐与定位全走操作层 hover 档） | | 操作层（零 JS 原语） | Collapse（+ .Stack）、Tabset；浮层只提供样式层（styles/operations/popup.css，零 JS 可直接用），Vue 浮层仍用 farris 适配件 |

三态的操作按钮

QueryState / Tree / ListView 的空态·错误态操作按钮就是本包的 Button（variant="primary"）， 与全站按钮同族 —— 应用不需要注入任何东西，只要把文案与回调给上：

<QueryState
  :empty="list.length === 0"
  empty-action-text="新建"
  :on-empty-action="openCreate"
>
  <MyList />
</QueryState>

• 要换外观：改主题令牌（Button 的外观档位是 variant）；
• 要换结构（多个按钮 / 自定义动作区）：用 actions 插槽自绘。

主题层

每个主题分五片：colors / typography / spacing / radius / shadows，一律锚定 .app-container （micro-app 的 scopecss 不作用域化 :root，定义在 :root 会泄漏到宿主）。 只服务单一组件的几何令牌随组件落在 styles/components/<件>.css 顶部（如 tree.css 的行高与缩进步进）。

随包两套：

| 主题 | 锚点 | 取值来源 | |---|---|---| | default | .app-container（兜底套） | AIHub 品牌蓝（primary #2660FF）| | farris | .app-container[data-theme='farris'] | 《Farris Web 基础视觉规范》（primary #2a87ff，色板编号 Th/Au/Ne/Te 逐条标注）|

换皮只需给容器加属性（createSubApp({ theme: 'farris' }) 会写 data-theme），不动类名、不动组件代码、不重打包。 新增主题 = 新目录 theme/<name>/，令牌锚 .app-container[data-theme='<name>']，且必须全量覆盖 default 的令牌。

局部换主题：在更深的容器上重设变量即可，例如 .role-tree-pane { --ui-primary: #7C3AED; }。