Skip to content
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

perf: Optimized interaction logic #1601

Merged
merged 1 commit into from
Nov 27, 2024
Merged

perf: Optimized interaction logic #1601

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
9 changes: 8 additions & 1 deletion ui/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<template>
<n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN" class="overflow-hidden">
<n-config-provider
:locale="zhCN"
:theme="darkTheme"
:date-locale="dateZhCN"
:theme-overrides="themeOverrides"
class="overflow-hidden"
>
<n-dialog-provider>
<n-notification-provider>
<n-message-provider>
Expand All @@ -16,6 +22,7 @@ import { BASE_URL } from '@/config';
import { darkTheme } from 'naive-ui';
import { alovaInstance } from '@/api';
import { zhCN, dateZhCN } from 'naive-ui';
import { themeOverrides } from './overrides.ts';

import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
Expand Down
3 changes: 2 additions & 1 deletion ui/src/components/pamFileList/components/fileManage/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ export const getDropSelections = (t: any): DropdownOption[] => {
h(
NIcon,
{
color: 'red'
color: 'red',
size: 16
},
{
default: () => h(Delete16Regular)
Expand Down
93 changes: 77 additions & 16 deletions ui/src/components/pamFileList/components/fileManage/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
<n-popover>
<template #trigger>
<n-button size="small" round strong @click="handleOpenTransferList">
<n-icon size="16" :component="Upload" />
<n-icon size="16" :component="List" />
</n-button>
</template>
{{ t('Upload') }}
Expand All @@ -114,9 +114,11 @@

<n-flex class="table-part">
<n-data-table
remote
virtual-scroll
size="small"
:bordered="false"
:loading="loading"
:max-height="1000"
:columns="columns"
:row-props="rowProps"
Expand Down Expand Up @@ -160,14 +162,15 @@
<script setup lang="ts">
import mittBus from '@/utils/mittBus.ts';

import { Folder, Refresh, Upload } from '@vicons/tabler';
import { List } from '@vicons/ionicons5';
import { Folder, Refresh } from '@vicons/tabler';
import { NButton, NFlex, NIcon, NText, UploadCustomRequestOptions, useMessage } from 'naive-ui';
import { ArrowBackIosFilled, ArrowForwardIosFilled } from '@vicons/material';

import { useI18n } from 'vue-i18n';
import { getFileName } from '@/utils';
import { getDropSelections } from './config.ts';
import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useFileManageStore } from '@/store/modules/fileManage.ts';
import { ManageTypes, unloadListeners } from '@/hooks/useFileManage.ts';

Expand All @@ -194,15 +197,7 @@ const props = withDefaults(
}
);

const emits = defineEmits<{
(e: 'resetLoaded'): void;
}>();

// todo)) download icon 需要改变
// todo)) 自动刷新
// todo)) 权限位的展示
// todo)) 小屏幕下的宽度适配
// todo)) [配色]

const { t } = useI18n();
const message = useMessage();
Expand All @@ -216,12 +211,13 @@ const modalTitle = ref('');
const forwardPath = ref('');
const newFileName = ref('');
const modalContent = ref('');
const loading = ref(false);
const showInner = ref(false);
const showModal = ref(false);
const disabledBack = ref(true);
const showDropdown = ref(false);
const disabledForward = ref(true);
const isShowUploadList = ref(false);
const disabledBack = ref(true);
const disabledForward = ref(true);

const scrollRef = ref(null);

Expand All @@ -233,6 +229,20 @@ watch(
() => fileManageStore.currentPath,
newPath => {
if (newPath) {
if (newPath === '/') {
filePathList.value = [];

disabledBack.value = true;
filePathList.value.push({
id: '/',
path: '/',
active: true,
showArrow: false
});

return;
}

// 重置所有项的 active 和 showArrow 状态
filePathList.value.forEach(item => {
item.active = false;
Expand Down Expand Up @@ -292,6 +302,18 @@ watch(
}
);

watch(
() => fileManageStore.fileList,
newFileList => {
if (newFileList) {
loading.value = false;
}
},
{
immediate: true
}
);

const onClickOutside = () => {
showDropdown.value = false;
};
Expand Down Expand Up @@ -363,7 +385,7 @@ const handlePathBack = () => {
} else {
disabledBack.value = true;

message.error('当前节点已为根节点！', { duration: 3000 });
// message.error('当前节点已为根节点！', { duration: 3000 });
}
};

Expand Down Expand Up @@ -397,6 +419,14 @@ const handlePathClick = (item: IFilePath) => {
mittBus.emit('file-manage', { path, type: ManageTypes.CHANGE });
};

/**
* @description 刷新
*/
const handleRefresh = () => {
loading.value = true;
mittBus.emit('file-manage', { path: fileManageStore.currentPath, type: ManageTypes.REFRESH });
};

/**
* @description modal 对话框
*/
Expand All @@ -415,6 +445,8 @@ const modalPositiveClick = () => {
return (showModal.value = true);
});
} else {
loading.value = true;

mittBus.emit('file-manage', {
type: ManageTypes.RENAME,
path: `${fileManageStore.currentPath}/${currentRowData?.value?.name}`,
Expand All @@ -428,6 +460,8 @@ const modalPositiveClick = () => {
}

if (modalType.value === 'delete') {
loading.value = true;

mittBus.emit('file-manage', {
type: ManageTypes.REMOVE,
path: `${fileManageStore.currentPath}/${currentRowData?.value?.name}`
Expand All @@ -443,6 +477,8 @@ const modalPositiveClick = () => {
if (index !== -1) {
return message.error('该文件已存在');
} else {
loading.value = true;

mittBus.emit('file-manage', {
path: `${fileManageStore.currentPath}/${newFileName.value}`,
type: ManageTypes.CREATE
Expand Down Expand Up @@ -488,8 +524,10 @@ const handleNewFolder = () => {
modalTitle.value = '创建文件夹';
};

const handleRefresh = () => {
mittBus.emit('file-manage', { path: fileManageStore.currentPath, type: ManageTypes.REFRESH });
const handleTableLoading = () => {
loading.value = false;

handleRefresh();
};

const rowProps = (row: RowData) => {
Expand All @@ -516,13 +554,36 @@ const rowProps = (row: RowData) => {
return message.error('暂不支持文件预览');
}

if (row.name === '..') {
const backPath = removeLastPathSegment(fileManageStore.currentPath)
? removeLastPathSegment(fileManageStore.currentPath)
: '/';

if (backPath === '/' && filePathList.value.findIndex(item => item.path === '/') === -1) {
fileManageStore.setCurrentPath('/');
}

mittBus.emit('file-manage', { path: backPath, type: ManageTypes.CHANGE });

handlePathBack();

return;
}

mittBus.emit('file-manage', { path: splicePath, type: ManageTypes.CHANGE });

disabledBack.value = false;
}
};
};

onMounted(() => {
mittBus.on('reload-table', handleTableLoading);
});

onBeforeUnmount(() => {
unloadListeners();

mittBus.off('reload-table', handleTableLoading);
});
</script>
Copy link

Choose a reason for hiding this comment

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

In this specific example of the code provided, there appear to be no major problems at the moment since it seems well organized and follows proper coding practices. However, here are some potential optimizations that could potentially improve its performance or readability:

  1. Use computed properties instead of local variables: The use of local variables such as _filePathList, _showInner_, etc., can sometimes cause memory leaks and make debugging harder. Local variables should be replaced with computed properties for reusability.

  2. Avoid unnecessary array creation: If creating an array only to then remove all elements immediately afterward will result in memory being freed unnecessarily, it might be more efficient to copy values into another data structure if necessary.

  3. Optimize component name changes: Inlining <n-flex> and other layout components within <template #body></template> blocks (#table-part) can speed up rendering when they need access to their parent container's children.

  4. Avoid inline references when possible: Where possible, consider moving these parts outside a template section so they're loaded earlier than most HTML elements.

  5. Ensure state updates are atomic: If updating paths during a file management operation would lead directly to unexpected results across multiple operations, consider synchronizing the path updates through a method like useEffect.

Note that although these modifications may enhance the current implementation's efficiency, thorough tests should also be performed before implementing any significant optimization strategies to ensure they do not introduce regressions elsewhere in the system.

93 changes: 47 additions & 46 deletions ui/src/components/pamFileList/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,6 @@ const props = withDefaults(
);

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

const isLoaded = ref(false);
Expand All @@ -210,25 +209,6 @@ const settingDrawer = ref(false);
const tabDefaultValue = ref('fileManage');
const tableData = ref<RowData[]>([]);

const actionItem = [
{
iconName: Delete,
label: t('Delete'),
type: 'error',
onClick: (row: RowData) => {
message.success(row.name);
}
},
{
iconName: CloudDownload,
label: t('Download'),
type: 'info',
onClick: (row: RowData) => {
message.success(row.name);
}
}
];

watch(
() => fileManageStore.fileList,
fileList => {
Expand Down Expand Up @@ -305,27 +285,61 @@ const createColumns = (): DataTableColumns<RowData> => {
{
default: () => [
h(NIcon, {
size: '16',
size: '18',
component: Folder
}),
h(
NEllipsis,
NFlex,
{
justify: 'center',
align: 'flex-start',
style: {
maxWidth: '260px',
cursor: 'pointer'
flexDirection: 'column',
rowGap: '0px'
}
},
{
default: () =>
default: () => [
h(
NEllipsis,
{
style: {
maxWidth: '210px',
cursor: 'pointer'
}
},
{
default: () =>
h(
NText,
{
depth: 1,
strong: true
},
{
default: () => row.name
}
)
}
),
h(
NText,
{
depth: 1,
strong: true
depth: 3,
strong: true,
style: {
fontSize: '10px'
}
},
{ default: () => row.name }
{
default: () => {
if (row.name === '..') return;

return row.perm ? row.perm : '-';
}
}
)
]
}
)
]
Expand All @@ -343,14 +357,9 @@ const createColumns = (): DataTableColumns<RowData> => {
},
render(row: RowData) {
return h(
NTag,
NText,
{
size: 'small',
style: {
marginRight: '6px'
},
type: 'info',
bordered: false
depth: 1
},
{
default: () => {
Expand Down Expand Up @@ -388,14 +397,10 @@ const createColumns = (): DataTableColumns<RowData> => {
align: 'center',
render(row: RowData) {
return h(
NTag,
NText,
{
size: 'small',
style: {
marginRight: '6px'
},
type: 'success',
bordered: false
depth: 1,
strong: true
},
{
default: () => getFileName(row)
Expand Down Expand Up @@ -451,8 +456,4 @@ onBeforeUnmount(() => {
width: 100%;
height: 100%;
}

::v-deep(.n-data-table-td--last-col) {
line-height: 100% !important;
}
</style>
Copy link

Choose a reason for hiding this comment

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

The provided code snippet contains HTML, CSS, and TypeScript components. The main issue I noticed was some inconsistencies between JavaScript variables used within different blocks of code and the corresponding properties set at ref. Here's an optimized version:


    

  
  



    


        

      
  

    
  
    
    

  

  




        

      
    








    


  










    


  		





                
              


          


    

  



  


    

  
    
      Loading


    
  




    

  
    
      Loading