From 7bfe043f644b096bba31217133d0c7b5b72149b5 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Fri, 13 Oct 2023 10:49:39 +0800
Subject: [PATCH 1/7] Delete: download confirm

---
 frontend/src/widgets/instance/FileManager.vue | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/src/widgets/instance/FileManager.vue b/frontend/src/widgets/instance/FileManager.vue
index 26148cd3..fc7be5ad 100644
--- a/frontend/src/widgets/instance/FileManager.vue
+++ b/frontend/src/widgets/instance/FileManager.vue
@@ -296,7 +296,7 @@ const paste = async () => {
   }
 };
 
-const resetname = async (file: string) => {
+const resetName = async (file: string) => {
   const newname = await openDialog(t("重命名"), t("请输入新名称"), file);
   try {
     const { execute } = moveFileApi();
@@ -557,7 +557,8 @@ import FileEditor from "./dialogs/FileEditor.vue";
 const FileEditorDialog = ref<InstanceType<typeof FileEditor>>();
 
 const editFile = (fileName: string) => {
-  FileEditorDialog.value?.openDialog(fileName);
+  const path = breadcrumbs[breadcrumbs.length - 1].path + fileName;
+  FileEditorDialog.value?.openDialog(path, fileName);
 };
 
 onMounted(() => {
@@ -712,21 +713,19 @@ onMounted(() => {
                 <!-- eslint-disable-next-line vue/no-unused-vars -->
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'name'">
-                    <a-popconfirm :title="t('下载此文件？')" @confirm="downloadFile(record.name)">
-                      <a-button
-                        type="link"
-                        class="file-name"
-                        @click="rowClickTable(record.name, record.type)"
-                      >
-                        <span class="mr-4">
-                          <component
-                            :is="getFileIcon(record.name, record.type)"
-                            style="font-size: 16px"
-                          />
-                        </span>
-                        {{ record.name }}
-                      </a-button>
-                    </a-popconfirm>
+                    <a-button
+                      type="link"
+                      class="file-name"
+                      @click="rowClickTable(record.name, record.type)"
+                    >
+                      <span class="mr-4">
+                        <component
+                          :is="getFileIcon(record.name, record.type)"
+                          style="font-size: 16px"
+                        />
+                      </span>
+                      {{ record.name }}
+                    </a-button>
                   </template>
                   <template v-if="column.key === 'action'">
                     <a-dropdown>
@@ -744,7 +743,7 @@ onMounted(() => {
                           <a-menu-item key="4" @click="setClipBoard('move', record.name)">
                             {{ t("剪切") }}
                           </a-menu-item>
-                          <a-menu-item key="5" @click="resetname(record.name)">
+                          <a-menu-item key="5" @click="resetName(record.name)">
                             {{ t("TXT_CODE_c83551f5") }}
                           </a-menu-item>
                           <a-menu-item key="6" @click="deleteFile(record.name)">

From e310d8a27142dd99a30fb1198ffdb2583a8f9675 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Fri, 13 Oct 2023 10:50:43 +0800
Subject: [PATCH 2/7] Feat: add get file content

---
 frontend/src/components/Editor.vue            |  8 +--
 frontend/src/services/apis/fileManager.ts     | 17 ++++++
 .../widgets/instance/dialogs/FileEditor.vue   | 58 ++++++++++++++++---
 3 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index 1fd57eab..5aa6f304 100644
--- a/frontend/src/components/Editor.vue
+++ b/frontend/src/components/Editor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import { EditorView, basicSetup } from "codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { EditorState } from "@codemirror/state";
@@ -37,7 +37,7 @@ const initEditor = () => {
     doc: props.text,
     extensions: [
       basicSetup,
-      theme,
+      // theme,
       javascript(),
       EditorView.updateListener.of(function (e) {
         const text = e.view.state.doc.toString();
@@ -56,8 +56,8 @@ onMounted(() => {
   initEditor();
 });
 
-onUnmounted(() => {
-  editor.destroy();
+onBeforeUnmount(() => {
+  editor?.destroy();
 });
 </script>
 
diff --git a/frontend/src/services/apis/fileManager.ts b/frontend/src/services/apis/fileManager.ts
index 3abfbbed..41f16896 100644
--- a/frontend/src/services/apis/fileManager.ts
+++ b/frontend/src/services/apis/fileManager.ts
@@ -203,3 +203,20 @@ export const downloadAddress = useDefineApi<
   url: "/api/files/download",
   method: "POST"
 });
+
+// 获取文件内容
+export const fileContent = useDefineApi<
+  {
+    params: {
+      remote_uuid: string;
+      uuid: string;
+    };
+    data: {
+      target: string;
+    };
+  },
+  string
+>({
+  url: "/api/files",
+  method: "PUT"
+});
diff --git a/frontend/src/widgets/instance/dialogs/FileEditor.vue b/frontend/src/widgets/instance/dialogs/FileEditor.vue
index a463a35e..19fa4d54 100644
--- a/frontend/src/widgets/instance/dialogs/FileEditor.vue
+++ b/frontend/src/widgets/instance/dialogs/FileEditor.vue
@@ -3,26 +3,63 @@ import { computed, onMounted, ref } from "vue";
 import { t } from "@/lang/i18n";
 import { message } from "ant-design-vue";
 import Editor from "@/components/Editor.vue";
+import { fileContent } from "@/services/apis/fileManager";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const open = ref(false);
-const text = ref("");
+const openEditor = ref(false);
+const editorText = ref("");
 const fileName = ref("");
+const path = ref("");
+const daemonId = String(route.query["daemonId"]) ?? "";
+const instanceId = String(route.query["instanceId"]) ?? "";
 
-const openDialog = (path: string) => {
+const openDialog = async (path_: string, fileName_: string) => {
   open.value = true;
-  text.value = "你好世界\n123";
-  fileName.value = path;
+  path.value = path_;
+  fileName.value = fileName_;
+  await render();
+};
+
+const { state: text, execute: getFileContent, isLoading } = fileContent();
+const render = async () => {
+  try {
+    await getFileContent({
+      params: {
+        remote_uuid: daemonId,
+        uuid: instanceId
+      },
+      data: {
+        target: path.value
+      }
+    });
+
+    if (text.value) {
+      typeof text.value === "boolean" ? (editorText.value = "") : (editorText.value = text.value);
+    }
+
+    openEditor.value = true;
+  } catch (err: any) {
+    console.error(err.message);
+    return message.error(err.message);
+  }
 };
 
 const submit = async () => {
   try {
-    open.value = false;
+    openEditor.value = open.value = false;
     return message.success(t("更新成功"));
   } catch (err: any) {
     return message.error(err.message);
   }
 };
 
+const cancel = () => {
+  openEditor.value = false;
+  open.value = false;
+};
+
 const dialogTitle = computed(() => {
   return `${t("编辑文件")} ${fileName.value}`;
 });
@@ -38,11 +75,14 @@ defineExpose({
     centered
     :mask-closable="false"
     :title="dialogTitle"
-    :ok-text="t('保存')"
     width="1000px"
-    @ok="submit"
+    :footer="null"
+    @cancel="cancel()"
   >
-    RT:{{ text }}
-    <Editor v-if="open" v-model:text="text" height="600px" />
+    <a-space warp>
+      <a-button @click="submit">保存</a-button>
+    </a-space>
+    <a-skeleton v-if="isLoading" active />
+    <Editor v-else-if="openEditor" ref="EditorComponent" v-model:text="editorText" height="70vh" />
   </a-modal>
 </template>

From 6a76f8ac3f16c46e6c08f559491dea5ee13a37b9 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Fri, 13 Oct 2023 16:26:16 +0800
Subject: [PATCH 3/7] Feat: save file

---
 frontend/src/services/apis/fileManager.ts     |  1 +
 .../widgets/instance/dialogs/FileEditor.vue   | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/services/apis/fileManager.ts b/frontend/src/services/apis/fileManager.ts
index 41f16896..930fa5a6 100644
--- a/frontend/src/services/apis/fileManager.ts
+++ b/frontend/src/services/apis/fileManager.ts
@@ -213,6 +213,7 @@ export const fileContent = useDefineApi<
     };
     data: {
       target: string;
+      text?: string;
     };
   },
   string
diff --git a/frontend/src/widgets/instance/dialogs/FileEditor.vue b/frontend/src/widgets/instance/dialogs/FileEditor.vue
index 19fa4d54..6f806f09 100644
--- a/frontend/src/widgets/instance/dialogs/FileEditor.vue
+++ b/frontend/src/widgets/instance/dialogs/FileEditor.vue
@@ -22,10 +22,10 @@ const openDialog = async (path_: string, fileName_: string) => {
   await render();
 };
 
-const { state: text, execute: getFileContent, isLoading } = fileContent();
+const { state: text, execute } = fileContent();
 const render = async () => {
   try {
-    await getFileContent({
+    await execute({
       params: {
         remote_uuid: daemonId,
         uuid: instanceId
@@ -48,16 +48,25 @@ const render = async () => {
 
 const submit = async () => {
   try {
-    openEditor.value = open.value = false;
-    return message.success(t("更新成功"));
+    await execute({
+      params: {
+        remote_uuid: daemonId,
+        uuid: instanceId
+      },
+      data: {
+        target: path.value,
+        text: editorText.value
+      }
+    });
+    return message.success(t("保存成功"));
   } catch (err: any) {
+    console.error(err.message);
     return message.error(err.message);
   }
 };
 
 const cancel = () => {
-  openEditor.value = false;
-  open.value = false;
+  open.value = openEditor.value = false;
 };
 
 const dialogTitle = computed(() => {
@@ -82,7 +91,7 @@ defineExpose({
     <a-space warp>
       <a-button @click="submit">保存</a-button>
     </a-space>
-    <a-skeleton v-if="isLoading" active />
-    <Editor v-else-if="openEditor" ref="EditorComponent" v-model:text="editorText" height="70vh" />
+    <Editor v-if="openEditor" ref="EditorComponent" v-model:text="editorText" height="70vh" />
+    <a-skeleton v-else active />
   </a-modal>
 </template>

From a11fdb45b97a934bf21ecf43d3b9c50f5ddcc245 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 14 Oct 2023 11:27:00 +0800
Subject: [PATCH 4/7] Fix: folder can't edit

---
 frontend/src/widgets/instance/FileManager.vue        | 6 +++++-
 frontend/src/widgets/instance/dialogs/FileEditor.vue | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/widgets/instance/FileManager.vue b/frontend/src/widgets/instance/FileManager.vue
index fc7be5ad..1e88a7fc 100644
--- a/frontend/src/widgets/instance/FileManager.vue
+++ b/frontend/src/widgets/instance/FileManager.vue
@@ -734,7 +734,11 @@ onMounted(() => {
                           <a-menu-item v-if="fileStatus?.platform != 'win32'" key="1">
                             {{ t("TXT_CODE_16853efe") }}
                           </a-menu-item>
-                          <a-menu-item key="2" @click="editFile(record.name)">
+                          <a-menu-item
+                            v-if="record.type === 1"
+                            key="2"
+                            @click="editFile(record.name)"
+                          >
                             {{ t("TXT_CODE_ad207008") }}
                           </a-menu-item>
                           <a-menu-item key="3" @click="setClipBoard('copy', record.name)">
diff --git a/frontend/src/widgets/instance/dialogs/FileEditor.vue b/frontend/src/widgets/instance/dialogs/FileEditor.vue
index 6f806f09..84302d7e 100644
--- a/frontend/src/widgets/instance/dialogs/FileEditor.vue
+++ b/frontend/src/widgets/instance/dialogs/FileEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 import { t } from "@/lang/i18n";
 import { message } from "ant-design-vue";
 import Editor from "@/components/Editor.vue";

From 930deb49ec1888082b71eebb1a7f767e5f2ee1fe Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 14 Oct 2023 11:27:56 +0800
Subject: [PATCH 5/7] bad highlight

---
 frontend/src/components/Editor.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index 5aa6f304..cb3a80a1 100644
--- a/frontend/src/components/Editor.vue
+++ b/frontend/src/components/Editor.vue
@@ -2,6 +2,21 @@
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { EditorView, basicSetup } from "codemirror";
 import { javascript } from "@codemirror/lang-javascript";
+// import { cpp } from "@codemirror/lang-cpp";
+// import { css } from "@codemirror/lang-css";
+// import { html } from "@codemirror/lang-html";
+// import { java } from "@codemirror/lang-java";
+// import { json } from "@codemirror/lang-json";
+// import { less } from "@codemirror/lang-less";
+// import { markdown } from "@codemirror/lang-markdown";
+// import { php } from "@codemirror/lang-php";
+// import { python } from "@codemirror/lang-python";
+// import { sass } from "@codemirror/lang-sass";
+// import { sql } from "@codemirror/lang-sql";
+// import { vue } from "@codemirror/lang-vue";
+// import { xml } from "@codemirror/lang-xml";
+// import { getExtName } from "@/tools/fileManager";
+
 import { EditorState } from "@codemirror/state";
 import { getRandomId } from "@/tools/randId";
 
@@ -33,7 +48,7 @@ const theme = EditorView.theme({
 
 let editor: EditorView;
 const initEditor = () => {
-  let startState = EditorState.create({
+  const startState = EditorState.create({
     doc: props.text,
     extensions: [
       basicSetup,

From ff451aaab59fec8f623d49c6333c9955f3234b4c Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 14 Oct 2023 14:59:02 +0800
Subject: [PATCH 6/7] Fix button color

---
 frontend/src/widgets/instance/FileManager.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/widgets/instance/FileManager.vue b/frontend/src/widgets/instance/FileManager.vue
index 1e88a7fc..1cd3c983 100644
--- a/frontend/src/widgets/instance/FileManager.vue
+++ b/frontend/src/widgets/instance/FileManager.vue
@@ -847,7 +847,7 @@ onMounted(() => {
 }
 
 .file-name {
-  color: initial;
+  color: inherit;
   &:hover {
     color: #1677ff;
   }

From 8cb053b39097cef92b4f6531c28524e9bd5be3ee Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sat, 14 Oct 2023 15:12:10 +0800
Subject: [PATCH 7/7] Optimize: fileManager api

---
 frontend/src/services/apis/fileManager.ts     |  2 +-
 frontend/src/widgets/instance/FileManager.vue | 36 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/services/apis/fileManager.ts b/frontend/src/services/apis/fileManager.ts
index 930fa5a6..2e536fb0 100644
--- a/frontend/src/services/apis/fileManager.ts
+++ b/frontend/src/services/apis/fileManager.ts
@@ -1,7 +1,7 @@
 import { useDefineApi } from "@/stores/useDefineApi";
 
 // 获取文件列表
-export const getFileList = useDefineApi<
+export const fileList = useDefineApi<
   {
     params: {
       remote_uuid: string;
diff --git a/frontend/src/widgets/instance/FileManager.vue b/frontend/src/widgets/instance/FileManager.vue
index 1cd3c983..87ee5a63 100644
--- a/frontend/src/widgets/instance/FileManager.vue
+++ b/frontend/src/widgets/instance/FileManager.vue
@@ -9,8 +9,6 @@ import dayjs from "dayjs";
 import {
   DownOutlined,
   SearchOutlined,
-  FileOutlined,
-  FolderOutlined,
   LoadingOutlined,
   ExclamationCircleOutlined,
   UploadOutlined
@@ -20,7 +18,7 @@ import { useScreen } from "@/hooks/useScreen";
 import { arrayFilter } from "@/tools/array";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import {
-  getFileList as getFileListApi,
+  fileList as fileListApi,
   getFileStatus as getFileStatusApi,
   addFolder as addFolderApi,
   deleteFile as deleteFileApi,
@@ -149,9 +147,9 @@ const columns = computed(() => {
 });
 
 const getFileList = async () => {
-  const { execute } = getFileListApi();
+  const { state, execute } = fileListApi();
   try {
-    const res = await execute({
+    await execute({
       params: {
         remote_uuid: daemonId || "",
         uuid: instanceId || "",
@@ -161,8 +159,10 @@ const getFileList = async () => {
         target: breadcrumbs[breadcrumbs.length - 1].path
       }
     });
-    dataSource.value = res.value?.items || [];
-    operationForm.value.total = res.value?.total || 0;
+    if (state.value) {
+      dataSource.value = state.value.items || [];
+      operationForm.value.total = state.value.total || 0;
+    }
   } catch (error: any) {
     return message.error(error.message);
   }
@@ -537,20 +537,26 @@ const handleTableChange = (e: { current: number; pageSize: number }) => {
   getFileList();
 };
 
-const { execute } = getFileStatusApi();
-
 setInterval(async () => {
   await getFileStatus();
 }, 3000);
 
 const getFileStatus = async () => {
-  const res = await execute({
-    params: {
-      remote_uuid: daemonId || "",
-      uuid: instanceId || ""
+  const { state, execute } = getFileStatusApi();
+  try {
+    await execute({
+      params: {
+        remote_uuid: daemonId || "",
+        uuid: instanceId || ""
+      }
+    });
+    if (state.value) {
+      fileStatus.value = state.value;
     }
-  });
-  fileStatus.value = res.value;
+  } catch (err: any) {
+    console.error(err);
+    return message.error(err.message);
+  }
 };
 
 import FileEditor from "./dialogs/FileEditor.vue";