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

This commit is contained in:
2026-03-08 15:38:38 +08:00
parent 1f104f73c8
commit 8f56ae89b9

View File

@@ -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>