宽度调整

read.md

@@ -12,5 +12,72 @@ http://admin:11baa9476a69d087e9d6d72e315a3f725e@118.25.129.153:3001/job/gitea-au
 
 http://admin:11baa9476a69d087e9d6d72e315a3f725e@118.25.129.153:3001/job/auto-test/build?token=12345
 
+流水线：
+
+pipeline {
+    agent any
+    tools{
+        nodejs 'NodeJS20'
+    }
+    stages {
+        stage('代码拉取') {
+            steps {
+                 git url: 'http://118.25.129.153:3000/zhihui/suanfa.git',
+                    branch: 'main'
+                echo '✅ 代码拉取成功'
+            }
+        }
+        stage('设置NPM镜像'){
+            steps{
+                sh '''
+                    npm config set registry https://mirrors.cloud.tencent.com/npm/
+                    echo "当前 npm 镜像源："
+                    npm config get registry
+                '''
+            }
+        }
+        stage('安装依赖'){
+            steps{
+                sh 'npm install'
+            }
+        }
+        stage('执行依赖'){
+            steps{
+                sh 'npm run build'
+            }
+        }
+        stage('保存成果'){
+            steps{
+                archiveArtifacts artifacts: 'dist/**/*', allowEmptyArchive: true
+                echo '📦 构建产物已保存'
+            } 
+        }
+        stage('部署到 Web 服务') {
+            steps {
+                echo '🚀 开始部署前端文件...'  
+                script {
+                    // 确保目标目录存在
+                    sh 'mkdir -p /app/www' 
+                    // 清空旧文件
+                    sh 'rm -rf /app/www/*' 
+                    // 复制新构建的 dist 文件到挂载目录
+                    sh 'cp -r dist/* /app/www/'
+                    
+                    echo '✅ 前端文件部署完成！'
+                    
+                    // 可选：列出部署的文件以便验证
+                    sh 'ls -la /app/www/ | head -10'
+                } 
+            }
+        }
+    }
+    post{
+        success{
+            echo '🎉 构建成功！'
+        }
+        failure{
+            echo '❌ 构建失败，请检查代码！'
+        }
+    }
+}
 
-OK

src/components/KnowledgeGraph.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="knowledge-graph" ref="containerRef">
+    <svg class="graph-svg" :width="svgWidth" :height="svgHeight">
+      <!-- 连线 -->
+      <path
+        v-for="(edge, i) in layoutEdges"
+        :key="'e' + i"
+        :d="edge.path"
+        class="graph-edge"
+        :class="{ highlighted: highlightedNode && (edge.source === highlightedNode || edge.target === highlightedNode) }"
+      />
+      <!-- 连线标签 -->
+      <text
+        v-for="(edge, i) in layoutEdges"
+        :key="'el' + i"
+        :x="edge.labelX"
+        :y="edge.labelY"
+        class="edge-label"
+        :class="{ highlighted: highlightedNode && (edge.source === highlightedNode || edge.target === highlightedNode) }"
+      >{{ edge.label }}</text>
+    </svg>
+
+    <!-- 结点 -->
+    <div
+      v-for="node in layoutNodes"
+      :key="node.id"
+      class="graph-node"
+      :class="{ highlighted: highlightedNode === node.id }"
+      :style="{
+        left: node.x + 'px',
+        top: node.y + 'px',
+        '--node-hue': node.hue
+      }"
+      @mouseenter="highlightedNode = node.id"
+      @mouseleave="highlightedNode = null"
+    >
+      <div class="node-label">{{ node.label }}</div>
+      <div class="node-desc">{{ node.desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  nodes: { type: Array, default: () => [] },
+  edges: { type: Array, default: () => [] }
+})
+
+const containerRef = ref(null)
+const highlightedNode = ref(null)
+
+// ---- 布局计算 ----
+const NODE_W = 160
+const NODE_H = 56
+const LEVEL_GAP = 160
+const SIBLING_GAP = 24
+const PADDING = 20
+
+const layoutNodes = computed(() => {
+  if (!props.nodes.length) return []
+
+  // 建立邻接表
+  const children = {}
+  const parent = {}
+  const indeg = {}
+  for (const n of props.nodes) { indeg[n.id] = 0; children[n.id] = [] }
+  for (const e of props.edges) {
+    if (children[e.source]) children[e.source].push(e.target)
+    parent[e.target] = e.source
+    indeg[e.target] = (indeg[e.target] || 0) + 1
+  }
+
+  // 找根结点（入度为0）
+  const roots = props.nodes.filter(n => (indeg[n.id] || 0) === 0).map(n => n.id)
+  const rootId = roots[0] || props.nodes[0].id
+
+  // 计算层级（BFS）
+  const level = {}
+  const queue = [rootId]
+  level[rootId] = 0
+  let maxLevel = 0
+  const seen = new Set([rootId])
+  while (queue.length) {
+    const cur = queue.shift()
+    for (const ch of children[cur] || []) {
+      if (!seen.has(ch)) {
+        seen.add(ch)
+        level[ch] = level[cur] + 1
+        if (level[ch] > maxLevel) maxLevel = level[ch]
+        queue.push(ch)
+      }
+    }
+  }
+
+  // 按层级分组
+  const byLevel = {}
+  for (const n of props.nodes) {
+    const lv = level[n.id] !== undefined ? level[n.id] : maxLevel
+    if (!byLevel[lv]) byLevel[lv] = []
+    byLevel[lv].push(n.id)
+  }
+
+  // 计算每个结点 X 位置（同层均匀分布）
+  const xPos = {}
+  for (const lv of Object.keys(byLevel).map(Number).sort((a, b) => a - b)) {
+    const ids = byLevel[lv]
+    const totalW = ids.length * NODE_W + (ids.length - 1) * SIBLING_GAP
+    ids.forEach((id, i) => {
+      xPos[id] = PADDING + i * (NODE_W + SIBLING_GAP) + NODE_W / 2
+    })
+  }
+
+  // 计算 Y 位置
+  const yPos = {}
+  for (const n of props.nodes) {
+    const lv = level[n.id] !== undefined ? level[n.id] : maxLevel
+    yPos[n.id] = PADDING + lv * (NODE_H + LEVEL_GAP) + NODE_H / 2
+  }
+
+  // 分配颜色
+  const hues = [210, 260, 180, 30, 330, 160]
+  const nodeColors = {}
+  for (const n of props.nodes) {
+    const lv = level[n.id] !== undefined ? level[n.id] : 0
+    nodeColors[n.id] = hues[lv % hues.length]
+  }
+
+  return props.nodes.map(n => ({
+    ...n,
+    x: xPos[n.id] - NODE_W / 2,
+    y: yPos[n.id] - NODE_H / 2,
+    cx: xPos[n.id],
+    cy: yPos[n.id],
+    hue: nodeColors[n.id]
+  }))
+})
+
+const layoutEdges = computed(() => {
+  if (!props.edges.length || !layoutNodes.value.length) return []
+  const nodeMap = {}
+  for (const n of layoutNodes.value) nodeMap[n.id] = n
+
+  return props.edges.map(e => {
+    const src = nodeMap[e.source]
+    const tgt = nodeMap[e.target]
+    if (!src || !tgt) return null
+
+    const x1 = src.cx, y1 = src.cy + NODE_H / 2
+    const x2 = tgt.cx, y2 = tgt.cy - NODE_H / 2
+    const cy = (y1 + y2) / 2
+
+    // 三次贝塞尔曲线
+    const path = `M ${x1} ${y1} C ${x1} ${cy}, ${x2} ${cy}, ${x2} ${y2}`
+
+    // 标签位置（曲线中点偏左）
+    const labelX = (x1 + x2) / 2
+    const labelY = (y1 + y2) / 2 - 6
+
+    return { source: e.source, target: e.target, label: e.label, path, labelX, labelY }
+  }).filter(Boolean)
+})
+
+// SVG 尺寸
+const svgWidth = computed(() => {
+  if (!layoutNodes.value.length) return 400
+  const maxX = Math.max(...layoutNodes.value.map(n => n.x + NODE_W))
+  return maxX + PADDING
+})
+
+const svgHeight = computed(() => {
+  if (!layoutNodes.value.length) return 300
+  const maxY = Math.max(...layoutNodes.value.map(n => n.y + NODE_H))
+  return maxY + PADDING
+})
+</script>
+
+<style scoped>
+.knowledge-graph {
+  position: relative;
+  background:
+    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03), transparent 60%),
+    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.03), transparent 60%);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  overflow: hidden;
+  min-height: 300px;
+  padding: 16px;
+}
+
+.graph-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.graph-edge {
+  fill: none;
+  stroke: var(--border-color);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  transition: stroke 0.3s, stroke-width 0.3s;
+}
+
+.graph-edge.highlighted {
+  stroke: var(--primary-color);
+  stroke-width: 2.5;
+  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.3));
+}
+
+.edge-label {
+  fill: var(--text-tertiary);
+  font-size: 11px;
+  text-anchor: middle;
+  font-family: var(--sans);
+  transition: fill 0.3s;
+}
+
+.edge-label.highlighted {
+  fill: var(--primary-color);
+  font-weight: 600;
+}
+
+/* ---- 结点 ---- */
+.graph-node {
+  position: absolute;
+  width: 160px;
+  min-height: 48px;
+  background: var(--card-bg);
+  border: 1.5px solid var(--border-color);
+  border-radius: 12px;
+  padding: 8px 12px;
+  cursor: default;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  z-index: 1;
+}
+
+.graph-node::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 14px;
+  background: linear-gradient(135deg,
+    hsla(var(--node-hue, 210), 70%, 55%, 0.2),
+    hsla(calc(var(--node-hue, 210) + 30), 70%, 55%, 0.05));
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: -1;
+}
+
+.graph-node:hover,
+.graph-node.highlighted {
+  transform: translateY(-3px) scale(1.03);
+  border-color: hsl(var(--node-hue, 210), 70%, 55%);
+  box-shadow:
+    0 8px 24px rgba(0,0,0,0.1),
+    0 0 0 1px hsla(var(--node-hue, 210), 70%, 55%, 0.15);
+}
+
+.graph-node:hover::before,
+.graph-node.highlighted::before {
+  opacity: 1;
+}
+
+.node-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.node-desc {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin-top: 2px;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .graph-node {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  }
+  .graph-node:hover,
+  .graph-node.highlighted {
+    box-shadow:
+      0 8px 24px rgba(0,0,0,0.3),
+      0 0 0 1px hsla(var(--node-hue, 210), 70%, 55%, 0.15);
+  }
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .graph-node {
+    width: 120px;
+    min-height: 40px;
+    padding: 6px 8px;
+  }
+  .node-label {
+    font-size: 11px;
+  }
+  .node-desc {
+    display: none;
+  }
+}
+</style>

src/components/Sidebar.vue

@@ -3,7 +3,7 @@
     <div class="sidebar-header">
       <h2 class="sidebar-title" @click="$router.push('/')" v-show="!collapsed">
         <span class="logo">📚</span>
-        <span>算法分析教学</span>
+        <span>算法设计与分析</span>
       </h2>
       <button class="toggle-btn" @click="$emit('toggle')">
         {{ collapsed ? '☰' : '✕' }}

src/data/chapters.js

@@ -6,7 +6,7 @@
 export const chapters = [
   {
     id: 'ch1',
-    title: '第一章 基础 — 复杂度分析',
+    title: '第一章 算法基础 — 复杂度分析',
     subtitle: '算法时间复杂度与空间复杂度基础',
     description: '本章介绍算法分析的基础知识，包括时间复杂度、空间复杂度的概念，以及通过实验比较不同算法的性能差异。',
     icon: '📊',
@@ -16,6 +16,39 @@ export const chapters = [
       '递归算法复杂度',
       '实验对比分析方法'
     ],
+    knowledgeGraph: {
+      nodes: [
+        { id: 'algo', label: '算法分析', desc: '评估算法效率的方法论' },
+        { id: 'time', label: '时间复杂度', desc: '运行时间随输入规模增长的量级' },
+        { id: 'space', label: '空间复杂度', desc: '运行所需的额外存储空间量级' },
+        { id: 'bigO', label: '大O记号', desc: '渐近上界 f(n)=O(g(n))' },
+        { id: 'bigOmega', label: '大Ω记号', desc: '渐近下界 f(n)=Ω(g(n))' },
+        { id: 'bigTheta', label: '大Θ记号', desc: '渐近紧界 f(n)=Θ(g(n))' },
+        { id: 'recursive', label: '递归复杂度', desc: '递归算法的时间复杂度分析' },
+        { id: 'compare', label: '实验对比', desc: '通过实际运行比较算法性能' },
+        { id: 'const', label: 'O(1) 常数阶', desc: '运行时间与 n 无关' },
+        { id: 'log', label: 'O(log n) 对数阶', desc: '二分法、倍增法' },
+        { id: 'linear', label: 'O(n) 线性阶', desc: '单次遍历' },
+        { id: 'nlogn', label: 'O(n log n) 线性对数阶', desc: '分治排序' },
+        { id: 'square', label: 'O(n²) 平方阶', desc: '双层循环' },
+        { id: 'exp', label: 'O(2ⁿ) 指数阶', desc: '回溯搜索' }
+      ],
+      edges: [
+        { source: 'algo', target: 'time', label: '核心指标' },
+        { source: 'algo', target: 'space', label: '核心指标' },
+        { source: 'time', target: 'bigO', label: '常用表示' },
+        { source: 'time', target: 'bigOmega', label: '常用表示' },
+        { source: 'time', target: 'bigTheta', label: '常用表示' },
+        { source: 'time', target: 'recursive', label: '特殊情形' },
+        { source: 'time', target: 'compare', label: '验证手段' },
+        { source: 'bigO', target: 'const', label: '最优' },
+        { source: 'bigO', target: 'log', label: '高效' },
+        { source: 'bigO', target: 'linear', label: '中等' },
+        { source: 'bigO', target: 'nlogn', label: '较慢' },
+        { source: 'bigO', target: 'square', label: '慢' },
+        { source: 'bigO', target: 'exp', label: '不可行' }
+      ]
+    },
     subfolders: [
       {
         name: 'complexity-demo',
@@ -50,6 +83,39 @@ export const chapters = [
       '递归求最大值',
       '全排列生成'
     ],
+    knowledgeGraph: {
+      nodes: [
+        { id: 'divide', label: '分治策略', desc: '分解→解决→合并' },
+        { id: 'split', label: '分解(Divide)', desc: '将大问题拆分为子问题' },
+        { id: 'conquer', label: '解决(Conquer)', desc: '递归求解子问题' },
+        { id: 'merge', label: '合并(Combine)', desc: '将子问题解合并为原问题解' },
+        { id: 'sort', label: '排序问题', desc: '基于比较的排序算法' },
+        { id: 'search', label: '查找问题', desc: '在有序数据中搜索' },
+        { id: 'math', label: '数学问题', desc: '数值计算中的分治应用' },
+        { id: 'mergesort', label: '归并排序', desc: '先递归排序再合并 O(n log n)' },
+        { id: 'quicksort', label: '快速排序', desc: '先划分再递归排序 O(n log n)' },
+        { id: 'halfsearch', label: '二分查找', desc: '每次缩小一半范围 O(log n)' },
+        { id: 'bigint', label: '大整数乘法', desc: '分治降低乘法次数' },
+        { id: 'matrix', label: '矩阵乘法', desc: 'Strassen O(n^2.81)' },
+        { id: 'recursion', label: '递归技术', desc: '函数自身调用的编程技巧' },
+        { id: 'permutation', label: '全排列生成', desc: '递归交换生成所有排列' }
+      ],
+      edges: [
+        { source: 'divide', target: 'split', label: '步骤一' },
+        { source: 'divide', target: 'conquer', label: '步骤二' },
+        { source: 'divide', target: 'merge', label: '步骤三' },
+        { source: 'divide', target: 'sort', label: '典型应用' },
+        { source: 'divide', target: 'search', label: '典型应用' },
+        { source: 'divide', target: 'math', label: '典型应用' },
+        { source: 'divide', target: 'recursion', label: '实现基础' },
+        { source: 'sort', target: 'mergesort', label: '稳定排序' },
+        { source: 'sort', target: 'quicksort', label: '原地排序' },
+        { source: 'search', target: 'halfsearch', label: '有序查找' },
+        { source: 'math', target: 'bigint', label: '数值分治' },
+        { source: 'math', target: 'matrix', label: '矩阵分治' },
+        { source: 'recursion', target: 'permutation', label: '交换法' }
+      ]
+    },
     subfolders: [
       {
         name: 'mergesort',
@@ -152,6 +218,34 @@ export const chapters = [
       '最少硬币问题',
       '杨辉三角'
     ],
+    knowledgeGraph: {
+      nodes: [
+        { id: 'dp', label: '动态规划', desc: '最优子结构 + 重叠子问题' },
+        { id: 'substructure', label: '最优子结构', desc: '问题最优解包含子问题最优解' },
+        { id: 'overlap', label: '重叠子问题', desc: '子问题被反复求解' },
+        { id: 'bottomup', label: '自底向上', desc: '从最小子问题开始逐步求解' },
+        { id: 'memo', label: '记忆化搜索', desc: '自顶向下 + 查表' },
+        { id: 'table', label: 'DP表/状态转移', desc: '用表格记录子问题解' },
+        { id: 'knapsack', label: '0/1背包问题', desc: '选或不选，容量限制下价值最大' },
+        { id: 'lcs', label: '最长公共子序列', desc: '两序列的最长公共子序列' },
+        { id: 'matrixchain', label: '矩阵链乘', desc: '最优括号化方案' },
+        { id: 'image', label: '图像压缩', desc: '最优像素段划分' },
+        { id: 'coin', label: '最少硬币', desc: '最少硬币凑出目标金额' }
+      ],
+      edges: [
+        { source: 'dp', target: 'substructure', label: '性质一' },
+        { source: 'dp', target: 'overlap', label: '性质二' },
+        { source: 'dp', target: 'bottomup', label: '实现方式' },
+        { source: 'dp', target: 'memo', label: '实现方式' },
+        { source: 'bottomup', target: 'table', label: '核心手段' },
+        { source: 'memo', target: 'table', label: '核心手段' },
+        { source: 'dp', target: 'knapsack', label: '经典问题' },
+        { source: 'dp', target: 'lcs', label: '经典问题' },
+        { source: 'dp', target: 'matrixchain', label: '经典问题' },
+        { source: 'dp', target: 'image', label: '经典问题' },
+        { source: 'dp', target: 'coin', label: '经典问题' }
+      ]
+    },
     subfolders: [
       {
         name: 'bag01',
@@ -217,6 +311,31 @@ export const chapters = [
       '最短路径',
       '找零问题'
     ],
+    knowledgeGraph: {
+      nodes: [
+        { id: 'greedy', label: '贪心策略', desc: '每步选当前最优' },
+        { id: 'local', label: '局部最优选择', desc: '当前看来最好的选择' },
+        { id: 'global', label: '全局最优解', desc: '贪心选择性质保证' },
+        { id: 'optstruct', label: '最优子结构', desc: '子问题最优推导全局最优' },
+        { id: 'activity', label: '活动选择', desc: '选择最多不重叠活动' },
+        { id: 'huffman', label: 'Huffman编码', desc: '最优前缀码实现数据压缩' },
+        { id: 'fbag', label: '贪心背包', desc: '部分背包按单位价值贪心' },
+        { id: 'loading', label: '最优装载', desc: '重量限制下装最多的物品' },
+        { id: 'path', label: '最短路径', desc: 'Dijkstra：按距离贪心' },
+        { id: 'change', label: '找零问题', desc: '按面额从大到小贪心' }
+      ],
+      edges: [
+        { source: 'greedy', target: 'local', label: '核心' },
+        { source: 'greedy', target: 'optstruct', label: '前提' },
+        { source: 'local', target: 'global', label: '最终目标' },
+        { source: 'greedy', target: 'activity', label: '经典应用' },
+        { source: 'greedy', target: 'huffman', label: '经典应用' },
+        { source: 'greedy', target: 'fbag', label: '经典应用' },
+        { source: 'greedy', target: 'loading', label: '经典应用' },
+        { source: 'greedy', target: 'path', label: '经典应用' },
+        { source: 'greedy', target: 'change', label: '经典应用' }
+      ]
+    },
     subfolders: [
       {
         name: 'huodong',
@@ -283,6 +402,29 @@ export const chapters = [
       '装载问题的回溯解法',
       'N皇后问题'
     ],
+    knowledgeGraph: {
+      nodes: [
+        { id: 'backtrack', label: '回溯法', desc: 'DFS + 剪枝' },
+        { id: 'dfs', label: '深度优先搜索', desc: '沿着一条路径搜索到底' },
+        { id: 'tree', label: '解空间树', desc: '所有可能解的树形表示' },
+        { id: 'prune', label: '剪枝函数', desc: '提前终止无效分支' },
+        { id: 'constraint', label: '约束函数', desc: '判断部分解是否可行' },
+        { id: 'bound', label: '限界函数', desc: '判断是否可能优于已知最优' },
+        { id: 'bkbag', label: '0/1背包(回溯)', desc: '选或不选 + 上界剪枝' },
+        { id: 'bkload', label: '装载问题', desc: '搜索最优装载方案' },
+        { id: 'nqueen', label: 'N皇后问题', desc: '棋盘上放置不攻击的皇后' }
+      ],
+      edges: [
+        { source: 'backtrack', target: 'dfs', label: '搜索策略' },
+        { source: 'backtrack', target: 'tree', label: '搜索对象' },
+        { source: 'backtrack', target: 'prune', label: '优化核心' },
+        { source: 'prune', target: 'constraint', label: '可行性' },
+        { source: 'prune', target: 'bound', label: '最优性' },
+        { source: 'backtrack', target: 'bkbag', label: '应用' },
+        { source: 'backtrack', target: 'bkload', label: '应用' },
+        { source: 'backtrack', target: 'nqueen', label: '应用' }
+      ]
+    },
     subfolders: [
       {
         name: 'hui01bag',
@@ -322,6 +464,31 @@ export const chapters = [
       '旅行商问题(TSP)',
       '图的BFS与DFS遍历'
     ],
+    knowledgeGraph: {
+      nodes: [
+        { id: 'bnb', label: '分支限界法', desc: 'BFS + 优先队列 + 剪枝' },
+        { id: 'bfs', label: '广度优先搜索', desc: '按层逐级扩展' },
+        { id: 'pq', label: '优先队列', desc: '按限界值选取扩展结点' },
+        { id: 'livenode', label: '活结点表', desc: '待扩展的结点集合' },
+        { id: 'upper', label: '上界函数', desc: '估算当前结点可达的最优值' },
+        { id: 'bnbprune', label: '剪枝', desc: '上界 ≤ 当前最优则剪枝' },
+        { id: 'bnbbag', label: '0/1背包(B&B)', desc: '上界剪枝搜索最优解' },
+        { id: 'tsp', label: '旅行商问题', desc: '寻找最短环游路径' },
+        { id: 'traversal', label: '图遍历', desc: 'BFS / DFS 遍历图' }
+      ],
+      edges: [
+        { source: 'bnb', target: 'bfs', label: '搜索方式' },
+        { source: 'bnb', target: 'pq', label: '扩展策略' },
+        { source: 'bnb', target: 'upper', label: '估值函数' },
+        { source: 'bnb', target: 'bnbprune', label: '剪枝' },
+        { source: 'bfs', target: 'livenode', label: '使用队列' },
+        { source: 'pq', target: 'livenode', label: '管理结点' },
+        { source: 'upper', target: 'bnbprune', label: '剪枝依据' },
+        { source: 'bnb', target: 'bnbbag', label: '应用' },
+        { source: 'bnb', target: 'tsp', label: '应用' },
+        { source: 'bnb', target: 'traversal', label: '基础' }
+      ]
+    },
     subfolders: [
       {
         name: 'xianbag01',

src/views/ChapterView.vue

@@ -18,6 +18,16 @@
       </div>
     </section>
 
+    <!-- 知识图谱 -->
+    <section v-if="chapter.knowledgeGraph" class="kg-section">
+      <h2 class="section-label">🧠 知识图谱</h2>
+      <p class="section-hint">核心概念之间的关系网 — 悬停结点查看说明</p>
+      <KnowledgeGraph
+        :nodes="chapter.knowledgeGraph.nodes"
+        :edges="chapter.knowledgeGraph.edges"
+      />
+    </section>
+
     <!-- 子文件夹分组显示 -->
     <section v-for="folder in chapter.subfolders" :key="folder.name" class="folder-section">
       <h2 class="folder-title">📂 {{ folder.label }}</h2>
@@ -85,7 +95,12 @@
                 >C</button>
                 <button
                   class="lang-tab"
-                  :class="{ active: language === 'python' }"
+                  :class="{
+                    active: language === 'python',
+                    disabled: !hasPythonVersion
+                  }"
+                  :disabled="!hasPythonVersion"
+                  :title="hasPythonVersion ? '切换到 Python 版本' : '该文件暂无 Python 版本'"
                   @click="switchLanguage('python')"
                 >Python</button>
               </div>
@@ -119,6 +134,7 @@ import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { getChapterById } from '../data/chapters.js'
 import CodeViewer from '../components/CodeViewer.vue'
+import KnowledgeGraph from '../components/KnowledgeGraph.vue'
 
 const props = defineProps({
   id: String
@@ -129,11 +145,16 @@ const chapterId = computed(() => props.id || route.params.id)
 const currentFile = ref(null)
 const language = ref('c')
 
+// 判断当前文件是否有 Python 版本
+const hasPythonVersion = computed(() => {
+  return currentFile.value && !!currentFile.value.pyPath
+})
+
 // 根据语言生成文件路径
 const currentFilePath = computed(() => {
   if (!currentFile.value) return null
   if (language.value === 'python') {
-    return currentFile.value.pyPath || currentFile.value.path.replace(/^c\//, 'py/').replace(/\.c$/, '.py')
+    return currentFile.value.pyPath
   }
   return currentFile.value.path
 })
@@ -143,12 +164,14 @@ const currentFileName = computed(() => {
   if (language.value === 'python') {
     return currentFile.value.pyPath
       ? currentFile.value.pyPath.split('/').pop()
-      : currentFile.value.name.replace(/\.c$/, '.py')
+      : currentFile.value.name
   }
   return currentFile.value.name
 })
 
+// 切换语言时，如果目标语言没有对应文件则保持当前语言
 function switchLanguage(lang) {
+  if (lang === 'python' && !hasPythonVersion.value) return
   language.value = lang
 }
 
@@ -204,9 +227,7 @@ function getFolderDescription(folderName) {
 
 <style scoped>
 .chapter-view {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 0 24px;
+  max-width: 100%;
 }
 
 .chapter-header {
@@ -270,6 +291,17 @@ function getFolderDescription(folderName) {
   border: 1px solid var(--border-color);
 }
 
+/* 知识图谱 */
+.kg-section {
+  margin-bottom: 32px;
+}
+
+.section-hint {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  margin-bottom: 12px;
+}
+
 .folder-section {
   margin-bottom: 28px;
 }
@@ -458,7 +490,7 @@ function getFolderDescription(folderName) {
   font-family: var(--mono);
 }
 
-.lang-tab:hover {
+.lang-tab:hover:not(:disabled) {
   color: var(--text-primary);
 }
 
@@ -468,6 +500,11 @@ function getFolderDescription(folderName) {
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
+.lang-tab.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .drawer-close-btn {
   background: none;
   border: none;

src/views/ComplexityDemo.vue

@@ -474,9 +474,7 @@ const chartData = computed(() => {
 
 <style scoped>
 .complexity-demo {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 0 24px;
+  max-width: 100%;
 }
 
 .demo-header {

src/views/Home.vue

@@ -1,68 +1,132 @@
 <template>
   <div class="home">
+    <!-- Hero 区域 -->
     <header class="hero">
-      <h1 class="hero-title">📚 算法分析与设计</h1>
-      <p class="hero-subtitle">教学辅助平台 — 从基础到进阶的算法学习之旅</p>
-      <p class="hero-desc">
-        涵盖六大核心章节：复杂度分析、分治法、动态规划、贪心算法、回溯法、分支限界法
-      </p>
-      <div class="hero-actions">
-        <router-link to="/chapter/ch1" class="btn-primary">开始学习 →</router-link>
-        <a href="#chapters" class="btn-secondary">浏览章节</a>
+      <div class="hero-bg-decoration">
+        <div class="hero-blob blob-1"></div>
+        <div class="hero-blob blob-2"></div>
+        <div class="hero-blob blob-3"></div>
+      </div>
+      <div class="hero-content">
+        <div class="hero-badge">🎓 教学辅助平台</div>
+        <h1 class="hero-title">
+          <span class="hero-title-line">算法设计与分析</span>
+        </h1>
+        <p class="hero-subtitle">从基础到进阶的算法学习之旅</p>
+        <p class="hero-desc">
+          涵盖六大核心章节：复杂度分析 · 分治法 · 动态规划 · 贪心算法 · 回溯法 · 分支限界法
+        </p>
+        <div class="hero-stats">
+          <div class="hero-stat">
+            <span class="stat-number">6</span>
+            <span class="stat-label">核心章节</span>
+          </div>
+          <div class="hero-stat">
+            <span class="stat-number">50+</span>
+            <span class="stat-label">算法示例</span>
+          </div>
+          <div class="hero-stat">
+            <span class="stat-number">C</span>
+            <span class="stat-label">&amp; Python</span>
+          </div>
+        </div>
+        <div class="hero-actions">
+          <router-link to="/chapter/ch1" class="btn-primary">
+            <span>开始学习</span>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+          </router-link>
+          <a href="#chapters" class="btn-secondary">浏览章节</a>
+        </div>
       </div>
     </header>
 
-    <section id="chapters" class="chapters-grid">
-      <router-link
-        v-for="ch in chapters"
-        :key="ch.id"
-        :to="`/chapter/${ch.id}`"
-        class="chapter-card"
-      >
-        <div class="card-icon">{{ ch.icon }}</div>
-        <h3 class="card-title">{{ ch.title.split('—')[0].trim() }}</h3>
-        <p class="card-subtitle">{{ ch.subtitle }}</p>
-        <p class="card-desc">{{ ch.description }}</p>
-        <div class="card-topics">
-          <span v-for="topic in ch.topics.slice(0, 3)" :key="topic" class="topic-tag">
-            {{ topic }}
-          </span>
-          <span v-if="ch.topics.length > 3" class="topic-tag more">+{{ ch.topics.length - 3 }}</span>
-        </div>
-        <div class="card-footer">
-          <span class="explore-link">查看详情 →</span>
-        </div>
-      </router-link>
+    <!-- 章节卡片网格 -->
+    <section id="chapters" class="chapters-section">
+      <div class="section-header">
+        <h2 class="section-title">📚 课程章节</h2>
+        <p class="section-desc">选择章节开始学习对应的算法知识</p>
+      </div>
+      <div class="chapters-grid">
+        <router-link
+          v-for="(ch, index) in chapters"
+          :key="ch.id"
+          :to="`/chapter/${ch.id}`"
+          class="chapter-card"
+          :style="{ '--delay': index * 0.08 + 's' }"
+        >
+          <div class="card-accent"></div>
+          <div class="card-icon">{{ ch.icon }}</div>
+          <h3 class="card-title">{{ ch.title.split('—')[0].trim() }}</h3>
+          <p class="card-subtitle">{{ ch.subtitle }}</p>
+          <p class="card-desc">{{ ch.description }}</p>
+          <div class="card-topics">
+            <span v-for="topic in ch.topics.slice(0, 3)" :key="topic" class="topic-tag">
+              {{ topic }}
+            </span>
+            <span v-if="ch.topics.length > 3" class="topic-tag more">+{{ ch.topics.length - 3 }}</span>
+          </div>
+          <div class="card-footer">
+            <span class="explore-link">
+              查看详情
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+            </span>
+          </div>
+        </router-link>
+      </div>
     </section>
 
+    <!-- 功能特性 -->
     <section class="features-section">
-      <h2 class="section-title">平台功能</h2>
+      <div class="section-header">
+        <h2 class="section-title">✨ 平台功能</h2>
+        <p class="section-desc">全方位辅助算法学习与教学</p>
+      </div>
       <div class="features-grid">
         <div class="feature-card">
-          <div class="feature-icon">📖</div>
+          <div class="feature-icon-wrapper" style="--feature-color: #3b82f6">
+            <span class="feature-icon">📖</span>
+          </div>
           <h3>代码阅览</h3>
           <p>所有算法代码源文件在线展示，支持语法高亮与一键复制</p>
         </div>
         <div class="feature-card">
-          <div class="feature-icon">📂</div>
+          <div class="feature-icon-wrapper" style="--feature-color: #8b5cf6">
+            <span class="feature-icon">📂</span>
+          </div>
           <h3>分类导航</h3>
           <p>按章节和子主题分类组织，快速定位所需算法示例</p>
         </div>
         <div class="feature-card">
-          <div class="feature-icon">🔍</div>
-          <h3>知识点梳理</h3>
-          <p>每个章节的关键知识点和算法思想概览</p>
+          <div class="feature-icon-wrapper" style="--feature-color: #06b6d4">
+            <span class="feature-icon">🎯</span>
+          </div>
+          <h3>动态演示</h3>
+          <p>排序算法动画演示，直观理解每一步操作过程</p>
         </div>
         <div class="feature-card">
-          <div class="feature-icon">💻</div>
-          <h3>C语言实现</h3>
-          <p>全部使用标准C语言实现，适合教学演示与实验</p>
+          <div class="feature-icon-wrapper" style="--feature-color: #10b981">
+            <span class="feature-icon">💻</span>
+          </div>
+          <h3>双语言实现</h3>
+          <p>同时提供 C 和 Python 实现，满足不同教学需求</p>
         </div>
       </div>
     </section>
 
+    <!-- 页脚 -->
     <footer class="footer">
-      <p>算法分析与设计 教学辅助平台</p>
+      <div class="footer-wave">
+        <svg viewBox="0 0 1440 60" preserveAspectRatio="none">
+          <path d="M0,30 C360,60 720,0 1440,30 L1440,60 L0,60 Z" fill="var(--border-color)" opacity="0.3"/>
+        </svg>
+      </div>
+      <div class="footer-content">
+        <div class="footer-brand">
+          <span class="footer-logo">📚</span>
+          <span>算法分析与设计</span>
+        </div>
+        <p class="footer-sub">教学辅助平台 — 培养计算思维，掌握算法精髓</p>
+      </div>
     </footer>
   </div>
 </template>
@@ -72,39 +136,186 @@ import { chapters } from '../data/chapters.js'
 </script>
 
 <style scoped>
+/* ============================
+   首页布局
+   ============================ */
 .home {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 0 24px;
+  max-width: 100%;
 }
 
-.hero {
+/* ============================
+   Section Header 通用
+   ============================ */
+.section-header {
   text-align: center;
-  padding: 60px 20px 40px;
+  margin-bottom: 40px;
+}
+
+.section-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  letter-spacing: -0.3px;
+}
+
+.section-desc {
+  font-size: 15px;
+  color: var(--text-tertiary);
+}
+
+/* ============================
+   Hero 区域
+   ============================ */
+.hero {
+  position: relative;
+  text-align: center;
+  padding: 80px 20px 60px;
+  overflow: hidden;
+  border-radius: 24px;
+  margin-top: 8px;
+  background:
+    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, 0.08), transparent),
+    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(139, 92, 246, 0.06), transparent),
+    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(6, 182, 212, 0.05), transparent);
+}
+
+/* 背景装饰 blob */
+.hero-bg-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.hero-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  opacity: 0.3;
+  animation: blobFloat 8s ease-in-out infinite;
+}
+
+.blob-1 {
+  width: 300px;
+  height: 300px;
+  background: var(--primary-color);
+  top: -80px;
+  right: -60px;
+  animation-delay: 0s;
+}
+
+.blob-2 {
+  width: 200px;
+  height: 200px;
+  background: #8b5cf6;
+  bottom: -40px;
+  left: -40px;
+  animation-delay: -3s;
+}
+
+.blob-3 {
+  width: 150px;
+  height: 150px;
+  background: #06b6d4;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation-delay: -6s;
+}
+
+@keyframes blobFloat {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(20px, -20px) scale(1.1); }
+  66% { transform: translate(-15px, 15px) scale(0.95); }
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-color);
+  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
+  padding: 6px 16px;
+  border-radius: 20px;
+  margin-bottom: 20px;
+  letter-spacing: 0.3px;
 }
 
 .hero-title {
-  font-size: 36px;
-  font-weight: 800;
-  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
+  font-size: 48px;
+  font-weight: 900;
+  line-height: 1.15;
+  margin-bottom: 16px;
+  letter-spacing: -1px;
+}
+
+.hero-title-line {
+  background: linear-gradient(135deg, var(--primary-color) 0%, #8b5cf6 50%, #06b6d4 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  margin-bottom: 12px;
+  background-size: 200% 200%;
+  animation: gradientShift 4s ease-in-out infinite;
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
 }
 
 .hero-subtitle {
-  font-size: 18px;
+  font-size: 20px;
   color: var(--text-secondary);
+  font-weight: 500;
   margin-bottom: 8px;
 }
 
 .hero-desc {
-  font-size: 14px;
+  font-size: 15px;
   color: var(--text-tertiary);
-  margin-bottom: 24px;
+  max-width: 600px;
+  margin: 0 auto 28px;
+  line-height: 1.6;
 }
 
+/* Hero 数据统计 */
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  margin-bottom: 32px;
+}
+
+.hero-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.stat-number {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  letter-spacing: -0.5px;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+/* 按钮 */
 .hero-actions {
   display: flex;
   gap: 12px;
@@ -112,62 +323,118 @@ import { chapters } from '../data/chapters.js'
 }
 
 .btn-primary, .btn-secondary {
-  padding: 12px 28px;
-  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 32px;
+  border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
-  transition: all 0.2s;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
 }
 
 .btn-primary {
-  background: var(--primary-color);
+  background: linear-gradient(135deg, var(--primary-color), #6366f1);
   color: white;
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
 }
 
 .btn-primary:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(59, 130, 246, 0.45);
+  text-decoration: none;
+}
+
+.btn-primary:active {
+  transform: translateY(0);
 }
 
 .btn-secondary {
-  background: var(--hover-bg);
+  background: var(--card-bg);
   color: var(--text-primary);
-  border: 1px solid var(--border-color);
+  border: 1.5px solid var(--border-color);
 }
 
 .btn-secondary:hover {
-  background: var(--active-bg);
+  background: var(--hover-bg);
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  text-decoration: none;
+}
+
+/* ============================
+   章节卡片区域
+   ============================ */
+.chapters-section {
+  margin: 60px 0 20px;
 }
 
 .chapters-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
   gap: 20px;
-  margin: 40px 0;
 }
 
 .chapter-card {
+  position: relative;
   background: var(--card-bg);
   border: 1px solid var(--border-color);
-  border-radius: 16px;
-  padding: 24px;
+  border-radius: 18px;
+  padding: 28px 24px 20px;
   text-decoration: none;
   color: inherit;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  animation: cardFadeIn 0.6s ease-out backwards;
+  animation-delay: var(--delay, 0s);
+}
+
+@keyframes cardFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 卡片顶部彩色装饰条 */
+.card-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #06b6d4);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.chapter-card:hover .card-accent {
+  opacity: 1;
 }
 
 .chapter-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
-  border-color: var(--primary-color);
+  transform: translateY(-6px);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--card-bg), color-mix(in srgb, var(--primary-color) 3%, var(--card-bg)));
 }
 
 .card-icon {
-  font-size: 40px;
-  margin-bottom: 12px;
+  font-size: 42px;
+  margin-bottom: 14px;
+  transition: transform 0.3s ease;
+}
+
+.chapter-card:hover .card-icon {
+  transform: scale(1.1) rotate(-5deg);
 }
 
 .card-title {
@@ -175,6 +442,7 @@ import { chapters } from '../data/chapters.js'
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: 4px;
+  letter-spacing: -0.2px;
 }
 
 .card-subtitle {
@@ -187,8 +455,8 @@ import { chapters } from '../data/chapters.js'
 .card-desc {
   font-size: 13px;
   color: var(--text-secondary);
-  line-height: 1.5;
-  margin-bottom: 14px;
+  line-height: 1.6;
+  margin-bottom: 16px;
   flex: 1;
 }
 
@@ -203,76 +471,219 @@ import { chapters } from '../data/chapters.js'
   font-size: 11px;
   background: var(--tag-bg);
   color: var(--text-secondary);
-  padding: 3px 10px;
-  border-radius: 12px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.chapter-card:hover .topic-tag {
+  background: color-mix(in srgb, var(--primary-color) 8%, var(--tag-bg));
 }
 
 .topic-tag.more {
   background: var(--active-bg);
   color: var(--primary-color);
+  font-weight: 600;
 }
 
 .card-footer {
   border-top: 1px solid var(--border-color);
-  padding-top: 12px;
+  padding-top: 14px;
+  margin-top: auto;
 }
 
 .explore-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   font-size: 13px;
   color: var(--primary-color);
   font-weight: 600;
+  transition: gap 0.2s ease;
 }
 
-.section-title {
-  text-align: center;
-  font-size: 24px;
-  font-weight: 700;
-  margin-bottom: 24px;
-  color: var(--text-primary);
+.chapter-card:hover .explore-link {
+  gap: 10px;
 }
 
+/* ============================
+   功能特性区域
+   ============================ */
 .features-section {
-  margin: 60px 0;
+  margin: 80px 0;
 }
 
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
 }
 
 .feature-card {
   background: var(--card-bg);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 24px;
+  border-radius: 16px;
+  padding: 32px 24px;
   text-align: center;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
+  border-color: var(--feature-color, var(--border-color));
+}
+
+.feature-icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--feature-color, var(--primary-color)) 10%, transparent);
+  margin-bottom: 16px;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover .feature-icon-wrapper {
+  background: color-mix(in srgb, var(--feature-color, var(--primary-color)) 18%, transparent);
+  transform: scale(1.05);
 }
 
 .feature-icon {
-  font-size: 32px;
-  margin-bottom: 12px;
+  font-size: 26px;
 }
 
 .feature-card h3 {
   font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 8px;
+  font-weight: 700;
+  margin-bottom: 10px;
   color: var(--text-primary);
 }
 
 .feature-card p {
   font-size: 13px;
   color: var(--text-secondary);
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
+/* ============================
+   页脚
+   ============================ */
 .footer {
+  position: relative;
+  margin-top: 60px;
+  padding-top: 40px;
   text-align: center;
-  padding: 40px 0;
-  color: var(--text-tertiary);
-  font-size: 13px;
+}
+
+.footer-wave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  overflow: hidden;
+}
+
+.footer-wave svg {
+  width: 100%;
+  height: 100%;
+}
+
+.footer-content {
+  padding: 32px 0 48px;
   border-top: 1px solid var(--border-color);
-  margin-top: 40px;
+}
+
+.footer-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.footer-logo {
+  font-size: 22px;
+}
+
+.footer-sub {
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
+/* ============================
+   深色模式适配
+   ============================ */
+@media (prefers-color-scheme: dark) {
+  .hero {
+    background:
+      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, 0.06), transparent),
+      radial-gradient(ellipse 60% 50% at 20% 80%, rgba(139, 92, 246, 0.04), transparent),
+      radial-gradient(ellipse 50% 40% at 80% 70%, rgba(6, 182, 212, 0.04), transparent);
+  }
+
+  .chapter-card:hover {
+    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+  }
+
+  .btn-primary {
+    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
+  }
+
+  .btn-primary:hover {
+    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.35);
+  }
+}
+
+/* ============================
+   响应式
+   ============================ */
+@media (max-width: 768px) {
+  .hero {
+    padding: 48px 16px 40px;
+    border-radius: 16px;
+  }
+
+  .hero-title {
+    font-size: 32px;
+  }
+
+  .hero-subtitle {
+    font-size: 16px;
+  }
+
+  .hero-stats {
+    gap: 24px;
+  }
+
+  .stat-number {
+    font-size: 22px;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .chapters-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .features-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

src/views/SortDemo.vue

@@ -114,9 +114,7 @@ import SortVisualizer from '../components/SortVisualizer.vue'
 
 <style scoped>
 .sort-demo {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 0 24px;
+  max-width: 100%;
 }
 
 .demo-header {

vite.config.js

@@ -1,9 +1,37 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // 让 Vite 开发服务器正确提供 .py 文件的静态服务
+    {
+      name: 'serve-py-files',
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          const url = req.url
+          // 只处理 .py 文件请求，且排除 API 路径
+          if (url.endsWith('.py') && !url.startsWith('/api/')) {
+            const filePath = path.join(__dirname, 'public', url.replace(/^\//, ''))
+            if (fs.existsSync(filePath)) {
+              const content = fs.readFileSync(filePath, 'utf-8')
+              res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+              res.statusCode = 200
+              res.end(content)
+              return
+            }
+          }
+          next()
+        })
+      }
+    }
+  ],
   server: {
     port: 1025,
     proxy: {