sanbuphy
d35211071a
- standardize border-radius from 8px to 6px for consistent styling - adjust padding values from 1rem to 0.75rem for better visual hierarchy - remove redundant overflow-y properties for cleaner code
131 lines
4.0 KiB
Vue
131 lines
4.0 KiB
Vue
<template>
|
||
<div class="dependency-graph-demo">
|
||
<div class="demo-header">
|
||
<span class="icon">🕸️</span>
|
||
<span class="title">依赖图谱</span>
|
||
<span class="subtitle">模块依赖关系可视化</span>
|
||
</div>
|
||
|
||
<div class="graph-container">
|
||
<svg class="graph-svg" viewBox="0 0 500 300">
|
||
<defs>
|
||
<marker id="arrow" markerWidth="8" markerHeight="6" refX="18" refY="3" orient="auto">
|
||
<polygon points="0 0, 8 3, 0 6" fill="var(--vp-c-text-3)" />
|
||
</marker>
|
||
</defs>
|
||
|
||
<line v-for="edge in edges" :key="edge.id"
|
||
:x1="getNode(edge.source).x" :y1="getNode(edge.source).y"
|
||
:x2="getNode(edge.target).x" :y2="getNode(edge.target).y"
|
||
stroke="var(--vp-c-text-3)" stroke-width="1.5" marker-end="url(#arrow)"
|
||
/>
|
||
|
||
<g v-for="node in nodes" :key="node.id" :transform="`translate(${node.x}, ${node.y})`">
|
||
<circle :r="node.r" :fill="node.color" stroke="white" stroke-width="2" />
|
||
<text y="4" text-anchor="middle" fill="white" font-size="12">{{ node.icon }}</text>
|
||
<text :y="node.r + 14" text-anchor="middle" fill="var(--vp-c-text-1)" font-size="10">{{ node.name }}</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item"><span class="dot entry"></span>入口文件</div>
|
||
<div class="legend-item"><span class="dot module"></span>模块</div>
|
||
<div class="legend-item"><span class="arrow">→</span>依赖关系</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<span class="icon">💡</span>
|
||
<strong>依赖图谱的作用：</strong>就像地图一样，帮助你理解模块之间是如何相互引用的。main.js 引用了 utils、components、api，而 components 又引用了 utils——这就是依赖链。
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const nodes = ref([
|
||
{ id: 'main', name: 'main.js', icon: '🚀', color: '#646cff', r: 22, x: 250, y: 60 },
|
||
{ id: 'utils', name: 'utils.js', icon: '🛠️', color: '#ff6b6b', r: 18, x: 100, y: 150 },
|
||
{ id: 'components', name: 'components/', icon: '🧩', color: '#4ecdc4', r: 20, x: 250, y: 150 },
|
||
{ id: 'api', name: 'api.js', icon: '🔌', color: '#ffe66d', r: 18, x: 400, y: 150 },
|
||
{ id: 'hooks', name: 'hooks.js', icon: '⚓', color: '#ff8b94', r: 16, x: 180, y: 240 },
|
||
{ id: 'config', name: 'config.js', icon: '⚙️', color: '#c7ceea', r: 14, x: 320, y: 240 }
|
||
])
|
||
|
||
const edges = ref([
|
||
{ id: 1, source: 'main', target: 'utils' },
|
||
{ id: 2, source: 'main', target: 'components' },
|
||
{ id: 3, source: 'main', target: 'api' },
|
||
{ id: 4, source: 'components', target: 'utils' },
|
||
{ id: 5, source: 'components', target: 'hooks' },
|
||
{ id: 6, source: 'api', target: 'config' }
|
||
])
|
||
|
||
const getNode = (id) => nodes.value.find(n => n.id === id)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dependency-graph-demo {
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 6px;
|
||
background: var(--vp-c-bg-soft);
|
||
padding: 0.75rem;
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.demo-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.demo-header .icon { font-size: 1.25rem; }
|
||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||
|
||
.graph-container {
|
||
background: var(--vp-c-bg);
|
||
border-radius: 6px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.graph-svg {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.legend {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
margin-top: 0.75rem;
|
||
font-size: 0.8rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.legend-item { display: flex; align-items: center; gap: 0.3rem; }
|
||
|
||
.dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.dot.entry { background: #646cff; }
|
||
.dot.module { background: #4ecdc4; }
|
||
.arrow { color: var(--vp-c-text-3); }
|
||
|
||
.info-box {
|
||
background: var(--vp-c-bg-alt);
|
||
padding: 0.75rem;
|
||
border-radius: 6px;
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-2);
|
||
margin-top: 0.75rem;
|
||
}
|
||
|
||
.info-box .icon { margin-right: 0.25rem; }
|
||
</style>
|