feat: implement scoped dataset catalog and template input drafts
This commit is contained in:
yuxuanhui
+76
-30
@@ -13,6 +13,7 @@ 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 { DatasetPage } from "./pages/DatasetPage";
|
||||
import { AlphaPage } from "./pages/AlphaPage";
|
||||
import { JobPanel } from "./components/JobPanel";
|
||||
import { ChatPanel } from "./ai/ChatPanel";
|
||||
@@ -23,8 +24,13 @@ export default function App() {
|
||||
const [account, setAccount] = useState<Account | null>(null);
|
||||
const [jobs, setJobs] = useState<Job[]>([]);
|
||||
const [page, setPage] = useState(
|
||||
location.hash === "#account" ? "account" : "alphas",
|
||||
location.hash === "#account"
|
||||
? "account"
|
||||
: location.hash === "#datasets"
|
||||
? "datasets"
|
||||
: "alphas",
|
||||
);
|
||||
const [catalogModal, setCatalogModal] = useState(false);
|
||||
const [showJobs, setShowJobs] = useState(false);
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [pollError, setPollError] = useState("");
|
||||
@@ -84,7 +90,13 @@ export default function App() {
|
||||
};
|
||||
window.addEventListener("session-expired", expired);
|
||||
const hash = () =>
|
||||
setPage(location.hash === "#account" ? "account" : "alphas");
|
||||
setPage(
|
||||
location.hash === "#account"
|
||||
? "account"
|
||||
: location.hash === "#datasets"
|
||||
? "datasets"
|
||||
: "alphas",
|
||||
);
|
||||
window.addEventListener("hashchange", hash);
|
||||
return () => {
|
||||
window.removeEventListener("session-expired", expired);
|
||||
@@ -154,7 +166,11 @@ export default function App() {
|
||||
/>
|
||||
) : (
|
||||
<div className="workspace">
|
||||
<aside className="sidebar" inert={chatOpen && viewport < 1440}>
|
||||
<aside
|
||||
className="sidebar"
|
||||
inert={(chatOpen && viewport < 1440) || catalogModal}
|
||||
aria-hidden={catalogModal || undefined}
|
||||
>
|
||||
<div className="brand">
|
||||
<span className="brand-mark">α</span>
|
||||
<div>Alpha 研究</div>
|
||||
@@ -167,6 +183,14 @@ export default function App() {
|
||||
>
|
||||
Alpha 管理
|
||||
</button>
|
||||
<button
|
||||
aria-label="数据集"
|
||||
className={`nav-item ${page === "datasets" ? "active" : ""}`}
|
||||
aria-current={page === "datasets" ? "page" : undefined}
|
||||
onClick={() => changePage("datasets")}
|
||||
>
|
||||
数据集
|
||||
</button>
|
||||
<button
|
||||
aria-label="个人信息"
|
||||
className={`nav-item ${page === "account" ? "active" : ""}`}
|
||||
@@ -190,7 +214,11 @@ export default function App() {
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div className="main-shell" inert={chatOpen && viewport < 1440}>
|
||||
<div
|
||||
className="main-shell"
|
||||
inert={(chatOpen && viewport < 1440) || catalogModal}
|
||||
aria-hidden={catalogModal || undefined}
|
||||
>
|
||||
<header className="topbar">
|
||||
<div className="breadcrumbs">研究工作空间</div>
|
||||
<div className="top-actions">
|
||||
@@ -234,7 +262,7 @@ export default function App() {
|
||||
</div>
|
||||
</header>
|
||||
<main
|
||||
className={`page-content ${page === "alphas" ? "bounded-page" : "account-page"}`}
|
||||
className={`page-content ${page !== "account" ? "bounded-page" : "account-page"}`}
|
||||
>
|
||||
{pollError && (
|
||||
<Banner
|
||||
@@ -249,6 +277,18 @@ export default function App() {
|
||||
onTask={taskCreated}
|
||||
/>
|
||||
</div>
|
||||
<div className="alpha-page-view" hidden={page !== "datasets"}>
|
||||
<DatasetPage
|
||||
account={account}
|
||||
jobs={jobs}
|
||||
active={page === "datasets"}
|
||||
version={`${refreshKey}:${completedVersion}`}
|
||||
suspended={showJobs || chatOpen}
|
||||
onTask={taskCreated}
|
||||
onModal={setCatalogModal}
|
||||
onChat={() => setChatOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
<div className="alpha-page-view" hidden={page !== "alphas"}>
|
||||
<AlphaPage
|
||||
taskPanelOpen={showJobs}
|
||||
@@ -280,7 +320,7 @@ export default function App() {
|
||||
changePage("account");
|
||||
}}
|
||||
/>
|
||||
{!chatOpen && (
|
||||
{!chatOpen && !catalogModal && (
|
||||
<Button
|
||||
className="ai-launcher"
|
||||
aria-label="打开研究助手"
|
||||
@@ -298,30 +338,36 @@ export default function App() {
|
||||
onClick={() => setChatOpen(false)}
|
||||
/>
|
||||
)}
|
||||
<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");
|
||||
requestAnimationFrame(() =>
|
||||
document
|
||||
.getElementById("model-settings")
|
||||
?.scrollIntoView({ block: "start" }),
|
||||
);
|
||||
}}
|
||||
onChanged={actionDone}
|
||||
onAction={(action) => {
|
||||
focusBusiness();
|
||||
changePage("alphas");
|
||||
setAIAction(action);
|
||||
}}
|
||||
/>
|
||||
<div inert={catalogModal && !chatOpen}>
|
||||
<ChatPanel
|
||||
jobs={jobs}
|
||||
open={chatOpen}
|
||||
width={chatWidth}
|
||||
onWidth={setChatWidth}
|
||||
onClose={() => setChatOpen(false)}
|
||||
context={
|
||||
page === "alphas"
|
||||
? alphaContext
|
||||
: { page: page === "datasets" ? "datasets" : "account" }
|
||||
}
|
||||
timezone={account?.timezone}
|
||||
onSettings={() => {
|
||||
focusBusiness();
|
||||
changePage("account");
|
||||
requestAnimationFrame(() =>
|
||||
document
|
||||
.getElementById("model-settings")
|
||||
?.scrollIntoView({ block: "start" }),
|
||||
);
|
||||
}}
|
||||
onChanged={actionDone}
|
||||
onAction={(action) => {
|
||||
focusBusiness();
|
||||
changePage("alphas");
|
||||
setAIAction(action);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</LocaleProvider>
|
||||
|
||||
@@ -434,9 +434,11 @@ export function ChatPanel({
|
||||
</div>
|
||||
<footer className="ai-composer" ref={input}>
|
||||
<div className="ai-context">
|
||||
{context.page === "account"
|
||||
? "上下文：个人信息页"
|
||||
: `上下文：${context.alpha_id ? `Alpha ${context.alpha_id}` : "Alpha 列表"}${context.selected_ids?.length ? ` · 已选 ${context.selected_ids.length} 条` : ""}`}
|
||||
{context.page === "datasets"
|
||||
? "上下文：数据目录（未发送字段与备注）"
|
||||
: context.page === "account"
|
||||
? "上下文：个人信息页"
|
||||
: `上下文：${context.alpha_id ? `Alpha ${context.alpha_id}` : "Alpha 列表"}${context.selected_ids?.length ? ` · 已选 ${context.selected_ids.length} 条` : ""}`}
|
||||
</div>
|
||||
<TextArea
|
||||
aria-label="发送给研究助手"
|
||||
|
||||
@@ -11,7 +11,7 @@ export type ModelSettings = {
|
||||
test_results: Record<string, { ok: boolean; message: string }>;
|
||||
};
|
||||
export type PageContext = {
|
||||
page: "alphas" | "account";
|
||||
page: "alphas" | "account" | "datasets";
|
||||
alpha_id?: string | null;
|
||||
selected_ids?: string[];
|
||||
filters?: Record<string, unknown>;
|
||||
|
||||
@@ -82,6 +82,8 @@ export const stateOptions = Object.entries(stateLabels).map(
|
||||
([value, label]) => ({ value, label }),
|
||||
);
|
||||
export const jobLabels: Record<string, string> = {
|
||||
catalog_sync: "同步数据集目录",
|
||||
field_sync: "同步数据字段",
|
||||
full_sync: "全量同步 Alpha",
|
||||
alpha_refresh: "导入 / 刷新 Alpha",
|
||||
pnl_refresh: "获取 PnL",
|
||||
|
||||
@@ -71,6 +71,13 @@ export function JobPanel({
|
||||
{jobStateLabels[job.status] ?? job.status}
|
||||
</Tag>
|
||||
</div>
|
||||
{job.payload?.scope && (
|
||||
<p>
|
||||
{job.payload.dataset_id || "数据集目录"} ·{" "}
|
||||
{job.payload.scope.region} · {job.payload.scope.universe} · Delay{" "}
|
||||
{job.payload.scope.delay}
|
||||
</p>
|
||||
)}
|
||||
<p className="muted">{formatTime(job.created_at, timezone)}</p>
|
||||
<div className="job-numbers">
|
||||
<span>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,144 @@
|
||||
.catalog-page,
|
||||
.catalog-layer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.catalog-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.catalog-page > .catalog-tools {
|
||||
padding: 0 0 12px;
|
||||
}
|
||||
.catalog-tools > .semi-input-wrapper {
|
||||
width: 240px;
|
||||
min-width: 120px;
|
||||
}
|
||||
.catalog-tools > .semi-select {
|
||||
min-width: 112px;
|
||||
max-width: 220px;
|
||||
}
|
||||
.catalog-tools > span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.catalog-sheet .semi-sidesheet-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.catalog-sheet .semi-sidesheet-body {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.catalog-sheet .semi-sidesheet-inner {
|
||||
box-shadow: none;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.catalog-sheet .semi-sidesheet-mask {
|
||||
background: #1f232926;
|
||||
}
|
||||
.catalog-layer > .catalog-tools {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.catalog-table .semi-table-row-cell,
|
||||
.catalog-table .semi-button {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.catalog-table .semi-table-row-cell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.catalog-name {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.catalog-name .semi-button-content {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.catalog-details-body {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.catalog-details-body > p,
|
||||
.catalog-details-body > h2 {
|
||||
margin-bottom: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.catalog-details-body dl {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.catalog-details-body dl > div {
|
||||
display: grid;
|
||||
grid-template-columns: 80px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.catalog-details-body dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
.catalog-details-body dd {
|
||||
margin: 0;
|
||||
}
|
||||
.catalog-draft {
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 12px 0;
|
||||
}
|
||||
.catalog-draft details {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.catalog-draft summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.catalog-tools {
|
||||
padding: 8px;
|
||||
}
|
||||
.catalog-tools > .semi-input-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
.catalog-layer .catalog-tools {
|
||||
max-height: 32%;
|
||||
overflow: auto;
|
||||
}
|
||||
.catalog-page > .catalog-tools {
|
||||
max-height: 28%;
|
||||
overflow: auto;
|
||||
}
|
||||
.catalog-page .library-panel > .catalog-tools {
|
||||
max-height: 32%;
|
||||
overflow: auto;
|
||||
}
|
||||
.catalog-layer .table-pagination {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.catalog-layer .table-pagination > span {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.catalog-sr-label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -75,6 +75,15 @@ export type AccountUsage = {
|
||||
errors: Record<string, string>;
|
||||
};
|
||||
export type Job = {
|
||||
payload?: {
|
||||
scope?: {
|
||||
instrument_type: string;
|
||||
region: string;
|
||||
universe: string;
|
||||
delay: number;
|
||||
};
|
||||
dataset_id?: string;
|
||||
};
|
||||
id: string;
|
||||
kind: string;
|
||||
status: string;
|
||||
|
||||
Reference in New Issue
Block a user