From ed415a5bd26a17f26af451728bc0096a2527fabc Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 13 May 2025 01:04:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E5=8E=8B=E7=BC=A9=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B9=E6=B7=BB=E5=8A=A0=E4=BA=8C=E7=BA=A7=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FileManagerContextMenu.vue | 72 ++++++++++++++++---
 .../file-manager/useFileManagerContextMenu.ts | 29 +++++---
 2 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/FileManagerContextMenu.vue b/packages/frontend/src/components/FileManagerContextMenu.vue
index b451b99..43f35d0 100644
--- a/packages/frontend/src/components/FileManagerContextMenu.vue
+++ b/packages/frontend/src/components/FileManagerContextMenu.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { type PropType } from 'vue';
+import { ref, type PropType } from 'vue';
 import type { ContextMenuItem } from '../composables/file-manager/useFileManagerContextMenu'; // 导入菜单项类型
+import { onUnmounted } from 'vue';
 
 defineProps({
   isVisible: {
@@ -22,12 +23,38 @@ defineProps({
 const emit = defineEmits(['item-click', 'close-request']); // 添加 close-request
 
 const handleItemClick = (item: ContextMenuItem) => {
-  if (!item.disabled) {
-    item.action(); // 直接执行 action
+  if (!item.disabled && item.action) {
+    item.action(); // 只有当 action 存在时才执行
     emit('close-request'); // <-- 发出关闭请求
-    // 不需要 emit('item-click', item) 了
   }
 };
+
+
+
+// 管理二级菜单的展开状态
+const expandedSubmenu = ref<string | null>(null);
+let closeTimeout: NodeJS.Timeout | null = null;
+
+const showSubmenu = (label: string) => {
+  if (closeTimeout) {
+    clearTimeout(closeTimeout);
+    closeTimeout = null;
+  }
+  expandedSubmenu.value = label;
+};
+
+const hideSubmenu = () => {
+  closeTimeout = setTimeout(() => {
+    expandedSubmenu.value = null;
+    closeTimeout = null;
+  }, 300); // 延迟300ms关闭
+};
+
+onUnmounted(() => {
+  if (closeTimeout) {
+    clearTimeout(closeTimeout);
+  }
+});
 </script>
 
 <template>
@@ -41,17 +68,46 @@ const handleItemClick = (item: ContextMenuItem) => {
       <template v-for="(menuItem, index) in items" :key="index">
         <li v-if="menuItem.separator" class="border-t border-border/50 my-1 mx-1"></li>
         <li
-          v-else
+          v-else-if="!menuItem.submenu"
           @click.stop="handleItemClick(menuItem)"
           :class="[
-            'px-4 py-1.5 cursor-pointer text-foreground text-sm flex items-center transition-colors duration-150 rounded mx-1', // Added mx-1 for consistency
+            'px-4 py-1.5 cursor-pointer text-foreground text-sm flex items-center transition-colors duration-150 rounded mx-1',
             menuItem.disabled
-              ? 'text-text-secondary cursor-not-allowed opacity-60' // Removed bg-background for disabled
-              : 'hover:bg-primary/10 hover:text-primary' // Use primary hover like TabBarContextMenu
+              ? 'text-text-secondary cursor-not-allowed opacity-60'
+              : 'hover:bg-primary/10 hover:text-primary'
           ]"
         >
           {{ menuItem.label }}
         </li>
+        <li
+          v-else
+          class="px-4 py-1.5 text-foreground text-sm flex items-center justify-between transition-colors duration-150 rounded mx-1 hover:bg-primary/10 hover:text-primary relative"
+          @mouseenter="showSubmenu(menuItem.label)"
+          @mouseleave="hideSubmenu()"
+        >
+          {{ menuItem.label }}
+          <span class="ml-2">›</span>
+          <ul
+            v-if="expandedSubmenu === menuItem.label"
+            class="absolute left-full top-0 mt-0 ml-1 bg-background border border-border shadow-lg rounded-md z-[1003] min-w-[150px] list-none p-1"
+            @mouseenter="showSubmenu(menuItem.label)"
+            @mouseleave="hideSubmenu()"
+          >
+            <li
+              v-for="(subItem, subIndex) in menuItem.submenu"
+              :key="subIndex"
+              @click.stop="handleItemClick(subItem)"
+              :class="[
+                'px-4 py-1.5 cursor-pointer text-foreground text-sm flex items-center transition-colors duration-150 rounded mx-1',
+                subItem.disabled
+                  ? 'text-text-secondary cursor-not-allowed opacity-60'
+                  : 'hover:bg-primary/10 hover:text-primary'
+              ]"
+            >
+              {{ subItem.label }}
+            </li>
+          </ul>
+        </li>
       </template>
     </ul>
   </div>
diff --git a/packages/frontend/src/composables/file-manager/useFileManagerContextMenu.ts b/packages/frontend/src/composables/file-manager/useFileManagerContextMenu.ts
index 4a68c5d..ab42a8f 100644
--- a/packages/frontend/src/composables/file-manager/useFileManagerContextMenu.ts
+++ b/packages/frontend/src/composables/file-manager/useFileManagerContextMenu.ts
@@ -6,9 +6,10 @@ import type FileManagerContextMenu from '../../components/FileManagerContextMenu
 // 定义菜单项类型 (可以根据需要扩展)
 export interface ContextMenuItem {
   label: string;
-  action: () => void;
+  action?: () => void;
   disabled?: boolean;
   separator?: boolean; // 添加分隔符类型
+  submenu?: ContextMenuItem[]; // 添加二级菜单支持
 }
 
 // 支持的压缩格式
@@ -137,11 +138,14 @@ export function useFileManagerContextMenu(options: UseFileManagerContextMenuOpti
 
 
         // --- 多选压缩 ---
-        menu.push(
-            { label: t('fileManager.contextMenu.compressZip'), action: () => onCompressRequest(selectedFileItems, 'zip'), disabled: !(isConnected.value && isSftpReady.value) },
-            { label: t('fileManager.contextMenu.compressTarGz'), action: () => onCompressRequest(selectedFileItems, 'targz'), disabled: !(isConnected.value && isSftpReady.value) },
-            { label: t('fileManager.contextMenu.compressTarBz2'), action: () => onCompressRequest(selectedFileItems, 'tarbz2'), disabled: !(isConnected.value && isSftpReady.value) },
-        );
+        menu.push({
+            label: t('fileManager.contextMenu.compress'),
+            submenu: [
+                { label: t('fileManager.contextMenu.compressZip'), action: () => onCompressRequest(selectedFileItems, 'zip'), disabled: !(isConnected.value && isSftpReady.value) },
+                { label: t('fileManager.contextMenu.compressTarGz'), action: () => onCompressRequest(selectedFileItems, 'targz'), disabled: !(isConnected.value && isSftpReady.value) },
+                { label: t('fileManager.contextMenu.compressTarBz2'), action: () => onCompressRequest(selectedFileItems, 'tarbz2'), disabled: !(isConnected.value && isSftpReady.value) }
+            ]
+        });
         menu.push({ label: '', action: () => {}, disabled: true, separator: true }); // Separator
 
 
@@ -192,10 +196,15 @@ export function useFileManagerContextMenu(options: UseFileManagerContextMenuOpti
         const canCompress = isConnected.value && isSftpReady.value;
         const canDecompress = isConnected.value && isSftpReady.value && targetItem.attrs.isFile && isSupportedArchive(targetItem.filename);
 
-        // menu.push({ label: t('fileManager.contextMenu.compress'), action: () => {}, disabled: true }); // Removed isSubmenuHeader
-        menu.push({ label: t('fileManager.contextMenu.compressZip'), action: () => onCompressRequest([targetItem], 'zip'), disabled: !canCompress });
-        menu.push({ label: t('fileManager.contextMenu.compressTarGz'), action: () => onCompressRequest([targetItem], 'targz'), disabled: !canCompress });
-        menu.push({ label: t('fileManager.contextMenu.compressTarBz2'), action: () => onCompressRequest([targetItem], 'tarbz2'), disabled: !canCompress });
+        // 添加压缩选项作为二级菜单
+        menu.push({
+            label: t('fileManager.contextMenu.compress'),
+            submenu: [
+                { label: t('fileManager.contextMenu.compressZip'), action: () => onCompressRequest([targetItem], 'zip'), disabled: !canCompress },
+                { label: t('fileManager.contextMenu.compressTarGz'), action: () => onCompressRequest([targetItem], 'targz'), disabled: !canCompress },
+                { label: t('fileManager.contextMenu.compressTarBz2'), action: () => onCompressRequest([targetItem], 'tarbz2'), disabled: !canCompress }
+            ]
+        });
 
         // 只有在支持解压的文件上才显示解压选项
         if (canDecompress) {