diff --git a/orion-ops-ui/src/components/view/editor/index.vue b/orion-ops-ui/src/components/view/editor/index.vue
index 8d629092..c5cddfb5 100644
--- a/orion-ops-ui/src/components/view/editor/index.vue
+++ b/orion-ops-ui/src/components/view/editor/index.vue
@@ -93,6 +93,18 @@
emits('editor-mounted', editor);
};
+ // 获取值
+ const getValue = () => {
+ return editor?.getValue();
+ };
+
+ // 设置值
+ const setValue = (value: string) => {
+ editor?.setValue(value);
+ };
+
+ defineExpose({ getValue, setValue });
+
// 监听主题变更
watch(() => appStore.theme, (v) => {
if (editor && props.theme === true) {
diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue
index 547f33ee..9d0a98a2 100644
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue
@@ -50,8 +50,8 @@
import useVisible from '@/hooks/visible';
import { nextTick, ref } from 'vue';
import { useTerminalStore } from '@/store';
- import SftpSession from '../../handler/sftp-session';
import { permission10toString } from '@/utils/file';
+ import SftpSession from '../../handler/sftp-session';
const { visible, setVisible } = useVisible();
const { sessionManager } = useTerminalStore();
diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor-header.vue b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor-header.vue
new file mode 100644
index 00000000..77cd5bb5
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor-header.vue
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor.vue b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor.vue
new file mode 100644
index 00000000..43b0bb42
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table.vue b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table.vue
index c0d2fe26..7261f039 100644
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table.vue
@@ -68,7 +68,7 @@
- ;
}>();
- const emits = defineEmits(['update:selectedFiles', 'loadFile']);
+ const emits = defineEmits(['update:selectedFiles', 'loadFile', 'editFile']);
const openSftpMoveModal = inject(openSftpMoveModalKey) as (sessionId: string, path: string) => void;
const openSftpChmodModal = inject(openSftpChmodModalKey) as (sessionId: string, path: string, permission: number) => void;
@@ -202,11 +202,12 @@
};
// 是否可编辑
- const canEditable = (attr: string) => {
+ const canEditable = (sizeByte: number, attr: string) => {
const typeValue = formatFileType(attr).value;
- // 非文件夹和链接文件可以编辑
+ // 非文件夹和链接文件 并且文件大小小于 2MB 可以编辑
return FILE_TYPE.DIRECTORY.value !== typeValue
- && FILE_TYPE.LINK_FILE.value !== typeValue;
+ && FILE_TYPE.LINK_FILE.value !== typeValue
+ && sizeByte <= 2 * 1024 * 1024;
};
// 点击文件名称
@@ -221,7 +222,8 @@
// 编辑文件
const editFile = (record: TableData) => {
- // TODO
+ emits('editFile', record.name, record.path);
+ props.session?.getContent(record.path);
};
// 删除文件
diff --git a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
index 48b0d589..5e1faca7 100644
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
@@ -3,7 +3,7 @@
+ :disabled="!editorView">
+ @load-file="loadFiles"
+ @edit-file="editFile" />
-
- editor
+
+
+
+
+
+
+
@@ -50,8 +63,10 @@
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { openSftpCreateModalKey, openSftpMoveModalKey, openSftpChmodModalKey } from '../../types/terminal.const';
- import SftpTable from './sftp-table.vue';
import SftpTableHeader from './sftp-table-header.vue';
+ import SftpTable from './sftp-table.vue';
+ import SftpEditorHeader from './sftp-editor-header.vue';
+ import SftpEditor from './sftp-editor.vue';
import SftpCreateModal from './sftp-create-modal.vue';
import SftpMoveModal from './sftp-move-modal.vue';
import SftpChmodModal from './sftp-chmod-modal.vue';
@@ -62,13 +77,17 @@
const { preference, sessionManager } = useTerminalStore();
const { loading: tableLoading, setLoading: setTableLoading } = useLoading(true);
+ const { loading: editorLoading, setLoading: setEditorLoading } = useLoading();
const session = ref();
const currentPath = ref('');
const fileList = ref>([]);
const selectFiles = ref>([]);
const splitSize = ref(1);
- const editView = ref(true);
+ const editorView = ref(false);
+ const editorRef = ref();
+ const editorFileName = ref('');
+ const editorFilePath = ref('');
const createModal = ref();
const moveModal = ref();
const chmodModal = ref();
@@ -88,6 +107,30 @@
chmodModal.value?.open(sessionId, path, permission);
});
+ // 编辑文件
+ const editFile = (name: string, path: string) => {
+ setEditorLoading(true);
+ splitSize.value = 0.6;
+ editorView.value = true;
+ editorFileName.value = name;
+ editorFilePath.value = path;
+ };
+
+ // 编辑器保存
+ const editorSave = () => {
+ setEditorLoading(true);
+ const value = editorRef.value?.getValue() || '';
+ session.value?.setContent(editorFilePath.value, value);
+ };
+
+ // 关闭编辑器
+ const closeEditor = () => {
+ splitSize.value = 1;
+ editorView.value = false;
+ editorFileName.value = '';
+ editorFilePath.value = '';
+ };
+
// 连接成功回调
const connectCallback = () => {
loadFiles(undefined);
@@ -133,10 +176,22 @@
// 接收获取文件内容响应
const resolveSftpGetContent = (path: string, result: string, content: string) => {
+ setEditorLoading(false);
+ // 检查结果
+ if (!checkResult(result, '加载失败')) {
+ return;
+ }
+ editorRef.value?.setValue(content);
};
// 接收修改文件内容响应
const resolveSftpSetContent = (result: string, msg: string) => {
+ setEditorLoading(false);
+ // 检查结果
+ if (!checkResult(result, msg)) {
+ return;
+ }
+ Message.success('保存成功');
};
// 初始化会话
@@ -176,18 +231,18 @@
}
}
- .sftp-table-container {
+ .sftp-table-container, .sftp-editor-container {
padding: 8px;
width: 100%;
height: 100%;
- .sftp-table-header {
+ .sftp-table-header, .sftp-editor-header {
width: 100%;
height: @sftp-table-header-height;
padding-bottom: 8px;
}
- .sftp-table-wrapper {
+ .sftp-table-wrapper, .sftp-editor-wrapper {
height: calc(100% - @sftp-table-header-height);
}
}