feat: add AI and Backend evolution history with interactive demos, and refine Frontend evolution demo

docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue

@@ -1,76 +1,129 @@
 <template>
   <div class="url-parser-demo">
-    <div class="control-panel">
-      <div class="input-group">
-        <label>输入 URL</label>
+    <div class="browser-bar">
+      <div class="nav-buttons">
+        <span class="nav-btn">←</span>
+        <span class="nav-btn">→</span>
+        <span class="nav-btn">↻</span>
+      </div>
+      <div class="omnibox">
+        <span class="lock-icon">🔒</span>
+        <!-- Segmented URL Display -->
+        <div class="segmented-url" v-if="parsedUrl">
+          <span 
+            class="url-part protocol" 
+            :class="{ active: highlightedPart === 'protocol' }"
+            @mouseover="highlightedPart = 'protocol'"
+            @mouseleave="highlightedPart = null"
+          >{{ parts.protocol }}:</span>
+          <span class="divider">//</span>
+          <span 
+            class="url-part host"
+            :class="{ active: highlightedPart === 'host' }"
+            @mouseover="highlightedPart = 'host'"
+            @mouseleave="highlightedPart = null"
+          >{{ parts.host }}</span>
+          <span 
+            v-if="parts.port"
+            class="url-part port"
+            :class="{ active: highlightedPart === 'port' }"
+            @mouseover="highlightedPart = 'port'"
+            @mouseleave="highlightedPart = null"
+          >:{{ parts.port }}</span>
+          <span 
+            class="url-part pathname"
+            :class="{ active: highlightedPart === 'pathname' }"
+            @mouseover="highlightedPart = 'pathname'"
+            @mouseleave="highlightedPart = null"
+          >{{ parts.pathname }}</span>
+          <span 
+            v-if="parts.search"
+            class="url-part search"
+            :class="{ active: highlightedPart === 'search' }"
+            @mouseover="highlightedPart = 'search'"
+            @mouseleave="highlightedPart = null"
+          >{{ parts.search }}</span>
+          <span 
+            v-if="parts.hash"
+            class="url-part hash"
+            :class="{ active: highlightedPart === 'hash' }"
+            @mouseover="highlightedPart = 'hash'"
+            @mouseleave="highlightedPart = null"
+          >{{ parts.hash }}</span>
+        </div>
         <input
+          v-else
           v-model="inputUrl"
           type="text"
-          placeholder="https://www.example.com:8080/path?query=1#fragment"
           class="url-input"
+          placeholder="https://example.com"
         />
       </div>
-      <div class="encoding-toggle">
-        <button @click="encodeUrl" class="action-btn">Encode</button>
-        <button @click="decodeUrl" class="action-btn">Decode</button>
-      </div>
     </div>
 
     <div class="visualization-area">
-      <div v-if="parsedUrl" class="url-parts">
-        <div
-          v-for="(part, key) in parts"
+      <div v-if="parsedUrl" class="url-breakdown">
+        <div 
+          v-for="(part, key) in parts" 
           :key="key"
-          class="url-part"
-          :class="key"
+          class="url-segment"
+          :class="[key, { active: highlightedPart === key }]"
           @mouseover="highlightedPart = key"
           @mouseleave="highlightedPart = null"
         >
-          <div class="part-label">{{ labels[key] }}</div>
-          <div class="part-value">{{ part || '-' }}</div>
-          <div class="part-desc" v-if="highlightedPart === key">
-            {{ descriptions[key] }}
+          <div class="segment-header">
+            <span class="segment-icon">{{ icons[key] }}</span>
+            <span class="segment-label">{{ labels[key] }}</span>
           </div>
+          <div class="segment-value">{{ part || '-' }}</div>
+          <div class="segment-desc">{{ descriptions[key] }}</div>
         </div>
       </div>
-      <div v-else class="error-message">无效的 URL 格式</div>
-    </div>
-
-    <div class="info-box">
-      <p>
-        <span class="icon">💡</span>
-        <strong>Note:</strong>
-        URL (统一资源定位符)
-        是互联网资源的地址。浏览器首先需要将它拆解成不同的部分，才能知道要去哪里（域名）、用什么方式（协议）、找什么东西（路径）。
-      </p>
+      <div v-else class="error-state">
+        Invalid URL format / 无效的 URL 格式
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 
-const inputUrl = ref(
-  'https://www.example.com:8080/search/results?q=vue&page=1#top'
-)
+const props = defineProps({
+  lang: {
+    type: String,
+    default: 'zh'
+  }
+})
+
+const inputUrl = ref('https://shop.com/toys/lego-castle?color=red#summary')
 const highlightedPart = ref(null)
 
+const icons = {
+  protocol: '🚛',
+  host: '🏢',
+  port: '🚪',
+  pathname: '🧸',
+  search: '📝',
+  hash: '📍'
+}
+
 const labels = {
-  protocol: '协议 (Protocol)',
-  host: '域名 (Host)',
-  port: '端口 (Port)',
-  pathname: '路径 (Path)',
-  search: '查询 (Query)',
-  hash: '锚点 (Fragment)'
+  protocol: '交通方式 (Protocol)',
+  host: '店铺地址 (Host)',
+  port: '大门号 (Port)',
+  pathname: '商品位置 (Path)',
+  search: '备注要求 (Query)',
+  hash: '快速定位 (Hash)'
 }
 
 const descriptions = {
-  protocol: '告诉浏览器使用什么方式连接（如 https 安全连接）',
-  host: '服务器的地址，需要通过 DNS 解析为 IP',
-  port: '服务器的门牌号（http默认80，https默认443）',
-  pathname: '资源在服务器上的具体位置',
-  search: '传递给服务器的额外参数',
-  hash: '页面内的定位标记，不会发送给服务器'
+  protocol: '怎么去？(例如 https = 坐装甲车去，很安全)',
+  host: '去哪家店？(域名，例如 shop.com)',
+  port: '从哪个门进？(默认 443 号门)',
+  pathname: '商品在哪个货架？(路径)',
+  search: '给店员的备注 (例如 ?color=red)',
+  hash: '直接翻到说明书第几页 (锚点)'
 }
 
 const parsedUrl = computed(() => {
@@ -86,162 +139,173 @@ const parts = computed(() => {
   return {
     protocol: parsedUrl.value.protocol.replace(':', ''),
     host: parsedUrl.value.hostname,
-    port:
-      parsedUrl.value.port ||
-      (parsedUrl.value.protocol === 'https:' ? '443' : '80'),
+    port: parsedUrl.value.port || (parsedUrl.value.protocol === 'https:' ? '443' : '80'),
     pathname: parsedUrl.value.pathname,
     search: parsedUrl.value.search,
     hash: parsedUrl.value.hash
   }
 })
-
-const encodeUrl = () => {
-  inputUrl.value = encodeURI(inputUrl.value)
-}
-
-const decodeUrl = () => {
-  inputUrl.value = decodeURI(inputUrl.value)
-}
 </script>
 
 <style scoped>
 .url-parser-demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  background-color: var(--vp-c-bg);
+  overflow: hidden;
   margin: 1rem 0;
   font-family: var(--vp-font-family-mono);
 }
 
-.control-panel {
-  margin-bottom: 2rem;
+.browser-bar {
+  background: var(--vp-c-bg-soft);
+  padding: 0.8rem;
+  border-bottom: 1px solid var(--vp-c-divider);
   display: flex;
-  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+}
+
+.nav-buttons {
+  display: flex;
+  gap: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 1.2rem;
+  user-select: none;
+}
+
+.omnibox {
+  flex: 1;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 20px;
+  padding: 0.4rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  font-size: 0.9rem;
+  overflow: hidden;
+}
+
+.lock-icon {
+  font-size: 0.8rem;
+}
+
+/* Segmented URL Styles */
+.segmented-url {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.url-part {
+  padding: 2px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: bold;
+}
+
+.url-part:hover, .url-part.active {
+  transform: scale(1.1);
+}
+
+.url-part.protocol { color: #ef4444; }
+.url-part.host { color: #3b82f6; }
+.url-part.port { color: #f59e0b; }
+.url-part.pathname { color: #10b981; }
+.url-part.search { color: #8b5cf6; }
+.url-part.hash { color: #ec4899; }
+
+.url-part.active.protocol { background: #fef2f2; }
+.url-part.active.host { background: #eff6ff; }
+.url-part.active.port { background: #fffbeb; }
+.url-part.active.pathname { background: #ecfdf5; }
+.url-part.active.search { background: #f5f3ff; }
+.url-part.active.hash { background: #fdf2f8; }
+
+.divider {
+  color: var(--vp-c-text-3);
+  margin: 0 1px;
+}
+
+.visualization-area {
+  padding: 1.5rem;
+}
+
+.url-breakdown {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 1rem;
 }
 
-.input-group {
+.url-segment {
+  padding: 1rem;
+  border-radius: 8px;
+  border: 2px solid transparent; /* Prepare for border color */
+  background: var(--vp-c-bg-alt);
+  transition: all 0.2s;
+  cursor: default;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.url-input {
-  padding: 0.8rem;
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-  font-family: monospace;
-  width: 100%;
+.url-segment.active {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
 }
 
-.encoding-toggle {
+/* Color Coding for Cards */
+.url-segment.protocol { border-color: #ef4444; }
+.url-segment.host { border-color: #3b82f6; }
+.url-segment.port { border-color: #f59e0b; }
+.url-segment.pathname { border-color: #10b981; }
+.url-segment.search { border-color: #8b5cf6; }
+.url-segment.hash { border-color: #ec4899; }
+
+.url-segment.active.protocol { background: #fef2f2; }
+.url-segment.active.host { background: #eff6ff; }
+.url-segment.active.port { background: #fffbeb; }
+.url-segment.active.pathname { background: #ecfdf5; }
+.url-segment.active.search { background: #f5f3ff; }
+.url-segment.active.hash { background: #fdf2f8; }
+
+.segment-header {
   display: flex;
-  gap: 1rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+  padding-bottom: 0.5rem;
 }
 
-.action-btn {
-  padding: 0.4rem 1rem;
-  border-radius: 4px;
-  background: var(--vp-c-brand);
-  color: white;
-  border: none;
-  cursor: pointer;
-  font-size: 0.9rem;
+.segment-icon {
+  font-size: 1.2rem;
 }
 
-.action-btn:hover {
-  background: var(--vp-c-brand-dark);
-}
-
-.visualization-area {
-  margin-bottom: 1.5rem;
-  min-height: 200px;
-}
-
-.url-parts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.url-part {
-  flex: 1;
-  min-width: 140px;
-  padding: 1rem;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  position: relative;
-  transition: all 0.2s;
-  cursor: default;
-}
-
-.url-part:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: var(--vp-c-brand);
-}
-
-.url-part.protocol {
-  border-left: 4px solid #ef4444;
-}
-.url-part.host {
-  border-left: 4px solid #3b82f6;
-}
-.url-part.port {
-  border-left: 4px solid #f59e0b;
-}
-.url-part.pathname {
-  border-left: 4px solid #10b981;
-}
-.url-part.search {
-  border-left: 4px solid #8b5cf6;
-}
-.url-part.hash {
-  border-left: 4px solid #ec4899;
-}
-
-.part-label {
+.segment-label {
   font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.5rem;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
 }
 
-.part-value {
-  font-size: 1rem;
+.segment-value {
+  font-size: 1.1rem;
   font-weight: bold;
   word-break: break-all;
+  font-family: monospace;
 }
 
-.part-desc {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--vp-c-text-inverse-1);
-  color: var(--vp-c-text-inverse-2);
-  padding: 0.5rem;
-  border-radius: 4px;
+.segment-desc {
   font-size: 0.8rem;
-  z-index: 10;
-  margin-top: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.info-box {
-  background: var(--vp-c-bg-alt);
-  padding: 1rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
   color: var(--vp-c-text-2);
+  line-height: 1.4;
 }
 
-.error-message {
-  color: #ef4444;
+.error-state {
   text-align: center;
+  color: #ef4444;
   padding: 2rem;
 }
 </style>