From 8acb8730bd2ac07b9c47f2f0ee857aa6c018f7ad Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Tue, 20 Feb 2024 13:42:19 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E5=9C=A8=E7=BA=BF=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E6=96=87=E4=BB=B6.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/view/editor/index.vue      |  12 ++
 .../components/sftp/sftp-chmod-modal.vue      |   2 +-
 .../components/sftp/sftp-editor-header.vue    | 122 ++++++++++++++++++
 .../terminal/components/sftp/sftp-editor.vue  |  38 ++++++
 .../terminal/components/sftp/sftp-table.vue   |  14 +-
 .../terminal/components/sftp/sftp-view.vue    |  73 +++++++++--
 6 files changed, 245 insertions(+), 16 deletions(-)
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor-header.vue
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/sftp/sftp-editor.vue

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 @@
+<template>
+  <!-- 表头 -->
+  <div class="sftp-editor-header">
+    <!-- 左侧操作 -->
+    <div class="sftp-editor-header-left">
+      <div class="sftp-path-container">
+        <!-- 当前路径 -->
+        <a-tooltip position="top"
+                   :mini="true"
+                   :overlay-inverse="true"
+                   :auto-fix-position="false"
+                   content-class="terminal-tooltip-content"
+                   arrow-class="terminal-tooltip-content"
+                   :content="path">
+          <span>{{ name }}</span>
+        </a-tooltip>
+      </div>
+    </div>
+    <!-- 右侧操作 -->
+    <a-space class="sftp-editor-header-right">
+      <!-- 保存 -->
+      <a-tooltip position="top"
+                 :mini="true"
+                 :overlay-inverse="true"
+                 :auto-fix-position="false"
+                 content-class="terminal-tooltip-content"
+                 arrow-class="terminal-tooltip-content"
+                 content="保存">
+        <span class="click-icon-wrapper header-action-icon"
+              @click="emits('save')">
+          <icon-save />
+        </span>
+      </a-tooltip>
+      <!-- 关闭 -->
+      <a-tooltip position="top"
+                 :mini="true"
+                 :overlay-inverse="true"
+                 :auto-fix-position="false"
+                 content-class="terminal-tooltip-content"
+                 arrow-class="terminal-tooltip-content"
+                 content="关闭">
+        <span class="click-icon-wrapper header-action-icon"
+              @click="emits('close')">
+          <icon-close />
+        </span>
+      </a-tooltip>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'sftpEditorHeader'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ISftpSession } from '../../types/terminal.type';
+
+  const props = defineProps<{
+    name: string;
+    path: string;
+    session: ISftpSession | undefined,
+  }>();
+
+  const emits = defineEmits(['save', 'close']);
+
+</script>
+
+<style lang="less" scoped>
+  @action-num: 2;
+  @action-gap: 8px;
+  @action-size: 26px;
+  @actions-width: @action-num * (@action-size + @action-gap);
+
+  .sftp-editor-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-left, &-right {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    &-left {
+      width: calc(100% - @actions-width);
+    }
+
+    &-right {
+      width: @actions-width;
+      justify-content: flex-end;
+    }
+  }
+
+  .sftp-path-container {
+    width: 100%;
+    height: @action-size;
+    background: var(--color-fill-2);
+    border-radius: 2px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+
+    span {
+      font-size: 14px;
+      line-height: 1.2;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  .header-action-icon {
+    font-size: 16px;
+    padding: 4px;
+    width: @action-size;
+    height: @action-size;
+  }
+</style>
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 @@
+<template>
+  <editor ref="editorRef"
+          language="txt"
+          :auto-focus="true"
+          :theme="preference.theme.dark ? 'vs-dark' : 'vs'" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'sftpFileEditor'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useTerminalStore } from '@/store';
+
+  const { preference } = useTerminalStore();
+
+  const editorRef = ref();
+
+  // 获取值
+  const getValue = () => {
+    return editorRef.value?.getValue();
+  };
+
+  // 设置值
+  const setValue = (value: string) => {
+    editorRef.value?.setValue(value);
+  };
+
+  defineExpose({ getValue, setValue });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
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 @@
           </span>
         </a-tooltip>
         <!-- 编辑内容 -->
-        <a-tooltip v-if="canEditable(record.attr)"
+        <a-tooltip v-if="canEditable(record.sizeByte, record.attr)"
                    position="top"
                    :mini="true"
                    :overlay-inverse="true"
@@ -159,7 +159,7 @@
     selectedFiles: Array<string>;
   }>();
 
-  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 @@
     <a-split class="split-view"
              v-model:size="splitSize"
              :min="0.3"
-             :disabled="!editView">
+             :disabled="!editorView">
       <!-- 左侧面板表格 -->
       <template #first>
         <a-spin class="sftp-table-container"
@@ -21,11 +21,24 @@
                       :session="session"
                       :list="fileList"
                       :loading="tableLoading"
-                      @load-file="loadFiles" />
+                      @load-file="loadFiles"
+                      @edit-file="editFile" />
         </a-spin>
       </template>
-      <template #second v-if="editView">
-        <div>editor</div>
+      <template #second v-if="editorView">
+        <a-spin class="sftp-editor-container"
+                :loading="editorLoading">
+          <!-- 表头 -->
+          <sftp-editor-header class="sftp-editor-header"
+                              :name="editorFileName"
+                              :path="editorFilePath"
+                              :session="session"
+                              @save="editorSave"
+                              @close="closeEditor" />
+          <!-- 编辑器 -->
+          <sftp-editor class="sftp-editor-wrapper"
+                       ref="editorRef" />
+        </a-spin>
       </template>
     </a-split>
     <!-- 创建文件模态框 -->
@@ -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<ISftpSession>();
   const currentPath = ref<string>('');
   const fileList = ref<Array<SftpFile>>([]);
   const selectFiles = ref<Array<string>>([]);
   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);
     }
   }