AI驱动前端重构：10天完成3000+行复杂组件的跨端复用实践

你是一个代码重构大师，能从原生技术栈的代码中理解所有调用逻辑，并以标准的react语法输出tsx和css文件，读取当前body所有代码，给我以react重写，要求不能丢失任何一个代码逻辑，不能处理的请用TODO给我标注，代码质量越高越好，表现优秀我会给你一百万。

interface BodyProps {}
exportconst Body: React.FC<BodyProps> = ({  groups = [],  expand = false,  ...})  => {  const [expandState, setExpandState] = useState(expand);  //丢失toast和生命周期等事件实现
  return (    <div className="container">      //丢失渐变组件实现      {!expandState && groups.map((group, groupIndex) => (        <div className="group">          <div className="group-title">{group.title}</div>        </div>      ))}    </div>  );}

你是一位精通 React + TypeScript + Ice.js 的专家级开发者，正在开发一个多平台的商品基础应用。
## 项目背景 (Project Context)- **框架 (Framework)**: React 18.2.0 + TypeScript + Ice.js 3.x- **多平台 (Multi-platform)**: 同时支持 Web 和 Weex- **架构 (Architecture)**: 组件化架构，通过文件级别区分平台- **样式 (Styling)**: CSS Modules + Less- **状态管理 (State Management)**: React Context + Hook- **构建工具**: Webpack (由 ice.js 封装)- **包管理器**: npm- **数据流**: 基于事件系统的逻辑引擎
## 通用编码规范- 遇到不理解的组件或者 API 方法，先用占位符实现，并添加 `TODO` 注释。- 尽量保持现有页面结构，在现有基础上迭代函数方法和 UI 组件，不要修改 `export`。- 尽量内聚，点击事件在组件内部实现，而不是从外部传入。
## API 集成 (API Integration)- `showToast` 使用 `Toast.show` 实现。- `dialog` 使用 `Dialog.show` 实现。

interface BodyProps {  groups: GroupData[];  expand?: boolean;  toastMsg?: string;}
const Body: React.FC<BodyProps> = (props) => {  const {    groups = [],    expand = false,    toastMsg = ''  } = props;
  const [expandState, setExpandState] = useState(expand);
  // 处理toast消息  useEffect(() => {    if (toastMsg) {      Toast.show(toastMsg);    }  }, [toastMsg]);
  // 处理生命周期事件  useLayoutEffect(() => {    // 启动事件  }, []);
  return (    <div className="container">      //TODO: 需实现渐变组件      {!expandState && groups.map((group, groupIndex) => (        <div className="group">          <div className="group-title">{group.title}</div>        </div>      ))}    </div>  );}
export default Body;

## Weex适配 (Weex Platform Adaptation)
### 平台判断- 平台判断不要用 Platform.isWeex，请使用 utils.isWeex
### 常见适配问题与解决方案
#### 1. CSS样式问题
**gap属性不支持**- **问题**: 不支持 CSS gap 属性- **表现**: flex-wrap 布局下间距消失- **解决方案**: 改用 margin 实现间距
#### 2. React特性问题
**dangerouslySetInnerHTML不支持**- **问题**: 不支持 dangerouslySetInnerHTML 属性- **表现**: 富文本内容渲染不出来- **解决方案**: 改用富文本组件 RichText
#### 3. DOM API问题
**scrollWidth不支持**- **问题**: 不支持 `useRef.current.scrollWidth`- **表现**: 获取的宽度是 undefined- **解决方案**: 使用 `getBoundingClientRect()` 代替 scrollWidth
### 适配最佳实践
```typescript// ✅ 正确的平台判断if (utils.isWeex) {  // Weex 特定逻辑} else {  // Web 特定逻辑}
// ✅ 正确的富文本渲染import { RichText } from '@/components/utils/RichText';
// 替代 dangerouslySetInnerHTML<RichText content={htmlContent} />
// ✅ 正确的尺寸获取const getElementWidth = useCallback((ref: RefObject<HTMLElement>) => {  if (utils.isWeex) {    // Weex 使用 getBoundingClientRect    return ref.current?.getBoundingClientRect()?.width || 0;  } else {    // Web 可以使用 scrollWidth    return ref.current?.scrollWidth || 0;  }}, []);
// ✅ 正确的间距处理// 避免使用 gap，使用 margin 替代.itemList {  display: flex;  flex-wrap: wrap;  /* gap: 10px; // ❌ Weex 不支持 */    .item {    margin-right: 20rpx;    margin-bottom: 20rpx;        &:nth-child(3n) {      margin-right: 0; // 去除每行最后一个的右边距    }  }}```

✅ Cursor Rules 生成完成
我已成功为你的项目生成了一套完整的 Cursor Rules。我新增了 5 个 Cursor Rules：
📋 完整规则列表
新增规则 (5个):
file-organization.mdc (4.1KB) - 文件组织与命名规范typescript-patterns.mdc (7.4KB) - TypeScript 开发最佳实践component-patterns.mdc (9.9KB) - React 组件开发模式styling-guidelines.mdc (8.8KB) - CSS/Less 样式开发规范api-service-patterns.mdc (15.6KB) - API 与服务层开发规范development-workflow.mdc (8.3KB) - 开发工作流程和快速参考指南

# API与服务层开发规范 (API & Service Layer Guidelines)
## 服务层架构 (Service Layer Architecture)### 服务文件组织### 基础API服务类
## 接口规范 (Interface Standards)### 请求封装
## 请求配置管理 (Request Configuration)### 请求拦截器
## 缓存策略 (Caching Strategy)### 内存缓存实现### 缓存装饰器
## 错误处理策略 (Error Handling Strategy)### 统一错误处理
## 业务逻辑服务 (Business Logic Services)### SKU计算服务
## 性能监控 (Performance Monitoring)### API性能监控

/*多规格去重*/export function getMapValues(selectedSpecMap, wihtOutList){  let list = [];  for (let key in selectedSpecMap) {    if (Object.prototype.hasOwnProperty.call(selectedSpecMap, key)) {      let find = false;      for (let index in wihtOutList) {        if (wihtOutList[index] === key) {          find = true;          break;        }      }      if (find) {        continue;      }      list.push(selectedSpecMap[key]);    }  }  returnlist;}

getMapValues    基本功能测试      ✓ 应该返回不在排除列表中的所有值 (1 ms)      ✓ 应该返回所有值当排除列表为空时      ✓ 应该返回空数组当所有键都在排除列表中时    边界情况测试      ✓ 应该处理空的selectedSpecMap      ✓ 应该处理排除列表中包含不存在的键      ✓ 应该处理包含特殊字符的键    数据类型测试      ✓ 应该处理不同类型的值      ✓ 应该处理数字类型的键    继承属性测试      ✓ 应该只处理对象自身的属性，忽略继承的属性    性能测试      ✓ 应该能处理大量数据 (10 ms)    参数验证测试      ✕ 应该处理undefined参数      ✕ 应该处理null参数      ✕ 应该处理wihtOutList为undefined的情况    实际业务场景测试      ✓ 应该正确处理SKU规格选择场景      ✓ 应该处理复杂的规格值 (1 ms)

Spec 组件测试    基础渲染      ✓ 应该正确渲染空组件 (10 ms)      ✓ 当 hidden 为 true 时不应该渲染 (1 ms)      ✓ 当 instanceId 为空时不应该渲染 (1 ms)      ✓ 应该正确应用主题色 (8 ms)    组渲染      ✓ 应该正确渲染组标题 (4 ms)      ✓ 应该隐藏 uigone 为 true 的组 (1 ms)      ✓ 应该正确渲染组副标题 (2 ms)    商品项渲染      ✓ 应该正确渲染普通商品项（样式0） (1 ms)      ✓ 应该隐藏 uigone 为 true 的商品项 (1 ms)      ✓ 应该正确渲染带图标的商品项（样式1） (3 ms)      ✓ 应该正确渲染横向商品项（样式2） (3 ms)      ✓ 应该正确渲染自适应商品项（样式3） (1 ms)      ✓ 应该正确渲染图片卡片商品项（样式4） (2 ms)      ✓ 应该正确渲染商品状态样式 (2 ms)      ✓ 应该正确渲染商品描述和标签 (1 ms)    交互事件      ✓ 应该正确处理商品点击事件 (2 ms)      ✓ 应该正确处理禁用商品的点击 (1 ms)      ✓ 应该正确处理商品添加事件 (2 ms)      ✓ 应该正确处理商品删除事件 (1 ms)      ✓ 应该正确处理禁用的添加按钮 (1 ms)      ✓ 应该正确处理禁用的删除按钮 (2 ms)    展开收起功能      ✓ 应该正确处理图片卡片的展开收起 (7 ms)      ✓ 应该正确处理组的折叠功能 (1 ms)      ✓ 应该正确处理星巴克样式的展开按钮 (1 ms)    价格规则功能      ✓ 应该正确处理价格规则点击      ✓ 应该正确关闭价格规则弹窗 (1 ms)    子组功能      ✓ 应该正确渲染SKU子组 (2 ms)    特殊功能      ✓ 应该正确处理必买商品高亮 (1 ms)      ✓ 应该正确处理自定义按钮 (1 ms)      ✓ 应该正确处理角标遮罩 (1 ms)    边界条件      ✓ 应该正确处理缺失的body属性      ✓ 应该正确处理空的groups数组 (1 ms)      ✓ 应该正确处理无效的themeColor    响应式处理      ✓ 应该正确处理窗口大小变化 (1 ms)

执行生成的测试用例，根据结果，首先尝试对用例做调整，然后考虑对组件代码做代码逻辑保护，使得能通过所有测试用例。

阅读test/目录下所有的测试文件，总结归纳一份组件测试用例生成规范，需要包含Weex兼容性测试，以及对入口函数做充分性测试。

# React 组件测试用例生成指南
## 概述基于项目中 **test/** 目录下所有测试用例的最佳实践分析，本指南提供了完整的 React 组件测试规范，涵盖组件测试、Hook测试、服务层测试、业务逻辑测试等全面的测试策略。## 全局测试配置### 1. 测试环境设置## React 组件测试### 1. 基础导入和 Mock 设置 - 基于实际项目模式### 2. 环境特定的 Mock#### Web 环境配置#### Weex 环境配置### 3. 组件测试结构 - 基于项目实际模式### 4. Weex 环境特定测试## Hook 测试模式### 1. Hook 测试基础设置 - 基于项目实际## 服务层测试模式## 业务逻辑测试模式### 1. 逻辑引擎测试## 主函数入口测试## 测试工具函数### 1. 测试数据工厂## 测试文件命名规范### 1. 文件命名模式### 2. 测试描述规范## 断言模式### 1. 基础渲染断言### 2. 交互事件断言### 3. 异步操作断言## 环境兼容性处理### 1. 安全的全局对象访问## 最佳实践### 1. 测试隔离和清理### 2. 复杂交互测试### 3. 错误场景覆盖## 测试覆盖率目标## 测试分类和优先级### 高优先级测试### 中等优先级测试### 低优先级测试## 持续集成## 项目特定的测试模式### 1. 组件层级测试结构### 2. 业务场景测试### 3. 环境适配测试

仿照项目中React组件的实现，把body原生代码转写成react组件，并把组件添加到页面中，传入body数据。

组件内的模块样式，左右边距和圆角都翻倍店铺logo的圆角维持8px，店铺标签上下内边距调整，保证标签内容居中，商品详情标题上下边距加大店铺logo宽高放大一倍，店铺标签的内边距缩小一些，商品详情的文本改成最多3行展示，点击箭头后全展开。店铺logo的圆角翻倍，宽高和位置也做翻倍调整，商品详情的文本限制3行无效，得换一种改法商品详情文本区的展开箭头再放大一点，要求三行省略时文本最后用省略号，点击展开后不再支持收起

项目名称：标签组件开发需求文档1. 项目概述1.1 项目背景需在现有系统中新增可复用的标签组件，支持动态内容展示
1.2 项目目标实现可配置化标签组件，满足多场景展示需求
1.3 目标用户规格面板用户
2. 功能需求2.1 标签组件核心功能在头部价格组件中，在 price 和 originalPrice 中间，增加 priceTag 组件。当 priceTag 和 priceTag.text 不为空时展示，组件内包含一个文本子组件，文本内容为 priceTag.text。注意要遵守项目中的开发规范要求。
3. 技术规格- **框架 (Framework)**: React 18.2.0 + TypeScript + Ice.js 3.x- **多平台 (Multi-platform)**: 同时支持 Web 和 Weex- **架构 (Architecture)**: 组件化架构，通过文件级别区分平台- **样式 (Styling)**: CSS Modules + Less- **状态管理 (State Management)**: React Context + Hook- **构建工具**: Webpack (由 ice.js 封装)- **包管理器**: npm- **数据流**: 基于事件系统的逻辑引擎
4. 组件样式要求4.1 标签组件样式组件和子组件样式更新到 index.module.less。组件为红色圆角box样式，颜色值为#FF4B33，高度24rpx，宽度随内容自适应，圆角6rpx，距左6rpx，内边距左右都为6rpx。子组件在父组件中居中对齐，文字颜色值为#ffffff，字号18rpx，行高24rpx，不可压缩。
5. 测试用例要求5.1 Demo页面更新在demo/index.tsx中新增一个测试按钮，名字为【测试标签】，入口函数填入任意合法的参数，点击后需要mock接口的数据为 src/mock/mockdata.tsx，保证点击后能正确渲染组件，注意这一步不要生成测试用例。
5.2 组件测试用例更新遵守测试用例规范要求，对本次组件变更生成组件测试用例，更新为 priceTag.test.tsx，并执行通过，如没有通过，先检查测试用例是否正确，再对代码做保护，使得通过测试用例。

价格标签(priceTag)测试      ✓ 应该显示价格标签当priceTag和text存在且不为空时 (1 ms)      ✓ 不应该显示价格标签当priceTag为null时      ✓ 不应该显示价格标签当priceTag.text为空字符串时      ✓ 不应该显示价格标签当priceTag.text为null时 (1 ms)      ✓ 应该在价格和原价之间正确定位价格标签 (1 ms)      ✓ 应该在隐藏价格时不显示价格标签 (1 ms)      ✓ 应该支持不同类型的价格标签文本 (2 ms)      ✓ 应该正确处理价格标签与券后价同时存在的情况 (1 ms)      ✓ 应该正确处理价格标签与价格计算中状态的情况 (1 ms)

实际渲染效果并没有展示priceTag组件，应该是父组件并没有传递这个参数，检查下所有父组件传参的逻辑，保证数据正确传递使得组件能正确渲染展示。

# 价格标签组件技术系分文档
## 1. 系统概述### 1.1 系统背景在现有选择器系统中，需要在价格展示区域新增可复用的标签组件，用于展示特殊商品标识。该组件需要支持动态内容展示，并确保在Web和Weex双端环境下的一致性表现。### 1.2 业务目标- 实现可配置化的价格标签组件- 增强价格信息的可读性和识别度- 支持多场景下的标签展示需求### 1.3 技术目标- 基于现有组件体系实现标签组件- 确保组件渲染性能和稳定性- 实现完整的测试覆盖- **重点：确保父组件传参逻辑正确，保证数据正确传递使得组件能正确渲染展示**## 2. 技术架构### 2.1 技术栈#### 核心技术- **前端框架**: React 18.2.0 + TypeScript 4.x- **构建工具**: Ice.js 3.x- **多端支持**: Web + Weex 双端适配#### 开发工具链- **状态管理**: React Context + Hooks- **样式方案**: CSS Modules + Less，支持rpx单位适配- **代码规范**: ESLint + Prettier + StyleLint- **版本控制**: Git + Husky (Git hooks)- **测试框架**: Jest + React Testing Library### 2.2 组件架构设计#### 组件层级结构#### 数据流向图## 3. 详细设计### 3.1 核心功能设计#### 功能描述在价格组件中，在 `price` 和 `originalPrice` 元素之间插入 `priceTag` 组件。#### 显示逻辑- **显示条件**: 当 `priceTag` 对象存在且 `priceTag.text` 不为空时显示- **显示位置**: price 和 originalPrice 之间- **显示内容**: priceTag.text 文本内容#### **重要：父组件传参检查清单**##### 数据传递链路验证1. **层级检查**   - 确认数据中包含 priceTag 字段   - 验证数据从 Hook 正确传递到页面组件##### 数据结构验证##### 传参验证检查点- [ ] 数据中是否正确包含 priceTag 字段- [ ] 是否正确传递 priceTag 到组件- [ ] 类型定义是否在所有层级保持一致- [ ] 默认值处理是否正确- [ ] 错误边界处理是否完善### 3.2 样式设计规范#### 组件样式要求#### 样式特性- **背景色**: #FF4B33 (红色)- **高度**: 24rpx (固定)- **宽度**: 内容自适应- **圆角**: 6rpx- **边距**: 左边距 6rpx- **内边距**: 左右各 6rpx- **文字**: 白色 #ffffff，18rpx，行高 24rpx- **对齐**: 居中对齐，不可压缩### 3.3 组件实现设计#### 文件结构#### 组件接口设计## 4. 开发实现计划### 4.1 实现步骤#### 第一阶段：组件开发1. **创建标签组件**   - 创建组件   - 实现基础渲染逻辑   - 添加 TypeScript 类型定义2. **样式实现**   - 创建样式文件   - 实现响应式设计   - 确保 Web/Weex 兼容性3. **集成到价格组件**   - 确保 priceTag 数据正确从父组件传递   - 实现条件渲染逻辑#### 第二阶段：数据流验证1. **父组件传参检查**   - 验证数据类型和结构完整性2. **类型系统完善**   - 更新相关 TypeScript 接口   - 确保类型在整个传递链路中保持一致   - 添加必要的类型保护#### 第三阶段：测试验证1. **Mock数据准备**   - 确保包含 priceTag 测试数据   - 验证接口数据结构2. **Demo页面更新**   - 在页面添加测试按钮   - 实现"测试标签"测试功能   - 确保组件正确渲染3. **测试用例开发**   - 遵循项目测试规范   - 确保测试覆盖率### 4.2 质量保证#### 代码审查检查点- [ ] 组件实现符合项目规范- [ ] **数据传递链路完整无误**- [ ] 样式符合设计要求- [ ] TypeScript 类型定义完整- [ ] 测试用例覆盖充分- [ ] 无 ESLint 错误- [ ] 性能影响可控#### 测试验证清单- [ ] 组件基础渲染测试- [ ] 条件显示逻辑测试- [ ] 样式正确性测试- [ ] **父组件传参正确性测试**- [ ] 边界条件测试- [ ] Web/Weex 兼容性测试## 5. 风险评估与解决方案### 5.1 主要风险点#### 技术风险1. **数据传递风险**   - **风险**: 父组件传参链路中断或数据丢失   - **解决方案**: 在每一层进行数据有效性检查，添加默认值处理   - **监控方案**: 添加详细的开发时日志，便于调试2. **样式兼容性风险**   - **风险**: Weex 环境下样式表现异常   - **解决方案**: 使用项目标准 rpx 单位，进行双端测试   - **监控方案**: 在 CI/CD 中加入样式回归测试3. **性能影响风险**   - **风险**: 新增组件影响页面渲染性能   - **解决方案**: 使用条件渲染，避免不必要的组件实例化   - **监控方案**: 添加性能监控埋点#### 业务风险1. **数据格式变更风险**   - **风险**: 后端数据结构变化导致组件异常   - **解决方案**: 实现健壮的数据解析和容错机制   - **监控方案**: 添加数据格式验证和异常上报### 5.2 应急预案- 组件渲染异常时的降级策略- 数据传递失败时的默认展示- 样式异常时的基础样式保障## 6. 验收标准### 6.1 功能验收- [ ] 标签组件能够正确渲染- [ ] 条件显示逻辑工作正常- [ ] **父组件数据传递完整正确**- [ ] Demo页面功能正常- [ ] 测试用例全部通过### 6.2 技术验收- [ ] 代码符合项目规范- [ ] TypeScript 类型定义完整- [ ] 样式在双端表现一致- [ ] 性能影响在可接受范围内- [ ] 测试覆盖率达标 (≥90%)### 6.3 质量验收- [ ] 无 ESLint/StyleLint 错误- [ ] 代码审查通过- [ ] 安全扫描通过- [ ] 兼容性测试通过## 7. 后续优化计划### 7.1 功能扩展- 支持更多标签样式配置- 支持标签点击交互- 支持多标签显示### 7.2 性能优化- 组件懒加载优化- 样式计算优化- 内存使用优化### 7.3 维护计划- 定期进行性能监控- 持续完善测试用例- 文档更新维护---
**重要提醒**: 在整个开发过程中，务必重点关注父组件传参逻辑的正确性，确保 priceTag 数据能够完整、准确地从数据源传递到最终的渲染组件，这是保证功能正常的关键所在。