开发接入

开发接入指南

本指南将帮助你以最优雅的方式将 Mewx CMS UI 集成到不同类型的 React 项目中（支持 React 18+）。

1. 安装

在你的项目中安装核心包：

pnpm add @goenhance/cms-ui

---

2. 样式配置

方案 A：Tailwind CSS 预设 + CSS 变量（推荐）

如果你的项目使用了 Tailwind CSS（如 Next.js 默认配置），需要同时配置预设和引入 CSS：

步骤 1：配置 Tailwind 预设

在 tailwind.config.js 中添加预设：

tailwind.config.js

module.exports = {
  presets: [
    require('@goenhance/cms-ui/preset')
  ],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // 预设已经自动包含了组件库的路径，你不需要手动添加 node_modules
  ],
  // ...
}

步骤 2：引入 CSS 变量

在你的全局样式文件（如 app/globals.css 或 src/index.css）中引入：

@import '@goenhance/cms-ui/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

[!IMPORTANT] 为什么需要两步？

• Preset：提供 Tailwind 类名配置（如 text-blocks-primary、rounded-blocks-lg 等）
• CSS 文件：提供 CSS 变量定义（如 --blocks-primary、--blocks-radius-lg 等）

两者缺一不可！Preset 让 Tailwind 识别类名，CSS 文件提供实际的样式值。

---

方案 B：仅引入 CSS（不使用 Tailwind）

如果你的项目没有使用 Tailwind，只需引入预编译的 CSS：

import '@goenhance/cms-ui/styles.css';

[!WARNING] 使用此方案时，组件库的样式是固定的，你无法通过 Tailwind 类名进行自定义。

---

3. 核心用法

渲染 CMS 配置

CMSRender 组件已经标记为 "use client"，可以完美兼容 Next.js 的服务端渲染架构。当你从本库引入组件时，样式会自动按需加载（取决于你的构建配置）。

import { CMSRender } from '@goenhance/cms-ui';

const App = () => {
  const pageConfig = [
    {
      componentName: "Breadcrumb",
      attributes: {
        list: [{ text: "首页", url: "/" }]
      },
      isShow: true
    }
  ];

  return <CMSRender data={{ block: pageConfig }} lang="zh" />;
};

常见问题

• React 版本：确保项目使用的是 React 18+。
• Next.js App Router：组件库完全支持 App Router，所有交互组件均兼容客户端/服务端组件混合模型。