refactor(admin): extract editor header

apps/admin/src/common/wangeditor-customer/shell/EditorHeader.jsx

+import { Button, Space } from 'antd'
+import { EyeOutlined, HistoryOutlined, SaveOutlined } from '@ant-design/icons'
+import dayjs from 'dayjs'
+
+import timesave from '@/assets/images/timesave.png'
+
+export const EditorHeader = ({
+  title,
+  autosaveTime,
+  isView,
+  disabled,
+  contentId,
+  onSave,
+  onPreview,
+  onHistory,
+}) => <div className="title-head">
+  <div className="left"><h4>{title}</h4></div>
+  <div className="right"><Space>
+    {!isView && <>
+      <div className="save-time">
+        <div className="img"><img src={timesave} /> <span>自动保存</span></div>
+        <span className="time">{autosaveTime > 0 ? `上次保存发生在 ${dayjs(autosaveTime).format('YYYY-MM-DD HH:mm:ss')}` : ''}</span>
+      </div>
+      <Button type="primary" icon={<SaveOutlined />} className="view" onClick={onSave} style={{ color: '#fff' }} disabled={disabled || !contentId}>保存</Button>
+    </>}
+    <Button icon={<EyeOutlined />} className="history" onClick={onPreview} disabled={!contentId}>预览</Button>
+    {!isView && <Button icon={<HistoryOutlined />} className="history" onClick={onHistory} disabled={disabled || !contentId}>历史</Button>}
+  </Space></div>
+</div>

apps/admin/src/common/wangeditor-customer/shell/WangEditorCustomer.jsx

@@ -39,6 +39,7 @@ import PracticeSettingModal from "../features/practice/PracticeSettingsDialog";
 
 import PreviewModal from "../features/preview/PreviewDialog";
 import HistoryModal from "../features/history/HistoryDialog";
+import { EditorHeader } from './EditorHeader'
 
 import "../index.less";
 
@@ -578,57 +579,7 @@ const WangEditorCustomer = (props, ref) => {
   return (
     <div className="wangeditor-customer-container">
       <div className="editor-content-container">
-        <div className="title-head">
-          <div className="left">
-            <h4>{nowTitle}</h4>
-          </div>
-          <div className="right">
-            <Space>
-              {!isView && (
-                <>
-                  <div className="save-time">
-                    <div className="img">
-                      <img src={timesave} /> <span>自动保存</span>
-                    </div>
-                    <span className="time">
-                      {autosaveTime > 0
-                        ? `上次保存发生在 ${dayjs(autosaveTime).format("YYYY-MM-DD HH:mm:ss")}`
-                        : ""}
-                    </span>
-                  </div>
-                  <Button
-                    type="primary"
-                    icon={<SaveOutlined />}
-                    className="view"
-                    onClick={saveContent}
-                    style={{ color: "#fff" }}
-                    disabled={disabled || !contentId}
-                  >
-                    保存
-                  </Button>
-                </>
-              )}
-              <Button
-                icon={<EyeOutlined />}
-                className="history"
-                onClick={previewIt}
-                disabled={!contentId}
-              >
-                预览
-              </Button>
-              {!isView && (
-                <Button
-                  icon={<HistoryOutlined />}
-                  className="history"
-                  onClick={historyIt}
-                  disabled={disabled || !contentId}
-                >
-                  历史
-                </Button>
-              )}
-            </Space>
-          </div>
-        </div>
+        <EditorHeader title={nowTitle} autosaveTime={autosaveTime} isView={isView} disabled={disabled} contentId={contentId} onSave={saveContent} onPreview={previewIt} onHistory={historyIt} />
         <Divider style={{ margin: 0 }} />
         <Editor
           defaultConfig={editorConfig}