feat: add relational data center entry
This commit is contained in:
@@ -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 />} />
|
||||
|
||||
156
admin-web/src/panels/data-platform/DataCenterPanel.tsx
Normal file
156
admin-web/src/panels/data-platform/DataCenterPanel.tsx
Normal 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>已经确认的外部平台 ID、URL 和实体关系</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>
|
||||
);
|
||||
}
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user