远程vue组件示例（ant design vue 版）

可供 hel-micro 消费的远程 vue2 组件示例，UI 组件库使用 ant-design-vue 1.7.8（面向 Vue 2 的 1.x 版本）。

目录约定

• src/components/ 下每个组件一个目录，目录名与导出的组件名都用大驼峰（如 DfEmpty、TierRanking）。
• 从 datafan-ui 复刻过来的组件统一用 Df 前缀（Df = datafan）。
• 公共工具与全局样式不放在 components/ 里：src/shared/（antd 按需注册、utils、rules）与 src/styles/（datamp 全局样式、iconfont）。

导出组件

| 导出 | 说明 | | --- | --- | | App / HelloWorld | 模板自带的示例组件 | | TierRanking | 从夯到拉排行榜（拖拽排序、上传图片、IndexedDB 持久化、导出图片） | | DfBreadcrumb / DfBreadcrumbItem | 面包屑：title / action 插槽、自定义分隔符、to 跳转，只有一项时按标题样式显示 | | DfEmpty | 空状态：图片 + text / description / color | | DfPageTitle / DfPageHandle / DfPageHandleItem | 列表页头部：标题、filters / actions 两栏、控件尺寸 | | DfFiltersPopover / DfFiltersPopoverItem | 筛选弹层：label 生成左侧标签，footer 插槽放按钮 | | DfMorePopover / DfMorePopoverItem | 更多操作弹层（表格行尾省略号） | | DfTransferModal | 穿梭弹窗：v-model 显隐、all-data / key-data、@ok 回传 targetKeys | | DfLargeSelect | 大数据量下拉：分页渲染、滚动加载、搜索、多选、loading | | DfInputLimit | 长度受限输入框：value / input-value 绑定，按 max / min 生成 update:rules | | DfResizable | 可拖拽分栏：start / end 插槽、横纵方向、init-width / min / max | | DfNavigation | 导航侧滑：汉堡按钮 + a-drawer、menu-category、收藏与 title 作用域插槽 | | install | Vue 插件：全局注册全部 Df* 组件，并挂载 $loading / $confirmList / $rules | | rules | 表单正则规则（regIsPhoneNumber / regMailbox / regLength 等） |

Df* 组件均提取自 datafan-ui v1.7.108（Vue 2 + ant-design-vue 1.7 的组件库），改动只有自包含相关：

• antd 组件按需引入（ant-design-vue/lib/*，通过 mixin 局部注册），宿主不需要 Vue.use(Antd)；ant-design-vue/dist/antd.css、图标字体与组件依赖的全局样式随远端产物一起下发。
• 原库用 Vue.prototype._ = lodash，这里只保留组件用到的 isNumber / isUndefined / cloneDeep（src/shared/utils.js），不再引入 lodash。
• $confirmList 原本依赖 Vue.use(Antd) 提供的 this.$confirm，改成直接调用 Modal.confirm。
• DfTransferModal 用 a-config-provider 内置了 zh_CN locale（原库默认吃宿主的 antd locale），弹窗按钮与穿梭框的「N 项」、搜索框文案都是中文。
• 顺手修掉上游的几个问题：DfLargeSelect 的 type: String | Number | Array 位运算 bug、DfResizable 非 Chrome 也进入旧版兼容分支、DfNavigation 重复的 maskClosable 绑定、DfInputLimit 直接改写 rules prop。
• 只搬了组件实际依赖的全局样式（图标按钮、弹窗分隔线、面包屑末项等），datafan-ui 的 antd 主题与 tabs / tree 样式没有搬，因此 antd 主色仍是默认蓝。

用法

import comps from '@melt-js/comps-vue2-antd';

// 1. 按具名组件使用
Vue.component('DfEmpty', comps.DfEmpty);

// 2. 或安装成插件（全局注册 Df*，并挂载 $loading / $confirmList / $rules）
Vue.use(comps);
// this.$loading.open('加载中...'); this.$loading.close();
// this.$confirmList({ title: '确认删除？', content: ['项目 A', '项目 B'] });
// this.$rules.regIsPhoneNumber({}, phone, (err) => err && console.warn(err.message));

消费方示例见 ../demo-vue2-antd：每个组件一个导航 tab（#/df-empty、#/df-breadcrumb、#/df-page、#/df-filters、#/df-more、#/df-transfer、#/df-large-select、#/df-input-limit、#/df-resizable、#/df-navigation、#/df-plugin），另有「远程组件」「排行榜」示例。

本地调试

pnpm start             # 挂载 App 组件，默认 http://localhost:20060
pnpm start:Ranking     # 单独调试 TierRanking 组件

发布远程组件

1. 先修改 package.json 里的 version 字段
2. 在 comps-vue2-antd 目录执行：

pnpm publish:stage

该命令等价于 pnpm run build && npx -y npm@11 stage publish，即先构建产物（hel_dist / hel_proxy / hel_proxy_es）再上传到 npm 的暂存区（staged publish）。

3. 到 npmjs.com 的包页面（或 Access Tokens 下方的 staged 列表）完成 2FA 审批，审批通过后版本才正式上线。

仓库里的 .npmrc 默认 registry 是 npmmirror 镜像（只读），发布目标由 package.json 的 publishConfig.registry 指定为 https://registry.npmjs.org。