705 lines
17 KiB
Vue
705 lines
17 KiB
Vue
<template>
|
||
<div class="mindmap-section">
|
||
<div class="section-content">
|
||
<!-- 加载状态 -->
|
||
<div v-if="loading" class="loading-state">
|
||
<a-spin size="small" />
|
||
<span>加载中...</span>
|
||
</div>
|
||
|
||
<!-- 生成中状态 -->
|
||
<div v-else-if="generating" class="generating-state">
|
||
<a-spin size="small" />
|
||
<span>AI 正在生成思维导图...</span>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-else-if="!mindmapData" class="empty-state">
|
||
<div class="empty-icon">
|
||
<MapIcon :size="24" />
|
||
</div>
|
||
<p class="empty-title">暂无思维导图</p>
|
||
<p class="empty-description">从当前知识库内容生成结构化导图。</p>
|
||
<button
|
||
type="button"
|
||
class="lucide-icon-btn mindmap-primary-action"
|
||
@click="generateMindmap"
|
||
>
|
||
<Sparkles :size="14" />
|
||
<span>生成思维导图</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 思维导图显示 -->
|
||
<div v-else class="mindmap-container">
|
||
<div class="mindmap-toolbar">
|
||
<a-space :size="8">
|
||
<button
|
||
type="button"
|
||
class="lucide-icon-btn mindmap-toolbar-btn"
|
||
:disabled="generating"
|
||
@click="refreshMindmap"
|
||
title="重新生成"
|
||
>
|
||
<RefreshCw :size="14" :class="{ spin: generating }" />
|
||
<span class="toolbar-text">重新生成</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="lucide-icon-btn mindmap-toolbar-btn"
|
||
@click="fitView"
|
||
title="适应视图"
|
||
>
|
||
<Maximize2 :size="14" />
|
||
<span class="toolbar-text">适应视图</span>
|
||
</button>
|
||
</a-space>
|
||
</div>
|
||
<div class="mindmap-svg-container">
|
||
<svg ref="mindmapSvg" class="mindmap-svg"></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
|
||
import { message } from 'ant-design-vue'
|
||
import { RefreshCw, Map as MapIcon, Sparkles, Maximize2 } from 'lucide-vue-next'
|
||
import { mindmapApi } from '@/apis/knowledge_api'
|
||
import { Markmap } from 'markmap-view'
|
||
import { Transformer } from 'markmap-lib'
|
||
|
||
const props = defineProps({
|
||
kbId: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
// ============================================================================
|
||
// 状态管理
|
||
// ============================================================================
|
||
|
||
const loading = ref(false)
|
||
const generating = ref(false)
|
||
const mindmapData = ref(null)
|
||
const mindmapSvg = ref(null)
|
||
let markmapInstance = null
|
||
let textMeasureContext = null
|
||
|
||
const SVG_NS = 'http://www.w3.org/2000/svg'
|
||
const MARKMAP_MAX_WIDTH = 200
|
||
const MARKMAP_PADDING_X = 8
|
||
const MARKMAP_LINE_HEIGHT = 20
|
||
const MARKMAP_TEXT_BASELINE = 16
|
||
const SAFARI_FALLBACK_FONT = '300 16px sans-serif'
|
||
|
||
const useSvgTextFallback = (() => {
|
||
if (typeof navigator === 'undefined') return false
|
||
|
||
const userAgent = navigator.userAgent || ''
|
||
const vendor = navigator.vendor || ''
|
||
const isAppleWebKit = userAgent.includes('AppleWebKit')
|
||
const isDesktopChromium =
|
||
/(Chrome|Chromium|Edg|OPR)\//.test(userAgent) && !/(CriOS|FxiOS|EdgiOS)\//.test(userAgent)
|
||
const isAppleBrowser = vendor.includes('Apple') || /(Safari|iPhone|iPad|iPod)/.test(userAgent)
|
||
|
||
return isAppleWebKit && isAppleBrowser && !isDesktopChromium
|
||
})()
|
||
|
||
// ============================================================================
|
||
// 方法
|
||
// ============================================================================
|
||
|
||
/**
|
||
* 加载思维导图
|
||
*/
|
||
const loadMindmap = async () => {
|
||
if (!props.kbId) return
|
||
|
||
try {
|
||
loading.value = true
|
||
const response = await mindmapApi.getByDatabase(props.kbId)
|
||
|
||
const mindmap = response.mindmap || null
|
||
mindmapData.value = mindmap
|
||
|
||
if (markmapInstance) {
|
||
markmapInstance.destroy()
|
||
markmapInstance = null
|
||
}
|
||
|
||
if (mindmap) {
|
||
await nextTick()
|
||
|
||
// 延迟渲染，确保DOM完全更新
|
||
setTimeout(() => {
|
||
renderMindmap(mindmap)
|
||
}, 100)
|
||
}
|
||
} catch (error) {
|
||
// 如果是404错误，说明还没有生成，静默处理
|
||
if (
|
||
error?.message?.includes('404') ||
|
||
error?.message?.includes('不存在') ||
|
||
error?.message?.includes('还没有生成')
|
||
) {
|
||
mindmapData.value = null
|
||
} else {
|
||
console.error('加载思维导图失败:', error)
|
||
const errorMsg = error?.message || String(error)
|
||
message.error('加载思维导图失败: ' + errorMsg)
|
||
}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 生成思维导图
|
||
*/
|
||
const generateMindmap = async () => {
|
||
if (!props.kbId) return
|
||
|
||
try {
|
||
generating.value = true
|
||
|
||
const response = await mindmapApi.generateMindmap(
|
||
props.kbId,
|
||
[], // 使用所有文件
|
||
'' // 无自定义提示
|
||
)
|
||
|
||
mindmapData.value = response.mindmap
|
||
|
||
// 等待DOM更新
|
||
await nextTick()
|
||
|
||
// 再延迟一点，确保SVG元素完全渲染
|
||
setTimeout(() => {
|
||
renderMindmap(response.mindmap)
|
||
message.success('思维导图生成成功！')
|
||
}, 100)
|
||
} catch (error) {
|
||
console.error('生成思维导图失败:', error)
|
||
const errorMsg = error?.message || String(error)
|
||
message.error('生成失败: ' + errorMsg)
|
||
} finally {
|
||
generating.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 刷新思维导图
|
||
*/
|
||
const refreshMindmap = async () => {
|
||
await generateMindmap()
|
||
}
|
||
|
||
/**
|
||
* 将JSON转换为Markdown
|
||
*/
|
||
const jsonToMarkdown = (node, level = 0) => {
|
||
if (!node || !node.content) return ''
|
||
|
||
const indent = '#'.repeat(level + 1)
|
||
let markdown = `${indent} ${node.content}\n\n`
|
||
|
||
if (node.children && node.children.length > 0) {
|
||
for (const child of node.children) {
|
||
markdown += jsonToMarkdown(child, level + 1)
|
||
}
|
||
}
|
||
|
||
return markdown
|
||
}
|
||
|
||
const ensureSvgViewportSize = () => {
|
||
const svg = mindmapSvg.value
|
||
const container = svg?.parentElement
|
||
if (!svg || !container) return false
|
||
|
||
const { width, height } = container.getBoundingClientRect()
|
||
if (width <= 0 || height <= 0) return false
|
||
|
||
svg.setAttribute('width', `${Math.round(width)}`)
|
||
svg.setAttribute('height', `${Math.round(height)}`)
|
||
return true
|
||
}
|
||
|
||
const createSvgElement = (tagName) => document.createElementNS(SVG_NS, tagName)
|
||
|
||
const getNodeText = (html) => {
|
||
const element = document.createElement('div')
|
||
element.innerHTML = html || ''
|
||
return (element.textContent || '').replace(/\s+/g, ' ').trim()
|
||
}
|
||
|
||
const getTextMeasureContext = () => {
|
||
if (!textMeasureContext) {
|
||
const canvas = document.createElement('canvas')
|
||
textMeasureContext = canvas.getContext('2d')
|
||
}
|
||
|
||
if (textMeasureContext) {
|
||
const font = mindmapSvg.value ? getComputedStyle(mindmapSvg.value).font : ''
|
||
textMeasureContext.font = font || SAFARI_FALLBACK_FONT
|
||
}
|
||
|
||
return textMeasureContext
|
||
}
|
||
|
||
const splitTextTokens = (text) => text.match(/[A-Za-z0-9_.:/#-]+|\s+|./gu) || []
|
||
|
||
const wrapSvgText = (text, maxWidth) => {
|
||
const context = getTextMeasureContext()
|
||
const measure = (value) => (context ? context.measureText(value).width : value.length * 8)
|
||
const lines = []
|
||
let currentLine = ''
|
||
|
||
for (const token of splitTextTokens(text)) {
|
||
const normalizedToken = /^\s+$/.test(token) ? ' ' : token
|
||
if (!currentLine && normalizedToken === ' ') continue
|
||
|
||
const nextLine = `${currentLine}${normalizedToken}`
|
||
if (!currentLine || measure(nextLine) <= maxWidth) {
|
||
currentLine = nextLine
|
||
continue
|
||
}
|
||
|
||
lines.push(currentLine.trimEnd())
|
||
|
||
if (measure(normalizedToken) <= maxWidth) {
|
||
currentLine = normalizedToken.trimStart()
|
||
continue
|
||
}
|
||
|
||
currentLine = ''
|
||
for (const char of [...normalizedToken]) {
|
||
const nextCharLine = `${currentLine}${char}`
|
||
if (!currentLine || measure(nextCharLine) <= maxWidth) {
|
||
currentLine = nextCharLine
|
||
} else {
|
||
lines.push(currentLine)
|
||
currentLine = char
|
||
}
|
||
}
|
||
}
|
||
|
||
if (currentLine) {
|
||
lines.push(currentLine.trimEnd())
|
||
}
|
||
|
||
return lines.length ? lines : [text]
|
||
}
|
||
|
||
const collectVisibleNodes = (node, nodes = []) => {
|
||
if (!node?.state?.rect) return nodes
|
||
|
||
nodes.push(node)
|
||
if (!node.payload?.fold) {
|
||
for (const child of node.children || []) {
|
||
collectVisibleNodes(child, nodes)
|
||
}
|
||
}
|
||
|
||
return nodes
|
||
}
|
||
|
||
const hideOriginalMarkmapText = (contentGroup) => {
|
||
contentGroup?.querySelectorAll('.markmap-foreign').forEach((element) => {
|
||
element.setAttribute('visibility', 'hidden')
|
||
element.style.setProperty('opacity', '0', 'important')
|
||
element.style.setProperty('visibility', 'hidden', 'important')
|
||
element.style.setProperty('pointer-events', 'none', 'important')
|
||
})
|
||
}
|
||
|
||
const syncSafariTextFallback = () => {
|
||
const svg = mindmapSvg.value
|
||
const contentGroup = markmapInstance?.g?.node?.()
|
||
const data = markmapInstance?.state?.data
|
||
|
||
if (!useSvgTextFallback || !svg || !contentGroup || !data) {
|
||
svg?.classList.remove('mindmap-safari-fallback')
|
||
return
|
||
}
|
||
|
||
svg.classList.add('mindmap-safari-fallback')
|
||
hideOriginalMarkmapText(contentGroup)
|
||
contentGroup.querySelectorAll('.mindmap-safari-text-layer').forEach((element) => element.remove())
|
||
|
||
const layer = createSvgElement('g')
|
||
layer.setAttribute('class', 'mindmap-safari-text-layer')
|
||
|
||
for (const node of collectVisibleNodes(data)) {
|
||
const text = getNodeText(node.content)
|
||
const rect = node.state.rect
|
||
if (!text || rect.width <= 0 || rect.height <= 0) continue
|
||
|
||
const label = createSvgElement('g')
|
||
label.setAttribute('class', 'mindmap-safari-label')
|
||
label.setAttribute('transform', `translate(${rect.x + MARKMAP_PADDING_X},${rect.y})`)
|
||
|
||
const textElement = createSvgElement('text')
|
||
textElement.setAttribute('xml:space', 'preserve')
|
||
|
||
wrapSvgText(text, MARKMAP_MAX_WIDTH).forEach((line, index) => {
|
||
const tspan = createSvgElement('tspan')
|
||
tspan.setAttribute('x', '0')
|
||
tspan.setAttribute('y', `${MARKMAP_TEXT_BASELINE + index * MARKMAP_LINE_HEIGHT}`)
|
||
tspan.textContent = line
|
||
textElement.append(tspan)
|
||
})
|
||
|
||
label.append(textElement)
|
||
layer.append(label)
|
||
}
|
||
|
||
contentGroup.append(layer)
|
||
hideOriginalMarkmapText(contentGroup)
|
||
}
|
||
|
||
const patchSafariTextFallback = () => {
|
||
if (!useSvgTextFallback || !markmapInstance) return
|
||
|
||
const originalRenderData = markmapInstance.renderData.bind(markmapInstance)
|
||
markmapInstance.renderData = async (...args) => {
|
||
const result = await originalRenderData(...args)
|
||
syncSafariTextFallback()
|
||
setTimeout(() => {
|
||
hideOriginalMarkmapText(markmapInstance?.g?.node?.())
|
||
}, 350)
|
||
return result
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 渲染思维导图
|
||
*/
|
||
const renderMindmap = async (data, retryCount = 0) => {
|
||
if (!data) return
|
||
|
||
if (!mindmapSvg.value || !ensureSvgViewportSize()) {
|
||
// 如果SVG或尺寸还没准备好，最多重试3次
|
||
if (retryCount < 3) {
|
||
setTimeout(() => {
|
||
renderMindmap(data, retryCount + 1)
|
||
}, 100)
|
||
return
|
||
} else {
|
||
console.error('无法获取SVG容器，渲染失败')
|
||
message.error('渲染失败：无法找到SVG容器')
|
||
return
|
||
}
|
||
}
|
||
|
||
try {
|
||
// 清空之前的实例
|
||
if (markmapInstance) {
|
||
markmapInstance.destroy()
|
||
}
|
||
mindmapSvg.value.classList.remove('mindmap-safari-fallback')
|
||
|
||
// 将JSON转换为Markdown
|
||
const markdown = jsonToMarkdown(data)
|
||
|
||
// 使用Transformer转换
|
||
const transformer = new Transformer()
|
||
const { root } = transformer.transform(markdown)
|
||
|
||
// 创建Markmap实例
|
||
markmapInstance = Markmap.create(mindmapSvg.value, {
|
||
duration: 300,
|
||
maxWidth: MARKMAP_MAX_WIDTH,
|
||
nodeMinHeight: 24,
|
||
paddingX: MARKMAP_PADDING_X,
|
||
spacingVertical: 5,
|
||
spacingHorizontal: 60
|
||
})
|
||
patchSafariTextFallback()
|
||
|
||
await markmapInstance.setData(root)
|
||
await markmapInstance.fit()
|
||
|
||
// 延迟再次适应，确保布局完全稳定
|
||
setTimeout(() => {
|
||
if (markmapInstance) {
|
||
syncSafariTextFallback()
|
||
markmapInstance.fit()
|
||
}
|
||
}, 300)
|
||
} catch (error) {
|
||
console.error('渲染思维导图失败:', error)
|
||
message.error('渲染失败: ' + error.message)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 适应视图
|
||
*/
|
||
const fitView = () => {
|
||
if (markmapInstance) {
|
||
ensureSvgViewportSize()
|
||
syncSafariTextFallback()
|
||
markmapInstance.fit()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 暴露给父组件的方法
|
||
*/
|
||
defineExpose({
|
||
refreshMindmap,
|
||
generateMindmap
|
||
})
|
||
|
||
// ============================================================================
|
||
// 生命周期
|
||
// ============================================================================
|
||
|
||
// 监听数据库ID变化
|
||
watch(
|
||
() => props.kbId,
|
||
(newId) => {
|
||
if (newId) {
|
||
loadMindmap()
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
// 监听容器大小变化，自动适应
|
||
let resizeObserver = null
|
||
|
||
onMounted(() => {
|
||
// 设置ResizeObserver监听容器大小变化
|
||
nextTick(() => {
|
||
if (mindmapSvg.value) {
|
||
const container = mindmapSvg.value.parentElement
|
||
if (container) {
|
||
resizeObserver = new ResizeObserver(() => {
|
||
if (markmapInstance) {
|
||
ensureSvgViewportSize()
|
||
syncSafariTextFallback()
|
||
markmapInstance.fit()
|
||
}
|
||
})
|
||
resizeObserver.observe(container)
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
// 清理
|
||
onUnmounted(() => {
|
||
if (markmapInstance) {
|
||
markmapInstance.destroy()
|
||
}
|
||
if (resizeObserver) {
|
||
resizeObserver.disconnect()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.mindmap-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--gray-0);
|
||
border: 1px solid var(--gray-150);
|
||
border-radius: 8px;
|
||
height: 100%;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.section-content {
|
||
flex: 1;
|
||
min-height: 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.loading-state,
|
||
.generating-state,
|
||
.empty-state {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
padding: 28px;
|
||
color: var(--gray-500);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
|
||
p {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.empty-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--gray-150);
|
||
border-radius: 12px;
|
||
background: var(--main-30);
|
||
color: var(--main-color);
|
||
}
|
||
|
||
.empty-title {
|
||
margin-top: 2px;
|
||
color: var(--gray-900);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.empty-description {
|
||
max-width: 280px;
|
||
color: var(--gray-500);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.mindmap-primary-action {
|
||
min-height: 32px;
|
||
margin-top: 4px;
|
||
padding: 0 14px;
|
||
border: 1px solid transparent;
|
||
border-radius: 6px;
|
||
background: var(--main-600);
|
||
color: var(--main-0);
|
||
font: inherit;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
appearance: none;
|
||
transition:
|
||
background-color 0.18s ease,
|
||
color 0.18s ease;
|
||
|
||
&:hover,
|
||
&:focus-visible {
|
||
background: var(--main-700);
|
||
color: var(--main-0);
|
||
outline: none;
|
||
}
|
||
|
||
&:focus-visible {
|
||
box-shadow: 0 0 0 2px var(--main-200);
|
||
}
|
||
}
|
||
|
||
.mindmap-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mindmap-toolbar {
|
||
padding: 8px 12px;
|
||
background: var(--gray-0);
|
||
border-bottom: 1px solid var(--gray-150);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.toolbar-text {
|
||
margin-left: 4px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.mindmap-toolbar-btn {
|
||
min-height: 30px;
|
||
padding: 0 10px;
|
||
border: 1px solid transparent;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--gray-600);
|
||
font: inherit;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
appearance: none;
|
||
transition:
|
||
background-color 0.18s ease,
|
||
color 0.18s ease;
|
||
|
||
&:hover,
|
||
&:focus-visible {
|
||
background: var(--gray-50);
|
||
color: var(--main-color);
|
||
outline: none;
|
||
}
|
||
|
||
&:focus-visible {
|
||
box-shadow: 0 0 0 2px var(--main-100);
|
||
}
|
||
|
||
&:disabled {
|
||
opacity: 0.55;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
&:disabled:hover {
|
||
background: transparent;
|
||
color: var(--gray-600);
|
||
}
|
||
}
|
||
|
||
.spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.mindmap-svg-container {
|
||
flex: 1;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--gray-0);
|
||
}
|
||
|
||
.mindmap-svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 150px;
|
||
display: block;
|
||
}
|
||
|
||
// 确保父容器有高度
|
||
:deep(.markmap) {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
:deep(.mindmap-svg.mindmap-safari-fallback .markmap-foreign) {
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:deep(.mindmap-safari-text-layer) {
|
||
pointer-events: none;
|
||
}
|
||
|
||
:deep(.mindmap-safari-label) {
|
||
font: var(--markmap-font);
|
||
fill: var(--markmap-text-color);
|
||
}
|
||
</style>
|