feat: 实现 OpenCode 页面生命周期管理 XCOpenCodeWeb.exe

- 新增 electron/services/xcOpenCodeWebService.ts 服务管理模块
- 标签页打开时启动 XCOpenCodeWeb.exe,关闭时停止
- 使用 iframe 在 OpenCode 页面显示 Web 服务 (端口 3002)
- 添加 bin 目录打包配置
- 添加 TypeScript 类型定义
This commit is contained in:
2026-03-13 20:55:34 +08:00
parent 53c1045406
commit 72d79ae214
7 changed files with 236 additions and 6 deletions

View File

@@ -1,11 +1,61 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
const XCOPENCODEWEB_PORT = 3002
export const OpenCodePage: React.FC = () => {
const [isRunning, setIsRunning] = useState(false)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
let mounted = true
const startService = async () => {
try {
const result = await window.electronAPI.xcOpenCodeWebStart()
if (mounted) {
if (result.success) {
setIsRunning(true)
setError(null)
} else {
setError(result.error || '启动失败')
}
}
} catch (err) {
if (mounted) {
setError(err instanceof Error ? err.message : '启动失败')
}
}
}
startService()
return () => {
mounted = false
window.electronAPI.xcOpenCodeWebStop()
setIsRunning(false)
}
}, [])
return (
<div className="max-w-4xl mx-auto w-full px-14 py-12 pb-40">
<h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-8 flex items-center gap-2">
OpenCode
</h1>
<div className="h-full w-full flex flex-col">
<div className="max-w-4xl mx-auto w-full px-14 py-4 flex items-center gap-4">
<h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200">
OpenCode
</h1>
<span className={`px-2 py-1 text-xs rounded ${isRunning ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>
{isRunning ? '运行中' : '启动中...'}
</span>
{error && (
<span className="text-red-500 text-sm">{error}</span>
)}
</div>
{isRunning && (
<iframe
src={`http://localhost:${XCOPENCODEWEB_PORT}`}
className="flex-1 w-full border-0"
title="XCOpenCodeWeb"
/>
)}
</div>
)
}