feat: add name sorting options to context menu

README.md

@@ -1,4 +1,4 @@
-# windows-ui
+# windows-ui  
 
 ![介绍](https://raw.githubusercontent.com/yuumigift/windows-ui/master/public/img/intro.png)
 

package.json

@@ -36,5 +36,8 @@
     "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.6.1",
     "vue-tsc": "^2.1.10"
+  },
+  "volta": {
+    "node": "20.20.0"
   }
 }

src/components/system/ContextMenu/Index.vue

@@ -12,10 +12,15 @@
             <span>查看</span>
             <span class="arrow">▶</span>
         </div>
-        <div class="menu-item" @click="handleMenuClick('sort')">
+        <div class="menu-item has-submenu">
             <span class="menu-icon">📊</span>
             <span>排序方式</span>
             <span class="arrow">▶</span>
+            <div class="submenu">
+                <div class="submenu-item" @click.stop="handleMenuClick('sort-default')">默认排序</div>
+                <div class="submenu-item" @click.stop="handleMenuClick('sort-name-asc')">按名称升序</div>
+                <div class="submenu-item" @click.stop="handleMenuClick('sort-name-desc')">按名称降序</div>
+            </div>
         </div>
         <div class="menu-item" @click="handleMenuClick('refresh')">
             <span class="menu-icon">🔄</span>
@@ -146,4 +151,38 @@
         background: rgba(0, 0, 0, 0.1);
         margin: 4px 0;
     }
+
+    .has-submenu {
+        position: relative;
+
+        .submenu {
+            position: absolute;
+            top: 0;
+            left: 100%;
+            min-width: 160px;
+            background: rgba(255,255,255,0.98);
+            border: 1px solid rgba(0,0,0,0.06);
+            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+            border-radius: 6px;
+            display: none;
+            z-index: 1001;
+            padding: 6px 0;
+        }
+
+        &:hover {
+            .submenu {
+                display: block;
+            }
+        }
+
+        .submenu-item {
+            padding: 8px 12px;
+            cursor: pointer;
+            white-space: nowrap;
+
+            &:hover {
+                background: rgba(0,0,0,0.04);
+            }
+        }
+    }
 </style>

src/views/HomeView.vue

@@ -36,6 +36,8 @@
   import { Task, App } from "@/system";
 
   const contextMenu = ref();
+  const sortMode = ref('');
+  const originalAppOrder = [...App.list];
 
   const handleContextMenu = (event: MouseEvent) => {
     // 阻止在窗口和图标上显示右键菜单
@@ -53,8 +55,25 @@
 
   const handleMenuClick = (action: string) => {
     console.log('菜单点击:', action);
-
     switch (action) {
+      case 'sort-default': {
+        sortMode.value = '';
+        App.list.splice(0, App.list.length, ...originalAppOrder);
+        console.log('恢复默认排序');
+        break;
+      }
+      case 'sort-name-asc': {
+        sortMode.value = 'name-asc';
+        App.list.sort((a: any, b: any) => a.title.localeCompare(b.title, 'zh-CN'));
+        console.log('按名称升序排序');
+        break;
+      }
+      case 'sort-name-desc': {
+        sortMode.value = 'name-desc';
+        App.list.sort((a: any, b: any) => b.title.localeCompare(a.title, 'zh-CN'));
+        console.log('按名称降序排序');
+        break;
+      }
       case 'refresh':
         // 刷新桌面
         console.log('刷新桌面');