优化 SFTP 操作逻辑.

This commit is contained in:
lijiahang
2024-04-18 11:59:32 +08:00
parent fe4b87927e
commit 83ceb0e1e5
6 changed files with 57 additions and 23 deletions

View File

@@ -21,9 +21,9 @@
import useLoading from '@/hooks/loading';
import { createCommandSnippetGroup } from '@/api/asset/command-snippet-group';
const props = defineProps<{
modelValue: number | undefined
}>();
const props = defineProps<Partial<{
modelValue: number;
}>>();
const emits = defineEmits(['update:modelValue']);

View File

@@ -11,7 +11,7 @@
arrow-class="terminal-tooltip-content"
content="点击复制">
<a-tag class="sftp-path-container pointer"
color="green"
color="arcoblue"
@click="copy(path, '已复制')">
<span>{{ name }}</span>
</a-tag>
@@ -56,13 +56,11 @@
</script>
<script lang="ts" setup>
import type { ISftpSession } from '../../types/terminal.type';
import { copy } from '@/hooks/copy';
const props = defineProps<{
name: string;
path: string;
session: ISftpSession | undefined,
}>();
const emits = defineEmits(['save', 'close']);

View File

@@ -45,8 +45,12 @@
</div>
</div>
<!-- 已关闭-右侧操作 -->
<div v-if="isClose" class="sftp-table-header-right">
<span class="close-message" :title="closeMessage">{{ closeMessage }}</span>
<div v-if="closed" class="sftp-table-header-right">
<a-tag class="close-message"
color="red"
:title="closeMessage">
已断开: {{ closeMessage }}
</a-tag>
</div>
<!-- 路径编辑模式-右侧操作 -->
<a-space v-else-if="pathEditable" class="sftp-table-header-right">
@@ -189,10 +193,10 @@
import { openSftpCreateModalKey, openSftpUploadModalKey } from '../../types/terminal.const';
const props = defineProps<{
isClose: boolean;
closeMessage: string | undefined;
closed: boolean;
closeMessage?: string;
currentPath: string;
session: ISftpSession | undefined;
session?: ISftpSession;
selectedFiles: Array<string>;
}>();
@@ -224,6 +228,10 @@
// 设置命令编辑模式
const setPathEditable = (editable: boolean) => {
// 检查是否断开
if (editable && props.closed) {
return;
}
pathEditable.value = editable;
pathInput.value = editable ? props.currentPath : '';
// 自动聚焦
@@ -242,6 +250,10 @@
// 加载文件列表
const loadFileList = (path: string = props.currentPath) => {
// 检查是否断开
if (props.closed) {
return;
}
emits('loadFile', path);
};
@@ -332,8 +344,7 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-left: 16px;
color: rgb(var(--red-6));
margin-left: 16px;
}
.header-action-icon {

View File

@@ -10,8 +10,8 @@
:pagination="false"
:bordered="false"
:loading="loading"
@cell-mouse-enter="setOperable"
@cell-mouse-leave="unsetOperable">
@cell-mouse-enter="setRowOperable"
@cell-mouse-leave="unsetRowOperable">
<!-- 文件搜索框 -->
<template #nameFilter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset}">
<div class="name-filter">
@@ -155,9 +155,10 @@
const previewSize = import.meta.env.VITE_SFTP_PREVIEW_MB;
const props = defineProps<{
session: ISftpSession | undefined;
session?: ISftpSession;
list: Array<SftpFile>;
loading: boolean;
closed: boolean;
selectedFiles: Array<string>;
}>();
@@ -185,14 +186,14 @@
const editRowName = ref<string>('');
const tableRef = ref();
// 设置可操作状态
const setOperable = (record: TableData) => {
// 设置可操作状态
const setRowOperable = (record: TableData) => {
editRowName.value = record.name;
record.hover = true;
};
// 设置不可操作状态
const unsetOperable = (record: TableData) => {
// 设置不可操作状态
const unsetRowOperable = (record: TableData) => {
setTimeout(() => {
// 等待后如果还是当前行 但是未被选中则代表已经被失焦
if (record.name === editRowName.value && !record.hover) {
@@ -212,6 +213,10 @@
// 点击文件名称
const clickFilename = (record: TableData) => {
if (record.isDir) {
// 检查是否断开
if (props.closed) {
return;
}
// 进入文件夹
emits('loadFile', record.path);
} else {
@@ -221,27 +226,47 @@
// 编辑文件
const editFile = (record: TableData) => {
// 检查是否断开
if (props.closed) {
return;
}
emits('editFile', record.name, record.path);
props.session?.getContent(record.path);
};
// 删除文件
const deleteFile = (path: string) => {
// 检查是否断开
if (props.closed) {
return;
}
props.session?.remove([path]);
};
// 下载文件
const downloadFile = (path: string) => {
// 检查是否断开
if (props.closed) {
return;
}
emits('download', [path]);
};
// 移动文件
const moveFile = (path: string) => {
// 检查是否断开
if (props.closed) {
return;
}
openSftpMoveModal(props.session?.sessionId as string, path);
};
// 文件提权
const chmodFile = (path: string, permission: number) => {
// 检查是否断开
if (props.closed) {
return;
}
openSftpChmodModal(props.session?.sessionId as string, path, permission);
};

View File

@@ -12,7 +12,7 @@
<!-- 表头 -->
<sftp-table-header class="sftp-table-header"
v-model:selected-files="selectFiles"
:is-close="closed"
:closed="closed"
:close-message="closeMessage"
:current-path="currentPath"
:session="session"
@@ -22,6 +22,7 @@
<sftp-table class="sftp-table-wrapper"
v-model:selected-files="selectFiles"
:session="session"
:closed="closed"
:list="fileList"
:loading="tableLoading"
@load-file="loadFiles"
@@ -36,7 +37,6 @@
<sftp-editor-header class="sftp-editor-header"
:name="editorFileName"
:path="editorFilePath"
:session="session"
@save="editorSave"
@close="closeEditor" />
<!-- 编辑器 -->

View File

@@ -36,7 +36,7 @@
import { useTerminalStore } from '@/store';
defineProps<{
session: ISshSession | undefined
session?: ISshSession;
}>();
const emits = defineEmits(['click']);