282 lines
12 KiB
TypeScript
282 lines
12 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import { Routes, Route, useNavigate, useLocation, Navigate } from "react-router-dom";
|
|
import { Layout, Menu, Button, Spin, Tag, Tooltip } from "antd";
|
|
import {
|
|
HomeOutlined, ApartmentOutlined, ImportOutlined, CheckCircleOutlined,
|
|
SendOutlined, ToolOutlined, SettingOutlined, LogoutOutlined,
|
|
MenuFoldOutlined, MenuUnfoldOutlined, CompassOutlined,
|
|
ProjectOutlined,
|
|
} from "@ant-design/icons";
|
|
import AdminLogin from "./AdminLogin";
|
|
import AdminLoginV2 from "./AdminLoginV2";
|
|
import Brand from "./Brand";
|
|
import { displayProjectName, getProjectContext, whoami, type KgProjectContext } from "./api";
|
|
import ProjectContextBar from "./ProjectContextBar";
|
|
import ProjectLanding from "./ProjectLanding";
|
|
|
|
// Plaza panels (STEP 02)
|
|
import PlazaOverview from "./panels/plaza/PlazaOverview";
|
|
import GraphCanvas from "./panels/plaza/GraphCanvas";
|
|
import ManualIngestPanel from "./panels/plaza/ManualIngestPanel";
|
|
import ProjectUserExperiencePanel from "./panels/plaza/ProjectUserExperiencePanel";
|
|
import AuditReport from "./panels/plaza/AuditReport";
|
|
import UsageStats from "./panels/plaza/UsageStats";
|
|
import HealthAlerts from "./panels/plaza/HealthAlerts";
|
|
|
|
// Modeling panels
|
|
import VocabularyPanel from "./panels/modeling/VocabularyPanel";
|
|
import OntologySchemaPanel from "./panels/modeling/OntologySchemaPanel";
|
|
import SchemaHealth from "./panels/modeling/SchemaHealth";
|
|
|
|
// Acquisition panels (STEP 01)
|
|
import BatchCenter from "./panels/acquisition/BatchCenter";
|
|
import SourceProfilesPanel from "./panels/acquisition/SourceProfilesPanel";
|
|
import ConflictDesk from "./panels/acquisition/ConflictDesk";
|
|
|
|
// Review panels (STEP 03)
|
|
import AssetLibrary from "./panels/review/AssetLibrary";
|
|
import FieldLevelReview from "./panels/review/FieldLevelReview";
|
|
import AccessionView from "./panels/review/AccessionView";
|
|
import ExpertSignoff from "./panels/review/ExpertSignoff";
|
|
import PoiEvidenceQuality from "./panels/review/PoiEvidenceQuality";
|
|
|
|
// Publish panels (STEP 05)
|
|
import PublishPanel from "./panels/publish/PublishPanel";
|
|
import RollbackPanel from "./panels/publish/RollbackPanel";
|
|
|
|
// Workbench panels (STEP 04)
|
|
import InventoryPanel from "./panels/workbench/InventoryPanel";
|
|
import AcquisitionTasksPanel from "./panels/workbench/AcquisitionTasksPanel";
|
|
import TreatmentHistory from "./panels/workbench/TreatmentHistory";
|
|
|
|
// System panels
|
|
import AgentTasksPanel from "./panels/system/AgentTasksPanel";
|
|
import LogsPanel from "./panels/system/LogsPanel";
|
|
import PermissionsAudit from "./panels/system/PermissionsAudit";
|
|
import UserManagement from "./panels/system/UserManagement";
|
|
import AreaManagement from "./panels/system/AreaManagement";
|
|
import Notifications from "./panels/system/Notifications";
|
|
import NotificationBell from "./panels/system/NotificationBell";
|
|
import AgentSettings from "./panels/system/AgentSettings";
|
|
|
|
const { Sider, Content } = Layout;
|
|
const RUNTIME_CONTEXT = {
|
|
tenant: "CityGraph-new2",
|
|
project: "CityGraph-new2",
|
|
dbSchema: "kg_admin_new2",
|
|
graph: "guiyang_new2",
|
|
port: "8102",
|
|
};
|
|
|
|
const MENU_ITEMS = [
|
|
{ key: "/projects", icon: <ProjectOutlined />, label: "项目工作区" },
|
|
{ key: "/plaza", icon: <HomeOutlined />, label: "知识广场", children: [
|
|
{ key: "/plaza/overview", label: "馆藏概览" },
|
|
{ key: "/plaza/user", icon: <CompassOutlined />, label: "业务问答" },
|
|
{ key: "/plaza/graph", label: "图谱浏览器" },
|
|
{ key: "/plaza/manual-ingest", label: "人工录入" },
|
|
{ key: "/plaza/audit", label: "AI 质量稽查" },
|
|
{ key: "/plaza/usage", label: "使用统计" },
|
|
{ key: "/plaza/alerts", label: "健康告警" },
|
|
]},
|
|
{ key: "/modeling", icon: <ApartmentOutlined />, label: "本体建模", children: [
|
|
{ key: "/modeling/schema", label: "本体 Schema" },
|
|
{ key: "/modeling/vocabulary", label: "权威词表" },
|
|
{ key: "/modeling/health", label: "Schema 健康" },
|
|
]},
|
|
{ key: "/acquisition", icon: <ImportOutlined />, label: "数据采集", children: [
|
|
{ key: "/acquisition/batches", label: "来源批次中心" },
|
|
{ key: "/acquisition/sources", label: "来源档案" },
|
|
{ key: "/acquisition/conflicts", label: "冲突处理台" },
|
|
]},
|
|
{ key: "/review", icon: <CheckCircleOutlined />, label: "审核入藏", children: [
|
|
{ key: "/review/candidates", label: "候选审核" },
|
|
{ key: "/review/poi-evidence", label: "POI 证据质检" },
|
|
{ key: "/review/field-level", label: "字段级审核" },
|
|
{ key: "/review/accession", label: "入藏记录" },
|
|
{ key: "/review/expert-signoff", label: "专家会签" },
|
|
]},
|
|
{ key: "/publish", icon: <SendOutlined />, label: "图谱发布", children: [
|
|
{ key: "/publish/jobs", label: "发布管理" },
|
|
{ key: "/publish/rollback", label: "发布回滚" },
|
|
]},
|
|
{ key: "/workbench", icon: <ToolOutlined />, label: "治理工作台", children: [
|
|
{ key: "/workbench/inventory", label: "知识盘点" },
|
|
{ key: "/workbench/tasks", label: "补藏队列" },
|
|
{ key: "/workbench/history", label: "历史治理" },
|
|
]},
|
|
{ key: "/system", icon: <SettingOutlined />, label: "系统", children: [
|
|
{ key: "/system/agents", label: "Agent 任务" },
|
|
{ key: "/system/logs", label: "调用日志" },
|
|
{ key: "/system/users", label: "用户管理" },
|
|
{ key: "/system/permissions", label: "角色权限" },
|
|
{ key: "/system/areas", label: "城区责任" },
|
|
{ key: "/system/notifications", label: "我的消息" },
|
|
{ key: "/system/settings", label: "Agent 设置" },
|
|
]},
|
|
];
|
|
|
|
export default function App() {
|
|
const [authed, setAuthed] = useState(false);
|
|
const [checking, setChecking] = useState(true);
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [projectContext, setProjectContextState] = useState<KgProjectContext>(getProjectContext());
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const checkAuth = useCallback(async () => {
|
|
const token = localStorage.getItem("token");
|
|
if (!token) { setChecking(false); return; }
|
|
try {
|
|
await whoami();
|
|
setAuthed(true);
|
|
} catch {
|
|
localStorage.removeItem("token");
|
|
}
|
|
setChecking(false);
|
|
}, []);
|
|
|
|
useEffect(() => { checkAuth(); }, [checkAuth]);
|
|
|
|
useEffect(() => {
|
|
const onChange = () => setProjectContextState(getProjectContext());
|
|
window.addEventListener("znkg-project-context", onChange);
|
|
return () => window.removeEventListener("znkg-project-context", onChange);
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("token");
|
|
setAuthed(false);
|
|
navigate("/admin/login");
|
|
};
|
|
|
|
if (checking) return <Spin size="large" style={{ display: "block", margin: "200px auto" }} />;
|
|
|
|
if (!authed) {
|
|
return (
|
|
<Routes>
|
|
<Route path="/admin/login" element={<AdminLogin onLogin={() => { setAuthed(true); navigate("/admin/projects"); }} />} />
|
|
<Route path="/admin/login-v2" element={<AdminLoginV2 onLogin={() => { setAuthed(true); navigate("/admin/projects"); }} />} />
|
|
<Route path="*" element={<Navigate to="/admin/login" />} />
|
|
</Routes>
|
|
);
|
|
}
|
|
|
|
const onMenuClick = ({ key }: { key: string }) => navigate(`/admin${key}`);
|
|
|
|
const selectedKey = location.pathname.replace("/admin", "") || "/projects";
|
|
const openKeys = [selectedKey.split("/").slice(0, 2).join("/")];
|
|
const showProjectContextBar = location.pathname === "/admin/projects";
|
|
|
|
return (
|
|
<Layout className="admin-layout" style={{ minHeight: "100vh" }}>
|
|
<Sider
|
|
theme="light"
|
|
width={220}
|
|
collapsedWidth={72}
|
|
collapsible
|
|
collapsed={collapsed}
|
|
trigger={null}
|
|
className="app-sider"
|
|
>
|
|
<div className="sider-inner">
|
|
<div className={`sider-brand${collapsed ? " collapsed" : ""}`}>
|
|
{!collapsed && <Brand size={22} />}
|
|
<Tooltip title={collapsed ? "展开侧栏" : "收起侧栏"} placement="right">
|
|
<Button
|
|
type="text"
|
|
className="collapse-btn"
|
|
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
<div className="sider-menu">
|
|
<Menu
|
|
mode="inline"
|
|
selectedKeys={[selectedKey]}
|
|
defaultOpenKeys={collapsed ? [] : openKeys}
|
|
items={MENU_ITEMS}
|
|
onClick={onMenuClick}
|
|
style={{ borderRight: 0 }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="sider-footer">
|
|
{!collapsed && (
|
|
<div className="ctx-row">
|
|
<Tag color="blue">new2 · {RUNTIME_CONTEXT.port}</Tag>
|
|
<Tag color="green">项目 · {displayProjectName(projectContext.projectId)}</Tag>
|
|
<Tag color="purple">Schema · {RUNTIME_CONTEXT.dbSchema}</Tag>
|
|
</div>
|
|
)}
|
|
<div className={`footer-actions${collapsed ? " collapsed" : ""}`}>
|
|
<NotificationBell />
|
|
<Tooltip title="退出登录" placement="right">
|
|
<Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}>
|
|
{!collapsed && "退出"}
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Sider>
|
|
<Layout className="app-main">
|
|
<Content className="app-content">
|
|
{showProjectContextBar && <ProjectContextBar />}
|
|
<Routes>
|
|
<Route path="/admin/projects" element={<ProjectLanding />} />
|
|
{/* Plaza */}
|
|
<Route path="/admin/plaza/overview" element={<PlazaOverview />} />
|
|
<Route path="/admin/plaza/user" element={<ProjectUserExperiencePanel />} />
|
|
<Route path="/admin/plaza/graph" element={<GraphCanvas />} />
|
|
<Route path="/admin/plaza/manual-ingest" element={<ManualIngestPanel />} />
|
|
<Route path="/admin/plaza/audit" element={<AuditReport />} />
|
|
<Route path="/admin/plaza/usage" element={<UsageStats />} />
|
|
<Route path="/admin/plaza/alerts" element={<HealthAlerts />} />
|
|
|
|
{/* Modeling */}
|
|
<Route path="/admin/modeling/schema" element={<OntologySchemaPanel />} />
|
|
<Route path="/admin/modeling/vocabulary" element={<VocabularyPanel />} />
|
|
<Route path="/admin/modeling/health" element={<SchemaHealth />} />
|
|
|
|
{/* Acquisition */}
|
|
<Route path="/admin/acquisition/batches" element={<BatchCenter />} />
|
|
<Route path="/admin/acquisition/sources" element={<SourceProfilesPanel />} />
|
|
<Route path="/admin/acquisition/conflicts" element={<ConflictDesk />} />
|
|
|
|
{/* Review */}
|
|
<Route path="/admin/review/candidates" element={<AssetLibrary />} />
|
|
<Route path="/admin/review/poi-evidence" element={<PoiEvidenceQuality />} />
|
|
<Route path="/admin/review/field-level" element={<FieldLevelReview />} />
|
|
<Route path="/admin/review/accession" element={<AccessionView />} />
|
|
<Route path="/admin/review/expert-signoff" element={<ExpertSignoff />} />
|
|
|
|
{/* Publish */}
|
|
<Route path="/admin/publish/jobs" element={<PublishPanel />} />
|
|
<Route path="/admin/publish/rollback" element={<RollbackPanel />} />
|
|
|
|
{/* Workbench */}
|
|
<Route path="/admin/workbench/inventory" element={<InventoryPanel />} />
|
|
<Route path="/admin/workbench/tasks" element={<AcquisitionTasksPanel />} />
|
|
<Route path="/admin/workbench/history" element={<TreatmentHistory />} />
|
|
|
|
{/* System */}
|
|
<Route path="/admin/system/agents" element={<AgentTasksPanel />} />
|
|
<Route path="/admin/system/logs" element={<LogsPanel />} />
|
|
<Route path="/admin/system/users" element={<UserManagement />} />
|
|
<Route path="/admin/system/permissions" element={<PermissionsAudit />} />
|
|
<Route path="/admin/system/areas" element={<AreaManagement />} />
|
|
<Route path="/admin/system/notifications" element={<Notifications />} />
|
|
<Route path="/admin/system/settings" element={<AgentSettings />} />
|
|
|
|
<Route path="/admin/login-v2" element={<AdminLoginV2 onLogin={() => navigate("/admin/projects")} />} />
|
|
<Route path="*" element={<Navigate to="/admin/projects" />} />
|
|
</Routes>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
}
|