1380 lines
46 KiB
TypeScript
1380 lines
46 KiB
TypeScript
import React, {
|
||
useState,
|
||
useEffect,
|
||
useRef,
|
||
useMemo,
|
||
useCallback,
|
||
createContext,
|
||
useContext,
|
||
} from "react";
|
||
import {
|
||
ConfigProvider,
|
||
Menu,
|
||
Badge,
|
||
Spin,
|
||
Button,
|
||
notification,
|
||
message,
|
||
} from "antd";
|
||
import type { PresetStatusColorType } from "antd/es/_util/colors";
|
||
import {
|
||
SettingOutlined,
|
||
DashboardOutlined,
|
||
FolderOutlined,
|
||
InfoCircleOutlined,
|
||
SafetyOutlined,
|
||
FileTextOutlined,
|
||
TeamOutlined,
|
||
ArrowLeftOutlined,
|
||
ReloadOutlined,
|
||
ApiOutlined,
|
||
} from "@ant-design/icons";
|
||
import {
|
||
setupService,
|
||
authService,
|
||
Step1Config,
|
||
DEFAULT_STEP1_CONFIG,
|
||
} from "./services/core/setup";
|
||
import {
|
||
syncConfigToServer,
|
||
normalizeServerHost,
|
||
loginAndRegister,
|
||
} from "./services/core/auth";
|
||
import {
|
||
APP_DISPLAY_NAME,
|
||
AUTH_KEYS,
|
||
normalizeAgentEngine,
|
||
} from "@shared/constants";
|
||
import type { QuickInitConfig } from "@shared/types/quickInit";
|
||
import type { UpdateState } from "@shared/types/updateTypes";
|
||
import { t, getCurrentLang } from "./services/core/i18n";
|
||
import SetupWizard from "./components/setup/SetupWizard";
|
||
import SetupDependencies from "./components/setup/SetupDependencies";
|
||
import ClientPage from "./components/pages/ClientPage";
|
||
import SettingsPage from "./components/pages/SettingsPage";
|
||
import DependenciesPage from "./components/pages/DependenciesPage";
|
||
import AboutPage from "./components/pages/AboutPage";
|
||
import LogViewer from "./components/pages/LogViewer";
|
||
import PermissionsPage from "./components/pages/PermissionsPage";
|
||
import SessionsPage from "./components/pages/SessionsPage";
|
||
import MCPSettings from "./components/settings/MCPSettings";
|
||
import type { WebviewHeaderActions } from "./components/pages/SessionsPage";
|
||
import { createLogger } from "./services/utils/rendererLog";
|
||
import styles from "./styles/components/App.module.css";
|
||
import { lightTheme, darkTheme } from "./styles/theme";
|
||
import { FEATURES } from "@shared/featureFlags";
|
||
|
||
// 主题类型
|
||
export type ThemeMode = "light" | "dark" | "system";
|
||
|
||
// 主题 Context
|
||
interface ThemeContextValue {
|
||
themeMode: ThemeMode;
|
||
isDarkMode: boolean;
|
||
setThemeMode: (mode: ThemeMode) => void;
|
||
}
|
||
|
||
export const ThemeContext = createContext<ThemeContextValue | null>(null);
|
||
|
||
// Hook to use theme context
|
||
export function useTheme(): ThemeContextValue {
|
||
const context = useContext(ThemeContext);
|
||
if (!context) {
|
||
throw new Error("useTheme must be used within App component");
|
||
}
|
||
return context;
|
||
}
|
||
|
||
// i18n 语言 Context
|
||
interface I18nContextValue {
|
||
lang: string;
|
||
updateLang: (lang: string) => void;
|
||
}
|
||
|
||
export const I18nContext = createContext<I18nContextValue | null>(null);
|
||
|
||
export function useI18nLang(): I18nContextValue {
|
||
const context = useContext(I18nContext);
|
||
if (!context) {
|
||
throw new Error("useI18nLang must be used within App component");
|
||
}
|
||
return context;
|
||
}
|
||
|
||
// Tab 类型定义（对齐 Tauri 客户端）
|
||
type TabKey =
|
||
| "client"
|
||
| "sessions"
|
||
| "mcp"
|
||
| "settings"
|
||
| "dependencies"
|
||
| "permissions"
|
||
| "logs"
|
||
| "about"
|
||
| "model";
|
||
|
||
// 状态配置（对齐 Tauri 客户端）
|
||
// 就绪、繁忙使用橙色（warning）、小点展示
|
||
const STATUS_CONFIG: Record<
|
||
string,
|
||
{ status: PresetStatusColorType; textKey: string }
|
||
> = {
|
||
idle: { status: "warning", textKey: "Claw.Agent.Status.idle" },
|
||
starting: { status: "processing", textKey: "Claw.Agent.Status.starting" },
|
||
running: { status: "success", textKey: "Claw.Agent.Status.running" },
|
||
busy: { status: "warning", textKey: "Claw.Agent.Status.busy" },
|
||
stopped: { status: "default", textKey: "Claw.Agent.Status.stopped" },
|
||
error: { status: "error", textKey: "Claw.Agent.Status.error" },
|
||
};
|
||
|
||
/** macOS/Linux 无 download-progress 时，header tag 用本地模拟进度避免长期显示 0%。 */
|
||
const HEADER_SIMULATED_PROGRESS_CAP = 90;
|
||
const HEADER_SIMULATED_PROGRESS_INTERVAL_MS = 500;
|
||
const HEADER_SIMULATED_DURATION_MS = 45_000;
|
||
|
||
// 服务状态接口（与 ClientPage 共享）
|
||
export interface ServiceItem {
|
||
key: string;
|
||
label: string;
|
||
description: string;
|
||
running: boolean;
|
||
pid?: number;
|
||
port?: number;
|
||
error?: string;
|
||
}
|
||
|
||
/**
|
||
* 将 quick init 配置静默写入 DB（覆盖旧值）
|
||
* 用于 setup 已完成时，每次启动优先使用配置文件/环境变量中的值
|
||
*/
|
||
async function applyQuickInitToDb(config: QuickInitConfig): Promise<void> {
|
||
// 1. 更新 step1 配置
|
||
const step1: Step1Config = {
|
||
...DEFAULT_STEP1_CONFIG,
|
||
serverHost: normalizeServerHost(config.serverHost),
|
||
agentPort: config.agentPort,
|
||
fileServerPort: config.fileServerPort,
|
||
workspaceDir: config.workspaceDir,
|
||
};
|
||
await setupService.saveStep1Config(step1);
|
||
|
||
// 2. 更新 savedKey
|
||
const domain = normalizeServerHost(config.serverHost);
|
||
await window.electronAPI?.settings.set(AUTH_KEYS.SAVED_KEY, config.savedKey);
|
||
if (config.username) {
|
||
try {
|
||
const domainKey = `${AUTH_KEYS.SAVED_KEYS_PREFIX}${new URL(domain).hostname}_${config.username}`;
|
||
await window.electronAPI?.settings.set(domainKey, config.savedKey);
|
||
} catch {
|
||
// domain 解析失败时跳过域名级 savedKey 存储
|
||
}
|
||
}
|
||
|
||
// 3. 静默重新注册（更新服务端设备信息）
|
||
try {
|
||
await loginAndRegister(config.username, "", {
|
||
suppressToast: true,
|
||
domain,
|
||
});
|
||
} catch (error) {
|
||
// 注册失败不阻塞启动，已有的 auth 信息仍可用
|
||
console.warn("[App] Quick init silent registration failed:", error);
|
||
}
|
||
}
|
||
|
||
function App() {
|
||
// ============================================
|
||
// 初始化向导状态
|
||
// ============================================
|
||
const [isSetupComplete, setIsSetupComplete] = useState<boolean | null>(null);
|
||
const setupJustCompleted = useRef(false);
|
||
// 内存变量：标记服务是否由登录流程启动（不持久化）
|
||
const loginStartedRef = useRef(false);
|
||
|
||
// ============================================
|
||
// 主题状态
|
||
// ============================================
|
||
const [themeMode, setThemeMode] = useState<ThemeMode>("system");
|
||
const [systemIsDark, setSystemIsDark] = useState(false);
|
||
|
||
// 计算实际使用的主题
|
||
const isDarkMode = useMemo(() => {
|
||
if (themeMode === "system") {
|
||
return systemIsDark;
|
||
}
|
||
return themeMode === "dark";
|
||
}, [themeMode, systemIsDark]);
|
||
|
||
const currentTheme = useMemo(
|
||
() => (isDarkMode ? darkTheme : lightTheme),
|
||
[isDarkMode],
|
||
);
|
||
|
||
// ============================================
|
||
// i18n 语言状态（响应式，供 Context 下发）
|
||
// ============================================
|
||
const [i18nLang, setI18nLang] = useState(getCurrentLang());
|
||
const handleI18nLangChange = useCallback((lang: string) => {
|
||
setI18nLang(lang);
|
||
}, []);
|
||
|
||
// 监听系统主题变化
|
||
useEffect(() => {
|
||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||
setSystemIsDark(mediaQuery.matches);
|
||
|
||
const handler = (e: MediaQueryListEvent) => setSystemIsDark(e.matches);
|
||
mediaQuery.addEventListener("change", handler);
|
||
return () => mediaQuery.removeEventListener("change", handler);
|
||
}, []);
|
||
|
||
// 加载保存的主题设置
|
||
useEffect(() => {
|
||
const loadThemeSetting = async () => {
|
||
try {
|
||
const saved = (await window.electronAPI?.settings.get(
|
||
"theme_mode",
|
||
)) as ThemeMode | null;
|
||
if (saved && ["light", "dark", "system"].includes(saved)) {
|
||
setThemeMode(saved);
|
||
}
|
||
} catch (e) {
|
||
console.warn("[App] Failed to load theme settings:", e);
|
||
}
|
||
};
|
||
loadThemeSetting();
|
||
}, []);
|
||
|
||
// 保存主题设置
|
||
const handleSetThemeMode = useCallback(async (mode: ThemeMode) => {
|
||
setThemeMode(mode);
|
||
try {
|
||
await window.electronAPI?.settings.set("theme_mode", mode);
|
||
} catch (e) {
|
||
console.warn("[App] Failed to save theme settings:", e);
|
||
}
|
||
}, []);
|
||
|
||
// 应用主题到 body
|
||
useEffect(() => {
|
||
document.body.setAttribute("data-theme", isDarkMode ? "dark" : "light");
|
||
}, [isDarkMode]);
|
||
|
||
/**
|
||
* 主界面下「必需依赖未完全安装」时是否强制进入依赖安装流程。
|
||
* - null: 进入主界面后尚未完成检查
|
||
* - true: 存在 missing/error 的必需依赖，全屏显示依赖安装，完成后回到主界面
|
||
* - false: 必需依赖均已安装（含 outdated，以当前真实安装版本为准，不强制重装）
|
||
*/
|
||
const [needsRequiredDepsReinstall, setNeedsRequiredDepsReinstall] = useState<
|
||
boolean | null
|
||
>(null);
|
||
/** 主进程初始化依赖同步是否仍在进行（客户端升级后后台安装新版本依赖） */
|
||
const [depsSyncInProgress, setDepsSyncInProgress] = useState<boolean>(false);
|
||
|
||
// 启动日志：便于快速确认渲染进程 feature flags 是否生效
|
||
useEffect(() => {
|
||
console.info("[FeatureFlags][renderer]", FEATURES);
|
||
window.electronAPI?.log
|
||
.write("info", "[FeatureFlags][renderer]", FEATURES)
|
||
.catch(() => {});
|
||
}, []);
|
||
|
||
/**
|
||
* 重启所有服务（使新安装的依赖/二进制生效）。
|
||
* restartAll 内部已包含停止逻辑，无需额外调用 stopAll。
|
||
*
|
||
* 重启前先调 reg 接口，将本次返回的最新 serverHost/serverPort 写入配置，
|
||
* 确保 lanproxy 使用最新服务端地址，而不是 SQLite 里的旧缓存值。
|
||
*/
|
||
const restartAllServices = useCallback(async () => {
|
||
try {
|
||
// 先 reg 拿最新 serverHost/serverPort 写入配置，成功后再重启服务。
|
||
// reg 失败（网络不通/token 过期）时中止重启，并弹出通知让用户手动重试。
|
||
await syncConfigToServer({ suppressToast: true });
|
||
} catch (e) {
|
||
console.error("[App] Reg sync failed, aborting service restart:", e);
|
||
const notifKey = "restartRegFailed";
|
||
notification.error({
|
||
key: notifKey,
|
||
message: t("Claw.App.ConfigSyncFailed"),
|
||
description: t("Claw.App.ConfigSyncFailedDetail"),
|
||
duration: 0,
|
||
placement: "bottomRight",
|
||
btn: (
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
onClick={() => {
|
||
notification.destroy(notifKey);
|
||
restartAllServices();
|
||
}}
|
||
>
|
||
{t("Claw.App.Retry")}
|
||
</Button>
|
||
),
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
message.loading({
|
||
content: t("Claw.App.RestartingServices"),
|
||
key: "restart-services",
|
||
});
|
||
await window.electronAPI?.services.restartAll();
|
||
message.success({
|
||
content: t("Claw.App.RestartSuccess"),
|
||
key: "restart-services",
|
||
});
|
||
} catch (e) {
|
||
console.error("[App] Failed to restart services:", e);
|
||
message.error({
|
||
content: t("Claw.App.RestartFailed"),
|
||
key: "restart-services",
|
||
});
|
||
}
|
||
}, []);
|
||
|
||
// ============================================
|
||
// 核心状态
|
||
// ============================================
|
||
const [activeTab, setActiveTab] = useState<TabKey>("client");
|
||
const [sessionsAutoOpen, setSessionsAutoOpen] = useState(false);
|
||
const [webviewActions, setWebviewActions] =
|
||
useState<WebviewHeaderActions | null>(null);
|
||
const [username, setUsername] = useState<string>("");
|
||
const [onlineStatus, setOnlineStatus] = useState<boolean | null>(null);
|
||
const [agentStatus, setAgentStatus] = useState<string>("idle");
|
||
const [services, setServices] = useState<ServiceItem[]>([]);
|
||
const [servicesLoading, setServicesLoading] = useState(true);
|
||
const [guiMcpEnabled, setGuiMcpEnabled] = useState(false);
|
||
const [pollFailCount, setPollFailCount] = useState(0);
|
||
const [startingServices, setStartingServices] = useState<Set<string>>(
|
||
new Set(),
|
||
);
|
||
const servicesPollTimer = useRef<ReturnType<typeof setInterval> | null>(null);
|
||
/** 递增后通知 ClientPage 刷新账号状态（用户名等），与 reg 返回保持一致 */
|
||
const [authRefreshTrigger, setAuthRefreshTrigger] = useState(0);
|
||
const [updateState, setUpdateState] = useState<UpdateState>({
|
||
status: "idle",
|
||
});
|
||
const [headerSimulatedPercent, setHeaderSimulatedPercent] = useState(0);
|
||
const headerSimulatedIntervalRef = useRef<ReturnType<
|
||
typeof setInterval
|
||
> | null>(null);
|
||
const statusExpectedKeys = useMemo(() => {
|
||
const keys = ["mcpProxy", "agent", "fileServer", "lanproxy"];
|
||
if (FEATURES.ENABLE_GUI_AGENT_SERVER && guiMcpEnabled) {
|
||
keys.splice(3, 0, "guiServer");
|
||
}
|
||
return keys;
|
||
}, [guiMcpEnabled]);
|
||
const getStartupServiceKeys = useCallback(async (): Promise<string[]> => {
|
||
const keys = ["mcpProxy", "agent", "fileServer", "lanproxy"];
|
||
if (!FEATURES.ENABLE_GUI_AGENT_SERVER) return keys;
|
||
try {
|
||
const guiEnabledRes = await window.electronAPI?.guiServer?.isEnabled();
|
||
if (guiEnabledRes?.enabled) {
|
||
keys.splice(3, 0, "guiServer");
|
||
}
|
||
} catch (e) {
|
||
console.warn("[App] Failed to read GUI MCP enabled status:", e);
|
||
}
|
||
return keys;
|
||
}, []);
|
||
|
||
// ============================================
|
||
// 检查初始化向导状态（每次启动优先读取 quick init 配置）
|
||
// ============================================
|
||
useEffect(() => {
|
||
const log = createLogger("SetupCheck");
|
||
const checkSetup = async () => {
|
||
try {
|
||
const completed = await setupService.isSetupCompleted();
|
||
|
||
// 每次启动优先读取 quick init 配置
|
||
if (completed) {
|
||
try {
|
||
const qiConfig = await window.electronAPI?.quickInit.getConfig();
|
||
if (qiConfig) {
|
||
log.info("Applying quick init config");
|
||
await applyQuickInitToDb(qiConfig);
|
||
}
|
||
} catch (error) {
|
||
log.warn("Failed to read quick init config:", error);
|
||
}
|
||
}
|
||
|
||
log.info("isSetupComplete:", completed);
|
||
setIsSetupComplete(completed);
|
||
} catch (error) {
|
||
log.error("Failed to check setup status:", error);
|
||
setIsSetupComplete(true);
|
||
}
|
||
};
|
||
checkSetup();
|
||
}, []);
|
||
|
||
// ============================================
|
||
// 初始化主界面（setup 完成后执行）
|
||
// ============================================
|
||
useEffect(() => {
|
||
if (isSetupComplete !== true) return;
|
||
|
||
const init = async () => {
|
||
// 加载用户信息
|
||
const user = await authService.getAuthUser();
|
||
if (user) {
|
||
setUsername(
|
||
user.displayName || user.username || t("Claw.App.defaultUsername"),
|
||
);
|
||
}
|
||
|
||
// 加载在线状态
|
||
const online =
|
||
await window.electronAPI?.settings.get("auth.online_status");
|
||
setOnlineStatus(online as boolean | null);
|
||
};
|
||
|
||
init();
|
||
}, [isSetupComplete]);
|
||
|
||
// ============================================
|
||
// 子组件登录/注销后刷新顶部栏用户名
|
||
// ============================================
|
||
const handleAuthChange = useCallback(async () => {
|
||
const user = await authService.getAuthUser();
|
||
if (user) {
|
||
setUsername(
|
||
user.displayName || user.username || t("Claw.App.defaultUsername"),
|
||
);
|
||
} else {
|
||
setUsername("");
|
||
}
|
||
}, []);
|
||
|
||
// 标记服务由登录流程启动（内存变量，不持久化）
|
||
const handleLoginStarted = useCallback(() => {
|
||
loginStartedRef.current = true;
|
||
}, []);
|
||
|
||
// ============================================
|
||
// 主界面下必需依赖检查：仅当存在「未安装」或「错误」时进入依赖安装
|
||
// 版本以当前真实安装为准，outdated 不触发（用户可在依赖 Tab 手动升级）
|
||
// 同时检测主进程初始化依赖同步状态，避免服务启动时依赖尚未安装完成
|
||
// ============================================
|
||
useEffect(() => {
|
||
if (isSetupComplete !== true) return;
|
||
const log = createLogger("DepsCheck");
|
||
let cancelled = false;
|
||
|
||
// 先注册事件监听，再做 checkAll，避免事件在 checkAll 返回前触发而丢失
|
||
const handleDepsSyncCompleted = () => {
|
||
log.info("syncCompleted");
|
||
setDepsSyncInProgress(false);
|
||
};
|
||
window.electronAPI?.on(
|
||
"deps:syncCompleted",
|
||
handleDepsSyncCompleted as any,
|
||
);
|
||
|
||
const checkRequiredDeps = async () => {
|
||
try {
|
||
const result = await window.electronAPI?.dependencies.checkAll();
|
||
if (cancelled) return;
|
||
|
||
const deps = result?.results ?? [];
|
||
const hasMissingOrError = deps.some(
|
||
(d: { status: string; required?: boolean }) =>
|
||
d.required !== false &&
|
||
(d.status === "missing" || d.status === "error"),
|
||
);
|
||
const missingDeps = deps
|
||
.filter(
|
||
(d: { status: string; required?: boolean }) =>
|
||
d.required !== false &&
|
||
(d.status === "missing" || d.status === "error"),
|
||
)
|
||
.map((d: { name: string; status: string }) => d.name);
|
||
|
||
log.info("result:", {
|
||
hasMissingOrError,
|
||
missingDeps: missingDeps.length > 0 ? missingDeps : undefined,
|
||
syncInProgress: result?.syncInProgress,
|
||
});
|
||
|
||
setNeedsRequiredDepsReinstall(hasMissingOrError);
|
||
|
||
// 记录主进程初始化依赖同步状态
|
||
if (result?.syncInProgress) {
|
||
setDepsSyncInProgress(true);
|
||
// 防竞态：checkAll 返回 syncInProgress=true 但事件可能已经在 checkAll IPC 期间触发过了，
|
||
// 再次确认主进程当前真实状态，避免 depsSyncInProgress 永远卡在 true
|
||
const recheck = await window.electronAPI?.dependencies.checkAll();
|
||
if (cancelled) return;
|
||
if (!recheck?.syncInProgress) {
|
||
setDepsSyncInProgress(false);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
log.error("failed:", error);
|
||
if (!cancelled) {
|
||
setNeedsRequiredDepsReinstall(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
checkRequiredDeps();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
window.electronAPI?.off(
|
||
"deps:syncCompleted",
|
||
handleDepsSyncCompleted as any,
|
||
);
|
||
};
|
||
}, [isSetupComplete]);
|
||
|
||
// ============================================
|
||
// 服务状态轮询
|
||
// ============================================
|
||
const pollServicesStatus = useCallback(async () => {
|
||
try {
|
||
const items: ServiceItem[] = [];
|
||
const [
|
||
fsStatus,
|
||
lpStatus,
|
||
agentSvcStatus,
|
||
mcpStatus,
|
||
csStatus,
|
||
guiStatus,
|
||
guiEnabledRes,
|
||
] = await Promise.all([
|
||
window.electronAPI?.fileServer.status(),
|
||
window.electronAPI?.lanproxy.status(),
|
||
window.electronAPI?.agent.serviceStatus(),
|
||
window.electronAPI?.mcp.status(),
|
||
window.electronAPI?.computerServer.status(),
|
||
window.electronAPI?.guiServer?.status(),
|
||
window.electronAPI?.guiServer?.isEnabled(),
|
||
]);
|
||
const isGuiEnabled =
|
||
FEATURES.ENABLE_GUI_AGENT_SERVER && (guiEnabledRes?.enabled ?? false);
|
||
setGuiMcpEnabled(isGuiEnabled);
|
||
items.push({
|
||
key: "mcpProxy",
|
||
label: t("Claw.Service.mcp"),
|
||
description: t("Claw.Service.mcpDesc"),
|
||
running: mcpStatus?.running ?? false,
|
||
error: mcpStatus?.error,
|
||
});
|
||
|
||
// ComputerServer 是 Agent 的 HTTP 接口，仅当 Agent 本身在运行时才检查其状态
|
||
const agentRunning = agentSvcStatus?.running ?? false;
|
||
const csRunning = csStatus?.running ?? false;
|
||
let agentError: string | undefined;
|
||
if (agentRunning && !csRunning) {
|
||
agentError = csStatus?.error
|
||
? t("Claw.App.agentInterfaceFailed", csStatus.error)
|
||
: t("Claw.App.agentInterfaceNotRunning");
|
||
}
|
||
items.push({
|
||
key: "agent",
|
||
label: t("Claw.Service.agent"),
|
||
description: t("Claw.Service.agentDesc"),
|
||
running: agentRunning && csRunning,
|
||
error: agentError,
|
||
});
|
||
|
||
items.push({
|
||
key: "fileServer",
|
||
label: t("Claw.Service.file"),
|
||
description: t("Claw.Service.fileDesc"),
|
||
running: fsStatus?.running ?? false,
|
||
pid: fsStatus?.pid,
|
||
error: fsStatus?.error,
|
||
});
|
||
if (isGuiEnabled) {
|
||
items.push({
|
||
key: "guiServer",
|
||
label: t("Claw.Service.guiMcp"),
|
||
description: t("Claw.Service.guiMcpDesc"),
|
||
running: guiStatus?.running ?? false,
|
||
pid: guiStatus?.pid,
|
||
error: guiStatus?.error,
|
||
});
|
||
}
|
||
items.push({
|
||
key: "lanproxy",
|
||
label: t("Claw.Service.proxy"),
|
||
description: t("Claw.Service.proxyDesc"),
|
||
running: lpStatus?.running ?? false,
|
||
pid: lpStatus?.pid,
|
||
error: lpStatus?.error,
|
||
});
|
||
setServices(items);
|
||
setPollFailCount(0);
|
||
} catch (error) {
|
||
console.error("[App] pollServicesStatus failed:", error);
|
||
setPollFailCount((count) => count + 1);
|
||
} finally {
|
||
setServicesLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
// ============================================
|
||
// 逐个启动服务（实时更新状态）
|
||
// ============================================
|
||
const startServicesSequentially = useCallback(
|
||
async (serviceKeys: string[]) => {
|
||
const log = createLogger("StartServices");
|
||
for (const key of serviceKeys) {
|
||
setStartingServices((prev) => new Set(prev).add(key));
|
||
try {
|
||
let result: { success: boolean; error?: string } | undefined;
|
||
|
||
if (key === "agent") {
|
||
const agentConfig = (await window.electronAPI?.settings.get(
|
||
"agent_config",
|
||
)) as any;
|
||
const step1 = (await window.electronAPI?.settings.get(
|
||
"step1_config",
|
||
)) as { workspaceDir?: string } | null;
|
||
result = await window.electronAPI?.agent.init({
|
||
engine: normalizeAgentEngine(agentConfig?.type),
|
||
apiKey: agentConfig?.apiKey,
|
||
baseUrl: agentConfig?.apiBaseUrl,
|
||
model: agentConfig?.model,
|
||
workspaceDir: step1?.workspaceDir || "",
|
||
});
|
||
log.info(
|
||
`agent: ${result?.success ? "ok" : "failed"}`,
|
||
result?.error,
|
||
);
|
||
// ComputerServer 是 Agent 的 HTTP 接口，随 Agent 一起启动
|
||
await window.electronAPI?.computerServer
|
||
.start()
|
||
.catch(() => undefined);
|
||
} else if (key === "fileServer") {
|
||
const step1 = (await window.electronAPI?.settings.get(
|
||
"step1_config",
|
||
)) as { fileServerPort?: number } | null;
|
||
const port = step1?.fileServerPort ?? 60000;
|
||
result = await window.electronAPI?.fileServer.start(port);
|
||
log.info(
|
||
`fileServer: ${result?.success ? "ok" : "failed"}`,
|
||
result?.error,
|
||
);
|
||
} else if (key === "guiServer") {
|
||
result = await window.electronAPI?.guiServer?.start();
|
||
} else if (key === "lanproxy") {
|
||
const clientKey = (await window.electronAPI?.settings.get(
|
||
"auth.saved_key",
|
||
)) as string | null;
|
||
const lpConfig = (await window.electronAPI?.settings.get(
|
||
"lanproxy_config",
|
||
)) as any;
|
||
const serverIp =
|
||
lpConfig?.serverIp ||
|
||
(
|
||
(await window.electronAPI?.settings.get(
|
||
"lanproxy.server_host",
|
||
)) as string
|
||
)?.replace(/^https?:\/\//, "");
|
||
const serverPort =
|
||
lpConfig?.serverPort ||
|
||
(await window.electronAPI?.settings.get("lanproxy.server_port"));
|
||
if (serverIp && clientKey && serverPort) {
|
||
result = await window.electronAPI?.lanproxy.start({
|
||
serverIp,
|
||
serverPort,
|
||
clientKey,
|
||
ssl: lpConfig?.ssl,
|
||
});
|
||
log.info(
|
||
`lanproxy: ${result?.success ? "ok" : "failed"}`,
|
||
result?.error,
|
||
);
|
||
} else {
|
||
log.warn("lanproxy: skipped (missing config)");
|
||
}
|
||
} else if (key === "mcpProxy") {
|
||
result = await window.electronAPI?.mcp.start();
|
||
log.info(
|
||
`mcpProxy: ${result?.success ? "ok" : "failed"}`,
|
||
result?.error,
|
||
);
|
||
}
|
||
|
||
await pollServicesStatus();
|
||
} catch (e) {
|
||
log.error(`${key} failed:`, e);
|
||
} finally {
|
||
setStartingServices((prev) => {
|
||
const next = new Set(prev);
|
||
next.delete(key);
|
||
return next;
|
||
});
|
||
}
|
||
}
|
||
log.info("completed");
|
||
},
|
||
[pollServicesStatus],
|
||
);
|
||
|
||
// ============================================
|
||
// 自动重连（等待依赖检查及同步完成后再执行，避免竞态）
|
||
// ============================================
|
||
useEffect(() => {
|
||
if (isSetupComplete !== true) return;
|
||
if (needsRequiredDepsReinstall !== false) return;
|
||
if (depsSyncInProgress) return;
|
||
|
||
const log = createLogger("AutoReconnect");
|
||
const autoReconnect = async () => {
|
||
// 如果 ClientPage handleLogin 已经启动了服务，跳过自动重连
|
||
if (loginStartedRef.current) {
|
||
loginStartedRef.current = false;
|
||
log.info("skipped (login flow)");
|
||
return;
|
||
}
|
||
|
||
// 如果向导刚完成，启动所有服务
|
||
if (setupJustCompleted.current) {
|
||
setupJustCompleted.current = false;
|
||
log.info("setup completed, starting services");
|
||
await startServicesSequentially(await getStartupServiceKeys());
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const savedKey =
|
||
await window.electronAPI?.settings.get("auth.saved_key");
|
||
|
||
if (savedKey) {
|
||
// 用户已退出登录时（configKey 被清除），不自动重连
|
||
const configKey =
|
||
await window.electronAPI?.settings.get("auth.config_key");
|
||
if (!configKey) {
|
||
log.info("skipped (logged out)");
|
||
return;
|
||
}
|
||
|
||
const result = await syncConfigToServer({ suppressToast: true });
|
||
|
||
if (result) {
|
||
log.info("reg ok, starting services");
|
||
setOnlineStatus(result.online);
|
||
const user = await authService.getAuthUser();
|
||
if (user) {
|
||
setUsername(
|
||
user.displayName ||
|
||
user.username ||
|
||
t("Claw.App.defaultUsername"),
|
||
);
|
||
}
|
||
setAuthRefreshTrigger((v) => v + 1);
|
||
await startServicesSequentially(await getStartupServiceKeys());
|
||
} else {
|
||
log.warn("reg failed, using local config");
|
||
notification.info({
|
||
message: t("Claw.App.AutoReconnectFailed"),
|
||
description: t("Claw.App.AutoReconnectFailedDetail"),
|
||
duration: 8,
|
||
placement: "bottomRight",
|
||
});
|
||
await startServicesSequentially(await getStartupServiceKeys());
|
||
}
|
||
} else {
|
||
log.info("skipped (no savedKey)");
|
||
}
|
||
} catch (error) {
|
||
log.error("failed:", error);
|
||
}
|
||
};
|
||
|
||
autoReconnect();
|
||
}, [
|
||
isSetupComplete,
|
||
needsRequiredDepsReinstall,
|
||
depsSyncInProgress,
|
||
startServicesSequentially,
|
||
getStartupServiceKeys,
|
||
]);
|
||
|
||
// ============================================
|
||
// 根据服务状态计算 Agent 状态
|
||
// ============================================
|
||
// 根据服务状态计算 Agent 状态（对齐 Tauri 客户端逻辑）
|
||
useEffect(() => {
|
||
// 如果正在加载，保持当前状态不变（避免初始加载时的闪烁）
|
||
if (servicesLoading) {
|
||
return;
|
||
}
|
||
|
||
if (statusExpectedKeys.length === 0) {
|
||
setAgentStatus("idle");
|
||
return;
|
||
}
|
||
|
||
const serviceMap = new Map(services.map((s) => [s.key, s]));
|
||
const trackedServices = statusExpectedKeys.map((key) =>
|
||
serviceMap.get(key),
|
||
);
|
||
const runningCount = trackedServices.filter((s) => s?.running).length;
|
||
const totalCount = statusExpectedKeys.length;
|
||
const hasErrors = trackedServices.some((s) => !!s?.error);
|
||
const hasStartingServices = Array.from(startingServices).some((key) =>
|
||
statusExpectedKeys.includes(key),
|
||
);
|
||
const hasStaleServiceStatus = pollFailCount >= 2;
|
||
|
||
if (hasStaleServiceStatus) {
|
||
// 连续轮询失败时，避免继续展示可能过期的 running 状态。
|
||
setAgentStatus("busy");
|
||
} else if (hasErrors) {
|
||
setAgentStatus("error");
|
||
} else if (hasStartingServices) {
|
||
setAgentStatus("starting");
|
||
} else if (runningCount === totalCount && runningCount > 0) {
|
||
setAgentStatus("running");
|
||
} else if (runningCount > 0 && runningCount < totalCount) {
|
||
setAgentStatus("busy");
|
||
} else if (runningCount === 0) {
|
||
setAgentStatus("stopped");
|
||
} else {
|
||
setAgentStatus("idle");
|
||
}
|
||
}, [
|
||
services,
|
||
servicesLoading,
|
||
startingServices,
|
||
statusExpectedKeys,
|
||
pollFailCount,
|
||
]);
|
||
|
||
// 启动服务状态轮询
|
||
useEffect(() => {
|
||
if (isSetupComplete !== true) return;
|
||
|
||
// 立即执行一次
|
||
pollServicesStatus();
|
||
|
||
// 每 5 秒轮询一次
|
||
servicesPollTimer.current = setInterval(pollServicesStatus, 5000);
|
||
|
||
return () => {
|
||
if (servicesPollTimer.current) {
|
||
clearInterval(servicesPollTimer.current);
|
||
}
|
||
};
|
||
}, [isSetupComplete]);
|
||
|
||
// ============================================
|
||
// 监听更新状态（header tag 展示）
|
||
// ============================================
|
||
useEffect(() => {
|
||
const handler = (state: UpdateState) => {
|
||
if (state) setUpdateState(state);
|
||
};
|
||
window.electronAPI?.on("update:status", handler as any);
|
||
window.electronAPI?.app?.getUpdateState?.()?.then((state) => {
|
||
if (state) setUpdateState(state);
|
||
});
|
||
return () => {
|
||
window.electronAPI?.off("update:status", handler as any);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const isDownloading = updateState.status === "downloading";
|
||
const hasRealProgress = updateState.progress != null;
|
||
|
||
if (isDownloading && !hasRealProgress) {
|
||
setHeaderSimulatedPercent(0);
|
||
const increment =
|
||
(HEADER_SIMULATED_PROGRESS_CAP / HEADER_SIMULATED_DURATION_MS) *
|
||
HEADER_SIMULATED_PROGRESS_INTERVAL_MS;
|
||
const id = setInterval(() => {
|
||
setHeaderSimulatedPercent((prev) => {
|
||
const next = prev + increment;
|
||
return next >= HEADER_SIMULATED_PROGRESS_CAP
|
||
? HEADER_SIMULATED_PROGRESS_CAP
|
||
: next;
|
||
});
|
||
}, HEADER_SIMULATED_PROGRESS_INTERVAL_MS);
|
||
headerSimulatedIntervalRef.current = id;
|
||
return () => {
|
||
clearInterval(id);
|
||
headerSimulatedIntervalRef.current = null;
|
||
};
|
||
}
|
||
|
||
if (!isDownloading || hasRealProgress) {
|
||
if (headerSimulatedIntervalRef.current) {
|
||
clearInterval(headerSimulatedIntervalRef.current);
|
||
headerSimulatedIntervalRef.current = null;
|
||
}
|
||
setHeaderSimulatedPercent(0);
|
||
}
|
||
}, [updateState.status, updateState.progress]);
|
||
|
||
// ============================================
|
||
// 监听托盘/菜单事件
|
||
// ============================================
|
||
useEffect(() => {
|
||
if (!window.electronAPI) return;
|
||
|
||
const cleanupHandlers: (() => void)[] = [];
|
||
|
||
// 监听设置菜单
|
||
const handleSettings = () => {
|
||
console.log("[App] Received menu:settings event");
|
||
setActiveTab("settings");
|
||
};
|
||
window.electronAPI.on("menu:settings", handleSettings);
|
||
cleanupHandlers.push(() =>
|
||
window.electronAPI?.off("menu:settings", handleSettings),
|
||
);
|
||
|
||
// 监听依赖管理菜单
|
||
const handleDependencies = () => {
|
||
console.log("[App] Received menu:dependencies event");
|
||
setActiveTab("dependencies");
|
||
};
|
||
window.electronAPI.on("menu:dependencies", handleDependencies);
|
||
cleanupHandlers.push(() =>
|
||
window.electronAPI?.off("menu:dependencies", handleDependencies),
|
||
);
|
||
|
||
// 监听 MCP 设置菜单
|
||
const handleMcpSettings = () => {
|
||
console.log("[App] Received menu:mcp-settings event");
|
||
setActiveTab("settings");
|
||
};
|
||
window.electronAPI.on("menu:mcp-settings", handleMcpSettings);
|
||
cleanupHandlers.push(() =>
|
||
window.electronAPI?.off("menu:mcp-settings", handleMcpSettings),
|
||
);
|
||
|
||
// 监听新建会话菜单
|
||
const handleNewSession = () => {
|
||
console.log("[App] Received menu:new-session event");
|
||
setSessionsAutoOpen(true);
|
||
setActiveTab("sessions");
|
||
};
|
||
window.electronAPI.on("menu:new-session", handleNewSession);
|
||
cleanupHandlers.push(() =>
|
||
window.electronAPI?.off("menu:new-session", handleNewSession),
|
||
);
|
||
|
||
// 监听 Admin Server 服务正在重启
|
||
const handleServicesRestarting = () => {
|
||
console.log("[App] Received admin:servicesRestarting event");
|
||
message.loading({
|
||
content: t("Claw.App.ServicesRestarting"),
|
||
key: "admin-restart",
|
||
duration: 0,
|
||
});
|
||
};
|
||
window.electronAPI.on("admin:servicesRestarting", handleServicesRestarting);
|
||
cleanupHandlers.push(() =>
|
||
window.electronAPI?.off(
|
||
"admin:servicesRestarting",
|
||
handleServicesRestarting,
|
||
),
|
||
);
|
||
|
||
// 监听 Admin Server 服务重启完成
|
||
const handleServicesRestarted = (data: {
|
||
success: boolean;
|
||
results: Record<string, { success: boolean; error?: string }>;
|
||
}) => {
|
||
console.log("[App] Received admin:servicesRestarted event", data);
|
||
if (data.success) {
|
||
message.success({
|
||
content: t("Claw.App.ServicesRestartSuccess"),
|
||
key: "admin-restart",
|
||
duration: 3,
|
||
});
|
||
} else {
|
||
const failed = Object.entries(data.results)
|
||
.filter(([, v]) => !v.success)
|
||
.map(([k]) => k)
|
||
.join(", ");
|
||
message.error({
|
||
content: t("Claw.App.serviceRestartFailed", failed),
|
||
key: "admin-restart",
|
||
duration: 5,
|
||
});
|
||
}
|
||
};
|
||
window.electronAPI.on(
|
||
"admin:servicesRestarted",
|
||
handleServicesRestarted as any,
|
||
);
|
||
cleanupHandlers.push(() =>
|
||
window.electronAPI?.off(
|
||
"admin:servicesRestarted",
|
||
handleServicesRestarted as any,
|
||
),
|
||
);
|
||
|
||
return () => {
|
||
cleanupHandlers.forEach((fn) => fn());
|
||
};
|
||
}, []);
|
||
|
||
// ============================================
|
||
// 向导完成回调
|
||
// ============================================
|
||
const handleSetupComplete = () => {
|
||
setupJustCompleted.current = true;
|
||
setIsSetupComplete(true);
|
||
};
|
||
|
||
// ============================================
|
||
// 状态 Badge
|
||
// ============================================
|
||
const badge = STATUS_CONFIG[agentStatus] || STATUS_CONFIG.idle;
|
||
|
||
// ============================================
|
||
// 平台检测
|
||
// ============================================
|
||
const isMacOS = navigator.platform.toUpperCase().includes("MAC");
|
||
|
||
// ============================================
|
||
// 菜单配置（对齐 Tauri 客户端）
|
||
// ============================================
|
||
const menuItems = useMemo(() => {
|
||
const items = [
|
||
{
|
||
key: "client",
|
||
icon: <DashboardOutlined />,
|
||
label: t("Claw.Menu.client"),
|
||
},
|
||
{
|
||
key: "sessions",
|
||
icon: <TeamOutlined />,
|
||
label: t("Claw.Menu.session"),
|
||
},
|
||
{
|
||
key: "mcp",
|
||
icon: <ApiOutlined />,
|
||
label: t("Claw.Menu.mcp"),
|
||
},
|
||
{
|
||
key: "settings",
|
||
icon: <SettingOutlined />,
|
||
label: t("Claw.Menu.settings"),
|
||
},
|
||
{
|
||
key: "dependencies",
|
||
icon: <FolderOutlined />,
|
||
label: t("Claw.Menu.dependencies"),
|
||
},
|
||
];
|
||
if (isMacOS) {
|
||
items.push({
|
||
key: "permissions",
|
||
icon: <SafetyOutlined />,
|
||
label: t("Claw.Menu.authorization"),
|
||
});
|
||
}
|
||
items.push(
|
||
{ key: "logs", icon: <FileTextOutlined />, label: t("Claw.Menu.logs") },
|
||
{
|
||
key: "about",
|
||
icon: <InfoCircleOutlined />,
|
||
label: t("Claw.Menu.about"),
|
||
},
|
||
);
|
||
return items;
|
||
}, [isMacOS, i18nLang]);
|
||
|
||
// ============================================
|
||
// i18n Context value
|
||
// ============================================
|
||
const i18nContextValue = useMemo(
|
||
() => ({ lang: i18nLang, updateLang: handleI18nLangChange }),
|
||
[i18nLang, handleI18nLangChange],
|
||
);
|
||
|
||
// ============================================
|
||
// 渲染：加载中（含等待依赖检查完成）
|
||
// ============================================
|
||
if (
|
||
isSetupComplete === null ||
|
||
(isSetupComplete && needsRequiredDepsReinstall === null)
|
||
) {
|
||
return (
|
||
<I18nContext.Provider value={i18nContextValue}>
|
||
<ConfigProvider theme={currentTheme}>
|
||
<div className="app-loading">
|
||
<Spin size="large" />
|
||
<div className="app-loading-text">{t("Claw.App.Loading")}</div>
|
||
</div>
|
||
</ConfigProvider>
|
||
</I18nContext.Provider>
|
||
);
|
||
}
|
||
|
||
// ============================================
|
||
// 渲染：初始化向导
|
||
// ============================================
|
||
if (!isSetupComplete) {
|
||
return (
|
||
<I18nContext.Provider value={i18nContextValue}>
|
||
<ConfigProvider theme={currentTheme}>
|
||
<SetupWizard onComplete={handleSetupComplete} />
|
||
</ConfigProvider>
|
||
</I18nContext.Provider>
|
||
);
|
||
}
|
||
|
||
// ============================================
|
||
// 渲染：主界面下必需依赖未满足 → 全屏依赖安装，完成后重启服务回到主界面
|
||
// ============================================
|
||
if (needsRequiredDepsReinstall === true) {
|
||
return (
|
||
<I18nContext.Provider value={i18nContextValue}>
|
||
<ConfigProvider theme={currentTheme}>
|
||
<SetupDependencies
|
||
onComplete={async () => {
|
||
// 先回到主界面，再在后台重启服务（使新安装的依赖生效）
|
||
setNeedsRequiredDepsReinstall(false);
|
||
await restartAllServices();
|
||
}}
|
||
/>
|
||
</ConfigProvider>
|
||
</I18nContext.Provider>
|
||
);
|
||
}
|
||
|
||
// ============================================
|
||
// 渲染：主界面
|
||
// ============================================
|
||
return (
|
||
<ConfigProvider theme={currentTheme}>
|
||
<I18nContext.Provider value={i18nContextValue}>
|
||
<ThemeContext.Provider
|
||
value={{ themeMode, isDarkMode, setThemeMode: handleSetThemeMode }}
|
||
>
|
||
<div className="app-container">
|
||
{/* 顶部栏 */}
|
||
<div className="app-header">
|
||
{webviewActions ? (
|
||
<div className={styles.headerWebviewActions}>
|
||
<Button
|
||
size="small"
|
||
icon={<ArrowLeftOutlined />}
|
||
onClick={webviewActions.onBack}
|
||
>
|
||
{t("Claw.App.back")}
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
icon={<ReloadOutlined />}
|
||
onClick={webviewActions.onReload}
|
||
>
|
||
{t("Claw.App.refresh")}
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div className="app-header-logo">
|
||
<img
|
||
src="./32x32.png"
|
||
alt=""
|
||
style={{ width: 16, height: 16 }}
|
||
/>
|
||
<span className="app-header-title">{APP_DISPLAY_NAME}</span>
|
||
{updateState.status === "available" && (
|
||
<span
|
||
className="app-header-update-tag app-header-update-tag--available"
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={async () => {
|
||
if (updateState.canAutoUpdate === false) {
|
||
await window.electronAPI?.app?.openReleasesPage?.();
|
||
return;
|
||
}
|
||
try {
|
||
setUpdateState((prev) => ({
|
||
...prev,
|
||
status: "downloading",
|
||
progress: undefined,
|
||
}));
|
||
const res =
|
||
await window.electronAPI?.app?.downloadUpdate?.();
|
||
if (!res || !res.success) {
|
||
message.error(
|
||
res?.error || t("Claw.About.downloadFailed"),
|
||
);
|
||
setUpdateState((prev) => ({
|
||
...prev,
|
||
status: "available",
|
||
}));
|
||
}
|
||
} catch {
|
||
message.error(t("Claw.About.downloadFailed"));
|
||
setUpdateState((prev) => ({
|
||
...prev,
|
||
status: "available",
|
||
}));
|
||
}
|
||
}}
|
||
onKeyDown={(e) =>
|
||
(e.key === "Enter" || e.key === " ") &&
|
||
(e.target as HTMLElement).click()
|
||
}
|
||
>
|
||
{updateState.canAutoUpdate === false
|
||
? t("Claw.App.UpdateTag.newVersion", {
|
||
version: updateState.version,
|
||
})
|
||
: t("Claw.App.UpdateTag.download", {
|
||
version: updateState.version,
|
||
})}
|
||
</span>
|
||
)}
|
||
{updateState.status === "downloading" && (
|
||
<span className="app-header-update-tag app-header-update-tag--downloading">
|
||
{t("Claw.App.UpdateTag.downloading", {
|
||
percent: Math.round(
|
||
updateState.progress?.percent ??
|
||
headerSimulatedPercent,
|
||
),
|
||
})}
|
||
</span>
|
||
)}
|
||
{updateState.status === "downloaded" && (
|
||
<span
|
||
className="app-header-update-tag app-header-update-tag--install"
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={async () => {
|
||
try {
|
||
const res =
|
||
await window.electronAPI?.app?.installUpdate?.();
|
||
if (res && !res.success) {
|
||
message.error(
|
||
res.error || t("Claw.About.installFailed"),
|
||
);
|
||
}
|
||
} catch {
|
||
message.error(t("Claw.About.installFailed"));
|
||
}
|
||
}}
|
||
onKeyDown={(e) =>
|
||
(e.key === "Enter" || e.key === " ") &&
|
||
(e.target as HTMLElement).click()
|
||
}
|
||
>
|
||
{t("Claw.About.installUpdate")}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
<div className={styles.headerRight}>
|
||
{username && (
|
||
<span className={styles.username}>{username}</span>
|
||
)}
|
||
<Badge
|
||
status={badge.status}
|
||
className={
|
||
agentStatus === "idle" || agentStatus === "busy"
|
||
? styles.badgeIdle
|
||
: undefined
|
||
}
|
||
text={
|
||
<span className={styles.badgeText}>{t(badge.textKey)}</span>
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 主体部分 */}
|
||
<div className="app-body">
|
||
{/* 左侧边栏 (hidden when webview is active) */}
|
||
{!webviewActions && (
|
||
<div
|
||
className={
|
||
// 英文菜单文案通常更长，侧边栏适当加宽以减少截断；其他语言保持默认宽度
|
||
i18nLang.toLowerCase().startsWith("en")
|
||
? "app-sider app-sider-en"
|
||
: "app-sider"
|
||
}
|
||
>
|
||
<Menu
|
||
mode="inline"
|
||
inlineIndent={0}
|
||
selectedKeys={[activeTab]}
|
||
items={menuItems.map((item) => ({
|
||
key: item.key,
|
||
icon: item.icon,
|
||
label: item.label,
|
||
onClick: () => setActiveTab(item.key as TabKey),
|
||
}))}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* 主内容区：flex 子撑满，便于日志等页占满高度 */}
|
||
<div
|
||
className={
|
||
webviewActions
|
||
? "app-content app-content-fullwidth"
|
||
: "app-content"
|
||
}
|
||
>
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
minHeight: 0,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
background: "var(--color-bg-layout)",
|
||
}}
|
||
>
|
||
{activeTab === "client" && (
|
||
<ClientPage
|
||
onNavigate={(tab) => {
|
||
if (tab === "sessions") setSessionsAutoOpen(true);
|
||
setActiveTab(tab);
|
||
}}
|
||
services={services}
|
||
servicesLoading={servicesLoading}
|
||
startingServices={startingServices}
|
||
setStartingServices={setStartingServices}
|
||
onRefreshServices={pollServicesStatus}
|
||
authRefreshTrigger={authRefreshTrigger}
|
||
onAuthChange={handleAuthChange}
|
||
onLoginStarted={handleLoginStarted}
|
||
/>
|
||
)}
|
||
{activeTab === "sessions" && (
|
||
<SessionsPage
|
||
autoOpen={sessionsAutoOpen}
|
||
onAutoOpenConsumed={() => setSessionsAutoOpen(false)}
|
||
onWebviewChange={setWebviewActions}
|
||
/>
|
||
)}
|
||
{activeTab === "mcp" && <MCPSettings />}
|
||
{activeTab === "settings" && <SettingsPage />}
|
||
{activeTab === "dependencies" && <DependenciesPage />}
|
||
{activeTab === "permissions" && <PermissionsPage />}
|
||
{activeTab === "logs" && <LogViewer />}
|
||
{activeTab === "about" && <AboutPage />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ThemeContext.Provider>
|
||
</I18nContext.Provider>
|
||
</ConfigProvider>
|
||
);
|
||
}
|
||
|
||
export default App;
|