@fle-ui/plus-goods-detail-drawer/README.md

@fle-ui/plus-goods-detail-drawer

# Goods Detail Drawer

一个高性能的商品详情抽屉组件，支持商品详情展示、审核流程和变更对比等功能。

## 功能特性

- 🚀 **高性能渲染** - 使用 React Hooks 优化，减少不必要的重渲染
- 📱 **响应式设计** - 根据屏幕尺寸自动调整抽屉宽度
- 🔍 **审核流程** - 支持商品变更审核、通过、驳回、撤回等操作
- 📊 **变更对比** - 支持变更前后内容对比展示
- 🎨 **主题定制** - 支持 Ant Design 主题色定制
- ♿ **无障碍支持** - 支持键盘导航和屏幕阅读器

## 安装使用

```bash
npm install @fle-ui-plus/goods-detail-drawer
```

```tsx
import { GoodsDetailDrawer } from '@fle-ui-plus/goods-detail-drawer';

const App = () => {
  const [open, setOpen] = useState(false);
  
  return (
    <GoodsDetailDrawer
      open={open}
      onClose={() => setOpen(false)}
      request={async () => {
        // 返回商品详情数据
        return { success: true, data: goodsDetail };
      }}
      type="detail"
    />
  );
};
```

## API 参数

### GoodsDetailDrawerProps

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| open | 是否显示抽屉 | boolean | false |
| onClose | 关闭抽屉的回调 | () => void | - |
| title | 抽屉标题 | string | 根据 type 自动生成 |
| request | 获取商品详情的请求函数 | () => Promise<ApiResponse> | - |
| width | 抽屉宽度 | string \| number | 响应式宽度 |
| type | 抽屉类型 | 'detail' \| 'audit' \| 'readAudit' | 'detail' |
| hideFields | 隐藏的字段列表 | HideFieldsType[] | [] |
| onPass | 审核通过回调 | () => void | - |
| onReject | 审核驳回回调 | (reason: string) => void | - |
| onWithdraw | 撤回变更回调 | () => void | - |

### 响应式宽度配置

组件会根据屏幕尺寸自动调整宽度：

- 1920px+ : 50vw (大屏幕)
- 1440px+ : 60vw (中等屏幕)  
- 1024px+ : 70vw (小屏幕)
- <1024px : 80vw (移动端)

## 性能优化特性

### 1. React Hooks 优化

- **useMemo**: 缓存计算结果，避免重复计算
- **useCallback**: 缓存函数引用，减少子组件重渲染
- **useEffect**: 优化依赖项，避免不必要的副作用

### 2. 渲染优化

- 条件渲染优化，减少不必要的 DOM 操作
- 状态管理优化，避免频繁的状态更新
- 事件处理函数优化，使用 useCallback 包装

### 3. 内存管理

- 使用 ResizeObserver 监听尺寸变化
- 提供降级方案，兼容性更好
- 及时清理事件监听器和观察器

## 最佳实践

### 1. 数据请求优化

```tsx
// 推荐：使用 useCallback 包装请求函数
const handleRequest = useCallback(async () => {
  // 请求逻辑
}, [dependencies]);

// 避免：每次渲染都创建新函数
const handleRequest = async () => {
  // 请求逻辑
};
```

### 2. 条件渲染优化

```tsx
// 推荐：使用 useMemo 缓存计算结果
const showAlert = useMemo(() => 
  isAudit && data?.status && !loading, 
  [isAudit, data?.status, loading]
);

// 避免：在 JSX 中直接计算
{(type === 'audit' || type === 'readAudit') && data?.status && !loading && (
  <Alert />
)}
```

### 3. 事件处理优化

```tsx
// 推荐：使用 useCallback 包装事件处理函数
const handleReject = useCallback(() => {
  // 处理逻辑
}, [dependencies]);

// 避免：内联函数
onClick={() => setRejectOpen(true)}
```

## 类型定义

### GoodsInfo

商品基础信息接口，包含：

- `basicInfo`: 基础信息（名称、描述、图片等）
- `salesInfo`: 销售信息（价格、库存等）
- `freightInfo`: 物流信息（运费、配送等）
- `goodsDetail`: 商品详情（规格、SKU等）

### AuditInfo

审核信息接口，包含：

- `status`: 审核状态（10: 待审核, 20: 通过, -10: 驳回, -20: 撤回）
- `changeType`: 变更类型
- `applyReason`: 申请原因
- `beforeContent`: 变更前内容
- `changeContent`: 变更后内容

## 样式定制

组件使用 Less 预处理器，支持主题色定制：

```less
// 自定义主题色
:root {
  --fle-ui-primary-color: #1890ff;
}

// 组件样式覆盖
.goods-detail-drawer {
  &-section {
    padding: 24px 20px 24px 32px;
    
    &-title::before {
      background-color: var(--fle-ui-primary-color);
    }
  }
}
```

## 错误处理

组件内置错误处理机制：

- 网络请求失败时显示错误提示
- 数据为空时显示空状态页面
- 提供重试机制，提升用户体验

## 浏览器兼容性

- Chrome >= 64
- Firefox >= 55
- Safari >= 11.1
- Edge >= 79

对于不支持 ResizeObserver 的浏览器，组件会自动降级使用定时器方案。

## 更新日志

### v2.0.0
- ✨ 新增性能优化，使用 React Hooks 优化渲染
- 🚀 优化响应式设计，支持动态宽度调整
- 🔧 重构代码结构，提升可维护性
- 🐛 修复内存泄漏问题
- 📱 优化移动端体验

### v1.0.0
- 🎉 首次发布
- ✨ 支持商品详情展示
- ✨ 支持审核流程
- ✨ 支持变更对比

## 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个组件。

## 许可证

MIT License