Goods Detail Drawer

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

功能特性

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

安装使用

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

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 | - | | 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. 数据请求优化

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

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

2. 条件渲染优化

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

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

3. 事件处理优化

// 推荐：使用 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 预处理器，支持主题色定制：

// 自定义主题色
: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