From 4482bc0b1d701e65a65a7031e1f536c7a566cba0 Mon Sep 17 00:00:00 2001
From: BugKing <wangzhen@fit2cloud.com>
Date: Thu, 27 Jun 2024 10:49:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BD=BF=E7=94=A8=20VS=20Code=20=E6=89=93?=
 =?UTF-8?q?=E5=BC=80=20(#5572)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/vscode-open/index.vue | 97 +++++++++++++++++++
 frontend/src/lang/modules/en.ts               |  2 +
 frontend/src/lang/modules/tw.ts               |  2 +
 frontend/src/lang/modules/zh.ts               |  2 +
 .../src/views/host/file-management/index.vue  | 11 +++
 5 files changed, 114 insertions(+)
 create mode 100644 frontend/src/components/vscode-open/index.vue

diff --git a/frontend/src/components/vscode-open/index.vue b/frontend/src/components/vscode-open/index.vue
new file mode 100644
index 000000000..bf6d3fc2e
--- /dev/null
+++ b/frontend/src/components/vscode-open/index.vue
@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <el-dialog
+            v-model="dialogVisible"
+            :title="$t('app.checkTitle')"
+            width="30%"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+        >
+            <el-row>
+                <el-col :span="22" :offset="1">
+                    <el-alert :closable="false" :title="$t('file.vscodeHelper')" type="info"></el-alert>
+                    <el-form
+                        ref="vscodeConnectInfoForm"
+                        label-position="top"
+                        :model="addForm"
+                        label-width="100px"
+                        class="mt-4"
+                    >
+                        <el-form-item :label="$t('setting.systemIP')" prop="host">
+                            <el-input v-model="addForm.host" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.table.port')" prop="port">
+                            <el-input v-model="addForm.port" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.login.username')" prop="username">
+                            <el-input v-model="addForm.username" />
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button type="primary" @click="submit(vscodeConnectInfoForm)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+
+const dialogVisible = ref();
+
+interface DialogProps {
+    path: string;
+}
+const vscodeConnectInfoForm = ref<FormInstance>();
+
+const addForm = reactive({
+    host: '',
+    port: 22,
+    username: 'root',
+    path: '',
+});
+
+const em = defineEmits(['close']);
+const handleClose = () => {
+    dialogVisible.value = false;
+    if (vscodeConnectInfoForm.value) {
+        vscodeConnectInfoForm.value.resetFields();
+    }
+    em('close', false);
+};
+const submit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid) => {
+        if (!valid) {
+            return;
+        }
+        localStorage.setItem('VscodeConnctInfo', JSON.stringify(addForm));
+        dialogVisible.value = false;
+        window.open(
+            `vscode://vscode-remote/ssh-remote+${addForm.username}@${addForm.host}${addForm.path}?windowId=_blank`,
+        );
+    });
+};
+const acceptParams = async (params: DialogProps): Promise<void> => {
+    if (localStorage.getItem('VscodeConnctInfo')) {
+        addForm.host = JSON.parse(localStorage.getItem('VscodeConnctInfo')).host;
+        addForm.port = JSON.parse(localStorage.getItem('VscodeConnctInfo')).port;
+        addForm.username = JSON.parse(localStorage.getItem('VscodeConnctInfo')).username;
+        window.open(
+            `vscode://vscode-remote/ssh-remote+${addForm.username}@${addForm.host}${params.path}?windowId=_blank`,
+        );
+    } else {
+        addForm.path = params.path;
+        dialogVisible.value = true;
+    }
+};
+
+defineExpose({ acceptParams });
+</script>
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 094e717fc..d6f35cdaf 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -1217,6 +1217,8 @@ const message = {
         back: 'Back',
         top: 'Go Back',
         refresh: 'Refresh',
+        openWithVscode: 'Open with VS Code',
+        vscodeHelper: 'Please make sure that VS Code is installed locally and the SSH Remote plugin is configured',
     },
     ssh: {
         autoStart: 'Auto Start',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index dc5c7b019..d4a04cdbb 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1155,6 +1155,8 @@ const message = {
         back: '後退',
         top: '返回上一層',
         refresh: '重新整理',
+        openWithVscode: 'VS Code 打開',
+        vscodeHelper: '請確保本地已安裝 VS Code 並配置了 SSH Remote 插件',
     },
     ssh: {
         autoStart: '開機自啟',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index fef4641c5..f16581ec9 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1157,6 +1157,8 @@ const message = {
         back: '后退',
         top: '返回上一级',
         refresh: '刷新',
+        openWithVscode: 'VS Code 打开',
+        vscodeHelper: '请确保本地已安装 VS Code 并配置了 SSH Remote 插件',
     },
     ssh: {
         autoStart: '开机自启',
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index a053808ff..04adc5404 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -306,6 +306,7 @@
             <RecycleBin ref="recycleBinRef" @close="search" />
             <Favorite ref="favoriteRef" @close="search" />
             <BatchRole ref="batchRoleRef" @close="search" />
+            <VscodeOpenDialog ref="dialogVscodeOpenRef" />
         </LayoutContent>
     </div>
 </template>
@@ -349,6 +350,7 @@ import Detail from './detail/index.vue';
 import RecycleBin from './recycle-bin/index.vue';
 import Favorite from './favorite/index.vue';
 import BatchRole from './batch-role/index.vue';
+import VscodeOpenDialog from '@/components/vscode-open/index.vue';
 
 const globalStore = GlobalStore();
 
@@ -413,6 +415,7 @@ const favoriteRef = ref();
 const hoveredRowIndex = ref(-1);
 const favorites = ref([]);
 const batchRoleRef = ref();
+const dialogVscodeOpenRef = ref();
 
 // editablePath
 const { searchableStatus, searchablePath, searchableInputRef, searchableInputBlur } = useSearchable(paths);
@@ -846,6 +849,10 @@ const toTerminal = () => {
     router.push({ path: '/hosts/terminal', query: { path: req.path } });
 };
 
+const openWithVSCode = (row: File.File) => {
+    dialogVscodeOpenRef.value.acceptParams({ path: row.path + (row.isDir ? '' : ':1:1') });
+};
+
 const buttons = [
     {
         label: i18n.global.t('file.open'),
@@ -898,6 +905,10 @@ const buttons = [
         label: i18n.global.t('file.info'),
         click: openDetail,
     },
+    {
+        label: i18n.global.t('file.openWithVscode'),
+        click: openWithVSCode,
+    },
 ];
 
 onMounted(() => {