优化 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 useLoading from '@/hooks/loading';
import { createCommandSnippetGroup } from '@/api/asset/command-snippet-group'; import { createCommandSnippetGroup } from '@/api/asset/command-snippet-group';
const props = defineProps<{ const props = defineProps<Partial<{
modelValue: number | undefined modelValue: number;
}>(); }>>();
const emits = defineEmits(['update:modelValue']); const emits = defineEmits(['update:modelValue']);

View File

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

View File

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

View File

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

View File

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

View File

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