feat(remote): 添加 OpenCode 和 OpenClaw 按钮到设备控制面板

src/modules/remote/RemotePage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
-import { Monitor, GitBranch, Settings, Plus, Trash2, GripVertical, Folder } from 'lucide-react'
+import { Monitor, GitBranch, Settings, Plus, Trash2, GripVertical, Folder, Code, Sparkles } from 'lucide-react'
 import { ConfigDialog } from './components/ConfigDialog'
 import { DeleteConfirmDialog } from '@/components/dialogs/DeleteConfirmDialog'
 import type { DeviceInfo, RemoteConfig, RemoteDevice } from './types'
@@ -193,6 +193,28 @@ export const RemotePage: React.FC = () => {
     selectFile(fileItem)
   }
 
+  const handleOpenCode = () => {
+    if (!selectedConfig?.serverHost) {
+      setShowConfig(true)
+      return
+    }
+    const url = `http://${selectedConfig.serverHost}:${selectedConfig.desktopPort}/opencode`
+    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
+    const fileItem = createRemoteDesktopFileItem(url, `OpenCode${deviceName}`, selectedConfig.deviceName)
+    selectFile(fileItem)
+  }
+
+  const handleOpenClaw = () => {
+    if (!selectedConfig?.serverHost) {
+      setShowConfig(true)
+      return
+    }
+    const url = `http://${selectedConfig.serverHost}:${selectedConfig.desktopPort}/openclaw`
+    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
+    const fileItem = createRemoteDesktopFileItem(url, `OpenClaw${deviceName}`, selectedConfig.deviceName)
+    selectFile(fileItem)
+  }
+
   const handleOpenConfig = () => {
     if (selectedConfig) {
       setEditingDevice(selectedConfig)
@@ -536,7 +558,7 @@ export const RemotePage: React.FC = () => {
               </div>
 
               <div className="mt-6 mb-4">
-                <div className="grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-8">
+                <div className="grid grid-cols-[2fr_1fr_1fr] gap-8">
                   <button
                     onClick={handleOpenRemoteDesktop}
                     className="rounded-lg overflow-hidden border border-gray-300/40 dark:border-gray-500/50 bg-gray-100/30 dark:bg-gray-800/30 hover:opacity-80 transition-opacity cursor-pointer"
@@ -565,6 +587,24 @@ export const RemotePage: React.FC = () => {
                       文件传输
                     </button>
                   </div>
+
+                  <div className="grid grid-rows-2 gap-6">
+                    <button
+                      onClick={handleOpenCode}
+                      className="flex items-center justify-center gap-2 text-2xl bg-gray-100/50 dark:bg-gray-700/40 hover:bg-gray-200/60 dark:hover:bg-gray-600/50 rounded-2xl shadow-md hover:shadow-xl transition-all font-medium text-gray-700 dark:text-gray-200 whitespace-nowrap"
+                    >
+                      <Code size={24} />
+                      OpenCode
+                    </button>
+
+                    <button
+                      onClick={handleOpenClaw}
+                      className="flex items-center justify-center gap-2 text-2xl bg-gray-100/50 dark:bg-gray-700/40 hover:bg-gray-200/60 dark:hover:bg-gray-600/50 rounded-2xl shadow-md hover:shadow-xl transition-all font-medium text-gray-700 dark:text-gray-200 whitespace-nowrap"
+                    >
+                      <Sparkles size={24} />
+                      OpenClaw
+                    </button>
+                  </div>
                 </div>
               </div>
               </div>