feat: 文件管理增加使用 VS Code 打开 (#5572)

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>

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',

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: '開機自啟',

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: '开机自启',

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(() => {