feat: 新增多用户支持、关系历史查询与恋爱决策建议功能
- 新增用户服务，支持多用户数据隔离与认证 - 新增关系历史查询接口，支持按冲突、积极、时间线等类型过滤 - 新增恋爱决策建议接口，基于图谱分析生成关系健康报告 - 优化前端图谱可视化，增加节点详情面板、图例和边标签显示 - 改进文本分析逻辑，支持实体去重和情感标注 - 新增完整流程测试脚本，验证分析、入库、查询全链路
This commit is contained in:
KOSHM-Pig
@@ -86,6 +86,84 @@
|
||||
<p>加载图谱数据...</p>
|
||||
</div>
|
||||
<svg v-show="!graphLoading" ref="svgEl" class="graph-svg"></svg>
|
||||
<div v-if="graphLegendItems.length" class="graph-legend">
|
||||
<span class="legend-title">Entity Types</span>
|
||||
<div class="legend-items">
|
||||
<div v-for="item in graphLegendItems" :key="item.type" class="legend-item">
|
||||
<span class="legend-dot" :style="{ background: item.color }"></span>
|
||||
<span class="legend-label">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edge-labels-toggle">
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" v-model="showEdgeLabels" @change="refreshGraph" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">Show Edge Labels</span>
|
||||
</div>
|
||||
<div v-if="selectedDetail" class="detail-panel">
|
||||
<div class="detail-panel-header">
|
||||
<span class="detail-title">{{ selectedDetail.kind === 'node' ? '节点详情' : '关系详情' }}</span>
|
||||
<button class="detail-close" @click="clearSelection">×</button>
|
||||
</div>
|
||||
<div class="detail-content" v-if="selectedDetail.kind === 'node'">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">名称</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">类型</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.type || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">ID</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.id || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">节点大小</span>
|
||||
<span class="detail-value">{{ Math.round(selectedDetail.data.radius || 0) }}</span>
|
||||
</div>
|
||||
<div class="detail-row" v-if="selectedDetail.data.type === 'event'">
|
||||
<span class="detail-label">重要度</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.importance ?? '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-row" v-if="selectedDetail.data.occurred_at">
|
||||
<span class="detail-label">发生时间</span>
|
||||
<span class="detail-value">{{ formatDateTime(selectedDetail.data.occurred_at) }}</span>
|
||||
</div>
|
||||
<div class="detail-row" v-if="selectedDetail.data.summary">
|
||||
<span class="detail-label">摘要</span>
|
||||
<span class="detail-value summary-value">{{ selectedDetail.data.summary }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-content" v-else>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">关系类型</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.type || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-row" v-if="selectedDetail.data.eventCount">
|
||||
<span class="detail-label">事件数</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.eventCount }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">起点</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.sourceName || selectedDetail.data.source || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">终点</span>
|
||||
<span class="detail-value">{{ selectedDetail.data.targetName || selectedDetail.data.target || '-' }}</span>
|
||||
</div>
|
||||
<div class="detail-row" v-if="selectedDetail.data.occurred_at">
|
||||
<span class="detail-label">时间</span>
|
||||
<span class="detail-value">{{ formatDateTime(selectedDetail.data.occurred_at) }}</span>
|
||||
</div>
|
||||
<div class="detail-row" v-if="selectedDetail.data.summary">
|
||||
<span class="detail-label">摘要</span>
|
||||
<span class="detail-value summary-value">{{ selectedDetail.data.summary }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -235,6 +313,9 @@ const ingestLogs = ref([])
|
||||
const graphStats = ref({ nodes: 0, edges: 0 })
|
||||
const graphCanvas = ref(null)
|
||||
const svgEl = ref(null)
|
||||
const selectedDetail = ref(null)
|
||||
const showEdgeLabels = ref(false)
|
||||
const graphLegendItems = ref([])
|
||||
const apiMethod = ref('GET')
|
||||
const apiUrl = ref('')
|
||||
const apiBody = ref('')
|
||||
@@ -252,6 +333,10 @@ const quickEndpoints = [
|
||||
{ method: 'POST', path: '/auth/verify', body: '{"password":"your-password"}' }
|
||||
]
|
||||
|
||||
let graphSvgSelection = null
|
||||
let zoomBehavior = null
|
||||
let resetSelectionStyles = null
|
||||
|
||||
const fillApi = (ep) => {
|
||||
apiMethod.value = ep.method
|
||||
apiUrl.value = ep.path
|
||||
@@ -305,32 +390,51 @@ const refreshData = () => {
|
||||
}
|
||||
|
||||
const zoomIn = () => {
|
||||
if (!svgEl.value) return
|
||||
d3.select(svgEl.value).transition().call(d3.zoom().scaleBy, 1.3)
|
||||
if (!graphSvgSelection || !zoomBehavior) return
|
||||
graphSvgSelection.transition().call(zoomBehavior.scaleBy, 1.3)
|
||||
}
|
||||
|
||||
const zoomOut = () => {
|
||||
if (!svgEl.value) return
|
||||
d3.select(svgEl.value).transition().call(d3.zoom().scaleBy, 0.7)
|
||||
if (!graphSvgSelection || !zoomBehavior) return
|
||||
graphSvgSelection.transition().call(zoomBehavior.scaleBy, 0.7)
|
||||
}
|
||||
|
||||
const fitView = () => {
|
||||
if (!svgEl.value) return
|
||||
d3.select(svgEl.value).transition().call(d3.zoom().transform, d3.zoomIdentity)
|
||||
if (!graphSvgSelection || !zoomBehavior) return
|
||||
graphSvgSelection.transition().call(zoomBehavior.transform, d3.zoomIdentity)
|
||||
}
|
||||
|
||||
// 用户管理
|
||||
const userId = ref(localStorage.getItem('currentUserId') || 'user_' + Date.now().toString(36).substr(2, 9))
|
||||
localStorage.setItem('currentUserId', userId.value)
|
||||
|
||||
const fetchGraphData = async () => {
|
||||
const apiBase = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/graph/stats`, { method: 'GET' })
|
||||
const res = await fetch(`${apiBase}/graph/stats?userId=${encodeURIComponent(userId.value)}`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
if (res.ok) return await res.json()
|
||||
} catch {}
|
||||
} catch (error) {
|
||||
console.error('获取图谱数据失败:', error)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 刷新时重新获取用户ID
|
||||
onMounted(() => {
|
||||
const savedUserId = localStorage.getItem('currentUserId')
|
||||
if (savedUserId) {
|
||||
userId.value = savedUserId
|
||||
}
|
||||
})
|
||||
|
||||
const renderGraph = async () => {
|
||||
if (!graphCanvas.value || !svgEl.value) return
|
||||
graphLoading.value = true
|
||||
selectedDetail.value = null
|
||||
resetSelectionStyles = null
|
||||
|
||||
const width = graphCanvas.value.clientWidth
|
||||
const height = graphCanvas.value.clientHeight
|
||||
@@ -342,11 +446,10 @@ const renderGraph = async () => {
|
||||
.attr('height', height)
|
||||
|
||||
const data = await fetchGraphData()
|
||||
const nodes = Array.isArray(data?.nodes) ? data.nodes : []
|
||||
const links = Array.isArray(data?.links) ? data.links : []
|
||||
graphStats.value = { nodes: nodes.length, edges: links.length }
|
||||
const rawNodes = Array.isArray(data?.nodes) ? data.nodes : []
|
||||
const rawLinks = Array.isArray(data?.links) ? data.links : []
|
||||
|
||||
if (!nodes.length) {
|
||||
if (!rawNodes.length) {
|
||||
svg.append('text')
|
||||
.attr('x', width / 2)
|
||||
.attr('y', height / 2)
|
||||
@@ -358,27 +461,321 @@ const renderGraph = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
const colorMap = { person: '#6366f1', event: '#10b981', topic: '#f59e0b' }
|
||||
const rawNodeMap = new Map(rawNodes.map(n => [n.id, n]))
|
||||
const isEventNodeId = (id) => rawNodeMap.get(id)?.type === 'event'
|
||||
const getLinkSourceId = (l) => (l.source && typeof l.source === 'object' ? l.source.id : l.source)
|
||||
const getLinkTargetId = (l) => (l.target && typeof l.target === 'object' ? l.target.id : l.target)
|
||||
const eventById = new Map(rawNodes.filter(n => n.type === 'event').map(n => [n.id, n]))
|
||||
|
||||
const participantByEvent = new Map()
|
||||
const topicByEvent = new Map()
|
||||
const directLinks = []
|
||||
|
||||
rawLinks.forEach((l) => {
|
||||
const sid = getLinkSourceId(l)
|
||||
const tid = getLinkTargetId(l)
|
||||
const sourceType = rawNodeMap.get(sid)?.type
|
||||
const targetType = rawNodeMap.get(tid)?.type
|
||||
|
||||
if (l.type === 'PARTICIPATES_IN') {
|
||||
if (targetType === 'event') {
|
||||
if (!participantByEvent.has(tid)) participantByEvent.set(tid, [])
|
||||
participantByEvent.get(tid).push(sid)
|
||||
} else if (sourceType === 'event') {
|
||||
if (!participantByEvent.has(sid)) participantByEvent.set(sid, [])
|
||||
participantByEvent.get(sid).push(tid)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (l.type === 'ABOUT') {
|
||||
if (sourceType === 'event') {
|
||||
if (!topicByEvent.has(sid)) topicByEvent.set(sid, [])
|
||||
topicByEvent.get(sid).push(tid)
|
||||
} else if (targetType === 'event') {
|
||||
if (!topicByEvent.has(tid)) topicByEvent.set(tid, [])
|
||||
topicByEvent.get(tid).push(sid)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (!isEventNodeId(sid) && !isEventNodeId(tid)) {
|
||||
directLinks.push({
|
||||
source: sid,
|
||||
target: tid,
|
||||
type: l.type || 'RELATED',
|
||||
summary: l.summary || '',
|
||||
occurred_at: l.occurred_at || null,
|
||||
isEventDerived: false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const displayLinkMap = new Map()
|
||||
const appendDisplayLink = (source, target, payload) => {
|
||||
if (!source || !target) return
|
||||
const key = `${source}__${target}__${payload.type || 'RELATED'}`
|
||||
const existed = displayLinkMap.get(key)
|
||||
if (!existed) {
|
||||
displayLinkMap.set(key, {
|
||||
source,
|
||||
target,
|
||||
type: payload.type || 'RELATED',
|
||||
summary: payload.summary || '',
|
||||
occurred_at: payload.occurred_at || null,
|
||||
eventCount: payload.eventCount || 0,
|
||||
isEventDerived: !!payload.isEventDerived,
|
||||
eventNames: payload.eventNames ? [...payload.eventNames] : []
|
||||
})
|
||||
return
|
||||
}
|
||||
existed.eventCount += payload.eventCount || 0
|
||||
if (!existed.summary && payload.summary) existed.summary = payload.summary
|
||||
if (!existed.occurred_at && payload.occurred_at) existed.occurred_at = payload.occurred_at
|
||||
if (payload.eventNames?.length) {
|
||||
const merged = new Set([...(existed.eventNames || []), ...payload.eventNames])
|
||||
existed.eventNames = [...merged].slice(0, 4)
|
||||
}
|
||||
}
|
||||
|
||||
directLinks.forEach((l) => appendDisplayLink(l.source, l.target, l))
|
||||
|
||||
participantByEvent.forEach((participants, eventId) => {
|
||||
const uniqueParticipants = [...new Set(participants)].filter(id => rawNodeMap.has(id))
|
||||
const topics = [...new Set(topicByEvent.get(eventId) || [])].filter(id => rawNodeMap.has(id))
|
||||
const eventNode = eventById.get(eventId)
|
||||
const eventName = eventNode?.name || eventNode?.summary || '事件'
|
||||
const eventSummary = eventNode?.summary || eventNode?.name || ''
|
||||
const eventTime = eventNode?.occurred_at || null
|
||||
|
||||
if (uniqueParticipants.length >= 2) {
|
||||
for (let i = 0; i < uniqueParticipants.length; i++) {
|
||||
for (let j = i + 1; j < uniqueParticipants.length; j++) {
|
||||
appendDisplayLink(uniqueParticipants[i], uniqueParticipants[j], {
|
||||
type: 'EVENT',
|
||||
summary: eventSummary,
|
||||
occurred_at: eventTime,
|
||||
eventCount: 1,
|
||||
isEventDerived: true,
|
||||
eventNames: [eventName]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
uniqueParticipants.forEach((pid) => {
|
||||
topics.forEach((tid) => {
|
||||
appendDisplayLink(pid, tid, {
|
||||
type: 'EVENT_TOPIC',
|
||||
summary: eventSummary,
|
||||
occurred_at: eventTime,
|
||||
eventCount: 1,
|
||||
isEventDerived: true,
|
||||
eventNames: [eventName]
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const nodes = rawNodes.filter(n => n.type !== 'event')
|
||||
const links = [...displayLinkMap.values()].filter(l => rawNodeMap.has(l.source) && rawNodeMap.has(l.target))
|
||||
graphStats.value = { nodes: nodes.length, edges: links.length }
|
||||
|
||||
const presetColorMap = { person: '#6366f1', event: '#10b981', topic: '#f59e0b', organization: '#06b6d4' }
|
||||
const dynamicPalette = ['#3b82f6', '#8b5cf6', '#06b6d4', '#14b8a6', '#22c55e', '#f59e0b', '#f97316', '#ef4444', '#ec4899', '#6366f1']
|
||||
const typeList = [...new Set(nodes.map(n => n.type).filter(Boolean))]
|
||||
const getTypeColor = (type) => {
|
||||
if (presetColorMap[type]) return presetColorMap[type]
|
||||
let hash = 0
|
||||
for (let i = 0; i < type.length; i += 1) hash = ((hash << 5) - hash) + type.charCodeAt(i)
|
||||
return dynamicPalette[Math.abs(hash) % dynamicPalette.length]
|
||||
}
|
||||
const toTypeLabel = (type) => (type || 'entity')
|
||||
.replace(/[_-]+/g, ' ')
|
||||
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
.replace(/\b\w/g, c => c.toUpperCase())
|
||||
const colorMap = Object.fromEntries(typeList.map(type => [type, getTypeColor(type)]))
|
||||
const color = d => colorMap[d.type] || '#6366f1'
|
||||
const getNodeId = (value) => (value && typeof value === 'object' ? value.id : value)
|
||||
const getDefaultNodeStroke = () => '#fff'
|
||||
const getDefaultNodeStrokeWidth = () => 2.5
|
||||
const parseImportance = (value) => {
|
||||
if (typeof value === 'number') return value
|
||||
if (value && typeof value === 'object' && typeof value.toNumber === 'function') return value.toNumber()
|
||||
const num = Number(value)
|
||||
return Number.isFinite(num) ? num : 5
|
||||
}
|
||||
const clamp = (val, min, max) => Math.max(min, Math.min(max, val))
|
||||
const getExtent = (values) => {
|
||||
if (!values.length) return [0, 1]
|
||||
const min = Math.min(...values)
|
||||
const max = Math.max(...values)
|
||||
return min === max ? [min, min + 1] : [min, max]
|
||||
}
|
||||
|
||||
const degreeMap = new Map()
|
||||
nodes.forEach((n) => degreeMap.set(n.id, 0))
|
||||
links.forEach((l) => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
degreeMap.set(sid, (degreeMap.get(sid) || 0) + 1)
|
||||
degreeMap.set(tid, (degreeMap.get(tid) || 0) + 1)
|
||||
})
|
||||
|
||||
const topicCountMap = new Map()
|
||||
links.forEach((l) => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
if (rawNodeMap.get(sid)?.type === 'topic') topicCountMap.set(sid, (topicCountMap.get(sid) || 0) + 1)
|
||||
if (rawNodeMap.get(tid)?.type === 'topic') topicCountMap.set(tid, (topicCountMap.get(tid) || 0) + 1)
|
||||
})
|
||||
|
||||
nodes.forEach((n) => {
|
||||
n.degree = degreeMap.get(n.id) || 0
|
||||
n.importance = null
|
||||
n.topicCount = n.type === 'topic' ? (topicCountMap.get(n.id) || 0) : 0
|
||||
})
|
||||
|
||||
const personExtent = getExtent(nodes.filter(n => n.type === 'person').map(n => n.degree))
|
||||
const topicExtent = getExtent(nodes.filter(n => n.type === 'topic').map(n => n.topicCount))
|
||||
const normalize = (value, extent) => (value - extent[0]) / (extent[1] - extent[0] || 1)
|
||||
const getRadius = (node) => {
|
||||
if (node.type === 'person') return clamp(22 + normalize(node.degree, personExtent) * 20, 22, 42)
|
||||
if (node.type === 'organization') return clamp(16 + normalize(node.degree, personExtent) * 12, 16, 28)
|
||||
if (node.type === 'topic') return clamp(14 + normalize(node.topicCount, topicExtent) * 10, 14, 24)
|
||||
return 18
|
||||
}
|
||||
nodes.forEach((n) => {
|
||||
n.radius = getRadius(n)
|
||||
})
|
||||
const nodeMap = new Map(nodes.map((n) => [n.id, n]))
|
||||
const getNodeDataFromRef = (value) => {
|
||||
if (value && typeof value === 'object' && value.id) return value
|
||||
return nodeMap.get(value)
|
||||
}
|
||||
const isEventLink = (edge) => edge.type === 'EVENT' || edge.type === 'EVENT_TOPIC' || edge.isEventDerived
|
||||
const getEdgeLabelText = (edge) => {
|
||||
if (edge.eventNames?.length) {
|
||||
if (edge.eventNames.length > 1) return `事件×${edge.eventNames.length}`
|
||||
const text = edge.eventNames[0] || '事件'
|
||||
return text.length > 8 ? `${text.slice(0, 8)}…` : text
|
||||
}
|
||||
if (edge.type === 'EVENT') return '事件关联'
|
||||
if (edge.type === 'EVENT_TOPIC') return '事件主题'
|
||||
const base = edge.type || ''
|
||||
return base.length > 8 ? `${base.slice(0, 8)}…` : base
|
||||
}
|
||||
const linkPairGroups = new Map()
|
||||
links.forEach((l) => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
const key = sid < tid ? `${sid}__${tid}` : `${tid}__${sid}`
|
||||
if (!linkPairGroups.has(key)) linkPairGroups.set(key, [])
|
||||
linkPairGroups.get(key).push(l)
|
||||
})
|
||||
linkPairGroups.forEach((arr) => {
|
||||
const total = arr.length
|
||||
arr.forEach((l, index) => {
|
||||
l.pairTotal = total
|
||||
const offset = index - (total - 1) / 2
|
||||
l.curvature = total === 1 ? 0 : offset * 0.35
|
||||
l.isSelfLoop = getNodeId(l.source) === getNodeId(l.target)
|
||||
})
|
||||
})
|
||||
const getLinkPath = (d) => {
|
||||
const sx = d.source.x
|
||||
const sy = d.source.y
|
||||
const tx = d.target.x
|
||||
const ty = d.target.y
|
||||
if (d.isSelfLoop) {
|
||||
const r = (d.source.radius || 20) + 18
|
||||
return `M ${sx} ${sy} C ${sx + r} ${sy - r}, ${sx + r} ${sy + r}, ${sx} ${sy + 0.1}`
|
||||
}
|
||||
if (!d.curvature) return `M${sx},${sy} L${tx},${ty}`
|
||||
const dx = tx - sx
|
||||
const dy = ty - sy
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1
|
||||
const offsetRatio = 0.22 + (d.pairTotal || 1) * 0.04
|
||||
const baseOffset = Math.max(28, dist * offsetRatio)
|
||||
const offsetX = -dy / dist * d.curvature * baseOffset
|
||||
const offsetY = dx / dist * d.curvature * baseOffset
|
||||
const cx = (sx + tx) / 2 + offsetX
|
||||
const cy = (sy + ty) / 2 + offsetY
|
||||
return `M${sx},${sy} Q${cx},${cy} ${tx},${ty}`
|
||||
}
|
||||
const getLinkMidpoint = (d) => {
|
||||
const sx = d.source.x
|
||||
const sy = d.source.y
|
||||
const tx = d.target.x
|
||||
const ty = d.target.y
|
||||
if (d.isSelfLoop) return { x: sx + 48, y: sy }
|
||||
if (!d.curvature) return { x: (sx + tx) / 2, y: (sy + ty) / 2 }
|
||||
const dx = tx - sx
|
||||
const dy = ty - sy
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1
|
||||
const offsetRatio = 0.22 + (d.pairTotal || 1) * 0.04
|
||||
const baseOffset = Math.max(28, dist * offsetRatio)
|
||||
const offsetX = -dy / dist * d.curvature * baseOffset
|
||||
const offsetY = dx / dist * d.curvature * baseOffset
|
||||
const cx = (sx + tx) / 2 + offsetX
|
||||
const cy = (sy + ty) / 2 + offsetY
|
||||
return { x: 0.25 * sx + 0.5 * cx + 0.25 * tx, y: 0.25 * sy + 0.5 * cy + 0.25 * ty }
|
||||
}
|
||||
|
||||
const g = svg.append('g')
|
||||
|
||||
svg.call(d3.zoom().scaleExtent([0.2, 3]).on('zoom', (event) => {
|
||||
graphLegendItems.value = typeList
|
||||
.map(type => ({ type, color: colorMap[type] || '#999', label: toTypeLabel(type) }))
|
||||
|
||||
zoomBehavior = d3.zoom().scaleExtent([0.2, 3]).on('zoom', (event) => {
|
||||
g.attr('transform', event.transform)
|
||||
}))
|
||||
})
|
||||
svg.call(zoomBehavior)
|
||||
graphSvgSelection = svg
|
||||
|
||||
const simulation = d3.forceSimulation(nodes)
|
||||
.force('link', d3.forceLink(links).id(d => d.id).distance(140))
|
||||
.force('charge', d3.forceManyBody().strength(-350))
|
||||
.force('link', d3.forceLink(links).id(d => d.id).distance(d => 690 + ((d.source.radius || 20) + (d.target.radius || 20)) * 3.6))
|
||||
.force('charge', d3.forceManyBody().strength(-650))
|
||||
.force('center', d3.forceCenter(width / 2, height / 2))
|
||||
.force('collision', d3.forceCollide().radius(40))
|
||||
.force('collision', d3.forceCollide().radius(d => (d.radius || 20) + 20))
|
||||
|
||||
const link = g.append('g')
|
||||
.selectAll('line')
|
||||
.selectAll('path')
|
||||
.data(links)
|
||||
.join('line')
|
||||
.attr('stroke', '#e5e7eb')
|
||||
.join('path')
|
||||
.attr('fill', 'none')
|
||||
.attr('stroke', '#c0c0c0')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('stroke-linecap', 'round')
|
||||
.style('cursor', 'pointer')
|
||||
|
||||
const linkLabelBg = g.append('g')
|
||||
.selectAll('rect')
|
||||
.data(links)
|
||||
.join('rect')
|
||||
.attr('fill', 'rgba(255,255,255,0.95)')
|
||||
.attr('rx', 3)
|
||||
.attr('ry', 3)
|
||||
.style('pointer-events', 'all')
|
||||
.style('display', showEdgeLabels.value ? 'block' : 'none')
|
||||
|
||||
const linkLabel = g.append('g')
|
||||
.selectAll('text')
|
||||
.data(links)
|
||||
.join('text')
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('font-size', 10)
|
||||
.attr('fill', '#666')
|
||||
.attr('opacity', 0.86)
|
||||
.attr('font-weight', 500)
|
||||
.attr('stroke', '#ffffff')
|
||||
.attr('stroke-width', 3)
|
||||
.attr('paint-order', 'stroke')
|
||||
.style('pointer-events', 'all')
|
||||
.style('display', showEdgeLabels.value ? 'block' : 'none')
|
||||
.text(d => getEdgeLabelText(d))
|
||||
|
||||
const nodeGroup = g.append('g')
|
||||
.selectAll('g')
|
||||
@@ -390,47 +787,248 @@ const renderGraph = async () => {
|
||||
.on('end', (event, d) => { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null })
|
||||
)
|
||||
|
||||
nodeGroup.append('circle')
|
||||
.attr('r', 24)
|
||||
const nodeCircle = nodeGroup.append('circle')
|
||||
.attr('r', d => d.radius)
|
||||
.attr('fill', d => color(d))
|
||||
.attr('stroke', '#fff')
|
||||
.attr('stroke-width', 2)
|
||||
.attr('stroke', d => getDefaultNodeStroke(d))
|
||||
.attr('stroke-width', d => getDefaultNodeStrokeWidth(d))
|
||||
.attr('opacity', d => d.type === 'person' ? 1 : (d.type === 'organization' ? 0.82 : 0.72))
|
||||
.style('cursor', 'pointer')
|
||||
.on('mouseenter', (event, d) => {
|
||||
if (selectedDetail.value?.kind === 'node' && selectedDetail.value?.data?.id === d.id) return
|
||||
d3.select(event.currentTarget).attr('stroke', '#333').attr('stroke-width', 3)
|
||||
})
|
||||
.on('mouseleave', (event, d) => {
|
||||
if (selectedDetail.value?.kind === 'node' && selectedDetail.value?.data?.id === d.id) return
|
||||
d3.select(event.currentTarget).attr('stroke', getDefaultNodeStroke(d)).attr('stroke-width', getDefaultNodeStrokeWidth(d))
|
||||
})
|
||||
|
||||
nodeGroup.append('text')
|
||||
.attr('dy', 36)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('font-size', 12)
|
||||
.attr('fill', '#6b7280')
|
||||
.text(d => d.name)
|
||||
const nodeText = nodeGroup.append('text')
|
||||
.attr('dx', d => d.radius + 4)
|
||||
.attr('dy', 4)
|
||||
.attr('text-anchor', 'start')
|
||||
.attr('font-size', 11)
|
||||
.attr('fill', '#333')
|
||||
.attr('font-weight', 500)
|
||||
.style('pointer-events', 'none')
|
||||
.style('font-family', 'system-ui, sans-serif')
|
||||
.text(d => {
|
||||
if (d.type === 'event') return ''
|
||||
if (d.type !== 'person') return ''
|
||||
return d.name?.length > 6 ? `${d.name.slice(0, 6)}…` : d.name
|
||||
})
|
||||
|
||||
resetSelectionStyles = () => {
|
||||
nodeCircle
|
||||
.attr('stroke', d => getDefaultNodeStroke(d))
|
||||
.attr('stroke-width', d => getDefaultNodeStrokeWidth(d))
|
||||
.attr('opacity', d => d.type === 'person' ? 1 : (d.type === 'organization' ? 0.82 : 0.72))
|
||||
nodeText.attr('opacity', 1)
|
||||
link
|
||||
.attr('stroke', '#c0c0c0')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('opacity', 1)
|
||||
linkLabelBg
|
||||
.attr('fill', 'rgba(255,255,255,0.95)')
|
||||
.style('display', showEdgeLabels.value ? 'block' : 'none')
|
||||
linkLabel
|
||||
.attr('opacity', 0.86)
|
||||
.attr('fill', '#666')
|
||||
.style('display', showEdgeLabels.value ? 'block' : 'none')
|
||||
}
|
||||
|
||||
const highlightNode = (nodeData) => {
|
||||
const focusIds = new Set([nodeData.id])
|
||||
link.each((l) => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
if (sid === nodeData.id || tid === nodeData.id) {
|
||||
focusIds.add(sid)
|
||||
focusIds.add(tid)
|
||||
}
|
||||
})
|
||||
nodeCircle
|
||||
.attr('opacity', n => focusIds.has(n.id) ? 1 : 0.25)
|
||||
.attr('stroke', n => n.id === nodeData.id ? '#e11d48' : getDefaultNodeStroke(n))
|
||||
.attr('stroke-width', n => n.id === nodeData.id ? 4 : getDefaultNodeStrokeWidth(n))
|
||||
nodeText.attr('opacity', n => focusIds.has(n.id) ? 1 : 0.25)
|
||||
link
|
||||
.attr('opacity', l => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
return sid === nodeData.id || tid === nodeData.id ? 1 : 0.12
|
||||
})
|
||||
.attr('stroke', l => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
return sid === nodeData.id || tid === nodeData.id ? '#e11d48' : '#c0c0c0'
|
||||
})
|
||||
.attr('stroke-width', l => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
return sid === nodeData.id || tid === nodeData.id ? 2.5 : 1.5
|
||||
})
|
||||
linkLabel.attr('opacity', l => {
|
||||
const sid = getNodeId(l.source)
|
||||
const tid = getNodeId(l.target)
|
||||
if (sid === nodeData.id || tid === nodeData.id) return 1
|
||||
return 0.86
|
||||
})
|
||||
}
|
||||
|
||||
const highlightEdge = (edgeData) => {
|
||||
const sid = getNodeId(edgeData.source)
|
||||
const tid = getNodeId(edgeData.target)
|
||||
nodeCircle
|
||||
.attr('opacity', n => n.id === sid || n.id === tid ? 1 : 0.25)
|
||||
.attr('stroke', n => n.id === sid || n.id === tid ? '#e11d48' : getDefaultNodeStroke(n))
|
||||
.attr('stroke-width', n => n.id === sid || n.id === tid ? 3.5 : getDefaultNodeStrokeWidth(n))
|
||||
nodeText.attr('opacity', n => n.id === sid || n.id === tid ? 1 : 0.25)
|
||||
link
|
||||
.attr('opacity', l => l === edgeData ? 1 : 0.12)
|
||||
.attr('stroke', l => l === edgeData ? '#3498db' : '#c0c0c0')
|
||||
.attr('stroke-width', l => l === edgeData ? 2.8 : 1.5)
|
||||
linkLabelBg.attr('fill', l => l === edgeData ? 'rgba(52, 152, 219, 0.1)' : 'rgba(255,255,255,0.95)')
|
||||
linkLabel.attr('opacity', l => {
|
||||
if (l === edgeData) return 1
|
||||
return 0.86
|
||||
}).attr('fill', l => l === edgeData ? '#3498db' : '#666')
|
||||
}
|
||||
|
||||
nodeGroup.on('click', (event, d) => {
|
||||
event.stopPropagation()
|
||||
highlightNode(d)
|
||||
selectedDetail.value = { kind: 'node', data: d }
|
||||
})
|
||||
|
||||
link.on('click', (event, d) => {
|
||||
event.stopPropagation()
|
||||
highlightEdge(d)
|
||||
selectedDetail.value = {
|
||||
kind: 'edge',
|
||||
data: {
|
||||
type: d.type,
|
||||
source: getNodeId(d.source),
|
||||
target: getNodeId(d.target),
|
||||
sourceName: d.source?.name,
|
||||
targetName: d.target?.name,
|
||||
summary: d.summary || '',
|
||||
occurred_at: d.occurred_at || null,
|
||||
eventCount: d.eventCount || 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
linkLabelBg.on('click', (event, d) => {
|
||||
event.stopPropagation()
|
||||
highlightEdge(d)
|
||||
selectedDetail.value = {
|
||||
kind: 'edge',
|
||||
data: {
|
||||
type: d.type,
|
||||
source: getNodeId(d.source),
|
||||
target: getNodeId(d.target),
|
||||
sourceName: d.source?.name,
|
||||
targetName: d.target?.name,
|
||||
summary: d.summary || '',
|
||||
occurred_at: d.occurred_at || null,
|
||||
eventCount: d.eventCount || 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
linkLabel.on('click', (event, d) => {
|
||||
event.stopPropagation()
|
||||
highlightEdge(d)
|
||||
selectedDetail.value = {
|
||||
kind: 'edge',
|
||||
data: {
|
||||
type: d.type,
|
||||
source: getNodeId(d.source),
|
||||
target: getNodeId(d.target),
|
||||
sourceName: d.source?.name,
|
||||
targetName: d.target?.name,
|
||||
summary: d.summary || '',
|
||||
occurred_at: d.occurred_at || null,
|
||||
eventCount: d.eventCount || 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
svg.on('click', () => {
|
||||
selectedDetail.value = null
|
||||
resetSelectionStyles?.()
|
||||
})
|
||||
|
||||
simulation.on('tick', () => {
|
||||
link
|
||||
.attr('x1', d => d.source.x)
|
||||
.attr('y1', d => d.source.y)
|
||||
.attr('x2', d => d.target.x)
|
||||
.attr('y2', d => d.target.y)
|
||||
.attr('d', d => getLinkPath(d))
|
||||
linkLabel
|
||||
.each(function (d) {
|
||||
const mid = getLinkMidpoint(d)
|
||||
d3.select(this).attr('x', mid.x).attr('y', mid.y)
|
||||
})
|
||||
linkLabelBg.each(function (d, i) {
|
||||
const mid = getLinkMidpoint(d)
|
||||
const textEl = linkLabel.nodes()[i]
|
||||
const bbox = textEl.getBBox()
|
||||
d3.select(this)
|
||||
.attr('x', mid.x - bbox.width / 2 - 4)
|
||||
.attr('y', mid.y - bbox.height / 2 - 2)
|
||||
.attr('width', bbox.width + 8)
|
||||
.attr('height', bbox.height + 4)
|
||||
})
|
||||
nodeGroup.attr('transform', d => `translate(${d.x},${d.y})`)
|
||||
})
|
||||
|
||||
graphLoading.value = false
|
||||
}
|
||||
|
||||
const formatDateTime = (value) => {
|
||||
if (!value) return '-'
|
||||
if (typeof value === 'string' || value instanceof Date || typeof value === 'number') {
|
||||
const date = new Date(value)
|
||||
if (!Number.isNaN(date.getTime())) return date.toLocaleString()
|
||||
}
|
||||
if (value && typeof value.toString === 'function') return value.toString()
|
||||
return String(value)
|
||||
}
|
||||
|
||||
const clearSelection = () => {
|
||||
selectedDetail.value = null
|
||||
resetSelectionStyles?.()
|
||||
}
|
||||
|
||||
const handleIngest = async () => {
|
||||
if (!ingestText.value) return
|
||||
ingestLoading.value = true
|
||||
const apiBase = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'
|
||||
const now = new Date().toLocaleTimeString()
|
||||
try {
|
||||
const res = await fetch(`${apiBase}/ingest`, {
|
||||
// 使用 analyze 接口进行增量更新
|
||||
const res = await fetch(`${apiBase}/analyze`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text: ingestText.value })
|
||||
body: JSON.stringify({
|
||||
text: ingestText.value,
|
||||
userId: userId.value
|
||||
})
|
||||
})
|
||||
const data = await res.json()
|
||||
ingestLogs.value.unshift({ time: now, msg: `导入成功: ${data.chunks?.length || 0} 个 chunk`, type: 'success' })
|
||||
ingestText.value = ''
|
||||
if (data.ok) {
|
||||
ingestLogs.value.unshift({
|
||||
time: now,
|
||||
msg: `分析成功: ${data.stats?.created?.persons || 0} 人, ${data.stats?.created?.events || 0} 事件`,
|
||||
type: 'success'
|
||||
})
|
||||
ingestText.value = ''
|
||||
// 刷新图谱
|
||||
renderGraph()
|
||||
} else {
|
||||
throw new Error(data.error || '分析失败')
|
||||
}
|
||||
} catch (e) {
|
||||
ingestLogs.value.unshift({ time: now, msg: `导入失败: ${e.message}`, type: 'error' })
|
||||
ingestLogs.value.unshift({ time: now, msg: `分析失败: ${e.message}`, type: 'error' })
|
||||
} finally {
|
||||
ingestLoading.value = false
|
||||
}
|
||||
@@ -642,9 +1240,11 @@ onUnmounted(() => {
|
||||
|
||||
.graph-canvas {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
background-color: #fafafa;
|
||||
background-image: radial-gradient(#d0d0d0 1.5px, transparent 1.5px);
|
||||
background-size: 24px 24px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border: 1px solid #eaeaea;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -668,7 +1268,160 @@ onUnmounted(() => {
|
||||
|
||||
.graph-loading p { font-size: 0.9rem; color: #6b7280; }
|
||||
|
||||
.graph-svg { width: 100%; height: 100%; }
|
||||
.graph-svg { width: 100%; height: 100%; display: block; }
|
||||
.graph-legend {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 24px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eaeaea;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||||
z-index: 10;
|
||||
}
|
||||
.legend-title {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #e91e63;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.legend-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 16px;
|
||||
max-width: 320px;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.legend-label { white-space: nowrap; }
|
||||
.edge-labels-toggle {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #fff;
|
||||
padding: 8px 14px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
z-index: 10;
|
||||
}
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 22px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
input:checked + .slider { background-color: #7b2d8e; }
|
||||
input:checked + .slider:before { transform: translateX(18px); }
|
||||
.toggle-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.detail-panel {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 16px;
|
||||
width: 320px;
|
||||
max-height: calc(100% - 100px);
|
||||
background: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 20;
|
||||
font-size: 13px;
|
||||
}
|
||||
.detail-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fafafa;
|
||||
}
|
||||
.detail-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.detail-close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
.detail-close:hover { color: #333; }
|
||||
.detail-content { padding: 16px; overflow-y: auto; flex: 1; }
|
||||
.detail-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.detail-label {
|
||||
min-width: 80px;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.summary-value {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; }
|
||||
.panel-grid .wide { grid-column: 1 / -1; }
|
||||
|
||||
Reference in New Issue
Block a user