yuxuanhui
417 lines
13 KiB
TypeScript
417 lines
13 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
||
import {
|
||
Avatar,
|
||
Badge,
|
||
Banner,
|
||
Button,
|
||
Input,
|
||
LocaleProvider,
|
||
Spin,
|
||
Toast,
|
||
} from "@douyinfe/semi-ui-19";
|
||
import {
|
||
IconGridView,
|
||
IconUser,
|
||
IconBell,
|
||
IconExit,
|
||
IconArrowRight,
|
||
IconPulse,
|
||
} from "@douyinfe/semi-icons";
|
||
import zhCN from "@douyinfe/semi-ui-19/lib/es/locale/source/zh_CN";
|
||
import { api, post } from "./api";
|
||
import type { Account, Job } from "./types";
|
||
import { AccountPage } from "./pages/AccountPage";
|
||
import { AlphaPage } from "./pages/AlphaPage";
|
||
import { JobPanel } from "./components/JobPanel";
|
||
import { ChatPanel } from "./ai/ChatPanel";
|
||
import type { PageContext, UIAction } from "./ai/types";
|
||
|
||
export default function App() {
|
||
const [authenticated, setAuthenticated] = useState<boolean | null>(null);
|
||
const [account, setAccount] = useState<Account | null>(null);
|
||
const [jobs, setJobs] = useState<Job[]>([]);
|
||
const [page, setPage] = useState(
|
||
location.hash === "#account" ? "account" : "alphas",
|
||
);
|
||
const [showJobs, setShowJobs] = useState(false);
|
||
const [refreshKey, setRefreshKey] = useState(0);
|
||
const [pollError, setPollError] = useState("");
|
||
const [chatOpen, setChatOpen] = useState(false);
|
||
const [chatWidth, setChatWidth] = useState(420);
|
||
const [viewport, setViewport] = useState(window.innerWidth);
|
||
const [alphaContext, setAlphaContext] = useState<PageContext>({
|
||
page: "alphas",
|
||
});
|
||
const [aiAction, setAIAction] = useState<UIAction | null>(null);
|
||
const chatOffset = viewport >= 1440 && chatOpen ? chatWidth : 0;
|
||
const focusBusiness = useCallback(() => {
|
||
if (window.innerWidth < 1440) setChatOpen(false);
|
||
}, []);
|
||
useEffect(() => {
|
||
const resize = () => setViewport(window.innerWidth);
|
||
window.addEventListener("resize", resize);
|
||
return () => window.removeEventListener("resize", resize);
|
||
}, []);
|
||
useEffect(() => {
|
||
document.documentElement.style.setProperty(
|
||
"--chat-space",
|
||
`${chatOffset}px`,
|
||
);
|
||
document.documentElement.style.setProperty(
|
||
"--chat-width",
|
||
`${chatWidth}px`,
|
||
);
|
||
return () => {
|
||
document.documentElement.style.setProperty("--chat-space", "0px");
|
||
};
|
||
}, [chatOffset, chatWidth]);
|
||
const refresh = useCallback(async () => {
|
||
try {
|
||
const [nextAccount, nextJobs] = await Promise.all([
|
||
api<Account>("/account"),
|
||
api<Job[]>("/sync-jobs"),
|
||
]);
|
||
setAccount(nextAccount);
|
||
setJobs(nextJobs);
|
||
setPollError("");
|
||
} catch (error) {
|
||
setPollError((error as Error).message);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
api("/auth/me")
|
||
.then(() => setAuthenticated(true))
|
||
.catch(() => setAuthenticated(false));
|
||
const expired = () => {
|
||
setAuthenticated(false);
|
||
setAccount(null);
|
||
setJobs([]);
|
||
setChatOpen(false);
|
||
setShowJobs(false);
|
||
};
|
||
window.addEventListener("session-expired", expired);
|
||
const hash = () =>
|
||
setPage(location.hash === "#account" ? "account" : "alphas");
|
||
window.addEventListener("hashchange", hash);
|
||
return () => {
|
||
window.removeEventListener("session-expired", expired);
|
||
window.removeEventListener("hashchange", hash);
|
||
};
|
||
}, []);
|
||
useEffect(() => {
|
||
if (!authenticated) return;
|
||
void refresh();
|
||
const timer = window.setInterval(() => void refresh(), 3000);
|
||
return () => clearInterval(timer);
|
||
}, [authenticated, refresh]);
|
||
useEffect(() => {
|
||
document.body.setAttribute("theme-mode", account?.theme ?? "light");
|
||
}, [account?.theme]);
|
||
|
||
const completedVersion = jobs
|
||
.filter(
|
||
(j) => j.status === "completed" || j.status === "completed_with_errors",
|
||
)
|
||
.map((j) => `${j.id}:${j.updated_at}`)
|
||
.join("|");
|
||
const pending = jobs.filter((j) =>
|
||
["queued", "running", "waiting_auth", "waiting_connection"].includes(
|
||
j.status,
|
||
),
|
||
).length;
|
||
const actionDone = () => {
|
||
void refresh();
|
||
setRefreshKey((k) => k + 1);
|
||
};
|
||
const taskCreated = () => {
|
||
actionDone();
|
||
setShowJobs(true);
|
||
};
|
||
const changePage = (next: string) => {
|
||
location.hash = next;
|
||
setPage(next);
|
||
};
|
||
const logout = async () => {
|
||
try {
|
||
await post("/auth/logout");
|
||
setAuthenticated(false);
|
||
setChatOpen(false);
|
||
setShowJobs(false);
|
||
setAccount(null);
|
||
setJobs([]);
|
||
setAIAction(null);
|
||
setAlphaContext({ page: "alphas" });
|
||
} catch (e) {
|
||
Toast.error((e as Error).message);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<LocaleProvider locale={zhCN}>
|
||
{authenticated === null ? (
|
||
<div className="screen-center">
|
||
<Spin size="large" />
|
||
</div>
|
||
) : !authenticated ? (
|
||
<Login
|
||
onLogin={() => {
|
||
setAuthenticated(true);
|
||
void refresh();
|
||
}}
|
||
/>
|
||
) : (
|
||
<div className="workspace">
|
||
<aside className="sidebar">
|
||
<div className="brand">
|
||
<span className="brand-mark">α</span>
|
||
<div>
|
||
ALPHA<span>RESEARCH WORKSPACE</span>
|
||
</div>
|
||
</div>
|
||
<div className="nav-label">工作空间</div>
|
||
<button
|
||
aria-label="Alpha 管理"
|
||
className={`nav-item ${page === "alphas" ? "active" : ""}`}
|
||
onClick={() => changePage("alphas")}
|
||
>
|
||
<IconGridView size="large" />
|
||
Alpha 管理
|
||
</button>
|
||
<button
|
||
aria-label="个人信息"
|
||
className={`nav-item ${page === "account" ? "active" : ""}`}
|
||
onClick={() => changePage("account")}
|
||
>
|
||
<IconUser size="large" />
|
||
个人信息
|
||
</button>
|
||
<div className="sidebar-bottom">
|
||
<div className="connection-line">
|
||
<i
|
||
className={
|
||
account?.connection_status === "connected"
|
||
? "connected"
|
||
: ""
|
||
}
|
||
/>
|
||
{account?.connection_status === "connected"
|
||
? "WorldQuant 已连接"
|
||
: "WorldQuant 未连接"}
|
||
</div>
|
||
<span>个人研究空间 · v0.1</span>
|
||
</div>
|
||
</aside>
|
||
<div className="main-shell">
|
||
<header className="topbar">
|
||
<div className="breadcrumbs">
|
||
工作空间 <span>/</span>{" "}
|
||
{page === "alphas" ? "Alpha 管理" : "个人信息"}
|
||
</div>
|
||
<div className="top-actions">
|
||
<Badge count={pending}>
|
||
<Button
|
||
theme="borderless"
|
||
icon={<IconBell />}
|
||
onClick={() => {
|
||
focusBusiness();
|
||
setShowJobs(true);
|
||
}}
|
||
>
|
||
同步任务
|
||
</Button>
|
||
</Badge>
|
||
<Button
|
||
aria-label="切换研究助手"
|
||
theme={chatOpen ? "light" : "borderless"}
|
||
onClick={() => setChatOpen(!chatOpen)}
|
||
>
|
||
AI 助手
|
||
</Button>
|
||
<div className="top-divider" />
|
||
<Avatar size="small" color="purple">
|
||
{account?.display_name.slice(0, 1) || "研"}
|
||
</Avatar>
|
||
<span className="account-name">
|
||
{account?.display_name ?? "研究员"}
|
||
</span>
|
||
<Button
|
||
aria-label="退出登录"
|
||
theme="borderless"
|
||
icon={<IconExit />}
|
||
onClick={() => void logout()}
|
||
/>
|
||
</div>
|
||
</header>
|
||
<main className="page-content">
|
||
{pollError && (
|
||
<Banner
|
||
type="warning"
|
||
description={`后台状态暂时不可用：${pollError}`}
|
||
/>
|
||
)}
|
||
<div hidden={page !== "account"}>
|
||
<AccountPage
|
||
account={account}
|
||
onChange={actionDone}
|
||
onTask={taskCreated}
|
||
/>
|
||
</div>
|
||
<div hidden={page !== "alphas"}>
|
||
<AlphaPage
|
||
taskPanelOpen={showJobs}
|
||
account={account}
|
||
version={`${refreshKey}:${completedVersion}`}
|
||
onTask={taskCreated}
|
||
onAccount={() => changePage("account")}
|
||
active={page === "alphas"}
|
||
overlaySuspended={
|
||
page !== "alphas" || (viewport < 1440 && chatOpen)
|
||
}
|
||
chatOffset={chatOffset}
|
||
onContext={setAlphaContext}
|
||
action={aiAction}
|
||
onOverlay={focusBusiness}
|
||
/>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<JobPanel
|
||
visible={showJobs && !(viewport < 1440 && chatOpen)}
|
||
chatOffset={chatOffset}
|
||
jobs={jobs}
|
||
timezone={account?.timezone}
|
||
onClose={() => setShowJobs(false)}
|
||
onChange={actionDone}
|
||
onAccount={() => {
|
||
setShowJobs(false);
|
||
changePage("account");
|
||
}}
|
||
/>
|
||
{!chatOpen && (
|
||
<Button
|
||
className="ai-launcher"
|
||
aria-label="打开研究助手"
|
||
theme="solid"
|
||
onClick={() => setChatOpen(true)}
|
||
>
|
||
AI 研究助手
|
||
</Button>
|
||
)}
|
||
<ChatPanel
|
||
jobs={jobs}
|
||
open={chatOpen}
|
||
width={chatWidth}
|
||
onWidth={setChatWidth}
|
||
onClose={() => setChatOpen(false)}
|
||
context={page === "alphas" ? alphaContext : { page: "account" }}
|
||
timezone={account?.timezone}
|
||
onSettings={() => {
|
||
focusBusiness();
|
||
changePage("account");
|
||
}}
|
||
onChanged={actionDone}
|
||
onAction={(action) => {
|
||
focusBusiness();
|
||
changePage("alphas");
|
||
setAIAction(action);
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</LocaleProvider>
|
||
);
|
||
}
|
||
|
||
function Login({ onLogin }: { onLogin: () => void }) {
|
||
const [username, setUsername] = useState("admin");
|
||
const [password, setPassword] = useState("");
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState("");
|
||
async function submit(event: React.FormEvent) {
|
||
event.preventDefault();
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
await post("/auth/login", { username, password });
|
||
setPassword("");
|
||
onLogin();
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
return (
|
||
<div className="login-page">
|
||
<section className="login-story">
|
||
<div className="brand">
|
||
<span className="brand-mark">α</span>
|
||
<div>
|
||
ALPHA<span>RESEARCH WORKSPACE</span>
|
||
</div>
|
||
</div>
|
||
<div className="story-copy">
|
||
<div className="eyebrow">WORLDQUANT RESEARCH</div>
|
||
<h1>
|
||
让每一次研究，
|
||
<br />
|
||
都有迹可循。
|
||
</h1>
|
||
<p>
|
||
从想法到验证，从信号到洞察。
|
||
<br />
|
||
在一个工作空间里，管理你的 Alpha 研究。
|
||
</p>
|
||
<div className="story-signal">
|
||
<IconPulse size="extra-large" />
|
||
<span>观察 · 记录 · 迭代</span>
|
||
</div>
|
||
</div>
|
||
<div className="login-footnote">你的个人 Alpha 研究工作空间</div>
|
||
</section>
|
||
<section className="login-form-shell">
|
||
<form className="login-form" onSubmit={submit}>
|
||
<div className="eyebrow">欢迎回来</div>
|
||
<h2>登录研究工作空间</h2>
|
||
<p>使用部署时设置的系统账户登录。</p>
|
||
{error && <Banner type="danger" description={error} />}
|
||
<label>
|
||
用户名
|
||
<Input
|
||
aria-label="用户名"
|
||
value={username}
|
||
onChange={setUsername}
|
||
autoComplete="username"
|
||
size="large"
|
||
/>
|
||
</label>
|
||
<label>
|
||
密码
|
||
<Input
|
||
aria-label="密码"
|
||
mode="password"
|
||
value={password}
|
||
onChange={setPassword}
|
||
autoComplete="current-password"
|
||
size="large"
|
||
/>
|
||
</label>
|
||
<Button
|
||
htmlType="submit"
|
||
theme="solid"
|
||
size="large"
|
||
block
|
||
loading={busy}
|
||
icon={<IconArrowRight />}
|
||
iconPosition="right"
|
||
>
|
||
进入工作空间
|
||
</Button>
|
||
<div className="login-note">WorldQuant 账户在登录后单独连接。</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|