comps-vue2

可供 hel-micro 消费的远程 Vue 2 组件示例，由 comps-vue2-ele 拷贝而来，包名与 hel 组名调整为 comps-vue2。

• npm 包名：@melt-js/comps-vue2
• hel 组名（package.json 的 appGroupName / src/configs/subApp.js 的 LIB_NAME）：comps-vue2
• 对外暴露组件：App、HelloWorld、TierRanking、Butterflies3d、CatFace、BirdSvg、FrogExpressions、WhaleFollow
• 通用属性面板：PropsPanel（schema → tweakpane 控件）、PropsPlayground（components + schemas 实验台）
• Schema：每个组件的 propsSchema.json 生成在组件目录下（如 src/components/CatFace/propsSchema.json）
• 本地开发端口：20040（全局端口登记见根目录 ports.json）

本地调试

pnpm install

# 在 comps-vue2 目录
pnpm start          # 调试 App，http://localhost:20040
pnpm start:Hello    # 调试 HelloWorld
pnpm start:Ranking  # 调试 TierRanking
pnpm start:Butterfly  # 调试 Butterflies3d
pnpm start:CatFace  # 调试 CatFace
pnpm start:Bird  # 调试 BirdSvg
pnpm start:Frog  # 调试 FrogExpressions
pnpm start:Whale  # 调试 WhaleFollow
pnpm start:Props  # 调试属性面板 PlaygroundDemo

在外层仓库根目录也可执行 pnpm comps-vue2:dev（等价于 pnpm --filter @melt-js/comps-vue2 run start）或 pnpm comps-vue2:props（等价于 pnpm --filter @melt-js/comps-vue2 run start:Props）。

属性面板（PropsPanel / PropsPlayground）

面板本体由 @melt-js/libs-vue2-leva 提供（Vue 2 专用的 hel 远程包，和 Vue 3 版各自维护）。本包不再向外导出面板：demo 直接从面板包引入，src/PlaygroundDemo.vue 只是本包本地调试属性面板的入口，不内置任何组件或 schema。

• PropsPanel（来自面板包）：schema（组件的 propsSchema.json 数组）+ v-model。boolean 是复选框，number 是数字框（schema 里有 control.min / control.max 时是滑杆），string 是文本框，字面量联合（如 'wheel' | 'fan'）是下拉。
• PropsPlayground（来自面板包）：components（{ 组件名: 组件 }）+ schemas（{ 组件名: schema }），左侧渲染、右侧面板、顶部切换、右上角「重新挂载」。
• src/PlaygroundDemo.vue：comps-vue2 自己的接入示例——把本地组件和每个组件目录下的 propsSchema.json 交给 PropsPlayground。
• src/components/<Name>/propsSchema.json：由面板包的 vue2-leva-gen-schema（pnpm run gen:schema，start / build_dist 前自动执行）解析 props 的 JSDoc 生成；单文件组件是 Foo.propsSchema.json。
• playground.config.mjs：组件清单 + 控件的 min / max / step / options，只在生成阶段使用，运行时的面板不需要知道组件名。

组件 props 用 /** @description ... */ 注释；老组件没有 JSDoc 时，生成器会把 props 上方的 // 注释（没有注释时用属性名）补成 @description。新增组件时在 playground.config.mjs 的 components 里补一行即可。array / object 等复杂 props 暂不生成控件，组件继续使用默认值，面板下方会提示；demo 可以通过 PropsPlayground 的 presets 传入这类值。

3D 蝴蝶组件（Butterflies3d）

• 源码在 src/components/Butterflies3d，抽取自 night-demo-codepen-gulp-2019 的 butterflies-3d： 原始 HTML / CSS 保留在同目录 source/，改写的 Vue 组件在 index.vue + style.css。
• 场景由 CSS 3D 天空盒（5 张云层贴图，assets/）+ 7 只 SVG 蝴蝶组成，公转、上下飘动、扇翅 全部由 CSS 关键帧驱动，没有 JS 定时器；贴图与翅膀纹理都随组件产物一起发布，不请求外部图片。
• props：
  • butterflies：逐只配置 { size: '' | 'half' | 'third' | 'quarter', duration, wingDuration, marginTop, marginLeft }
  • paused：暂停全部动画
  • speed：全局倍速（限制在 0.1 ~ 10）
  • wingTexture：自定义翅膀纹理，默认用内置的 assets/wing-pattern.gif
• 组件根节点自己裁剪 3D 场景，不修改宿主 body；默认 height: 100% + min-height: 420px， 宿主给一个确定高度的容器即可。prefers-reduced-motion: reduce 时自动暂停。

纯 CSS 猫脸组件（CatFace）

• 源码在 src/components/CatFace，抽取自同一仓库的 cat-face； 原始 HTML 与 LESS（_melt/static/css/animals/cat.less）保留在同目录 source/。
• 猫脸完全由 CSS 绘制（圆角、旋转、边框、径向渐变），没有图片 / SVG / canvas；hover 时 耳朵立起、瞳孔放大、眼皮抬起、腮红浮现、嘴角上扬。
• props：
  • active：把 hover 表情锁成打开状态（触屏、演示用）
  • scale：缩放，0（默认）表示跟随窄屏媒体查询，也可显式传 0.3 ~ 2
  • background：舞台背景色，默认 #f6f7a7，传 transparent 可跟随宿主
• 组件根节点默认 height: 100% + min-height: 420px，内部恢复 content-box， 不受宿主全局 box-sizing 影响。

SVG 小鸟组件（BirdSvg）

• 源码在 src/components/BirdSvg，抽取自同一仓库的 bird-svg； 原始 HTML / CSS 保留在 source/。
• 小鸟、翅膀、瞳孔、影子都是 SVG 路径，扇翅 / 浮动 / 眼珠张望 / 影子缩放全部是 CSS 关键帧。
• props：paused 暂停；speed 全局倍速（0.1 ~ 10）。
• 原 #bird / #leftwing 等 id 选择器改成类名；画布随容器宽度等比缩放， 天空占根节点高度的 68%。

青蛙表情组件（FrogExpressions）

• 源码在 src/components/FrogExpressions，抽取自同一仓库的 frog-expression； 原始 HTML / CSS 保留在 source/。
• 12 个纯 CSS 表情（微笑、心动、吐舌、大笑、害羞、闪亮、发呆、犯困、生气、晕乎、哭泣、恼火）， 每个表情仍用 #frog-1 ~ #frog-12 作为局部样式锚点。
• props：paused 暂停全部表情动画。
• 画廊用 flex 换行 + gap，窄屏自动 2~3 列；每个组件实例内各 ID 只出现一次。

鲸鱼跟随组件（WhaleFollow）

• 源码在 src/components/WhaleFollow，抽取自 CodePen「Whale | SVG & JS」（Diego Leme，MIT）； 原始 JS / 许可证保留在 source/，44 片切片数据在 whaleData.js。
• 44 片 SVG 切片各带一个 z 延迟跟随鼠标，形成拖尾；原实现每帧重写 innerHTML， 组件改为只更新每片 <g> 的 transform，并用 1200×800 viewBox 适配任意容器。
• props：paused、ease（默认 6）、maxSpeed（默认 150）、fps（默认 30）； 暴露 reset() 把鲸鱼放回中央。

发布远程组件

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

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。