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

Jump to bottom

perf：Implementation of the default tab bar #1591

Merged
merged 1 commit into from
Nov 20, 2024
Merged

perf：Implementation of the default tab bar #1591

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
61 changes: 56 additions & 5 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 @@ -62,10 +62,21 @@
<n-data-table
virtual-scroll
:bordered="false"
:columns="columns"
:max-height="1150"
:columns="columns"
:row-props="rowProps"
:data="fileManageStore.fileList"
/>
<n-dropdown
placement="bottom-start"
trigger="manual"
:x="x"
:y="y"
:options="options"
:show="showDropdown"
:on-clickoutside="onClickoutside"
@select="handleSelect"
/>
</n-flex>
</template>

Expand All @@ -74,11 +85,12 @@ import { Folder } from '@vicons/tabler';
import { NButton, NFlex, NIcon, NText } from 'naive-ui';
import { ArrowBackIosFilled, ArrowForwardIosFilled } from '@vicons/material';

import { ref } from 'vue';
import { useMessage } from 'naive-ui';
import { h, ref, nextTick } from 'vue';
import { useFileManageStore } from '@/store/modules/fileManage.ts';

import type { RowData } from '@/components/pamFileList/index.vue';
import type { DataTableColumns, UploadFileInfo } from 'naive-ui';
import type { DataTableColumns, UploadFileInfo, DropdownOption } from 'naive-ui';

const props = withDefaults(
defineProps<{
Expand All @@ -89,8 +101,12 @@ const props = withDefaults(
}
);

const message = useMessage();
const fileManageStore = useFileManageStore();

const x = ref(0);
const y = ref(0);
const showDropdown = ref(false);
const isShowUploadList = ref(false);
const fileList = ref<UploadFileInfo[]>([
{
Expand All @@ -100,6 +116,41 @@ const fileList = ref<UploadFileInfo[]>([
type: 'text/plain'
}
]);
</script>

<style scoped lang="scss"></style>
const options: DropdownOption[] = [
{
label: '编辑',
key: 'edit'
},
{
label: () => h('span', { style: { color: 'red' } }, '删除'),
key: 'delete'
}
];

const onClickoutside = () => {
showDropdown.value = false;
};

const handleSelect = () => {
showDropdown.value = false;
};

const rowProps = (row: RowData) => {
return {
onContextmenu: (e: MouseEvent) => {
message.info(JSON.stringify(row, null, 2));

e.preventDefault();

showDropdown.value = false;

nextTick().then(() => {
showDropdown.value = true;
x.value = e.clientX;
y.value = e.clientY;
});
}
};
};
</script>
Copy link

Choose a reason for hiding this comment

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

The code you provided is the template of a page which uses NaiveUI components like NDataTable, NButton and Navbar. It seems to be missing some important details for it to function properly.

However, here's a general overview of what needs attention:

  1. Pagination should have been checked since this could potentially cause infinite scroll behavior if not set up correctly.

  2. There might also be miscommunication between your component NFlex or similar components and the one that calls them (NDataTable). Ensure there isn't an incorrect usage leading to unnecessary re-rendering and potential data skewings.

  3. A common issue when using multiple libraries is ensuring they support proper interaction with each other due to different APIs. Check for consistency across all components, including dropdowns.

  4. The styles are incorrectly scoped, meaning only .scss files can be modified via SCSS.

  5. Lastly, ensure to address any edge cases related to pagination implementation and user inputs handling within these components to prevent errors such as "OutOfRangeError" upon reaching maximum number limit, especially after adding dynamic rows on scrolling (scroll bar overflow).

In summary, without detailed information about every single file inside the project directory, it’s hard to give accurate pointers. However, these points above offer good starting point for troubleshooting.

49 changes: 40 additions & 9 deletions ui/src/components/pamFileList/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<n-drawer
resizable
v-model:show="isShowList"
:width="settingDrawer ? 270 : 1050"
:auto-focus="false"
:width="settingDrawer ? 270 : 700"
class="transition-all duration-300 ease-in-out"
>
<n-drawer-content>
Expand Down Expand Up @@ -163,22 +163,22 @@
// @ts-ignore
import dayjs from 'dayjs';
import mittBus from '@/utils/mittBus.ts';
// @ts-ignore
import FileManage from './components/fileManage/index.vue';

import { Delete, CloudDownload } from '@vicons/carbon';
import { NButton, NFlex, NIcon, NTag, NText } from 'naive-ui';
import { Folder, Folders, Settings } from '@vicons/tabler';
import { NButton, NFlex, NIcon, NTag, NText } from 'naive-ui';

import { useI18n } from 'vue-i18n';
import { useMessage } from 'naive-ui';
import { useFileManage } from '@/hooks/useFileManage.ts';
import { h, onBeforeUnmount, onMounted, ref, watch, unref } from 'vue';
import { useFileManageStore } from '@/store/modules/fileManage.ts';
import { h, onBeforeUnmount, onMounted, ref, watch, unref, nextTick } from 'vue';

import type { DataTableColumns } from 'naive-ui';
import type { ISettingProp } from '@/views/interface';

import FileManage from './components/fileManage/index.vue';

export interface RowData {
is_dir: boolean;
mod_time: string;
Expand Down Expand Up @@ -239,10 +239,28 @@ watch(
}
);

/**
* @description pam 中默认打开的是文件管理
*/
const handleOpenFileList = () => {
tabDefaultValue.value = 'fileManage';
isShowList.value = !isShowList.value;
};

useFileManage();
/**
* luna 的默认连接中，点击 Setting 默认打开 Setting
*/
const handleOpenSetting = () => {
isShowList.value = !isShowList.value;
tabDefaultValue.value = 'setting';

nextTick(() => {
const drawerRef: HTMLElement = document.getElementsByClassName('n-drawer')[0] as HTMLElement;

if (drawerRef) {
drawerRef.style.width = '270px';
}
});
};

/**
Expand Down Expand Up @@ -417,19 +435,32 @@ const handleBeforeLeave = (tabName: string) => {
return true;
}

settingDrawer.value = false;
if (tabName === 'fileManage') {
settingDrawer.value = false;

nextTick(() => {
const drawerRef: HTMLElement = document.getElementsByClassName('n-drawer')[0] as HTMLElement;

return true;
if (drawerRef) {
drawerRef.style.width = '700px';
}
});

return true;
}
};

const columns = createColumns();

onMounted(() => {
useFileManage();
mittBus.on('open-fileList', handleOpenFileList);
mittBus.on('open-setting', handleOpenSetting);
});

onBeforeUnmount(() => {
mittBus.off('open-fileList', handleOpenFileList);
mittBus.off('open-setting', handleOpenSetting);
});
</script>

Copy link

Choose a reason for hiding this comment

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

There is no issue with the current code, but some small improvements could be made based on best practices:

# 1. Add `@title` attribute to <NButton> components for better accessibility.
#
<style scoped lang="scss">
  @import "naive-ui/vars/css-vars";
</style>

<script setup>
useHead({
  script: ['~/public/script.js']
});
usingComponents([
  ...
]);

...

This change will improve accessibility by adding screen reader support for the title of buttons.

To enhance performance and efficiency further:

  • Update all instances of <i> tags to have proper inline styling (e.g., using CSS properties instead of HTML entities) in components like /views/components/i.vue.

Update each file in this project so that it follows the latest standard naming conventions (CSS variables, consistent component files). This improves SEO as search engines can now accurately index these files.

For more specific optimizations, consult other libraries' documentation, such as Naive UI's documentation and Carbon Icons' documentation.

Please note: These changes require modifications across your entire project structure due to its complexity. Therefore, they should only be applied when making significant revisions.

These were just general improvements, while optimizing an exact piece of JavaScript code involves looking at a broader context including different aspects of the application.

Expand Down
4 changes: 4 additions & 0 deletions ui/src/hooks/useTerminal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,6 +431,10 @@ export const useTerminal = async (el: HTMLElement, option: ICallbackOptions): Pr
option.emitCallback && option.emitCallback('event', 'open', '');
break;
}
case 'FILE': {
option.emitCallback && option.emitCallback('event', 'file', '');
break;
}
}
});

Expand Down
9 changes: 8 additions & 1 deletion ui/src/store/modules/fileManage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@ interface IFileManageStoreState {
fileList: IFileManageSftpFileItem[] | null;

messageId: string;

currentPath: string;
}

export const useFileManageStore = defineStore('fileManage', {
state: (): IFileManageStoreState => ({
fileList: null,

messageId: ''
messageId: '',

currentPath: ''
}),
actions: {
setFileList(fileList: IFileManageSftpFileItem[]) {
Expand All @@ -23,6 +27,9 @@ export const useFileManageStore = defineStore('fileManage', {
},
setMessageId(id: string): void {
this.messageId = id;
},
setCurrentPath(currentPath: string): void {
this.currentPath = currentPath;
}
}
});
Copy link

Choose a reason for hiding this comment

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

The main issue with the provided code is that it contains some redundant definitions, such as setMessageId and setCurrentPath. These should instead just be properties of IFileManageStoreState, which already exists in the store definition. Additionally, there's no need to include the interface again if only a single property needs defining.

Here's the refined version:

export type IFileManageStoreState = {
  fileList?: IFileManageSftpFileItem[];
  messageId: string;

  // Additional properties can also go here

} & IInitializable;

If more fields are required later, they will have clear names so you do not need to repeat them. Also note the new line formatting (from " +" to "") at end lines to keep things cleaner. Lastly, the comment section has been removed since there were none added originally.

This version makes sure everything follows TypeScript types while being less verbose and easier to read.

9 changes: 4 additions & 5 deletions ui/src/views/Connection/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { Terminal } from '@xterm/xterm';

import { storeToRefs } from 'pinia';
import { NMessageProvider } from 'naive-ui';
import { computed, h, markRaw, nextTick, onUnmounted, reactive, Ref, ref, onMounted } from 'vue';
import { computed, h, markRaw, nextTick, onUnmounted, reactive, Ref, ref } from 'vue';

import xtermTheme from 'xterm-theme';
import mittBus from '@/utils/mittBus.ts';
Expand Down Expand Up @@ -404,12 +404,11 @@ const onEvent = (event: string, data: any) => {
case 'open':
mittBus.emit('open-setting');
break;
case 'file':
mittBus.emit('open-fileList');
break;
}
};

onMounted(() => {
mittBus.emit('open-fileList');
});
</script>

<style scoped lang="scss">
Expand Down