resource-lib

基于 antd 5、jotai 与 ky 的素材库组件与工具集，支持 Modal 与 Panel 两种形态，并使用 @tanstack/react-query 获取与缓存数据。

安装

请确保安装以下依赖（版本以项目为准）：

• antd 5
• jotai 2
• ky 1
• @tanstack/react-query 4
• react ≥ 16.14

快速开始

1. 全局样式与 Provider

在应用入口引入 antd 5 的重置样式，并使用 Jotai 与 React Query 的 Provider 包裹应用：

import 'antd/dist/reset.css'
import React from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AssetsContext, AssetsModal } from '@21epub/resource-lib'

const queryClient = new QueryClient()

const App = () => (
  <AssetsContext>
    <QueryClientProvider client={queryClient}>
      {/* 你的应用 */}
      <AssetsModal />
    </QueryClientProvider>
  </AssetsContext>
)

createRoot(document.getElementById('root')!).render(<App />)

1. 打开素材选择（Modal）

通过库内置的 useInsertAssets 打开组件并在回调中接收素材：

import React, { useEffect } from 'react'
import { AssetsModal, useInsertAssets } from '@21epub/resource-lib'

export default function Demo() {
  const insertAssets = useInsertAssets({
    type: 'image',
    multiple: true,
    onInsert: (assets) => {
      console.log('selected assets', assets)
    },
  })

  useEffect(() => {
    insertAssets()
  }, [insertAssets])

  return <AssetsModal />
}

1. 面板形态（Panel）

import React from 'react'
import { AssetsPanel } from '@21epub/resource-lib'

export default () => <AssetsPanel pubicLibraryVisible assetRemovable />

组件 Props 摘要

• AssetsModal、AssetsPanel 共同支持：
  • pubicLibraryVisible: 是否显示公共素材
  • psdImporterVisible: 是否显示 PSD 导入（仅 Modal 支持 PSD 按钮）
  • assetRemovable: 是否允许删除素材
  • uploadCompressible: 是否允许压缩素材
  • onReceive: 上传前拦截文件
  • onUploaded: 上传完成回调

数据与网络

• 请求由 ky 发起，默认前缀为 /v3/api/material/。
• 本仓库在本地开发与 Storybook 中通过代理转发到后端（见 .storybook/middleware.js）。如果在你的应用中使用，请配置相同的代理或由网关统一转发该前缀。

在 Storybook 中调试

• 全局在 .storybook/preview.js 中注入了 antd 样式与 Providers（Jotai、React Query）。
• 已在 .storybook/middleware.js 内设置了 /v2 与 /v3 的 API 代理。
• 直接运行脚本：npm run storybook。

从 Recoil 迁移

• 旧版 AssetsRecoilRoot、useAssetsModalState 已替换为 Jotai 与 useInsertAssets。
• 现在需要用 AssetsContext（Jotai Provider 的 re-export）与 QueryClientProvider 包裹应用。