宽度调整

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/data/chapters.js

@@ -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>
@@ -124,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
@@ -216,9 +227,7 @@ function getFolderDescription(folderName) {
 
 <style scoped>
 .chapter-view {
-  max-width: 1400px;
+  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 24px;
 }
 
 .chapter-header {
@@ -282,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;
 }

src/views/ComplexityDemo.vue

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

src/views/Home.vue

@@ -140,9 +140,7 @@ import { chapters } from '../data/chapters.js'
    首页布局
    ============================ */
 .home {
-  max-width: 1400px;
+  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 24px;
 }
 
 /* ============================

src/views/SortDemo.vue

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