gen-preview-image

根据本地微码 demo 页面自动生成组件预览图。

默认行为：

• 在当前项目根目录读取 package.json 中的 publicPath
• 自动读取 src/config/theme-config.js 中的 pxtorem.uiSize / uiHSize 作为截图视口大小，读不到时回退到 1920x1080
• 访问 http://localhost:9999/<publicPath>/demo/<组件名>
• 截图左侧预览区 .demo-wrapper .left .preview-box
• 输出到 src/workspace/custom-components/<组件名>/resources/images/mc-preview.png

使用方式

npx gen-preview-image

执行后会提示输入组件名。

npx gen-preview-image c-zdgk-zhkr-gkcx

可选参数

npx gen-preview-image c-zdgk-zhkr-gkcx --host http://localhost:9999
npx gen-preview-image c-zdgk-zhkr-gkcx --project D:/your-project
npx gen-preview-image c-zdgk-zhkr-gkcx --output ./artifacts/mc-preview.png
npx gen-preview-image c-zdgk-zhkr-gkcx --wait-ms 2000

支持参数：

• --host：本地服务地址，默认 http://localhost:9999
• --project：指定项目根目录，默认从当前目录向上查找 package.json
• --output：自定义输出路径
• --selector：自定义截图元素选择器，默认 .demo-wrapper .left .preview-box
• --wait-ms：页面等待与稳定共用时间，默认 2000

环境要求

• Node.js >= 18
• 本机安装 Microsoft Edge 或 Google Chrome
• 本地项目服务已启动，并能访问对应 demo 页面

如果浏览器不在默认路径，可设置环境变量：

GENERATE_PREVIEW_IMAGE_BROWSER=/path/to/browser