feat: update docs and components, fix DLQ demo bug

2026-01-18 12:21:49 +08:00
parent 26ed39e1eb
commit e41063a1cd
159 changed files with 54236 additions and 2525 deletions
@@ -0,0 +1,131 @@
+<!--
+  SliceRequestDemo.vue
+  切图时代的请求数与加载时间演示
+-->
+<template>
+  <div class="slice-demo">
+    <div class="header">
+      <div class="title">切图时代：请求数越多越慢</div>
+      <div class="subtitle">调整切图数量，观察加载时间变化</div>
+    </div>
+
+    <div class="controls">
+      <label>
+        切图数量：<strong>{{ slices }}</strong> 张
+      </label>
+      <input v-model="slices" type="range" min="1" max="30" step="1" />
+      <label class="toggle">
+        <input v-model="useSprite" type="checkbox" />
+        合并雪碧图 (Sprite)
+      </label>
+    </div>
+
+    <div class="metrics">
+      <div class="metric">
+        <div class="label">总请求数</div>
+        <div class="value">{{ totalRequests }}</div>
+      </div>
+      <div class="metric">
+        <div class="label">预计加载时间</div>
+        <div class="value">{{ loadTime }} ms</div>
+      </div>
+    </div>
+
+    <div class="bar">
+      <div class="progress" :style="{ width: barWidth + '%' }"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const slices = ref(12)
+const useSprite = ref(false)
+
+const totalRequests = computed(() => {
+  const sliceRequests = useSprite.value ? 1 : slices.value
+  return sliceRequests + 2
+})
+
+const loadTime = computed(() => {
+  const base = 120
+  const perRequest = 45
+  return Math.round(base + totalRequests.value * perRequest)
+})
+
+const barWidth = computed(() => Math.min(100, Math.round(loadTime.value / 20)))
+</script>
+
+<style scoped>
+.slice-demo {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.header {
+  margin-bottom: 1rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.05rem;
+}
+
+.subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+
+.controls label {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-size: 0.9rem;
+}
+
+.controls input[type='range'] {
+  width: 100%;
+  margin-bottom: 0.6rem;
+}
+
+.toggle {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.metric .label {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.metric .value {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-top: 0.2rem;
+}
+
+.bar {
+  height: 10px;
+  margin-top: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 999px;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.progress {
+  height: 100%;
+  background: linear-gradient(90deg, #f97316, #ef4444);
+}
+</style>