# CMS React 组件（CMS React 元件） ## 概述 `@rytass/cms-react-components` 提供基于 Mezzanine UI 的 CMS 管理介面元件，支持文章生命周期管理、权限控制和审核流程。 ## 快速入门 ### 安装 npm install @rytass/cms-react-components @mezzanine-ui/react @mezzanine-ui/core ### 提供商设置从 '@rytass/cms-react-components' 导入 { DialogProvider, ModalProvider }; 函数应用程序（）{ 返回（ <对话框提供者> <模式提供者> <您的CMS应用程序/> ）； } ## 核心组件 ### 标准CMSTable 进阶资料表格，支持排序、过滤、分页、批次操作：导入{ 标准CMS表，文章阶段，文章权限，文章表操作，来自“@rytass/cms-react-components”； const 文章列表 = () => { 常量列 = [ { title: '标题', dataIndex: '标题' }, { title: '创建时间', dataIndex: 'createdAt' }, { title: '状态', dataIndex: '舞台' }, ]; 返回（ <标准CMS表<文章> 列={列} 数据源={文章} currentStage={ArticleStage.DRAFT} 用户权限={[ 文章权限.CreateArticle, 文章权限.UpdateArticleInDraft, 文章权限.DeleteArticleInDraft, 文章权限.SubmitPutBackArticle, ]} // 任选：自行订定各阶段可用操作行动={{ [文章阶段.草案]: [ 文章表操作.更新， ArticleTableActions.提交，文章表操作.删除， ], }} 动作事件={{ onView: async (article) => router.push(`/articles/${article.id}`), onSubmit: async (article) => 等待submitArticle(article.id), onDelete: async (article) =>等待deleteArticle(article.id), onPutBack: async (article) => 等待 putBackArticle(article.id), onRelease：async（文章，releaseAt）=>等待releaseArticle（article.id，releaseAt）， onWithdraw：async（文章）=>等待withdrawArticle（article.id）， onApprove: async (article) => 等待approveArticle(article.id), onReject：async（文章，原因）=>等待拒绝文章（文章.id，原因）， }} /> ）； }; ### 标准CMSFormActions 表单操作按钮，根据权限和级别显示：导入{ 标准CMSFormActions，文章阶段，文章权限，来自“@rytass/cms-react-components”；从'react-hook-form'导入{useForm}；接口文章表单数据{ 标题：字符串；内容：字符串； } const ArticleForm = () => { const 方法 = useForm(); 返回（ methods={methods} //react-hook-form 的 UseFormReturn currentStage={ArticleStage.DRAFT} // 当前文章阶段 userPermissions={[ // 用户权限文章权限.CreateArticle, 文章权限.UpdateArticleInDraft, 文章权限.SubmitPutBackArticle, ]} createMode={true} // 建立模式（与编辑模式）动作事件={{ // 建立模式下的操作 onCreateToDraft：async（数据）=>等待saveToDraft（数据）， onCreateAndSubmit：async（数据）=>等待createAndSubmit（数据）， onCreateAndRelease：async（数据，releasedAt）=> { 等待 createAndRelease(数据,releasedAt); }, onCreateAndApprove：async（数据）=>等待createAndApprove（数据）， // 编辑模式下的操作 onUpdateToDraft：异步（数据）=>等待updateToDraft（数据）， onUpdateAndSubmit: async (data) => 等待 updateAndSubmit(data), onUpdateAndRelease：异步（数据，releasedAt）=> { 等待 updateAndRelease(数据,releasedAt); }, onUpdateAndApprove: async (data) => 等待 updateAndApprove(data), // 通用操作 onSubmit：async（数据）=>等待submitForReview（数据）， onRelease：async（数据，releaseAt）=>等待释放（数据，releaseAt）， onApprove：异步（数据）=>等待批准（数据）， onReject: async (数据, 原因) => 等待拒绝(数据, 原因), onLeave: async (data) => router.back(), onGoToEdit: async (data) => router.push(`/articles/${data.id}/edit`), }} leaveButtonText="返回列表" // 任选：自订离开按钮文字 actionButtonText="储存草稿" // 任选：自订操作按钮文字 commitButtonText="送审" // 任选：自订送出按钮文字 disableLeaveButton={(值) =>methods.formState.isSubmitting} disableActionButton={(values) => !values.title} disableSubmitButton={(values) => !values.title || !values.content} > {/* 表单栏位 */}

</标准CMSFormActions>
      ）；
    };

**StandardCMSFormActionsProps：**

属性 | 型别 | 必填 | 说明  
---|---|---|---  
`方法` | `UseFormReturn<T>` | 是 | react-hook-form 的表单方法  
`当前阶段` | `文章阶段` | 是 | 当前文章阶段  
`用户权限` | `文章权限[]` | 是 | 用户权限  
`actionsEvents` | `StandardCMSFormActionsEventsProps<T>` | 是 | 各操作回调函数式  
`创建模式` | `布尔值` | 否 | 是否为建立模式（影响显示的按钮）  
`孩子们` | `ReactNode` | 是 | 表单内容  
`类名` | `字符串` | 否 | 容器类名  
`actionsClassName` | `字符串` | 否 | 按钮区 类名  
`leaveButtonText` | `字符串` | 否 | 离开按钮文字  
`actionButtonText` | `字符串` | 否 | 操作按钮文字  
`提交按钮文本` | `字符串` | 否 | 送出按钮文字  
`禁用离开按钮` | `（值：T）=> 布尔值` | 否 | 离开按钮取消条件  
`禁用操作按钮` | `（值：T）=> 布尔值` | 否 | 操作按钮取消条件  
`禁用提交按钮` | `（值：T）=> 布尔值` | 否 | 送出按钮取消条件  
`onLeave` | `(值：T) => Promise<void>` | 否 | 离开按钮事件（优先于 actionsEvents.onLeave）  
`onAction` | `(值：T) => Promise<void>` | 否 | 操作按钮事件  
`onSubmit` | `(值：T) => Promise<void>` | 否 | 送出按钮事件（优先于actionsEvents.onSubmit）  
  
### 标准CMS列表

整合 Tabs + Table 的完整文章列表元件：
    
    
    import {
      StandardCMSList,
      ArticleStage,
      ArticlesPermissions,
    } from '@rytass/cms-react-components';
    
    const ArticleManagement = () => {
      return (
        <StandardCMSList<Article>
          columns={columns}
          dataSource={articles}
          defaultStage={ArticleStage.DRAFT}
          userPermissions={[
            ArticlesPermissions.CreateArticle,
            ArticlesPermissions.UpdateArticleInDraft,
            ArticlesPermissions.DeleteArticleInDraft,
          ]}
          onTabChange={(stage) => {
            // 切换 Tab 时重新载入资料
            fetchArticles(stage);
          }}
          tabsNaming={{
            [ArticleStage.DRAFT]: '草稿区',
            [ArticleStage.REVIEWING]: '待审核',
            [ArticleStage.VERIFIED]: '可发布',
            [ArticleStage.SCHEDULED]: '已预约',
            [ArticleStage.RELEASED]: '已发布',
          }}
          actionsEvents={{
            onView: (article) => router.push(`/articles/${article.id}`),
            onSubmit: async (article) => await submitArticle(article.id),
            onDelete: async (article) => await deleteArticle(article.id),
          }}
        />
      );
    };

**StandardCMSListProps：**

继承 `StandardCMSTableProps`（除了 `currentStage`），额外提供：

属性 | 型别 | 必填 | 说明  
---|---|---|---  
`defaultStage` | `ArticleStage` | 否 | 预设 Tab（预设 `DRAFT`）  
`onTabChange` | `(stage: ArticleStage) => void` | 否 | Tab 切换回调  
`tabsNaming` | `{ [key in ArticleStage]?: string }` | 否 | 自订 Tab 名称  
`tableClassName` | `string` | 否 | Table 自订 className  
  
### StandardCMSTabs

独立使用的文章状态 Tabs：
    
    
    import { StandardCMSTabs, ArticleStage } from '@rytass/cms-react-components';
    
    const [activeStage, setActiveStage] = useState(ArticleStage.DRAFT);
    
    <StandardCMSTabs
      activeStage={activeStage}
      onChange={(stage) => setActiveStage(stage)}
      tabsNaming={{
        [ArticleStage.RELEASED]: '已发布',
        [ArticleStage.SCHEDULED]: '已预约',
        [ArticleStage.VERIFIED]: '可发布',
        [ArticleStage.REVIEWING]: '待审核',
        [ArticleStage.DRAFT]: '草稿区',
      }}
    />

**StandardCMSTabsProps：**

属性 | 型别 | 必填 | 说明  
---|---|---|---  
`activeStage` | `ArticleStage` | 是 | 当前选中的阶段  
`onChange` | `(stage: ArticleStage) => void` | 是 | Tab 切换回调  
`tabsNaming` | `{ [key in ArticleStage]?: string }` | 否 | 自订 Tab 名称  
  
**预设 Tab 顺序：** 已发布 → 已预约 → 可发布 → 待审核 → 草稿区

## Modals

### DeleteWithdrawModal

删除/撤下选择对话框（让使用者选择要删除还是撤下）：
    
    
    import {
      useModal,
      DeleteWithdrawModal,
      DeleteWithdrawModalRadio,
    } from '@rytass/cms-react-components';
    
    const { openModal } = useModal();
    
    openModal({
      children: (
        <DeleteWithdrawModal
          showSeverityIcon={false}
          defaultRadioValue={DeleteWithdrawModalRadio.Withdraw}
          withDelete={true}
          withWithdraw={true}
          onDelete={async () => {
            await deleteArticle(id);
            // closeModal() 由元件内部自动呼叫
          }}
          onWithdraw={async () => {
            await withdrawArticle(id);
            // closeModal() 由元件内部自动呼叫
          }}
        />
      ),
    });

**DeleteWithdrawModalProps：**

属性 | 型别 | 必填 | 说明  
---|---|---|---  
`showSeverityIcon` | `boolean` | 否 | 显示警告图示（预设 `false`）  
`defaultRadioValue` | `DeleteWithdrawModalRadio` | 是 | 预设选项  
`withDelete` | `boolean` | 否 | 显示「永久删除」选项  
`withWithdraw` | `boolean` | 否 | 显示「移至可发布区」选项  
`onDelete` | `() => Promise<void>` | 是 | 删除回调  
`onWithdraw` | `() => Promise<void>` | 是 | 撤下回调  
  
**DeleteWithdrawModalRadio：**
    
    
    enum DeleteWithdrawModalRadio {
      Delete = 'Delete',     // 永久删除
      Withdraw = 'Withdraw', // 撤下至可发布区
    }

### RejectModal

审核拒绝（含理由输入）：
    
    
    从 '@rytass/cms-react-components' 导入 { useModal, RejectModal };
    
    const { openModal } = useModal();
    
    开放模式（{
      孩子们：（
        <拒绝模态
          onReject={异步（原因）=> {
            等待拒绝文章（id，原因）；
            // closeModal() 由元素内部自动调用
          }}
        />
      ),
    });

**RejectModalProps：**

属性 | 型别 | 必填 | 说明  
---|---|---|---  
`onReject` | `（原因：字符串）=> Promise<void>` | 是 | 拒绝回调，给用户输入的不通过原因  
  
> **注意：** RejectModal 会自动显示「审核不通过」标题和说明文字，用户必须输入不通过原因才能送出。Modal 会在 onReject 完成后自动关闭。

### 验证发布模式

发布/审核用途清单：
    
    
    导入{
      使用模态，
      验证发布模式，
      验证发布模态无线电，
    来自“@rytass/cms-react-components”；
    
    开放模式（{
      孩子们：（
        <验证发布模式
          title="发布文章"
          显示严重性图标={假}
          defaultRadioValue={VerifyReleaseModalRadio.Now}
          批准={true}
          withReject={真}
          onRelease={async (releasedAt: string) => {
            等待releaseArticle(id,releaseAt);
          }}
          onApprove={async()=>{
            等待批准文章（id）；
          }}
          onReject={异步（原因：字符串）=> {
            等待拒绝文章（id，原因）；
          }}
        />
      ),
    });

**VerifyReleaseModalProps：**

属性 | 型别 | 必填 | 说明  
---|---|---|---  
`标题` | `字符串` | 是 |模态标题  
`显示严重性图标` | `布尔值` | 否 | 显示警告图标  
`defaultRadioValue` | `VerifyReleaseModalRadio` | 否 | 预设选项（预设`Now`）  
`withApprove` | `布尔值` | 否 | 显示「即刻通过」选项  
`withReject` | `布尔值` | 否 | 显示“不通过”选项  
`onRelease` | `(releasedAt: string) => Promise<void>` | 是 | 发布回调（ISO 格式时间）  
`onApprove` | `() => Promise<void>` | 否 | 通过审核回调  
`onReject` | `（原因：字符串）=> Promise<void>` | 否 | 拒绝审核回调  
  
### LogsModal

历史版本与稽核日志：
    
    
    从 '@rytass/cms-react-components' 导入 { useModal、LogsModal、LogsStageData、ArticleStage }；
    
    const { openModal } = useModal();
    
    // 规定获取日志资料的函式
    const fetchLogsData = async (): Promise<LogsStageData> => {
      // 从API或其他来源获取文章各阶段的日志数据
      返回{
        [ArticleStage.DRAFT]：{
          创建于：'2024-01-01T00:00:00Z',
          创建者: '王小明',
          更新于：'2024-01-02T10:00:00Z',
          更新者: '王小明',
          提交于： '',
          提交者: '',
          已验证：''，
          验证者: '',
          发布于： '',
          发布者: '',
          版本：1，
        },
        [ArticleStage.REVIEWING]：{
          创建于：''，
          创建者： '',
          更新于： '',
          更新者： '',
          提交时间：'2024-01-03T09:00:00Z',
          提交者: '王小明',
          已验证：''，
          验证者: '',
          发布于： '',
          发布者: '',
          版本：2，
        },
        // ...其他阶段
      };
    };
    
    开放模式（{
      孩子们：（
        <日志模态
          onGetData={fetchLogsData}
          舞台用语={{
            [ArticleStage.DRAFT]：{
              stageName: '草稿',
              timeTitle: '最后编辑时间',
              memberTitle: '编辑人员',
            },
            [ArticleStage.REVIEWING]：{
              stageName: '待审核',
              timeTitle: '送审时间',
              memberTitle: '送审人员',
            },
            // ... 可自订各阶段的文字
          }}
        />
      ),
    });

#### LogsModalProps

属性 | 型别 | 必填 | 说明  
---|---|---|---  
`onGetData` | `() => Promise<LogsStageData>` | 是 | 获取日志资料的非同步函式  
`舞台措辞` | `{ [ArticleStage 中的键]?: { stageName?, timeTitle?, memberTitle? } }` | 否 | 自订各阶段的显示文字  
  
#### LogsStageData 与 LogsData
    
    
    // 各阶段的日志数据
    类型 LogsStageData = {
      [ArticleStage 中的键]？：LogsData |无效的;
    };
    
    // 单一阶段的详细资料
    接口日志数据{
      创建于：字符串；
      创建者：字符串；
      更新时：字符串；
      更新者：字符串；
      提交地点：字符串；
      提交者：字符串；
      已验证：字符串；
      验证者：字符串；
      发布于：字符串；
      发布者：字符串；
      版本？：编号；   // 版本号
      原因？：字符串；    // 退回原因（仅 DRAFT 阶段显示）
    }

## TypeScript 接口

### 活动道具
    
    
    // 表操作事件
    接口 StandardCMSTableEventsProps<T 扩展 TableDataSourceWithID> {
      onView?: (来源: T) => Promise<void>;
      onSubmit?: (来源: T) => Promise<void>;
      onPutBack?: (来源: T) => Promise<void>;
      onRelease?: (来源：T，releasedAt：字符串) => Promise<void>;
      onWithdraw?: (来源: T) => Promise<void>;
      onApprove?: (来源: T) => Promise<void>;
      onReject?: (来源: T, 原因: string) => Promise<void>;
      onDelete?: (来源: T) => Promise<void>;
    }
    
    // FormActions 操作事件
    接口 StandardCMSFormActionsEventsProps<T 扩展 FieldValues> {
      onLeave?: (值: T) => Promise<void>;
      onGoToEdit?: (值: T) => Promise<void>;
      onCreateToDraft?: (值: T) => Promise<void>;
      onCreateAndRelease？：（值：T，releasedAt：字符串）=> Promise <void>；
      onCreateAndApprove?: (值: T) => Promise<void>;
      onCreateAndSubmit?: (值: T) => Promise<void>;
      onUpdateToDraft?: (值: T) => Promise<void>;
      onUpdateAndRelease？：（值：T，releaseAt：字符串）=> Promise <void>；
      onUpdateAndApprove?: (值: T) => Promise<void>;
      onUpdateAndSubmit?: (值: T) => Promise<void>;
      onRelease？：（值：T，releasedAt：字符串）=> Promise <void>；
      onApprove?: (值: T) => Promise<void>;
      onReject?: (值：T，原因：字符串) => Promise<void>;
      onSubmit?: (值: T) => Promise<void>;
    }

### 文章表操作类型

规定各阶段可用的表操作：
    
    
    接口 ArticleTableActionsType {
      [ArticleStage.DRAFT]?: (
        |文章表操作.更新
        |文章表操作.提交
        |文章表操作.发布
        |文章表操作.删除
      )[];
      [ArticleStage.REVIEWING]?: (
        |文章表操作.更新
        |文章表操作.评论
        |文章表操作.删除
        |文章表操作.PutBack
      )[];
      [ArticleStage.VERIFIED]?: (
        |文章表操作.视图
        |文章表操作.更新
        |文章表操作.发布
        |文章表操作.删除
      )[];
      [ArticleStage.SCHEDULED]?: (
        |文章表操作.视图
        |文章表操作.更新
        | ArticleTableActions.Withdraw
      )[];
      [ArticleStage.RELEASED]?: (
        |文章表操作.更新
        |文章表操作.删除
      )[];
      [ArticleStage.UNKNOWN]?: [];
    }

## 枚举

### 文章阶段
    
    
    枚举文章阶段 {
      DRAFT = 'DRAFT', // 草稿
      REVIEWING = 'REVIEWING', // 审核中
      VERIFIED = 'VERIFIED', // 已核准
      SCHEDULED = 'SCHEDULED', // 预约发布
      RELEASED = 'RELEASED', // 已发布
      UNKNOWN = '未知', // 未知状态
    }

### 文章权限

**细度权限（按文章状态颗粒解读）：**
    
    
    枚举 ArticlesPermissions {
      // 通用权限
      CreateArticle = 'CreateArticle', // 创建文章
      SubmitPutBackArticle = 'SubmitPutBackArticle', // 送审/退回
      ApproveRejectArticle = 'ApproveRejectArticle', // 审核通过/拒绝
    
      // 草稿阶段
      UpdateArticleInDraft = 'UpdateArticleInDraft',
      DeleteArticleInDraft = '删除ArticleInDraft',
    
      // 审核审核阶段
      UpdateArticleInReviewing = 'UpdateArticleInReviewing',
      删除文章正在审阅 = '删除文章正在审阅',
    
      // 已核准核准阶段
      UpdateArticleInVerified = 'UpdateArticleInVerified',
      ReleaseArticleInVerified = 'ReleaseArticleInVerified',
      DeleteArticleInVerified = 'DeleteArticleInVerified',
    
      // 预定的预约发布阶段
      UpdateArticleInScheduled = 'UpdateArticleInScheduled',
      ReleaseArticleInScheduled = 'ReleaseArticleInScheduled',
      WithdrawArticleInScheduled = 'WithdrawArticleInScheduled',
    
      // 已发布 已发布阶段
      UpdateArticleInReleased = 'UpdateArticleInReleased',
      ReleaseArticleInReleased = 'ReleaseArticleInReleased',
      WithdrawArticleInReleased = 'WithdrawArticleInReleased',
      DeleteArticleInReleased = 'DeleteArticleInReleased',
    }

### 文章表操作

**注意：使用 PascalCase（非 SCREAMING_SNAKE_CASE）**
    
    
    枚举 ArticleTableActions {
      View = 'View', // 检视
      Update = '更新', // 编辑
      Delete = '删除', // 删除
      Submit = '提交', // 送审
      PutBack = 'PutBack', // 退回
      Review = 'Review', // 审核
      Release = '发布', // 发布
      Withdraw = 'Withdraw', // 撤下
    }

### 验证发布模式无线电
    
    
    枚举VerifyReleaseModalRadio {
      Now = 'Now', // 立即发布
      Schedule = 'Schedule', // 预约发布
      Approve = 'Approve', // 即刻通过
      Reject = 'Reject', // 不通过
    }

## 默认权限预设
    
    
    导入{
      默认管理员角色权限，
      默认GeneralRole权限，
      默认表操作，
    来自“@rytass/cms-react-components”；
    
    // 管理员角色默认权限（完整权限）
    // 包含所有阶段的Update/Delete/Release/Withdraw权限
    
    // 一般角色默认权限（有限权限）
    // 主要包含创建、草稿编辑、送审、部分发布权限
    
    // 预设表格操作（按阶段）
    // 草案：[更新、提交、发布、删除]
    // 审查：[更新、审查、删除、放回]
    // 已验证：[查看、更新、发布、删除]
    // 预定：[查看、更新、撤回]
    // 已发布：[更新、删除]

## 实用程序

### 有权限

权限检查工具函式：
    
    
    从 '@rytass/cms-react-components' 导入 { havePermission, ArticlesPermissions };
    
    const canDelete = havePermission({
      用户权限：用户权限，
      targetPermission: ArticlesPermissions.DeleteArticleInDraft,
    });
    
    如果（可以删除）{
      // 显示删除按钮
    }

### 版本日志图标

版本日志图标元素：
    
    
    从 '@rytass/cms-react-components' 导入 { VersionLog } ；
    
    <VersionLog 宽度={24} 高度={24} />

## 钩子

### 使用对话框
    
    
    从 '@rytass/cms-react-components' 导入 { useDialog } ；
    
    const { openDialog, closeDialog } = useDialog();
    
    打开对话框({
      title: '提示',
      content: '操作成功！',
      onConfirm：关闭对话框，
    });

### useModal
    
    
    从 '@rytass/cms-react-components' 导入 { useModal } ；
    
    const { openModal, closeModal } = useModal();
    
    开放模式（{
      孩子：<YourModalComponent prop1 =“值”/>，
      // 可选配置（继承Mezzanine UI ModalProps）
      size: '中', // '小' | '中等' | '大' | “超大”
      width: 600, // 自订宽度(px)
      严重性: '警告', // '成功' | '警告' | ‘错误’
      hideCloseIcon: true, // 是否隐藏关闭按钮（默认true）
      disableCloseOnBackdropClick: false, // 是否禁止点击背景关闭（默认 false）
      className: 'my-modal', // 自订 className
      onClose: () => {}, // 关闭时回调
    });

**模态配置类型：**

属性 | 型别 | 预设值 | 说明  
---|---|---|---  
`孩子们` | `React.JSX.Element` | - |模态内容（定义为JSX）  
`尺寸` | `模态尺寸` | `'中'` |莫代尔尺寸  
`宽度` | `数字` | - | 自订宽度 (px)  
`严重性` | `字符串` | - | 严重程度图标  
`隐藏关闭图标` | `布尔值` | `真实` | 隐藏关闭按钮  
`disableCloseOnBackdropClick` | `布尔值` | `假` | 禁止点击背景关闭  
`类名` | `字符串` | - | 自订班级名称  
`onClose` | `() => 无效` | - | 关闭时间回调  
  
## 完整示例
    
    
    导入{
      对话提供者，
      模态提供者，
      StandardCMSList, // 整合版（选项卡+表格）
      标准CMS表，
      标准CMS选项卡，
      使用模态，
      删除WithdrawModal，
      DeleteWithdrawModalRadio, // 删除/撤下选项
      拒绝模态，
      验证发布模式，
      验证发布模态无线电，
      文章阶段，
      文章权限，
      文章表操作，
      defaultAdminRolePermissions, // 默认权限集
      默认GeneralRole权限，
      默认表操作，
    来自“@rytass/cms-react-components”；
    
    // 应用程序包装器
    函数应用程序（）{
      返回（
        <对话框提供者>
          <模式提供者>
            <文章管理/>
          </模态提供者>
        </DialogProvider>
      ）；
    }
    
    // 方法一：使用StandardCMSList（推荐）
    函数 ArticleManagementSimple() {
      const { openModal, closeModal } = useModal();
    
      返回（
        <标准CMS列表<文章>
          列={列}
          数据源={文章}
          defaultStage={ArticleStage.DRAFT}
          userPermissions={defaultAdminRolePermissions}
          onTabChange={(stage) => fetchArticles(stage)}
          动作事件={{
            onView: async (article) => router.push(`/articles/${article.id}`),
            onSubmit: async (article) => 等待submitArticle(article.id),
            onDelete: async (article) =>等待deleteArticle(article.id),
            onRelease：异步（文章，releasedAt）=> {
              等待releaseArticle(article.id,releasedAt);
            },
            onApprove: async (article) => 等待approveArticle(article.id),
            onReject：async（文章，原因）=>等待拒绝文章（文章.id，原因），
          }}
        />
      ）；
    }
    
    // 方法二：分开使用Tabs + Table（更灵活）
    函数文章管理() {
      const { openModal, closeModal } = useModal();
      const [文章，setArticles] = useState<文章[]>([]);
      const [currentStage, setCurrentStage] = useState(ArticleStage.DRAFT);
    
      // 使用细颗粒度权限
      const 用户权限 = [
        文章权限.CreateArticle,
        文章权限.SubmitPutBackArticle,
        文章权限.批准拒绝文章，
        // 草稿
        文章权限.UpdateArticleInDraft,
        文章权限.DeleteArticleInDraft,
        // 审查
        ArticlesPermissions.UpdateArticleInReviewing，
        // 释放
        ArticlesPermissions.UpdateArticleInReleased，
        文章权限.ReleaseArticleInReleased,
      ];
    
      const handleDelete = (文章: 文章) => {
        开放模式（{
          孩子们：（
            <删除WithdrawModal
              defaultRadioValue={DeleteWithdrawModalRadio.Delete}
              withDelete={true}
              withWithdraw={currentStage === ArticleStage.RELEASED}
              onDelete={async() => {
                等待删除文章（文章.id）；
                刷新文章（）；
              }}
              onWithdraw={async()=>{
                等待withdrawArticle(article.id);
                刷新文章（）；
              }}
            />
          ),
        });
      };
    
      const handleRelease = (文章: 文章) => {
        开放模式（{
          孩子们：（
            <验证发布模式
              title="发布文章"
              withApprove={currentStage === ArticleStage.REVIEWING}
              withReject={currentStage === ArticleStage.REVIEWING}
              onRelease={async (releasedAt) => {

等待releaseArticle(article.id,releasedAt);
                刷新文章（）；
                关闭模态（）；
              }}
              onApprove={async()=>{
                等待批准文章（文章.id）；
                刷新文章（）；
                关闭模态（）；
              }}
              onReject={异步（原因）=> {
                等待拒绝文章（文章.id，原因）；
                刷新文章（）；
                关闭模态（）；
              }}
            />
          ),
        });
      };
    
      返回（
        <div>
          <标准CMS选项卡
            activeStage={当前Stage}
            onChange={(阶段) => {
              setCurrentStage(阶段);
              获取文章（阶段）；
            }}
          />
    
          <标准CMS表<文章>
            列={列}
            数据源={文章}
            当前阶段={当前阶段}
            用户权限={用户权限}
            操作={defaultTableActions}
            动作事件={{
              onView: async (article) => router.push(`/articles/${article.id}`),
              onDelete: 处理删除，
              onSubmit：异步（文章）=> {
                等待提交文章（文章.id）；
                刷新文章（）；
              },
              onPutBack：异步（文章）=> {
                等待 putBackArticle(article.id);
                刷新文章（）；
              },
              onRelease: 处理Release,
              onWithdraw：异步（文章）=> {
                等待withdrawArticle(article.id);
                刷新文章（）；
              },
              onApprove: 异步（文章）=> {
                等待批准文章（文章.id）；
                刷新文章（）；
              },
              onReject: async (文章, 原因) => {
                等待拒绝文章（文章.id，原因）；
                刷新文章（）；
              },
            }}
          />
        </div>
      ）；
    }

## 依赖关系

**对等依赖性：**

* `@mezzanine-ui/core`
  * `@mezzanine-ui/react`
  * `@mezzanine-ui/图标`
  * `react`, `react-dom`
  * `反应钩子形式`
  * `dayjs`
  * `洛达什`

## 故障排除

### 模态不显示

确定在应用根框架包装`ModalProvider`：
    
    
    <模式提供者>
      <应用程序/>
    </模态提供者>

### 权限按钮不显示

确认`userPermissions`架构包含对应的**细颗粒度权限**：
    
    
    // 错误：使用简化权限（不存在）
    userPermissions={[ArticlesPermissions.DELETE]} // ❌ 不存在
    
    // 正确：使用更细分的权限
    用户权限={[
      ArticlesPermissions.DeleteArticleInDraft, // ✓ 草稿阶段删除
      ArticlesPermissions.DeleteArticleInReleased, // ✓ 已发布阶段删除
    ]}
    
    // 或使用默认权限集
    userPermissions={defaultAdminRolePermissions} // ✓ 完整权限</article></body></html>

CMS反应

包含技能