Skip to content

perf: file manager #1878

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fit2bot wants to merge 1 commit into
base: dev
Choose a base branch
from
+529 −237
Open

perf: file manager #1878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ declare module 'vue' {
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NPopconfirm: typeof import('naive-ui')['NPopconfirm']
NPopover: typeof import('naive-ui')['NPopover']
NPopselect: typeof import('naive-ui')['NPopselect']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect']
NSpin: typeof import('naive-ui')['NSpin']
Expand Down
123 changes: 57 additions & 66 deletions ui/src/components/Drawer/components/FileManagement/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<script setup lang="ts">
import type { DataTableColumns } from 'naive-ui';

import dayjs from 'dayjs';
import { useI18n } from 'vue-i18n';
import { h, watchEffect } from 'vue';
import prettyBytes from 'pretty-bytes';
import { File, Folder } from 'lucide-vue-next';
import { h, onUnmounted, ref, watch } from 'vue';
import { NFlex, NIcon, NPopover, NText } from 'naive-ui';
import { NFlex, NIcon, NPopover, NTag, NText } from 'naive-ui';

import { useFileManage } from '@/hooks/useFileManage.ts';
import { useFileManageStore } from '@/store/modules/fileManage.ts';
import { useFileOperation } from '@/hooks/useFileOperation';

import FileManage from './widget/index.vue';

Expand All @@ -31,34 +31,13 @@ const emit = defineEmits<{
}>();

const { t } = useI18n();
const fileManageStore = useFileManageStore();

const isLoaded = ref(false);
const tableData = ref<RowData[]>([]);
const fileManageSocket = ref<WebSocket | undefined>(undefined);

watch(
() => fileManageStore.fileList,
(fileList) => {
if (fileList) {
tableData.value = fileList;
isLoaded.value = true;
}
},
{
immediate: true,
},
);

watch(
() => props.sftpToken,
(token) => {
if (token) {
fileManageSocket.value = useFileManage(token, t);
}
},
{ immediate: true },
);
const { createFileSocket, fileList } = useFileOperation();

watchEffect(() => {
if (props.sftpToken) {
createFileSocket(props.sftpToken);
}
});

/**
* @description 生成表头
Expand All @@ -71,6 +50,8 @@ const createColumns = (): DataTableColumns<RowData> => {
ellipsis: {
tooltip: true,
},
resizable: true,
maxWidth: 320,
render(row) {
const fileIcon = h(NIcon, {
size: 18,
Expand Down Expand Up @@ -100,30 +81,18 @@ const createColumns = (): DataTableColumns<RowData> => {
whiteSpace: 'nowrap',
},
},
{ default: () => row.name },
{ default: () => row.name }
),
default: () =>
h(NText, { style: { maxWidth: '300px', wordBreak: 'break-all' } }, { default: () => row.name }),
},
}
);

const filePermission
= row.name !== '..' && row.perm
? h(
NText,
{
depth: 3,
style: { fontSize: '10px', marginTop: '2px' },
},
{ default: () => row.perm },
)
: null;

return h(
NFlex,
{
align: 'center',
style: { gap: '0px' },
style: { gap: '0px', flexWrap: 'nowrap' },
},
{
default: () => [
Expand All @@ -135,11 +104,47 @@ const createColumns = (): DataTableColumns<RowData> => {
style: { gap: '0px' },
},
{
default: () => [fileName, filePermission].filter(Boolean),
},
default: () => [fileName],
}
),
],
},
}
);
},
},
{
title: '权限',
key: 'perm',
align: 'center',
width: 120,
render(row: RowData) {
let type: 'default' | 'info' | 'success' | 'warning' | 'error' = 'default';

if (row.perm.startsWith('d')) {
type = 'info';
} else if (row.perm.startsWith('-')) {
type = 'success';
} else if (row.perm.startsWith('s')) {
type = 'warning';
} else if (row.perm.includes('lock')) {
type = 'error';
} else {
type = 'error';
}

return h(NTag, { type, round: true, size: 'small', bordered: false }, { default: () => row.perm });
},
},
{
title: '修改时间',
key: 'mod_time',
align: 'center',
width: 180,
render(row: RowData) {
return h(
NText,
{ depth: 1, strong: true },
{ default: () => dayjs(Number(row.mod_time) * 1000).format('YYYY-MM-DD HH:mm:ss') }
);
},
},
Expand All @@ -157,7 +162,7 @@ const createColumns = (): DataTableColumns<RowData> => {
},
{
default: () => prettyBytes(Number(row.size)),
},
}
);
},
},
Expand All @@ -168,13 +173,6 @@ const handleReconnect = () => {
emit('reconnect');
};

onUnmounted(() => {
if (fileManageSocket.value && fileManageSocket.value.readyState === WebSocket.OPEN) {
fileManageSocket.value.close();
fileManageSocket.value = undefined;
}
});

const columns = createColumns();
</script>

Expand All @@ -189,13 +187,6 @@ const columns = createColumns();
</template>

<template v-else>
<FileManage :columns="columns" />
<FileManage :columns="columns" :file-list="fileList" />
</template>
</template>

<style scoped lang="scss">
::v-deep(.n-tabs-pane-wrapper) {
width: 100%;
height: 100%;
}
</style>

@baijiangjie baijiangjie Sep 12, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet appears to be TypeScript code related to Vue components, specifically the layout for a file management application. Here are some observations and comments:

  1. The component uses useNFlexible library that does not seem imported in line with its usage.
  2. The column data of the DataTable is initialized outside the watch effect because it's not used or updated within said action.
  3. Watch effects might not be necessary due to event bindings (though this can depend significantly on the specific requirements).
  4. It seems there are multiple places where CSS styles could be merged into one common scss files.

In terms of actual content:

  • There are no known syntax errors in the given script block.
  • No issues found regarding functionality.
  • Some optimization opportunities exist including moving the styling to external SCSS files and merging them later during development phase.
  • The watch mechanism for fileManageStore needs attention since its watch doesn't trigger when initial state changes; additional cleanup methods might need implementation after initialization has been completed.

Loading
Loading