SuperAPI AI 工具集

uiux-react-jsx-packager

前端与建站

查看项目

更新于 10-16 08:49

技能介绍

用途:把已有的 React UI/UX 演示整合成一个自包含的 .jsx 文件,便于携带与运行。

主要能力:输出单个新 .jsx 文件(不覆盖已有文件,除非明确要求);根组件用 export default 导出;运行时依赖仅保留 React,移除 react-router、lucide-react、echarts、classnames、zustand 等;样式通过 <style> 注入或内联 style 保留;图标库替换为内联 SVG 组件;图片替换为 base64 data URL 或确定性占位符;导航改用组件状态实现,可选同步 location.hash;保留全部交互、动画与状态逻辑,不做简化;优先嵌入已编译 CSS 以保持间距、颜色、阴影一致。

使用方式:按顺序执行——先发现结构与运行时表面(入口、路由、页面切换、全局 Provider、全局 CSS 与主题 token、需移除的第三方依赖);选择视觉对齐策略(首选嵌入构建产物 CSS 到 APP_CSS 字符串并注入,保持 className 不变);创建合并目标文件;把组件、页面、hooks、工具代码合并进单文件并移除所有非 React 导入;移除 TypeScript 语法(interface、type、泛型、类型注解、as 断言);替换第三方依赖(路由改状态路由、图标改内联 SVG、图表改 SVG/Canvas 并保留 tooltip 与回调、提供数据表回退);处理图片与外部资源;将根组件接到真实页面;最后验证。

验证门禁:静态门禁要求仅一条 react 导入、有 export default、无 require()/import()、无资产导入,可运行 python3 scripts/verify_singlefile_jsx.py /path/to/Merged.jsx;运行时门禁要求首屏不白屏且能完成最小交互 smoke,可用 bash scripts/preview_single_jsx_vite.sh /path/to/Merged.jsx;可携带性门禁要求不依赖远程资源、不泄露绝对路径。

适用场景:需要把多文件 React 演示交付为单文件、离线可跑、便于分享或嵌入时。

限制:像素级一致为可选增强,需固定机器、OS、浏览器版本、viewport、DPR 与字体,并禁用动画后做截图 diff;默认强门禁仅为可携带可跑、不白屏、导航可用。npx playwright install 等命令可能下载浏览器二进制,存在联网与供应链风险,离线环境应使用已安装的固定版本。其余细节暂未提供。