From c9bbb19e13fa6d0fec21b98ab23f01501b7d6d82 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Wed, 20 Nov 2024 17:50:14 +0800
Subject: [PATCH] =?UTF-8?q?perf=EF=BC=9AImplementation=20of=20the=20defaul?=
 =?UTF-8?q?t=20tab=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/fileManage/index.vue           | 61 +++++++++++++++++--
 ui/src/components/pamFileList/index.vue       | 49 ++++++++++++---
 ui/src/hooks/useTerminal.ts                   |  4 ++
 ui/src/store/modules/fileManage.ts            |  9 ++-
 ui/src/views/Connection/index.vue             |  9 ++-
 5 files changed, 112 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/pamFileList/components/fileManage/index.vue b/ui/src/components/pamFileList/components/fileManage/index.vue
index c8180883..4ed66e19 100644
--- a/ui/src/components/pamFileList/components/fileManage/index.vue
+++ b/ui/src/components/pamFileList/components/fileManage/index.vue
@@ -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>
 
@@ -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<{
@@ -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[]>([
   {
@@ -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>
diff --git a/ui/src/components/pamFileList/index.vue b/ui/src/components/pamFileList/index.vue
index f0e8cbd0..981a2abe 100644
--- a/ui/src/components/pamFileList/index.vue
+++ b/ui/src/components/pamFileList/index.vue
@@ -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>
@@ -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;
@@ -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';
+    }
+  });
 };
 
 /**
@@ -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>
 
diff --git a/ui/src/hooks/useTerminal.ts b/ui/src/hooks/useTerminal.ts
index 7cfe3183..dbf75c40 100644
--- a/ui/src/hooks/useTerminal.ts
+++ b/ui/src/hooks/useTerminal.ts
@@ -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;
+        }
       }
     });
 
diff --git a/ui/src/store/modules/fileManage.ts b/ui/src/store/modules/fileManage.ts
index 956b870b..5f4261c3 100644
--- a/ui/src/store/modules/fileManage.ts
+++ b/ui/src/store/modules/fileManage.ts
@@ -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[]) {
@@ -23,6 +27,9 @@ export const useFileManageStore = defineStore('fileManage', {
     },
     setMessageId(id: string): void {
       this.messageId = id;
+    },
+    setCurrentPath(currentPath: string): void {
+      this.currentPath = currentPath;
     }
   }
 });
diff --git a/ui/src/views/Connection/index.vue b/ui/src/views/Connection/index.vue
index 7079fbe6..d7612fbd 100644
--- a/ui/src/views/Connection/index.vue
+++ b/ui/src/views/Connection/index.vue
@@ -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';
@@ -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">