sloth-d2c-mcp 1.0.4-beta100 → 1.0.4-beta101
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/cli/sloth-server.log
CHANGED
|
@@ -1620,3 +1620,1641 @@ setConfig 332
|
|
|
1620
1620
|
"defaultFramework": "react"
|
|
1621
1621
|
}
|
|
1622
1622
|
[2026-01-27T11:12:21.317Z] ✅ OpenCV.js 初始化成功
|
|
1623
|
+
[2026-01-28T12:17:12.179Z] Stdio模式启动
|
|
1624
|
+
[2026-01-28T12:17:12.179Z] VSCode 日志服务初始化成功
|
|
1625
|
+
[2026-01-28T12:17:12.179Z] 配置文件路径: /Users/quanli/Library/Preferences/d2c-mcp-nodejs/config.json
|
|
1626
|
+
[2026-01-28T12:17:12.180Z] 配置文件存在: 是
|
|
1627
|
+
[VSCodeLogger] 连接错误: connect ECONNREFUSED 127.0.0.1:13142
|
|
1628
|
+
[VSCodeLogger] 连接已关闭
|
|
1629
|
+
setConfig 332
|
|
1630
|
+
[2026-01-28T12:17:12.195Z] 当前配置内容: {
|
|
1631
|
+
"mcp": {
|
|
1632
|
+
"figmaApiKey": "332"
|
|
1633
|
+
},
|
|
1634
|
+
"fileConfigs": {
|
|
1635
|
+
"figmaPlugin20609Frame828FRAME": {
|
|
1636
|
+
"convertSetting": {
|
|
1637
|
+
"framework": "react",
|
|
1638
|
+
"convertScale": 1,
|
|
1639
|
+
"colorValue": "hex"
|
|
1640
|
+
},
|
|
1641
|
+
"imageSetting": {
|
|
1642
|
+
"imageStorageType": "local",
|
|
1643
|
+
"imageStorageScale": 1,
|
|
1644
|
+
"imageIconType": "svg",
|
|
1645
|
+
"imageStoragePath": "./static",
|
|
1646
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1647
|
+
"ossRegion": "",
|
|
1648
|
+
"ossAccessKeyId": "",
|
|
1649
|
+
"ossAccessKeySecret": "",
|
|
1650
|
+
"ossBucket": "",
|
|
1651
|
+
"ossPath": "",
|
|
1652
|
+
"ossCdnDomain": "",
|
|
1653
|
+
"imageStorageApiUrl": "",
|
|
1654
|
+
"imageStorageApiFileField": "file",
|
|
1655
|
+
"imageStorageApiUrlField": "url",
|
|
1656
|
+
"imageStorageApiCustomHeader": "",
|
|
1657
|
+
"imageStorageApiCustomBody": ""
|
|
1658
|
+
},
|
|
1659
|
+
"promptSetting": {
|
|
1660
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1661
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1662
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1663
|
+
},
|
|
1664
|
+
"fileKey": "figmaPlugin20609Frame828FRAME"
|
|
1665
|
+
},
|
|
1666
|
+
"figmaPlugin44811Group2085663065GROUP": {
|
|
1667
|
+
"convertSetting": {
|
|
1668
|
+
"framework": "react",
|
|
1669
|
+
"convertScale": 1,
|
|
1670
|
+
"colorValue": "hex"
|
|
1671
|
+
},
|
|
1672
|
+
"imageSetting": {
|
|
1673
|
+
"imageStorageType": "local",
|
|
1674
|
+
"imageStorageScale": 1,
|
|
1675
|
+
"imageIconType": "svg",
|
|
1676
|
+
"imageStoragePath": "./static",
|
|
1677
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1678
|
+
"ossRegion": "",
|
|
1679
|
+
"ossAccessKeyId": "",
|
|
1680
|
+
"ossAccessKeySecret": "",
|
|
1681
|
+
"ossBucket": "",
|
|
1682
|
+
"ossPath": "",
|
|
1683
|
+
"ossCdnDomain": "",
|
|
1684
|
+
"imageStorageApiUrl": "",
|
|
1685
|
+
"imageStorageApiFileField": "file",
|
|
1686
|
+
"imageStorageApiUrlField": "url",
|
|
1687
|
+
"imageStorageApiCustomHeader": "",
|
|
1688
|
+
"imageStorageApiCustomBody": ""
|
|
1689
|
+
},
|
|
1690
|
+
"promptSetting": {
|
|
1691
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1692
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1693
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1694
|
+
},
|
|
1695
|
+
"fileKey": "figmaPlugin44811Group2085663065GROUP"
|
|
1696
|
+
},
|
|
1697
|
+
"figmaPlugin44483Group1000009681GROUP": {
|
|
1698
|
+
"convertSetting": {
|
|
1699
|
+
"framework": "react",
|
|
1700
|
+
"convertScale": 1,
|
|
1701
|
+
"colorValue": "hex"
|
|
1702
|
+
},
|
|
1703
|
+
"imageSetting": {
|
|
1704
|
+
"imageStorageType": "local",
|
|
1705
|
+
"imageStorageScale": 1,
|
|
1706
|
+
"imageIconType": "svg",
|
|
1707
|
+
"imageStoragePath": "./static",
|
|
1708
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1709
|
+
"ossRegion": "",
|
|
1710
|
+
"ossAccessKeyId": "",
|
|
1711
|
+
"ossAccessKeySecret": "",
|
|
1712
|
+
"ossBucket": "",
|
|
1713
|
+
"ossPath": "",
|
|
1714
|
+
"ossCdnDomain": "",
|
|
1715
|
+
"imageStorageApiUrl": "",
|
|
1716
|
+
"imageStorageApiFileField": "file",
|
|
1717
|
+
"imageStorageApiUrlField": "url",
|
|
1718
|
+
"imageStorageApiCustomHeader": "",
|
|
1719
|
+
"imageStorageApiCustomBody": ""
|
|
1720
|
+
},
|
|
1721
|
+
"promptSetting": {
|
|
1722
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1723
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1724
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1725
|
+
},
|
|
1726
|
+
"fileKey": "figmaPlugin44483Group1000009681GROUP"
|
|
1727
|
+
},
|
|
1728
|
+
"figmaPlugin1211282Group1171276513GROUP": {
|
|
1729
|
+
"convertSetting": {
|
|
1730
|
+
"framework": "react",
|
|
1731
|
+
"convertScale": 1,
|
|
1732
|
+
"colorValue": "hex"
|
|
1733
|
+
},
|
|
1734
|
+
"imageSetting": {
|
|
1735
|
+
"imageStorageType": "local",
|
|
1736
|
+
"imageStorageScale": 1,
|
|
1737
|
+
"imageIconType": "svg",
|
|
1738
|
+
"imageStoragePath": "./static",
|
|
1739
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1740
|
+
"ossRegion": "",
|
|
1741
|
+
"ossAccessKeyId": "",
|
|
1742
|
+
"ossAccessKeySecret": "",
|
|
1743
|
+
"ossBucket": "",
|
|
1744
|
+
"ossPath": "",
|
|
1745
|
+
"ossCdnDomain": "",
|
|
1746
|
+
"imageStorageApiUrl": "",
|
|
1747
|
+
"imageStorageApiFileField": "file",
|
|
1748
|
+
"imageStorageApiUrlField": "url",
|
|
1749
|
+
"imageStorageApiCustomHeader": "",
|
|
1750
|
+
"imageStorageApiCustomBody": ""
|
|
1751
|
+
},
|
|
1752
|
+
"promptSetting": {
|
|
1753
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1754
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1755
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1756
|
+
},
|
|
1757
|
+
"fileKey": "figmaPlugin1211282Group1171276513GROUP"
|
|
1758
|
+
},
|
|
1759
|
+
"figmaPlugin1251580Frame1312316728FRAME": {
|
|
1760
|
+
"convertSetting": {
|
|
1761
|
+
"framework": "react",
|
|
1762
|
+
"convertScale": 1,
|
|
1763
|
+
"colorValue": "hex"
|
|
1764
|
+
},
|
|
1765
|
+
"imageSetting": {
|
|
1766
|
+
"imageStorageType": "local",
|
|
1767
|
+
"imageStorageScale": 1,
|
|
1768
|
+
"imageIconType": "svg",
|
|
1769
|
+
"imageStoragePath": "./static",
|
|
1770
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1771
|
+
"ossRegion": "",
|
|
1772
|
+
"ossAccessKeyId": "",
|
|
1773
|
+
"ossAccessKeySecret": "",
|
|
1774
|
+
"ossBucket": "",
|
|
1775
|
+
"ossPath": "",
|
|
1776
|
+
"ossCdnDomain": "",
|
|
1777
|
+
"imageStorageApiUrl": "",
|
|
1778
|
+
"imageStorageApiFileField": "file",
|
|
1779
|
+
"imageStorageApiUrlField": "url",
|
|
1780
|
+
"imageStorageApiCustomHeader": "",
|
|
1781
|
+
"imageStorageApiCustomBody": ""
|
|
1782
|
+
},
|
|
1783
|
+
"promptSetting": {
|
|
1784
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1785
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1786
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1787
|
+
},
|
|
1788
|
+
"fileKey": "figmaPlugin1251580Frame1312316728FRAME"
|
|
1789
|
+
},
|
|
1790
|
+
"figmaPlugin1271673Group1000013340GROUP": {
|
|
1791
|
+
"convertSetting": {
|
|
1792
|
+
"framework": "react",
|
|
1793
|
+
"convertScale": 1,
|
|
1794
|
+
"colorValue": "hex"
|
|
1795
|
+
},
|
|
1796
|
+
"imageSetting": {
|
|
1797
|
+
"imageStorageType": "local",
|
|
1798
|
+
"imageStorageScale": 1,
|
|
1799
|
+
"imageIconType": "svg",
|
|
1800
|
+
"imageStoragePath": "./static",
|
|
1801
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1802
|
+
"ossRegion": "",
|
|
1803
|
+
"ossAccessKeyId": "",
|
|
1804
|
+
"ossAccessKeySecret": "",
|
|
1805
|
+
"ossBucket": "",
|
|
1806
|
+
"ossPath": "",
|
|
1807
|
+
"ossCdnDomain": "",
|
|
1808
|
+
"imageStorageApiUrl": "",
|
|
1809
|
+
"imageStorageApiFileField": "file",
|
|
1810
|
+
"imageStorageApiUrlField": "url",
|
|
1811
|
+
"imageStorageApiCustomHeader": "",
|
|
1812
|
+
"imageStorageApiCustomBody": ""
|
|
1813
|
+
},
|
|
1814
|
+
"promptSetting": {
|
|
1815
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1816
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1817
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1818
|
+
},
|
|
1819
|
+
"fileKey": "figmaPlugin1271673Group1000013340GROUP"
|
|
1820
|
+
},
|
|
1821
|
+
"figmaPlugin1302104Group2085663066GROUP": {
|
|
1822
|
+
"convertSetting": {
|
|
1823
|
+
"framework": "react",
|
|
1824
|
+
"convertScale": 1,
|
|
1825
|
+
"colorValue": "hex"
|
|
1826
|
+
},
|
|
1827
|
+
"imageSetting": {
|
|
1828
|
+
"imageStorageType": "local",
|
|
1829
|
+
"imageStorageScale": 1,
|
|
1830
|
+
"imageIconType": "svg",
|
|
1831
|
+
"imageStoragePath": "./static",
|
|
1832
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1833
|
+
"ossRegion": "",
|
|
1834
|
+
"ossAccessKeyId": "",
|
|
1835
|
+
"ossAccessKeySecret": "",
|
|
1836
|
+
"ossBucket": "",
|
|
1837
|
+
"ossPath": "",
|
|
1838
|
+
"ossCdnDomain": "",
|
|
1839
|
+
"imageStorageApiUrl": "",
|
|
1840
|
+
"imageStorageApiFileField": "file",
|
|
1841
|
+
"imageStorageApiUrlField": "url",
|
|
1842
|
+
"imageStorageApiCustomHeader": "",
|
|
1843
|
+
"imageStorageApiCustomBody": ""
|
|
1844
|
+
},
|
|
1845
|
+
"promptSetting": {
|
|
1846
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1847
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1848
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1849
|
+
},
|
|
1850
|
+
"fileKey": "figmaPlugin1302104Group2085663066GROUP"
|
|
1851
|
+
},
|
|
1852
|
+
"figmaPlugin1302001Group1000013339GROUP": {
|
|
1853
|
+
"convertSetting": {
|
|
1854
|
+
"framework": "react",
|
|
1855
|
+
"convertScale": 1,
|
|
1856
|
+
"colorValue": "hex"
|
|
1857
|
+
},
|
|
1858
|
+
"imageSetting": {
|
|
1859
|
+
"imageStorageType": "local",
|
|
1860
|
+
"imageStorageScale": 1,
|
|
1861
|
+
"imageIconType": "svg",
|
|
1862
|
+
"imageStoragePath": "./static",
|
|
1863
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1864
|
+
"ossRegion": "",
|
|
1865
|
+
"ossAccessKeyId": "",
|
|
1866
|
+
"ossAccessKeySecret": "",
|
|
1867
|
+
"ossBucket": "",
|
|
1868
|
+
"ossPath": "",
|
|
1869
|
+
"ossCdnDomain": "",
|
|
1870
|
+
"imageStorageApiUrl": "",
|
|
1871
|
+
"imageStorageApiFileField": "file",
|
|
1872
|
+
"imageStorageApiUrlField": "url",
|
|
1873
|
+
"imageStorageApiCustomHeader": "",
|
|
1874
|
+
"imageStorageApiCustomBody": ""
|
|
1875
|
+
},
|
|
1876
|
+
"promptSetting": {
|
|
1877
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1878
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1879
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1880
|
+
},
|
|
1881
|
+
"fileKey": "figmaPlugin1302001Group1000013339GROUP"
|
|
1882
|
+
},
|
|
1883
|
+
"figmaPlugin1302066编组7GROUP": {
|
|
1884
|
+
"convertSetting": {
|
|
1885
|
+
"framework": "react",
|
|
1886
|
+
"convertScale": 1,
|
|
1887
|
+
"colorValue": "hex"
|
|
1888
|
+
},
|
|
1889
|
+
"imageSetting": {
|
|
1890
|
+
"imageStorageType": "local",
|
|
1891
|
+
"imageStorageScale": 1,
|
|
1892
|
+
"imageIconType": "svg",
|
|
1893
|
+
"imageStoragePath": "./static",
|
|
1894
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1895
|
+
"ossRegion": "",
|
|
1896
|
+
"ossAccessKeyId": "",
|
|
1897
|
+
"ossAccessKeySecret": "",
|
|
1898
|
+
"ossBucket": "",
|
|
1899
|
+
"ossPath": "",
|
|
1900
|
+
"ossCdnDomain": "",
|
|
1901
|
+
"imageStorageApiUrl": "",
|
|
1902
|
+
"imageStorageApiFileField": "file",
|
|
1903
|
+
"imageStorageApiUrlField": "url",
|
|
1904
|
+
"imageStorageApiCustomHeader": "",
|
|
1905
|
+
"imageStorageApiCustomBody": ""
|
|
1906
|
+
},
|
|
1907
|
+
"promptSetting": {
|
|
1908
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1909
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1910
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1911
|
+
},
|
|
1912
|
+
"fileKey": "figmaPlugin1302066编组7GROUP"
|
|
1913
|
+
},
|
|
1914
|
+
"figmaPlugin1442673Group2085663067GROUP": {
|
|
1915
|
+
"convertSetting": {
|
|
1916
|
+
"framework": "react",
|
|
1917
|
+
"convertScale": 1,
|
|
1918
|
+
"colorValue": "hex"
|
|
1919
|
+
},
|
|
1920
|
+
"imageSetting": {
|
|
1921
|
+
"imageStorageType": "local",
|
|
1922
|
+
"imageStorageScale": 1,
|
|
1923
|
+
"imageIconType": "svg",
|
|
1924
|
+
"imageStoragePath": "./static",
|
|
1925
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1926
|
+
"ossRegion": "",
|
|
1927
|
+
"ossAccessKeyId": "",
|
|
1928
|
+
"ossAccessKeySecret": "",
|
|
1929
|
+
"ossBucket": "",
|
|
1930
|
+
"ossPath": "",
|
|
1931
|
+
"ossCdnDomain": "",
|
|
1932
|
+
"imageStorageApiUrl": "",
|
|
1933
|
+
"imageStorageApiFileField": "file",
|
|
1934
|
+
"imageStorageApiUrlField": "url",
|
|
1935
|
+
"imageStorageApiCustomHeader": "",
|
|
1936
|
+
"imageStorageApiCustomBody": ""
|
|
1937
|
+
},
|
|
1938
|
+
"promptSetting": {
|
|
1939
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1940
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1941
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1942
|
+
},
|
|
1943
|
+
"fileKey": "figmaPlugin1442673Group2085663067GROUP"
|
|
1944
|
+
},
|
|
1945
|
+
"figmaPlugin1472907Group2085663069GROUP": {
|
|
1946
|
+
"convertSetting": {
|
|
1947
|
+
"framework": "react",
|
|
1948
|
+
"convertScale": 1,
|
|
1949
|
+
"colorValue": "hex"
|
|
1950
|
+
},
|
|
1951
|
+
"imageSetting": {
|
|
1952
|
+
"imageStorageType": "local",
|
|
1953
|
+
"imageStorageScale": 1,
|
|
1954
|
+
"imageIconType": "svg",
|
|
1955
|
+
"imageStoragePath": "./static",
|
|
1956
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1957
|
+
"ossRegion": "",
|
|
1958
|
+
"ossAccessKeyId": "",
|
|
1959
|
+
"ossAccessKeySecret": "",
|
|
1960
|
+
"ossBucket": "",
|
|
1961
|
+
"ossPath": "",
|
|
1962
|
+
"ossCdnDomain": "",
|
|
1963
|
+
"imageStorageApiUrl": "",
|
|
1964
|
+
"imageStorageApiFileField": "file",
|
|
1965
|
+
"imageStorageApiUrlField": "url",
|
|
1966
|
+
"imageStorageApiCustomHeader": "",
|
|
1967
|
+
"imageStorageApiCustomBody": ""
|
|
1968
|
+
},
|
|
1969
|
+
"promptSetting": {
|
|
1970
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1971
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
1972
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
1973
|
+
},
|
|
1974
|
+
"fileKey": "figmaPlugin1472907Group2085663069GROUP"
|
|
1975
|
+
},
|
|
1976
|
+
"figmaPlugin1472906Group2085663068GROUP": {
|
|
1977
|
+
"convertSetting": {
|
|
1978
|
+
"framework": "react",
|
|
1979
|
+
"convertScale": 1,
|
|
1980
|
+
"colorValue": "hex"
|
|
1981
|
+
},
|
|
1982
|
+
"imageSetting": {
|
|
1983
|
+
"imageStorageType": "local",
|
|
1984
|
+
"imageStorageScale": 1,
|
|
1985
|
+
"imageIconType": "svg",
|
|
1986
|
+
"imageStoragePath": "./static",
|
|
1987
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
1988
|
+
"ossRegion": "",
|
|
1989
|
+
"ossAccessKeyId": "",
|
|
1990
|
+
"ossAccessKeySecret": "",
|
|
1991
|
+
"ossBucket": "",
|
|
1992
|
+
"ossPath": "",
|
|
1993
|
+
"ossCdnDomain": "",
|
|
1994
|
+
"imageStorageApiUrl": "",
|
|
1995
|
+
"imageStorageApiFileField": "file",
|
|
1996
|
+
"imageStorageApiUrlField": "url",
|
|
1997
|
+
"imageStorageApiCustomHeader": "",
|
|
1998
|
+
"imageStorageApiCustomBody": ""
|
|
1999
|
+
},
|
|
2000
|
+
"promptSetting": {
|
|
2001
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2002
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2003
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2004
|
+
},
|
|
2005
|
+
"fileKey": "figmaPlugin1472906Group2085663068GROUP"
|
|
2006
|
+
},
|
|
2007
|
+
"figmaPlugin1512961Group2085663070GROUP": {
|
|
2008
|
+
"convertSetting": {
|
|
2009
|
+
"framework": "react",
|
|
2010
|
+
"convertScale": 1,
|
|
2011
|
+
"colorValue": "hex"
|
|
2012
|
+
},
|
|
2013
|
+
"imageSetting": {
|
|
2014
|
+
"imageStorageType": "local",
|
|
2015
|
+
"imageStorageScale": 1,
|
|
2016
|
+
"imageIconType": "svg",
|
|
2017
|
+
"imageStoragePath": "./static",
|
|
2018
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2019
|
+
"ossRegion": "",
|
|
2020
|
+
"ossAccessKeyId": "",
|
|
2021
|
+
"ossAccessKeySecret": "",
|
|
2022
|
+
"ossBucket": "",
|
|
2023
|
+
"ossPath": "",
|
|
2024
|
+
"ossCdnDomain": "",
|
|
2025
|
+
"imageStorageApiUrl": "",
|
|
2026
|
+
"imageStorageApiFileField": "file",
|
|
2027
|
+
"imageStorageApiUrlField": "url",
|
|
2028
|
+
"imageStorageApiCustomHeader": "",
|
|
2029
|
+
"imageStorageApiCustomBody": ""
|
|
2030
|
+
},
|
|
2031
|
+
"promptSetting": {
|
|
2032
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2033
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2034
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2035
|
+
},
|
|
2036
|
+
"fileKey": "figmaPlugin1512961Group2085663070GROUP"
|
|
2037
|
+
},
|
|
2038
|
+
"figmaPlugin1542962Group2085663071GROUP": {
|
|
2039
|
+
"convertSetting": {
|
|
2040
|
+
"framework": "react",
|
|
2041
|
+
"convertScale": 1,
|
|
2042
|
+
"colorValue": "hex"
|
|
2043
|
+
},
|
|
2044
|
+
"imageSetting": {
|
|
2045
|
+
"imageStorageType": "local",
|
|
2046
|
+
"imageStorageScale": 1,
|
|
2047
|
+
"imageIconType": "svg",
|
|
2048
|
+
"imageStoragePath": "./static",
|
|
2049
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2050
|
+
"ossRegion": "",
|
|
2051
|
+
"ossAccessKeyId": "",
|
|
2052
|
+
"ossAccessKeySecret": "",
|
|
2053
|
+
"ossBucket": "",
|
|
2054
|
+
"ossPath": "",
|
|
2055
|
+
"ossCdnDomain": "",
|
|
2056
|
+
"imageStorageApiUrl": "",
|
|
2057
|
+
"imageStorageApiFileField": "file",
|
|
2058
|
+
"imageStorageApiUrlField": "url",
|
|
2059
|
+
"imageStorageApiCustomHeader": "",
|
|
2060
|
+
"imageStorageApiCustomBody": ""
|
|
2061
|
+
},
|
|
2062
|
+
"promptSetting": {
|
|
2063
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2064
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2065
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2066
|
+
},
|
|
2067
|
+
"fileKey": "figmaPlugin1542962Group2085663071GROUP"
|
|
2068
|
+
},
|
|
2069
|
+
"figmaPlugin1741144Group1000013340GROUP": {
|
|
2070
|
+
"convertSetting": {
|
|
2071
|
+
"framework": "react",
|
|
2072
|
+
"convertScale": 1,
|
|
2073
|
+
"colorValue": "hex"
|
|
2074
|
+
},
|
|
2075
|
+
"imageSetting": {
|
|
2076
|
+
"imageStorageType": "local",
|
|
2077
|
+
"imageStorageScale": 1,
|
|
2078
|
+
"imageIconType": "svg",
|
|
2079
|
+
"imageStoragePath": "./static",
|
|
2080
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2081
|
+
"ossRegion": "",
|
|
2082
|
+
"ossAccessKeyId": "",
|
|
2083
|
+
"ossAccessKeySecret": "",
|
|
2084
|
+
"ossBucket": "",
|
|
2085
|
+
"ossPath": "",
|
|
2086
|
+
"ossCdnDomain": "",
|
|
2087
|
+
"imageStorageApiUrl": "",
|
|
2088
|
+
"imageStorageApiFileField": "file",
|
|
2089
|
+
"imageStorageApiUrlField": "url",
|
|
2090
|
+
"imageStorageApiCustomHeader": "",
|
|
2091
|
+
"imageStorageApiCustomBody": ""
|
|
2092
|
+
},
|
|
2093
|
+
"promptSetting": {
|
|
2094
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2095
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2096
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2097
|
+
},
|
|
2098
|
+
"fileKey": "figmaPlugin1741144Group1000013340GROUP"
|
|
2099
|
+
},
|
|
2100
|
+
"figmaPlugin1741100点击反馈FRAME": {
|
|
2101
|
+
"convertSetting": {
|
|
2102
|
+
"framework": "react",
|
|
2103
|
+
"convertScale": 1,
|
|
2104
|
+
"colorValue": "hex"
|
|
2105
|
+
},
|
|
2106
|
+
"imageSetting": {
|
|
2107
|
+
"imageStorageType": "local",
|
|
2108
|
+
"imageStorageScale": 1,
|
|
2109
|
+
"imageIconType": "svg",
|
|
2110
|
+
"imageStoragePath": "./static",
|
|
2111
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2112
|
+
"ossRegion": "",
|
|
2113
|
+
"ossAccessKeyId": "",
|
|
2114
|
+
"ossAccessKeySecret": "",
|
|
2115
|
+
"ossBucket": "",
|
|
2116
|
+
"ossPath": "",
|
|
2117
|
+
"ossCdnDomain": "",
|
|
2118
|
+
"imageStorageApiUrl": "",
|
|
2119
|
+
"imageStorageApiFileField": "file",
|
|
2120
|
+
"imageStorageApiUrlField": "url",
|
|
2121
|
+
"imageStorageApiCustomHeader": "",
|
|
2122
|
+
"imageStorageApiCustomBody": ""
|
|
2123
|
+
},
|
|
2124
|
+
"promptSetting": {
|
|
2125
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2126
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2127
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2128
|
+
},
|
|
2129
|
+
"fileKey": "figmaPlugin1741100点击反馈FRAME"
|
|
2130
|
+
},
|
|
2131
|
+
"figmaPlugin137717Group1171276479GROUP": {
|
|
2132
|
+
"convertSetting": {
|
|
2133
|
+
"framework": "react",
|
|
2134
|
+
"convertScale": 1,
|
|
2135
|
+
"colorValue": "hex"
|
|
2136
|
+
},
|
|
2137
|
+
"imageSetting": {
|
|
2138
|
+
"imageStorageType": "local",
|
|
2139
|
+
"imageStorageScale": 1,
|
|
2140
|
+
"imageIconType": "svg",
|
|
2141
|
+
"imageStoragePath": "./static",
|
|
2142
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2143
|
+
"ossRegion": "",
|
|
2144
|
+
"ossAccessKeyId": "",
|
|
2145
|
+
"ossAccessKeySecret": "",
|
|
2146
|
+
"ossBucket": "",
|
|
2147
|
+
"ossPath": "",
|
|
2148
|
+
"ossCdnDomain": "",
|
|
2149
|
+
"imageStorageApiUrl": "",
|
|
2150
|
+
"imageStorageApiFileField": "file",
|
|
2151
|
+
"imageStorageApiUrlField": "url",
|
|
2152
|
+
"imageStorageApiCustomHeader": "",
|
|
2153
|
+
"imageStorageApiCustomBody": ""
|
|
2154
|
+
},
|
|
2155
|
+
"promptSetting": {
|
|
2156
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2157
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2158
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2159
|
+
},
|
|
2160
|
+
"fileKey": "figmaPlugin137717Group1171276479GROUP"
|
|
2161
|
+
},
|
|
2162
|
+
"figmaPlugin121841Group4009GROUP": {
|
|
2163
|
+
"convertSetting": {
|
|
2164
|
+
"framework": "react",
|
|
2165
|
+
"convertScale": 1,
|
|
2166
|
+
"colorValue": "hex"
|
|
2167
|
+
},
|
|
2168
|
+
"imageSetting": {
|
|
2169
|
+
"imageStorageType": "local",
|
|
2170
|
+
"imageStorageScale": 1,
|
|
2171
|
+
"imageIconType": "svg",
|
|
2172
|
+
"imageStoragePath": "./static",
|
|
2173
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2174
|
+
"ossRegion": "",
|
|
2175
|
+
"ossAccessKeyId": "",
|
|
2176
|
+
"ossAccessKeySecret": "",
|
|
2177
|
+
"ossBucket": "",
|
|
2178
|
+
"ossPath": "",
|
|
2179
|
+
"ossCdnDomain": "",
|
|
2180
|
+
"imageStorageApiUrl": "",
|
|
2181
|
+
"imageStorageApiFileField": "file",
|
|
2182
|
+
"imageStorageApiUrlField": "url",
|
|
2183
|
+
"imageStorageApiCustomHeader": "",
|
|
2184
|
+
"imageStorageApiCustomBody": ""
|
|
2185
|
+
},
|
|
2186
|
+
"promptSetting": {
|
|
2187
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2188
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2189
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2190
|
+
},
|
|
2191
|
+
"fileKey": "figmaPlugin121841Group4009GROUP"
|
|
2192
|
+
},
|
|
2193
|
+
"figmaPlugin137676Group1000013356GROUP": {
|
|
2194
|
+
"convertSetting": {
|
|
2195
|
+
"framework": "react",
|
|
2196
|
+
"convertScale": 1,
|
|
2197
|
+
"colorValue": "hex"
|
|
2198
|
+
},
|
|
2199
|
+
"imageSetting": {
|
|
2200
|
+
"imageStorageType": "local",
|
|
2201
|
+
"imageStorageScale": 1,
|
|
2202
|
+
"imageIconType": "svg",
|
|
2203
|
+
"imageStoragePath": "./static",
|
|
2204
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2205
|
+
"ossRegion": "",
|
|
2206
|
+
"ossAccessKeyId": "",
|
|
2207
|
+
"ossAccessKeySecret": "",
|
|
2208
|
+
"ossBucket": "",
|
|
2209
|
+
"ossPath": "",
|
|
2210
|
+
"ossCdnDomain": "",
|
|
2211
|
+
"imageStorageApiUrl": "",
|
|
2212
|
+
"imageStorageApiFileField": "file",
|
|
2213
|
+
"imageStorageApiUrlField": "url",
|
|
2214
|
+
"imageStorageApiCustomHeader": "",
|
|
2215
|
+
"imageStorageApiCustomBody": ""
|
|
2216
|
+
},
|
|
2217
|
+
"promptSetting": {
|
|
2218
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2219
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2220
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2221
|
+
},
|
|
2222
|
+
"fileKey": "figmaPlugin137676Group1000013356GROUP"
|
|
2223
|
+
},
|
|
2224
|
+
"figmaPlugin48432Group40024GROUP": {
|
|
2225
|
+
"convertSetting": {
|
|
2226
|
+
"framework": "react",
|
|
2227
|
+
"convertScale": 1,
|
|
2228
|
+
"colorValue": "hex"
|
|
2229
|
+
},
|
|
2230
|
+
"imageSetting": {
|
|
2231
|
+
"imageStorageType": "local",
|
|
2232
|
+
"imageStorageScale": 1,
|
|
2233
|
+
"imageIconType": "svg",
|
|
2234
|
+
"imageStoragePath": "./static",
|
|
2235
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2236
|
+
"ossRegion": "",
|
|
2237
|
+
"ossAccessKeyId": "",
|
|
2238
|
+
"ossAccessKeySecret": "",
|
|
2239
|
+
"ossBucket": "",
|
|
2240
|
+
"ossPath": "",
|
|
2241
|
+
"ossCdnDomain": "",
|
|
2242
|
+
"imageStorageApiUrl": "",
|
|
2243
|
+
"imageStorageApiFileField": "file",
|
|
2244
|
+
"imageStorageApiUrlField": "url",
|
|
2245
|
+
"imageStorageApiCustomHeader": "",
|
|
2246
|
+
"imageStorageApiCustomBody": ""
|
|
2247
|
+
},
|
|
2248
|
+
"promptSetting": {
|
|
2249
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2250
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2251
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2252
|
+
},
|
|
2253
|
+
"fileKey": "figmaPlugin48432Group40024GROUP"
|
|
2254
|
+
},
|
|
2255
|
+
"figmaPlugin2491536首页完整版FRAME": {
|
|
2256
|
+
"convertSetting": {
|
|
2257
|
+
"framework": "react",
|
|
2258
|
+
"convertScale": 1,
|
|
2259
|
+
"colorValue": "hex"
|
|
2260
|
+
},
|
|
2261
|
+
"imageSetting": {
|
|
2262
|
+
"imageStorageType": "local",
|
|
2263
|
+
"imageStorageScale": 1,
|
|
2264
|
+
"imageIconType": "svg",
|
|
2265
|
+
"imageStoragePath": "./static",
|
|
2266
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2267
|
+
"ossRegion": "",
|
|
2268
|
+
"ossAccessKeyId": "",
|
|
2269
|
+
"ossAccessKeySecret": "",
|
|
2270
|
+
"ossBucket": "",
|
|
2271
|
+
"ossPath": "",
|
|
2272
|
+
"ossCdnDomain": "",
|
|
2273
|
+
"imageStorageApiUrl": "",
|
|
2274
|
+
"imageStorageApiFileField": "file",
|
|
2275
|
+
"imageStorageApiUrlField": "url",
|
|
2276
|
+
"imageStorageApiCustomHeader": "",
|
|
2277
|
+
"imageStorageApiCustomBody": ""
|
|
2278
|
+
},
|
|
2279
|
+
"promptSetting": {
|
|
2280
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2281
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2282
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2283
|
+
},
|
|
2284
|
+
"fileKey": "figmaPlugin2491536首页完整版FRAME"
|
|
2285
|
+
},
|
|
2286
|
+
"IyXbuWzbgePvTUS8ooY8NH": {
|
|
2287
|
+
"convertSetting": {
|
|
2288
|
+
"framework": "react",
|
|
2289
|
+
"convertScale": 1,
|
|
2290
|
+
"colorValue": "hex"
|
|
2291
|
+
},
|
|
2292
|
+
"imageSetting": {
|
|
2293
|
+
"imageStorageType": "local",
|
|
2294
|
+
"imageStorageScale": 1,
|
|
2295
|
+
"imageIconType": "svg",
|
|
2296
|
+
"imageStoragePath": "./static",
|
|
2297
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2298
|
+
"ossRegion": "",
|
|
2299
|
+
"ossAccessKeyId": "",
|
|
2300
|
+
"ossAccessKeySecret": "",
|
|
2301
|
+
"ossBucket": "",
|
|
2302
|
+
"ossPath": "",
|
|
2303
|
+
"ossCdnDomain": "",
|
|
2304
|
+
"imageStorageApiUrl": "",
|
|
2305
|
+
"imageStorageApiFileField": "file",
|
|
2306
|
+
"imageStorageApiUrlField": "url",
|
|
2307
|
+
"imageStorageApiCustomHeader": "",
|
|
2308
|
+
"imageStorageApiCustomBody": ""
|
|
2309
|
+
},
|
|
2310
|
+
"promptSetting": {
|
|
2311
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2312
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2313
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n"
|
|
2314
|
+
},
|
|
2315
|
+
"fileKey": "IyXbuWzbgePvTUS8ooY8NH"
|
|
2316
|
+
},
|
|
2317
|
+
"XdBsQRCbMfT6L0iay3ZJ7o": {
|
|
2318
|
+
"convertSetting": {
|
|
2319
|
+
"framework": "react",
|
|
2320
|
+
"convertScale": 1,
|
|
2321
|
+
"colorValue": "hex"
|
|
2322
|
+
},
|
|
2323
|
+
"imageSetting": {
|
|
2324
|
+
"imageStorageType": "local",
|
|
2325
|
+
"imageStorageScale": 1,
|
|
2326
|
+
"imageIconType": "svg",
|
|
2327
|
+
"imageStoragePath": "./static",
|
|
2328
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2329
|
+
"ossRegion": "",
|
|
2330
|
+
"ossAccessKeyId": "",
|
|
2331
|
+
"ossAccessKeySecret": "",
|
|
2332
|
+
"ossBucket": "",
|
|
2333
|
+
"ossPath": "",
|
|
2334
|
+
"ossCdnDomain": "",
|
|
2335
|
+
"imageStorageApiUrl": "",
|
|
2336
|
+
"imageStorageApiFileField": "file",
|
|
2337
|
+
"imageStorageApiUrlField": "url",
|
|
2338
|
+
"imageStorageApiCustomHeader": "",
|
|
2339
|
+
"imageStorageApiCustomBody": ""
|
|
2340
|
+
}
|
|
2341
|
+
},
|
|
2342
|
+
"figmaPlugin1558MinibarINSTANCE": {
|
|
2343
|
+
"convertSetting": {
|
|
2344
|
+
"framework": "react",
|
|
2345
|
+
"convertScale": 1,
|
|
2346
|
+
"colorValue": "hex"
|
|
2347
|
+
},
|
|
2348
|
+
"imageSetting": {
|
|
2349
|
+
"imageStorageType": "local",
|
|
2350
|
+
"imageStorageScale": 1,
|
|
2351
|
+
"imageIconType": "svg",
|
|
2352
|
+
"imageStoragePath": "./static",
|
|
2353
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2354
|
+
"ossRegion": "",
|
|
2355
|
+
"ossAccessKeyId": "",
|
|
2356
|
+
"ossAccessKeySecret": "",
|
|
2357
|
+
"ossBucket": "",
|
|
2358
|
+
"ossPath": "",
|
|
2359
|
+
"ossCdnDomain": "",
|
|
2360
|
+
"imageStorageApiUrl": "",
|
|
2361
|
+
"imageStorageApiFileField": "file",
|
|
2362
|
+
"imageStorageApiUrlField": "url",
|
|
2363
|
+
"imageStorageApiCustomHeader": "",
|
|
2364
|
+
"imageStorageApiCustomBody": ""
|
|
2365
|
+
},
|
|
2366
|
+
"promptSetting": {
|
|
2367
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2368
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2369
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2370
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2371
|
+
},
|
|
2372
|
+
"fileKey": "figmaPlugin1558MinibarINSTANCE"
|
|
2373
|
+
},
|
|
2374
|
+
"figmaPlugin324234Frame2119904519FRAME": {
|
|
2375
|
+
"convertSetting": {
|
|
2376
|
+
"framework": "react",
|
|
2377
|
+
"convertScale": 1,
|
|
2378
|
+
"colorValue": "hex"
|
|
2379
|
+
},
|
|
2380
|
+
"imageSetting": {
|
|
2381
|
+
"imageStorageType": "local",
|
|
2382
|
+
"imageStorageScale": 1,
|
|
2383
|
+
"imageIconType": "svg",
|
|
2384
|
+
"imageStoragePath": "./static",
|
|
2385
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2386
|
+
"ossRegion": "",
|
|
2387
|
+
"ossAccessKeyId": "",
|
|
2388
|
+
"ossAccessKeySecret": "",
|
|
2389
|
+
"ossBucket": "",
|
|
2390
|
+
"ossPath": "",
|
|
2391
|
+
"ossCdnDomain": "",
|
|
2392
|
+
"imageStorageApiUrl": "",
|
|
2393
|
+
"imageStorageApiFileField": "file",
|
|
2394
|
+
"imageStorageApiUrlField": "url",
|
|
2395
|
+
"imageStorageApiCustomHeader": "",
|
|
2396
|
+
"imageStorageApiCustomBody": ""
|
|
2397
|
+
},
|
|
2398
|
+
"promptSetting": {
|
|
2399
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2400
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2401
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2402
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2403
|
+
},
|
|
2404
|
+
"fileKey": "figmaPlugin324234Frame2119904519FRAME"
|
|
2405
|
+
},
|
|
2406
|
+
"figmaPlugin376026Group1000009984GROUP": {
|
|
2407
|
+
"convertSetting": {
|
|
2408
|
+
"framework": "react",
|
|
2409
|
+
"convertScale": 1,
|
|
2410
|
+
"colorValue": "hex"
|
|
2411
|
+
},
|
|
2412
|
+
"imageSetting": {
|
|
2413
|
+
"imageStorageType": "local",
|
|
2414
|
+
"imageStorageScale": 1,
|
|
2415
|
+
"imageIconType": "svg",
|
|
2416
|
+
"imageStoragePath": "./static",
|
|
2417
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2418
|
+
"ossRegion": "",
|
|
2419
|
+
"ossAccessKeyId": "",
|
|
2420
|
+
"ossAccessKeySecret": "",
|
|
2421
|
+
"ossBucket": "",
|
|
2422
|
+
"ossPath": "",
|
|
2423
|
+
"ossCdnDomain": "",
|
|
2424
|
+
"imageStorageApiUrl": "",
|
|
2425
|
+
"imageStorageApiFileField": "file",
|
|
2426
|
+
"imageStorageApiUrlField": "url",
|
|
2427
|
+
"imageStorageApiCustomHeader": "",
|
|
2428
|
+
"imageStorageApiCustomBody": ""
|
|
2429
|
+
},
|
|
2430
|
+
"promptSetting": {
|
|
2431
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2432
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2433
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2434
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2435
|
+
},
|
|
2436
|
+
"fileKey": "figmaPlugin376026Group1000009984GROUP"
|
|
2437
|
+
},
|
|
2438
|
+
"figmaPlugin324339Frame2119904516FRAME": {
|
|
2439
|
+
"convertSetting": {
|
|
2440
|
+
"framework": "react",
|
|
2441
|
+
"convertScale": 1,
|
|
2442
|
+
"colorValue": "hex"
|
|
2443
|
+
},
|
|
2444
|
+
"imageSetting": {
|
|
2445
|
+
"imageStorageType": "local",
|
|
2446
|
+
"imageStorageScale": 1,
|
|
2447
|
+
"imageIconType": "svg",
|
|
2448
|
+
"imageStoragePath": "./static",
|
|
2449
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2450
|
+
"ossRegion": "",
|
|
2451
|
+
"ossAccessKeyId": "",
|
|
2452
|
+
"ossAccessKeySecret": "",
|
|
2453
|
+
"ossBucket": "",
|
|
2454
|
+
"ossPath": "",
|
|
2455
|
+
"ossCdnDomain": "",
|
|
2456
|
+
"imageStorageApiUrl": "",
|
|
2457
|
+
"imageStorageApiFileField": "file",
|
|
2458
|
+
"imageStorageApiUrlField": "url",
|
|
2459
|
+
"imageStorageApiCustomHeader": "",
|
|
2460
|
+
"imageStorageApiCustomBody": ""
|
|
2461
|
+
},
|
|
2462
|
+
"promptSetting": {
|
|
2463
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2464
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2465
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2466
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2467
|
+
},
|
|
2468
|
+
"fileKey": "figmaPlugin324339Frame2119904516FRAME"
|
|
2469
|
+
},
|
|
2470
|
+
"figmaPlugin511250Frame1312316713FRAME": {
|
|
2471
|
+
"convertSetting": {
|
|
2472
|
+
"framework": "react",
|
|
2473
|
+
"convertScale": 1,
|
|
2474
|
+
"colorValue": "hex"
|
|
2475
|
+
},
|
|
2476
|
+
"imageSetting": {
|
|
2477
|
+
"imageStorageType": "local",
|
|
2478
|
+
"imageStorageScale": 1,
|
|
2479
|
+
"imageIconType": "svg",
|
|
2480
|
+
"imageStoragePath": "./static",
|
|
2481
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2482
|
+
"ossRegion": "",
|
|
2483
|
+
"ossAccessKeyId": "",
|
|
2484
|
+
"ossAccessKeySecret": "",
|
|
2485
|
+
"ossBucket": "",
|
|
2486
|
+
"ossPath": "",
|
|
2487
|
+
"ossCdnDomain": "",
|
|
2488
|
+
"imageStorageApiUrl": "",
|
|
2489
|
+
"imageStorageApiFileField": "file",
|
|
2490
|
+
"imageStorageApiUrlField": "url",
|
|
2491
|
+
"imageStorageApiCustomHeader": "",
|
|
2492
|
+
"imageStorageApiCustomBody": ""
|
|
2493
|
+
},
|
|
2494
|
+
"promptSetting": {
|
|
2495
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2496
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2497
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2498
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2499
|
+
},
|
|
2500
|
+
"fileKey": "figmaPlugin511250Frame1312316713FRAME"
|
|
2501
|
+
},
|
|
2502
|
+
"figmaPlugin324022Frame2119904209FRAME": {
|
|
2503
|
+
"convertSetting": {
|
|
2504
|
+
"framework": "react",
|
|
2505
|
+
"convertScale": 1,
|
|
2506
|
+
"colorValue": "hex"
|
|
2507
|
+
},
|
|
2508
|
+
"imageSetting": {
|
|
2509
|
+
"imageStorageType": "local",
|
|
2510
|
+
"imageStorageScale": 1,
|
|
2511
|
+
"imageIconType": "svg",
|
|
2512
|
+
"imageStoragePath": "./static",
|
|
2513
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2514
|
+
"ossRegion": "",
|
|
2515
|
+
"ossAccessKeyId": "",
|
|
2516
|
+
"ossAccessKeySecret": "",
|
|
2517
|
+
"ossBucket": "",
|
|
2518
|
+
"ossPath": "",
|
|
2519
|
+
"ossCdnDomain": "",
|
|
2520
|
+
"imageStorageApiUrl": "",
|
|
2521
|
+
"imageStorageApiFileField": "file",
|
|
2522
|
+
"imageStorageApiUrlField": "url",
|
|
2523
|
+
"imageStorageApiCustomHeader": "",
|
|
2524
|
+
"imageStorageApiCustomBody": ""
|
|
2525
|
+
},
|
|
2526
|
+
"promptSetting": {
|
|
2527
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2528
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2529
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2530
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2531
|
+
},
|
|
2532
|
+
"fileKey": "figmaPlugin324022Frame2119904209FRAME"
|
|
2533
|
+
},
|
|
2534
|
+
"figmaPlugin322940Frame2119904516FRAME": {
|
|
2535
|
+
"convertSetting": {
|
|
2536
|
+
"framework": "react",
|
|
2537
|
+
"convertScale": 1,
|
|
2538
|
+
"colorValue": "hex"
|
|
2539
|
+
},
|
|
2540
|
+
"imageSetting": {
|
|
2541
|
+
"imageStorageType": "local",
|
|
2542
|
+
"imageStorageScale": 1,
|
|
2543
|
+
"imageIconType": "svg",
|
|
2544
|
+
"imageStoragePath": "./static",
|
|
2545
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2546
|
+
"ossRegion": "",
|
|
2547
|
+
"ossAccessKeyId": "",
|
|
2548
|
+
"ossAccessKeySecret": "",
|
|
2549
|
+
"ossBucket": "",
|
|
2550
|
+
"ossPath": "",
|
|
2551
|
+
"ossCdnDomain": "",
|
|
2552
|
+
"imageStorageApiUrl": "",
|
|
2553
|
+
"imageStorageApiFileField": "file",
|
|
2554
|
+
"imageStorageApiUrlField": "url",
|
|
2555
|
+
"imageStorageApiCustomHeader": "",
|
|
2556
|
+
"imageStorageApiCustomBody": ""
|
|
2557
|
+
},
|
|
2558
|
+
"promptSetting": {
|
|
2559
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2560
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2561
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2562
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2563
|
+
},
|
|
2564
|
+
"fileKey": "figmaPlugin322940Frame2119904516FRAME"
|
|
2565
|
+
},
|
|
2566
|
+
"figmaPlugin991137不凡现场演出聚合FRAME": {
|
|
2567
|
+
"convertSetting": {
|
|
2568
|
+
"framework": "react",
|
|
2569
|
+
"convertScale": 1,
|
|
2570
|
+
"colorValue": "hex"
|
|
2571
|
+
},
|
|
2572
|
+
"imageSetting": {
|
|
2573
|
+
"imageStorageType": "local",
|
|
2574
|
+
"imageStorageScale": 1,
|
|
2575
|
+
"imageIconType": "svg",
|
|
2576
|
+
"imageStoragePath": "./static",
|
|
2577
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2578
|
+
"ossRegion": "",
|
|
2579
|
+
"ossAccessKeyId": "",
|
|
2580
|
+
"ossAccessKeySecret": "",
|
|
2581
|
+
"ossBucket": "",
|
|
2582
|
+
"ossPath": "",
|
|
2583
|
+
"ossCdnDomain": "",
|
|
2584
|
+
"imageStorageApiUrl": "",
|
|
2585
|
+
"imageStorageApiFileField": "file",
|
|
2586
|
+
"imageStorageApiUrlField": "url",
|
|
2587
|
+
"imageStorageApiCustomHeader": "",
|
|
2588
|
+
"imageStorageApiCustomBody": ""
|
|
2589
|
+
},
|
|
2590
|
+
"promptSetting": {
|
|
2591
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2592
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2593
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2594
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2595
|
+
},
|
|
2596
|
+
"fileKey": "figmaPlugin991137不凡现场演出聚合FRAME"
|
|
2597
|
+
},
|
|
2598
|
+
"figmaPlugin12110918评委工作台FRAME": {
|
|
2599
|
+
"convertSetting": {
|
|
2600
|
+
"framework": "react",
|
|
2601
|
+
"convertScale": 1,
|
|
2602
|
+
"colorValue": "hex"
|
|
2603
|
+
},
|
|
2604
|
+
"imageSetting": {
|
|
2605
|
+
"imageStorageType": "local",
|
|
2606
|
+
"imageStorageScale": 1,
|
|
2607
|
+
"imageIconType": "svg",
|
|
2608
|
+
"imageStoragePath": "./static",
|
|
2609
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2610
|
+
"ossRegion": "",
|
|
2611
|
+
"ossAccessKeyId": "",
|
|
2612
|
+
"ossAccessKeySecret": "",
|
|
2613
|
+
"ossBucket": "",
|
|
2614
|
+
"ossPath": "",
|
|
2615
|
+
"ossCdnDomain": "",
|
|
2616
|
+
"imageStorageApiUrl": "",
|
|
2617
|
+
"imageStorageApiFileField": "file",
|
|
2618
|
+
"imageStorageApiUrlField": "url",
|
|
2619
|
+
"imageStorageApiCustomHeader": "",
|
|
2620
|
+
"imageStorageApiCustomBody": ""
|
|
2621
|
+
},
|
|
2622
|
+
"promptSetting": {
|
|
2623
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2624
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2625
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2626
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2627
|
+
},
|
|
2628
|
+
"fileKey": "figmaPlugin12110918评委工作台FRAME"
|
|
2629
|
+
},
|
|
2630
|
+
"figmaPlugin322799Frame2119904517FRAME": {
|
|
2631
|
+
"convertSetting": {
|
|
2632
|
+
"framework": "react",
|
|
2633
|
+
"convertScale": 1,
|
|
2634
|
+
"colorValue": "hex"
|
|
2635
|
+
},
|
|
2636
|
+
"imageSetting": {
|
|
2637
|
+
"imageStorageType": "local",
|
|
2638
|
+
"imageStorageScale": 1,
|
|
2639
|
+
"imageIconType": "svg",
|
|
2640
|
+
"imageStoragePath": "./static",
|
|
2641
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2642
|
+
"ossRegion": "",
|
|
2643
|
+
"ossAccessKeyId": "",
|
|
2644
|
+
"ossAccessKeySecret": "",
|
|
2645
|
+
"ossBucket": "",
|
|
2646
|
+
"ossPath": "",
|
|
2647
|
+
"ossCdnDomain": "",
|
|
2648
|
+
"imageStorageApiUrl": "",
|
|
2649
|
+
"imageStorageApiFileField": "file",
|
|
2650
|
+
"imageStorageApiUrlField": "url",
|
|
2651
|
+
"imageStorageApiCustomHeader": "",
|
|
2652
|
+
"imageStorageApiCustomBody": ""
|
|
2653
|
+
},
|
|
2654
|
+
"promptSetting": {
|
|
2655
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2656
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2657
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2658
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2659
|
+
},
|
|
2660
|
+
"fileKey": "figmaPlugin322799Frame2119904517FRAME"
|
|
2661
|
+
},
|
|
2662
|
+
"figmaPlugin12111204Group1000013340GROUP": {
|
|
2663
|
+
"convertSetting": {
|
|
2664
|
+
"framework": "react",
|
|
2665
|
+
"convertScale": 1,
|
|
2666
|
+
"colorValue": "hex"
|
|
2667
|
+
},
|
|
2668
|
+
"imageSetting": {
|
|
2669
|
+
"imageStorageType": "local",
|
|
2670
|
+
"imageStorageScale": 1,
|
|
2671
|
+
"imageIconType": "svg",
|
|
2672
|
+
"imageStoragePath": "./static",
|
|
2673
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2674
|
+
"ossRegion": "",
|
|
2675
|
+
"ossAccessKeyId": "",
|
|
2676
|
+
"ossAccessKeySecret": "",
|
|
2677
|
+
"ossBucket": "",
|
|
2678
|
+
"ossPath": "",
|
|
2679
|
+
"ossCdnDomain": "",
|
|
2680
|
+
"imageStorageApiUrl": "",
|
|
2681
|
+
"imageStorageApiFileField": "file",
|
|
2682
|
+
"imageStorageApiUrlField": "url",
|
|
2683
|
+
"imageStorageApiCustomHeader": "",
|
|
2684
|
+
"imageStorageApiCustomBody": ""
|
|
2685
|
+
},
|
|
2686
|
+
"promptSetting": {
|
|
2687
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2688
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2689
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2690
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字"
|
|
2691
|
+
},
|
|
2692
|
+
"fileKey": "figmaPlugin12111204Group1000013340GROUP"
|
|
2693
|
+
},
|
|
2694
|
+
"figmaPlugin2712103Frame49FRAME": {
|
|
2695
|
+
"convertSetting": {
|
|
2696
|
+
"framework": "taro",
|
|
2697
|
+
"convertScale": 1,
|
|
2698
|
+
"colorValue": "hex"
|
|
2699
|
+
},
|
|
2700
|
+
"imageSetting": {
|
|
2701
|
+
"imageStorageType": "local",
|
|
2702
|
+
"imageStorageScale": 1,
|
|
2703
|
+
"imageIconType": "svg",
|
|
2704
|
+
"imageStoragePath": "./static",
|
|
2705
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2706
|
+
"ossRegion": "",
|
|
2707
|
+
"ossAccessKeyId": "",
|
|
2708
|
+
"ossAccessKeySecret": "",
|
|
2709
|
+
"ossBucket": "",
|
|
2710
|
+
"ossPath": "",
|
|
2711
|
+
"ossCdnDomain": "",
|
|
2712
|
+
"imageStorageApiUrl": "",
|
|
2713
|
+
"imageStorageApiFileField": "file",
|
|
2714
|
+
"imageStorageApiUrlField": "url",
|
|
2715
|
+
"imageStorageApiCustomHeader": "",
|
|
2716
|
+
"imageStorageApiCustomBody": ""
|
|
2717
|
+
},
|
|
2718
|
+
"promptSetting": {
|
|
2719
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **像素单位**：只能在TailwindCSS相关类名中出现px，其他地方出现像素单位需替换为rpx\n- **图片处理**：图片仅能通过import引入本地图片文件。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2720
|
+
"aggregationOptimizePrompt": "**注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **像素单位**：只能在TailwindCSS相关类名中出现px，其他地方出现像素单位需替换为rpx\n- **图片处理**：图片仅能通过import引入本地图片文件。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 `<div><user-card></user-card></div>` 转为 `<View><UserCard /></View>`，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2721
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n图片已经下载成功，先识别出图片文件下载路径，保证每个文件引入图片路径正确。专注于正确的文件创建和代码写入以及模块、图片的引用，确保项目结构的合理性和可维护性。\n",
|
|
2722
|
+
"frameworkGuidePrompt": "",
|
|
2723
|
+
"enableFrameworkGuide": false,
|
|
2724
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
2725
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2726
|
+
}
|
|
2727
|
+
},
|
|
2728
|
+
"figmaPlugin2832618Group1000011529GROUP": {
|
|
2729
|
+
"convertSetting": {
|
|
2730
|
+
"framework": "react",
|
|
2731
|
+
"convertScale": 1,
|
|
2732
|
+
"colorValue": "hex"
|
|
2733
|
+
},
|
|
2734
|
+
"imageSetting": {
|
|
2735
|
+
"imageStorageType": "local",
|
|
2736
|
+
"imageStorageScale": 1,
|
|
2737
|
+
"imageIconType": "svg",
|
|
2738
|
+
"imageStoragePath": "./static",
|
|
2739
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2740
|
+
"ossRegion": "",
|
|
2741
|
+
"ossAccessKeyId": "",
|
|
2742
|
+
"ossAccessKeySecret": "",
|
|
2743
|
+
"ossBucket": "",
|
|
2744
|
+
"ossPath": "",
|
|
2745
|
+
"ossCdnDomain": "",
|
|
2746
|
+
"imageStorageApiUrl": "",
|
|
2747
|
+
"imageStorageApiFileField": "file",
|
|
2748
|
+
"imageStorageApiUrlField": "url",
|
|
2749
|
+
"imageStorageApiCustomHeader": "",
|
|
2750
|
+
"imageStorageApiCustomBody": ""
|
|
2751
|
+
},
|
|
2752
|
+
"promptSetting": {
|
|
2753
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2754
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2755
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2756
|
+
"frameworkGuidePrompt": "",
|
|
2757
|
+
"enableFrameworkGuide": false,
|
|
2758
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
2759
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2760
|
+
},
|
|
2761
|
+
"pluginSetting": [
|
|
2762
|
+
{
|
|
2763
|
+
"name": "@tencent/font-extract-plugin"
|
|
2764
|
+
}
|
|
2765
|
+
]
|
|
2766
|
+
},
|
|
2767
|
+
"figmaPlugin3593585首页完整版FRAME": {
|
|
2768
|
+
"convertSetting": {
|
|
2769
|
+
"framework": "taro",
|
|
2770
|
+
"convertScale": 1,
|
|
2771
|
+
"colorValue": "hex"
|
|
2772
|
+
},
|
|
2773
|
+
"imageSetting": {
|
|
2774
|
+
"imageStorageType": "local",
|
|
2775
|
+
"imageStorageScale": 1,
|
|
2776
|
+
"imageIconType": "svg",
|
|
2777
|
+
"imageStoragePath": "./static",
|
|
2778
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2779
|
+
"ossRegion": "",
|
|
2780
|
+
"ossAccessKeyId": "",
|
|
2781
|
+
"ossAccessKeySecret": "",
|
|
2782
|
+
"ossBucket": "",
|
|
2783
|
+
"ossPath": "",
|
|
2784
|
+
"ossCdnDomain": "",
|
|
2785
|
+
"imageStorageApiUrl": "",
|
|
2786
|
+
"imageStorageApiFileField": "file",
|
|
2787
|
+
"imageStorageApiUrlField": "url",
|
|
2788
|
+
"imageStorageApiCustomHeader": "",
|
|
2789
|
+
"imageStorageApiCustomBody": ""
|
|
2790
|
+
},
|
|
2791
|
+
"promptSetting": {
|
|
2792
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 图片处理规范\n1. 所有图片资源必须通过 ES Module import 语句导入：\n\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n\n2. **注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径自行修改为相对目录或者@目录。\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n4. **图片资源处理**： \n • 图片资源必须通过import引入\n • 引入后再赋值给Image的`src`属性\n • **注意**，禁止将图片资源路径直接赋值给Image的`src`属性\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n • style中的px必须替换为rpx\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2793
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **图片处理**：需要先通过import引入图片资源后，再赋值给Image的src属性\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 `<div><user-card></user-card></div>` 转为 `<View><UserCard /></View>`，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 图片处理规范\n1. 所有图片资源必须通过 ES Module import 语句导入：\n\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n\n2. **注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径自行修改为相对目录或者@目录。\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n4. **图片资源处理**： \n • 图片资源必须通过import引入\n • 引入后再赋值给Image的`src`属性\n • **注意**，禁止将图片资源路径直接赋值给Image的src属性\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n • style中的px必须替换为rpx\n\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2794
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n注意：这是Taro小程序项目，需要从 @tarojs/components 导入 View、Text、Image 等组件。\n",
|
|
2795
|
+
"frameworkGuidePrompt": "",
|
|
2796
|
+
"enableFrameworkGuide": false,
|
|
2797
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
2798
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2799
|
+
}
|
|
2800
|
+
},
|
|
2801
|
+
"figmaPlugin2712099我的_3等分均分_客户端修改过FRAME": {
|
|
2802
|
+
"convertSetting": {
|
|
2803
|
+
"framework": "taro",
|
|
2804
|
+
"convertScale": 1,
|
|
2805
|
+
"colorValue": "hex"
|
|
2806
|
+
},
|
|
2807
|
+
"imageSetting": {
|
|
2808
|
+
"imageStorageType": "local",
|
|
2809
|
+
"imageStorageScale": 1,
|
|
2810
|
+
"imageIconType": "svg",
|
|
2811
|
+
"imageStoragePath": "./static",
|
|
2812
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2813
|
+
"ossRegion": "",
|
|
2814
|
+
"ossAccessKeyId": "",
|
|
2815
|
+
"ossAccessKeySecret": "",
|
|
2816
|
+
"ossBucket": "",
|
|
2817
|
+
"ossPath": "",
|
|
2818
|
+
"ossCdnDomain": "",
|
|
2819
|
+
"imageStorageApiUrl": "",
|
|
2820
|
+
"imageStorageApiFileField": "file",
|
|
2821
|
+
"imageStorageApiUrlField": "url",
|
|
2822
|
+
"imageStorageApiCustomHeader": "",
|
|
2823
|
+
"imageStorageApiCustomBody": ""
|
|
2824
|
+
},
|
|
2825
|
+
"promptSetting": {
|
|
2826
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **图片处理**：图片仅能通过import引入本地图片文件。图片引入路径禁止使用别名\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 通过文件导入的方式展示图片（图片资源已经下载完毕且，导入路径需要正确指向图片文件）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 图片处理规范\n1. 所有图片资源必须通过import语句导入：\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n2. **注意**：在代码中import语句引入图片文件，图片引入路径是相对于当前文件路径，务必保证图片文件引入路径正确。\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n • 代码import图片路径指向的文件不存在\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2827
|
+
"aggregationOptimizePrompt": "**注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **图片处理**：图片仅能通过import引入本地图片文件。图片引入路径禁止使用别名\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 `<div><user-card></user-card></div>` 转为 `<View><UserCard /></View>`，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 通过文件导入的方式展示图片（图片资源已经下载完毕且，导入路径需要正确指向图片文件）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 图片处理规范\n1. 所有图片资源必须通过import语句导入：\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n2. **注意**：在代码中import语句引入图片文件，图片引入路径是相对于当前文件路径，务必保证图片文件引入路径正确。\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n • 代码import图片路径指向的文件不存在\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2828
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n\n**图片引入路径优化**\n1. 图片文件资源全部都下载到项目目录里了，必须先搜索图片下载路径，然后将代码文件中import图片路径按如下规则优化：\n例如图片在workspace/static/Ellipse44_fb2b2f.png\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n❌ 错误示例：\nimport Ellipse44_fb2b2f from \"./static/Ellipse44_fb2b2f.png\"; //图片不存在\nimport Ellipse44_fb2b2f from \"../static/Ellipse44_fb2b2f.png\";//图片相对该文不存在\n2. **绝对禁止**：绝对不要自己创建static文件，绝对不要试图移动项目中已经存在的图片资源文件。\n最后，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n\n",
|
|
2829
|
+
"frameworkGuidePrompt": "",
|
|
2830
|
+
"enableFrameworkGuide": false,
|
|
2831
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
2832
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2833
|
+
}
|
|
2834
|
+
},
|
|
2835
|
+
"figmaPlugin406358518-背景遮挡FRAME": {
|
|
2836
|
+
"convertSetting": {
|
|
2837
|
+
"framework": "taro",
|
|
2838
|
+
"convertScale": 1,
|
|
2839
|
+
"colorValue": "hex"
|
|
2840
|
+
},
|
|
2841
|
+
"imageSetting": {
|
|
2842
|
+
"imageStorageType": "local",
|
|
2843
|
+
"imageStorageScale": 1,
|
|
2844
|
+
"imageIconType": "svg",
|
|
2845
|
+
"imageStoragePath": "./static",
|
|
2846
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2847
|
+
"ossRegion": "",
|
|
2848
|
+
"ossAccessKeyId": "",
|
|
2849
|
+
"ossAccessKeySecret": "",
|
|
2850
|
+
"ossBucket": "",
|
|
2851
|
+
"ossPath": "",
|
|
2852
|
+
"ossCdnDomain": "",
|
|
2853
|
+
"imageStorageApiUrl": "",
|
|
2854
|
+
"imageStorageApiFileField": "file",
|
|
2855
|
+
"imageStorageApiUrlField": "url",
|
|
2856
|
+
"imageStorageApiCustomHeader": "",
|
|
2857
|
+
"imageStorageApiCustomBody": ""
|
|
2858
|
+
},
|
|
2859
|
+
"promptSetting": {
|
|
2860
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **图片处理**：图片仅能通过import引入本地图片文件。图片引入路径禁止使用别名\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 通过文件导入的方式展示图片（图片资源已经下载完毕且，导入路径需要正确指向图片文件）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 图片处理规范\n1. 所有图片资源必须通过import语句导入：\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n2. **注意**：在代码中import语句引入图片文件，图片引入路径是相对于当前文件路径，务必保证图片文件引入路径正确。\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n • 代码import图片路径指向的文件不存在\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2861
|
+
"aggregationOptimizePrompt": "**注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **图片处理**：图片仅能通过import引入本地图片文件。图片引入路径禁止使用别名\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 `<div><user-card></user-card></div>` 转为 `<View><UserCard /></View>`，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 通过文件导入的方式展示图片（图片资源已经下载完毕且，导入路径需要正确指向图片文件）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 图片处理规范\n1. 所有图片资源必须通过import语句导入：\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n2. **注意**：在代码中import语句引入图片文件，图片引入路径是相对于当前文件路径，务必保证图片文件引入路径正确。\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n • 代码import图片路径指向的文件不存在\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2862
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n\n**图片引入路径优化**\n1. 图片文件资源全部都下载到项目目录里了，必须先搜索图片下载路径，然后将代码文件中import图片路径按如下规则优化：\n例如图片在workspace/static/Ellipse44_fb2b2f.png\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n❌ 错误示例：\nimport Ellipse44_fb2b2f from \"./static/Ellipse44_fb2b2f.png\"; //图片不存在\nimport Ellipse44_fb2b2f from \"../static/Ellipse44_fb2b2f.png\";//图片相对该文不存在\n2. **绝对禁止**：绝对不要自己创建static文件，绝对不要试图移动项目中已经存在的图片资源文件。\n最后，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n\n",
|
|
2863
|
+
"frameworkGuidePrompt": "",
|
|
2864
|
+
"enableFrameworkGuide": false,
|
|
2865
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
2866
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2867
|
+
}
|
|
2868
|
+
},
|
|
2869
|
+
"figmaPlugin4063747Group427321214GROUP": {
|
|
2870
|
+
"convertSetting": {
|
|
2871
|
+
"framework": "taro",
|
|
2872
|
+
"convertScale": 1,
|
|
2873
|
+
"colorValue": "hex"
|
|
2874
|
+
},
|
|
2875
|
+
"imageSetting": {
|
|
2876
|
+
"imageStorageType": "local",
|
|
2877
|
+
"imageStorageScale": 1,
|
|
2878
|
+
"imageIconType": "svg",
|
|
2879
|
+
"imageStoragePath": "./static",
|
|
2880
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2881
|
+
"ossRegion": "",
|
|
2882
|
+
"ossAccessKeyId": "",
|
|
2883
|
+
"ossAccessKeySecret": "",
|
|
2884
|
+
"ossBucket": "",
|
|
2885
|
+
"ossPath": "",
|
|
2886
|
+
"ossCdnDomain": "",
|
|
2887
|
+
"imageStorageApiUrl": "",
|
|
2888
|
+
"imageStorageApiFileField": "file",
|
|
2889
|
+
"imageStorageApiUrlField": "url",
|
|
2890
|
+
"imageStorageApiCustomHeader": "",
|
|
2891
|
+
"imageStorageApiCustomBody": ""
|
|
2892
|
+
},
|
|
2893
|
+
"promptSetting": {
|
|
2894
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **像素单位**：只能在className中出现px，其他地方出现像素单位需替换为rpx\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 图片处理规范\n1. 所有图片资源必须通过 ES Module import 语句导入：\n\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n\n2. **注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n4. **图片资源处理**： \n • 图片资源必须通过import引入\n • 引入后再赋值给Image的`src`属性\n • **注意**，禁止将图片资源路径直接赋值给Image的`src`属性\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2895
|
+
"aggregationOptimizePrompt": "**注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **图片处理**：需要先通过import引入图片资源后，再赋值给Image的src属性\n- **像素单位**：只能在className中出现px，其他地方出现像素单位需替换为rpx\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 `<div><user-card></user-card></div>` 转为 `<View><UserCard /></View>`，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 图片处理规范\n1. 所有图片资源必须通过 ES Module import 语句导入：\n\n✅ 正确示例：\nimport Ellipse44_fb2b2f from \"static/Ellipse44_fb2b2f.png\";\n<Image src={Ellipse44_fb2b2f} className=\"w-[100px] h-[100px]\" mode=\"aspectFill\" />\n\n❌ 错误示例：\n<Image src=\"./static/Ellipse44_fb2b2f.png\" ... />\n<Image src={require('./image.png')} ... />\n2. **注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n4. **图片资源处理**： \n • 图片资源必须通过import引入\n • 引入后再赋值给Image的`src`属性\n • **注意**，禁止将图片资源路径直接赋值给Image的src属性\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2896
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n**注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。\n",
|
|
2897
|
+
"frameworkGuidePrompt": "",
|
|
2898
|
+
"enableFrameworkGuide": false,
|
|
2899
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
2900
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2901
|
+
}
|
|
2902
|
+
},
|
|
2903
|
+
"figmaPlugin2712146我的金刚位FRAME": {
|
|
2904
|
+
"convertSetting": {
|
|
2905
|
+
"framework": "taro",
|
|
2906
|
+
"convertScale": 1,
|
|
2907
|
+
"colorValue": "hex"
|
|
2908
|
+
},
|
|
2909
|
+
"imageSetting": {
|
|
2910
|
+
"imageStorageType": "local",
|
|
2911
|
+
"imageStorageScale": 1,
|
|
2912
|
+
"imageIconType": "svg",
|
|
2913
|
+
"imageStoragePath": "./static",
|
|
2914
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2915
|
+
"ossRegion": "",
|
|
2916
|
+
"ossAccessKeyId": "",
|
|
2917
|
+
"ossAccessKeySecret": "",
|
|
2918
|
+
"ossBucket": "",
|
|
2919
|
+
"ossPath": "",
|
|
2920
|
+
"ossCdnDomain": "",
|
|
2921
|
+
"imageStorageApiUrl": "",
|
|
2922
|
+
"imageStorageApiFileField": "file",
|
|
2923
|
+
"imageStorageApiUrlField": "url",
|
|
2924
|
+
"imageStorageApiCustomHeader": "",
|
|
2925
|
+
"imageStorageApiCustomBody": ""
|
|
2926
|
+
},
|
|
2927
|
+
"promptSetting": {
|
|
2928
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **像素单位**：只能在TailwindCSS相关类名中出现px，其他地方出现像素单位需替换为rpx\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n4. **图片资源处理**： \n • 图片资源以模块导入的形式，通过import引入\n • 引入后再赋值给Image的`src`属性\n • **注意**，禁止将图片资源路径直接赋值给Image的`src`属性\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2929
|
+
"aggregationOptimizePrompt": "**注意**：已有的图片资源文件夹路径是基于项目根目录，生成import语句导入图片时必须保证路径正确。不要把图片路径修改为相对目录或者@目录。# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的Taro+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## Taro 框架要点\n- **组件导入**：必须从 `@tarojs/components` 导入组件\n- **标签替换**：\n - `div` → `View`\n - `span` → `Text`\n - `img` → `Image`（需添加 mode 属性）\n - `button` → `Button`\n - `input` → `Input`\n- **小程序特性**：支持 `hoverClass` 属性实现点击态效果\n- **样式支持**：完整支持 TailwindCSS\n- **图片处理**：需要先通过import引入图片资源后，再赋值给Image的src属性\n- **像素单位**：只能在TailwindCSS相关类名中出现px，其他地方出现像素单位需替换为rpx\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的Taro+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 `<div><user-card></user-card></div>` 转为 `<View><UserCard /></View>`，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n • **必须包含 Taro 组件导入**：`import { View, Text, Image } from \"@tarojs/components\";`\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n4. **图片资源处理**： \n • 图片资源以模块导入的形式，通过import引入\n • 引入后再赋值给Image的`src`属性\n • **注意**，禁止将图片资源路径直接赋值给Image的`src`属性\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n4. **框架错误**：\n • 绝不使用 HTML 原生标签（div、span、img 等）\n • 必须从 `@tarojs/components` 导入所有组件\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nimport { View, Text, Image } from \"@tarojs/components\";\n\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n- **必须包含 @tarojs/components 的导入语句**\n",
|
|
2930
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n图片已经下载成功，先识别出图片文件下载的资源文件夹路径，务必保证图片文件引入路径正确。\n提供的代码已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块、图片的引用，确保项目结构的合理性和可维护性。\n",
|
|
2931
|
+
"frameworkGuidePrompt": "",
|
|
2932
|
+
"enableFrameworkGuide": false,
|
|
2933
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
2934
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2935
|
+
}
|
|
2936
|
+
},
|
|
2937
|
+
"figmaPlugin4594698首页FRAME": {
|
|
2938
|
+
"convertSetting": {
|
|
2939
|
+
"framework": "uniapp",
|
|
2940
|
+
"convertScale": 1,
|
|
2941
|
+
"colorValue": "hex"
|
|
2942
|
+
},
|
|
2943
|
+
"imageSetting": {
|
|
2944
|
+
"imageStorageType": "local",
|
|
2945
|
+
"imageStorageScale": 1,
|
|
2946
|
+
"imageIconType": "svg",
|
|
2947
|
+
"imageStoragePath": "./static",
|
|
2948
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2949
|
+
"ossRegion": "",
|
|
2950
|
+
"ossAccessKeyId": "",
|
|
2951
|
+
"ossAccessKeySecret": "",
|
|
2952
|
+
"ossBucket": "",
|
|
2953
|
+
"ossPath": "",
|
|
2954
|
+
"ossCdnDomain": "",
|
|
2955
|
+
"imageStorageApiUrl": "",
|
|
2956
|
+
"imageStorageApiFileField": "file",
|
|
2957
|
+
"imageStorageApiUrlField": "url",
|
|
2958
|
+
"imageStorageApiCustomHeader": "",
|
|
2959
|
+
"imageStorageApiCustomBody": ""
|
|
2960
|
+
},
|
|
2961
|
+
"promptSetting": {
|
|
2962
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的uni-app+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## uni-app 框架要点\n- **框架语法**：框架语法和Vue2或者Vue3一致\n- **标签替换**：\n - `div` → `view`\n - `span` → `text`\n - `img` → `image`（需添加 mode 属性）\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的uni-app+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项使用 v-for 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用 v-for 指令替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的 :key 属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用以下 Markdown 代码块格式输出，**在语言标识符后用冒号声明组件名**：\n\n```vue:ComponentName\n<template>\n <!-- 完整组件模板 -->\n</template>\n\n<script setup lang=\"ts\">\n// 完整组件逻辑\n</script>\n```\n\n**格式说明**：\n- 代码块格式为：```vue:组件名（语言标识符后紧跟冒号和 PascalCase 组件名）\n- 组件名必须使用 PascalCase 命名（如 UserCard、ProductList）\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2963
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项使用 v-for 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用 v-for 指令替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的 :key 属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用以下 Markdown 代码块格式输出，**在语言标识符后用冒号声明组件名**：\n\n```vue:ComponentName\n<template>\n <!-- 完整组件模板 -->\n</template>\n\n<script setup lang=\"ts\">\n// 完整组件逻辑\n</script>\n```\n\n**格式说明**：\n- 代码块格式为：```vue:组件名（语言标识符后紧跟冒号和 PascalCase 组件名）\n- 组件名必须使用 PascalCase 命名（如 UserCard、ProductList）\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2964
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.vue，页面模块放在 src/pages/[页面名]/components/[模块名]/index.vue，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n\n**图片引入路径优化**\n1. 图片文件资源全部都下载到项目目录里了，必须先搜索图片下载路径，然后将代码中图片路径按如下规则优化：\n例如图片文件实际在workspace/static/Ellipse44_fb2b2f.png\n✅ 正确示例：\n<image src=\"/static/Ellipse44_fb2b2f.png\" />\n❌ 错误示例：\n<image src=\"./static/Ellipse44_fb2b2f.png\" /> //图片不存在\n<image src=\"../static/Ellipse44_fb2b2f.png\" /> //图片相对该文不存在\n\n在css样式中，遵循以下规则：\n✅ 正确示例：\n.test2 {\n\tbackground-image: url('~/static/logo.png');\n}\n❌ 错误示例：\n.test2 {\n\tbackground-image: url('/static/logo.png');\n}\n.test2 {\n\tbackground-image: url('./static/logo.png');\n}\n\n2. **绝对禁止**：绝对不要自己创建static文件，绝对不要试图移动项目中已经存在的图片资源文件。\n最后，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
2965
|
+
"frameworkGuidePrompt": "",
|
|
2966
|
+
"enableFrameworkGuide": false,
|
|
2967
|
+
"componentAnalysisPrompt": "\n你是一个专业的 Vue 组件分析专家。\n\n## 输入文件\n\n{filesSection}\n\n## 任务\n\n从以上文件中识别**可复用的 Vue 组件**，提取组件信息，输出 JSON：\n\n```json\n{\n \"components\": [\n {\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"type\": \"组件类型（如 Button、Card、List、Container、Custom 等）\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"path\": \"代码路径\",\n \"description\": \"组件功能描述（一句话概括）\"\n }\n ]\n}\n```\n\n**分析要求：**\n1. componentName: 从 `export default { name: 'xxx' }` 或文件名提取\n2. import: 如 `import Button from '@/components/Button.vue'`\n3. props: 从 `defineProps` (Vue 3) 或 `props` 选项 (Vue 2) 提取\n4. type 可选值：String, Number, Boolean, Object, Array, Function\n5. 只返回 JSON，不要任何额外文字",
|
|
2968
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
2969
|
+
},
|
|
2970
|
+
"pluginSetting": []
|
|
2971
|
+
},
|
|
2972
|
+
"figmaPlugin4685883测试设计稿FRAME": {
|
|
2973
|
+
"convertSetting": {
|
|
2974
|
+
"framework": "react",
|
|
2975
|
+
"convertScale": 1,
|
|
2976
|
+
"colorValue": "hex"
|
|
2977
|
+
},
|
|
2978
|
+
"imageSetting": {
|
|
2979
|
+
"imageStorageType": "local",
|
|
2980
|
+
"imageStorageScale": 1,
|
|
2981
|
+
"imageIconType": "svg",
|
|
2982
|
+
"imageStoragePath": "./static",
|
|
2983
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
2984
|
+
"ossRegion": "",
|
|
2985
|
+
"ossAccessKeyId": "",
|
|
2986
|
+
"ossAccessKeySecret": "",
|
|
2987
|
+
"ossBucket": "",
|
|
2988
|
+
"ossPath": "",
|
|
2989
|
+
"ossCdnDomain": "",
|
|
2990
|
+
"imageStorageApiUrl": "",
|
|
2991
|
+
"imageStorageApiFileField": "file",
|
|
2992
|
+
"imageStorageApiUrlField": "url",
|
|
2993
|
+
"imageStorageApiCustomHeader": "",
|
|
2994
|
+
"imageStorageApiCustomBody": ""
|
|
2995
|
+
},
|
|
2996
|
+
"promptSetting": {
|
|
2997
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2998
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
2999
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
3000
|
+
"frameworkGuidePrompt": "",
|
|
3001
|
+
"enableFrameworkGuide": false,
|
|
3002
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
3003
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
3004
|
+
},
|
|
3005
|
+
"pluginSetting": [
|
|
3006
|
+
{
|
|
3007
|
+
"name": "cos-upload",
|
|
3008
|
+
"config": {
|
|
3009
|
+
"tmeHeaderToken": "eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ0bWUiLCJpYXQiOjE3NjY3MjU1NDMsInN1YiI6InBhc3NwcG9ydCIsImxvZ2luVHlwZSI6NSwibWlkIjoxNjE1NDksImxvZ2luU291cmNlIjpudWxsLCJ0ZW5hbnQiOiJtdXNpY2lhbiIsImV4cCI6MTc2OTMxNzU0M30.MamMAdhDPXAuwE_prJVJT2jsxcuEtQZ5A7OUlRoO2Pc"
|
|
3010
|
+
}
|
|
3011
|
+
},
|
|
3012
|
+
{
|
|
3013
|
+
"name": "@tencent/font-extract-plugin",
|
|
3014
|
+
"config": [
|
|
3015
|
+
{
|
|
3016
|
+
"fontName": "u5font",
|
|
3017
|
+
"chars": "365次20年你一共巅峰对局凤凰蛋V最高段位是获得第名为自己今的成绩鼓掌吧进入决赛圈",
|
|
3018
|
+
"base64": "data:font/ttf;base64,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"
|
|
3019
|
+
}
|
|
3020
|
+
]
|
|
3021
|
+
}
|
|
3022
|
+
]
|
|
3023
|
+
},
|
|
3024
|
+
"figmaPlugin4776440Group2119903869GROUP": {
|
|
3025
|
+
"convertSetting": {
|
|
3026
|
+
"framework": "react",
|
|
3027
|
+
"convertScale": 1,
|
|
3028
|
+
"colorValue": "hex"
|
|
3029
|
+
},
|
|
3030
|
+
"imageSetting": {
|
|
3031
|
+
"imageStorageType": "local",
|
|
3032
|
+
"imageStorageScale": 1,
|
|
3033
|
+
"imageIconType": "svg",
|
|
3034
|
+
"imageStoragePath": "./static",
|
|
3035
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
3036
|
+
"ossRegion": "",
|
|
3037
|
+
"ossAccessKeyId": "",
|
|
3038
|
+
"ossAccessKeySecret": "",
|
|
3039
|
+
"ossBucket": "",
|
|
3040
|
+
"ossPath": "",
|
|
3041
|
+
"ossCdnDomain": "",
|
|
3042
|
+
"imageStorageApiUrl": "",
|
|
3043
|
+
"imageStorageApiFileField": "file",
|
|
3044
|
+
"imageStorageApiUrlField": "url",
|
|
3045
|
+
"imageStorageApiCustomHeader": "",
|
|
3046
|
+
"imageStorageApiCustomBody": ""
|
|
3047
|
+
},
|
|
3048
|
+
"promptSetting": {
|
|
3049
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3050
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3051
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
3052
|
+
"frameworkGuidePrompt": "",
|
|
3053
|
+
"enableFrameworkGuide": false,
|
|
3054
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
3055
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
3056
|
+
},
|
|
3057
|
+
"pluginSetting": [
|
|
3058
|
+
{
|
|
3059
|
+
"name": "cos-upload",
|
|
3060
|
+
"config": {
|
|
3061
|
+
"tmeHeaderToken": "eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ0bWUiLCJpYXQiOjE3NjY3MjU1NDMsInN1YiI6InBhc3NwcG9ydCIsImxvZ2luVHlwZSI6NSwibWlkIjoxNjE1NDksImxvZ2luU291cmNlIjpudWxsLCJ0ZW5hbnQiOiJtdXNpY2lhbiIsImV4cCI6MTc2OTMxNzU0M30.MamMAdhDPXAuwE_prJVJT2jsxcuEtQZ5A7OUlRoO2Pc"
|
|
3062
|
+
}
|
|
3063
|
+
},
|
|
3064
|
+
{
|
|
3065
|
+
"name": "@tencent/font-extract-plugin",
|
|
3066
|
+
"config": [
|
|
3067
|
+
{
|
|
3068
|
+
"fontName": "u5font",
|
|
3069
|
+
"chars": "365次20年你一共巅峰对局凤凰蛋V最高段位是进入决赛圈",
|
|
3070
|
+
"base64": "data:font/ttf;base64,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"
|
|
3071
|
+
}
|
|
3072
|
+
]
|
|
3073
|
+
}
|
|
3074
|
+
]
|
|
3075
|
+
},
|
|
3076
|
+
"figmaPlugin2832568IMG_2799RECTANGLE": {
|
|
3077
|
+
"convertSetting": {
|
|
3078
|
+
"framework": "react",
|
|
3079
|
+
"convertScale": 1,
|
|
3080
|
+
"colorValue": "hex"
|
|
3081
|
+
},
|
|
3082
|
+
"imageSetting": {
|
|
3083
|
+
"imageStorageType": "local",
|
|
3084
|
+
"imageStorageScale": 1,
|
|
3085
|
+
"imageIconType": "svg",
|
|
3086
|
+
"imageStoragePath": "./static",
|
|
3087
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
3088
|
+
"ossRegion": "",
|
|
3089
|
+
"ossAccessKeyId": "",
|
|
3090
|
+
"ossAccessKeySecret": "",
|
|
3091
|
+
"ossBucket": "",
|
|
3092
|
+
"ossPath": "",
|
|
3093
|
+
"ossCdnDomain": "",
|
|
3094
|
+
"imageStorageApiUrl": "",
|
|
3095
|
+
"imageStorageApiFileField": "file",
|
|
3096
|
+
"imageStorageApiUrlField": "url",
|
|
3097
|
+
"imageStorageApiCustomHeader": "",
|
|
3098
|
+
"imageStorageApiCustomBody": ""
|
|
3099
|
+
},
|
|
3100
|
+
"promptSetting": {
|
|
3101
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3102
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3103
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
3104
|
+
"frameworkGuidePrompt": "",
|
|
3105
|
+
"enableFrameworkGuide": false,
|
|
3106
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
3107
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
3108
|
+
},
|
|
3109
|
+
"pluginSetting": [
|
|
3110
|
+
{
|
|
3111
|
+
"name": "cos-upload",
|
|
3112
|
+
"_config": {
|
|
3113
|
+
"tmeHeaderToken": "eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ0bWUiLCJpYXQiOjE3NjY3MjU1NDMsInN1YiI6InBhc3NwcG9ydCIsImxvZ2luVHlwZSI6NSwibWlkIjoxNjE1NDksImxvZ2luU291cmNlIjpudWxsLCJ0ZW5hbnQiOiJtdXNpY2lhbiIsImV4cCI6MTc2OTMxNzU0M30.MamMAdhDPXAuwE_prJVJT2jsxcuEtQZ5A7OUlRoO2Pc"
|
|
3114
|
+
}
|
|
3115
|
+
},
|
|
3116
|
+
{
|
|
3117
|
+
"name": "@tencent/font-extract-plugin"
|
|
3118
|
+
}
|
|
3119
|
+
]
|
|
3120
|
+
},
|
|
3121
|
+
"figmaPlugin4594700Group718GROUP": {
|
|
3122
|
+
"convertSetting": {
|
|
3123
|
+
"framework": "react",
|
|
3124
|
+
"convertScale": 1,
|
|
3125
|
+
"colorValue": "hex"
|
|
3126
|
+
},
|
|
3127
|
+
"imageSetting": {
|
|
3128
|
+
"imageStorageType": "local",
|
|
3129
|
+
"imageStorageScale": 1,
|
|
3130
|
+
"imageIconType": "svg",
|
|
3131
|
+
"imageStoragePath": "./static",
|
|
3132
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
3133
|
+
"ossRegion": "",
|
|
3134
|
+
"ossAccessKeyId": "",
|
|
3135
|
+
"ossAccessKeySecret": "",
|
|
3136
|
+
"ossBucket": "",
|
|
3137
|
+
"ossPath": "",
|
|
3138
|
+
"ossCdnDomain": "",
|
|
3139
|
+
"imageStorageApiUrl": "",
|
|
3140
|
+
"imageStorageApiFileField": "file",
|
|
3141
|
+
"imageStorageApiUrlField": "url",
|
|
3142
|
+
"imageStorageApiCustomHeader": "",
|
|
3143
|
+
"imageStorageApiCustomBody": ""
|
|
3144
|
+
},
|
|
3145
|
+
"promptSetting": {
|
|
3146
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3147
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3148
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
3149
|
+
"frameworkGuidePrompt": "",
|
|
3150
|
+
"enableFrameworkGuide": false,
|
|
3151
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
3152
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
3153
|
+
},
|
|
3154
|
+
"pluginSetting": [
|
|
3155
|
+
{
|
|
3156
|
+
"name": "cos-upload",
|
|
3157
|
+
"_config": {
|
|
3158
|
+
"tmeHeaderToken": "eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ0bWUiLCJpYXQiOjE3Njk0MzUzMzIsInN1YiI6InBhc3NwcG9ydCIsInBob25lIjoiKzg2KjEzNTMwMDg4NjQ4IiwibG9naW5UeXBlIjoyLCJtaWQiOjUwNTU4OTgsInRlbmFudCI6Im11c2ljaWFuIiwibG9naW5Tb3VyY2UiOm51bGwsImV4cCI6MTc3MjAyNzMzMn0.qnKmHxORjF6TXvnfmwAwke4leHBfu545TX5c2ywJ9Q8"
|
|
3159
|
+
}
|
|
3160
|
+
},
|
|
3161
|
+
{
|
|
3162
|
+
"name": "@tencent/font-extract-plugin"
|
|
3163
|
+
}
|
|
3164
|
+
]
|
|
3165
|
+
},
|
|
3166
|
+
"figmaPluginI3593637;300104481Frame1000009238FRAME": {
|
|
3167
|
+
"convertSetting": {
|
|
3168
|
+
"framework": "react",
|
|
3169
|
+
"convertScale": 1,
|
|
3170
|
+
"colorValue": "hex"
|
|
3171
|
+
},
|
|
3172
|
+
"imageSetting": {
|
|
3173
|
+
"imageStorageType": "local",
|
|
3174
|
+
"imageStorageScale": 1,
|
|
3175
|
+
"imageIconType": "svg",
|
|
3176
|
+
"imageStoragePath": "./static",
|
|
3177
|
+
"imageStorageNamingRule": "[name]_[contenthash:6]",
|
|
3178
|
+
"ossRegion": "",
|
|
3179
|
+
"ossAccessKeyId": "",
|
|
3180
|
+
"ossAccessKeySecret": "",
|
|
3181
|
+
"ossBucket": "",
|
|
3182
|
+
"ossPath": "",
|
|
3183
|
+
"ossCdnDomain": "",
|
|
3184
|
+
"imageStorageApiUrl": "",
|
|
3185
|
+
"imageStorageApiFileField": "file",
|
|
3186
|
+
"imageStorageApiUrlField": "url",
|
|
3187
|
+
"imageStorageApiCustomHeader": "",
|
|
3188
|
+
"imageStorageApiCustomBody": ""
|
|
3189
|
+
},
|
|
3190
|
+
"promptSetting": {
|
|
3191
|
+
"chunkOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理一个独立的代码分块，这是整个页面中的一个局部区域。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析原有的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n根据组件含义导出符合开发习惯的组件名\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3192
|
+
"aggregationOptimizePrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件已在其他地方实现，不需要关心分块组件的逻辑，只需要把标签名当成组件名即可，例如 <div><user-card></user-card></div> 转为 <div><UserCard /></div>，不要引入关于分块组件多余的实现，禁止根据分块组件生成其他自定义组件、类型、逻辑！！！\n\n## 优化重点\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n\n## 输出格式要求\n\n必须使用 Markdown 代码块格式输出：\n\n```tsx\nexport function ComponentName() {\n // 完整组件代码\n}\n```\n\n- 使用三个反引号包围代码并指定语言标识符（tsx）\n- 组件名必须使用 PascalCase 命名\n- 确保代码块完整且可独立运行\n\n\n",
|
|
3193
|
+
"finalOptimizePrompt": "请将以下多个模块的前端代码块写入到用户的项目中。代码的核心逻辑已经过完整优化，无需修改，但模块的引用还未完成，需要识别模块之间的引用关系进行组装。 \n请将提供的代码的核心逻辑保持原样写入到项目文件中，按照项目规范创建合适的文件结构，确保所有必要的导入和依赖关系正确。 \n如果项目暂时没有明确的项目规范，可以遵循页面组件放在 src/pages/[页面名]/index.tsx，页面模块放在 src/pages/[页面名]/components/[模块名]/index.tsx，类型定义放在 src/pages/[页面名]/types.ts的规范。 \n提供的代码和图片资源已经完全可用，不要对代码进行任何优化或修改，专注于正确的文件创建和代码写入以及模块引用，确保项目结构的合理性和可维护性。\n",
|
|
3194
|
+
"frameworkGuidePrompt": "",
|
|
3195
|
+
"enableFrameworkGuide": false,
|
|
3196
|
+
"componentAnalysisPrompt": "\n你是一个专业的 React 组件分析专家。\n\n请分析以下 React 组件代码，提取关键信息。\n\n**文件名：** {filename}\n\n**组件代码：**\n```tsx\n{fileContent}\n```\n\n请严格按照 JSON 格式返回以下信息：\n\n{\n \"componentName\": \"组件名称（导出的组件名）\",\n \"import\": \"完整的 import 语句\",\n \"props\": [\n {\n \"name\": \"属性名称\",\n \"type\": \"类型（string | number | boolean | object | array | function | ReactNode | any）\",\n \"required\": true/false,\n \"description\": \"简短描述（可选）\"\n }\n ],\n \"description\": \"组件功能描述（一句话概括）\"\n}\n\n**分析要求：**\n1. componentName: 从 `export default ComponentName` 或 `export { ComponentName }` 提取\n2. import: 生成可直接使用的导入语句，如 `import { Button } from '@/components/Button'`\n3. props: 从 TypeScript interface/type 或 PropTypes 中提取\n4. type 可选值：string, number, boolean, object, array, function, ReactNode, any\n5. 只返回 JSON，不要任何额外文字",
|
|
3197
|
+
"noSamplingAggregationPrompt": "# Role: 专业的前端工程师\n\n## 当前任务：将绝对定位HTML代码转换为符合开发习惯的React+TailWind CSS的Flex布局代码\n您正在处理由一个或者多个分块组件[自定义HTML标签]和多个元素整合成完整的页面结构。输入的代码使用绝对定位（absolute + top/left）实现布局，需要转换为现代的Flex布局方式。\n\n## 任务目标\n将绝对定位的HTML代码转换为语义化的React+TailWind CSS的相对定位Flex布局，分析各个组件和元素之间的空间位置关系，通过Flex容器属性重新实现相同的视觉效果。\n分块组件[自定义HTML标签]尚未实现，需要你根据标签名和其包含的内容实现完整的组件逻辑，例如 <div><group1>...</group1></div> 需要转为 <div><UserCard ... /></div>，并实现 UserCard 组件的完整代码。\n\n1. **语义分组**： \n • 代码中的行/列容器仅承载布局与对齐职责，请以真实开发习惯进行语义化分组与组件化（功能相关、可复用单元、行/列容器） \n • 循环渲染的分组以\"单个数据项\"为单位，而非按\"行/列\"分组 \n • 网格/表格/栅格等场景：将卡片/条目抽象为\"Item 组件\"，对数据源逐项 map 渲染\n\n2. **循环列表渲染优化**： \n • 识别重复的UI模式和组件结构 \n • 使用数组的map方法替代重复的硬编码组件 \n • 为循环渲染的元素添加唯一的key属性\n\n3. **绝对定位到相对定位Flex布局转换**： \n • **核心目标**：将\"absolute;top-[Xpx];left-[Xpx]\"的定位方式转换为现代化的 Flex 布局 \n • **转换策略**：\n - 分析绝对定位元素的空间位置关系（top/left 值）和父子层级结构\n - 识别元素间的对齐方式（居中、左对齐、右对齐等）和间距规律\n - 通过 Flex 容器的justify-content、align-items、gap、flex-direction等属性重新实现相同的布局效果\n - 使用margin、padding等属性微调精确位置，替代原有的绝对定位数值 \n • **保留绝对定位的场景**：仅当确为浮层/装饰/覆盖/固定定位元素时才保留 absolute/fixed \n • **避免反模式**：不使用负 margin、魔法数字；优先通过语义化的 Flex 属性表达布局关系\n\n4. **数据源抽取与管理**： \n • 识别硬编码的数据，将其抽取为数据源结构 \n • 将静态数据转换为动态数据对象或数组 \n • 建立合理的数据模型和类型定义 \n • 确保数据结构的可扩展性和可维护性\n\n5. **组件抽离与模块化**： \n • 基于功能和职责原则进行组件划分 \n • 设计合理的Props接口，确保组件的灵活性 \n • 建立清晰的组件层次结构和依赖关系\n\n## 优化原则\n1. **保持视觉一致性**： \n • 绝对不能改变除元素的视觉外观属性，如背景，颜色，文本，字体等。 \n • 确保优化后的代码在视觉上与原代码完全一致 \n • 禁止替换图片资源等链接地址（图片资源已经下载完毕且路径正确可用）\n\n2. **代码结构优化**： \n • 提升代码的可读性和可维护性 \n • 减少代码重复，提高复用性 \n • 建立清晰的数据流和组件通信方式 \n • 遵循现代前端开发最佳实践\n\n## 绝对定位转相对定位Flex布局转换要点 \n1. **位置分析**： \n • 观察top和left值的规律，识别对齐方式和间距模式 \n • 分析元素的相对位置关系，确定容器的主轴和交叉轴方向\n\n2. **容器设计**： \n • 为有布局关系的元素创建合适的 Flex 容器 \n • 根据元素排列方向设置flex-direction（row/column） \n • 使用justify-content控制主轴对齐，align-items控制交叉轴对齐\n\n3. **间距处理**： \n • 用gap属性替代规则的间距 \n • 用margin替代不规则的偏移 \n • 避免使用绝对定位的数值作为魔法数字\n\n4. **间距计算规则**： \n • **识别内容块边界**：找到每个逻辑组件的首尾元素，计算边界 = 最后元素的top + height \n • **计算真实间距**： \n - 行间距 = 下一行首元素top - 上一行末元素底部位置 \n - 列间距 = 下一列首元素left - 上一列末元素右侧位置 \n - 元素内间距 = 子元素top - 父元素内上一子元素底部位置 \n • **禁止错误做法**：不要直接用同类元素top值相减 不要忽略元素height/width 不要假设间距\n\n## 输出要求 \n1. **完整代码输出**： \n • 输出完整的、可直接运行的代码 \n • 绝不使用占位符或省略号 \n • 包含所有必要的导入和类型定义\n\n2. **文件结构组织**： \n • 合理组织文件结构，体现组件化思维 \n • 使用清晰的文件命名约定 \n • 建立合理的目录层次 \n • 根据项目规范组织生成的组件文件\n\n3. **代码质量保证**： \n • 确保代码语法正确，可直接运行 \n • 遵循TypeScript类型安全原则 \n • 符合现代前端开发规范\n\n## 绝对禁止 \n1. **视觉变更**： \n • 绝不修改任何元素的CSS视觉外观样式属性，只可修改布局样式属性 \n • 使用Flex布局绝不改变布局结构的视觉呈现 \n • 绝对禁止修改图片资源地址（图片已下载到本地且路径可用，无需更改） \n • 尽量避免把样式类名，如布局相关样式，（padding,margin,width,height）定位相关样式（top，left）等提取为变量\n\n2. **功能变更**： \n • 绝不改变原有的交互逻辑 \n • 绝不添加新的功能特性 \n • 绝不删除原有的业务逻辑\n\n3. **代码缺失**： \n • 绝不使用任何形式的占位符 \n • 绝不省略代码实现 \n • 绝不使用TODO注释\n\n"
|
|
3198
|
+
},
|
|
3199
|
+
"pluginSetting": [
|
|
3200
|
+
{
|
|
3201
|
+
"name": "cos-upload",
|
|
3202
|
+
"_config": {
|
|
3203
|
+
"tmeHeaderToken": "eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ0bWUiLCJpYXQiOjE3Njk0MzUzMzIsInN1YiI6InBhc3NwcG9ydCIsInBob25lIjoiKzg2KjEzNTMwMDg4NjQ4IiwibG9naW5UeXBlIjoyLCJtaWQiOjUwNTU4OTgsInRlbmFudCI6Im11c2ljaWFuIiwibG9naW5Tb3VyY2UiOm51bGwsImV4cCI6MTc3MjAyNzMzMn0.qnKmHxORjF6TXvnfmwAwke4leHBfu545TX5c2ywJ9Q8"
|
|
3204
|
+
}
|
|
3205
|
+
},
|
|
3206
|
+
{
|
|
3207
|
+
"name": "@tencent/font-extract-plugin"
|
|
3208
|
+
}
|
|
3209
|
+
]
|
|
3210
|
+
}
|
|
3211
|
+
},
|
|
3212
|
+
"frameworks": [
|
|
3213
|
+
{
|
|
3214
|
+
"label": "React",
|
|
3215
|
+
"value": "react"
|
|
3216
|
+
},
|
|
3217
|
+
{
|
|
3218
|
+
"label": "Vue",
|
|
3219
|
+
"value": "vue"
|
|
3220
|
+
},
|
|
3221
|
+
{
|
|
3222
|
+
"label": "iOS OC",
|
|
3223
|
+
"value": "ios-oc"
|
|
3224
|
+
},
|
|
3225
|
+
{
|
|
3226
|
+
"label": "iOS Swift",
|
|
3227
|
+
"value": "ios-swift"
|
|
3228
|
+
},
|
|
3229
|
+
{
|
|
3230
|
+
"label": "Kuikly",
|
|
3231
|
+
"value": "kuikly"
|
|
3232
|
+
},
|
|
3233
|
+
{
|
|
3234
|
+
"label": "Taro",
|
|
3235
|
+
"value": "taro"
|
|
3236
|
+
},
|
|
3237
|
+
{
|
|
3238
|
+
"label": "Uniapp",
|
|
3239
|
+
"value": "uniapp"
|
|
3240
|
+
}
|
|
3241
|
+
],
|
|
3242
|
+
"defaultFramework": "react"
|
|
3243
|
+
}
|
|
3244
|
+
[2026-01-28T12:17:12.208Z] 开始初始化 OpenCV.js...
|
|
3245
|
+
[2026-01-28T12:17:13.253Z] OpenCV.js 运行时初始化完成
|
|
3246
|
+
[2026-01-28T12:26:34.493Z] 开始初始化 OpenCV.js...
|
|
3247
|
+
[2026-01-28T12:26:34.494Z] VSCode 日志服务初始化成功
|
|
3248
|
+
[VSCodeLogger] 连接错误: connect ECONNREFUSED 127.0.0.1:13142
|
|
3249
|
+
[VSCodeLogger] 连接已关闭
|
|
3250
|
+
[2026-01-28T12:26:35.509Z] OpenCV.js 运行时初始化完成
|
|
3251
|
+
[2026-01-28T12:26:35.658Z] 开始初始化 OpenCV.js...
|
|
3252
|
+
[2026-01-28T12:26:35.659Z] VSCode 日志服务初始化成功
|
|
3253
|
+
[VSCodeLogger] 连接错误: connect ECONNREFUSED 127.0.0.1:13142
|
|
3254
|
+
[VSCodeLogger] 连接已关闭
|
|
3255
|
+
[2026-01-28T12:26:36.693Z] OpenCV.js 运行时初始化完成
|
|
3256
|
+
[2026-01-28T12:28:02.493Z] 开始初始化 OpenCV.js...
|
|
3257
|
+
[2026-01-28T12:28:02.493Z] VSCode 日志服务初始化成功
|
|
3258
|
+
[VSCodeLogger] 连接错误: connect ECONNREFUSED 127.0.0.1:13142
|
|
3259
|
+
[VSCodeLogger] 连接已关闭
|
|
3260
|
+
[2026-01-28T12:28:03.531Z] OpenCV.js 运行时初始化完成
|