mirror of
https://gitee.com/fit2cloud-feizhiyun/1Panel.git
synced 2024-12-10 16:31:35 +08:00
feat: 文件管理增加使用 VS Code 打开 (#5572)
This commit is contained in:
parent
2fafe3dcb5
commit
4482bc0b1d
97
frontend/src/components/vscode-open/index.vue
Normal file
97
frontend/src/components/vscode-open/index.vue
Normal file
@ -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>
|
@ -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',
|
||||
|
@ -1155,6 +1155,8 @@ const message = {
|
||||
back: '後退',
|
||||
top: '返回上一層',
|
||||
refresh: '重新整理',
|
||||
openWithVscode: 'VS Code 打開',
|
||||
vscodeHelper: '請確保本地已安裝 VS Code 並配置了 SSH Remote 插件',
|
||||
},
|
||||
ssh: {
|
||||
autoStart: '開機自啟',
|
||||
|
@ -1157,6 +1157,8 @@ const message = {
|
||||
back: '后退',
|
||||
top: '返回上一级',
|
||||
refresh: '刷新',
|
||||
openWithVscode: 'VS Code 打开',
|
||||
vscodeHelper: '请确保本地已安装 VS Code 并配置了 SSH Remote 插件',
|
||||
},
|
||||
ssh: {
|
||||
autoStart: '开机自启',
|
||||
|
@ -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(() => {
|
||||
|
Loading…
Reference in New Issue
Block a user