comp-hub-create skill

ComponentName/
├── index.vue            # 入口文件（必需）
├── README.md            # 组件文档（建议）
├── comp.json            # 配置文件（自动生成 name + version + __id__）
├── main.js              # UI 框架注册（可选）
├── demo/
│   ├── mini.vue         # 小窗预览（列表页展示）
│   └── full.vue         # 全屏预览（详情页展示）
└── assets/              # 静态资源（如有）

ComponentName/
├── index.jsx            # 入口文件（必需，须 default export）
├── README.md            # 组件文档（建议）
├── comp.json            # 配置文件（自动生成 name + version + __id__）
├── demo/
│   ├── mini.jsx         # 小窗预览（列表页展示）
│   └── full.jsx         # 全屏预览（详情页展示）
└── assets/              # 静态资源（如有）

<script setup>
import { ref, getCurrentInstance, onBeforeUnmount } from "vue";

const instance = getCurrentInstance();
const scaleStyle = ref({});

const unsub = (instance?.proxy as any)?.$onScaleChange?.(
  { mode: "contain", width: 320, height: 240 },
  style => { scaleStyle.value = style; }
);

onBeforeUnmount(() => unsub?.());
</script>

import { useEffect, useState } from "react";

const DemoMini = ({ onScaleChange }) => {
  const [scaleStyle, setScaleStyle] = useState({});

  useEffect(() => {
    if (!onScaleChange) return; // 非 comp-hub 环境
    return onScaleChange(
      { mode: "contain", width: 320, height: 240 },
      setScaleStyle
    );
  }, [onScaleChange]);

  return <div style={scaleStyle}>{/* 按 320×240 设计的内容 */}</div>;
};

export default DemoMini;