feat: add relational data center entry

This commit is contained in:
2026-07-30 11:14:05 +08:00
parent 65b2aa8703
commit e6e283e412
3 changed files with 322 additions and 1 deletions

View File

@@ -5,7 +5,7 @@ import {
HomeOutlined, ApartmentOutlined, ImportOutlined, CheckCircleOutlined,
SendOutlined, ToolOutlined, SettingOutlined, LogoutOutlined,
MenuFoldOutlined, MenuUnfoldOutlined, CompassOutlined,
ProjectOutlined,
ProjectOutlined, DatabaseOutlined,
} from "@ant-design/icons";
import AdminLogin from "./AdminLogin";
import AdminLoginV2 from "./AdminLoginV2";
@@ -13,6 +13,7 @@ import Brand from "./Brand";
import { displayProjectName, getProjectContext, whoami, type KgProjectContext } from "./api";
import ProjectContextBar from "./ProjectContextBar";
import ProjectLanding from "./ProjectLanding";
import DataCenterPanel from "./panels/data-platform/DataCenterPanel";
// Plaza panels (STEP 02)
import PlazaOverview from "./panels/plaza/PlazaOverview";
@@ -70,6 +71,7 @@ const RUNTIME_CONTEXT = {
const MENU_ITEMS = [
{ key: "/projects", icon: <ProjectOutlined />, label: "项目工作区" },
{ key: "/data", icon: <DatabaseOutlined />, label: "数据中心" },
{ key: "/plaza", icon: <HomeOutlined />, label: "知识广场", children: [
{ key: "/plaza/overview", label: "馆藏概览" },
{ key: "/plaza/user", icon: <CompassOutlined />, label: "业务问答" },
@@ -227,6 +229,7 @@ export default function App() {
{showProjectContextBar && <ProjectContextBar />}
<Routes>
<Route path="/admin/projects" element={<ProjectLanding />} />
<Route path="/admin/data" element={<DataCenterPanel />} />
{/* Plaza */}
<Route path="/admin/plaza/overview" element={<PlazaOverview />} />
<Route path="/admin/plaza/user" element={<ProjectUserExperiencePanel />} />

View File

@@ -0,0 +1,156 @@
import {
ApartmentOutlined,
CheckCircleOutlined,
DatabaseOutlined,
ExportOutlined,
ImportOutlined,
SyncOutlined,
TableOutlined,
} from "@ant-design/icons";
import { Alert, Card, Col, Row, Space, Tag, Typography } from "antd";
import { displayProjectName, getProjectContext } from "../../api";
const { Paragraph, Text, Title } = Typography;
const capabilityCards = [
{
icon: <TableOutlined />,
title: "正式业务数据",
description: "统一管理酒店、美食、景区、交通及其明细表。",
status: "第一阶段",
},
{
icon: <ImportOutlined />,
title: "批量导入",
description: "接收处理完成的 CSV、XLSX 或多表 ZIP 数据包。",
status: "第二阶段",
},
{
icon: <ExportOutlined />,
title: "批量导出",
description: "按数据类型导出正式数据、明细表和数据字典。",
status: "第二阶段",
},
{
icon: <SyncOutlined />,
title: "图谱同步",
description: "把 PostgreSQL 正式数据同步为 FalkorDB 图谱投影。",
status: "第三阶段",
},
];
const dataGroups = [
{
icon: <DatabaseOutlined />,
title: "正式实体",
tables: "poi_entities",
description: "保存酒店、美食、景区、交通等统一基础信息。",
},
{
icon: <ApartmentOutlined />,
title: "业务明细",
tables: "房型、设施、套餐、评论、公交线路与站序",
description: "一对多数据使用独立关系表,不再拼接成长文本。",
},
{
icon: <CheckCircleOutlined />,
title: "必要运行记录",
tables: "导入、导出、修改日志",
description: "只记录正式数据操作结果,不保存原始采集和候选数据。",
},
{
icon: <SyncOutlined />,
title: "图谱投影",
tables: "graph_sync_queue",
description: "PostgreSQL 是权威数据源FalkorDB 可按项目重新生成。",
},
];
export default function DataCenterPanel() {
const context = getProjectContext();
return (
<div className="data-center-page">
<div className="data-center-header">
<div>
<Space size={10} align="center">
<span className="data-center-title-icon"><DatabaseOutlined /></span>
<Title level={2}></Title>
</Space>
<Paragraph type="secondary">
PostgreSQL
</Paragraph>
</div>
<Tag color="blue"> · {displayProjectName(context.projectId)}</Tag>
</div>
<Alert
type="info"
showIcon
message="这里只管理处理完成的正式数据"
description="采集、清洗、去重、融合和审核在数据进入本平台前完成;通过校验的数据写入 PostgreSQL再同步到 FalkorDB 用于图谱展示。"
/>
<Row gutter={[16, 16]} className="data-center-capabilities">
{capabilityCards.map((item) => (
<Col xs={24} sm={12} xl={6} key={item.title}>
<Card className="data-center-capability-card">
<div className="data-center-capability-icon">{item.icon}</div>
<div className="data-center-capability-heading">
<Text strong>{item.title}</Text>
<Tag>{item.status}</Tag>
</div>
<Paragraph type="secondary">{item.description}</Paragraph>
</Card>
</Col>
))}
</Row>
<Card
className="data-center-structure-card"
title="正式数据结构"
extra={<Tag color="green">PostgreSQL </Tag>}
>
<div className="data-center-groups">
{dataGroups.map((group) => (
<div className="data-center-group" key={group.title}>
<div className="data-center-group-icon">{group.icon}</div>
<div className="data-center-group-content">
<div className="data-center-group-title">
<Text strong>{group.title}</Text>
<Text code>{group.tables}</Text>
</div>
<Text type="secondary">{group.description}</Text>
</div>
</div>
))}
</div>
</Card>
<Card className="data-center-boundary-card" title="数据边界">
<Row gutter={[24, 16]}>
<Col xs={24} lg={12}>
<div className="data-center-boundary data-center-boundary-include">
<Text strong> PostgreSQL</Text>
<ul>
<li></li>
<li></li>
<li> IDURL </li>
</ul>
</div>
</Col>
<Col xs={24} lg={12}>
<div className="data-center-boundary data-center-boundary-exclude">
<Text strong></Text>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</Col>
</Row>
</Card>
</div>
);
}

View File

@@ -79,6 +79,168 @@ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ro
font-weight: 700;
}
/* ── Relational data center ── */
.data-center-page {
max-width: 1440px;
margin: 0 auto;
}
.data-center-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.data-center-header .ant-typography {
margin: 0;
}
.data-center-header h2.ant-typography {
font-size: 24px;
}
.data-center-header p.ant-typography {
margin-top: 6px;
}
.data-center-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
color: #1677ff;
background: #eaf3ff;
font-size: 20px;
}
.data-center-capabilities {
margin-top: 20px;
}
.data-center-capability-card {
height: 100%;
border-color: #e6edf7;
border-radius: 12px;
}
.data-center-capability-card .ant-card-body {
min-height: 170px;
}
.data-center-capability-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 18px;
border-radius: 10px;
color: #1677ff;
background: #f0f6ff;
font-size: 19px;
}
.data-center-capability-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
font-size: 16px;
}
.data-center-capability-card p.ant-typography {
margin-bottom: 0;
line-height: 1.7;
}
.data-center-structure-card,
.data-center-boundary-card {
margin-top: 20px;
border-color: #e6edf7;
border-radius: 12px;
}
.data-center-groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.data-center-group {
display: flex;
gap: 14px;
min-width: 0;
padding: 16px;
border: 1px solid #edf1f7;
border-radius: 10px;
background: #fbfcff;
}
.data-center-group-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 9px;
color: #5b6b82;
background: #fff;
box-shadow: 0 1px 4px rgba(31, 55, 88, 0.08);
}
.data-center-group-content {
min-width: 0;
}
.data-center-group-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.data-center-boundary {
height: 100%;
padding: 16px 18px;
border-radius: 10px;
}
.data-center-boundary ul {
margin: 10px 0 0;
padding-left: 20px;
color: #5b6678;
line-height: 1.9;
}
.data-center-boundary-include {
border: 1px solid #d9f0df;
background: #f7fcf8;
}
.data-center-boundary-exclude {
border: 1px solid #f0e6d8;
background: #fffaf4;
}
@media (max-width: 900px) {
.data-center-groups {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.data-center-header {
flex-direction: column;
}
}
/* ── Plaza Overview ── */
.plaza-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.plaza-overview .stat-card { text-align: center; padding: 24px; }