feat: add comprehensive backend topics and fix build issues

## 新增内容

### 附录文档扩展
- 扩展前端项目架构文档 (frontend-project-architecture.md)
- 扩展后端项目架构文档 (backend-project-architecture.md)
- 扩展数据治理文档 (data-governance.md)
- 扩展数据可视化文档 (data-visualization.md)
- 扩展分布式系统文档 (distributed-systems.md)
- 扩展高可用文档 (high-availability.md)
- 扩展单体到微服务文档 (monolith-to-microservices.md)
- 扩展系统设计方法论文档 (system-design-methodology.md)
- 扩展 Docker 容器文档 (docker-containers.md)
- 扩展 Kubernetes 文档 (kubernetes.md)
- 扩展 Linux 基础文档 (linux-basics.md)
- 扩展神经网络文档 (neural-networks.md)

### 新增交互式组件
- 数据治理组件: DataQualityDemo, DataGovernanceFrameworkDemo, DataLineageDemo
- 数据可视化组件: ChartTypeSelectorDemo, DashboardLayoutDemo
- 分布式系统组件: CAPTheoremDemo, ConsistencyModelsDemo, DistributedChallengesDemo
- 高可用组件: AvailabilityCalculatorDemo, FailoverStrategyDemo
- 系统设计组件: SystemDesignStepsDemo, CapacityEstimationDemo
- Docker 容器组件: DockerArchitectureDemo, DockerLifecycleDemo
- Kubernetes 组件: K8sArchitectureDemo, K8sWorkloadsDemo
- Linux 基础组件: LinuxFileSystemDemo, LinuxCommandDemo, LinuxPermissionsDemo
- 神经网络组件: NeuronDemo, NetworkLayersDemo, NetworkArchitectureDemo
- 单体到微服务组件: ArchEvolutionDemo
- 项目架构组件: ProjectArchitectureComparisonDemo
- 附录导航组件: AppendixFlowMap

### 英文版重构
- 将 en-us 目录重命名为 en
- 更新相关配置和组件中的语言代码

## Bug 修复
- 修复 index.js 中重复的组件导入语句导致的 build 失败
- 恢复被注释的 InvertedIndexDemo 和 SearchRelevanceDemo 导入
- 修复 HomeFeatures.vue 中 en-us 与 config.mjs 中 en 不一致导致的语言切换问题

## 其他改进
- 添加构建脚本 (scripts/build.mjs)
- 更新依赖版本

docs/.vitepress/theme/components/appendix/linux-basics/LinuxCommandDemo.vue

@@ -0,0 +1,168 @@
+<!--
+  LinuxCommandDemo.vue
+  Linux 常用命令分类演示
+-->
+<template>
+  <div class="linux-cmd-demo">
+    <div class="header">
+      <div class="title">Linux 命令速查</div>
+      <div class="subtitle">按分类查看常用命令及示例</div>
+    </div>
+
+    <div class="categories">
+      <button
+        v-for="cat in categories"
+        :key="cat.key"
+        :class="['cat-btn', { active: activeCat === cat.key }]"
+        @click="activeCat = cat.key"
+      >
+        {{ cat.label }}
+      </button>
+    </div>
+
+    <div v-if="current" class="cmd-list">
+      <div v-for="(cmd, i) in current.commands" :key="i" class="cmd-card">
+        <div class="cmd-header">
+          <code class="cmd-name">{{ cmd.name }}</code>
+          <span class="cmd-brief">{{ cmd.brief }}</span>
+        </div>
+        <div class="cmd-example">
+          <code>{{ cmd.example }}</code>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeCat = ref('file')
+
+const categories = [
+  {
+    key: 'file',
+    label: '文件操作',
+    commands: [
+      { name: 'ls', brief: '列出文件和目录', example: 'ls -la /home' },
+      { name: 'cd', brief: '切换目录', example: 'cd /var/log' },
+      { name: 'cp', brief: '复制文件', example: 'cp -r src/ backup/' },
+      { name: 'mv', brief: '移动/重命名', example: 'mv old.txt new.txt' },
+      { name: 'rm', brief: '删除文件', example: 'rm -rf dist/' },
+      { name: 'mkdir', brief: '创建目录', example: 'mkdir -p src/components' },
+      { name: 'find', brief: '查找文件', example: 'find . -name "*.js" -type f' }
+    ]
+  },
+  {
+    key: 'text',
+    label: '文本处理',
+    commands: [
+      { name: 'cat', brief: '查看文件内容', example: 'cat config.json' },
+      { name: 'grep', brief: '搜索文本', example: 'grep -rn "ERROR" /var/log/' },
+      { name: 'head/tail', brief: '查看文件头/尾', example: 'tail -f app.log' },
+      { name: 'awk', brief: '文本列处理', example: "awk '{print $1, $3}' data.txt" },
+      { name: 'sed', brief: '流式文本替换', example: "sed -i 's/old/new/g' file.txt" },
+      { name: 'wc', brief: '统计行/词/字符数', example: 'wc -l *.js' },
+      { name: 'sort | uniq', brief: '排序去重', example: 'sort data.txt | uniq -c' }
+    ]
+  },
+  {
+    key: 'process',
+    label: '进程管理',
+    commands: [
+      { name: 'ps', brief: '查看进程', example: 'ps aux | grep node' },
+      { name: 'top/htop', brief: '实时监控', example: 'top -o %CPU' },
+      { name: 'kill', brief: '终止进程', example: 'kill -9 12345' },
+      { name: 'nohup', brief: '后台运行', example: 'nohup node app.js &' },
+      { name: 'lsof', brief: '查看打开的文件', example: 'lsof -i :3000' },
+      { name: 'systemctl', brief: '管理系统服务', example: 'systemctl restart nginx' }
+    ]
+  },
+  {
+    key: 'network',
+    label: '网络工具',
+    commands: [
+      { name: 'curl', brief: '发送 HTTP 请求', example: 'curl -X POST -d "data" url' },
+      { name: 'ping', brief: '测试连通性', example: 'ping -c 4 google.com' },
+      { name: 'ss/netstat', brief: '查看网络连接', example: 'ss -tlnp' },
+      { name: 'dig', brief: 'DNS 查询', example: 'dig example.com' },
+      { name: 'ssh', brief: '远程登录', example: 'ssh user@server -p 22' },
+      { name: 'scp', brief: '远程复制文件', example: 'scp file.txt user@server:/tmp/' }
+    ]
+  }
+]
+
+const current = computed(() => categories.find(c => c.key === activeCat.value))
+</script>
+
+<style scoped>
+.linux-cmd-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; }
+.categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 1rem;
+}
+.cat-btn {
+  padding: 0.35rem 0.7rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  transition: all 0.2s;
+}
+.cat-btn:hover { border-color: var(--vp-c-brand); }
+.cat-btn.active {
+  background: var(--vp-c-brand);
+  color: #fff;
+  border-color: var(--vp-c-brand);
+}
+.cmd-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.cmd-card {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.5rem 0.7rem;
+  border: 1px solid var(--vp-c-divider);
+}
+.cmd-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.cmd-name {
+  font-weight: 700;
+  font-size: 0.82rem;
+  color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.08);
+  padding: 0.1rem 0.35rem;
+  border-radius: 4px;
+}
+.cmd-brief {
+  font-size: 0.78rem;
+  color: var(--vp-c-text-2);
+}
+.cmd-example code {
+  font-size: 0.73rem;
+  color: var(--vp-c-text-3);
+  background: var(--vp-c-bg-soft);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+}
+</style>

docs/.vitepress/theme/components/appendix/linux-basics/LinuxFileSystemDemo.vue

@@ -0,0 +1,119 @@
+<!--
+  LinuxFileSystemDemo.vue
+  Linux 文件系统层级演示
+-->
+<template>
+  <div class="linux-fs-demo">
+    <div class="header">
+      <div class="title">Linux 文件系统层级</div>
+      <div class="subtitle">点击目录查看用途说明</div>
+    </div>
+
+    <div class="tree">
+      <div
+        v-for="dir in dirs"
+        :key="dir.path"
+        :class="['dir-item', { active: activeDir === dir.path }]"
+        @click="activeDir = dir.path"
+      >
+        <span class="dir-icon">{{ dir.icon }}</span>
+        <span class="dir-path">{{ dir.path }}</span>
+        <span class="dir-brief">{{ dir.brief }}</span>
+      </div>
+    </div>
+
+    <div v-if="current" class="detail-panel">
+      <div class="detail-title">{{ current.path }}</div>
+      <div class="detail-desc">{{ current.desc }}</div>
+      <div v-if="current.examples.length" class="examples">
+        <div class="ex-label">常见内容：</div>
+        <div class="ex-list">
+          <span v-for="(ex, i) in current.examples" :key="i" class="ex-tag">{{ ex }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeDir = ref('/')
+
+const dirs = [
+  { path: '/', icon: '📁', brief: '根目录', desc: '整个文件系统的起点，所有目录和文件都从这里开始。Linux 中一切皆文件，所有设备、进程信息都以文件形式存在于这棵目录树中。', examples: [] },
+  { path: '/bin', icon: '⚙️', brief: '基础命令', desc: '存放系统启动和单用户模式下必需的基础命令二进制文件。这些命令所有用户都可以使用。', examples: ['ls', 'cp', 'mv', 'cat', 'grep', 'chmod'] },
+  { path: '/etc', icon: '📋', brief: '配置文件', desc: '存放系统和应用的配置文件。几乎所有软件的配置都在这里，修改配置是 Linux 运维的日常。', examples: ['nginx.conf', 'hosts', 'passwd', 'ssh/sshd_config', 'crontab'] },
+  { path: '/home', icon: '🏠', brief: '用户目录', desc: '普通用户的家目录。每个用户在这里有一个以用户名命名的子目录，存放个人文件和配置。', examples: ['/home/alice', '/home/bob', '~/.bashrc', '~/.ssh/'] },
+  { path: '/var', icon: '📊', brief: '可变数据', desc: '存放运行时会变化的数据：日志、缓存、邮件、数据库文件等。排查问题时经常需要查看这里的日志。', examples: ['/var/log/', '/var/cache/', '/var/lib/mysql/', '/var/www/'] },
+  { path: '/tmp', icon: '🗑️', brief: '临时文件', desc: '存放临时文件，系统重启后通常会被清空。所有用户都有写权限，适合存放不需要持久化的中间文件。', examples: ['编译中间文件', '下载缓存', '会话临时数据'] },
+  { path: '/usr', icon: '📦', brief: '用户程序', desc: '存放用户安装的程序、库和文档。可以理解为 "Unix System Resources"，是最大的目录之一。', examples: ['/usr/bin/', '/usr/lib/', '/usr/local/', '/usr/share/'] },
+  { path: '/proc', icon: '🔍', brief: '进程信息', desc: '虚拟文件系统，不占磁盘空间。内核将进程和系统信息以文件形式暴露在这里，是监控和调试的重要数据源。', examples: ['/proc/cpuinfo', '/proc/meminfo', '/proc/[pid]/status'] },
+  { path: '/dev', icon: '🔌', brief: '设备文件', desc: '存放设备文件。Linux 中硬件设备也是文件，通过读写这些文件与硬件交互。', examples: ['/dev/sda', '/dev/null', '/dev/zero', '/dev/tty'] }
+]
+
+const current = computed(() => dirs.find(d => d.path === activeDir.value))
+</script>
+
+<style scoped>
+.linux-fs-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; }
+.tree {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+}
+.dir-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.6rem;
+  border-radius: 6px;
+  cursor: pointer;
+  background: var(--vp-c-bg);
+  border: 1px solid transparent;
+  transition: all 0.2s;
+  font-size: 0.82rem;
+}
+.dir-item:hover { border-color: var(--vp-c-divider); }
+.dir-item.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.05);
+}
+.dir-icon { font-size: 0.9rem; }
+.dir-path { font-weight: 700; font-family: var(--vp-font-family-mono); min-width: 60px; }
+.dir-brief { color: var(--vp-c-text-3); font-size: 0.78rem; }
+.detail-panel {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+}
+.detail-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  font-family: var(--vp-font-family-mono);
+  margin-bottom: 0.4rem;
+}
+.detail-desc { font-size: 0.82rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; line-height: 1.6; }
+.examples { margin-top: 0.4rem; }
+.ex-label { font-size: 0.75rem; font-weight: 600; color: var(--vp-c-text-3); margin-bottom: 0.3rem; }
+.ex-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+.ex-tag {
+  font-size: 0.72rem;
+  padding: 0.15rem 0.4rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  font-family: var(--vp-font-family-mono);
+  color: var(--vp-c-brand);
+}
+</style>

docs/.vitepress/theme/components/appendix/linux-basics/LinuxPermissionsDemo.vue

@@ -0,0 +1,234 @@
+<!--
+  LinuxPermissionsDemo.vue
+  Linux 权限系统演示
+-->
+<template>
+  <div class="linux-perm-demo">
+    <div class="header">
+      <div class="title">Linux 权限解读器</div>
+      <div class="subtitle">输入权限字符串或数字，查看含义</div>
+    </div>
+
+    <div class="input-row">
+      <div class="input-group">
+        <label>权限数字（如 755）</label>
+        <input v-model="permNum" type="text" maxlength="3" placeholder="755" @input="onNumInput" />
+      </div>
+      <div class="perm-string">{{ permString }}</div>
+    </div>
+
+    <div class="perm-grid">
+      <div v-for="(group, gi) in groups" :key="gi" class="perm-group">
+        <div class="group-label">{{ group.label }}</div>
+        <div class="bits">
+          <label v-for="(bit, bi) in group.bits" :key="bi" class="bit-label">
+            <input type="checkbox" v-model="bit.on" @change="onBitChange" />
+            <span :class="['bit-char', bit.char]">{{ bit.char }}</span>
+            <span class="bit-name">{{ bit.name }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="examples">
+      <div class="ex-title">常见权限组合</div>
+      <div class="ex-grid">
+        <div v-for="ex in examples" :key="ex.num" class="ex-item" @click="setPermNum(ex.num)">
+          <code>{{ ex.num }}</code>
+          <span class="ex-desc">{{ ex.desc }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from 'vue'
+
+const groups = reactive([
+  {
+    label: '所有者（Owner）',
+    bits: [
+      { char: 'r', name: '读', on: true },
+      { char: 'w', name: '写', on: true },
+      { char: 'x', name: '执行', on: true }
+    ]
+  },
+  {
+    label: '所属组（Group）',
+    bits: [
+      { char: 'r', name: '读', on: true },
+      { char: 'w', name: '写', on: false },
+      { char: 'x', name: '执行', on: true }
+    ]
+  },
+  {
+    label: '其他人（Others）',
+    bits: [
+      { char: 'r', name: '读', on: true },
+      { char: 'w', name: '写', on: false },
+      { char: 'x', name: '执行', on: true }
+    ]
+  }
+])
+
+const permNum = ref('755')
+
+const permString = computed(() => {
+  return '-' + groups.map(g =>
+    g.bits.map(b => b.on ? b.char : '-').join('')
+  ).join('')
+})
+
+function bitsToNum() {
+  return groups.map(g => {
+    let n = 0
+    if (g.bits[0].on) n += 4
+    if (g.bits[1].on) n += 2
+    if (g.bits[2].on) n += 1
+    return n
+  }).join('')
+}
+
+function onBitChange() {
+  permNum.value = bitsToNum()
+}
+
+function onNumInput() {
+  const s = permNum.value.replace(/[^0-7]/g, '').slice(0, 3)
+  permNum.value = s
+  if (s.length === 3) {
+    s.split('').forEach((ch, gi) => {
+      const n = parseInt(ch)
+      groups[gi].bits[0].on = !!(n & 4)
+      groups[gi].bits[1].on = !!(n & 2)
+      groups[gi].bits[2].on = !!(n & 1)
+    })
+  }
+}
+
+function setPermNum(num) {
+  permNum.value = num
+  onNumInput()
+}
+
+const examples = [
+  { num: '644', desc: '普通文件（owner 读写，其他只读）' },
+  { num: '755', desc: '可执行文件/目录（owner 全权限）' },
+  { num: '600', desc: '私密文件（仅 owner 读写）' },
+  { num: '777', desc: '完全开放（不推荐）' }
+]
+</script>
+
+<style scoped>
+.linux-perm-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; }
+.input-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.input-group label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.2rem;
+}
+.input-group input {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 1.1rem;
+  font-family: var(--vp-font-family-mono);
+  font-weight: 700;
+  width: 80px;
+  text-align: center;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
+.perm-string {
+  font-family: var(--vp-font-family-mono);
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--vp-c-brand);
+  letter-spacing: 1px;
+}
+.perm-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+@media (max-width: 480px) {
+  .perm-grid { grid-template-columns: 1fr; }
+}
+.perm-group {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 0.6rem;
+  border: 1px solid var(--vp-c-divider);
+}
+.group-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.4rem;
+}
+.bits { display: flex; flex-direction: column; gap: 0.25rem; }
+.bit-label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+.bit-char {
+  font-family: var(--vp-font-family-mono);
+  font-weight: 700;
+  width: 16px;
+  text-align: center;
+}
+.bit-char.r { color: #22c55e; }
+.bit-char.w { color: #f59e0b; }
+.bit-char.x { color: #ef4444; }
+.bit-name { color: var(--vp-c-text-3); font-size: 0.75rem; }
+.examples {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 0.6rem;
+  border: 1px solid var(--vp-c-divider);
+}
+.ex-title {
+  font-weight: 600;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.4rem;
+}
+.ex-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.ex-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.78rem;
+  transition: background 0.2s;
+}
+.ex-item:hover { background: var(--vp-c-bg-soft); }
+.ex-item code {
+  font-weight: 700;
+  color: var(--vp-c-brand);
+}
+.ex-desc { color: var(--vp-c-text-3); }
+</style>