diff --git a/src/pages/crontab/detail.tsx b/src/pages/crontab/detail.tsx index 8ea1a0f3..e739e8b1 100644 --- a/src/pages/crontab/detail.tsx +++ b/src/pages/crontab/detail.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { Modal, message, @@ -9,6 +9,7 @@ import { Tag, List, Divider, + Typography, } from 'antd'; import { ClockCircleOutlined, @@ -24,6 +25,8 @@ import config from '@/utils/config'; import CronLogModal from './logModal'; import Editor from '@monaco-editor/react'; +const { Text } = Typography; + const tabList = [ { key: 'log', @@ -59,6 +62,8 @@ const CronDetailModal = ({ const [log, setLog] = useState(''); const [value, setValue] = useState(''); const [isLogModalVisible, setIsLogModalVisible] = useState(false); + const editorRef = useRef(null); + const [scriptInfo, setScriptInfo] = useState({}); const contentList: any = { log: ( @@ -79,7 +84,6 @@ const CronDetailModal = ({ theme={theme} value={value} options={{ - readOnly: true, fontSize: 12, lineNumbersMinChars: 3, fontFamily: 'Source Code Pro', @@ -87,6 +91,9 @@ const CronDetailModal = ({ glyphMargin: false, wordWrap: 'on', }} + onMount={(editor) => { + editorRef.current = editor; + }} /> ), }; @@ -128,6 +135,7 @@ const CronDetailModal = ({ s = p; p = ''; } + setScriptInfo({ parent: p, filename: s }); request .get(`${config.apiPrefix}scripts/${s}?path=${p || ''}`) .then((data) => { @@ -136,6 +144,48 @@ const CronDetailModal = ({ } }; + const saveFile = () => { + Modal.confirm({ + title: `确认保存`, + content: ( + <> + 确认保存文件 + + {scriptInfo.filename} + {' '} + ,保存后不可恢复 + + ), + onOk() { + const content = editorRef.current + ? editorRef.current.getValue().replace(/\r\n/g, '\n') + : value; + return new Promise((resolve, reject) => { + request + .put(`${config.apiPrefix}scripts`, { + data: { + filename: scriptInfo.filename, + path: scriptInfo.parent || '', + content, + }, + }) + .then((_data: any) => { + if (_data.code === 200) { + message.success(`保存成功`); + } else { + message.error(_data); + } + resolve(null); + }) + .catch((e) => reject(e)); + }); + }, + onCancel() { + console.log('Cancel'); + }, + }); + }; + useEffect(() => { if (cron && cron.id) { getLogs(); @@ -245,6 +295,17 @@ const CronDetailModal = ({ onTabChange={(key) => { onTabChange(key); }} + tabBarExtraContent={ + activeTabKey === 'script' && ( + + ) + } bodyStyle={{ height: 'calc(80vh - 188px)', overflowY: 'auto' }} > {contentList[activeTabKey]}