wangpeng/yidaima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add module diagram editor controls

Browse Source
This commit is contained in:
王鹏
2026-07-07 14:17:47 +08:00
parent 5603aea680
commit 4f1ec43c25
4 changed files with 497 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
RuoYi-Vue/easycode-web/src/components/AppModuleDiagramView.vue
View File

@@ -1,168 +1,237 @@
<template>
<div class="app-module-diagram">
<el-empty v-if="!graph.nodes.length" description="生成应用蓝图后可查看系统功能模块图" />
<template v-else>
<div class="module-toolbar">
<div class="module-summary">
<span>节点：{{ graph.nodes.length }}</span>
<span>连线：{{ graph.edges.length }}</span>
</div>
<el-button :icon="Picture" @click="exportPng">导出图片</el-button>
<div class="module-toolbar">
<div class="module-summary">
<span>节点：{{ graph.nodes.length }}</span>
<span>连线：{{ graph.edges.length }}</span>
</div>
<div class="module-scroll">
<svg ref="svgRef" class="module-canvas" :viewBox="`0 0 ${canvas.width} ${canvas.height}`" :style="canvasStyle">
<defs>
<marker
id="app-module-arrow"
markerWidth="10"
markerHeight="10"
refX="8"
refY="3"
orient="auto"
markerUnits="strokeWidth"
>
<path d="M0,0 L0,6 L8,3 z" fill="#8aa0bc" />
</marker>
</defs>
<g class="lane-layer">
<g v-for="lane in graph.lanes" :key="lane.key">
<rect class="lane-bg" :x="lane.x - 16" y="22" :width="lane.width + 32" :height="canvas.height - 44" rx="10" />
<text class="lane-title" :x="lane.x" y="46">{{ lane.title }}</text>
</g>
</g>
<g class="edge-layer">
<g v-for="edge in edgeViews" :key="edge.id">
<path class="module-edge" :d="edge.path" marker-end="url(#app-module-arrow)" />
<text class="edge-label" :x="edge.labelX" :y="edge.labelY">{{ edge.label }}</text>
</g>
</g>
<g class="node-layer">
<g
v-for="node in graph.nodes"
:key="node.id"
class="module-node"
:class="[node.kind, node.lane]"
:transform="`translate(${node.x}, ${node.y})`"
>
<rect class="module-node-box" :width="node.width" :height="node.height" rx="8" />
<rect class="module-node-head" :width="node.width" height="52" rx="8" />
<rect class="module-node-head-fill" y="44" :width="node.width" height="8" />
<text class="node-title" x="14" y="27">{{ shortText(node.title, 18) }}</text>
<text class="node-subtitle" x="14" y="46">{{ shortText(node.subtitle, 28) }}</text>
<g v-for="(badge, badgeIndex) in node.badges" :key="badge" :transform="`translate(${badgeX(node, badgeIndex)}, 72)`">
<rect class="node-badge-bg" :width="badgeWidth(badge)" height="22" rx="5" />
<text class="node-badge-text" :x="badgeWidth(badge) / 2" y="15">{{ shortText(badge, 14) }}</text>
</g>
</g>
</g>
</svg>
<div class="module-controls">
<el-radio-group :model-value="sourceMode" size="small" @change="setSourceMode">
<el-radio-button label="blueprint">自动蓝图</el-radio-button>
<el-radio-button label="outline">缩进结构</el-radio-button>
</el-radio-group>
<el-radio-group :model-value="normalizedLayoutOptions.density" size="small" @change="(value) => updateLayoutOption('density', value)">
<el-radio-button label="compact">紧凑</el-radio-button>
<el-radio-button label="standard">标准</el-radio-button>
<el-radio-button label="relaxed">宽松</el-radio-button>
</el-radio-group>
<el-radio-group :model-value="normalizedLayoutOptions.direction" size="small" @change="(value) => updateLayoutOption('direction', value)">
<el-radio-button label="horizontal">横向</el-radio-button>
<el-radio-button label="vertical">竖向</el-radio-button>
</el-radio-group>
<el-select
:model-value="normalizedLayoutOptions.fontSize"
size="small"
class="module-font-select"
@change="(value) => updateLayoutOption('fontSize', value)"
>
<el-option label="小" value="small" />
<el-option label="标准" value="standard" />
<el-option label="大" value="large" />
</el-select>
<el-button :icon="Download" @click="exportSvg">SVG</el-button>
<el-button :icon="Picture" @click="exportPng">PNG</el-button>
</div>
</template>
</div>
<div v-if="editable" class="module-editor-pane">
<el-input
:model-value="activeOutlineText"
type="textarea"
:rows="12"
spellcheck="false"
@input="updateOutlineText"
/>
<div v-if="outlineWarnings.length" class="module-warning-list">
<el-tag
v-for="warning in outlineWarnings"
:key="`${warning.code}-${warning.line}`"
type="warning"
effect="plain"
>
第 {{ warning.line || 1 }} 行：{{ warning.message }}
</el-tag>
</div>
</div>
<el-empty v-if="!graph.nodes.length" description="生成系统模块设计后可查看系统功能模块图" />
<div v-else class="module-scroll">
<svg ref="svgRef" class="module-canvas" :viewBox="`0 0 ${canvas.width} ${canvas.height}`" :style="canvasStyle">
<g class="edge-layer">
<path
v-for="edge in graph.edges"
:key="edge.id"
class="tree-edge"
:d="edge.path"
fill="none"
stroke="#222222"
stroke-width="1.2"
vector-effect="non-scaling-stroke"
/>
</g>
<g class="node-layer">
<g
v-for="node in graph.nodes"
:key="node.id"
class="module-node"
:class="[node.kind, node.lane]"
:transform="`translate(${node.x}, ${node.y})`"
>
<rect class="module-node-box" :width="node.width" :height="node.height" fill="#ffffff" stroke="#222222" stroke-width="1" />
<text
v-if="node.vertical"
class="module-label"
:x="node.width / 2"
:y="verticalTextY(node)"
:font-size="node.fontSize || 16"
>
<tspan
v-for="(char, charIndex) in verticalChars(node.title)"
:key="`${node.id}-${charIndex}`"
:x="node.width / 2"
:dy="charIndex === 0 ? 0 : 18"
>
{{ char }}
</tspan>
</text>
<text
v-else
class="node-title"
:x="node.width / 2"
:y="node.height / 2"
:font-size="node.fontSize || (node.kind === 'root' ? 17 : 16)"
>
{{ shortText(node.title, 18) }}
</text>
</g>
</g>
<text class="figure-caption" :x="canvas.width / 2" :y="canvas.height - 24">{{ graph.caption }}</text>
</svg>
</div>
</div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import { Download, Picture } from '@element-plus/icons-vue'
import { buildAppModuleExportSvg } from '@/utils/appModuleExport'
import { buildAppModuleGraph } from '@/utils/appModuleGraph'
import {
blueprintToModuleOutline,
moduleOutlineToText,
parseModuleOutlineText
} from '@/utils/appModuleOutline'
import { saveBlob } from '@/utils/download'
const DEFAULT_LAYOUT_OPTIONS = {
density: 'standard',
direction: 'horizontal',
fontSize: 'standard'
}
const props = defineProps({
blueprint: {
type: Object,
default: () => ({ roles: [], frontendMenus: [], adminMenus: [] })
},
projectName: {
type: String,
default: ''
},
sourceMode: {
type: String,
default: 'blueprint'
},
outlineText: {
type: String,
default: ''
},
layoutOptions: {
type: Object,
default: () => ({ ...DEFAULT_LAYOUT_OPTIONS })
},
editable: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:sourceMode', 'update:outlineText', 'update:layoutOptions', 'graph-change'])
const svgRef = ref(null)
const graph = computed(() => buildAppModuleGraph(props.blueprint))
const normalizedLayoutOptions = computed(() => ({
density: props.layoutOptions?.density || DEFAULT_LAYOUT_OPTIONS.density,
direction: props.layoutOptions?.direction || DEFAULT_LAYOUT_OPTIONS.direction,
fontSize: props.layoutOptions?.fontSize || DEFAULT_LAYOUT_OPTIONS.fontSize
}))
const blueprintOutline = computed(() => blueprintToModuleOutline(props.blueprint, { projectName: props.projectName }))
const blueprintOutlineText = computed(() => moduleOutlineToText(blueprintOutline.value))
const activeOutlineText = computed(() => props.sourceMode === 'outline' ? props.outlineText : blueprintOutlineText.value)
const parsedOutline = computed(() => parseModuleOutlineText(activeOutlineText.value))
const outlineWarnings = computed(() => parsedOutline.value.warnings || [])
const graph = computed(() => buildAppModuleGraph(parsedOutline.value.outline, normalizedLayoutOptions.value))
const nodeMap = computed(() => {
const map = new Map()
graph.value.nodes.forEach((node) => map.set(node.id, node))
return map
})
const canvas = computed(() => {
const nodes = graph.value.nodes
const lanes = graph.value.lanes || []
const width = Math.max(980, ...lanes.map((lane) => lane.x + lane.width + 48), ...nodes.map((node) => node.x + node.width + 48))
const height = Math.max(430, ...nodes.map((node) => node.y + node.height + 48))
return { width, height }
})
const canvas = computed(() => graph.value.canvas || { width: 760, height: 420 })
const canvasStyle = computed(() => ({
width: `${canvas.value.width}px`,
height: `${canvas.value.height}px`
}))
const edgeViews = computed(() => graph.value.edges
.map((edge) => {
const source = nodeMap.value.get(edge.source)
const target = nodeMap.value.get(edge.target)
if (!source || !target) return null
const sourceX = source.x + source.width
const sourceY = source.y + source.height / 2
const targetX = target.x
const targetY = target.y + target.height / 2
const curve = Math.max(64, Math.abs(targetX - sourceX) / 2)
return {
...edge,
path: `M ${sourceX} ${sourceY} C ${sourceX + curve} ${sourceY}, ${targetX - curve} ${targetY}, ${targetX} ${targetY}`,
labelX: (sourceX + targetX) / 2,
labelY: (sourceY + targetY) / 2 - 9
}
})
.filter(Boolean))
watch(graph, (value) => {
emit('graph-change', value)
}, { immediate: true })
function shortText(value, maxLength) {
const text = String(value ?? '')
return text.length > maxLength ? `${text.slice(0, maxLength - 3)}...` : text
}
function badgeWidth(value) {
const text = String(value ?? '')
return Math.min(112, Math.max(48, text.length * 8 + 20))
function verticalChars(value) {
const chars = Array.from(String(value ?? '').trim())
if (chars.length <= 7) return chars
return [...chars.slice(0, 6), '…']
}
function badgeX(node, index) {
return node.badges.slice(0, index).reduce((x, badge) => x + badgeWidth(badge) + 6, 14)
function verticalTextY(node) {
const count = verticalChars(node.title).length
return Math.max(22, (node.height - (count - 1) * 18) / 2 + 5)
}
function exportStyle() {
return `
.lane-bg{fill:#f8fafc;stroke:#e2e8f0;stroke-width:1}
.lane-title{fill:#475569;font-family:Arial,sans-serif;font-size:13px;font-weight:700}
.module-edge{fill:none;stroke:#8aa0bc;stroke-width:1.7}
.edge-label{fill:#64748b;font-family:Arial,sans-serif;font-size:12px;paint-order:stroke;stroke:#f8fafc;stroke-width:4px;text-anchor:middle}
.module-node-box{fill:#fff;stroke:#d6e0ee;stroke-width:1}
.module-node-head{fill:#eef5ff}
.module-node-head-fill{fill:#eef5ff}
.module-node.access .module-node-head,.module-node.access .module-node-head-fill{fill:#ecfdf5}
.module-node.role .module-node-head,.module-node.role .module-node-head-fill{fill:#eff6ff}
.module-node.frontend .module-node-head,.module-node.frontend .module-node-head-fill{fill:#f0fdf4}
.module-node.admin .module-node-head,.module-node.admin .module-node-head-fill{fill:#fff7ed}
.node-title{fill:#0f172a;font-family:Arial,sans-serif;font-size:15px;font-weight:700}
.node-subtitle{fill:#64748b;font-family:Arial,sans-serif;font-size:12px}
.node-badge-bg{fill:#f8fafc;stroke:#e2e8f0;stroke-width:1}
.node-badge-text{fill:#475569;font-family:Arial,sans-serif;font-size:11px;font-weight:700;text-anchor:middle}`
function setSourceMode(value) {
const nextMode = value === 'outline' ? 'outline' : 'blueprint'
emit('update:sourceMode', nextMode)
if (nextMode === 'outline' && !props.outlineText) {
emit('update:outlineText', blueprintOutlineText.value)
}
}
function updateOutlineText(value) {
if (props.sourceMode !== 'outline') {
emit('update:sourceMode', 'outline')
}
emit('update:outlineText', value)
}
function updateLayoutOption(key, value) {
emit('update:layoutOptions', {
...normalizedLayoutOptions.value,
[key]: value
})
}
function exportSvg() {
const svgText = buildAppModuleExportSvg(graph.value)
saveBlob(new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' }), 'system-module-diagram.svg')
}
async function exportPng() {
if (!svgRef.value) return
const svg = svgRef.value.cloneNode(true)
const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')
style.textContent = exportStyle()
svg.insertBefore(style, svg.firstChild)
const svgText = `<?xml version="1.0" encoding="UTF-8"?>${svg.outerHTML}`
const svgText = buildAppModuleExportSvg(graph.value)
const svgBlob = new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' })
const url = URL.createObjectURL(svgBlob)
const image = new Image()
@@ -178,12 +247,13 @@ async function exportPng() {
canvasElement.width = canvas.value.width
canvasElement.height = canvas.value.height
const context = canvasElement.getContext('2d')
context.fillStyle = '#f8fafc'
if (!context) throw new Error('Canvas context unavailable')
context.fillStyle = '#ffffff'
context.fillRect(0, 0, canvasElement.width, canvasElement.height)
context.drawImage(image, 0, 0)
const blob = await new Promise((resolve) => canvasElement.toBlob(resolve, 'image/png'))
if (blob) {
saveBlob(blob, 'app-module-diagram.png')
saveBlob(blob, 'system-module-diagram.png')
}
} catch (error) {
ElMessage.warning('导出图片失败，请稍后重试')
@@ -195,126 +265,103 @@ async function exportPng() {
<style scoped lang="scss">
.app-module-diagram {
background: #f8fafc;
min-height: 430px;
background: #ffffff;
min-height: 420px;
}
.module-toolbar {
align-items: center;
background: #ffffff;
border-bottom: 1px solid #e3e8f0;
border-bottom: 1px solid #e5e7eb;
display: flex;
gap: 16px;
justify-content: space-between;
padding: 14px 18px;
padding: 12px 18px;
}
.module-summary {
color: #64748b;
color: #4b5563;
display: flex;
flex-wrap: wrap;
font-size: 13px;
gap: 12px;
}
.module-controls {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.module-font-select {
width: 92px;
}
.module-editor-pane {
background: #fbfdff;
border-bottom: 1px solid #e5e7eb;
display: grid;
gap: 10px;
padding: 16px 18px;
}
.module-warning-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.module-scroll {
min-height: 430px;
background: #ffffff;
min-height: 420px;
overflow: auto;
padding: 24px;
}
.module-canvas {
background: #ffffff;
display: block;
font-family: SimSun, "宋体", "Microsoft YaHei", Arial, sans-serif;
}
.lane-bg {
fill: #f8fafc;
stroke: #e2e8f0;
stroke-width: 1;
}
.lane-title {
fill: #475569;
font-size: 13px;
font-weight: 700;
}
.module-edge {
.tree-edge {
fill: none;
stroke: #8aa0bc;
stroke-width: 1.7;
}
.edge-label {
fill: #64748b;
font-size: 12px;
paint-order: stroke;
stroke: #f8fafc;
stroke-width: 4px;
text-anchor: middle;
shape-rendering: crispEdges;
stroke: #222222;
stroke-width: 1.2;
}
.module-node-box {
fill: #ffffff;
filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.08));
stroke: #d6e0ee;
shape-rendering: crispEdges;
stroke: #222222;
stroke-width: 1;
}
.module-node-head,
.module-node-head-fill {
fill: #eef5ff;
}
.module-node.access {
.module-node-head,
.module-node-head-fill {
fill: #ecfdf5;
}
}
.module-node.role {
.module-node-head,
.module-node-head-fill {
fill: #eff6ff;
}
}
.module-node.frontend {
.module-node-head,
.module-node-head-fill {
fill: #f0fdf4;
}
}
.module-node.admin {
.module-node-head,
.module-node-head-fill {
fill: #fff7ed;
}
}
.node-title {
fill: #0f172a;
font-size: 15px;
font-weight: 700;
dominant-baseline: middle;
fill: #111111;
font-size: 16px;
font-weight: 600;
text-anchor: middle;
}
.node-subtitle {
fill: #64748b;
font-size: 12px;
.module-node.root .node-title {
font-size: 17px;
}
.node-badge-bg {
fill: #f8fafc;
stroke: #e2e8f0;
stroke-width: 1;
.module-label {
fill: #111111;
font-size: 16px;
font-weight: 600;
text-anchor: middle;
}
.node-badge-text {
fill: #475569;
font-size: 11px;
font-weight: 700;
.figure-caption {
fill: #111111;
font-size: 14px;
text-anchor: middle;
}
@@ -323,5 +370,9 @@ async function exportPng() {
align-items: flex-start;
flex-direction: column;
}
.module-controls {
justify-content: flex-start;
}
}
</style>

48
RuoYi-Vue/easycode-web/src/components/appModuleDiagramView.test.mjs Normal file
View File

@@ -0,0 +1,48 @@
import test from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'
import { dirname, resolve } from 'node:path'
const currentDir = dirname(fileURLToPath(import.meta.url))
function readComponent(name) {
return readFileSync(resolve(currentDir, name), 'utf8')
}
test('app module diagram view exposes shared editor controls', () => {
const source = readComponent('AppModuleDiagramView.vue')
assert.equal(source.includes('sourceMode'), true)
assert.equal(source.includes('outlineText'), true)
assert.equal(source.includes('layoutOptions'), true)
assert.equal(source.includes('update:sourceMode'), true)
assert.equal(source.includes('update:outlineText'), true)
assert.equal(source.includes('update:layoutOptions'), true)
assert.equal(source.includes('自动蓝图'), true)
assert.equal(source.includes('缩进结构'), true)
assert.equal(source.includes('标准'), true)
assert.equal(source.includes('宽松'), true)
assert.equal(source.includes('紧凑'), true)
assert.equal(source.includes('横向'), true)
assert.equal(source.includes('竖向'), true)
})
test('app module diagram view supports svg and png export from the same graph', () => {
const source = readComponent('AppModuleDiagramView.vue')
assert.equal(source.includes('exportSvg'), true)
assert.equal(source.includes('exportPng'), true)
assert.equal(source.includes('buildAppModuleExportSvg(graph.value)'), true)
assert.equal(source.includes('saveBlob'), true)
assert.equal(source.includes('system-module-diagram.svg'), true)
assert.equal(source.includes('system-module-diagram.png'), true)
})
test('app module diagram view renders outline warnings next to the editor', () => {
const source = readComponent('AppModuleDiagramView.vue')
assert.equal(source.includes('outlineWarnings'), true)
assert.equal(source.includes('module-warning-list'), true)
assert.equal(source.includes('v-for="warning in outlineWarnings"'), true)
})

80
RuoYi-Vue/easycode-web/src/utils/appModuleExport.js Normal file
View File

@@ -0,0 +1,80 @@
function escapeXml(value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;')
}
function verticalChars(value) {
const chars = Array.from(String(value ?? '').trim())
if (chars.length <= 7) return chars
return [...chars.slice(0, 6), '…']
}
function verticalTextY(node) {
const count = verticalChars(node.title).length
return Math.max(22, (node.height - (count - 1) * 18) / 2 + 5)
}
function shortText(value, maxLength) {
const text = String(value ?? '')
return text.length > maxLength ? `${text.slice(0, maxLength - 3)}...` : text
}
function nodeFontSize(node, fallback) {
return Number(node.fontSize) || fallback
}
function renderVerticalText(node) {
const x = node.width / 2
const startY = verticalTextY(node)
return `
<text class="module-label" x="${x}" y="${startY}" font-size="${nodeFontSize(node, 16)}">
${verticalChars(node.title).map((char, index) => `<tspan x="${x}" dy="${index === 0 ? 0 : 18}">${escapeXml(char)}</tspan>`).join('')}
</text>`
}
function renderHorizontalText(node) {
return `
<text class="node-title" x="${node.width / 2}" y="${node.height / 2}" font-size="${nodeFontSize(node, node.kind === 'root' ? 17 : 16)}">${escapeXml(shortText(node.title, 18))}</text>`
}
function renderNode(node) {
const className = ['module-node', node.kind, node.lane].filter(Boolean).join(' ')
return `
<g class="${escapeXml(className)}" transform="translate(${node.x}, ${node.y})">
<rect class="module-node-box" width="${node.width}" height="${node.height}" fill="#ffffff" stroke="#222222" stroke-width="1" />
${node.vertical ? renderVerticalText(node) : renderHorizontalText(node)}
</g>`
}
function renderEdge(edge) {
return `
<path class="tree-edge" d="${escapeXml(edge.path)}" fill="none" stroke="#222222" stroke-width="1.2" vector-effect="non-scaling-stroke" />`
}
export function buildAppModuleExportSvg(graph = {}) {
const canvas = graph.canvas || {}
const width = Math.max(1, Number(canvas.width) || 1)
const height = Math.max(1, Number(canvas.height) || 1)
const nodes = Array.isArray(graph.nodes) ? graph.nodes : []
const edges = Array.isArray(graph.edges) ? graph.edges : []
return `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
<style>
.tree-edge{fill:none;stroke:#222;stroke-width:1.2;shape-rendering:crispEdges}
.module-node-box{fill:#fff;stroke:#222;stroke-width:1;shape-rendering:crispEdges}
.node-title{fill:#111;font-family:SimSun,"宋体","Microsoft YaHei",Arial,sans-serif;font-size:16px;font-weight:600;text-anchor:middle;dominant-baseline:middle}
.module-node.root .node-title{font-size:17px}
.module-label{fill:#111;font-family:SimSun,"宋体","Microsoft YaHei",Arial,sans-serif;font-size:16px;font-weight:600;text-anchor:middle}
.figure-caption{fill:#111;font-family:SimSun,"宋体","Microsoft YaHei",Arial,sans-serif;font-size:14px;text-anchor:middle}
</style>
<rect width="100%" height="100%" fill="#ffffff" />
<g>${edges.map(renderEdge).join('')}</g>
<g>${nodes.map(renderNode).join('')}</g>
<text class="figure-caption" x="${width / 2}" y="${height - 24}">${escapeXml(graph.caption)}</text>
</svg>`
}

114
RuoYi-Vue/easycode-web/src/utils/appModuleExport.test.mjs Normal file
View File

@@ -0,0 +1,114 @@
import test from 'node:test'
import assert from 'node:assert/strict'
import { buildAppModuleExportSvg } from './appModuleExport.js'
test('buildAppModuleExportSvg renders a pure image-loadable SVG', () => {
const svg = buildAppModuleExportSvg({
canvas: { width: 640, height: 420 },
caption: '系统功能结构图',
nodes: [
{
id: 'root',
title: 'BookManage',
kind: 'root',
lane: 'root',
x: 190,
y: 18,
width: 260,
height: 42
},
{
id: 'frontend:catalog',
title: '图书目录',
kind: 'module',
lane: 'frontend',
vertical: true,
x: 300,
y: 198,
width: 48,
height: 138
}
],
edges: [
{
id: 'root->frontend:catalog',
path: 'M 320 60 V 88 H 324 V 198'
}
]
})
assert.match(svg, /^<\?xml version="1.0" encoding="UTF-8"\?>/)
assert.equal(svg.includes('xmlns="http://www.w3.org/2000/svg"'), true)
assert.equal(svg.includes('width="640"'), true)
assert.equal(svg.includes('height="420"'), true)
assert.equal(svg.includes('data-v-'), false)
assert.equal(svg.includes('<foreignObject'), false)
assert.equal(svg.includes('BookManage'), true)
assert.equal(svg.includes('<tspan'), true)
})
test('buildAppModuleExportSvg escapes text and path values', () => {
const svg = buildAppModuleExportSvg({
canvas: { width: 320, height: 240 },
caption: 'A&B<图>',
nodes: [
{
id: 'root',
title: '图书 & 借阅 <系统>',
kind: 'root',
x: 10,
y: 10,
width: 200,
height: 40
}
],
edges: [
{
id: 'edge',
path: 'M 1 1 L 2 2"'
}
]
})
assert.equal(svg.includes('图书 &amp; 借阅 &lt;系统&gt;'), true)
assert.equal(svg.includes('A&amp;B&lt;图&gt;'), true)
assert.equal(svg.includes('d="M 1 1 L 2 2&quot;"'), true)
})
test('buildAppModuleExportSvg uses graph node font sizes', () => {
const svg = buildAppModuleExportSvg({
canvas: { width: 640, height: 420 },
caption: '系统功能结构图',
nodes: [
{
id: 'root',
title: '学生社团管理系统',
kind: 'root',
lane: 'root',
x: 190,
y: 18,
width: 260,
height: 42,
fontSize: 19
},
{
id: 'group_1:module_1',
title: '用户管理',
kind: 'module',
lane: 'group_1',
vertical: true,
x: 300,
y: 198,
width: 54,
height: 154,
fontSize: 18
}
],
edges: []
})
assert.equal(svg.includes('font-size="19"'), true)
assert.equal(svg.includes('font-size="18"'), true)
assert.equal(svg.includes('学生社团管理系统'), true)
assert.equal(svg.includes('<foreignObject'), false)
})