# 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行 - 每个子组件职责单一，易于理解和修改 - 组件间耦合度低，独立性强 #### **代码复用性** - 子组件可以在其他场景中复用 - 组件函数统一管理，避免重复代码 - 类型定义清晰，便于扩展 #### **开发体验** - 文件结构清晰，易于定位问题 - 组件拆分后，修改某个功能时只需要关注对应组件 - 测试更容易进行，可以针对单个组件进行测试 ### 🔄 使用方式 拆分后的使用方式保持不变： ```tsx import GoodsDetailDrawer from '@fle-ui-plus/goods-detail-drawer'; // 使用方式完全一致 ```