@quantabit/cms-sdk

QuantaBit CMS 内容管理 SDK - 提供可复用的内容、分类、标签、媒体管理功能

📦 安装

npm install @quantabit/cms-sdk
# 或
yarn add @quantabit/cms-sdk

🚀 快速开始

1. 引入 Provider

import { CMSProvider } from "@quantabit/cms-sdk";
import "@quantabit/cms-sdk/styles.css";

function App() {
  return (
    <CMSProvider
      apiUrl="https://api.example.com/v1"
      token="your-auth-token"
      language="zh"
    >
      <YourComponent />
    </CMSProvider>
  );
}

2. 使用组件

import { ContentEditor, ContentList, MediaLibrary } from '@quantabit/cms-sdk';

// 内容编辑器
<ContentEditor
  onSave={(content) => console.log('保存:', content)}
  onPublish={(content) => console.log('发布:', content)}
/>

// 内容列表
<ContentList
  onEdit={(content) => console.log('编辑:', content)}
  onDelete={(content) => console.log('删除:', content)}
/>

// 媒体库
<MediaLibrary
  onSelect={(file) => console.log('选择:', file)}
  selectable
/>

3. 使用 Hooks

import {
  useContent,
  useCategories,
  useTags,
  useMedia,
} from "@quantabit/cms-sdk";

function MyComponent() {
  // 内容管理
  const { content, loading, create, update, publish } = useContent();

  // 分类管理
  const { categories, loadCategories, createCategory } = useCategories();

  // 标签管理
  const { tags, loadTags, createTag } = useTags();

  // 媒体管理
  const { files, upload, deleteFile } = useMedia();

  return <div>...</div>;
}

📚 组件列表

| 组件 | 描述 | | ----------------- | ---------------------------------------------- | | ContentEditor | 内容编辑器，支持富文本编辑、分类选择、标签添加 | | ContentList | 内容列表展示，支持搜索、筛选、分页 | | ContentCard | 内容卡片，展示单个内容摘要 | | MediaLibrary | 媒体库管理，支持上传、预览、选择 | | CategoryManager | 分类管理器，树形结构展示 |

🪝 Hooks 列表

| Hook | 描述 | | --------------- | ------------------------------------ | | useCMS | 获取 CMS Context 上下文 | | useContent | 单内容管理（创建、更新、发布、删除） | | useContents | 内容列表管理（分页、筛选、批量操作） | | useCategories | 分类管理 | | useTags | 标签管理 | | useMedia | 媒体文件管理 | | useVersions | 内容版本管理 |

⚙️ CMSProvider 配置

| 属性 | 类型 | 必填 | 描述 | | ---------- | ----------------- | ---- | ------------------- | | apiUrl | string | 是 | API 基础地址 | | token | string | 否 | 认证 Token | | language | 'zh' \| 'en' | 否 | 语言设置，默认 zh | | onError | (error) => void | 否 | 错误回调 |

🌍 国际化

SDK 内置中英文支持：

import { setLanguage, t } from "@quantabit/cms-sdk";

// 切换语言
setLanguage("en");

// 获取翻译
console.log(t("save")); // "Save"

📖 API 类型

// 内容类型
interface Content {
  id: string;
  title: string;
  content: string;
  type: "article" | "page" | "image" | "video" | "audio";
  status: "draft" | "pending" | "published" | "archived";
  category_id?: string;
  tags?: string[];
  cover_url?: string;
  created_at: string;
  updated_at: string;
}

// 分类类型
interface Category {
  id: string;
  name: string;
  slug: string;
  parent_id?: string;
  children?: Category[];
}

// 标签类型
interface Tag {
  id: string;
  name: string;
  slug: string;
  count?: number;
}

📄 许可证

MIT License