diff --git a/RuoYi-Vue/easycode-web/src/views/diagramCenterView.test.mjs b/RuoYi-Vue/easycode-web/src/views/diagramCenterView.test.mjs
new file mode 100644
index 0000000..335e1cd
--- /dev/null
+++ b/RuoYi-Vue/easycode-web/src/views/diagramCenterView.test.mjs
@@ -0,0 +1,96 @@
+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 readView(name) {
+  return readFileSync(resolve(currentDir, name), 'utf8')
+}
+
+function cssBlock(source, selector) {
+  const start = source.indexOf(`${selector} {`)
+  assert.notEqual(start, -1)
+  const end = source.indexOf('\n}', start)
+  assert.notEqual(end, -1)
+  return source.slice(start, end)
+}
+
+test('diagram center places the diagram menu above the canvas', () => {
+  const source = readView('DiagramCenterView.vue')
+
+  const layoutStyle = cssBlock(source, '.diagram-layout')
+  assert.match(layoutStyle, /grid-template-columns:\s*1fr;/)
+  assert.doesNotMatch(layoutStyle, /grid-template-columns:\s*280px\s+minmax\(0,\s*1fr\);/)
+
+  const sidebarStyle = cssBlock(source, '.diagram-sidebar')
+  assert.match(sidebarStyle, /border-bottom:\s*1px solid #e7ecf3;/)
+  assert.doesNotMatch(sidebarStyle, /border-right:\s*1px solid #e7ecf3;/)
+
+  const menuStyle = cssBlock(source, '.diagram-kind-list')
+  assert.match(menuStyle, /display:\s*flex;/)
+  assert.match(menuStyle, /flex-wrap:\s*wrap;/)
+})
+
+test('diagram center uses the full content width', () => {
+  const source = readView('DiagramCenterView.vue')
+
+  const pageStyle = cssBlock(source, '.diagram-center-page')
+  assert.match(pageStyle, /width:\s*calc\(100% - 40px\);/)
+  assert.match(pageStyle, /max-width:\s*none;/)
+})
+
+test('diagram center can open directly on a requested diagram tab', () => {
+  const source = readView('DiagramCenterView.vue')
+
+  assert.equal(source.includes('function normalizeInitialDiagram'), true)
+  assert.equal(source.includes("const activeDiagram = ref(normalizeInitialDiagram(route.query.diagram))"), true)
+  assert.equal(source.includes("return DIAGRAM_QUERY_ALIASES[String(key || '')] || 'three_line_table'"), true)
+  assert.match(source, /module:\s*'module'/)
+})
+
+test('diagram center promotes the three-line table tab and removes overview', () => {
+  const source = readView('DiagramCenterView.vue')
+  const menuStart = source.indexOf('<el-radio-group v-model="activeDiagram" class="diagram-kind-list">')
+  assert.notEqual(menuStart, -1)
+  const menuEnd = source.indexOf('</el-radio-group>', menuStart)
+  assert.notEqual(menuEnd, -1)
+  const menu = source.slice(menuStart, menuEnd)
+  const labels = [...menu.matchAll(/<el-radio-button label="([^"]+)"/g)].map((match) => match[1])
+
+  assert.deepEqual(labels, ['three_line_table', 'er', 'module', 'architecture', 'flowchart', 'sequence', 'ai'])
+  assert.doesNotMatch(source, /overview:\s*'overview'/)
+  assert.doesNotMatch(source, /activeDiagram\.value === 'overview'/)
+  assert.doesNotMatch(source, /function buildOverviewGraph/)
+})
+
+test('diagram center exposes a dedicated use case diagram tab and direct route', () => {
+  const source = readView('DiagramCenterView.vue')
+
+  assert.equal(source.includes('label="use_case"'), true)
+  assert.match(source, />用例图</)
+  assert.match(source, /use_case:\s*'use_case'/)
+  assert.equal(source.includes("const useCaseDsl = ref('')"), true)
+})
+
+test('diagram center saves and restores use case diagram DSL payloads', () => {
+  const source = readView('DiagramCenterView.vue')
+
+  assert.equal(source.includes('function applySavedUseCaseDiagram'), true)
+  assert.equal(source.includes("savedDiagrams.value.find((item) => item.diagramType === 'use_case')"), true)
+  assert.equal(source.includes("diagramType: 'use_case'"), true)
+  assert.equal(source.includes('dsl: useCaseDsl.value'), true)
+  assert.equal(source.includes('graph: useCaseDiagram.value'), true)
+})
+
+test('diagram center wires use case SVG and PNG export handlers', () => {
+  const source = readView('DiagramCenterView.vue')
+
+  assert.equal(source.includes('buildUseCaseExportSvg'), true)
+  assert.equal(source.includes('function useCaseSvgText'), true)
+  assert.equal(source.includes('downloadUseCaseSvg'), true)
+  assert.equal(source.includes('downloadUseCasePng'), true)
+  assert.equal(source.includes('useCaseRelationPath'), true)
+})