docs: 重构 README 附录展示 & 新增多个附录交互组件
README 更新: - 移除顶部 header.png 横幅图片 - 新增「附录知识库」板块，以 3×3 网格展示 9 大知识领域精选内容 - 附录链接指向部署版网站 (datawhalechina.github.io) - 阶段表格新增「附录」行，突出 80+ 交互式专题 - 章节标题「新手入门 & PM」简化为「零基础入门」 - News 新增 2026-02-25 附录知识库更新条目 新增交互组件: - 异步任务队列 (async-task-queues) 演示组件 - 文件存储 (file-storage) 演示组件 - 项目架构 (project-architecture) 演示组件 - 限流与背压 (rate-limiting) 演示组件 - 搜索引擎 (search-engines) 演示组件 - 计算机基础: AppLaunch/BiosUefi/OSBoot 等启动流程演示组件 新增附录文档: - 前端项目架构 (frontend-project-architecture.md) - 后端项目架构 (backend-project-architecture.md) 内容优化: - 算法思维、数据结构、编程语言、调试艺术等多篇附录内容更新 - HTML/CSS 布局、请求旅程等前后端文档完善 - 附录索引页 (index.md) 同步更新
This commit is contained in:
sanbuphy
@@ -0,0 +1,123 @@
|
||||
<!--
|
||||
CDNAccelerationDemo.vue
|
||||
CDN 加速演示：展示 CDN 如何加速文件访问
|
||||
-->
|
||||
<template>
|
||||
<div class="cdn-demo">
|
||||
<div class="header">
|
||||
<div class="title">CDN 加速原理</div>
|
||||
<div class="subtitle">对比有无 CDN 时的文件访问路径</div>
|
||||
</div>
|
||||
|
||||
<div class="mode-tabs">
|
||||
<button :class="['tab', { active: !cdnEnabled }]" @click="cdnEnabled = false">无 CDN</button>
|
||||
<button :class="['tab', { active: cdnEnabled }]" @click="cdnEnabled = true">有 CDN</button>
|
||||
</div>
|
||||
|
||||
<div class="diagram">
|
||||
<div class="node user-node">
|
||||
<div class="node-icon">👤</div>
|
||||
<div class="node-label">北京用户</div>
|
||||
</div>
|
||||
|
||||
<div class="path-line" :class="{ highlight: !cdnEnabled }">
|
||||
<span class="latency">{{ cdnEnabled ? '5ms' : '200ms' }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="cdnEnabled" class="node cdn-node">
|
||||
<div class="node-icon">⚡</div>
|
||||
<div class="node-label">北京 CDN 节点</div>
|
||||
<div class="node-detail">缓存命中</div>
|
||||
</div>
|
||||
|
||||
<div v-if="cdnEnabled" class="path-line miss-line">
|
||||
<span class="latency miss">缓存未命中时回源</span>
|
||||
</div>
|
||||
|
||||
<div class="node origin-node">
|
||||
<div class="node-icon">🏢</div>
|
||||
<div class="node-label">源站（美西 S3）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics">
|
||||
<div class="metric">
|
||||
<div class="metric-label">首字节时间 (TTFB)</div>
|
||||
<div class="metric-bar">
|
||||
<div class="bar-fill" :style="{ width: cdnEnabled ? '15%' : '100%' }"></div>
|
||||
</div>
|
||||
<div class="metric-value">{{ cdnEnabled ? '~30ms' : '~200ms' }}</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="metric-label">下载 1MB 图片</div>
|
||||
<div class="metric-bar">
|
||||
<div class="bar-fill" :style="{ width: cdnEnabled ? '20%' : '100%' }"></div>
|
||||
</div>
|
||||
<div class="metric-value">{{ cdnEnabled ? '~50ms' : '~800ms' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const cdnEnabled = ref(true)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cdn-demo {
|
||||
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
|
||||
}
|
||||
.header { margin-bottom: 1rem; }
|
||||
.title { font-weight: 700; font-size: 1.1rem; }
|
||||
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
|
||||
.mode-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||
.tab {
|
||||
padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
|
||||
}
|
||||
.tab.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
|
||||
.diagram {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
|
||||
}
|
||||
.node {
|
||||
padding: 0.75rem 1rem; border-radius: 10px; text-align: center;
|
||||
border: 2px solid var(--vp-c-divider); background: var(--vp-c-bg);
|
||||
}
|
||||
.cdn-node { border-color: #22c55e; background: rgba(34,197,94,0.05); }
|
||||
.node-icon { font-size: 1.5rem; }
|
||||
.node-label { font-weight: 600; font-size: 0.85rem; margin-top: 0.25rem; }
|
||||
.node-detail { font-size: 0.75rem; color: #22c55e; }
|
||||
.path-line {
|
||||
display: flex; align-items: center; padding: 0 0.5rem;
|
||||
font-size: 0.8rem; color: var(--vp-c-text-3);
|
||||
}
|
||||
.path-line::before, .path-line::after { content: '→'; margin: 0 0.25rem; }
|
||||
.latency {
|
||||
padding: 0.15rem 0.4rem; border-radius: 4px; font-family: var(--vp-font-family-mono);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.1); color: var(--vp-c-brand); font-size: 0.75rem;
|
||||
}
|
||||
.latency.miss { background: rgba(245,158,11,0.1); color: #f59e0b; font-family: var(--vp-font-family-base); }
|
||||
.miss-line { opacity: 0.5; }
|
||||
.metrics { display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.metric { display: flex; align-items: center; gap: 0.75rem; }
|
||||
.metric-label { min-width: 140px; font-size: 0.85rem; font-weight: 600; }
|
||||
.metric-bar {
|
||||
flex: 1; height: 20px; background: var(--vp-c-bg); border-radius: 4px;
|
||||
border: 1px solid var(--vp-c-divider); overflow: hidden;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%; background: var(--vp-c-brand); border-radius: 3px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
.metric-value { min-width: 80px; font-size: 0.85rem; font-family: var(--vp-font-family-mono); text-align: right; }
|
||||
@media (max-width: 640px) {
|
||||
.diagram { flex-direction: column; }
|
||||
.path-line::before, .path-line::after { content: '↓'; }
|
||||
.metric { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
|
||||
.metric-label { min-width: auto; }
|
||||
.metric-value { min-width: auto; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!--
|
||||
StorageTypeDemo.vue (file-storage)
|
||||
文件存储类型对比演示
|
||||
-->
|
||||
<template>
|
||||
<div class="storage-type-demo">
|
||||
<div class="header">
|
||||
<div class="title">存储类型对比</div>
|
||||
<div class="subtitle">点击查看不同存储方式的特点</div>
|
||||
</div>
|
||||
|
||||
<div class="type-cards">
|
||||
<div
|
||||
v-for="t in types"
|
||||
:key="t.key"
|
||||
:class="['type-card', { active: selected === t.key }]"
|
||||
@click="selected = t.key"
|
||||
>
|
||||
<div class="type-icon">{{ t.icon }}</div>
|
||||
<div class="type-name">{{ t.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="current" class="detail">
|
||||
<div class="detail-title">{{ current.name }}</div>
|
||||
<div class="detail-desc">{{ current.desc }}</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<div class="item-label">访问方式</div>
|
||||
<div class="item-value">{{ current.access }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="item-label">典型场景</div>
|
||||
<div class="item-value">{{ current.scenario }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="item-label">代表产品</div>
|
||||
<div class="item-value">{{ current.products }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="item-label">扩展性</div>
|
||||
<div class="item-value">{{ current.scalability }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const selected = ref('object')
|
||||
|
||||
const types = [
|
||||
{
|
||||
key: 'block', icon: '🧱', name: '块存储',
|
||||
desc: '将数据切分为固定大小的"块"，像硬盘一样提供原始存储空间。操作系统可以在上面创建文件系统。性能最高，但不能直接通过网络共享。',
|
||||
access: 'iSCSI / FC 协议，挂载为磁盘设备',
|
||||
scenario: '数据库存储、虚拟机磁盘',
|
||||
products: 'AWS EBS、阿里云云盘、Ceph RBD',
|
||||
scalability: '单卷有容量上限，需要手动扩容'
|
||||
},
|
||||
{
|
||||
key: 'file', icon: '📁', name: '文件存储',
|
||||
desc: '提供传统的文件系统接口（目录 + 文件），支持多台服务器同时挂载和读写。就像一个网络共享文件夹。',
|
||||
access: 'NFS / SMB / CIFS 协议，挂载为目录',
|
||||
scenario: '共享配置文件、CMS 媒体文件、日志收集',
|
||||
products: 'AWS EFS、阿里云 NAS、NFS Server',
|
||||
scalability: '容量可弹性伸缩，但性能受限于协议开销'
|
||||
},
|
||||
{
|
||||
key: 'object', icon: '☁️', name: '对象存储',
|
||||
desc: '通过 HTTP API 存取文件（对象），每个对象有唯一 Key。扁平结构，无目录层级。容量几乎无限，成本最低，是互联网应用的首选。',
|
||||
access: 'HTTP/HTTPS RESTful API（PUT/GET/DELETE）',
|
||||
scenario: '图片、视频、备份、静态网站托管、数据湖',
|
||||
products: 'AWS S3、阿里云 OSS、MinIO、Cloudflare R2',
|
||||
scalability: '近乎无限扩展，自动分布式存储'
|
||||
}
|
||||
]
|
||||
|
||||
const current = computed(() => types.find(t => t.key === selected.value))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.storage-type-demo {
|
||||
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
|
||||
}
|
||||
.header { margin-bottom: 1rem; }
|
||||
.title { font-weight: 700; font-size: 1.1rem; }
|
||||
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
|
||||
.type-cards { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
|
||||
.type-card {
|
||||
flex: 1; padding: 1rem; border-radius: 10px; background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider); cursor: pointer; text-align: center; transition: all 0.2s;
|
||||
}
|
||||
.type-card:hover { border-color: var(--vp-c-brand); }
|
||||
.type-card.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); }
|
||||
.type-icon { font-size: 2rem; margin-bottom: 0.5rem; }
|
||||
.type-name { font-weight: 700; font-size: 0.95rem; }
|
||||
.detail {
|
||||
padding: 1rem; border-radius: 10px; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
.detail-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
|
||||
.detail-desc { font-size: 0.9rem; color: var(--vp-c-text-2); line-height: 1.6; margin-bottom: 1rem; }
|
||||
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||||
.detail-item { padding: 0.5rem 0.75rem; background: var(--vp-c-bg-soft); border-radius: 6px; }
|
||||
.item-label { font-weight: 600; font-size: 0.8rem; color: var(--vp-c-text-3); margin-bottom: 0.25rem; }
|
||||
.item-value { font-size: 0.85rem; color: var(--vp-c-text-2); line-height: 1.5; }
|
||||
@media (max-width: 640px) {
|
||||
.type-cards { flex-direction: column; }
|
||||
.detail-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,135 @@
|
||||
<!--
|
||||
FileUploadFlowDemo.vue
|
||||
文件上传流程演示：直传 vs 服务端中转
|
||||
-->
|
||||
<template>
|
||||
<div class="upload-flow-demo">
|
||||
<div class="header">
|
||||
<div class="title">文件上传方式对比</div>
|
||||
<div class="subtitle">点击切换查看两种上传方式的流程差异</div>
|
||||
</div>
|
||||
|
||||
<div class="mode-tabs">
|
||||
<button
|
||||
:class="['tab', { active: mode === 'proxy' }]"
|
||||
@click="mode = 'proxy'; reset()"
|
||||
>服务端中转</button>
|
||||
<button
|
||||
:class="['tab', { active: mode === 'direct' }]"
|
||||
@click="mode = 'direct'; reset()"
|
||||
>客户端直传</button>
|
||||
</div>
|
||||
|
||||
<div class="flow-steps">
|
||||
<div
|
||||
v-for="(step, i) in currentSteps"
|
||||
:key="i"
|
||||
:class="['step', { active: currentStep === i, done: currentStep > i }]"
|
||||
>
|
||||
<div class="step-num">{{ i + 1 }}</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div v-if="step.note" class="step-note">{{ step.note }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="play-btn" @click="playFlow" :disabled="playing">
|
||||
{{ playing ? '演示中...' : '播放流程' }}
|
||||
</button>
|
||||
|
||||
<div :class="['verdict', mode]" v-if="currentStep >= currentSteps.length">
|
||||
<template v-if="mode === 'proxy'">
|
||||
⚠️ 服务端中转：文件经过你的服务器，占用带宽和内存，大文件容易超时
|
||||
</template>
|
||||
<template v-else>
|
||||
✅ 客户端直传：文件直接上传到 OSS，服务器只负责签发凭证，高效且省资源
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const mode = ref('proxy')
|
||||
const currentStep = ref(-1)
|
||||
const playing = ref(false)
|
||||
|
||||
const proxySteps = [
|
||||
{ title: '客户端 → 服务器', desc: '用户选择文件，上传到你的后端服务器', note: '大文件会占用服务器带宽和内存' },
|
||||
{ title: '服务器接收文件', desc: '后端将文件暂存到本地磁盘或内存', note: '可能触发 Nginx 的 body size 限制' },
|
||||
{ title: '服务器 → OSS', desc: '后端再将文件转发到对象存储', note: '文件传输了两次，效率低' },
|
||||
{ title: 'OSS 返回 URL', desc: '对象存储返回文件的访问地址', note: '' },
|
||||
{ title: '服务器 → 客户端', desc: '后端将文件 URL 返回给前端', note: '' }
|
||||
]
|
||||
|
||||
const directSteps = [
|
||||
{ title: '客户端 → 服务器', desc: '前端请求一个临时上传凭证（Pre-signed URL）', note: '只传少量 JSON 数据，毫秒级' },
|
||||
{ title: '服务器签发凭证', desc: '后端用 OSS SDK 生成带签名的临时上传 URL', note: '凭证有效期通常 5-15 分钟' },
|
||||
{ title: '客户端 → OSS', desc: '前端直接将文件上传到对象存储', note: '文件不经过你的服务器，节省带宽' },
|
||||
{ title: 'OSS 回调通知', desc: '上传完成后 OSS 回调你的服务器确认', note: '服务器记录文件元信息到数据库' }
|
||||
]
|
||||
|
||||
const currentSteps = computed(() => mode.value === 'proxy' ? proxySteps : directSteps)
|
||||
|
||||
function reset() {
|
||||
currentStep.value = -1
|
||||
playing.value = false
|
||||
}
|
||||
|
||||
async function playFlow() {
|
||||
reset()
|
||||
playing.value = true
|
||||
for (let i = 0; i < currentSteps.value.length; i++) {
|
||||
currentStep.value = i
|
||||
await new Promise(r => setTimeout(r, 800))
|
||||
}
|
||||
currentStep.value = currentSteps.value.length
|
||||
playing.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-flow-demo {
|
||||
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
|
||||
}
|
||||
.header { margin-bottom: 1rem; }
|
||||
.title { font-weight: 700; font-size: 1.1rem; }
|
||||
.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
|
||||
.mode-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
|
||||
.tab {
|
||||
padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
|
||||
}
|
||||
.tab.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
|
||||
.flow-steps { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
|
||||
.step {
|
||||
display: flex; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 8px;
|
||||
background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); transition: all 0.3s;
|
||||
}
|
||||
.step.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); }
|
||||
.step.done { border-color: #22c55e; background: rgba(34,197,94,0.03); }
|
||||
.step-num {
|
||||
width: 28px; height: 28px; border-radius: 50%; background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider); display: flex; align-items: center;
|
||||
justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0;
|
||||
}
|
||||
.step.active .step-num { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
|
||||
.step.done .step-num { border-color: #22c55e; color: #22c55e; }
|
||||
.step-title { font-weight: 600; font-size: 0.9rem; }
|
||||
.step-desc { font-size: 0.8rem; color: var(--vp-c-text-2); }
|
||||
.step-note { font-size: 0.75rem; color: var(--vp-c-text-3); font-style: italic; margin-top: 0.2rem; }
|
||||
.play-btn {
|
||||
padding: 0.5rem 1.5rem; border-radius: 6px; border: none;
|
||||
background: var(--vp-c-brand); color: #fff; cursor: pointer; font-size: 0.9rem;
|
||||
}
|
||||
.play-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
.verdict {
|
||||
margin-top: 1rem; padding: 0.75rem; border-radius: 8px; font-size: 0.9rem;
|
||||
}
|
||||
.verdict.proxy { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); }
|
||||
.verdict.direct { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user