场景

博客在编写的过程中，文章写到一半，想要保存而非发布，目前无法做到，只能临时保存到本地文件过渡。

思路

新增文章场景：

• 文章未能发布，照样保存到数据库，但设置文章状态为“草稿”。
• 文章发布后，自动生成发布时间，前台展示发布时间，而非文章创建时间。

修改文章场景：

• 未发布的文章，可以继续编写，继续存为草稿或发布。
• 文章已发布，可重新放置回草稿箱，也可以直接修改。

实现

增加两个字段：

• 文章状态 status
• 发布时间 publish_time

判断不同的状态，按钮显示不同的内容：

const isPublished = isAdd || (tempRecord && tempRecord.status === PostStatus.isDraft);

按钮也从单个保存按钮，改为“存为草稿”与“发布”两个按钮。

• 存为草稿按钮，不校验相关字段必填等情况
• 发布按钮，校验所有必填信息

<Button htmlType="button" style={{ marginRight: '30px' }} onClick={handleSaveToDraft}>
  {isPublished ? '存为草稿' : '重新转入草稿'}
</Button>

{/* 在 Form 组件的 onFinish 属性中监听 */}
<Button type="primary" htmlType="submit">
  {isPublished ? '发布' : '更新'}
</Button>

存为草稿的操作：

const handleSaveToDraft = () => {
  const values = form.getFieldsValue();

  onFinish({
    ...values,
    status: PostStatus.isDraft,
  });
};

发布的操作，判断当新增时或文章未发布时，设置 publish_time

const handleSave = (values: Store) => {
  onFinish({
    ...values,
    status: PostStatus.isPublished,
    publish_time:
      isAdd || (tempRecord && tempRecord.status === PostStatus.isDraft)
        ? parseTime(new Date())
        : undefined,
  });
};