diff --git a/assets/creator-studio/src/components/save-state.tsx b/assets/creator-studio/src/components/save-state.tsx index 378b8687..b3bde488 100644 --- a/assets/creator-studio/src/components/save-state.tsx +++ b/assets/creator-studio/src/components/save-state.tsx @@ -1,5 +1,8 @@ /** - * 顶栏保存状态。状态文案即用户对“内容有没有保存”的唯一反馈。 + * 保存状态。状态文案即用户对「内容有没有保存」的唯一反馈。 + * + * 自动保存与手动保存共用同一套取值,但 `autosave` 标记让界面能区别对待: + * 自动保存不该抢走提交按钮的可用性,也不该把「保存中」渲染成用户主动操作。 * * @package Jio */ @@ -8,7 +11,12 @@ import { __ } from '@wordpress/i18n'; export type SaveStatus = 'ready' | 'saving' | 'saved' | 'error' | 'conflict' | 'submitting' | 'submitted'; -export type SaveStateValue = { state: SaveStatus; at: string }; +export type SaveStateValue = { + state: SaveStatus; + at: string; + /** 当前状态是否来自后台自动保存(不阻塞提交按钮)。 */ + autosave?: boolean; +}; const LABELS: Record = { ready: __('尚未保存', 'jio'), @@ -20,11 +28,23 @@ const LABELS: Record = { submitted: __('已提交', 'jio'), }; +/** 自动保存专用的说法:避免让作者以为是自己点了保存。 */ +const AUTOSAVE_LABELS: Partial> = { + saving: __('自动保存中…', 'jio'), + saved: __('已自动保存', 'jio'), + error: __('自动保存失败,将重试', 'jio'), +}; + +export function saveStateLabel(value: SaveStateValue): string { + const autosave = value.autosave ? AUTOSAVE_LABELS[value.state] : ''; + return autosave || LABELS[value.state] || LABELS.ready; +} + export function SaveState({ value }: { value: SaveStateValue }) { return (