1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-11 21:06:08 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Optimize file management style and increase file calculation (#8851)

Browse source 
Refs: #6878
This commit is contained in:
蘭 2025-05-27 16:56:20 +08:00 • committed by GitHub
parent 27836742a8
commit 0a5f62fe4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 65 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/views/host/file-management/index.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="flex gap-y-2 items-center gap-x-4"> <div class="flex gap-y-2 items-center gap-x-4" ref="toolRef">
<div class="flex-shrink-0 flex items-center justify-between"> <div class="flex-shrink-0 flex items-center justify-between">
<el-tooltip :content="$t('file.back')" placement="top"> <el-tooltip :content="$t('file.back')" placement="top">
<el-button icon="Back" @click="back" circle /> <el-button icon="Back" @click="back" circle />
@ -179,9 +179,25 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<el-dropdown class="mr-2.5">
<el-button>
{{ $t('commons.button.upload') }}/{{ $t('commons.button.download') }}
<el-icon><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="openUpload">
<el-icon><ElUpload /></el-icon>
{{ $t('commons.button.upload') }}
</el-dropdown-item>
<el-dropdown-item @click="openWget">
<el-icon><ElDownload /></el-icon>
{{ $t('file.remoteFile') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button-group> <el-button-group>
<el-button plain @click="openUpload">{{ $t('commons.button.upload') }}</el-button>
<el-button plain @click="openWget">{{ $t('file.remoteFile') }}</el-button>
<el-button class="btn mr-2.5" @click="openRecycleBin"> <el-button class="btn mr-2.5" @click="openRecycleBin">
{{ $t('file.recycleBin') }} {{ $t('file.recycleBin') }}
</el-button> </el-button>
@ -232,23 +248,26 @@
</el-button> </el-button>
<template v-if="hostMount.length == 1"> <template v-if="hostMount.length == 1">
<el-button class="btn" @click.stop="jump(hostMount[0]?.path)"> <el-button class="btn" @click.stop="jump(hostMount[0]?.path)">
{{ hostMount[0]?.path }} ({{ $t('file.root') }}) {{ getFileSize(hostMount[0]?.free) }} {{ hostMount[0]?.path }} ({{ $t('file.root') }})
{{ formatFileSize(hostMount[0]?.free) }}
</el-button> </el-button>
</template> </template>
<template v-else> <template v-else>
<el-dropdown class="mr-2.5" style="border-left: 1px solid #ccc"> <el-dropdown class="mr-2.5" style="border-left: 1px solid #ccc">
<el-button class="btn"> <el-button class="btn">
{{ hostMount[0]?.path }} ({{ $t('file.root') }}) {{ hostMount[0]?.path }} ({{ $t('file.root') }})
{{ getFileSize(hostMount[0]?.free) }} {{ formatFileSize(hostMount[0]?.free) }}
</el-button> </el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<template v-for="(mount, index) in hostMount" :key="mount.path"> <template v-for="(mount, index) in hostMount" :key="mount.path">
<el-dropdown-item v-if="index == 0" @click.stop="jump(mount.path)"> <el-dropdown-item v-if="index == 0" @click.stop="jump(mount.path)">
{{ mount.path }} ({{ $t('file.root') }}) {{ getFileSize(mount.free) }} {{ mount.path }} ({{ $t('file.root') }})
{{ formatFileSize(mount.free) }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="index != 0" @click.stop="jump(mount.path)"> <el-dropdown-item v-if="index != 0" @click.stop="jump(mount.path)">
{{ mount.path }} ({{ $t('home.mount') }}) {{ getFileSize(mount.free) }} {{ mount.path }} ({{ $t('home.mount') }})
{{ formatFileSize(mount.free) }}
</el-dropdown-item> </el-dropdown-item>
</template> </template>
</el-dropdown-menu> </el-dropdown-menu>
@ -430,21 +449,23 @@
</el-table-column> </el-table-column>
<el-table-column :label="$t('file.size')" prop="size" min-width="100" sortable> <el-table-column :label="$t('file.size')" prop="size" min-width="100" sortable>
<template #default="{ row, $index }"> <template #default="{ row, $index }">
<span v-if="row.isDir"> <el-button
<el-button type="primary"
type="primary" link
link small
small :loading="row.btnLoading"
@click="getDirSize(row.path, $index)" @click="row.isDir ? getDirSize(row.path, $index) : getFileSize(row.path, $index)"
:loading="row.btnLoading" >
> <span v-if="row.isDir">
<span v-if="row.dirSize == undefined"> <span v-if="row.dirSize === undefined">
{{ $t('file.calculate') }} {{ $t('file.calculate') }}
</span> </span>
<span v-else>{{ getFileSize(row.dirSize) }}</span> <span v-else>{{ formatFileSize(row.dirSize) }}</span>
</el-button> </span>
</span> <span v-else>
<span v-else>{{ getFileSize(row.size) }}</span> {{ formatFileSize(row.size) }}
</span>
</el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -477,7 +498,7 @@
{{ $t('file.calculate') }} {{ $t('file.calculate') }}
</span> </span>
<span v-else> <span v-else>
{{ getFileSize(dirTotalSize) }} {{ formatFileSize(dirTotalSize) }}
</span> </span>
</el-button> </el-button>
</div> </div>
@ -530,6 +551,7 @@ import { MsgWarning } from '@/utils/message';
import { useSearchable } from './hooks/searchable'; import { useSearchable } from './hooks/searchable';
import { ResultData } from '@/api/interface'; import { ResultData } from '@/api/interface';
import { GlobalStore } from '@/store'; import { GlobalStore } from '@/store';
import { Download as ElDownload, Upload as ElUpload } from '@element-plus/icons-vue';
import i18n from '@/lang'; import i18n from '@/lang';
import CreateFile from './create/index.vue'; import CreateFile from './create/index.vue';
@ -593,7 +615,7 @@ const fileCompress = reactive({ files: [''], name: '', dst: '', operate: 'compre
const fileDeCompress = reactive({ path: '', name: '', dst: '', mimeType: '' }); const fileDeCompress = reactive({ path: '', name: '', dst: '', mimeType: '' });
const fileEdit = reactive({ content: '', path: '', name: '', language: 'plaintext', extension: '' }); const fileEdit = reactive({ content: '', path: '', name: '', language: 'plaintext', extension: '' });
const filePreview = reactive({ path: '', name: '', extension: '', fileType: '' }); const filePreview = reactive({ path: '', name: '', extension: '', fileType: '' });
const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 }); const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100, isDetail: false });
const fileUpload = reactive({ path: '' }); const fileUpload = reactive({ path: '' });
const fileRename = reactive({ path: '', oldName: '' }); const fileRename = reactive({ path: '', oldName: '' });
const fileWget = reactive({ path: '' }); const fileWget = reactive({ path: '' });
@ -611,6 +633,7 @@ const wgetRef = ref();
const moveRef = ref(); const moveRef = ref();
const downloadRef = ref(); const downloadRef = ref();
const pathRef = ref(); const pathRef = ref();
const toolRef = ref();
const breadCrumbRef = ref(); const breadCrumbRef = ref();
const chownRef = ref(); const chownRef = ref();
const moveOpen = ref(false); const moveOpen = ref(false);
@ -744,9 +767,9 @@ const moreButtons = ref([]);
const updateButtons = async () => { const updateButtons = async () => {
await nextTick(); await nextTick();
if (!btnWrapper.value) return; if (!btnWrapper.value) return;
const pathWidth = pathRef.value.offsetWidth; const pathWidth = toolRef.value.offsetWidth;
const leftWidth = leftWrapper.value.offsetWidth; const leftWidth = leftWrapper.value.offsetWidth;
let num = Math.floor((pathWidth - leftWidth - 420) / 70); let num = Math.floor((pathWidth - leftWidth - 450) / 100);
if (num < 0) { if (num < 0) {
visibleButtons.value = toolButtons.value; visibleButtons.value = toolButtons.value;
moreButtons.value = []; moreButtons.value = [];
@ -759,7 +782,7 @@ const updateButtons = async () => {
const handlePath = () => { const handlePath = () => {
nextTick(function () { nextTick(function () {
let breadCrumbWidth = breadCrumbRef.value.offsetWidth; let breadCrumbWidth = breadCrumbRef.value.offsetWidth;
let pathWidth = pathRef.value.offsetWidth; let pathWidth = toolRef.value.offsetWidth;
if (pathWidth - breadCrumbWidth < 50 && paths.value.length > 1) { if (pathWidth - breadCrumbWidth < 50 && paths.value.length > 1) {
const removed = paths.value.shift(); const removed = paths.value.shift();
if (removed) hidePaths.value.push(removed); if (removed) hidePaths.value.push(removed);
@ -896,10 +919,26 @@ const batchDelFiles = () => {
deleteRef.value.acceptParams(selects.value); deleteRef.value.acceptParams(selects.value);
}; };
const getFileSize = (size: number) => { const formatFileSize = (size: number) => {
return computeSize(size); return computeSize(size);
}; };
const getFileSize = async (path: string, index: number) => {
codeReq.path = path;
codeReq.expand = true;
codeReq.isDetail = true;
data.value[index].btnLoading = true;
await getFileContent(codeReq)
.then(async (res) => {
let newData = [...data.value];
newData[index].size = res.data.size;
data.value = newData;
})
.finally(() => {
data.value[index].btnLoading = false;
});
};
const getDirSize = async (path: string, index: number) => { const getDirSize = async (path: string, index: number) => {
const req = { const req = {
path: path, path: path,