From 2a6b0cb090e120ad6d021c08c5da886221f786c4 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 13 May 2025 13:12:00 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FileManagerContextMenu.vue | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/FileManagerContextMenu.vue b/packages/frontend/src/components/FileManagerContextMenu.vue
index 43f35d0..5be45ef 100644
--- a/packages/frontend/src/components/FileManagerContextMenu.vue
+++ b/packages/frontend/src/components/FileManagerContextMenu.vue
@@ -2,6 +2,7 @@
 import { ref, type PropType } from 'vue';
 import type { ContextMenuItem } from '../composables/file-manager/useFileManagerContextMenu'; // 导入菜单项类型
 import { onUnmounted } from 'vue';
+import { useDeviceDetection } from '../composables/useDeviceDetection';
 
 defineProps({
   isVisible: {
@@ -18,6 +19,8 @@ defineProps({
   },
 });
 
+const { isMobile } = useDeviceDetection();
+
 // 隐藏菜单的逻辑由 useFileManagerContextMenu 中的全局点击监听器处理
 // 但我们仍然需要触发菜单项的 action，并通知父组件关闭菜单
 const emit = defineEmits(['item-click', 'close-request']); // 添加 close-request
@@ -67,9 +70,27 @@ onUnmounted(() => {
     <ul class="list-none p-1 m-0">
       <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>
+        <!-- 如果是移动设备且有子菜单，则平铺子菜单 -->
+        <template v-else-if="isMobile && menuItem.submenu && menuItem.submenu.length > 0">
+          <li
+            v-for="(subItem, subIndex) in menuItem.submenu"
+            :key="`${index}-${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>
+        </template>
+        <!-- 否则，按原有逻辑渲染一级菜单或带子菜单的一级菜单 -->
         <li
-          v-else-if="!menuItem.submenu"
+          v-else-if="!menuItem.submenu || (menuItem.submenu && !isMobile)"
           @click.stop="handleItemClick(menuItem)"
+          v-show="!isMobile || !menuItem.submenu"
           :class="[
             'px-4 py-1.5 cursor-pointer text-foreground text-sm flex items-center transition-colors duration-150 rounded mx-1',
             menuItem.disabled
@@ -80,7 +101,7 @@ onUnmounted(() => {
           {{ menuItem.label }}
         </li>
         <li
-          v-else
+          v-if="menuItem.submenu && !isMobile"
           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()"