Initial commit

src/modules/remote/RemotePage.tsx

@@ -0,0 +1,602 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { Monitor, GitBranch, Settings, Plus, Trash2, GripVertical, Folder } from 'lucide-react'
+import { ConfigDialog } from './components/ConfigDialog'
+import { DeleteConfirmDialog } from '@/components/dialogs/DeleteConfirmDialog'
+import type { DeviceInfo, RemoteConfig, RemoteDevice } from './types'
+import { useTabContentContext, useScreenshot } from '@/stores'
+import { getRemoteConfig, saveRemoteConfig, getDeviceData } from './api'
+import type { FileItem } from '@/lib/api'
+
+const defaultConfig: RemoteConfig = {
+  devices: [],
+}
+
+const createRemoteDesktopFileItem = (url: string, title: string, deviceName?: string): FileItem => {
+  const id = deviceName ? `remote-${deviceName}` : 'remote-desktop'
+  return {
+    name: title,
+    path: `remote-desktop://${id}?url=${encodeURIComponent(url)}&device=${encodeURIComponent(deviceName || '')}`,
+    type: 'file' as const,
+    size: 0,
+    modified: new Date().toISOString(),
+  }
+}
+
+const createRemoteGitFileItem = (url: string, title: string, deviceName?: string): FileItem => {
+  const id = deviceName ? `remote-git-${deviceName}` : 'remote-git'
+  return {
+    name: title,
+    path: `remote-git://${id}?url=${encodeURIComponent(url)}&device=${encodeURIComponent(deviceName || '')}`,
+    type: 'file' as const,
+    size: 0,
+    modified: new Date().toISOString(),
+  }
+}
+
+const createEmptyDevice = (): RemoteDevice => ({
+  id: Date.now().toString(),
+  deviceName: '',
+  serverHost: '',
+  desktopPort: 3000,
+  gitPort: 3001,
+})
+
+export const RemotePage: React.FC = () => {
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null)
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
+  const [showConfig, setShowConfig] = useState(false)
+  const [config, setConfig] = useState<RemoteConfig>(defaultConfig)
+  const [loading, setLoading] = useState(true)
+  const [editingDevice, setEditingDevice] = useState<RemoteDevice | null>(null)
+  const [deviceLastConnected, setDeviceLastConnected] = useState<Record<string, string>>({})
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [deletingDeviceId, setDeletingDeviceId] = useState<string | null>(null)
+
+  // 自定义拖拽状态
+  const dragRef = useRef<{
+    isDragging: boolean
+    startY: number
+    startIndex: number
+    currentIndex: number
+    listRect: DOMRect | null
+    itemRects: DOMRect[]
+  }>({
+    isDragging: false,
+    startY: 0,
+    startIndex: -1,
+    currentIndex: -1,
+    listRect: null,
+    itemRects: [],
+  })
+  const listContainerRef = useRef<HTMLDivElement>(null)
+
+  const { selectFile } = useTabContentContext()
+  const { screenshot, lastConnected, loadScreenshots } = useScreenshot()
+
+  const selectedConfig = config.devices.find(d => d.id === selectedDeviceId) || null
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const savedConfig = await getRemoteConfig()
+        const configWithDevices = savedConfig.devices ? savedConfig : { devices: [] }
+        setConfig(configWithDevices)
+        if (configWithDevices.devices.length > 0 && !selectedDeviceId) {
+          setSelectedDeviceId(configWithDevices.devices[0].id)
+        }
+        // 加载所有设备的最后连接时间
+        const newData: Record<string, string> = {}
+        for (const device of configWithDevices.devices) {
+          if (device.deviceName) {
+            try {
+              const data = await getDeviceData(device.deviceName)
+              if (data?.lastConnected) {
+                newData[device.deviceName] = data.lastConnected
+              }
+            } catch (err) {
+              console.error('Failed to load device data:', err)
+            }
+          }
+        }
+        setDeviceLastConnected(newData)
+      } catch (err) {
+        console.error('Failed to load remote config:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    init()
+  }, [])
+
+  useEffect(() => {
+    if (selectedConfig?.deviceName) {
+      loadScreenshots(selectedConfig.deviceName)
+    }
+  }, [selectedDeviceId, selectedConfig?.deviceName, loadScreenshots])
+
+  // 当全局 lastConnected 更新时，同步更新 deviceLastConnected
+  useEffect(() => {
+    if (selectedConfig?.deviceName) {
+      setDeviceLastConnected(prev => ({
+        ...prev,
+        [selectedConfig.deviceName]: lastConnected
+      }))
+    }
+  }, [lastConnected, selectedConfig?.deviceName])
+
+  // 当设备列表变化时，加载新增设备的最后连接时间
+  useEffect(() => {
+    const loadNewDevices = async () => {
+      for (const device of config.devices) {
+        if (device.deviceName && !deviceLastConnected[device.deviceName]) {
+          try {
+            const data = await getDeviceData(device.deviceName)
+            if (data?.lastConnected) {
+              setDeviceLastConnected(prev => ({
+                ...prev,
+                [device.deviceName]: data.lastConnected
+              }))
+            }
+          } catch (err) {
+            console.error('Failed to load device data:', err)
+          }
+        }
+      }
+    }
+    if (!loading) {
+      loadNewDevices()
+    }
+  }, [config.devices, loading, deviceLastConnected])
+
+  const devices: DeviceInfo[] = (config.devices || []).map(device => ({
+    id: device.id,
+    name: device.deviceName,
+    status: device.serverHost ? 'online' as const : 'offline' as const,
+    lastConnected: deviceLastConnected[device.deviceName] || '-',
+  }))
+
+  const selectedDevice = devices.find(device => device.id === selectedDeviceId) || null
+
+  const existingDeviceNames = config.devices.map(d => d.deviceName)
+
+  const handleOpenRemoteDesktop = () => {
+    if (!selectedConfig?.serverHost) {
+      setShowConfig(true)
+      return
+    }
+    const url = `http://${selectedConfig.serverHost}:${selectedConfig.desktopPort}`
+    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
+    const fileItem = createRemoteDesktopFileItem(url, `远程桌面${deviceName}`, selectedConfig.deviceName)
+    selectFile(fileItem)
+  }
+
+  const handleOpenGitRepo = () => {
+    if (!selectedConfig?.serverHost) {
+      setShowConfig(true)
+      return
+    }
+    const url = `http://${selectedConfig.serverHost}:${selectedConfig.gitPort}`
+    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
+    const fileItem = createRemoteGitFileItem(url, `远程 Git 仓库${deviceName}`, selectedConfig.deviceName)
+    selectFile(fileItem)
+  }
+
+  const handleOpenFileTransfer = () => {
+    if (!selectedConfig?.serverHost) {
+      setShowConfig(true)
+      return
+    }
+    const url = `http://${selectedConfig.serverHost}:${selectedConfig.desktopPort}/files`
+    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
+    const fileItem = createRemoteDesktopFileItem(url, `文件传输${deviceName}`, selectedConfig.deviceName)
+    selectFile(fileItem)
+  }
+
+  const handleOpenConfig = () => {
+    if (selectedConfig) {
+      setEditingDevice(selectedConfig)
+    } else {
+      setEditingDevice(createEmptyDevice())
+    }
+    setShowConfig(true)
+  }
+
+  const handleCloseConfig = () => {
+    setShowConfig(false)
+    setEditingDevice(null)
+  }
+
+  const handleSaveConfig = useCallback(async (device: RemoteDevice) => {
+    const existingIndex = config.devices.findIndex(d => d.id === device.id)
+    let newDevices: RemoteDevice[]
+    if (existingIndex >= 0) {
+      newDevices = [...config.devices]
+      newDevices[existingIndex] = device
+    } else {
+      newDevices = [...config.devices, device]
+    }
+    const newConfig = { devices: newDevices }
+    try {
+      await saveRemoteConfig(newConfig)
+      setConfig(newConfig)
+      setSelectedDeviceId(device.id)
+    } catch (err) {
+      console.error('Failed to save config:', err)
+    }
+    setShowConfig(false)
+    setEditingDevice(null)
+  }, [config.devices])
+
+  const handleAddDevice = () => {
+    setEditingDevice(createEmptyDevice())
+    setShowConfig(true)
+  }
+
+  const handleDeleteDevice = (deviceId: string) => {
+    setDeletingDeviceId(deviceId)
+    setDeleteDialogOpen(true)
+  }
+
+  const handleDeleteConfirm = async () => {
+    if (!deletingDeviceId) return
+    const newDevices = config.devices.filter(d => d.id !== deletingDeviceId)
+    const newConfig = { devices: newDevices }
+    try {
+      await saveRemoteConfig(newConfig)
+      setConfig(newConfig)
+      if (selectedDeviceId === deletingDeviceId) {
+        setSelectedDeviceId(newDevices.length > 0 ? newDevices[0].id : null)
+      }
+    } catch (err) {
+      console.error('Failed to delete device:', err)
+    }
+    setDeleteDialogOpen(false)
+    setDeletingDeviceId(null)
+  }
+
+  const handleDeleteCancel = () => {
+    setDeleteDialogOpen(false)
+    setDeletingDeviceId(null)
+  }
+
+  // 自定义拖拽处理 - 元素跟随鼠标移动 + 实时重排
+  const handleMouseDown = (e: React.MouseEvent, index: number) => {
+    // 只允许左键拖拽
+    if (e.button !== 0) return
+
+    // 阻止默认选择行为
+    e.preventDefault()
+    e.stopPropagation()
+
+    const listContainer = listContainerRef.current
+    if (!listContainer) return
+
+    const listRect = listContainer.getBoundingClientRect()
+
+    // 获取被拖动元素的引用
+    const listContent = listContainer.querySelector('[data-drag-list]')
+    const items = listContent?.querySelectorAll('[data-drag-item]') as NodeListOf<HTMLElement> | undefined
+    const draggedElement = items?.[index]
+
+    dragRef.current = {
+      isDragging: true,
+      startY: e.clientY,
+      startIndex: index,
+      currentIndex: index,
+      listRect,
+      itemRects: [],
+    }
+
+    setDragIndex(index)
+    setDragOverIndex(index)
+
+    // 直接操作DOM实现流畅拖动
+    if (draggedElement) {
+      draggedElement.style.position = 'relative'
+      draggedElement.style.zIndex = '100'
+      draggedElement.style.transition = 'none'
+    }
+
+    // 添加全局鼠标事件
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    const drag = dragRef.current
+    if (!drag.isDragging || !drag.listRect) return
+
+    const { listRect, startIndex } = drag
+
+    // 检测鼠标是否在列表区域内
+    const isInListArea =
+      e.clientX >= listRect.left &&
+      e.clientX <= listRect.right &&
+      e.clientY >= listRect.top &&
+      e.clientY <= listRect.bottom
+
+    // 如果鼠标移出列表区域，取消拖拽
+    if (!isInListArea) {
+      handleMouseUp(e)
+      return
+    }
+
+    // 直接修改DOM实现流畅移动
+    const listContent = listContainerRef.current?.querySelector('[data-drag-list]')
+    const items = listContent?.querySelectorAll('[data-drag-item]') as NodeListOf<HTMLElement> | undefined
+    const draggedElement = items?.[drag.startIndex]
+
+    // 计算被拖动元素的偏移
+    const deltaY = e.clientY - drag.startY
+
+    if (draggedElement) {
+      draggedElement.style.transform = `translateY(${deltaY}px)`
+    }
+
+    const mouseY = e.clientY
+
+    // 简单计算：基于鼠标在列表中的相对位置，加24px偏移使落点在缝隙中间
+    const relativeY = mouseY - listRect.top - 8
+    let newIndex = Math.floor(relativeY / 48) - 1
+    newIndex = Math.max(0, Math.min(newIndex, devices.length - 1))
+
+    // 限制newIndex范围
+    if (newIndex < 0) newIndex = 0
+    if (newIndex >= devices.length) newIndex = devices.length - 1
+
+    drag.currentIndex = newIndex
+    setDragOverIndex(newIndex)
+
+    // 直接操作其他元素DOM实现重排（去掉transition）
+    if (items) {
+      const itemHeight = 48
+      items.forEach((item, i) => {
+        if (i === drag.startIndex) return // 跳过被拖动的元素
+
+        let transform = ''
+        if (drag.startIndex < newIndex) {
+          // 从上面拖到下面：原位置到目标位置之间的元素向上移动
+          if (i > drag.startIndex && i <= newIndex) {
+            transform = `translateY(-${itemHeight}px)`
+          }
+        } else if (drag.startIndex > newIndex) {
+          // 从下面拖到上面：目标位置到原位置之间的元素向下移动
+          if (i >= newIndex && i < drag.startIndex) {
+            transform = `translateY(${itemHeight}px)`
+          }
+        }
+        item.style.transform = transform
+      })
+    }
+  }
+
+  const handleMouseUp = async (e: MouseEvent) => {
+    const drag = dragRef.current
+    if (!drag.isDragging) return
+
+    drag.isDragging = false
+
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+
+    // 清理所有元素的样式
+    const listContent = listContainerRef.current?.querySelector('[data-drag-list]')
+    const items = listContent?.querySelectorAll('[data-drag-item]') as NodeListOf<HTMLElement> | undefined
+    items?.forEach(item => {
+      item.style.transform = ''
+      item.style.position = ''
+      item.style.zIndex = ''
+      item.style.transition = ''
+    })
+    const draggedElement = items?.[drag.startIndex]
+    if (draggedElement) {
+      draggedElement.style.transform = ''
+      draggedElement.style.position = ''
+      draggedElement.style.zIndex = ''
+    }
+
+    const { startIndex, currentIndex } = drag
+
+    setDragIndex(null)
+    setDragOverIndex(null)
+
+    // 如果位置发生变化，保存新顺序
+    if (startIndex !== currentIndex && currentIndex >= 0) {
+      const newDevices = [...config.devices]
+      const [movedItem] = newDevices.splice(startIndex, 1)
+      newDevices.splice(currentIndex, 0, movedItem)
+
+      const newConfig = { devices: newDevices }
+
+      try {
+        await saveRemoteConfig(newConfig)
+        setConfig(newConfig)
+      } catch (err) {
+        console.error('Failed to save reordered config:', err)
+      }
+    }
+
+    dragRef.current = {
+      isDragging: false,
+      startY: 0,
+      startIndex: -1,
+      currentIndex: -1,
+      listRect: null,
+      itemRects: [],
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-gray-500 dark:text-gray-400">加载中...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="pl-12 pt-6 pb-4 shrink-0">
+        <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2 whitespace-nowrap">
+          <Monitor className="w-8 h-8 shrink-0" />
+          远程
+        </h1>
+      </div>
+
+      <div className="flex-1 flex px-0 -ml-4">
+        <div className="absolute left-60 top-[88px] bottom-16 w-px bg-gray-300/40 dark:bg-gray-500/50" />
+        <div
+          ref={listContainerRef}
+          className="w-56 shrink-0 pr-4 overflow-hidden select-none"
+        >
+          <button
+            onClick={handleAddDevice}
+            className="w-full flex items-center gap-2 px-3 py-3 rounded-lg cursor-pointer transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-700/40 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+          >
+            <Plus size={16} className="shrink-0" />
+            <span className="text-base truncate">添加设备</span>
+          </button>
+          <div data-drag-list className="space-y-2 w-full relative mt-2">
+            {devices.map((device, index) => {
+              const isSelected = selectedDeviceId === device.id
+              const isDragging = dragIndex === index
+
+              return (
+                <div
+                  key={device.id}
+                  data-drag-item
+                  className={`group flex items-center gap-2 px-3 py-3 rounded-lg transition-all w-full max-w-full ${
+                    isSelected
+                      ? 'bg-gray-100/50 dark:bg-gray-700/40'
+                      : 'hover:bg-gray-100/30 dark:hover:bg-gray-700/20'
+                  } ${isDragging ? 'opacity-90' : ''}`}
+                  onClick={() => dragIndex === null && setSelectedDeviceId(device.id)}
+                >
+                  <span
+                    onMouseDown={(e) => handleMouseDown(e, index)}
+                    className="cursor-grab active:cursor-grabbing p-0.5 hover:bg-gray-200/50 dark:hover:bg-gray-600/50 rounded"
+                  >
+                    <GripVertical size={14} className="text-gray-400 shrink-0" />
+                  </span>
+                  <span
+                    className={`w-2 h-2 rounded-full shrink-0 ${device.status === 'online' ? 'bg-green-500' : 'bg-gray-400'
+                      }`}
+                  />
+                  <span className="text-base text-gray-700 dark:text-gray-300 truncate flex-1">
+                    {device.name || '未命名设备'}
+                  </span>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleDeleteDevice(device.id)
+                    }}
+                    className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-all"
+                  >
+                    <Trash2 size={14} className="text-red-500" />
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+
+          {devices.length === 0 && (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400 text-sm">
+              暂无设备，点击上方添加
+            </div>
+          )}
+        </div>
+
+        <div className="flex-1 pl-8 -mt-10 min-w-[400px] overflow-auto pb-6">
+          {selectedDevice && selectedConfig ? (
+            <div className="flex flex-col">
+              <div className="flex items-center justify-between py-0 px-4 shrink-0 border-b border-gray-300/40 dark:border-gray-500/50">
+                <div className="flex items-center gap-4">
+                  <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 whitespace-nowrap">
+                    {selectedDevice.name || '未命名设备'}
+                  </h2>
+                  <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <span className="flex items-center gap-1">
+                      <span
+                        className={`w-1.5 h-1.5 rounded-full ${selectedDevice.status === 'online' ? 'bg-green-500' : 'bg-gray-400'
+                          }`}
+                      />
+                      {selectedDevice.status === 'online' ? '在线' : '离线'}
+                    </span>
+                    <span>最后连接：{selectedDevice.lastConnected}</span>
+                  </div>
+                </div>
+                <button
+                  onClick={handleOpenConfig}
+                  className="p-2 rounded-lg transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-700/40 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                  title="配置"
+                >
+                  <Settings size={18} />
+                </button>
+              </div>
+
+              <div className="mt-6 mb-4">
+                <div className="grid grid-cols-1 md:grid-cols-[2fr_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"
+                  >
+                    <img
+                      src={screenshot || '/background.png'}
+                      alt="远程桌面"
+                      className="w-full aspect-video object-cover"
+                    />
+                  </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"
+                    >
+                      <GitBranch size={24} />
+                      Git 仓库
+                    </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"
+                    >
+                      <Folder size={24} />
+                      文件传输
+                    </button>
+                  </div>
+                </div>
+              </div>
+              </div>
+            ) : (
+              <div className="h-full flex items-center justify-center text-gray-500 dark:text-gray-400">
+                请选择设备
+              </div>
+            )}
+          </div>
+
+        {editingDevice && (
+          <ConfigDialog
+            isOpen={showConfig}
+            onClose={handleCloseConfig}
+            config={editingDevice}
+            onSave={handleSaveConfig}
+            existingDeviceNames={existingDeviceNames.filter(name => name !== editingDevice.deviceName)}
+            isEdit={!!config.devices.find(d => d.id === editingDevice.id)}
+          />
+        )}
+
+        {deletingDeviceId && (
+          <DeleteConfirmDialog
+            isOpen={deleteDialogOpen}
+            title="删除设备"
+            message={`确定要删除设备 "${config.devices.find(d => d.id === deletingDeviceId)?.deviceName || '未命名设备'}" 吗？`}
+            expectedText="DELETE DEVICE"
+            onConfirm={handleDeleteConfirm}
+            onCancel={handleDeleteCancel}
+          />
+        )}
+      </div>
+    </div>
+  )
+}