style(remote): 优化设备控制面板按钮样式为灰白极简风

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,33 +558,56 @@ 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"
+                    className="relative flex flex-col rounded-2xl overflow-hidden border-2 border-gray-300 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md transition-all cursor-pointer"
                   >
-                    <img
-                      src={screenshot || '/background.png'}
-                      alt="远程桌面"
-                      className="w-full aspect-video object-cover"
-                    />
+                    <div className="relative">
+                      <img
+                        src={screenshot || '/background.png'}
+                        alt="远程桌面"
+                        className="w-full aspect-video object-cover"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 py-2 bg-gradient-to-t from-black/50 to-transparent text-lg font-medium text-white text-center">
+                        远程桌面
+                      </div>
+                    </div>
                   </button>
 
                   <div className="grid grid-rows-2 gap-6">
                     <button
                       onClick={handleOpenGitRepo}
-                      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"
+                      className="flex flex-col items-center justify-center gap-2 text-lg bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-2xl shadow-sm hover:shadow-md transition-all font-medium text-gray-700 dark:text-gray-200"
                     >
-                      <GitBranch size={24} />
-                      Git 仓库
+                      <GitBranch size={28} className="text-gray-600 dark:text-gray-300" />
+                      <span>Git 仓库</span>
                     </button>
 
                     <button
                       onClick={handleOpenFileTransfer}
-                      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"
+                      className="flex flex-col items-center justify-center gap-2 text-lg bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-2xl shadow-sm hover:shadow-md transition-all font-medium text-gray-700 dark:text-gray-200"
                     >
-                      <Folder size={24} />
-                      文件传输
+                      <Folder size={28} className="text-gray-600 dark:text-gray-300" />
+                      <span>文件传输</span>
+                    </button>
+                  </div>
+
+                  <div className="grid grid-rows-2 gap-6">
+                    <button
+                      onClick={handleOpenCode}
+                      className="flex flex-col items-center justify-center gap-2 text-lg bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-2xl shadow-sm hover:shadow-md transition-all font-medium text-gray-700 dark:text-gray-200"
+                    >
+                      <Code size={28} className="text-gray-600 dark:text-gray-300" />
+                      <span>OpenCode</span>
+                    </button>
+
+                    <button
+                      onClick={handleOpenClaw}
+                      className="flex flex-col items-center justify-center gap-2 text-lg bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-2xl shadow-sm hover:shadow-md transition-all font-medium text-gray-700 dark:text-gray-200"
+                    >
+                      <Sparkles size={28} className="text-gray-600 dark:text-gray-300" />
+                      <span>OpenClaw</span>
                     </button>
                   </div>
                 </div>