test-repo/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue

<template>
  <div class="dns-lookup-demo">
    <div class="domain-input">
      <label>输入域名</label>
      <input
        type="text"
        v-model="domain"
        placeholder="例如: www.google.com"
        class="input-field"
        @keyup.enter="startLookup"
      />
      <button class="lookup-btn" @click="startLookup">
        🔍 开始解析
      </button>
    </div>

    <div class="lookup-process" v-if="isLooking">
      <div class="process-title">DNS 解析过程</div>

      <div class="step-list">
        <div
          v-for="(step, index) in steps"
          :key="index"
          class="step-item"
          :class="{
            active: currentStep === index,
            completed: currentStep > index
          }"
        >
          <div class="step-icon">
            {{ currentStep > index ? '✓' : index + 1 }}
          </div>
          <div class="step-content">
            <div class="step-title">{{ step.title }}</div>
            <div class="step-desc">{{ step.desc }}</div>
            <div v-if="currentStep === index" class="step-animation">
              {{ step.animation }}
            </div>
          </div>
          <div class="step-arrow" v-if="index < steps.length - 1">
            ↓
          </div>
        </div>
      </div>
    </div>

    <div class="result-box" v-if="completed">
      <div class="result-title">✅ 解析完成</div>
      <div class="result-content">
        <div class="result-item">
          <span class="label">域名:</span>
          <span class="value">{{ domain }}</span>
        </div>
        <div class="result-item">
          <span class="label">IP 地址:</span>
          <span class="value">{{ resolvedIP }}</span>
        </div>
        <div class="result-item">
          <span class="label">解析时间:</span>
          <span class="value">{{ lookupTime }}ms</span>
        </div>
      </div>
      <button class="reset-btn" @click="reset">
        🔄 重新解析
      </button>
    </div>

    <div class="info-box">
      <div class="info-title">💡 DNS 知识点</div>
      <div class="info-content">
        <div class="info-item">
          <strong>什么是 DNS？</strong>
          <br>
          DNS（域名系统）就像互联网的电话簿，将易记的域名（如 google.com）转换为计算机能识别的 IP 地址（如 142.250.185.238）。
        </div>
        <div class="info-item">
          <strong>为什么需要 DNS？</strong>
          <br>
          • IP 地址难记：142.250.185.238 vs google.com
          <br>
          • IP 可能变化：服务器迁移时 IP 会变，域名不变
          <br>
          • 负载均衡：一个域名可以对应多个 IP
        </div>
        <div class="info-item">
          <strong>DNS 解析的层次</strong>
          <br>
          1️⃣ 浏览器缓存：最近访问过的域名
          <br>
          2️⃣ 系统缓存：操作系统的 DNS 缓存
          <br>
          3️⃣ 路由器缓存：本地路由器的缓存
          <br>
          4️⃣ ISP DNS：网络服务商的 DNS 服务器
          <br>
          5️⃣ 根域名服务器：最高层级的 DNS
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const domain = ref('www.google.com')
const isLooking = ref(false)
const currentStep = ref(-1)
const completed = ref(false)
const resolvedIP = ref('')
const lookupTime = ref(0)

const steps = [
  {
    title: '检查浏览器缓存',
    desc: '查看最近是否访问过该域名',
    animation: '🔍 正在搜索浏览器缓存...'
  },
  {
    title: '检查系统缓存',
    desc: '查看操作系统的 DNS 缓存',
    animation: '💻 正在查询系统 DNS 缓存...'
  },
  {
    title: '查询路由器 DNS',
    desc: '向本地路由器发送 DNS 查询',
    animation: '📡 正在向路由器发送查询...'
  },
  {
    title: '查询 ISP DNS 服务器',
    desc: '向网络服务商的 DNS 服务器查询',
    animation: '🌐 正在联系 ISP DNS 服务器...'
  },
  {
    title: '查询根域名服务器',
    desc: '从 . 根服务器开始递归查询',
    animation: '🔝 正在查询根域名服务器...'
  },
  {
    title: '获取 IP 地址',
    desc: '成功解析到 IP 地址',
    animation: '✅ 找到 IP 地址！'
  }
]

const ipAddresses = {
  'www.google.com': '142.250.185.238',
  'www.baidu.com': '110.242.68.4',
  'www.github.com': '140.82.112.3',
  'default': '93.184.216.34'
}

const startLookup = () => {
  isLooking.value = true
  completed.value = false
  currentStep.value = -1
  const startTime = Date.now()

  // 模拟 DNS 查询过程
  let stepIndex = 0
  const interval = setInterval(() => {
    if (stepIndex < steps.length) {
      currentStep.value = stepIndex
      stepIndex++
    } else {
      clearInterval(interval)
      const endTime = Date.now()
      lookupTime.value = endTime - startTime
      resolvedIP.value = ipAddresses[domain.value.toLowerCase()] || ipAddresses['default']
      completed.value = true
    }
  }, 800)
}

const reset = () => {
  isLooking.value = false
  currentStep.value = -1
  completed.value = false
}
</script>

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

.domain-input {
  background: var(--vp-c-bg);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.domain-input label {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vp-c-text-2);
  margin-bottom: 8px;
}

.input-field {
  flex: 1;
  min-width: 200px;
  padding: 12px;
  border: 2px solid var(--vp-c-divider);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
}

.input-field:focus {
  outline: none;
  border-color: var(--vp-c-brand);
}

.lookup-btn {
  padding: 12px 24px;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.lookup-btn:hover {
  background: var(--vp-c-brand-dark);
}

.lookup-process {
  background: var(--vp-c-bg);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.process-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--vp-c-text-1);
  margin-bottom: 20px;
  text-align: center;
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  position: relative;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.step-item.active {
  opacity: 1;
}

.step-item.completed {
  opacity: 0.7;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vp-c-divider);
  color: var(--vp-c-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.step-item.active .step-icon {
  background: var(--vp-c-brand);
  color: white;
}

.step-item.completed .step-icon {
  background: #22c55e;
  color: white;
}

.step-content {
  flex: 1;
  padding-top: 5px;
}

.step-title {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--vp-c-text-1);
  margin-bottom: 4px;
}

.step-desc {
  font-size: 0.85rem;
  color: var(--vp-c-text-3);
  margin-bottom: 6px;
}

.step-animation {
  font-size: 0.8rem;
  color: var(--vp-c-brand);
  background: var(--vp-c-bg-soft);
  padding: 8px;
  border-radius: 4px;
  font-family: monospace;
}

.step-arrow {
  position: absolute;
  left: 20px;
  top: 40px;
  width: 2px;
  height: calc(100% - 20px);
  background: var(--vp-c-divider);
}

.step-item.completed .step-arrow {
  background: #22c55e;
}

.result-box {
  background: var(--vp-c-bg);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #22c55e;
}

.result-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--vp-c-text-1);
  margin-bottom: 15px;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
}

.result-item .label {
  font-size: 0.85rem;
  color: var(--vp-c-text-3);
  font-weight: 600;
}

.result-item .value {
  font-size: 0.9rem;
  color: var(--vp-c-brand);
  font-family: monospace;
  font-weight: 600;
}

.reset-btn {
  width: 100%;
  padding: 10px;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.reset-btn:hover {
  background: var(--vp-c-brand-dark);
}

.info-box {
  background: var(--vp-c-bg);
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid var(--vp-c-brand);
}

.info-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--vp-c-text-1);
  margin-bottom: 15px;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-item {
  font-size: 0.85rem;
  color: var(--vp-c-text-2);
  line-height: 1.8;
}
</style>