@melt-js/demo-vue2-antd

Vue 2 的 hel 宿主（消费方）示例：preFetchLib 从 unpkg 加载 @melt-js/comps-vue2-antd（UI 组件库使用 ant-design-vue 1.x，随远程产物下发，宿主不安装 ant-design-vue），页面里同时直接复用 tpl-vue2-admin-ele 的本地源码，并用 preFetchLib 演示 @melt-js/libs-utils / @melt-js/libs-lodash 两个远程库的方法。

本包由 demo-vue2-ele 拷贝而来，把消费的远程组件换成 comps-vue2-antd、端口改为 30060，页面结构与示例保持不变。

页面使用 vue-router（hash 模式） 把示例拆成可切换的页面，顶部导航栏同时显示当前示例的简介，示例区右上角有全屏按钮（只放大当前示例的组件预览区，基于 vue-fullscreen 的 pageOnly + teleport 模式）。其中 Df* 示例逐个 tab 演示 comps-vue2-antd 从 datafan-ui 提取的远程组件；每页保留原有的多个示例，并在末尾追加一个 LevaPlayground 属性面板块（左侧组件 + 右侧属性面板）。

| 项 | 值 | | --- | --- | | npm 包名 | @melt-js/demo-vue2-antd | | unpkg 入口 | https://unpkg.com/@melt-js/demo-vue2-antd/dist/index.html | | 端口 | 30060 | | 消费的远程组件 | comps-vue2-antd（https://unpkg.com/@melt-js/comps-vue2-antd/hel_dist/hel-meta.json） | | 远程组件 UI 库 | [email protected]（随远程产物下发，宿主不安装） | | 消费的远程库 | libs-utils、libs-lodash（线上同样指向 unpkg 的 hel-meta.json） | | 路由 | [email protected]，hash 模式 | | 全屏 | [email protected]（legacy），pageOnly + teleport（不调用浏览器原生全屏） |

示例路由

| 路由 | 导航文案 | 内容 | | --- | --- | --- | | #/ | 简介 | demo 概览：远程依赖、端口、远端地址与示例入口 | | #/remote-comp | 远程组件 | comps-vue2-antd 的 App（内部再依赖 HelloWorld），红色边框区域内渲染 | | #/ranking | 排行榜 | comps-vue2-antd 的 TierRanking 排行榜：拖拽排序、上传图片、评级编辑、IndexedDB 持久化、导出图片 | | #/df-empty | DfEmpty | 空状态：text / description / color | | #/df-breadcrumb | DfBreadcrumb | 面包屑：title / action 插槽、自定义 / 图标分隔符、to 跳转、单项标题样式 | | #/df-page | DfPageTitle | 列表页头部：DfPageTitle + DfPageHandle（filters / actions）+ DfPageHandleItem | | #/df-filters | DfFiltersPopover | 筛选弹层：DfFiltersPopoverItem 的 label 标签、footer 插槽 | | #/df-more | DfMorePopover | 更多操作弹层：行尾省略号 + DfMorePopoverItem 列表 | | #/df-transfer | DfTransferModal | 穿梭弹窗：v-model 显隐、all-data / key-data、@ok 回传 | | #/df-large-select | DfLargeSelect | 大数据量下拉：3000 条分页渲染、滚动加载、搜索、多选、loading | | #/df-input-limit | DfInputLimit | 长度受限输入框：v-model、textarea、rules.sync 生成校验规则 | | #/df-resizable | DfResizable | 可拖拽分栏：横向 / 纵向、init-width / min / max | | #/df-navigation | DfNavigation | 导航侧滑：汉堡按钮 + a-drawer、收藏、title 作用域插槽 | | #/df-plugin | Df 插件 | Vue.use(comps)：全局 DfEmpty、$loading、$confirmList、$rules | | #/libs | 远程 libs | libs-utils / libs-lodash 的调用结果 | | #/tpl-comp | tpl 源码 | 通过 workspace 链接直接复用 tpl-vue2-admin-ele 的 Hamburger |

约定：

• hash 模式：demo 的构建产物会通过 unpkg 上的 dist/index.html 打开，history 模式在那种静态文件路径下会 404。
• 路由清单在 src/router/index.js，每条路由的 meta.title / meta.description 同时驱动导航栏 tab 与下方那行简介；新增示例只要加一条路由。
• 全屏按钮只把当前示例标记为 data-demo-preview 的组件预览区送进全屏，页面标题、简介、说明与页脚都留在屏幕外；全屏借用 vue-fullscreen 4.x legacy 的 pageOnly + teleport 模式：预览区临时挂到 body、用 fixed 铺满视口，退出时还原到页面原位置，不调用浏览器原生 Fullscreen API（iframe 内也可用）。预览区右下角提供「退出全屏」浮层按钮，Esc 也可退出；切换路由时会自动退出并还原。
• 需要全屏的示例在组件预览区外包一层 <demo-preview>；简介页没有预览区，在路由 meta 里标记 fullscreen: false，工具栏不显示全屏按钮。

文件结构

demo-vue2-antd/src
├── App.vue                   # demo 外壳：导航栏 + 示例舞台（含全屏按钮）+ router-view
├── components/
│   ├── DemoNavbar.vue        # 顶部导航栏：示例 tab + 当前示例简介
│   ├── DemoPreview.vue       # 组件预览区：全屏目标 + 「退出全屏」浮层按钮
│   └── ScreenfullButton.vue  # 示例区全屏按钮（无 UI 组件库依赖）
├── configs/app.js            # demo 展示信息（名称 / 端口 / 远端地址 / 仓库链接）
├── df/components.js           # 从远程 comps-vue2-antd 解构出 Df* 组件 + missingDf / installComps
├── router/index.js           # 示例路由（hash 模式）
├── styles/                   # base.css（变量与重置）+ demo-shell.css（外壳）+ df-demo.css（Df* 示例布局）
├── views/                    # 简介 / 远程组件 / 排行榜 / Df* 示例 / libs / tpl
└── libs/remoteLibs.js        # 两个远程 libs 的预加载（Promise 复用）

关键流程

1. src/main.js：bindVueRuntime({ Vue }) 把宿主 vue 挂到 window.Vue，远程组件 external 的 vue 会复用这一份。

2. src/main.js：preFetchLib('comps-vue2-antd', { custom: { host } }) 预加载远程组件；hel 组名（comps-vue2-antd）与 scoped npm 包名（@melt-js/comps-vue2-antd）解耦，因此用 custom.host 指向 unpkg 上的 hel_dist/hel-meta.json。host 按 process.env.NODE_ENV 分支：生产走 unpkg，开发走 http://localhost:20060。

3. src/main.js + src/libs/remoteLibs.js：入口处和远程组件一起并行预加载两个远程库（loadRemoteLibs() 内部是 Promise.all + preFetchLib，重复调用复用同一个 Promise）。页面里直接调用它们的方法展示结果：

   • libs-utils：num.canBeNum / num.random、regs.en / regs.enSnake、myMod.sayHelloToHel
   • libs-lodash：chunk / uniq / camelCase / orderBy、myUtils.regs.enOrNum、VERSION

   两个库都不在宿主的 package.json 依赖里（lodash 也没有安装），全部来自远程产物。host 同样按环境切换：生产指向 unpkg 的 hel-meta.json，开发指向各自 dev server（http://localhost:10010 / http://localhost:10020），并用 skipFetchHelMeta 跳过 dev server 上不存在的 hel-meta.json、直接解析 index.html 里的入口脚本。

4. src/router/index.js：#/libs 路由的组件工厂先 await loadRemoteLibs()（复用入口预加载的同一个 Promise，通常已 resolve），再动态 import 示例组件，组件内直接读 getRemoteLibs() 的已加载结果；其余示例同样按路由懒加载。

5. src/App.vue：导航栏 + 示例舞台；示例舞台持有 router-view 与全屏按钮，ScreenfullButton 的目标是当前页面 DemoPreview 渲染的 [data-demo-preview]。

6. src/views/RemoteCompView.vue / RankingView.vue：渲染远程组件 comps.App / comps.TierRanking（静态导入只拿到 hel-lib-proxy 的空壳代理，真正的组件代码由入口的 preFetchLib 载入）。

排行榜远程组件（TierRanking）

• 组件源码在 comps-vue2-antd/src/components/TierRanking，由 src/components/index.js 与 libProperties 一起导出，宿主只需 preFetchLib 后挂载，不打包它的代码与样式。
• 组件能力：拖拽排序 / 跨评级拖动 / 拖到删除区删除、上传图片（自动压缩）、评级改名 / 改色 / 增删、显示图片名、固定评级高度、导出图片（按需加载 html2canvas）、IndexedDB 持久化（persist / storageKey 可关可换）。
• 本地联调：pnpm comps-vue2-antd:dev（20060）的产物直接可用，打开 http://localhost:30060/#/ranking。
• 线上：远端 hel-meta.json 会同时下发排行榜所在的 chunk（webpack 把组件拆成了独立 chunk），因此生产构建（远端走 unpkg）同样能渲染 #/ranking；只有远端版本早于排行榜组件时，页面才会显示「远端产物没有导出 TierRanking」的提示。
• 排行榜状态存在 IndexedDB（库名 tier-ranking-db，storageKey=demo-vue2-antd-ranking），用组件自带的「重置排行榜」即可恢复默认评级。

datafan-ui 的 Df* 组件（逐个 tab）

• 组件源码在 comps-vue2-antd/src/components（breadcrumb / empty / page-table / filters-popover / more-popover / navigation-slider / resizable / transfer-modal / large-select / input-limit / full-loading / confirm-list），由 components/index.js 与 libProperties 一起导出。
• ant-design-vue 组件按需引入、antd.css 与 datamp-icons 图标字体随远端产物下发，宿主不安装 ant-design-vue；$confirmList 直接用 Modal.confirm，不依赖宿主的 Vue.use(Antd)。
• 演示页统一从 src/df/components.js 解构组件；远端版本较旧（没有导出对应组件）时，页面显示「没有导出 xxx」的提示，不影响其他 tab。
• 「Df 插件」页（#/df-plugin）演示 Vue.use(comps)：全局注册 Df* 组件，并挂载 $loading / $confirmList / $rules；页面里的 <df-empty> 没有局部注册，安装后才渲染。
• 本地联调：pnpm comps-vue2-antd:dev（20060）后打开 http://localhost:30060/#/df-empty。
• 线上（生产构建走 unpkg）需要先把带 Df* 的新版 comps-vue2-antd 发布到 npm；当前远端 2026.11.5 还没有这些组件，页面会显示「没有导出 xxx」的提示，其余示例不受影响。

本地开发

# 终端 1：起远程组件（20060）
pnpm comps-vue2-antd:dev

# 终端 2、3：起两个远程库（10010 / 10020，页面上的 libs 演示区需要）
pnpm libs-utils:dev
pnpm libs-lodash:dev

# 终端 4：起宿主（30060）
pnpm demo-vue2-antd:dev

打开 http://localhost:30060 。libs 的预加载在入口处 Promise.all 里，和远程组件一起完成，所以三个 dev server 都要先起好；缺任意一个都会在控制台打印 loadApp err，页面不会挂载。

构建 / 发布

pnpm demo-vue2-antd:build                                        # 产出 dist/
pnpm --filter @melt-js/demo-vue2-antd run publish:stage          # build → npm stage 暂存，等待 2FA 审批

• vue.config.js 在生产构建时使用相对 publicPath，发布后 unpkg 上的 dist/index.html 可直接加载同目录资源；hash 路由同样可用。
• process.env.NODE_ENV 由 vue-cli 静态注入，生产包里只会保留 unpkg 的地址；线上从 unpkg 加载 libs 的前提是 @melt-js/libs-utils / @melt-js/libs-lodash 已发布。
• files 白名单只发布 dist/ 与 README。

下载示例

示例区工具栏（全屏按钮左侧）的「下载示例」会按当前页面下载一份单文件「HTML + CDN」示例： Vue 与 hel-micro 走 CDN，组件由 preFetchLib 在运行时从 unpkg 拉取，双击即可打开，用于演示 / 推广 hel 的接法。

• 模板：src/configs/downloadExampleTemplate.js
• 拼装：src/configs/downloadPage.js（替换组件名 / 参数 / 背景，生成 hel-micro-<组件名>.html）
• 数据：src/configs/downloadExamples.js（路由 → comps-vue2-antd 的组件与参数，新增示例页在这里补一条）
• 没有远程组件的页面（简介 / libs / 模板源码等）下载 FALLBACK_EXAMPLE