diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts index 9935c3924..644dd6a9f 100644 --- a/frontend/src/lang/modules/en.ts +++ b/frontend/src/lang/modules/en.ts @@ -64,6 +64,8 @@ const message = { agree: 'Agree', notAgree: 'Not Agree', preview: 'Preview', + open: 'Open', + notSave: 'Not Save', }, search: { timeStart: 'Time start', @@ -143,6 +145,7 @@ const message = { recoverHelper: 'Restoring from {0} file. This operation is irreversible. Do you want to continue?', refreshSuccess: 'Refresh successful', rootInfoErr: "It's already the root directory", + resetSuccess: 'Reset successful', }, login: { username: 'UserName', @@ -1240,9 +1243,12 @@ const message = { back: 'Back', top: 'Go Back', refresh: 'Refresh', + up: 'Go back', openWithVscode: 'Open with VS Code', vscodeHelper: 'Please make sure that VS Code is installed locally and the SSH Remote plugin is configured', - up: 'Go back', + saveContentAndClose: 'The file has been modified, do you want to save and close it?', + saveAndOpenNewFile: 'The file has been modified, do you want to save and open the new file?', + noEdit: 'The file has not been modified, no need to do this!', }, ssh: { autoStart: 'Auto Start', diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts index b3d359829..2a60042fc 100644 --- a/frontend/src/lang/modules/tw.ts +++ b/frontend/src/lang/modules/tw.ts @@ -63,6 +63,8 @@ const message = { agree: '同意', notAgree: '不同意', preview: '預覽', + open: '打開', + notSave: '不保存', }, search: { timeStart: '開始時間', @@ -143,6 +145,7 @@ const message = { recoverHelper: '將從 {0} 文件進行恢復,該操作不可回滾,是否繼續?', refreshSuccess: '重繪成功', rootInfoErr: '已經是根目錄了', + resetSuccess: '重置成功', }, login: { username: '用戶名', @@ -1180,6 +1183,9 @@ const message = { up: '上一層', openWithVscode: 'VS Code 打開', vscodeHelper: '請確保本地已安裝 VS Code 並配置了 SSH Remote 插件', + saveContentAndClose: '檔案已被修改,是否保存並關閉?', + saveAndOpenNewFile: '檔案已被修改,是否保存並打開新檔案?', + noEdit: '檔案未修改,無需此操作!', }, ssh: { autoStart: '開機自啟', diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts index 8604a1764..9be6be6da 100644 --- a/frontend/src/lang/modules/zh.ts +++ b/frontend/src/lang/modules/zh.ts @@ -63,6 +63,8 @@ const message = { agree: '同意', notAgree: '不同意', preview: '预览', + open: '打开', + notSave: '不保存', }, search: { timeStart: '开始时间', @@ -143,6 +145,7 @@ const message = { recoverHelper: '将从 {0} 文件进行恢复,该操作不可回滚,是否继续?', refreshSuccess: '刷新成功', rootInfoErr: '已经是根目录了', + resetSuccess: '重置成功', }, login: { username: '用户名', @@ -1181,6 +1184,9 @@ const message = { up: '上一级', openWithVscode: 'VS Code 打开', vscodeHelper: '请确保本地已安装 VS Code 并配置了 SSH Remote 插件', + saveContentAndClose: '文件已被修改,是否保存并关闭?', + saveAndOpenNewFile: '文件已被修改,是否保存并打开新文件?', + noEdit: '文件未修改,无需此操作!', }, ssh: { autoStart: '开机自启', diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue index 8301962ca..d2c94b780 100644 --- a/frontend/src/views/host/file-management/code-editor/index.vue +++ b/frontend/src/views/host/file-management/code-editor/index.vue @@ -131,8 +131,8 @@ @@ -151,7 +151,7 @@ import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'; import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'; import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; -import { ElTreeV2 } from 'element-plus'; +import { ElMessageBox, ElTreeV2 } from 'element-plus'; import { ResultData } from '@/api/interface'; import { File } from '@/api/interface/file'; import { getIcon } from '@/utils/util'; @@ -221,6 +221,8 @@ const treeHeight = ref(0); const codeHeight = ref('55vh'); const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 }); const isShow = ref(true); +const isEdit = ref(false); +const oldFileContent = ref(''); const toggleShow = () => { isShow.value = !isShow.value; @@ -271,11 +273,43 @@ let form = ref({ const em = defineEmits(['close']); const handleClose = () => { - open.value = false; - if (editor) { - editor.dispose(); + const closeEditor = () => { + open.value = false; + if (editor) { + editor.dispose(); + } + em('close', open.value); + }; + + if (isEdit.value) { + ElMessageBox.confirm(i18n.global.t('file.saveContentAndClose'), { + confirmButtonText: i18n.global.t('commons.button.save'), + cancelButtonText: i18n.global.t('commons.button.notSave'), + type: 'info', + distinguishCancelAndClose: true, + }) + .then(() => { + saveContent(); + }) + .finally(() => { + closeEditor(); + }); + } else { + closeEditor(); + } +}; + +const handleReset = () => { + if (isEdit.value) { + loading.value = true; + form.value.content = oldFileContent.value; + editor.setValue(oldFileContent.value); + isEdit.value = false; + MsgSuccess(i18n.global.t('commons.msg.resetSuccess')); + loading.value = false; + } else { + MsgInfo(i18n.global.t('file.noEdit')); } - em('close', open.value); }; const loadTooltip = () => { @@ -347,6 +381,7 @@ const initEditor = () => { editor.onDidChangeModelContent(() => { if (editor) { form.value.content = editor.getValue(); + isEdit.value = true; } }); @@ -358,27 +393,30 @@ const initEditor = () => { }; const quickSave = () => { - saveContent(false); + saveContent(); }; -const saveContent = (closePage: boolean) => { - loading.value = true; - SaveFileContent(form.value) - .then(() => { - loading.value = false; - open.value = !closePage; - MsgSuccess(i18n.global.t('commons.msg.updateSuccess')); - if (closePage) { - handleClose(); - } - }) - .catch(() => { - loading.value = false; - }); +const saveContent = () => { + if (isEdit.value) { + loading.value = true; + SaveFileContent(form.value) + .then(() => { + loading.value = false; + isEdit.value = false; + oldFileContent.value = form.value.content; + MsgSuccess(i18n.global.t('commons.msg.updateSuccess')); + }) + .catch(() => { + loading.value = false; + }); + } else { + MsgInfo(i18n.global.t('file.noEdit')); + } }; const acceptParams = (props: EditProps) => { form.value.content = props.content; + oldFileContent.value = props.content; form.value.path = props.path; directoryPath.value = getDirectoryPath(props.path); fileExtension.value = props.extension; @@ -447,11 +485,15 @@ const getRefresh = (path: string) => { }; const getContent = (path: string, extension: string) => { - if (form.value.path !== path) { + if (form.value.path === path) { + return; + } + + const fetchFileContent = () => { codeReq.path = path; codeReq.expand = true; - if (extension != '') { + if (extension !== '') { Languages.forEach((language) => { const ext = extension.substring(1); if (language.value.indexOf(ext) > -1) { @@ -463,12 +505,28 @@ const getContent = (path: string, extension: string) => { GetFileContent(codeReq) .then((res) => { form.value.content = res.data.content; + oldFileContent.value = res.data.content; form.value.path = res.data.path; fileExtension.value = res.data.extension; fileName.value = res.data.name; initEditor(); }) .catch(() => {}); + }; + + if (isEdit.value) { + ElMessageBox.confirm(i18n.global.t('file.saveAndOpenNewFile'), { + confirmButtonText: i18n.global.t('commons.button.open'), + cancelButtonText: i18n.global.t('commons.button.cancel'), + type: 'info', + }) + .then(() => { + saveContent(); + fetchFileContent(); + }) + .finally(() => {}); + } else { + fetchFileContent(); } };