test-repo/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue

<template>
  <div class="algorithm-demo">
    <div class="demo-header">
      <span class="title">算法思维：解决问题的方法</span>
      <span class="subtitle">不同策略解决不同类型的问题</span>
    </div>

    <div class="demo-content">
      <div class="algorithm-tabs">
        <button
          v-for="algo in algorithms"
          :key="algo.name"
          :class="['tab-btn', { active: activeAlgo === algo.name }]"
          @click="activeAlgo = algo.name"
        >
          {{ algo.name }}
        </button>
      </div>

      <div class="algorithm-visual">
        <div class="visual-header">
          <span class="algo-name">{{ currentAlgo.name }}</span>
          <span class="algo-desc">{{ currentAlgo.desc }}</span>
        </div>

        <div class="visual-content">
          <div v-if="activeAlgo === '二分查找'" class="binary-search">
            <div class="search-input">
              <span>在有序数组中查找：</span>
              <input
                v-model.number="searchTarget"
                type="number"
                class="num-input"
                placeholder="输入数字"
              />
              <button class="search-btn" @click="runBinarySearch">查找</button>
            </div>
            <div class="array-display">
              <div
                v-for="(num, i) in sortedArray"
                :key="i"
                class="array-cell"
                :class="{
                  highlight: i >= searchRange.left && i <= searchRange.right,
                  found: i === foundIndex,
                  mid: i === midIndex
                }"
              >
                {{ num }}
              </div>
            </div>
            <div v-if="searchSteps.length" class="search-info">
              <div v-for="(step, i) in searchSteps" :key="i" class="step">
                {{ step }}
              </div>
            </div>
          </div>

          <div v-else-if="activeAlgo === '排序'" class="sorting">
            <div class="sort-controls">
              <button class="sort-btn" @click="resetArray">重置数组</button>
              <button class="sort-btn" @click="runSort">开始排序</button>
            </div>
            <div class="array-display">
              <div
                v-for="(num, i) in sortArray"
                :key="i"
                class="array-cell"
                :class="{
                  comparing: comparingIndices.includes(i),
                  sorted: sortedIndices.includes(i)
                }"
              >
                {{ num }}
              </div>
            </div>
            <div class="sort-info">
              {{ sortStatus }}
            </div>
          </div>

          <div v-else-if="activeAlgo === '递归'" class="recursion">
            <div class="recursion-input">
              <span>计算斐波那契数列第</span>
              <input
                v-model.number="fibN"
                type="number"
                min="1"
                max="15"
                class="num-input"
              />
              <span>项</span>
              <button class="calc-btn" @click="calcFib">计算</button>
            </div>
            <div v-if="fibResult !== null" class="fib-result">
              <span class="result-value">F({{ fibN }}) = {{ fibResult }}</span>
            </div>
            <div v-if="fibSteps.length" class="recursion-tree">
              <div class="tree-title">递归调用过程</div>
              <div class="tree-content">
                <div
                  v-for="(step, i) in fibSteps.slice(0, 8)"
                  :key="i"
                  class="tree-node"
                >
                  {{ step }}
                </div>
                <div v-if="fibSteps.length > 8" class="tree-more">
                  ... 共 {{ fibSteps.length }} 次调用
                </div>
              </div>
            </div>
          </div>

          <div v-else-if="activeAlgo === '贪心'" class="greedy">
            <div class="greedy-desc">
              硬币找零问题：用最少的硬币凑出指定金额
            </div>
            <div class="greedy-input">
              <span>目标金额：</span>
              <input
                v-model.number="coinTarget"
                type="number"
                min="1"
                class="num-input"
              />
              <button class="calc-btn" @click="calcCoins">计算</button>
            </div>
            <div class="coins-available">
              可用硬币：{{ coins.join(', ') }} 元
            </div>
            <div v-if="coinResult.length" class="coin-result">
              <div class="result-title">找零方案：</div>
              <div class="coin-list">
                <span v-for="(c, i) in coinResult" :key="i" class="coin"
                  >{{ c }}元</span
                >
              </div>
              <div class="result-summary">
                共 {{ coinResult.length }} 枚硬币
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="complexity-info">
        <div class="info-title">时间复杂度速查</div>
        <div class="complexity-list">
          <div v-for="c in complexities" :key="c.name" class="complexity-item">
            <span class="c-name">{{ c.name }}</span>
            <span class="c-value" :class="c.class">{{ c.value }}</span>
            <span class="c-desc">{{ c.desc }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="info-box">
      <strong>核心思想：</strong
      >算法是解决问题的方法。好的算法能让程序效率提升几个数量级。理解算法思维，比记住具体算法更重要。
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

const activeAlgo = ref('二分查找')

const algorithms = [
  { name: '二分查找', desc: '每次排除一半，O(log n)' },
  { name: '排序', desc: '将无序变有序' },
  { name: '递归', desc: '自己调用自己' },
  { name: '贪心', desc: '每步选最优' }
]

const currentAlgo = computed(() => {
  return algorithms.find((a) => a.name === activeAlgo.value)
})

const sortedArray = ref([1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25])
const searchTarget = ref(13)
const searchRange = reactive({ left: 0, right: 12 })
const foundIndex = ref(-1)
const midIndex = ref(-1)
const searchSteps = ref([])

const runBinarySearch = () => {
  searchSteps.value = []
  foundIndex.value = -1
  midIndex.value = -1
  let left = 0
  let right = sortedArray.value.length - 1

  while (left <= right) {
    const mid = Math.floor((left + right) / 2)
    midIndex.value = mid
    searchRange.left = left
    searchRange.right = right

    searchSteps.value.push(
      `查找范围 [${left}, ${right}]，中间位置 ${mid}，值 ${sortedArray.value[mid]}`
    )

    if (sortedArray.value[mid] === searchTarget.value) {
      foundIndex.value = mid
      searchSteps.value.push(`找到目标 ${searchTarget.value} 在位置 ${mid}`)
      return
    } else if (sortedArray.value[mid] < searchTarget.value) {
      left = mid + 1
      searchSteps.value.push(
        `${sortedArray.value[mid]} < ${searchTarget.value}，在右半部分继续查找`
      )
    } else {
      right = mid - 1
      searchSteps.value.push(
        `${sortedArray.value[mid]} > ${searchTarget.value}，在左半部分继续查找`
      )
    }
  }
  searchSteps.value.push(`未找到目标 ${searchTarget.value}`)
}

const sortArray = ref([64, 34, 25, 12, 22, 11, 90, 45])
const comparingIndices = ref([])
const sortedIndices = ref([])
const sortStatus = ref('点击"开始排序"观察冒泡排序过程')

const resetArray = () => {
  sortArray.value = [64, 34, 25, 12, 22, 11, 90, 45]
  comparingIndices.value = []
  sortedIndices.value = []
  sortStatus.value = '数组已重置'
}

const runSort = async () => {
  sortedIndices.value = []
  const arr = [...sortArray.value]
  const n = arr.length

  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      comparingIndices.value = [j, j + 1]
      sortStatus.value = `比较 ${arr[j]} 和 ${arr[j + 1]}`
      await new Promise((r) => setTimeout(r, 300))

      if (arr[j] > arr[j + 1]) {
        ;[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
        sortArray.value = [...arr]
        sortStatus.value = `交换 ${arr[j + 1]} 和 ${arr[j]}`
        await new Promise((r) => setTimeout(r, 200))
      }
    }
    sortedIndices.value.push(n - i - 1)
  }
  sortedIndices.value.push(0)
  comparingIndices.value = []
  sortStatus.value = '排序完成！'
}

const fibN = ref(8)
const fibResult = ref(null)
const fibSteps = ref([])

const calcFib = () => {
  fibSteps.value = []
  const fib = (n) => {
    fibSteps.value.push(`fib(${n})`)
    if (n <= 1) return n
    return fib(n - 1) + fib(n - 2)
  }
  fibResult.value = fib(fibN.value)
}

const coinTarget = ref(67)
const coins = [100, 50, 20, 10, 5, 1]
const coinResult = ref([])

const calcCoins = () => {
  coinResult.value = []
  let remaining = coinTarget.value
  for (const coin of coins) {
    while (remaining >= coin) {
      coinResult.value.push(coin)
      remaining -= coin
    }
  }
}

const complexities = [
  { name: 'O(1)', value: '常数', desc: '最优，如数组访问', class: 'good' },
  { name: 'O(log n)', value: '对数', desc: '很好，如二分查找', class: 'good' },
  { name: 'O(n)', value: '线性', desc: '一般，如遍历', class: 'mid' },
  {
    name: 'O(n log n)',
    value: '线性对数',
    desc: '可接受，如快速排序',
    class: 'mid'
  },
  { name: 'O(n²)', value: '平方', desc: '较慢，如冒泡排序', class: 'bad' },
  { name: 'O(2ⁿ)', value: '指数', desc: '很慢，如暴力递归', class: 'bad' }
]
</script>

<style scoped>
.algorithm-demo {
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
  padding: 1rem;
  margin: 1rem 0;
}

.demo-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.demo-header .title {
  font-weight: bold;
  font-size: 1rem;
}
.demo-header .subtitle {
  color: var(--vp-c-text-2);
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.algorithm-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--vp-c-divider);
  background: var(--vp-c-bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.tab-btn.active {
  background: var(--vp-c-brand);
  color: white;
  border-color: var(--vp-c-brand);
}

.algorithm-visual {
  background: var(--vp-c-bg);
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.visual-header {
  margin-bottom: 0.75rem;
}

.algo-name {
  font-weight: bold;
  font-size: 1rem;
}

.algo-desc {
  font-size: 0.85rem;
  color: var(--vp-c-text-2);
  margin-left: 0.5rem;
}

.search-input,
.greedy-input,
.recursion-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.num-input {
  width: 60px;
  padding: 0.25rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  background: var(--vp-c-bg-alt);
}

.search-btn,
.sort-btn,
.calc-btn {
  padding: 0.25rem 0.75rem;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.array-display {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.array-cell {
  padding: 0.5rem;
  background: var(--vp-c-bg-alt);
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85rem;
  min-width: 32px;
  text-align: center;
}

.array-cell.highlight {
  background: var(--vp-c-brand-soft);
}

.array-cell.found {
  background: var(--vp-c-success);
  color: white;
}

.array-cell.mid {
  border: 2px solid var(--vp-c-brand);
}

.array-cell.comparing {
  background: var(--vp-c-warning-soft);
}

.array-cell.sorted {
  background: var(--vp-c-success-soft);
}

.search-info,
.sort-info {
  font-size: 0.8rem;
  color: var(--vp-c-text-2);
}

.step {
  padding: 0.15rem 0;
}

.sort-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.fib-result {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--vp-c-brand);
  margin-bottom: 0.5rem;
}

.recursion-tree {
  background: var(--vp-c-bg-alt);
  padding: 0.5rem;
  border-radius: 4px;
}

.tree-title {
  font-weight: bold;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.tree-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tree-node {
  font-size: 0.75rem;
  font-family: monospace;
  background: var(--vp-c-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

.tree-more {
  font-size: 0.75rem;
  color: var(--vp-c-text-2);
}

.greedy-desc {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.coins-available {
  font-size: 0.8rem;
  color: var(--vp-c-text-2);
  margin-bottom: 0.5rem;
}

.coin-result {
  margin-top: 0.5rem;
}

.result-title {
  font-weight: bold;
  font-size: 0.85rem;
}

.coin-list {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 0.25rem 0;
}

.coin {
  padding: 0.25rem 0.5rem;
  background: var(--vp-c-brand-soft);
  border-radius: 4px;
  font-size: 0.8rem;
}

.result-summary {
  font-size: 0.85rem;
  color: var(--vp-c-success);
  font-weight: bold;
}

.complexity-info {
  background: var(--vp-c-bg-alt);
  padding: 0.75rem;
  border-radius: 6px;
}

.info-title {
  font-weight: bold;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.complexity-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.complexity-item {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.c-name {
  font-family: monospace;
  font-weight: bold;
  min-width: 60px;
}

.c-value {
  min-width: 50px;
}

.c-value.good {
  color: var(--vp-c-success);
}
.c-value.mid {
  color: var(--vp-c-warning);
}
.c-value.bad {
  color: var(--vp-c-danger);
}

.c-desc {
  color: var(--vp-c-text-2);
}

.info-box {
  background: var(--vp-c-bg-alt);
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--vp-c-text-2);
  margin-top: 0.75rem;
  display: flex;
  gap: 0.25rem;
}
</style>