113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
import { useCallback, useEffect, useState } from "react"
|
|
|
|
import { ConnectView } from "~/components/app/connect-view"
|
|
import { WorkspaceShell } from "~/components/app/workspace-shell"
|
|
import { Button } from "~/components/ui/button"
|
|
import { getServiceStatus, isElectron, startService } from "~/lib/electron"
|
|
import type { ServiceStatus } from "~/lib/electron"
|
|
import { SERVER_ROOT_PATH } from "~/lib/tfs/session"
|
|
import type { WorkspaceSession } from "~/lib/tfs/session"
|
|
|
|
// 顶层视图状态：检测服务、服务未就绪、连接入口、已进入工作台。
|
|
type AppPhase = "checking" | "blocked" | "connect" | "workspace"
|
|
|
|
/**
|
|
* 第一版前端入口：先确保本地服务就绪，再走连接 / Collection / Workspace 流程，
|
|
* 进入工作台后持有固定上下文，并统一维护左树与中间列表共享的当前路径（FE-004）。
|
|
*/
|
|
export default function Home() {
|
|
const [phase, setPhase] = useState<AppPhase>("checking")
|
|
const [status, setStatus] = useState<ServiceStatus | null>(null)
|
|
const [session, setSession] = useState<WorkspaceSession | null>(null)
|
|
const [selectedServerPath, setSelectedServerPath] = useState(SERVER_ROOT_PATH)
|
|
|
|
/**
|
|
* 检测本地服务，未就绪时在 Electron 环境下尝试自动拉起。
|
|
*/
|
|
const bootstrap = useCallback(async () => {
|
|
setPhase("checking")
|
|
let next = await getServiceStatus()
|
|
if (!next.running && isElectron()) {
|
|
next = await startService()
|
|
}
|
|
setStatus(next)
|
|
setPhase(next.running ? "connect" : "blocked")
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
void bootstrap()
|
|
}, [bootstrap])
|
|
|
|
/**
|
|
* 连接流程完成后固定上下文并进入工作台，当前路径重置到根目录。
|
|
*/
|
|
const handleReady = useCallback((next: WorkspaceSession) => {
|
|
setSession(next)
|
|
setSelectedServerPath(SERVER_ROOT_PATH)
|
|
setPhase("workspace")
|
|
}, [])
|
|
|
|
/**
|
|
* 从工作台返回连接入口，重新走连接流程。
|
|
*/
|
|
const handleReconnect = useCallback(() => {
|
|
setSession(null)
|
|
setPhase("connect")
|
|
}, [])
|
|
|
|
/**
|
|
* 同步导航：左侧树与中间列表共用的当前服务端路径变更入口。
|
|
*/
|
|
const handleNavigate = useCallback((serverPath: string) => {
|
|
setSelectedServerPath(serverPath)
|
|
}, [])
|
|
|
|
/**
|
|
* Mapping 创建 / 取消后更新固定上下文中的映射列表，浏览位置保持不变。
|
|
*/
|
|
const handleMappingsChanged = useCallback((mappings: WorkspaceSession["mappings"]) => {
|
|
setSession((prev) => (prev ? { ...prev, mappings } : prev))
|
|
}, [])
|
|
|
|
if (phase === "workspace" && session) {
|
|
return (
|
|
<WorkspaceShell
|
|
session={session}
|
|
selectedServerPath={selectedServerPath}
|
|
onNavigate={handleNavigate}
|
|
onMappingsChanged={handleMappingsChanged}
|
|
onReconnect={handleReconnect}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (phase === "connect") {
|
|
return <ConnectView onReady={handleReady} />
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-svh items-center justify-center bg-muted/40 p-6">
|
|
<div className="w-full max-w-md rounded-lg border bg-background p-6 shadow-sm">
|
|
<h1 className="text-base font-semibold">macTFS</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">本地源码管理工作台</p>
|
|
|
|
{phase === "checking" && (
|
|
<p className="mt-4 text-sm text-muted-foreground">正在检查本地服务…</p>
|
|
)}
|
|
|
|
{phase === "blocked" && (
|
|
<div className="mt-4 space-y-3 text-sm">
|
|
<p className="font-medium text-destructive">本地服务未就绪</p>
|
|
<p className="text-muted-foreground">
|
|
{status?.error ?? "无法连接本地 API 服务"}
|
|
</p>
|
|
<Button size="sm" onClick={() => void bootstrap()}>
|
|
重试连接
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|