181 lines
9.8 KiB
XML
181 lines
9.8 KiB
XML
<svg width="800" height="1000" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<style>
|
|
.title { font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; fill: #2563eb; }
|
|
.subtitle { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; fill: #374151; }
|
|
.text { font-family: Arial, sans-serif; font-size: 12px; fill: #374151; }
|
|
.small-text { font-family: Arial, sans-serif; font-size: 10px; fill: #6b7280; }
|
|
.box { fill: #f3f4f6; stroke: #d1d5db; stroke-width: 2; rx: 8; }
|
|
.config-box { fill: #dbeafe; stroke: #3b82f6; stroke-width: 2; rx: 8; }
|
|
.process-box { fill: #dcfce7; stroke: #16a34a; stroke-width: 2; rx: 8; }
|
|
.component-box { fill: #fef3c7; stroke: #f59e0b; stroke-width: 2; rx: 8; }
|
|
.decision-diamond { fill: #fce7f3; stroke: #ec4899; stroke-width: 2; }
|
|
.arrow { stroke: #374151; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
|
|
.arrow-success { stroke: #16a34a; stroke-width: 2; fill: none; marker-end: url(#arrowhead-success); }
|
|
.arrow-error { stroke: #dc2626; stroke-width: 2; fill: none; marker-end: url(#arrowhead-error); }
|
|
</style>
|
|
|
|
<!-- Arrow markers -->
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#374151" />
|
|
</marker>
|
|
<marker id="arrowhead-success" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#16a34a" />
|
|
</marker>
|
|
<marker id="arrowhead-error" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#dc2626" />
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Title -->
|
|
<text x="400" y="30" text-anchor="middle" class="title">组件配置加载流程图</text>
|
|
<text x="400" y="50" text-anchor="middle" class="small-text">Widget Configuration Loading Flowchart</text>
|
|
|
|
<!-- Start -->
|
|
<ellipse cx="400" cy="90" rx="60" ry="25" class="box" />
|
|
<text x="400" y="95" text-anchor="middle" class="subtitle">开始</text>
|
|
|
|
<!-- Load Config Files -->
|
|
<rect x="320" y="140" width="160" height="60" class="config-box" />
|
|
<text x="400" y="160" text-anchor="middle" class="subtitle">加载配置文件</text>
|
|
<text x="400" y="175" text-anchor="middle" class="text">src/config.ts</text>
|
|
<text x="400" y="190" text-anchor="middle" class="text">src/types/config.ts</text>
|
|
|
|
<!-- Initialize Widget Manager -->
|
|
<rect x="320" y="230" width="160" height="60" class="process-box" />
|
|
<text x="400" y="250" text-anchor="middle" class="subtitle">初始化组件管理器</text>
|
|
<text x="400" y="265" text-anchor="middle" class="text">WidgetManager</text>
|
|
<text x="400" y="280" text-anchor="middle" class="text">加载 sidebarLayoutConfig</text>
|
|
|
|
<!-- Validate Configuration -->
|
|
<polygon points="400,320 460,350 400,380 340,350" class="decision-diamond" />
|
|
<text x="400" y="345" text-anchor="middle" class="text">配置</text>
|
|
<text x="400" y="360" text-anchor="middle" class="text">验证</text>
|
|
|
|
<!-- Error Handling -->
|
|
<rect x="520" y="320" width="120" height="60" class="box" style="fill: #fee2e2; stroke: #dc2626;" />
|
|
<text x="580" y="340" text-anchor="middle" class="subtitle">错误处理</text>
|
|
<text x="580" y="355" text-anchor="middle" class="text">显示错误信息</text>
|
|
<text x="580" y="370" text-anchor="middle" class="text">使用默认配置</text>
|
|
|
|
<!-- Filter Enabled Components -->
|
|
<rect x="320" y="420" width="160" height="60" class="process-box" />
|
|
<text x="400" y="440" text-anchor="middle" class="subtitle">筛选启用组件</text>
|
|
<text x="400" y="455" text-anchor="middle" class="text">enable: true</text>
|
|
<text x="400" y="470" text-anchor="middle" class="text">响应式检查</text>
|
|
|
|
<!-- Sort Components -->
|
|
<rect x="320" y="510" width="160" height="60" class="process-box" />
|
|
<text x="400" y="530" text-anchor="middle" class="subtitle">组件排序</text>
|
|
<text x="400" y="545" text-anchor="middle" class="text">按 order 排序</text>
|
|
<text x="400" y="560" text-anchor="middle" class="text">按 position 分组</text>
|
|
|
|
<!-- Group by Position -->
|
|
<rect x="200" y="600" width="140" height="60" class="component-box" />
|
|
<text x="270" y="620" text-anchor="middle" class="subtitle">Top 组件</text>
|
|
<text x="270" y="635" text-anchor="middle" class="text">position: 'top'</text>
|
|
<text x="270" y="650" text-anchor="middle" class="text">固定在顶部</text>
|
|
|
|
<rect x="460" y="600" width="140" height="60" class="component-box" />
|
|
<text x="530" y="620" text-anchor="middle" class="subtitle">Sticky 组件</text>
|
|
<text x="530" y="635" text-anchor="middle" class="text">position: 'sticky'</text>
|
|
<text x="530" y="650" text-anchor="middle" class="text">粘性定位</text>
|
|
|
|
<!-- Load Components -->
|
|
<rect x="320" y="700" width="160" height="60" class="process-box" />
|
|
<text x="400" y="720" text-anchor="middle" class="subtitle">动态加载组件</text>
|
|
<text x="400" y="735" text-anchor="middle" class="text">componentMap 映射</text>
|
|
<text x="400" y="750" text-anchor="middle" class="text">Astro 组件导入</text>
|
|
|
|
<!-- Apply Styles and Animations -->
|
|
<rect x="320" y="790" width="160" height="60" class="process-box" />
|
|
<text x="400" y="810" text-anchor="middle" class="subtitle">应用样式和动画</text>
|
|
<text x="400" y="825" text-anchor="middle" class="text">CSS 类名生成</text>
|
|
<text x="400" y="840" text-anchor="middle" class="text">动画延迟计算</text>
|
|
|
|
<!-- Render Components -->
|
|
<rect x="320" y="880" width="160" height="60" class="component-box" />
|
|
<text x="400" y="900" text-anchor="middle" class="subtitle">渲染组件</text>
|
|
<text x="400" y="915" text-anchor="middle" class="text">DynamicSideBar.astro</text>
|
|
<text x="400" y="930" text-anchor="middle" class="text">DOM 输出</text>
|
|
|
|
<!-- End -->
|
|
<ellipse cx="400" cy="980" rx="60" ry="25" class="box" />
|
|
<text x="400" y="985" text-anchor="middle" class="subtitle">完成</text>
|
|
|
|
<!-- Arrows -->
|
|
<line x1="400" y1="115" x2="400" y2="140" class="arrow" />
|
|
<line x1="400" y1="200" x2="400" y2="230" class="arrow" />
|
|
<line x1="400" y1="290" x2="400" y2="320" class="arrow" />
|
|
|
|
<!-- Decision arrows -->
|
|
<line x1="460" y1="350" x2="520" y2="350" class="arrow-error" />
|
|
<text x="490" y="345" text-anchor="middle" class="small-text">失败</text>
|
|
|
|
<line x1="400" y1="380" x2="400" y2="420" class="arrow-success" />
|
|
<text x="420" y="400" text-anchor="middle" class="small-text">成功</text>
|
|
|
|
<!-- Error recovery -->
|
|
<line x1="580" y1="380" x2="580" y2="400" class="arrow" />
|
|
<line x1="580" y1="400" x2="400" y2="400" class="arrow" />
|
|
|
|
<line x1="400" y1="480" x2="400" y2="510" class="arrow" />
|
|
<line x1="400" y1="570" x2="400" y2="590" class="arrow" />
|
|
|
|
<!-- Split to position groups -->
|
|
<line x1="350" y1="590" x2="270" y2="600" class="arrow" />
|
|
<line x1="450" y1="590" x2="530" y2="600" class="arrow" />
|
|
|
|
<!-- Merge from position groups -->
|
|
<line x1="270" y1="660" x2="350" y2="690" class="arrow" />
|
|
<line x1="530" y1="660" x2="450" y2="690" class="arrow" />
|
|
|
|
<line x1="400" y1="760" x2="400" y2="790" class="arrow" />
|
|
<line x1="400" y1="850" x2="400" y2="880" class="arrow" />
|
|
<line x1="400" y1="940" x2="400" y2="955" class="arrow" />
|
|
|
|
<!-- Side annotations -->
|
|
<g transform="translate(50, 200)">
|
|
<rect x="0" y="0" width="200" height="120" class="box" style="fill: #f9fafb; stroke: #e5e7eb; stroke-dasharray: 5,5;" />
|
|
<text x="100" y="20" text-anchor="middle" class="subtitle">配置文件结构</text>
|
|
<text x="10" y="40" class="small-text">• SidebarLayoutConfig</text>
|
|
<text x="10" y="55" class="small-text">• WidgetComponentConfig[]</text>
|
|
<text x="10" y="70" class="small-text">• 响应式断点设置</text>
|
|
<text x="10" y="85" class="small-text">• 动画配置</text>
|
|
<text x="10" y="100" class="small-text">• 自定义属性</text>
|
|
</g>
|
|
|
|
<g transform="translate(550, 450)">
|
|
<rect x="0" y="0" width="200" height="140" class="box" style="fill: #f9fafb; stroke: #e5e7eb; stroke-dasharray: 5,5;" />
|
|
<text x="100" y="20" text-anchor="middle" class="subtitle">组件类型</text>
|
|
<text x="10" y="40" class="small-text">• profile (用户资料)</text>
|
|
<text x="10" y="55" class="small-text">• announcement (公告)</text>
|
|
<text x="10" y="70" class="small-text">• categories (分类)</text>
|
|
<text x="10" y="85" class="small-text">• tags (标签)</text>
|
|
<text x="10" y="100" class="small-text">• toc (目录)</text>
|
|
<text x="10" y="115" class="small-text">• music-player (音乐)</text>
|
|
<text x="10" y="130" class="small-text">• custom (自定义)</text>
|
|
</g>
|
|
|
|
<g transform="translate(50, 700)">
|
|
<rect x="0" y="0" width="200" height="100" class="box" style="fill: #f9fafb; stroke: #e5e7eb; stroke-dasharray: 5,5;" />
|
|
<text x="100" y="20" text-anchor="middle" class="subtitle">响应式检查</text>
|
|
<text x="10" y="40" class="small-text">• 获取当前设备类型</text>
|
|
<text x="10" y="55" class="small-text">• 检查断点配置</text>
|
|
<text x="10" y="70" class="small-text">• 过滤不适用组件</text>
|
|
<text x="10" y="85" class="small-text">• 应用设备特定样式</text>
|
|
</g>
|
|
|
|
<!-- Legend -->
|
|
<g transform="translate(50, 850)">
|
|
<text x="0" y="0" class="subtitle">图例说明</text>
|
|
<rect x="0" y="10" width="20" height="15" class="config-box" />
|
|
<text x="25" y="22" class="small-text">配置相关</text>
|
|
<rect x="0" y="30" width="20" height="15" class="process-box" />
|
|
<text x="25" y="42" class="small-text">处理流程</text>
|
|
<rect x="100" y="10" width="20" height="15" class="component-box" />
|
|
<text x="125" y="22" class="small-text">组件相关</text>
|
|
<polygon points="100,35 110,40 100,45 90,40" class="decision-diamond" />
|
|
<text x="125" y="42" class="small-text">判断节点</text>
|
|
</g>
|
|
</svg> |