产品抽屉组件

一个类似阿里云左上角产品抽屉的 React 组件。

特性

• 🚀 React 18 + TypeScript
• 🎨 UnoCSS 样式系统
• ⚡ Vite 构建工具
• 📦 支持 ESM 和 UMD 格式
• 🎯 支持产品分类展示
• 📱 响应式设计

安装

npm install dreame-drawer

使用示例

import React from 'react'
import { ProductDrawer } from 'dreame-drawer'
import type { ProductItem } from 'dreame-drawer'

import '../node_modules/dreame-drawer/dist/style.css'; // 需要在合适的位置手动引入样式

const products: ProductItem[] = [
  {
    id: '1',
    name: '云服务器 ECS',
    group: '组名',
    link: 'https://example.com',
    is_collect?: '是否是收藏'，
  },
  // ... 更多产品
]

function App() {
  const [open, setOpen] = useState(false); // 弹窗开关
  const [productsData, setProductsData] = useState([]); // 数据
  const [collectionData, setCollectionData] = useState([]); // 收藏的数据
  const [ckickCollectionNum, setCkickCollectionNum] = useState(0); // 点击收藏，取消收藏的按钮，用于触发useEffect的依赖性，进而更新页面

  useEffect(() => {
    getSider({ user: initialState?.currentUser?.name?.split('.')?.[0] })
      .then((response) => {
        if (response?.data && Array.isArray(response?.data)) {
          setProductsData(response?.data);
          setCollectionData(response?.collection || []);
        }
      })
      .catch((error) => {
        console.error('Failed to fetch sider data:', error);
      });
  }, [initialState?.currentUser?.name, ckickCollectionNum]);

  return (
    <div>
      <ProductDrawer
        open={open}
        onClose={() => setOpen(false)}
        productsData={safeProductsData}
        collectionData={collectionData}
        maskClosable={true} // 点击蒙层是否可关闭抽屉，默认false,可选项
        height={'calc(96vh - 3px)'} //默认高度
        handleCollect={async (item) => {

          // 用于处理收藏和取消收藏的具体逻辑
          const username = initialState.currentUser.name.split('.')[0];
          const requestData = { user: username, id: item.id };

          const action = item?.is_collect
            ? removeCollection
            : addCollection;

          const res = await action(requestData);

          if (res?.status === 0) {
            message.success(res?.message);
            setCkickCollectionNum((pre) => pre + 1);
          } else {
            message.error(res?.message);
          }
        }}
      />
    </div>
  )
}

ProductItem

interface ProductItem {
  group: string;
  id: string;
  link: string;
  name: string;
  is_collect?: boolean;
}

interface ProductDrawerProps {
  /** 是否打开抽屉 */
  open: boolean
  /** 关闭抽屉 */
  onClose: () => void
  /** 点击蒙层是否关闭抽屉 */
  maskClosable?: boolean
  /** 产品列表数据 */
  productsData: ProductItem[]
  /** 我的收藏 */
  collectionData: string[]
  /** 是否收藏 */
  handleCollect: (item: ProductItem) => void
  /** 抽屉高度 ，可选项，默认高度为'calc(96vh - 3px)'*/
  height?: string
}

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

构建 npm 包

1. 准备发布

# 登录 npm 账号（如果还没有登录）
npm login

# 检查当前包信息
npm info

# 查看将要发布的文件
npm pack --dry-run

2. 版本管理

# 更新版本号（patch/minor/major）
npm version patch  # 1.0.0 -> 1.0.1
npm version minor  # 1.0.0 -> 1.1.0
npm version major  # 1.0.0 -> 2.0.0

# 或者手动编辑 package.json 中的 version 字段

3. 构建和发布

# 清理之前的构建
npm run clean

# 构建生产版本
npm run build

# 发布到 npm
npm publish

# 如果是首次发布，使用
npm publish --access public

4. 发布到测试环境（可选）

# 发布到 npm 测试环境
npm publish --tag beta

# 或者使用其他测试标签
npm publish --tag alpha
npm publish --tag rc

5. 更新已发布的包

# 更新版本号
npm version patch

# 重新构建
npm run build

# 发布更新
npm publish

6. 撤销发布（紧急情况）

# 撤销最新版本（24小时内）
npm unpublish @dreame/[email protected]

# 撤销整个包（24小时内）
npm unpublish @dreame/drawer--force

注意事项

• 确保 package.json 中的 name 字段是唯一的
• 检查 .npmignore 文件，确保不会发布不必要的文件
• 发布前测试构建的包是否能正常工作
• 建议使用语义化版本号（Semantic Versioning）
• 发布前检查 README.md 是否完整准确

License

ISC