@melt-js/comps-fan

基础组件集，以 hel-micro 远程组件形式提供： Fa* 前缀的通用组件（按钮、表格、表单、弹窗、标签页等）、useFa* hooks， 以及各组件的示例（examples）。

供以下模板消费：

• @melt-js/tpl-vue3-admin-ele-fan（Element Plus 版后台模板）
• @melt-js/tpl-vue3-admin-reka-fan（完整示例版后台模板）

本地联调

pnpm fan-comps:dev        # 20091（dev server，供模板跨域加载）
pnpm fan-comps:build      # 产物写入 hel_dist / hel_proxy / hel_proxy_es
pnpm fan-comps:build:local # 产物资源地址指向 http://localhost:20091，供 vite preview 用
pnpm fan-comps:preview    # 20091 上预览已构建产物

端口 20091 登记在仓库根目录 ports.json（comps 段；20090 已被 comps-vben 占用）。

产物结构：

| 目录 / 文件 | 说明 | | --- | --- | | hel_dist/ | 远程组件产物：index.html + 单个 UMD JS + 单个 CSS + hel-meta.json | | hel_proxy/、hel_proxy_es/ | npm 消费方 import 到的空壳代理（exposeLib），真实实现由 preFetchLib 注入 | | src/configs/subApp.ts | LIB_NAME = 'comps-fan'，与 package.json 的 appGroupName 一致 |

宿主怎么接

import { bindVueRuntime, preFetchLib } from 'hel-micro'
import * as Vue from 'vue'

// 1 共享 vue 运行时（本包把 vue external 成 window.Vue）
bindVueRuntime({ Vue })

// 2 预加载；开发环境 host 指向 http://localhost:20091
const lib = await preFetchLib('comps-fan', {
  custom: {
    host: 'https://unpkg.com/@melt-js/comps-fan/hel_dist/hel-meta.json',
    skipFetchHelMeta: false,
    enable: true,
    trust: true,
  },
})

// 3 组件在宿主入口全局注册（模板里直接 <FaButton />），hooks 从 lib 取
for (const [name, value] of Object.entries(lib)) {
  if (/^Fa[A-Z]/.test(name)) app.component(name, value)
}
const { useFaToast, useFaModal, useFaDrawer, useFaImagePreview, examples } = lib

两个 fan 模板已经把上面的逻辑收拢在各自的 src/remote/ 目录里。

样式说明

组件源码里只有原子类（UnoCSS / Tailwind v4 写法），没有随包引入 reset。 作为远程组件时宿主不会再扫描本包源码，因此本包在构建时自己编译一份 CSS：

• 扫描 src/**/*.{vue,js,ts}，生成组件与示例用到的原子类、图标类、动画类；
• 不注入 reset（body / * 等），避免污染宿主全局样式；主题变量仍来自宿主的 :root / .dark；
• 使用独立的虚拟 CSS 模块（vite.plugin.uno-css.ts），避免和宿主的 \0/__uno.css 在 Vite dev 下互相覆盖。

自动注册组件（可选）

模板如果不想逐个全局注册，可以继续使用 resolver：

import { ComponentsResolver, ComponentsType } from '@melt-js/comps-fan/resolver'

components({
  resolvers: [ComponentsResolver()],
  types: [ComponentsType],
})

注意：远程组件模式下，resolver 只适合生成类型声明；运行时组件请从 preFetchLib 拿到后 app.component 注册（否则会把源码打进宿主产物）。

引用类型

import type { FormExpose, TableColumn } from '@melt-js/comps-fan'