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,145 @@
|
||||
<!--
|
||||
InvertedIndexDemo.vue
|
||||
倒排索引演示：展示搜索引擎的核心数据结构
|
||||
-->
|
||||
<template>
|
||||
<div class="inverted-index-demo">
|
||||
<div class="header">
|
||||
<div class="title">倒排索引 (Inverted Index)</div>
|
||||
<div class="subtitle">输入搜索词，观察倒排索引如何工作</div>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="query"
|
||||
placeholder="试试搜索：苹果、手机、水果..."
|
||||
class="search-input"
|
||||
@input="search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="index-layout">
|
||||
<div class="docs-section">
|
||||
<div class="section-title">原始文档</div>
|
||||
<div
|
||||
v-for="doc in docs"
|
||||
:key="doc.id"
|
||||
:class="['doc-card', { highlight: matchedDocs.includes(doc.id) }]"
|
||||
>
|
||||
<span class="doc-id">Doc {{ doc.id }}</span>
|
||||
<span class="doc-text">{{ doc.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="index-section">
|
||||
<div class="section-title">倒排索引表</div>
|
||||
<div class="index-table">
|
||||
<div
|
||||
v-for="(entry, word) in invertedIndex"
|
||||
:key="word"
|
||||
:class="['index-row', { highlight: matchedWords.includes(word) }]"
|
||||
>
|
||||
<span class="index-word">{{ word }}</span>
|
||||
<span class="index-arrow">→</span>
|
||||
<span class="index-docs">
|
||||
<span v-for="id in entry" :key="id" class="doc-ref">[{{ id }}]</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="query && matchedDocs.length > 0" class="result">
|
||||
命中文档：{{ matchedDocs.map(id => 'Doc ' + id).join('、') }}
|
||||
</div>
|
||||
<div v-else-if="query" class="result no-match">
|
||||
未找到匹配文档
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const query = ref('')
|
||||
const matchedDocs = ref([])
|
||||
const matchedWords = ref([])
|
||||
|
||||
const docs = [
|
||||
{ id: 1, text: '苹果是一种常见的水果' },
|
||||
{ id: 2, text: '苹果公司发布了新款手机' },
|
||||
{ id: 3, text: '我喜欢吃水果和蔬菜' },
|
||||
{ id: 4, text: '这款手机的价格很实惠' },
|
||||
{ id: 5, text: '水果店里有苹果和香蕉' }
|
||||
]
|
||||
|
||||
const invertedIndex = {
|
||||
'苹果': [1, 2, 5],
|
||||
'水果': [1, 3, 5],
|
||||
'手机': [2, 4],
|
||||
'公司': [2],
|
||||
'发布': [2],
|
||||
'喜欢': [3],
|
||||
'蔬菜': [3],
|
||||
'价格': [4],
|
||||
'实惠': [4],
|
||||
'香蕉': [5],
|
||||
'常见': [1]
|
||||
}
|
||||
|
||||
function search() {
|
||||
const q = query.value.trim()
|
||||
if (!q) {
|
||||
matchedDocs.value = []
|
||||
matchedWords.value = []
|
||||
return
|
||||
}
|
||||
const words = Object.keys(invertedIndex).filter(w => q.includes(w))
|
||||
matchedWords.value = words
|
||||
const docSet = new Set()
|
||||
words.forEach(w => invertedIndex[w].forEach(id => docSet.add(id)))
|
||||
matchedDocs.value = [...docSet].sort()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inverted-index-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; }
|
||||
.search-box { margin-bottom: 1rem; }
|
||||
.search-input {
|
||||
width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg);
|
||||
font-size: 0.9rem; outline: none;
|
||||
}
|
||||
.search-input:focus { border-color: var(--vp-c-brand); }
|
||||
.index-layout { display: flex; gap: 1rem; margin-bottom: 1rem; }
|
||||
.docs-section, .index-section { flex: 1; }
|
||||
.section-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
|
||||
.doc-card {
|
||||
display: flex; gap: 0.5rem; padding: 0.4rem 0.6rem; margin-bottom: 0.25rem;
|
||||
border-radius: 6px; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.8rem; transition: all 0.2s;
|
||||
}
|
||||
.doc-card.highlight { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); }
|
||||
.doc-id { font-weight: 700; color: var(--vp-c-brand); white-space: nowrap; }
|
||||
.index-row {
|
||||
display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem;
|
||||
margin-bottom: 0.2rem; border-radius: 4px; font-size: 0.8rem;
|
||||
background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
.index-row.highlight { border-color: #22c55e; background: rgba(34,197,94,0.05); }
|
||||
.index-word { font-weight: 700; min-width: 40px; }
|
||||
.index-arrow { color: var(--vp-c-text-3); }
|
||||
.doc-ref {
|
||||
padding: 0.1rem 0.3rem; background: var(--vp-c-bg-soft); border-radius: 3px;
|
||||
font-family: var(--vp-font-family-mono); font-size: 0.75rem; margin-right: 0.2rem;
|
||||
}
|
||||
.result { padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); }
|
||||
.result.no-match { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
|
||||
@media (max-width: 640px) { .index-layout { flex-direction: column; } }
|
||||
</style>
|
||||
Reference in New Issue
Block a user