delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): enhance interactive demos and improve documentation

Browse Source 
- Add new interactive components for frontend routing, browser rendering pipeline, and database transactions
- Improve existing demos with better visuals, explanations, and examples
- Update documentation structure and content for better clarity
- Add new utility scripts and update package.json with new commands
- Fix formatting and alignment in documentation tables
This commit is contained in:
sanbuphy
2026-02-13 22:10:03 +08:00
parent 599052b2e0
commit d174ceea32
88 changed files with 26273 additions and 15539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue
+149 -97
View File
@@ -1,26 +1,21 @@
<template>
<div class="mpa-routing-demo">
<div class="demo-header">
<h4>MPA vs SPA 路由对比</h4>
<p class="demo-desc">对比多页面应用和单页面应用的路由机制差异</p>
<span class="icon">🔄</span>
<span class="title">MPA vs SPA</span>
<span class="subtitle">多页面 vs 单页面导航</span>
</div>
<div class="comparison-table">
<div class="table-header">
<div class="col feature">特性</div>
<div class="col mpa">MPA (多页面)</div>
<div class="col spa">SPA (单页面)</div>
</div>
<div class="table-row" v-for="(row, index) in comparisonData" :key="index">
<div class="col feature">{{ row.feature }}</div>
<div class="col mpa">{{ row.mpa }}</div>
<div class="col spa">{{ row.spa }}</div>
</div>
<div class="intro-text">
想象你在<span class="highlight">餐厅吃饭</span>：MPA像是每次点菜都<span class="highlight">换一家餐厅</span>（重新加载整个页面），SPA则是在同一家餐厅换菜品（只更新需要变化的部分）。显然，SPA体验更流畅！
</div>
<div class="flow-comparison">
<div class="flow-box mpa-flow">
<h5>MPA 导航流程</h5>
<div class="comparison-container">
<div class="mode-box mpa">
<div class="mode-header">
<span class="mode-icon">🏢</span>
<span class="mode-title">MPA (多页面应用)</span>
</div>
<div class="flow-steps">
<div class="step">1. 用户点击链接</div>
<div class="step">2. 浏览器发送 HTTP 请求</div>
@@ -28,19 +23,56 @@
<div class="step">4. 浏览器解析并渲染新页面</div>
<div class="step">5. 页面资源重新加载 (JS/CSS)</div>
</div>
<div class="mode-features">
<div class="feature">
<span class="feature-icon">✓</span>
<span>SEO 友好</span>
</div>
<div class="feature">
<span class="feature-icon">✓</span>
<span>首屏快</span>
</div>
<div class="feature bad">
<span class="feature-icon">✗</span>
<span>页面有白屏</span>
</div>
</div>
</div>
<div class="flow-box spa-flow">
<h5>SPA 导航流程</h5>
<div class="mode-box spa">
<div class="mode-header">
<span class="mode-icon">⚡</span>
<span class="mode-title">SPA (单页面应用)</span>
</div>
<div class="flow-steps">
<div class="step">1. 用户点击链接</div>
<div class="step">2. 拦截默认行为 (preventDefault)</div>
<div class="step">2. 拦截默认行为</div>
<div class="step">3. 更新 URL (History API)</div>
<div class="step">4. 匹配路由配置</div>
<div class="step">5. 动态渲染新组件</div>
<div class="step">6. 页面无刷新更新</div>
</div>
<div class="mode-features">
<div class="feature">
<span class="feature-icon">✓</span>
<span>过渡流畅</span>
</div>
<div class="feature">
<span class="feature-icon">✓</span>
<span>体验好</span>
</div>
<div class="feature bad">
<span class="feature-icon">✗</span>
<span>需要 SSR 支持 SEO</span>
</div>
</div>
</div>
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心区别：</strong>MPA每次跳转都要重新下载整个页面，SPA只在首次加载时下载，后续只更新变化的内容。这就是为什么SPA感觉"更快"的原因。
</div>
</div>
</template>
@@ -50,127 +82,147 @@ const comparisonData = [
{ feature: 'URL 变化', mpa: '浏览器地址栏正常变化', spa: 'History API 控制 URL' },
{ feature: '用户体验', mpa: '页面有白屏闪烁', spa: '过渡流畅无刷新' },
{ feature: 'SEO 友好', mpa: '天生对搜索引擎友好', spa: '需要 SSR/预渲染优化' },
{ feature: '首屏时间', mpa: '较快（只加载当前页）', spa: '较慢（需加载完整应用）' },
{ feature: '服务端压力', mpa: '较高（每次请求都渲染）', spa: '较低（大部分逻辑在客户端）' },
{ feature: '开发复杂度', mpa: '简单，传统开发模式', spa: '较复杂，需理解前端路由' }
{ feature: '首屏时间', mpa: '较快（只加载当前页）', spa: '较慢（需加载完整应用）' }
]
</script>
<style scoped>
.mpa-routing-demo {
padding: 20px;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
background: var(--vp-c-bg-soft);
border-radius: 12px;
margin: 20px 0;
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
}
.demo-header {
text-align: center;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.demo-header h4 {
margin: 0 0 8px 0;
color: var(--vp-c-text-1);
}
.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; }
.demo-desc {
margin: 0;
.intro-text {
font-size: 0.9rem;
color: var(--vp-c-text-2);
font-size: 14px;
line-height: 1.6;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 6px;
}
.comparison-table {
.intro-text .highlight {
color: var(--vp-c-brand-1);
font-weight: 500;
}
.comparison-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.mode-box {
background: var(--vp-c-bg);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--vp-c-divider);
margin-bottom: 20px;
}
.table-header {
display: grid;
grid-template-columns: 1fr 1.2fr 1.2fr;
.mode-header {
padding: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--vp-c-bg-soft);
border-bottom: 1px solid var(--vp-c-divider);
}
.mode-box.mpa .mode-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.mode-box.spa .mode-header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.mode-icon {
font-size: 1.25rem;
}
.mode-title {
font-size: 0.9rem;
font-weight: 600;
font-size: 13px;
}
.table-row {
display: grid;
grid-template-columns: 1fr 1.2fr 1.2fr;
border-top: 1px solid var(--vp-c-divider);
}
.col {
padding: 12px 16px;
font-size: 13px;
}
.col.feature {
font-weight: 500;
color: var(--vp-c-text-1);
}
.col.mpa {
color: var(--vp-c-text-2);
}
.col.spa {
color: var(--vp-c-brand);
}
.flow-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.flow-box {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--vp-c-divider);
}
.flow-box h5 {
margin: 0 0 16px 0;
font-size: 14px;
color: var(--vp-c-text-1);
}
.flow-steps {
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 8px;
gap: 0.5rem;
}
.step {
padding: 10px 12px;
padding: 0.5rem 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 6px;
font-size: 12px;
font-size: 0.75rem;
color: var(--vp-c-text-2);
border-left: 3px solid var(--vp-c-brand);
}
.mpa-flow .step {
border-left-color: #888;
.mode-features {
padding: 0.75rem;
border-top: 1px solid var(--vp-c-divider);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.spa-flow .step {
border-left-color: var(--vp-c-brand);
.feature {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--vp-c-text-2);
}
.feature-icon {
font-size: 0.9rem;
}
.feature .feature-icon {
color: #27c93f;
}
.feature.bad .feature-icon {
color: #ff5f56;
}
.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: 1rem;
}
.info-box .icon { margin-right: 0.25rem; }
@media (max-width: 768px) {
.table-header,
.table-row {
grid-template-columns: 1fr;
}
.flow-comparison {
.comparison-container {
grid-template-columns: 1fr;
}
}
</style>
</content>