Goods Detail Drawer 商品详情抽屉组件

组件拆分优化说明

🎯 优化目标

将原本1863行的庞大组件拆分为多个功能独立的小组件，提高代码可维护性和复用性。

📁 新的文件结构

src/
├── components/                    # 拆分后的子组件
│   ├── SalesTypeSection/         # 销售类型组件
│   │   └── index.tsx
│   ├── BasicInfoSection/         # 基本信息组件
│   │   └── index.tsx
│   ├── SalesInfoSection/         # 销售信息组件
│   │   └── index.tsx
│   ├── LogisticsInfoSection/     # 物流信息组件
│   │   └── index.tsx
│   ├── GoodsDetailSection/       # 商品详情组件
│   │   └── index.tsx
│   ├── AnchorNavigation/         # 锚点导航组件
│   │   └── index.tsx
│   ├── GoodsDetailSkeleton/      # 骨架屏组件
│   │   └── index.tsx
│   ├── DescriptionsItem/         # 描述项格式化组件
│   │   └── index.tsx
│   └── index.ts                  # 组件统一导出
├── index.tsx                     # 主组件（简化后）
├── type.ts                       # 类型定义
└── tools.ts                      # 工具函数

🔧 拆分详情

1. SalesTypeSection - 销售类型组件

• 功能: 展示商品的销售类型（一件代发/集采批发）
• 职责: 销售类型的显示和变更记录对比
• 行数: 约50行

2. BasicInfoSection - 基本信息组件

• 功能: 展示商品的基本信息（名称、描述、图片、视频等）
• 职责: 基础信息的展示、视频预览、SKU表格
• 行数: 约300行

3. SalesInfoSection - 销售信息组件

• 功能: 展示销售相关信息（价格、库存、样品等）
• 职责: 价格信息、库存信息、样品信息的展示
• 行数: 约700行

4. LogisticsInfoSection - 物流信息组件

• 功能: 展示物流相关信息（运费模板、配送规则等）
• 职责: 运费信息的展示和对比
• 行数: 约100行

5. GoodsDetailSection - 商品详情组件

• 功能: 展示商品详情和素材
• 职责: 商品详情HTML渲染、素材文件展示
• 行数: 约80行

6. AnchorNavigation - 锚点导航组件

• 功能: 提供页面内导航
• 职责: 锚点导航的渲染和交互
• 行数: 约60行

7. GoodsDetailSkeleton - 骨架屏组件

• 功能: 加载状态的骨架屏
• 职责: 加载时的占位显示
• 行数: 约10行

🛠 组件抽取

DescriptionsItem - 描述项格式化组件

• 位置: components/DescriptionsItem/index.tsx
• 功能: 统一处理描述项的格式化，包括变更记录的显示
• 复用: 所有子组件都可以使用

✅ 优化效果

代码可维护性

• 主组件从1863行减少到约300行
• 每个子组件职责单一，易于理解和修改
• 组件间耦合度低，独立性强

代码复用性

• 子组件可以在其他场景中复用
• 组件函数统一管理，避免重复代码
• 类型定义清晰，便于扩展

开发体验

• 文件结构清晰，易于定位问题
• 组件拆分后，修改某个功能时只需要关注对应组件
• 测试更容易进行，可以针对单个组件进行测试

🔄 使用方式

拆分后的使用方式保持不变：

import GoodsDetailDrawer from '@fle-ui-plus/goods-detail-drawer';

// 使用方式完全一致
<GoodsDetailDrawer
  open={open}
  onClose={onClose}
  request={request}
  type="detail"
/>