feat: 添加多个附录交互式组件和文档更新
- 添加浏览器前端组件：无障碍访问、国际化、实时通信 - 添加 Transformer 注意力机制系列组件 - 更新 Canvas、数据追踪等现有组件 - 修复 ESLint 变量名冲突问题 - 完善相关附录文档
This commit is contained in:
sanbuphy
@@ -1,716 +1,232 @@
|
||||
<template>
|
||||
<div class="browser-rendering-demo">
|
||||
<div class="stepper">
|
||||
<button
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
class="step-btn"
|
||||
:class="{
|
||||
active: currentStep === index,
|
||||
completed: currentStep > index
|
||||
}"
|
||||
@click="currentStep = index"
|
||||
>
|
||||
<span class="step-num">{{ index + 1 }}</span>
|
||||
<span class="step-label">{{ step.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="stage-container">
|
||||
<div class="stage-info">
|
||||
<h3>{{ steps[currentStep].title }}</h3>
|
||||
<p>{{ steps[currentStep].desc }}</p>
|
||||
<div class="browser-rendering-demo custom-demo-base">
|
||||
<div class="demo-label">浏览器渲染 ── 干瘪文字拆解组装变成精美画面</div>
|
||||
<div class="demo-panel">
|
||||
|
||||
<div class="stepper">
|
||||
<button v-for="(step, index) in steps" :key="index"
|
||||
class="step-btn"
|
||||
:class="{ active: currentStep === index, completed: currentStep > index }"
|
||||
@click="currentStep = index"
|
||||
>
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="visualization-window">
|
||||
<!-- HTML/CSS Source -->
|
||||
<div class="source-view">
|
||||
<div class="window-title">
|
||||
积木说明书 (HTML/CSS)
|
||||
</div>
|
||||
<div class="code-content">
|
||||
<!-- HTML Highlighted always after Step 0 -->
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'html'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'html'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<!DOCTYPE html>
|
||||
</div>
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'html'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'html'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<html>
|
||||
</div>
|
||||
<div
|
||||
class="line indent"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'body'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'body'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<body>
|
||||
</div>
|
||||
<div
|
||||
class="line indent-2"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'card'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'card'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<div class="player">
|
||||
</div>
|
||||
<div
|
||||
class="line indent-3"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'img'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'img'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<img class="cover" src="cat.jpg" />
|
||||
</div>
|
||||
<div
|
||||
class="line indent-3"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'title'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'title'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<h2 class="title">搞笑猫咪合集</h2>
|
||||
</div>
|
||||
<div
|
||||
class="line indent-3"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'btn'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'btn'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<button class="btn">▶️ 播放</button>
|
||||
</div>
|
||||
<div
|
||||
class="line indent-2"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'card'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'card'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="line indent"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'body'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'body'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
</body>
|
||||
</div>
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
active: currentStep >= 0,
|
||||
hovered: hoveredPart === 'html'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'html'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
<div class="spacer" />
|
||||
|
||||
<!-- CSS Highlighted precisely based on step usage -->
|
||||
<!-- Layout properties -->
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
active: currentStep === 2,
|
||||
hovered: hoveredPart === 'card'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'card'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
.player { margin: auto; padding: 20px; }
|
||||
</div>
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
active: currentStep === 2,
|
||||
hovered: hoveredPart === 'img'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'img'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
.cover { width: 100%; height: 200px; }
|
||||
</div>
|
||||
<!-- Style properties -->
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
active: currentStep === 1 || currentStep === 3,
|
||||
hovered: hoveredPart === 'title'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'title'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
.title { color: #fb7299; /* B站主题色 */ }
|
||||
</div>
|
||||
<div
|
||||
class="line"
|
||||
:class="{
|
||||
active: currentStep === 1 || currentStep === 3,
|
||||
hovered: hoveredPart === 'btn'
|
||||
}"
|
||||
@mouseenter="hoveredPart = 'btn'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
.btn { background: #00aeec; color: white; }
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-window">
|
||||
<!-- 侧边说明 -->
|
||||
<div class="explanations">
|
||||
<div class="exp-title">{{ steps[currentStep].title }}</div>
|
||||
<div class="exp-desc">{{ steps[currentStep].desc }}</div>
|
||||
</div>
|
||||
|
||||
<div class="transform-arrow">
|
||||
→
|
||||
</div>
|
||||
|
||||
<!-- Render Result -->
|
||||
<div class="result-view">
|
||||
<div class="window-title">
|
||||
{{ steps[currentStep].resultTitle }}
|
||||
<!-- 当前结果呈现区域 -->
|
||||
<div class="render-canvas">
|
||||
<!-- Step 0: 代码 -->
|
||||
<div v-if="currentStep === 0" class="canvas-item code-raw fade-in">
|
||||
<pre><code><b><html></b>
|
||||
<b><style></b>
|
||||
.title { color: #f00; }
|
||||
<b></style></b>
|
||||
<b><body></b>
|
||||
<b><h1 class="title"></b>
|
||||
Google Search
|
||||
<b></h1></b>
|
||||
<b><input /></b>
|
||||
<b></body></b>
|
||||
<b></html></b></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="render-canvas">
|
||||
<!-- Step 1: DOM (Skeleton) -->
|
||||
<transition-group name="block">
|
||||
<div
|
||||
v-if="currentStep >= 0"
|
||||
key="html"
|
||||
class="block-box root"
|
||||
:class="{ hovered: hoveredPart === 'html' }"
|
||||
@mouseenter.stop="hoveredPart = 'html'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<span class="block-label">html</span>
|
||||
<div
|
||||
class="block-box body"
|
||||
:class="{ hovered: hoveredPart === 'body' }"
|
||||
@mouseenter.stop="hoveredPart = 'body'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<span class="block-label">body</span>
|
||||
|
||||
<!-- Product Card -->
|
||||
<div
|
||||
class="block-box card"
|
||||
:class="{
|
||||
layout: currentStep >= 2,
|
||||
hovered: hoveredPart === 'card'
|
||||
}"
|
||||
@mouseenter.stop="hoveredPart = 'card'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<span class="block-label">div.player</span>
|
||||
|
||||
<!-- Image -->
|
||||
<div
|
||||
class="block-box img"
|
||||
:class="{
|
||||
layout: currentStep >= 2,
|
||||
hovered: hoveredPart === 'img'
|
||||
}"
|
||||
@mouseenter.stop="hoveredPart = 'img'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<span class="block-label">img.cover</span>
|
||||
<span
|
||||
v-if="currentStep >= 3"
|
||||
class="content-img"
|
||||
>🐈</span>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div
|
||||
class="block-box title"
|
||||
:class="{
|
||||
styled: currentStep >= 1,
|
||||
layout: currentStep >= 2,
|
||||
hovered: hoveredPart === 'title'
|
||||
}"
|
||||
@mouseenter.stop="hoveredPart = 'title'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<span class="block-label">h2.title</span>
|
||||
<span
|
||||
v-if="currentStep >= 3"
|
||||
class="content"
|
||||
>搞笑猫咪合集</span>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div
|
||||
class="block-box btn"
|
||||
:class="{
|
||||
styled: currentStep >= 1,
|
||||
layout: currentStep >= 2,
|
||||
hovered: hoveredPart === 'btn'
|
||||
}"
|
||||
@mouseenter.stop="hoveredPart = 'btn'"
|
||||
@mouseleave="hoveredPart = null"
|
||||
>
|
||||
<span class="block-label">button.btn</span>
|
||||
<span
|
||||
v-if="currentStep >= 3"
|
||||
class="content-btn"
|
||||
>▶️ 播放</span>
|
||||
</div>
|
||||
<!-- Step 1: DOM树 -->
|
||||
<div v-if="currentStep === 1" class="canvas-item dom-tree fade-in">
|
||||
<div class="tree-node">html
|
||||
<div class="tree-children">
|
||||
<div class="tree-node">body
|
||||
<div class="tree-children">
|
||||
<div class="tree-node leaf">h1 (Google)</div>
|
||||
<div class="tree-node leaf">input (搜索框)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<!-- Overlays for different steps -->
|
||||
<div
|
||||
v-if="currentStep === 1"
|
||||
class="overlay-info style-info"
|
||||
>
|
||||
<div class="brush">
|
||||
🖌️ 正在上色 (Style)...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="currentStep === 2"
|
||||
class="overlay-info layout-info"
|
||||
>
|
||||
<div class="ruler">
|
||||
📏 正在排版 (Layout)...
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 2: 结合 CSS -->
|
||||
<div v-if="currentStep === 2" class="canvas-item css-merge fade-in">
|
||||
<div class="merge-box">
|
||||
<div class="box-left">h1 (Google)</div>
|
||||
<div class="box-plus">+</div>
|
||||
<div class="box-right">.title { color: #f00 }</div>
|
||||
<div class="box-arrow">↓</div>
|
||||
<div class="box-result">h1 (红色文字规则)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="currentStep === 3"
|
||||
class="overlay-info paint-info"
|
||||
>
|
||||
<div class="paint">
|
||||
✨ 绘制完成 (Paint)!
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 3: Layout -->
|
||||
<div v-if="currentStep === 3" class="canvas-item layout-plan fade-in">
|
||||
<div class="blueprint">
|
||||
<div class="bp-box bp-h1">x:50, y:20<br>w:200, h:40</div>
|
||||
<div class="bp-box bp-input">x:50, y:80<br>w:400, h:30</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Paint -->
|
||||
<div v-if="currentStep === 4" class="canvas-item final-paint fade-in">
|
||||
<div class="browser-fake">
|
||||
<h1 style="color:red; font-family:sans-serif; margin-bottom:20px; font-weight:normal;">Google Search</h1>
|
||||
<div style="width:100%; max-width:400px; height:36px; border-radius:20px; border:1px solid #dfe1e5; padding:0 20px; display:flex; align-items:center;">
|
||||
🔍
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-status">点击上方各步骤图标，查看每一阶段的工厂作业产出</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const steps = [
|
||||
{
|
||||
label: 'DOM (搭骨架)',
|
||||
title: '1. 搭建骨架 (DOM 解析)',
|
||||
desc: '浏览器工厂看懂了 HTML 代码，搭建好了页面的“骨架”（比如哪里是包裹盒 div，哪里是按钮 button）。',
|
||||
resultTitle: 'DOM 树结构'
|
||||
},
|
||||
{
|
||||
label: 'Style (看图纸)',
|
||||
title: '2. 匹配样式 (CSS 解析)',
|
||||
desc: '仔细看了眼配色的说明书。比如发现 .title 字体要是粉色的，.btn 背景要是蓝色的（此时只在脑子里确立样式，但不计算尺寸）。',
|
||||
resultTitle: '获取了各种配置规则'
|
||||
},
|
||||
{
|
||||
label: 'Layout (定尺寸)',
|
||||
title: '3. 排版规划 (Layout)',
|
||||
desc: '拿尺子量每个骨架的大小。考虑到用户的屏幕尺寸，精确计算出猫咪的图片要多高、播放按钮要挤到哪个坐标上。',
|
||||
resultTitle: '排版布局盒子'
|
||||
},
|
||||
{
|
||||
label: 'Paint (绘制)',
|
||||
title: '4. 像素上色 (Paint)',
|
||||
desc: '根据前面的几何位置和颜色计划，正式拿起画笔，将一个个像素填到你的屏幕上，一个可以看视频的播放器就诞生了。',
|
||||
resultTitle: '最终画面'
|
||||
}
|
||||
]
|
||||
|
||||
const currentStep = ref(0)
|
||||
const hoveredPart = ref(null)
|
||||
const steps = [
|
||||
{ icon: '📄', name: '源码', title: '拿到纯文本源代码', desc: '刚传回来的只是一堆干瘪的 HTML, CSS 等代码字符。这只是建造网页的说明书，不是真正的画面。' },
|
||||
{ icon: '🦴', name: 'DOM解析', title: '1. 搭骨架 (DOM 解析)', desc: '第一步通读 HTML 标签，构建树状骨架图（DOM 树），了解结构关系，例如"标题框在身体(body)里"。' },
|
||||
{ icon: '🎨', name: 'CSS解析', title: '2. 样式附加 (CSS 解析)', desc: '第二步读 CSS，把对应的样式规则（如"标题为红色"）关联并绑定到我们刚才搭建好的特定骨架节点上。' },
|
||||
{ icon: '📏', name: 'Layout排版', title: '3. 几何排版 (Layout)', desc: '第三步拿尺子量每个骨架的大小。结合你的屏幕尺寸，精确计算出每个元素所在的绝对坐标 x, y 和明确的长宽高尺寸。' },
|
||||
{ icon: '🖼️', name: 'Paint绘制', title: '4. 像素涂色 (Paint)', desc: '最后，有了骨架、颜色规则、和精准坐标尺寸，浏览器控制像素画笔，在一瞬间完成上色和填充！' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.browser-rendering-demo {
|
||||
.custom-demo-base {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.demo-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
margin: 0.5rem 0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-status {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stepper {
|
||||
display: flex;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.step-btn {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.step-btn:hover {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.step-btn.active {
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.step-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.step-num {
|
||||
background: var(--vp-c-bg-alt);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-btn.active .step-num,
|
||||
.step-btn.completed .step-num {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.stage-info {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stage-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.stage-info p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.visualization-window {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.source-view,
|
||||
.result-view {
|
||||
flex: 1;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.window-title {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
background: var(--vp-c-bg-soft);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.code-content {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
font-family: monospace;
|
||||
|
||||
}
|
||||
|
||||
.line {
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.5s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.line.active {
|
||||
opacity: 1;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
font-weight: bold;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.line.indent {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.line.indent-2 {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.line.indent-3 {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
.line.mt-2 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.transform-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.5rem;
|
||||
color: var(--vp-c-text-3);
|
||||
gap: 0.4rem;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.result-view {
|
||||
background: white;
|
||||
position: relative;
|
||||
.step-btn.active { opacity: 1; transform: scale(1.1); }
|
||||
.step-btn.completed { opacity: 0.8; }
|
||||
|
||||
.step-icon { font-size: 1.5rem; }
|
||||
.step-name { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); }
|
||||
|
||||
.stage-window {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.explanations {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--vp-c-brand-1, #3b82f6);
|
||||
}
|
||||
|
||||
.exp-title { font-weight: bold; font-size: 1.05rem; margin-bottom: 0.8rem; color: var(--vp-c-text-1); }
|
||||
.exp-desc { font-size: 0.85rem; color: var(--vp-c-text-2); line-height: 1.6; }
|
||||
|
||||
.render-canvas {
|
||||
padding: 2rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
/* Blocks Animation */
|
||||
.block-box {
|
||||
border: 1px dashed #9ca3af;
|
||||
background: #f3f4f6;
|
||||
padding: 0.5rem;
|
||||
margin: 0.2rem;
|
||||
border-radius: 2px;
|
||||
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
position: relative;
|
||||
min-width: 50px;
|
||||
min-height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.block-box.root {
|
||||
width: 95%;
|
||||
border-color: #e5e7eb;
|
||||
background: #fff;
|
||||
}
|
||||
.block-box.body {
|
||||
width: 90%;
|
||||
border-color: #d1d5db;
|
||||
background: #f9fafb;
|
||||
}
|
||||
.block-box.card {
|
||||
width: 80%;
|
||||
border-color: #9ca3af;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.block-label {
|
||||
font-size: 0.6rem;
|
||||
color: #9ca3af;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 4px;
|
||||
background: white;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
/* Step 2: Style */
|
||||
.block-box.title.styled {
|
||||
color: #fb7299;
|
||||
border: 1px solid #fb7299;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.block-box.btn.styled {
|
||||
background: #00aeec;
|
||||
color: white;
|
||||
border: 1px solid #00aeec;
|
||||
}
|
||||
|
||||
/* Step 3: Layout */
|
||||
.block-box.card.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
flex: 1.2;
|
||||
height: 280px;
|
||||
border: 2px dashed var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.block-box.img.layout {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #eee;
|
||||
border: none;
|
||||
font-size: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: var(--vp-c-bg-alt);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.block-box.title.layout {
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.canvas-item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }
|
||||
.fade-in { animation: fadeIn 0.4s ease-out; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
.block-box.btn.layout {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Code state */
|
||||
.code-raw pre { background: var(--vp-code-bg); padding: 1rem; border-radius: 6px; font-size: 0.75rem; color: var(--vp-code-color); width: 100%; height: 100%; overflow: auto; margin:0; line-height: 1.5;}
|
||||
|
||||
/* Content visibility for Paint step */
|
||||
.content,
|
||||
.content-img,
|
||||
.content-btn {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
animation: fadeIn 0.5s;
|
||||
align-self: center;
|
||||
}
|
||||
/* DOM Tree state */
|
||||
.tree-node { border: 2px solid var(--vp-c-brand-soft); background: var(--vp-c-bg); padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; font-weight: bold; text-align: center; color: var(--vp-c-text-1); }
|
||||
.tree-children { display: flex; gap: 1.5rem; margin-top: 2rem; position: relative; justify-content: center; }
|
||||
.tree-children::before { content:''; position: absolute; top: -2rem; left: 50%; width: 2px; height: 2rem; background: var(--vp-c-brand-soft); }
|
||||
.tree-children .tree-node { position: relative; }
|
||||
.tree-children .tree-node::before { content:''; position: absolute; top: -2rem; left: 50%; width: 2px; height: 2rem; background: var(--vp-c-brand-soft); }
|
||||
.tree-node.leaf { background: var(--vp-c-brand-soft, #eff6ff); color: var(--vp-c-brand-1, #3b82f6); border-color: var(--vp-c-brand-1); }
|
||||
|
||||
.content-img {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.content-btn {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
/* CSS Merge */
|
||||
.merge-box { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--vp-font-family-mono); font-size: 0.85rem;}
|
||||
.box-left, .box-right { padding: 0.8rem 1.2rem; border-radius: 6px; border: 2px dashed var(--vp-c-text-3); background: var(--vp-c-bg); color: var(--vp-c-text-1); }
|
||||
.box-result { padding: 0.8rem 1.2rem; border-radius: 6px; background: var(--vp-c-danger-soft, #fee2e2); color: var(--vp-c-danger-3, #b91c1c); border: 2px solid var(--vp-c-danger-1, #ef4444); font-weight: bold; }
|
||||
.box-arrow, .box-plus { font-size: 1.5rem; font-weight: bold; color: var(--vp-c-text-2); }
|
||||
|
||||
/* Overlay Info */
|
||||
.overlay-info {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
animation: bounceIn 0.5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Layout Plan */
|
||||
.blueprint { width: 100%; height: 100%; position: relative; border: 2px solid var(--vp-c-brand-1); background: rgba(59, 130, 246, 0.05); }
|
||||
.blueprint::before { content: 'Viewport Blueprint'; position: absolute; font-size: 0.75rem; color: var(--vp-c-brand-1); top: 8px; left: 8px; font-family: monospace; font-weight: bold; }
|
||||
.bp-box { position: absolute; border: 2px dashed var(--vp-c-warning-1, #f59e0b); background: var(--vp-c-warning-soft, #fffbeb); color: var(--vp-c-warning-1); font-size: 0.75rem; padding: 4px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: monospace; font-weight: bold; }
|
||||
.bp-box.bp-h1 { top: 25%; left: 10%; width: 50%; height: 25%; }
|
||||
.bp-box.bp-input { top: 60%; left: 10%; width: 80%; height: 20%; }
|
||||
|
||||
.brush,
|
||||
.ruler,
|
||||
.paint {
|
||||
display: inline-block;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
/* Final Paint */
|
||||
.browser-fake { width: 100%; height: 100%; background: #fff; padding: 2rem; display: flex; flex-direction: column; justify-content: center; color: #1a1a1a; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); }
|
||||
html.dark .browser-fake { background: #111; color: #eee; }
|
||||
|
||||
/* Vue Transitions */
|
||||
.block-enter-active,
|
||||
.block-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.block-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover Interactions */
|
||||
.line.hovered {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
opacity: 1 !important;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.block-box.hovered {
|
||||
box-shadow: 0 0 0 2px #3b82f6;
|
||||
z-index: 10;
|
||||
background-color: rgba(59, 130, 246, 0.05);
|
||||
cursor: crosshair;
|
||||
@media (max-width: 768px) {
|
||||
.stage-window { flex-direction: column; }
|
||||
.stepper { flex-wrap: wrap; gap: 1rem; }
|
||||
.step-btn { flex: 1 1 20%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,189 +1,308 @@
|
||||
<template>
|
||||
<div class="dns-lookup-demo simple-mode">
|
||||
<div class="concept-explanation">
|
||||
<p class="why-text">
|
||||
<strong>为什么需要 DNS？(查导航)</strong>
|
||||
</p>
|
||||
<p class="why-desc-zh">
|
||||
你知道店铺名字叫 "bilibili.com"，但快递员需要知道具体的经纬度坐标 (IP 地址)
|
||||
才能送达。
|
||||
<br>
|
||||
DNS 就像是<strong>地图导航</strong>，输入店名，它通过“114查号台”帮你找到坐标。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-stage">
|
||||
<div class="input-area">
|
||||
<span class="label">店铺名称 (域名)</span>
|
||||
<div class="fake-input">
|
||||
bilibili.com
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-animation">
|
||||
<div class="arrow-down">
|
||||
⬇️
|
||||
</div>
|
||||
<div class="dns-box">
|
||||
<div class="icon">
|
||||
🧭
|
||||
</div>
|
||||
<div class="title">
|
||||
DNS (查号台)
|
||||
</div>
|
||||
<div class="desc">
|
||||
正在查询 bilibili.com 的 IP...
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow-down">
|
||||
⬇️
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-area">
|
||||
<span class="label">精准坐标 (IP 地址)</span>
|
||||
<div class="fake-output">
|
||||
110.43.12.55
|
||||
</div>
|
||||
</div>
|
||||
<div class="dns-lookup-demo custom-demo-base">
|
||||
<div class="demo-label">DNS 解析 ── 查地址簿找坐标</div>
|
||||
<div class="demo-panel">
|
||||
|
||||
<div class="lookup-flow">
|
||||
<!-- 浏览器 -->
|
||||
<div class="flow-node browser-node" :class="{ active: true }">
|
||||
<div class="node-icon">📱</div>
|
||||
<div class="node-title">浏览器</div>
|
||||
<div class="node-desc" v-if="step === 0">要去 www.google.com</div>
|
||||
<div class="node-desc" v-if="step === 1">问 114查号台...</div>
|
||||
<div class="node-desc success" v-if="step === 2">收到: 142... 发车!</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-path-wrapper">
|
||||
<div class="flow-path" :class="{ active: step >= 0 }">
|
||||
<span class="path-label">询问坐标</span>
|
||||
<div class="moving-dot" v-if="step === 1"></div>
|
||||
</div>
|
||||
<div class="flow-path reverse" :class="{ active: step === 2 }">
|
||||
<span class="path-label">返回 IP</span>
|
||||
<div class="moving-dot reverse" v-if="step === 2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查号台 -->
|
||||
<div class="flow-node dns-node" :class="{ active: step >= 1, flash: step === 1 }">
|
||||
<div class="node-icon">📞</div>
|
||||
<div class="node-title">114查号台 (DNS)</div>
|
||||
<div class="node-desc" v-if="step === 0">待命</div>
|
||||
<div class="node-desc" v-if="step === 1">正在翻地址簿...</div>
|
||||
<div class="node-desc success" v-if="step === 2">找到啦: 142.250.80.46</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-bar">
|
||||
<button class="action-btn" @click="runDemo" :disabled="isRunning">
|
||||
{{ isRunning ? '查询中...' : (step === 2 ? '重新查询' : '开始 DNS 查询') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="demo-status">{{ statusText }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Simplified: No need for complex i18n logic anymore as we display both.
|
||||
defineProps({
|
||||
lang: String // Accepted but ignored
|
||||
})
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const step = ref(0)
|
||||
const isRunning = ref(false)
|
||||
const statusList = [
|
||||
'点击按钮，告诉浏览器你不知道 Google 服务器在哪',
|
||||
'浏览器向营运商查号台 (DNS) 请求数字坐标...',
|
||||
'拿到具体的 IP 地址，准备开始发车通信！'
|
||||
]
|
||||
|
||||
const statusText = computed(() => statusList[step.value])
|
||||
|
||||
const runDemo = () => {
|
||||
if (isRunning.value) return
|
||||
step.value = 0
|
||||
isRunning.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
step.value = 1
|
||||
setTimeout(() => {
|
||||
step.value = 2
|
||||
isRunning.value = false
|
||||
}, 1500)
|
||||
}, 300)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dns-lookup-demo {
|
||||
.custom-demo-base {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.concept-explanation {
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.why-text {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--vp-c-brand);
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.why-desc-en {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
line-height: 1.5;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.why-desc-zh {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.demo-stage {
|
||||
.demo-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.input-area,
|
||||
.output-area {
|
||||
.demo-status {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lookup-flow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-3);
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.fake-input,
|
||||
.fake-output {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.fake-input {
|
||||
border-color: #3b82f6;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.fake-output {
|
||||
border-color: #10b981;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.process-animation {
|
||||
.flow-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
transition: all 0.3s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dns-box {
|
||||
background: #fffbeb;
|
||||
border: 2px solid #f59e0b;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
width: 240px; /* Slightly wider for bilingual text */
|
||||
.flow-node.active {
|
||||
border-color: var(--vp-c-brand-1, #3b82f6);
|
||||
background: var(--vp-c-brand-soft, #eff6ff);
|
||||
}
|
||||
|
||||
.html.dark .dns-box {
|
||||
background: #451a03;
|
||||
.flow-node.flash {
|
||||
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 2rem;
|
||||
.dns-node.active {
|
||||
border-color: var(--vp-c-success-1, #10b981);
|
||||
background: var(--vp-c-success-soft, #ecfdf5);
|
||||
}
|
||||
.dns-node.flash {
|
||||
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: #d97706;
|
||||
.node-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 0.8rem;
|
||||
color: #b45309;
|
||||
.node-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
text-align: center;
|
||||
margin-top: 0.2rem;
|
||||
padding: 0 0.5rem;
|
||||
min-height: 2.2em;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 1.5rem;
|
||||
color: var(--vp-c-text-3);
|
||||
animation: bounce 2s infinite;
|
||||
.node-desc.success {
|
||||
color: var(--vp-c-success-1, #10b981);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
.flow-path-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
margin: 0 -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flow-path {
|
||||
height: 2px;
|
||||
background: var(--vp-c-divider);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.flow-path.active {
|
||||
background: var(--vp-c-brand-1, #3b82f6);
|
||||
}
|
||||
|
||||
.flow-path.reverse.active {
|
||||
background: var(--vp-c-success-1, #10b981);
|
||||
}
|
||||
|
||||
.path-label {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0 0.4rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flow-path.reverse .path-label {
|
||||
top: auto;
|
||||
bottom: -24px;
|
||||
}
|
||||
|
||||
.moving-dot {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand-1, #3b82f6);
|
||||
animation: moveRight 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.moving-dot.reverse {
|
||||
background: var(--vp-c-success-1, #10b981);
|
||||
left: auto;
|
||||
right: 0;
|
||||
animation: moveLeft 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes moveRight {
|
||||
0% { left: 0%; opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { left: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes moveLeft {
|
||||
0% { right: 0%; opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { right: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: var(--vp-c-brand-1, #3b82f6);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover:not(:disabled) {
|
||||
background: var(--vp-c-brand-2, #2563eb);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.lookup-flow {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(5px);
|
||||
.flow-path-wrapper {
|
||||
height: 40px;
|
||||
width: 2px;
|
||||
margin: -10px 0;
|
||||
}
|
||||
.flow-path {
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
.path-label {
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.flow-path.reverse .path-label {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
.moving-dot, .moving-dot.reverse {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,158 +1,53 @@
|
||||
<template>
|
||||
<div class="http-exchange-demo">
|
||||
<div class="browser-frame">
|
||||
<!-- Address Bar (Simplified) -->
|
||||
<div class="address-bar">
|
||||
<select
|
||||
v-model="method"
|
||||
class="method-select"
|
||||
:disabled="loading"
|
||||
>
|
||||
<option>GET</option>
|
||||
<option>POST</option>
|
||||
<option>PUT</option>
|
||||
<option>DELETE</option>
|
||||
</select>
|
||||
<input
|
||||
v-model="path"
|
||||
class="url-input"
|
||||
:disabled="loading"
|
||||
>
|
||||
<button
|
||||
:disabled="loading"
|
||||
class="send-btn"
|
||||
@click="sendRequest"
|
||||
>
|
||||
{{ loading ? '...' : t.send }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="http-exchange-demo custom-demo-base">
|
||||
<div class="demo-label">HTTP 请求与响应 ── 寄纸条买包裹</div>
|
||||
<div class="demo-panel">
|
||||
|
||||
<div class="split-view">
|
||||
<!-- Network Log (Left) -->
|
||||
<div class="network-log">
|
||||
<div class="log-header">
|
||||
<span>{{ t.cols.name }}</span>
|
||||
<span>{{ t.cols.status }}</span>
|
||||
<span>{{ t.cols.type }}</span>
|
||||
<span>{{ t.cols.time }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="requestSent"
|
||||
class="log-row"
|
||||
:class="{ active: requestSent, selected: true }"
|
||||
>
|
||||
<span class="col-name">{{ path.split('/').pop() || 'index' }}</span>
|
||||
<span
|
||||
class="col-status"
|
||||
:class="statusClass"
|
||||
>{{
|
||||
responseStatus
|
||||
}}</span>
|
||||
<span class="col-type">document</span>
|
||||
<span class="col-time">{{ loading ? 'Pending' : '45ms' }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="empty-state"
|
||||
>
|
||||
{{ t.noRequests }}
|
||||
<div class="exchange-container">
|
||||
<!-- Request Side -->
|
||||
<div class="card request-card" :class="{ active: state !== 'idle' }">
|
||||
<div class="card-header">📤 【买方发纸条】 HTTP Request</div>
|
||||
<div class="card-body">
|
||||
<div class="line"><span class="hl-blue">GET</span> /search <span class="hl-gray">HTTP/1.1</span></div>
|
||||
<div class="line"><span class="hl-gray">Host:</span> www.google.com</div>
|
||||
<div class="line"><span class="hl-gray">User-Agent:</span> Mac Chrome 浏览器</div>
|
||||
<div class="line"><span class="hl-gray">Accept-Language:</span> zh-CN (我要中文货) </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Panel (Right) -->
|
||||
<div
|
||||
v-if="requestSent"
|
||||
class="details-panel"
|
||||
>
|
||||
<div class="tabs">
|
||||
<button
|
||||
v-for="tabKey in ['headers', 'response', 'preview']"
|
||||
:key="tabKey"
|
||||
:class="{ active: activeTab === tabKey }"
|
||||
@click="activeTab = tabKey"
|
||||
>
|
||||
{{ t.tabs[tabKey] }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<!-- Headers Tab -->
|
||||
<div
|
||||
v-if="activeTab === 'headers'"
|
||||
class="headers-view"
|
||||
>
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
{{ t.general }}
|
||||
</div>
|
||||
<div class="kv-row">
|
||||
<span class="key">{{ t.requestUrl }}:</span>
|
||||
<span class="value">https://api.example.com{{ path }}</span>
|
||||
</div>
|
||||
<div class="kv-row">
|
||||
<span class="key">{{ t.requestMethod }}:</span>
|
||||
<span class="value">{{ method }}</span>
|
||||
</div>
|
||||
<div class="kv-row">
|
||||
<span class="key">{{ t.statusCode }}:</span>
|
||||
<span class="value">
|
||||
<span
|
||||
class="status-dot"
|
||||
:class="statusClass"
|
||||
/>
|
||||
{{ responseStatus || '...' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
{{ t.responseHeaders }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(val, key) in responseHeaders"
|
||||
:key="key"
|
||||
class="kv-row"
|
||||
>
|
||||
<span class="key">{{ key }}:</span>
|
||||
<span class="value">{{ val }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Response Tab -->
|
||||
<div
|
||||
v-if="activeTab === 'response'"
|
||||
class="code-view"
|
||||
>
|
||||
<pre>{{ responseBody }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- Preview Tab -->
|
||||
<div
|
||||
v-if="activeTab === 'preview'"
|
||||
class="preview-view"
|
||||
>
|
||||
<div
|
||||
v-if="method === 'GET'"
|
||||
class="html-preview"
|
||||
v-html="responseBody"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="json-preview"
|
||||
>
|
||||
JSON Data: {{ responseBody }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Center -->
|
||||
<div class="action-center">
|
||||
<button v-if="state === 'idle'" class="action-btn" @click="sendRequest">塞入通道发送 →</button>
|
||||
<div v-if="state === 'loading'" class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<div>等包裹寄回...</div>
|
||||
</div>
|
||||
<button v-if="state === 'done'" class="action-btn outline" @click="reset">再试一次 ↻</button>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="details-placeholder"
|
||||
>
|
||||
{{ t.placeholder }}
|
||||
|
||||
<!-- Response Side -->
|
||||
<div class="card response-card" :class="{ active: state === 'done' }">
|
||||
<div class="card-header">📥 【卖方回包裹】 HTTP Response</div>
|
||||
<div class="card-body" v-if="state === 'done'">
|
||||
<div class="line"><span class="hl-gray">HTTP/1.1</span> <span class="hl-green">200 OK</span> (交易成功)</div>
|
||||
<div class="line"><span class="hl-gray">Content-Type:</span> text/html; charset=UTF-8</div>
|
||||
<div class="divider">空行 (分隔快递单和物品正文)</div>
|
||||
<div class="code-block">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>这里是Google搜索页面的代码</body>
|
||||
</html>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body empty" v-else>
|
||||
这里将显示服务器返回的包裹...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="demo-status">
|
||||
{{ statusText }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -160,290 +55,179 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
lang: {
|
||||
type: String,
|
||||
default: 'zh'
|
||||
}
|
||||
})
|
||||
|
||||
const t = {
|
||||
send: '提交订单 (发送请求)',
|
||||
noRequests: '还没发请求 (网络空闲)',
|
||||
placeholder: '点击 "提交订单" 向服务器索要页面',
|
||||
general: '请求概要 (General)',
|
||||
requestUrl: '目标地址 (URL)',
|
||||
requestMethod: '操作类型 (Method)',
|
||||
statusCode: '服务器回复状态 (Status)',
|
||||
responseHeaders: '包裹标签 / 补充说明 (Headers)',
|
||||
tabs: {
|
||||
headers: '头部信息(Headers)',
|
||||
response: '代码内容(Response)',
|
||||
preview: '大致预览(Preview)'
|
||||
},
|
||||
cols: {
|
||||
name: '请求体',
|
||||
status: '状态',
|
||||
type: '类型',
|
||||
time: '耗时'
|
||||
}
|
||||
const state = ref('idle') // idle, loading, done
|
||||
const statusList = {
|
||||
idle: '组装好 HTTP 请求单，包含请求路径和各项补充情报。',
|
||||
loading: '请求正在通过刚才建立好的 TCP 通道飞速传输给对方...',
|
||||
done: '服务器找到货物 (HTML代码)，贴上 200 OK 标签原路返回送达！'
|
||||
}
|
||||
|
||||
const method = ref('GET')
|
||||
const path = ref('/video/BV1xx411c7mD')
|
||||
const loading = ref(false)
|
||||
const requestSent = ref(false)
|
||||
const activeTab = ref('headers')
|
||||
const statusText = computed(() => statusList[state.value])
|
||||
|
||||
const responseStatus = ref('')
|
||||
const responseBody = ref('')
|
||||
const responseHeaders = ref({})
|
||||
|
||||
const sendRequest = async () => {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
requestSent.value = true
|
||||
responseStatus.value = '处理中...'
|
||||
|
||||
await new Promise((r) => setTimeout(r, 800))
|
||||
|
||||
loading.value = false
|
||||
|
||||
if (method.value === 'GET') {
|
||||
responseStatus.value = '200 OK (交易成功)'
|
||||
responseHeaders.value = {
|
||||
'Content-Type': 'text/html; charset=utf-8',
|
||||
'Server': 'BWS/1.1 (Bilibili Web Server)',
|
||||
'Date': new Date().toUTCString()
|
||||
}
|
||||
responseBody.value = `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>【B站】超级搞笑的猫咪合集</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>超级搞笑的猫咪合集</h1>
|
||||
<div class="player">
|
||||
<img src="cat_cover.jpg" alt="封面" />
|
||||
<button>▶️ 播放</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>`
|
||||
} else {
|
||||
responseStatus.value = '201 Created (操作成功)'
|
||||
responseHeaders.value = {
|
||||
'Content-Type': 'application/json',
|
||||
'Server': 'BWS/1.1',
|
||||
'Date': new Date().toUTCString()
|
||||
}
|
||||
responseBody.value = `{\n "success": true,\n "message": "点赞成功!"\n}`
|
||||
}
|
||||
const sendRequest = () => {
|
||||
state.value = 'loading'
|
||||
setTimeout(() => {
|
||||
state.value = 'done'
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
const statusClass = computed(() => {
|
||||
if (loading.value) return 'pending'
|
||||
if (responseStatus.value.startsWith('2')) return 'success'
|
||||
return 'error'
|
||||
})
|
||||
const reset = () => {
|
||||
state.value = 'idle'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.http-exchange-demo {
|
||||
.custom-demo-base {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
margin: 0.5rem 0;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.browser-frame {
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.demo-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.address-bar {
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.method-select {
|
||||
padding: 0.3rem;
|
||||
border-radius: 4px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.demo-status {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.url-input {
|
||||
flex: 1;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
.exchange-container {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: var(--vp-c-brand);
|
||||
.card {
|
||||
flex: 1;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card.request-card.active { border-color: var(--vp-c-brand-1, #3b82f6); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); }
|
||||
.card.response-card.active { border-color: var(--vp-c-success-1, #10b981); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); }
|
||||
|
||||
.card-header {
|
||||
padding: 0.8rem;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-body.empty {
|
||||
color: var(--vp-c-text-3);
|
||||
font-style: italic;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line { margin-bottom: 0.3rem; word-break: break-all; }
|
||||
.hl-blue { color: var(--vp-c-brand-1, #3b82f6); font-weight: bold; }
|
||||
.hl-gray { color: var(--vp-c-text-2); }
|
||||
.hl-green { color: var(--vp-c-success-1, #10b981); font-weight: bold; }
|
||||
|
||||
.divider {
|
||||
border-top: 1px dashed var(--vp-c-divider);
|
||||
margin: 1rem 0;
|
||||
padding-top: 0.5rem;
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: var(--vp-code-bg);
|
||||
padding: 0.8rem;
|
||||
border-radius: 4px;
|
||||
color: var(--vp-code-color);
|
||||
font-size: 0.75rem;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.action-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: var(--vp-c-brand-1, #3b82f6);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0 1rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.split-view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.network-log {
|
||||
width: 40%;
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.log-header span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.log-row {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.log-row.selected {
|
||||
background: #e0f2fe; /* Light blue */
|
||||
}
|
||||
|
||||
html.dark .log-row.selected {
|
||||
background: #1e3a8a;
|
||||
}
|
||||
|
||||
.log-row span {
|
||||
flex: 1;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.col-status.success {
|
||||
color: #10b981;
|
||||
}
|
||||
.col-status.pending {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.action-btn:hover { background: var(--vp-c-brand-2, #2563eb); }
|
||||
.action-btn.outline { background: transparent; color: var(--vp-c-text-1); border: 1px solid var(--vp-c-divider); }
|
||||
.action-btn.outline:hover { background: var(--vp-c-bg-alt); }
|
||||
|
||||
.empty-state {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.details-panel {
|
||||
flex: 1;
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.details-placeholder {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
gap: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabs button.active {
|
||||
border-bottom-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.kv-row {
|
||||
display: flex;
|
||||
margin-bottom: 0.3rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.kv-row .key {
|
||||
width: 120px;
|
||||
color: var(--vp-c-text-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kv-row .value {
|
||||
color: var(--vp-c-text-1);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.code-view pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-top-color: var(--vp-c-brand-1, #3b82f6);
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
.status-dot.success {
|
||||
background: #10b981;
|
||||
}
|
||||
.status-dot.pending {
|
||||
background: #9ca3af;
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.exchange-container { flex-direction: column; }
|
||||
.action-center { width: 100%; height: 60px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,128 +1,74 @@
|
||||
<template>
|
||||
<div class="tcp-handshake-demo">
|
||||
<div class="controls">
|
||||
<div class="status-indicator">
|
||||
{{ t.statusLabel }}:
|
||||
<span :class="connectionStatus.toLowerCase()">{{ statusText }}</span>
|
||||
<div class="tcp-handshake-demo custom-demo-base">
|
||||
<div class="demo-label">TCP 三次握手 ── 建立可靠通话渠道</div>
|
||||
<div class="demo-panel">
|
||||
|
||||
<!-- Sequence Diagram area -->
|
||||
<div class="sequence-container">
|
||||
|
||||
<!-- Computer Left -->
|
||||
<div class="endpoint client">
|
||||
<div class="icon">💻</div>
|
||||
<div class="name">浏览器 (你)</div>
|
||||
<div class="state" :class="{ established: step >= 3 }">
|
||||
{{ step >= 3 ? '连接成功' : '等待连接' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle Area -->
|
||||
<div class="interaction-area">
|
||||
<div class="timeline-line client-line"></div>
|
||||
<div class="timeline-line server-line"></div>
|
||||
|
||||
<!-- Step 1: SYN -->
|
||||
<transition name="msg-right">
|
||||
<div v-if="step >= 1" class="message msg-syn">
|
||||
<div class="msg-box">
|
||||
<div class="msg-title">第1次握手: SYN</div>
|
||||
<div class="msg-desc">"喂，服务器老哥在吗？我能发信息，你能收到吗？"</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Step 2: SYN-ACK -->
|
||||
<transition name="msg-left">
|
||||
<div v-if="step >= 2" class="message msg-syn-ack">
|
||||
<div class="msg-box">
|
||||
<div class="msg-title">第2次握手: SYN-ACK</div>
|
||||
<div class="msg-desc">"在！我收到了！那你现在能听到我说话吗？"</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Step 3: ACK -->
|
||||
<transition name="msg-right">
|
||||
<div v-if="step >= 3" class="message msg-ack">
|
||||
<div class="msg-box">
|
||||
<div class="msg-title">第3次握手: ACK</div>
|
||||
<div class="msg-desc">"我就知道你听到了，证实通道没问题，准备聊正事！"</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Server Right -->
|
||||
<div class="endpoint server">
|
||||
<div class="icon">🖥️</div>
|
||||
<div class="name">Google 服务器</div>
|
||||
<div class="state" :class="{ established: step >= 3 }">
|
||||
{{ step >= 3 ? '连接成功' : '等待连接' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button
|
||||
v-if="step === 0"
|
||||
class="action-btn"
|
||||
@click="startHandshake"
|
||||
>
|
||||
{{ t.connect }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="reset-btn"
|
||||
@click="reset"
|
||||
>
|
||||
{{ t.reset }}
|
||||
</button>
|
||||
|
||||
<div class="action-bar">
|
||||
<button v-if="step === 0" class="action-btn" @click="startHandshake">发起连接</button>
|
||||
<button v-if="step >= 3" class="action-btn outline" @click="reset">断开重连</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sequence-diagram">
|
||||
<!-- Client Timeline -->
|
||||
<div class="timeline client">
|
||||
<div class="actor">
|
||||
<span class="icon">💻</span>
|
||||
<span class="name">{{ t.client }}</span>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div
|
||||
class="state-marker"
|
||||
:class="{ active: step >= 1 }"
|
||||
>
|
||||
SYN_SENT
|
||||
</div>
|
||||
<div
|
||||
class="state-marker"
|
||||
:class="{ active: step >= 3 }"
|
||||
>
|
||||
ESTABLISHED
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interaction Area -->
|
||||
<div class="interaction-space">
|
||||
<!-- SYN Packet -->
|
||||
<div class="packet-track">
|
||||
<transition name="slide-right">
|
||||
<div
|
||||
v-if="showSyn"
|
||||
class="packet syn"
|
||||
>
|
||||
<div class="packet-body">
|
||||
SYN
|
||||
</div>
|
||||
<div class="packet-detail">
|
||||
SEQ=0
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- SYN-ACK Packet -->
|
||||
<div class="packet-track reverse">
|
||||
<transition name="slide-left">
|
||||
<div
|
||||
v-if="showSynAck"
|
||||
class="packet syn-ack"
|
||||
>
|
||||
<div class="packet-body">
|
||||
SYN-ACK
|
||||
</div>
|
||||
<div class="packet-detail">
|
||||
SEQ=0, ACK=1
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- ACK Packet -->
|
||||
<div class="packet-track">
|
||||
<transition name="slide-right">
|
||||
<div
|
||||
v-if="showAck"
|
||||
class="packet ack"
|
||||
>
|
||||
<div class="packet-body">
|
||||
ACK
|
||||
</div>
|
||||
<div class="packet-detail">
|
||||
SEQ=1, ACK=1
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server Timeline -->
|
||||
<div class="timeline server">
|
||||
<div class="actor">
|
||||
<span class="icon">🖥️</span>
|
||||
<span class="name">{{ t.server }}</span>
|
||||
</div>
|
||||
<div class="line" />
|
||||
<div
|
||||
class="state-marker"
|
||||
:class="{ active: step >= 2 }"
|
||||
>
|
||||
SYN_RCVD
|
||||
</div>
|
||||
<div
|
||||
class="state-marker"
|
||||
:class="{ active: step >= 3 }"
|
||||
>
|
||||
ESTABLISHED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<p>{{ currentDescription }}</p>
|
||||
<div class="demo-status">
|
||||
{{ statusText }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -130,316 +76,226 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
lang: {
|
||||
type: String,
|
||||
default: 'zh'
|
||||
}
|
||||
})
|
||||
|
||||
// Bilingual text directly
|
||||
const t = {
|
||||
statusLabel: '连接状态',
|
||||
connect: '建立连接',
|
||||
reset: '断开重连',
|
||||
client: '我 (浏览器)',
|
||||
server: '对面 (B站服务器)',
|
||||
status: {
|
||||
closed: '未连接',
|
||||
handshaking: '正在打招呼确认通道...',
|
||||
established: 'TCP 通道已建立 (ESTABLISHED)'
|
||||
},
|
||||
steps: {
|
||||
0: '点击 "建立连接" 开始三次握手（电话试音）。',
|
||||
1: '第一次握手: "喂，服务器老哥在吗？我能发信息，你能收到吗？" (SYN)',
|
||||
2: '第二次握手: "喂喂在的！我收到了！那你现在能听到我说话吗？" (SYN-ACK)',
|
||||
3: '第三次握手: "妥了，我也能听到！通道没问题，准备看视频！" (ACK)'
|
||||
}
|
||||
}
|
||||
|
||||
const step = ref(0)
|
||||
const showSyn = ref(false)
|
||||
const showSynAck = ref(false)
|
||||
const showAck = ref(false)
|
||||
const statusList = [
|
||||
'点击【发起连接】模拟 TCP 三次握手过程',
|
||||
'发送 SYN 包: 浏览器试探服务器接收能力...',
|
||||
'回复 SYN-ACK 包: 服务器确认接收并试探浏览器...',
|
||||
'回复 ACK 包: 浏览器再次确认。双方通道建立完毕，可以正式发请求！'
|
||||
]
|
||||
|
||||
const connectionStatus = computed(() => {
|
||||
if (step.value === 0) return 'closed'
|
||||
if (step.value < 3) return 'handshaking'
|
||||
return 'established'
|
||||
})
|
||||
|
||||
const statusText = computed(() => {
|
||||
const s = connectionStatus.value
|
||||
return t.status[s] || s.toUpperCase()
|
||||
})
|
||||
|
||||
const currentDescription = computed(() => {
|
||||
return t.steps[step.value] || ''
|
||||
})
|
||||
const statusText = computed(() => statusList[step.value])
|
||||
|
||||
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
|
||||
const startHandshake = async () => {
|
||||
if (step.value > 0) return
|
||||
|
||||
// Step 1: SYN
|
||||
|
||||
step.value = 1
|
||||
showSyn.value = true
|
||||
await wait(1500)
|
||||
|
||||
// Step 2: SYN-ACK
|
||||
await wait(1800)
|
||||
|
||||
step.value = 2
|
||||
showSynAck.value = true
|
||||
await wait(1500)
|
||||
|
||||
// Step 3: ACK
|
||||
await wait(1800)
|
||||
|
||||
step.value = 3
|
||||
showAck.value = true
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
step.value = 0
|
||||
showSyn.value = false
|
||||
showSynAck.value = false
|
||||
showAck.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tcp-handshake-demo {
|
||||
.custom-demo-base {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.demo-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
.demo-status {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-indicator span.closed {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
.status-indicator span.handshaking {
|
||||
color: #f59e0b;
|
||||
}
|
||||
.status-indicator span.established {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sequence-diagram {
|
||||
.sequence-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
min-height: 280px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
.endpoint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.actor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
z-index: 2;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.timeline .line {
|
||||
width: 2px;
|
||||
background: var(--vp-c-divider);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.state-marker {
|
||||
margin-top: 2rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
.endpoint .icon { font-size: 3rem; margin-bottom: 0.5rem; }
|
||||
.endpoint .name { font-weight: bold; font-size: 0.85rem; text-align: center; color: var(--vp-c-text-1); }
|
||||
.endpoint .state {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-3);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.state-marker.active {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
border-color: #10b981;
|
||||
.endpoint .state.established {
|
||||
background: var(--vp-c-success-soft, #ecfdf5);
|
||||
color: var(--vp-c-success-1, #10b981);
|
||||
border-color: var(--vp-c-success-1, #10b981);
|
||||
}
|
||||
|
||||
.interaction-space {
|
||||
.interaction-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.packet-track {
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.packet-track.reverse {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.packet {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
margin: 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 120px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
padding-top: 3rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.packet.syn-ack {
|
||||
background: #f59e0b;
|
||||
}
|
||||
.packet.ack {
|
||||
background: #10b981;
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--vp-c-divider);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.packet-body {
|
||||
font-weight: bold;
|
||||
}
|
||||
.packet-detail {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.9;
|
||||
.client-line { left: 0; }
|
||||
.server-line { right: 0; }
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.slide-right-enter-active {
|
||||
animation: slide-right 1.5s linear;
|
||||
}
|
||||
.slide-left-enter-active {
|
||||
animation: slide-left 1.5s linear;
|
||||
}
|
||||
|
||||
@keyframes slide-right {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 1;
|
||||
} /* Not quite right, need to stick */
|
||||
}
|
||||
|
||||
/*
|
||||
Vue transitions are tricky for "moving across".
|
||||
Let's use a simpler approach: CSS transitions on left/right property or keyframes.
|
||||
Actually, for a "send" animation, we want it to move from A to B and then stay or disappear.
|
||||
Here I want it to appear and move.
|
||||
*/
|
||||
|
||||
.slide-right-enter-active,
|
||||
.slide-left-enter-active {
|
||||
transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.slide-right-enter-from {
|
||||
transform: translateX(-150px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-right-enter-to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* This is getting complicated with Vue transitions for simple movement.
|
||||
Let's just use CSS keyframes on the element itself when it renders.
|
||||
*/
|
||||
|
||||
.packet {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.packet-track .packet {
|
||||
animation-name: moveRight;
|
||||
}
|
||||
.packet-track.reverse .packet {
|
||||
animation-name: moveLeft;
|
||||
}
|
||||
|
||||
@keyframes moveRight {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeft {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.description-box {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
.msg-box {
|
||||
background: var(--vp-c-brand-soft, #eff6ff);
|
||||
border: 2px solid var(--vp-c-brand-1, #3b82f6);
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 8px;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
min-height: 3rem;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.msg-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.msg-syn .msg-box::after, .msg-ack .msg-box::after {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--vp-c-brand-1, #3b82f6);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.msg-syn-ack .msg-box {
|
||||
background: var(--vp-c-warning-soft, #fffbeb);
|
||||
border-color: var(--vp-c-warning-1, #f59e0b);
|
||||
}
|
||||
|
||||
.msg-syn-ack .msg-box::before {
|
||||
content: '←';
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--vp-c-warning-1, #f59e0b);
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.msg-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.3rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.msg-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: var(--vp-c-brand-1, #3b82f6);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover { background: var(--vp-c-brand-2, #2563eb); }
|
||||
.action-btn.outline { background: transparent; color: var(--vp-c-text-1); border: 1px solid var(--vp-c-divider); }
|
||||
.action-btn.outline:hover { background: var(--vp-c-bg-alt); }
|
||||
|
||||
/* Animations */
|
||||
.msg-right-enter-active, .msg-left-enter-active {
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
.msg-right-enter-from { opacity: 0; transform: translateX(-50px); }
|
||||
.msg-left-enter-from { opacity: 0; transform: translateX(50px); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.msg-box { width: 95%; }
|
||||
.msg-syn .msg-box::after, .msg-ack .msg-box::after, .msg-syn-ack .msg-box::before { display: none; }
|
||||
.interaction-area { margin: 0; padding-top: 1rem; }
|
||||
.endpoint { width: 70px; }
|
||||
.timeline-line { top: 0;}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,375 +1,180 @@
|
||||
<template>
|
||||
<div class="url-parser-demo">
|
||||
<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
|
||||
v-if="parsedUrl"
|
||||
class="segmented-url"
|
||||
>
|
||||
<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"
|
||||
class="url-input"
|
||||
placeholder="https://example.com"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="url-parser-demo custom-demo-base">
|
||||
<div class="demo-label">URL 解析 ── 把人类文字翻译成结构化信息</div>
|
||||
|
||||
<div class="visualization-area">
|
||||
<div
|
||||
v-if="parsedUrl"
|
||||
class="url-breakdown"
|
||||
>
|
||||
<div
|
||||
v-for="(part, key) in parts"
|
||||
:key="key"
|
||||
class="url-segment"
|
||||
:class="[key, { active: highlightedPart === key }]"
|
||||
@mouseover="highlightedPart = key"
|
||||
@mouseleave="highlightedPart = null"
|
||||
<div class="demo-panel url-panel">
|
||||
<!-- url block -->
|
||||
<div class="url-layout">
|
||||
<span
|
||||
class="url-part protocol"
|
||||
:class="{ active: activePart === 'protocol' }"
|
||||
@mouseenter="activePart = 'protocol'"
|
||||
@mouseleave="activePart = null"
|
||||
>https://</span>
|
||||
<span
|
||||
class="url-part host"
|
||||
:class="{ active: activePart === 'host' }"
|
||||
@mouseenter="activePart = 'host'"
|
||||
@mouseleave="activePart = null"
|
||||
>www.google.com</span>
|
||||
<span
|
||||
class="url-part path"
|
||||
:class="{ active: activePart === 'path' }"
|
||||
@mouseenter="activePart = 'path'"
|
||||
@mouseleave="activePart = null"
|
||||
>/search</span>
|
||||
</div>
|
||||
|
||||
<div class="info-blocks">
|
||||
<div
|
||||
class="info-card protocol-card"
|
||||
:class="{ active: activePart === 'protocol' }"
|
||||
@mouseenter="activePart = 'protocol'"
|
||||
@mouseleave="activePart = null"
|
||||
>
|
||||
<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 class="card-title">🚛 交通方式 (协议 Protocol)</div>
|
||||
<div class="card-desc">代表你要求坐安全级别最高的"运钞车"（加密通信HTTPS）。如果是 HTTP，就是老式敞篷车，沿途都会被看见。</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info-card host-card"
|
||||
:class="{ active: activePart === 'host' }"
|
||||
@mouseenter="activePart = 'host'"
|
||||
@mouseleave="activePart = null"
|
||||
>
|
||||
<div class="card-title">🏢 店铺名 (主机名 Host)</div>
|
||||
<div class="card-desc">这就是你要去哪家店，也是服务器的域名，后续浏览器需要把它翻译成网络世界认的数字 IP。</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="info-card path-card"
|
||||
:class="{ active: activePart === 'path' }"
|
||||
@mouseenter="activePart = 'path'"
|
||||
@mouseleave="activePart = null"
|
||||
>
|
||||
<div class="card-title">📍 具体货架 (路径 Path)</div>
|
||||
<div class="card-desc">进了店门之后，你要去哪个房间拿具体的哪件商品或执行具体的某个动作。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="error-state"
|
||||
>
|
||||
Invalid URL format / 无效的 URL 格式
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-status">悬停查看每个部分的职责</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
lang: {
|
||||
type: String,
|
||||
default: 'zh'
|
||||
}
|
||||
})
|
||||
|
||||
const inputUrl = ref('https://www.bilibili.com/video/BV1xx411c7mD?t=60#comments')
|
||||
const highlightedPart = ref(null)
|
||||
|
||||
const icons = {
|
||||
protocol: '🚛',
|
||||
host: '🏢',
|
||||
port: '🚪',
|
||||
pathname: '📺',
|
||||
search: '📝',
|
||||
hash: '📍'
|
||||
}
|
||||
|
||||
const labels = {
|
||||
protocol: '交通方式 (Protocol)',
|
||||
host: '店铺地址 (Host)',
|
||||
port: '大门号 (Port)',
|
||||
pathname: '具体货架 (Path)',
|
||||
search: '特殊要求 (Search/Query)',
|
||||
hash: '直接跳转 (Hash)'
|
||||
}
|
||||
|
||||
const descriptions = {
|
||||
protocol: '怎么去？(https = 坐押运车去，比 http 安全)',
|
||||
host: '去哪家店？(域名：例如 www.bilibili.com)',
|
||||
port: '走哪个门？(默认隐藏了 443 端口号)',
|
||||
pathname: '拿什么货？(去 /video 区拿编号为 BV... 的视频)',
|
||||
search: '给店员的备注说明 (例如 ?t=60 表示要求从 60 秒开始看)',
|
||||
hash: '拿到货后自己做的事 (例如滚动到评论区 #comments)'
|
||||
}
|
||||
|
||||
const parsedUrl = computed(() => {
|
||||
try {
|
||||
return new URL(inputUrl.value)
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const parts = computed(() => {
|
||||
if (!parsedUrl.value) return {}
|
||||
return {
|
||||
protocol: parsedUrl.value.protocol.replace(':', ''),
|
||||
host: parsedUrl.value.hostname,
|
||||
port:
|
||||
parsedUrl.value.port ||
|
||||
(parsedUrl.value.protocol === 'https:' ? '443' : '80'),
|
||||
pathname: parsedUrl.value.pathname,
|
||||
search: parsedUrl.value.search,
|
||||
hash: parsedUrl.value.hash
|
||||
}
|
||||
})
|
||||
const activePart = ref(null)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.url-parser-demo {
|
||||
.custom-demo-base {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background-color: var(--vp-c-bg);
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.browser-bar {
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.8rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 1.2rem;
|
||||
user-select: none;
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.omnibox {
|
||||
flex: 1;
|
||||
background: var(--vp-c-bg);
|
||||
.demo-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
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;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.lock-icon {
|
||||
font-size: 0.8rem;
|
||||
.demo-status {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Segmented URL Styles */
|
||||
.segmented-url {
|
||||
.url-layout {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
flex-wrap: wrap;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.url-part {
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-weight: bold;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.url-part:hover,
|
||||
.url-part.active {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.url-part.protocol { color: var(--vp-c-danger-1, #ef4444); }
|
||||
.url-part.protocol.active { background: var(--vp-c-danger-soft, #fef2f2); border-color: var(--vp-c-danger-1, #ef4444); transform: scale(1.05); }
|
||||
|
||||
.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.host { color: var(--vp-c-brand-1, #3b82f6); }
|
||||
.url-part.host.active { background: var(--vp-c-brand-soft, #eff6ff); border-color: var(--vp-c-brand-1, #3b82f6); transform: scale(1.05); }
|
||||
|
||||
.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;
|
||||
}
|
||||
.url-part.path { color: var(--vp-c-success-1, #10b981); }
|
||||
.url-part.path.active { background: var(--vp-c-success-soft, #ecfdf5); border-color: var(--vp-c-success-1, #10b981); transform: scale(1.05); }
|
||||
|
||||
.divider {
|
||||
color: var(--vp-c-text-3);
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
.visualization-area {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.url-breakdown {
|
||||
.info-blocks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.url-segment {
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparent; /* Prepare for border color */
|
||||
.info-card {
|
||||
padding: 1.2rem;
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background: var(--vp-c-bg-alt);
|
||||
transition: all 0.2s;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.url-segment.active {
|
||||
.info-card:hover, .info-card.active {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.protocol-card.active { border-color: var(--vp-c-danger-1, #ef4444); background: var(--vp-c-danger-soft, #fef2f2); }
|
||||
.host-card.active { border-color: var(--vp-c-brand-1, #3b82f6); background: var(--vp-c-brand-soft, #eff6ff); }
|
||||
.path-card.active { border-color: var(--vp-c-success-1, #10b981); background: var(--vp-c-success-soft, #ecfdf5); }
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.segment-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.segment-label {
|
||||
font-size: 0.8rem;
|
||||
.card-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.6rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.segment-value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
}
|
||||
.protocol-card.active .card-title { color: var(--vp-c-danger-1, #ef4444); }
|
||||
.host-card.active .card-title { color: var(--vp-c-brand-1, #3b82f6); }
|
||||
.path-card.active .card-title { color: var(--vp-c-success-1, #10b981); }
|
||||
|
||||
.segment-desc {
|
||||
font-size: 0.8rem;
|
||||
.card-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
color: #ef4444;
|
||||
padding: 2rem;
|
||||
@media (max-width: 640px) {
|
||||
.url-layout { font-size: 1.2rem; }
|
||||
.info-blocks { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user