远程vue组件示例

可供hel-micro消费的远程vue组件示例

导出组件

| 导出 | 说明 | | --- | --- | | App / HelloWorld | 模板自带的示例组件 | | TierRanking | 从夯到拉排行榜（拖拽排序、上传图片、IndexedDB 持久化、导出图片） | | TcClamp | 多行文本截断；原实现 el-tooltip / tc-button / resize-detector 分别换成内置 tooltip（深色气泡 + 箭头，支持 placement / tip-width）/ 原生 button / ResizeObserver | | TcBlock | 面板容器：title / rightTool 插槽、最小化、浏览器全屏、shadow | | TcMore | 折叠容器：title / tool 插槽，grid 过渡展开 | | TcIcon | 图标包装：name 透传任意图标类名，glyph 直接写字形 | | TcButton / TcButtonGroup | 按钮 / 按钮组，保留 forceEnabled + TcDialog 强制启用逻辑 | | TcSelect | 下拉选择：原生 select，providers = { id, text, value } | | TcRadio / TcRadioButton / TcRadioGroup | 单选 / 分段按钮 / 单选组，原生 radio 实现 | | TcDialog | 弹窗：visible.sync、title、width / height、loading、footer 插槽、标题栏拖拽（draggable 默认开），事件与 el-dialog 对齐 | | TcLoading | 19 种纯 CSS loading（loader-01 ~ loader-19） | | TcLetterAvatar | 字母头像（username / initials / size / rounded / src） |

以上 Tc* 组件均提取自 think-vuele 的 packages/*，不依赖 element-ui：原来的 el-button / el-select / el-radio-* / el-dialog / el-collapse 等全部换成原生实现，el-icon-* 换成内置字符 / 图标类名。与上游行为的差异见各组件源码头部注释。

消费方用法见 ../demo-vue2-ele：每个组件一个导航 tab（#/tc-clamp、#/tc-block、#/tc-more、#/tc-icon、#/tc-button、#/tc-select、#/tc-radio、#/tc-dialog、#/tc-loading、#/tc-letter-avatar），另有「远程组件」「排行榜」示例。

发布远程组件

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

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。