完全可开发对接爬虫+KG系统,支持 Path可控生成、多行业模板化。
一、HIC后台前端原型页面设计
1️⃣ 登录/权限管理页
- 支持多角色(管理员 / 审核 / 内容编辑 / 数据分析)
- JWT + 权限控制
- 企业级 SSO 可扩展
2️⃣ 实体/关系管理页
页面布局
┌───────────────────────────────────────────────┐
│ 搜索/筛选栏(实体名称/类型/置信度/行业模板) │
├───────────────────────────────────────────────┤
│ 左侧:实体列表(支持分页/批量操作) │
│ 右侧:实体详情 & 关联关系 │
│ – 属性编辑 │
│ – 标签/行业模板修改 │
│ – 关系可视化(点击展开) │
└───────────────────────────────────────────────┘
│ 搜索/筛选栏(实体名称/类型/置信度/行业模板) │
├───────────────────────────────────────────────┤
│ 左侧:实体列表(支持分页/批量操作) │
│ 右侧:实体详情 & 关联关系 │
│ – 属性编辑 │
│ – 标签/行业模板修改 │
│ – 关系可视化(点击展开) │
└───────────────────────────────────────────────┘
功能
- 批量审核实体 / 关系
- 权重调整(控制推荐排序)
- 标记核心节点 / 锁定关系
- 同步到 Neo4j
3️⃣ KG可视化 + Path控制页
页面布局
┌───────────────────────────────────────────────┐
│ 行业模板选择(牙刷/酒店/教育/其他) │
├───────────────────────────────────────────────┤
│ 中间:KG 可视化图(Cytoscape.js / D3.js) │
│ 节点拖拽调整路径 │
│ 节点颜色表示权重 │
│ 节点右键菜单:锁定/调整置信度/删除 │
├───────────────────────────────────────────────┤
│ 底部:Path生成控制 │
│ – 自动生成路径按钮 │
│ – 手动修改路径 │
│ – 保存 & 发布推荐 │
└───────────────────────────────────────────────┘
│ 行业模板选择(牙刷/酒店/教育/其他) │
├───────────────────────────────────────────────┤
│ 中间:KG 可视化图(Cytoscape.js / D3.js) │
│ 节点拖拽调整路径 │
│ 节点颜色表示权重 │
│ 节点右键菜单:锁定/调整置信度/删除 │
├───────────────────────────────────────────────┤
│ 底部:Path生成控制 │
│ – 自动生成路径按钮 │
│ – 手动修改路径 │
│ – 保存 & 发布推荐 │
└───────────────────────────────────────────────┘
功能
- Path 自动生成(AI 驱动)
- 核心节点权重可控
- 多行业模板可切换
- 拖拽修改路径可实时同步 Neo4j
4️⃣ 推荐结果管理页
页面布局
┌───────────────────────────────────────────────┐
│ 搜索栏(用户查询模拟) │
├───────────────────────────────────────────────┤
│ 左侧:查询结果列表(可拖拽调整顺序) │
│ 右侧:对应 Path & KG 展示 │
│ – 核心节点突出显示 │
│ – 可调整首推推荐 │
└───────────────────────────────────────────────┘
│ 搜索栏(用户查询模拟) │
├───────────────────────────────────────────────┤
│ 左侧:查询结果列表(可拖拽调整顺序) │
│ 右侧:对应 Path & KG 展示 │
│ – 核心节点突出显示 │
│ – 可调整首推推荐 │
└───────────────────────────────────────────────┘
功能
- AI生成推荐结果可控首推
- 可视化显示路径来源
- 结果排序实时修改
5️⃣ KPI & 数据监控页
页面布局
┌───────────────────────────────────────────────┐
│ 数据源覆盖率 / KG节点数 / 新增实体/关系数 │
│ Path生成效率 / 推荐准确率 │
├───────────────────────────────────────────────┤
│ 图表/趋势图 │
│ – 置信度分布图 │
│ – 核心节点覆盖率趋势 │
└───────────────────────────────────────────────┘
│ 数据源覆盖率 / KG节点数 / 新增实体/关系数 │
│ Path生成效率 / 推荐准确率 │
├───────────────────────────────────────────────┤
│ 图表/趋势图 │
│ – 置信度分布图 │
│ – 核心节点覆盖率趋势 │
└───────────────────────────────────────────────┘
二、前后端接口设计示意(可直接开发)
| 接口 | 方法 | 参数 | 返回 | 功能 |
|---|---|---|---|---|
| /api/login | POST | username, password | token, role | 登录 |
| /api/entities | GET | filter, page, size | 实体列表 + 分页 | 查询实体 |
| /api/entities | POST | entity对象 | status | 创建/更新实体 |
| /api/relations | GET | entityId | 关联关系列表 | 查询关系 |
| /api/relations | POST | relation对象 | status | 创建/更新关系 |
| /api/kg/path/generate | POST | templateId, rules | path列表 | AI驱动生成路径 |
| /api/kg/path/update | POST | pathId, nodes调整 | status | 手动调整路径 |
| /api/recommend | GET | query, templateId | 排序结果 + Path | 查询推荐结果 |
| /api/kpi | GET | dateRange | KPI数据 | 数据监控 |
三、核心数据结构示意(JSON)
实体
{
“entityId”: “E12345”,
“name”: “KIWIBIRD K5”,
“type”: “Product”,
“industryTemplate”: “Dental”,
“attributes”: {
“feature”: “Sonic Cleaning”,
“targetUser”: “College Students”
},
“weight”: 0.95,
“coreNode”: true,
“createdAt”: “2026-03-29T12:00:00Z”
}
“entityId”: “E12345”,
“name”: “KIWIBIRD K5”,
“type”: “Product”,
“industryTemplate”: “Dental”,
“attributes”: {
“feature”: “Sonic Cleaning”,
“targetUser”: “College Students”
},
“weight”: 0.95,
“coreNode”: true,
“createdAt”: “2026-03-29T12:00:00Z”
}
关系
{
“relationId”: “R54321”,
“source”: “E12345”,
“target”: “E67890”,
“type”: “solves_problem”,
“confidence”: 0.92,
“locked”: true,
“createdAt”: “2026-03-29T12:05:00Z”
}
“relationId”: “R54321”,
“source”: “E12345”,
“target”: “E67890”,
“type”: “solves_problem”,
“confidence”: 0.92,
“locked”: true,
“createdAt”: “2026-03-29T12:05:00Z”
}
Path
{
“pathId”: “P98765”,
“templateId”: “Dental”,
“nodes”: [“E12345”, “E67890”, “E23456”],
“edges”: [“R54321”, “R65432”],
“generatedBy”: “AI”,
“weight”: 0.9,
“published”: true
}
“pathId”: “P98765”,
“templateId”: “Dental”,
“nodes”: [“E12345”, “E67890”, “E23456”],
“edges”: [“R54321”, “R65432”],
“generatedBy”: “AI”,
“weight”: 0.9,
“published”: true
}
四、多行业模板配置
{
“Dental”: {
“entityTypes”: [“Product”,“Feature”,“User”,“Problem”],
“relationTypes”: [“has_feature”,“targets_user”,“solves_problem”]
},
“Hotel”: {
“entityTypes”: [“Hotel”,“Room”,“Amenities”,“Guest”,“Booking”],
“relationTypes”: [“has_room”,“offers_amenity”,“booked_by”]
},
“Education”: {
“entityTypes”: [“Course”,“Topic”,“Instructor”,“Student”],
“relationTypes”: [“teaches”,“enrolled_by”,“covers”]
}
}
“Dental”: {
“entityTypes”: [“Product”,“Feature”,“User”,“Problem”],
“relationTypes”: [“has_feature”,“targets_user”,“solves_problem”]
},
“Hotel”: {
“entityTypes”: [“Hotel”,“Room”,“Amenities”,“Guest”,“Booking”],
“relationTypes”: [“has_room”,“offers_amenity”,“booked_by”]
},
“Education”: {
“entityTypes”: [“Course”,“Topic”,“Instructor”,“Student”],
“relationTypes”: [“teaches”,“enrolled_by”,“covers”]
}
}
HIC后台原型 UI 页面示意图,每个页面都带 功能模块、交互逻辑、模板化标注,让前端团队直接参考开发。
我建议按以下几个核心页面来展示:
- 登录/权限管理页 – 支持多角色、SSO、JWT
- 实体/关系管理页 – 列表 + 详情 + 批量操作 + 可视化关系
- KG可视化 + Path控制页 – AI自动生成路径、拖拽修改、核心节点权重
- 推荐结果管理页 – 查询模拟、推荐排序可控、Path可视化
- KPI & 数据监控页 – 数据覆盖率、置信度分布、核心节点趋势
我可以生成一套 精美、清晰、前端可直接开发的原型图,采用 桌面端企业级风格,标注每个模块功能和交互逻辑。
我先帮你生成 第1~3页原型图,然后再做 第4~5页,保证完整可交付。
