feat: 添加多个附录交互式组件和文档更新
- 添加浏览器前端组件：无障碍访问、国际化、实时通信 - 添加 Transformer 注意力机制系列组件 - 更新 Canvas、数据追踪等现有组件 - 修复 ESLint 变量名冲突问题 - 完善相关附录文档
This commit is contained in:
sanbuphy
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-header">Accessibility (a11y) / 读屏机眼里的你</div>
|
||||
|
||||
<div class="split-pane">
|
||||
<!-- 糟糕的做法 -->
|
||||
<div class="pane bad-pane">
|
||||
<h4 class="pane-title label-bad">❌ 野路子开发：全是 DIV</h4>
|
||||
|
||||
<div class="component-card">
|
||||
<!-- 这里全是用 div 伪造的组件 -->
|
||||
<div
|
||||
class="fake-btn"
|
||||
@mouseenter="speakBad('提交')"
|
||||
@mouseleave="stopSpeak"
|
||||
@keydown.enter="showError"
|
||||
>
|
||||
提交
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="fake-icon"
|
||||
@mouseenter="speakBad('叉叉图')"
|
||||
@mouseleave="stopSpeak"
|
||||
>
|
||||
✖
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reader-box">
|
||||
<div class="reader-header">🎧 读屏机播报内容：</div>
|
||||
<div class="reader-text" :class="{ empty: !currentBadSpeech }">
|
||||
{{ currentBadSpeech || '（只有字面，不知用途，键盘 Enter 无效）' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 优秀做法 -->
|
||||
<div class="pane good-pane">
|
||||
<h4 class="pane-title label-good">✅ 专业前端：语义化 + ARIA</h4>
|
||||
|
||||
<div class="component-card">
|
||||
<!-- 使用真正的按钮和 ARIA -->
|
||||
<button
|
||||
class="real-btn"
|
||||
@mouseenter="speakGood('提交按钮。按下以发送表单。')"
|
||||
@mouseleave="stopSpeak"
|
||||
@click="triggerAction"
|
||||
>
|
||||
提交
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="real-icon-btn"
|
||||
aria-label="关闭窗口"
|
||||
@mouseenter="speakGood('关闭窗口，按钮。')"
|
||||
@mouseleave="stopSpeak"
|
||||
>
|
||||
<span aria-hidden="true">✖</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="reader-box">
|
||||
<div class="reader-header">🎧 读屏机播报内容：</div>
|
||||
<div class="reader-text active">
|
||||
{{ currentGoodSpeech || '（悬停查看播报，支持 Tab 和 Enter 交互）' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-msg">
|
||||
💡 提示：将鼠标悬停在上方按钮上，模拟视障用户读屏机“听到”的内容。<br/>
|
||||
可以尝试用键盘 Tab 键选中并按 Enter！只有右侧的按钮会响应。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const currentBadSpeech = ref('')
|
||||
const currentGoodSpeech = ref('')
|
||||
|
||||
const speakBad = (text) => {
|
||||
currentBadSpeech.value = `文本："${text}"`
|
||||
}
|
||||
const speakGood = (text) => {
|
||||
currentGoodSpeech.value = `🗣️ ${text}`
|
||||
}
|
||||
const stopSpeak = () => {
|
||||
currentBadSpeech.value = ''
|
||||
currentGoodSpeech.value = ''
|
||||
}
|
||||
const showError = () => {
|
||||
alert('假按钮的 @keydown.enter 事件不会天生自带！')
|
||||
}
|
||||
const triggerAction = () => {
|
||||
alert('真按钮成功触发！')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.split-pane {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pane {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pane-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label-bad { color: var(--vp-c-danger, #e74c3c); }
|
||||
.label-good { color: var(--vp-c-brand-1, #10b981); }
|
||||
|
||||
.component-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-grow: 1;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* 假按钮完全不响应 tab 且无默认高亮样式 */
|
||||
.fake-btn, .real-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
.fake-btn {
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
/* 缺少 focus 可见轮廓 */
|
||||
outline: none;
|
||||
}
|
||||
.real-btn {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.real-btn:focus-visible {
|
||||
outline: 3px solid var(--vp-c-brand-soft);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.fake-icon, .real-icon-btn {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.fake-icon {
|
||||
background: #f1f5f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.real-icon-btn {
|
||||
background: #f1f5f9;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.real-icon-btn:focus-visible {
|
||||
outline: 3px solid var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.reader-box {
|
||||
background: #1e293b;
|
||||
border-radius: 6px;
|
||||
padding: 0.8rem;
|
||||
margin-top: auto;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reader-header {
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.reader-text {
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.reader-text.empty {
|
||||
color: #64748b;
|
||||
font-weight: normal;
|
||||
}
|
||||
.reader-text.active {
|
||||
color: #34d399; /* emerald-400 */
|
||||
}
|
||||
|
||||
.status-msg {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.8rem;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🔍</span>
|
||||
<span>无障碍对象模型 (AOM) 视角对比演示</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
请尝试使用<strong>纯键盘（Tab 键与 Enter 键）</strong>分别操作下方两个面板中的元素，并观察右侧“屏幕阅读器”捕获到的 AOM 层解析结果。
|
||||
</div>
|
||||
|
||||
<div class="comparison-container">
|
||||
<!-- 案例 A：仅仅是看起来像按钮 -->
|
||||
<div class="case-panel bad-case">
|
||||
<h3 class="case-title">❌ 案例 A：纯粹的视觉欺骗</h3>
|
||||
<p class="case-desc">使用 <code><div></code> 结合 CSS 绘制。在渲染树上很完美，但在 AOM 树中缺失语义。</p>
|
||||
|
||||
<div class="interactive-area">
|
||||
<div class="label">操作确认：</div>
|
||||
<!-- 伪造的 input -->
|
||||
<div
|
||||
class="fake-input"
|
||||
@click="simulateFocus('bad', '文本：请输入验证码')"
|
||||
>
|
||||
请输入验证码
|
||||
</div>
|
||||
<!-- 伪造的 button -->
|
||||
<div
|
||||
class="fake-button"
|
||||
@mouseenter="simulateFocus('bad', '文本：确认提交')"
|
||||
@mouseleave="clearFocus('bad')"
|
||||
@click="handleClick('bad')"
|
||||
>
|
||||
确认提交
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aom-monitor">
|
||||
<div class="monitor-header">💻 屏幕阅读器解析 (AOM)：</div>
|
||||
<div class="monitor-screen" :class="{ 'has-content': badCaseOutput }">
|
||||
{{ badCaseOutput || '（视障用户无法通过 Tab 键选中此区域的任何元素）' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例 B：语义化与 ARIA 规范 -->
|
||||
<div class="case-panel good-case">
|
||||
<h3 class="case-title">✅ 案例 B：语义化 + ARIA 护航</h3>
|
||||
<p class="case-desc">使用 <code><input></code>、<code><button></code> 等原生标签，补充 <code>aria-label</code>。在 AOM 树中拥有完整交互属性。</p>
|
||||
|
||||
<div class="interactive-area">
|
||||
<label for="a11y-input" class="label">操作确认：</label>
|
||||
<input
|
||||
id="a11y-input"
|
||||
type="text"
|
||||
placeholder="请输入验证码"
|
||||
@focus="simulateFocus('good', '输入框：操作确认，请输入验证码')"
|
||||
@blur="clearFocus('good')"
|
||||
@mouseenter="simulateFocus('good', '输入框：操作确认，请输入验证码')"
|
||||
@mouseleave="clearFocus('good')"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="real-button"
|
||||
aria-label="提交确认验证码"
|
||||
@focus="simulateFocus('good', '按钮：提交确认验证码。按下回车键激活。')"
|
||||
@blur="clearFocus('good')"
|
||||
@mouseenter="simulateFocus('good', '按钮：提交确认验证码。')"
|
||||
@mouseleave="clearFocus('good')"
|
||||
@click="handleClick('good')"
|
||||
>
|
||||
确认提交
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="aom-monitor">
|
||||
<div class="monitor-header">💻 屏幕阅读器解析 (AOM)：</div>
|
||||
<div class="monitor-screen" :class="{ 'has-content': goodCaseOutput }">
|
||||
{{ goodCaseOutput || '（鼠标悬停或按 Tab 键切入以查看解析）' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const badCaseOutput = ref('')
|
||||
const goodCaseOutput = ref('')
|
||||
let timerBad = null
|
||||
let timerGood = null
|
||||
|
||||
const simulateFocus = (type, text) => {
|
||||
if (type === 'bad') {
|
||||
if (timerBad) clearTimeout(timerBad)
|
||||
badCaseOutput.value = text
|
||||
} else {
|
||||
if (timerGood) clearTimeout(timerGood)
|
||||
goodCaseOutput.value = '🗣️ 正在朗读：' + text
|
||||
}
|
||||
}
|
||||
|
||||
const clearFocus = (type) => {
|
||||
if (type === 'bad') {
|
||||
timerBad = setTimeout(() => { badCaseOutput.value = '' }, 400)
|
||||
} else {
|
||||
timerGood = setTimeout(() => { goodCaseOutput.value = '' }, 400)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = (type) => {
|
||||
if (type === 'bad') {
|
||||
alert('【系统提示】普通 div 虽然能绑定点击事件，但键盘用户无法使用 Tab 聚焦它，也无法用 Enter 键触发它。这对肢体障碍人士是灾难。')
|
||||
} else {
|
||||
alert('【系统提示】原生 button 点击触发成功！无论你是用鼠标点击，还是用键盘 Enter 键，都能完美触发。')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1.8rem;
|
||||
margin: 2rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1.8rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.comparison-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.comparison-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
.case-panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.case-panel {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bad-case {
|
||||
border-top: 4px solid var(--vp-c-danger-1);
|
||||
}
|
||||
|
||||
.good-case {
|
||||
border-top: 4px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.case-title {
|
||||
margin: 0 0 0.8rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.case-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
.case-desc code {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.interactive-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
/* 伪造元素的样式 */
|
||||
.fake-input {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
cursor: text;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.fake-button {
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
padding: 0.6rem 1.2rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--vp-c-brand-soft);
|
||||
}
|
||||
/* 注意：这里故意不写 :focus 样式，以反映一般野路子开发的现状 */
|
||||
|
||||
/* 真实原生元素的样式 */
|
||||
#a11y-input {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
#a11y-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--vp-c-brand-1);
|
||||
box-shadow: 0 0 0 2px var(--vp-c-brand-soft);
|
||||
}
|
||||
.real-button {
|
||||
background: var(--vp-c-brand-1);
|
||||
color: #fff;
|
||||
padding: 0.6rem 1.2rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.real-button:hover {
|
||||
background: var(--vp-c-brand-2);
|
||||
}
|
||||
.real-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
/* 屏幕阅读器模拟面板 */
|
||||
.aom-monitor {
|
||||
margin-top: auto;
|
||||
background: #1e293b;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
border-left: 4px solid #475569;
|
||||
}
|
||||
|
||||
.monitor-header {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.monitor-screen {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
color: #64748b;
|
||||
min-height: 2.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.monitor-screen.has-content {
|
||||
color: #34d399; /* 绿色亮起，表示正确读出语义 */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dark .fake-input { background: #333; border-color: #555; }
|
||||
</style>
|
||||
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="demo-wrapper" :dir="layoutDirection">
|
||||
<div class="demo-header" dir="ltr">i18n / 布局与本地化 API 演示</div>
|
||||
|
||||
<!-- 控制面板 -->
|
||||
<div class="controls" dir="ltr">
|
||||
<div class="lang-selector">
|
||||
<label>选择环境 (Locale)：</label>
|
||||
<select v-model="currentLocale">
|
||||
<option value="zh-CN">🇨🇳 简体中文 (zh-CN)</option>
|
||||
<option value="en-US">🇺🇸 English (en-US)</option>
|
||||
<option value="de-DE">🇩🇪 Deutsch (de-DE) [测试超长文本]</option>
|
||||
<option value="ar-SA">🇸🇦 العربية (ar-SA) [测试从右到左]</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 演示应用 -->
|
||||
<div class="app-ui">
|
||||
<!-- 头部导航栏 -->
|
||||
<nav class="app-nav">
|
||||
<div class="nav-brand">
|
||||
<span class="logo">⚡</span>
|
||||
<span>{{ t('app_name') }}</span>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#">{{ t('home') }}</a>
|
||||
<a href="#">{{ t('profile') }}</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主要内容区 -->
|
||||
<main class="app-body">
|
||||
<div class="card">
|
||||
<h2 class="card-title">{{ t('payment_title') }}</h2>
|
||||
<p class="card-desc">{{ t('payment_desc') }}</p>
|
||||
|
||||
<div class="data-row">
|
||||
<span class="label">{{ t('date_label') }}：</span>
|
||||
<span class="value date-val">{{ formattedDate }}</span>
|
||||
</div>
|
||||
|
||||
<div class="data-row">
|
||||
<span class="label">{{ t('amount_label') }}：</span>
|
||||
<span class="value amount-val">{{ formattedAmount }}</span>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<!-- 演示按钮超长溢出防护 -->
|
||||
<button class="btn btn-primary">
|
||||
{{ t('confirm_btn') }}
|
||||
</button>
|
||||
<button class="btn btn-ghost">
|
||||
{{ t('cancel_btn') }} <span dir="ltr">➔</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const currentLocale = ref('zh-CN')
|
||||
|
||||
// 极其简易的字典
|
||||
const dictionary = {
|
||||
'zh-CN': {
|
||||
app_name: '随星流界',
|
||||
home: '首页',
|
||||
profile: '我的',
|
||||
payment_title: '账单详情',
|
||||
payment_desc: '请在到期前完成支付以避免服务中断。',
|
||||
date_label: '出账日期',
|
||||
amount_label: '应付总额',
|
||||
confirm_btn: '立即确认支付',
|
||||
cancel_btn: '返回上一页'
|
||||
},
|
||||
'en-US': {
|
||||
app_name: 'Easy Vibe',
|
||||
home: 'Home',
|
||||
profile: 'Profile',
|
||||
payment_title: 'Invoice Details',
|
||||
payment_desc: 'Please complete your payment before the due date to avoid service interruption.',
|
||||
date_label: 'Issued Date',
|
||||
amount_label: 'Total Due',
|
||||
confirm_btn: 'Confirm Payment',
|
||||
cancel_btn: 'Go Back'
|
||||
},
|
||||
'de-DE': {
|
||||
app_name: 'Einfache Stimmung',
|
||||
home: 'Startseite',
|
||||
profile: 'Profil',
|
||||
payment_title: 'Rechnungsdetails',
|
||||
payment_desc: 'Bitte schließen Sie Ihre Zahlung vor dem Fälligkeitsdatum ab, um eine Unterbrechung des Dienstes zu vermeiden.',
|
||||
date_label: 'Ausstellungsdatum',
|
||||
amount_label: 'Fälliger Gesamtbetrag',
|
||||
confirm_btn: 'Zahlungsvorgang jetzt bestätigen', // 超长按钮文本
|
||||
cancel_btn: 'Zurück zur vorherigen Seite'
|
||||
},
|
||||
'ar-SA': {
|
||||
app_name: 'إيزي فايب',
|
||||
home: 'الرئيسية',
|
||||
profile: 'الملف الشخصي',
|
||||
payment_title: 'تفاصيل الفاتورة',
|
||||
payment_desc: 'يرجى إتمام عملية الدفع قبل تاريخ الاستحقاق لتجنب انقطاع الخدمة.',
|
||||
date_label: 'تاريخ الإصدار',
|
||||
amount_label: 'الإجمالي المستحق',
|
||||
confirm_btn: 'تأكيد الدفع',
|
||||
cancel_btn: 'العودة'
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟的原始数据
|
||||
const rawDate = new Date()
|
||||
const rawAmount = 14590.5
|
||||
|
||||
const t = (key) => dictionary[currentLocale.value][key]
|
||||
|
||||
// 核心特性：自动计算布局方向
|
||||
const layoutDirection = computed(() => {
|
||||
return currentLocale.value === 'ar-SA' ? 'rtl' : 'ltr'
|
||||
})
|
||||
|
||||
// 核心特性：使用浏览器原生 Intl API 进行本地化格式，告别手写正则
|
||||
const formattedDate = computed(() => {
|
||||
return new Intl.DateTimeFormat(currentLocale.value, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
weekday: 'short'
|
||||
}).format(rawDate)
|
||||
})
|
||||
|
||||
const formattedAmount = computed(() => {
|
||||
let currency = 'CNY'
|
||||
if (currentLocale.value === 'en-US') currency = 'USD'
|
||||
if (currentLocale.value === 'de-DE') currency = 'EUR'
|
||||
if (currentLocale.value === 'ar-SA') currency = 'SAR'
|
||||
|
||||
return new Intl.NumberFormat(currentLocale.value, {
|
||||
style: 'currency',
|
||||
currency: currency
|
||||
}).format(rawAmount)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.lang-selector label {
|
||||
font-weight: 600;
|
||||
margin-right: 0.5rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
/* 内部 APP 模拟容器 */
|
||||
.app-ui {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 如果是 RTL，Flex 的 start 自动会贴到右边！ */
|
||||
.app-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.nav-links a { color: #cbd5e1; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
|
||||
.nav-links a:hover { color: white; }
|
||||
|
||||
.app-body {
|
||||
padding: 2rem 1.5rem;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
color: #0f172a;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
color: #64748b;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.data-row:last-of-type { border-bottom: none; margin-bottom: 1rem; }
|
||||
|
||||
.label { color: #64748b; font-weight: 600; font-size: 0.9rem; }
|
||||
|
||||
.value { font-weight: bold; color: #0f172a; }
|
||||
.date-val { font-size: 0.9rem; }
|
||||
.amount-val { font-size: 1.25rem; color: #10b981; }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
flex-wrap: wrap; /* 关键：德文过长时允许换行，保护布局 */
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
min-width: fit-content;
|
||||
flex: 1; /* 按钮自动填满空间 */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary { background: var(--vp-c-brand); color: white; }
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
|
||||
.btn-ghost { background: #f1f5f9; color: #475569; }
|
||||
.btn-ghost:hover { background: #e2e8f0; }
|
||||
|
||||
/* 暗黑模式适配 */
|
||||
.dark .app-body { background: var(--vp-c-bg-alt); }
|
||||
.dark .card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); }
|
||||
.dark .card-title { color: var(--vp-c-text-1); }
|
||||
.dark .value { color: var(--vp-c-text-1); }
|
||||
.dark .amount-val { color: var(--vp-c-brand-1); }
|
||||
.dark .btn-ghost { background: var(--vp-c-bg-soft); color: var(--vp-c-text-2); }
|
||||
.dark .data-row { border-color: var(--vp-c-divider); }
|
||||
</style>
|
||||
+465
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-header" dir="ltr">
|
||||
<span class="icon">🌍</span>
|
||||
<span>浏览器原生的本地化转换 (i18n) 演示</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text" dir="ltr">
|
||||
请在下方切换用户的本地化偏好（环境代号）。体验浏览器引擎在不修改任何底层数据逻辑的前提下，是如何同时处理**语言字典**、**弹性换行**、**排版反转 (RTL)** 以及**原生数据格式转换**的。
|
||||
</div>
|
||||
|
||||
<!-- 顶层控制面板 -->
|
||||
<div class="controls-panel" dir="ltr">
|
||||
<label for="env-selector" class="control-label">🌐 模拟操作系统/浏览器偏好环境：</label>
|
||||
<select id="env-selector" v-model="currentLocale" class="env-select">
|
||||
<option value="zh-CN">🇨🇳 zh-CN (简体中文)</option>
|
||||
<option value="en-US">🇺🇸 en-US (美国英语)</option>
|
||||
<option value="de-DE">🇩🇪 de-DE (德国德语) - 关注文字长度爆增</option>
|
||||
<option value="ar-SA">🇸🇦 ar-SA (沙特阿拉伯语) - 关注 RTL 排版全量反转</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="lab-container">
|
||||
|
||||
<!-- 实验室 1：排版与字典 -->
|
||||
<div class="lab-section">
|
||||
<h3 class="lab-title" dir="ltr">实战区 1：依赖 Flex 面向字典与排版进行重构</h3>
|
||||
<p class="lab-desc" dir="ltr">
|
||||
由于我们在 CSS 中使用了弹性的 Flex 布局，并且没有写死 `margin-left` 而是用了 `gap` 与 `justify-content`，当切换到阿拉伯语时，`dir="rtl"` 属性会指挥浏览器**完美镜像反转**整个布局。当切换到德语时，超长的按钮文字会自动引发弹性换行，而不会溢出。
|
||||
</p>
|
||||
|
||||
<!-- 核心演示区域，响应 RTL -->
|
||||
<div class="lab-window" :dir="layoutDirection">
|
||||
<header class="app-nav">
|
||||
<div class="logo-area">
|
||||
<span class="logo">⚡</span>
|
||||
<span class="appName">{{ dictionary[currentLocale].appName }}</span>
|
||||
</div>
|
||||
<div class="links-area">
|
||||
<a href="#">{{ dictionary[currentLocale].navIndex }}</a>
|
||||
<a href="#">{{ dictionary[currentLocale].navMe }}</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-content">
|
||||
<div class="alert-box">
|
||||
{{ dictionary[currentLocale].alertDesc }}
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">{{ dictionary[currentLocale].btnPay }}</button>
|
||||
<button class="btn btn-ghost">{{ dictionary[currentLocale].btnBack }} <span dir="ltr">➔</span></button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实验室 2：Intl API 底层转换 -->
|
||||
<div class="lab-section rtl-ignore-section">
|
||||
<h3 class="lab-title" dir="ltr">实战区 2：使用 Intl 引擎接管数据呈现</h3>
|
||||
<p class="lab-desc" dir="ltr">
|
||||
彻底抛弃正则表达式的截取与拼接！看看原生的 <code>Intl.NumberFormat</code> 和 <code>Intl.DateTimeFormat</code> 是如何根据我们上方选择的“环境代号”将下方固定不变的底层二进制数据无缝格式化的。
|
||||
</p>
|
||||
|
||||
<div class="data-compare-window" dir="ltr">
|
||||
<!-- 金钱数据对比 -->
|
||||
<div class="data-row">
|
||||
<div class="raw-data">
|
||||
<span class="data-label">底层内存数值 (Float):</span>
|
||||
<code class="data-code">1459800.5</code>
|
||||
</div>
|
||||
<div class="data-arrow">
|
||||
引擎介入<br/> ➔
|
||||
</div>
|
||||
<div class="intl-data">
|
||||
<span class="data-label">DOM 最终呈现:</span>
|
||||
<span class="formatted-val highlight-money">{{ formattedAmount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期数据对比 -->
|
||||
<div class="data-row">
|
||||
<div class="raw-data">
|
||||
<span class="data-label">底层内存数值 (Timestamp):</span>
|
||||
<code class="data-code">1757430000000</code>
|
||||
</div>
|
||||
<div class="data-arrow">
|
||||
引擎介入<br/> ➔
|
||||
</div>
|
||||
<div class="intl-data">
|
||||
<span class="data-label">DOM 最终呈现:</span>
|
||||
<span class="formatted-val highlight-date">{{ formattedDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const currentLocale = ref('zh-CN')
|
||||
|
||||
// 极其简易的本地化字典
|
||||
const dictionary = {
|
||||
'zh-CN': {
|
||||
appName: '企业云服务',
|
||||
navIndex: '控制台首页',
|
||||
navMe: '账户设置',
|
||||
alertDesc: '您有一个待支付的云服务器实例账单，请在 24 小时内完成续费操作以免停机。',
|
||||
btnPay: '立即确认并支付款项',
|
||||
btnBack: '取消并返回'
|
||||
},
|
||||
'en-US': {
|
||||
appName: 'Enterprise Cloud',
|
||||
navIndex: 'Dashboard',
|
||||
navMe: 'Account',
|
||||
alertDesc: 'You have a pending cloud server instance bill. Please renew within 24 hours to avoid suspension.',
|
||||
btnPay: 'Confirm & Proceed to Pay',
|
||||
btnBack: 'Cancel'
|
||||
},
|
||||
'de-DE': {
|
||||
appName: 'Unternehmenscloud',
|
||||
navIndex: 'Startseite',
|
||||
navMe: 'Kontoeinstellungen',
|
||||
alertDesc: 'Sie haben eine ausstehende Rechnung für Ihre Cloud-Server-Instanz. Bitte verlängern Sie innerhalb von 24 Stunden, um eine Aussetzung zu vermeiden.',
|
||||
btnPay: 'Bestätigen und sofortigen Zahlungsvorgang abschließen', // 故意设置的德语超长合成词
|
||||
btnBack: 'Abbrechen'
|
||||
},
|
||||
'ar-SA': {
|
||||
appName: 'سحابة المؤسسة',
|
||||
navIndex: 'لوحة القيادة',
|
||||
navMe: 'إعدادات الحساب',
|
||||
alertDesc: 'لديك فاتورة معلقة لمثيل خادم السحابة الخاص بك. يرجى التجديد خلال 24 ساعة لتجنب التعليق.',
|
||||
btnPay: 'تأكيد والمتابعة للدفع',
|
||||
btnBack: 'إلغاء والعودة'
|
||||
}
|
||||
}
|
||||
|
||||
// 固定的底层原始数据
|
||||
const RAW_TIMESTAMP = 1757430000000 // 模拟某个固定时间 2025-09-09(近似)
|
||||
const RAW_MONEY = 1459800.5
|
||||
|
||||
// 计算布局方向 (核心知识点：处理 RTL)
|
||||
const layoutDirection = computed(() => {
|
||||
return currentLocale.value === 'ar-SA' ? 'rtl' : 'ltr'
|
||||
})
|
||||
|
||||
// 原生 Intl 货币格式化
|
||||
const formattedAmount = computed(() => {
|
||||
let currency = 'CNY'
|
||||
if (currentLocale.value === 'en-US') currency = 'USD'
|
||||
if (currentLocale.value === 'de-DE') currency = 'EUR'
|
||||
if (currentLocale.value === 'ar-SA') currency = 'SAR'
|
||||
|
||||
return new Intl.NumberFormat(currentLocale.value, {
|
||||
style: 'currency',
|
||||
currency: currency,
|
||||
minimumFractionDigits: 2
|
||||
}).format(RAW_MONEY)
|
||||
})
|
||||
|
||||
// 原生 Intl 日期格式化
|
||||
const formattedDate = computed(() => {
|
||||
return new Intl.DateTimeFormat(currentLocale.value, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
weekday: 'long'
|
||||
}).format(new Date(RAW_TIMESTAMP))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1.8rem;
|
||||
margin: 2rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.controls-panel {
|
||||
background: var(--vp-c-brand-soft);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.controls-panel {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.env-select {
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--vp-c-brand-1);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
/* 两个实战区的公共样式 */
|
||||
.lab-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.lab-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
margin: 0 0 0.8rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.lab-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: var(--vp-c-brand-1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.lab-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.lab-desc code {
|
||||
color: var(--vp-c-brand-1);
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 实验室 1 的内部排版沙盒 */
|
||||
.lab-window {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
|
||||
background: var(--vp-c-bg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.logo { color: #38bdf8; font-size: 1.3rem; }
|
||||
|
||||
.links-area {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.links-area a {
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.links-area a:hover { color: white; }
|
||||
|
||||
.app-content {
|
||||
padding: 2rem;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.alert-box {
|
||||
background: #fffbeb;
|
||||
border-left: 4px solid #f59e0b;
|
||||
padding: 1.2rem;
|
||||
color: #b45309;
|
||||
border-radius: 0 6px 6px 0;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* RTL 环境下，警告框的彩色边框需要自动镜像到了右侧！这通过 CSS 的逻辑属性来实现最佳！但我们还是直接利用 dir 的流式特性。我们把 border-left 改为 border-inline-start */
|
||||
[dir="rtl"] .alert-box {
|
||||
border-left: none;
|
||||
border-right: 4px solid #f59e0b;
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap; /* 核心知识点：弹性拉伸保护 */
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.7rem 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
flex: 1; /* 弹性填满剩余空间，对抗超长德语 */
|
||||
min-width: 150px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary { background: #2563eb; color: white; }
|
||||
.btn-primary:hover { background: #1d4ed8; }
|
||||
.btn-ghost { background: #e2e8f0; color: #475569; border: 1px solid #cbd5e1;}
|
||||
.btn-ghost:hover { background: #cbd5e1; }
|
||||
|
||||
.dark .app-content { background: var(--vp-c-bg-alt); }
|
||||
.dark .alert-box { background: rgba(245, 158, 11, 0.1); color: #fcd34d; }
|
||||
.dark .btn-ghost { background: var(--vp-c-bg-soft); color: var(--vp-c-text-1); border-color: var(--vp-c-divider); }
|
||||
.dark .btn-ghost:hover { background: var(--vp-c-divider); }
|
||||
|
||||
/* 实验室 2 的转换展示面板 */
|
||||
.data-compare-window {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 1.2rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.data-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.raw-data, .intl-data {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.intl-data {
|
||||
text-align: left;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.intl-data { text-align: right; }
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.data-code {
|
||||
font-family: monospace;
|
||||
background: #1e293b;
|
||||
color: #a7f3d0;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.data-arrow {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.data-arrow { padding: 0.5rem; }
|
||||
}
|
||||
|
||||
.formatted-val {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.highlight-money { color: #f59e0b; } /* 显眼的金色/橙色代表金钱 */
|
||||
.highlight-date { color: #3b82f6; } /* 蓝色代表日期体系 */
|
||||
|
||||
.dark .data-code { background: #000; color: #10b981; border: 1px solid #333; }
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-header">Polling / 短轮询交互演示</div>
|
||||
|
||||
<div class="network-stage">
|
||||
<!-- 客户端 -->
|
||||
<div class="node client">
|
||||
<div class="node-icon">💻</div>
|
||||
<div class="node-label">Client</div>
|
||||
</div>
|
||||
|
||||
<!-- 通信链路 -->
|
||||
<div class="channel">
|
||||
<div class="message req" :class="{ 'moving-right': isRequesting }">
|
||||
<span v-if="isRequesting">"有新消息吗？" →</span>
|
||||
</div>
|
||||
<div class="message res" :class="{ 'moving-left': isResponding }">
|
||||
<span v-if="isResponding">← "{{ serverResponse }}"</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务端 -->
|
||||
<div class="node server">
|
||||
<div class="node-icon">🖧</div>
|
||||
<div class="node-label">Server (无状态)</div>
|
||||
<button class="action-btn" @click="triggerNewMessage" :disabled="hasNewMessage">
|
||||
制造新消息
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-panel">
|
||||
<div class="status-controls">
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: isPolling }"
|
||||
@click="togglePolling"
|
||||
>
|
||||
{{ isPolling ? '⏹ 停止轮询' : '▶ 开始定时轮询 (1s)' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="log-box">
|
||||
<div v-for="(log, idx) in logs" :key="idx" class="log-line">
|
||||
{{ log }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
const isPolling = ref(false)
|
||||
const isRequesting = ref(false)
|
||||
const isResponding = ref(false)
|
||||
const serverResponse = ref('')
|
||||
const hasNewMessage = ref(false)
|
||||
const logs = ref([])
|
||||
let timer = null
|
||||
|
||||
const addLog = (msg) => {
|
||||
logs.value.unshift(`[${new Date().toLocaleTimeString()}] ${msg}`)
|
||||
if (logs.value.length > 5) logs.value.pop()
|
||||
}
|
||||
|
||||
const triggerNewMessage = () => {
|
||||
hasNewMessage.value = true
|
||||
addLog('服务端：偷偷准备了一条新消息 🤫')
|
||||
}
|
||||
|
||||
const performPoll = () => {
|
||||
if (isRequesting.value || isResponding.value) return
|
||||
|
||||
// 发起请求
|
||||
isRequesting.value = true
|
||||
addLog('客户端：发起 HTTP GET 请求...')
|
||||
|
||||
setTimeout(() => {
|
||||
isRequesting.value = false
|
||||
// 服务端处理并响应
|
||||
if (hasNewMessage.value) {
|
||||
serverResponse.value = '有啦！这是刚收到的弹幕'
|
||||
hasNewMessage.value = false
|
||||
} else {
|
||||
serverResponse.value = '没有'
|
||||
}
|
||||
isResponding.value = true
|
||||
addLog(`服务端：响应 "${serverResponse.value}"，然后关闭连接。`)
|
||||
|
||||
setTimeout(() => {
|
||||
isResponding.value = false
|
||||
}, 600)
|
||||
}, 600)
|
||||
}
|
||||
|
||||
const togglePolling = () => {
|
||||
if (isPolling.value) {
|
||||
clearInterval(timer)
|
||||
isPolling.value = false
|
||||
addLog('停止定时器。')
|
||||
} else {
|
||||
isPolling.value = true
|
||||
addLog('启动 setInterval() 狂轰乱炸模式。')
|
||||
performPoll()
|
||||
timer = setInterval(performPoll, 2500) // 放慢演示速度
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.network-stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.75rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.action-btn:disabled {
|
||||
background: var(--vp-c-text-3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.channel {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
border-top: 2px solid transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message {
|
||||
position: absolute;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: all 0.6s linear;
|
||||
}
|
||||
|
||||
.message.req {
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.message.res {
|
||||
color: var(--vp-c-warning-1, #d97706);
|
||||
background: var(--vp-c-warning-soft, rgba(217, 119, 6, 0.1));
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.moving-right {
|
||||
opacity: 1;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
.moving-left {
|
||||
opacity: 1;
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-weight: bold;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
border-color: var(--vp-c-danger, #e74c3c);
|
||||
color: var(--vp-c-danger, #e74c3c);
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
.log-box {
|
||||
background: #1e293b;
|
||||
color: #a7f3d0;
|
||||
padding: 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
min-height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-header">Server-Sent Events / 单向流推送演示</div>
|
||||
|
||||
<div class="network-stage">
|
||||
<!-- 客户端 -->
|
||||
<div class="node client">
|
||||
<div class="node-icon">📱</div>
|
||||
<div class="node-label">Client</div>
|
||||
</div>
|
||||
|
||||
<!-- 通信链路（带动画的管道） -->
|
||||
<div class="channel">
|
||||
<div class="pipe" v-show="isConnected">
|
||||
<div class="pipe-flow"></div>
|
||||
</div>
|
||||
<div
|
||||
v-for="msg in activeMessages"
|
||||
:key="msg.id"
|
||||
class="message-chunk"
|
||||
>
|
||||
● {{ msg.text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务端 -->
|
||||
<div class="node server">
|
||||
<div class="node-icon">☁️</div>
|
||||
<div class="node-label">Server (流管道)</div>
|
||||
<button
|
||||
v-if="isConnected"
|
||||
class="action-btn"
|
||||
@click="pushEvent"
|
||||
>
|
||||
推送大盘数据 👇
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-panel">
|
||||
<div class="status-controls">
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: isConnected }"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ isConnected ? '⏹ 断开 SSE 连接' : '▶ 建立 SSE 流连接' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="log-box">
|
||||
<div v-for="(log, idx) in logs" :key="idx" class="log-line">
|
||||
{{ log }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
const isConnected = ref(false)
|
||||
const activeMessages = ref([])
|
||||
const logs = ref([])
|
||||
let msgId = 0
|
||||
|
||||
const addLog = (msg) => {
|
||||
logs.value.unshift(`[${new Date().toLocaleTimeString()}] ${msg}`)
|
||||
if (logs.value.length > 5) logs.value.pop()
|
||||
}
|
||||
|
||||
const toggleConnection = () => {
|
||||
if (isConnected.value) {
|
||||
isConnected.value = false
|
||||
addLog('客户端：主动断开连接 (Connection: close)')
|
||||
activeMessages.value = []
|
||||
} else {
|
||||
isConnected.value = true
|
||||
addLog('客户端：发起 HTTP Get, Accept: text/event-stream')
|
||||
setTimeout(() => {
|
||||
addLog('服务端：保持连接不断开，随时准备单向下发数据。')
|
||||
}, 600)
|
||||
}
|
||||
}
|
||||
|
||||
const pushEvent = () => {
|
||||
const stockPrices = ['上证指数 3012.3', '茅台 ¥1750', '宁德时代涨停', '中石油跌 -1%']
|
||||
const randomMsg = stockPrices[Math.floor(Math.random() * stockPrices.length)]
|
||||
|
||||
const msgObj = { id: msgId++, text: randomMsg }
|
||||
activeMessages.value.push(msgObj)
|
||||
addLog(`服务端：向管道喷射数据 "data: ${randomMsg}\\n\\n"`)
|
||||
|
||||
// 模拟动画结束移除
|
||||
setTimeout(() => {
|
||||
activeMessages.value = activeMessages.value.filter(m => m.id !== msgObj.id)
|
||||
addLog(`客户端：触发 onmessage 事件，拿到数据：${randomMsg}`)
|
||||
}, 1200)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
isConnected.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.network-stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px dashed var(--vp-c-brand-soft);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.75rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.channel {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pipe {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
transform: translateY(-50%);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pipe-flow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--vp-c-brand) 0,
|
||||
var(--vp-c-brand) 10px,
|
||||
transparent 10px,
|
||||
transparent 20px
|
||||
);
|
||||
animation: flow 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes flow {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: -28px 0; }
|
||||
}
|
||||
|
||||
.message-chunk {
|
||||
position: absolute;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
padding: 0.2rem 0.5rem;
|
||||
color: white;
|
||||
background: var(--vp-c-brand-1);
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
animation: moveLeft 1.2s linear forwards;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@keyframes moveLeft {
|
||||
0% { right: 0; opacity: 1; transform: scale(1); }
|
||||
90% { right: 90%; opacity: 1; transform: scale(1.1); }
|
||||
100% { right: 100%; opacity: 0; transform: scale(0.5); }
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-weight: bold;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.log-box {
|
||||
background: #1e293b;
|
||||
color: #a7f3d0;
|
||||
padding: 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
min-height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-header">WebSocket / 全双工通信演示</div>
|
||||
|
||||
<div class="network-stage">
|
||||
<!-- 客户端 -->
|
||||
<div class="node client">
|
||||
<div class="node-icon">🎮</div>
|
||||
<div class="node-label">Player 1</div>
|
||||
<button
|
||||
v-if="isConnected"
|
||||
class="action-btn client-btn"
|
||||
@click="sendMessage('client')"
|
||||
>
|
||||
发招：升龙拳！👊
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- WebSocket 通信链路（包含左右两个方向的车道） -->
|
||||
<div class="channel">
|
||||
<div class="ws-pipe" v-show="isConnected">
|
||||
<div class="line top-line"></div>
|
||||
<div class="line bottom-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- 流动的数据包 -->
|
||||
<div
|
||||
v-for="msg in activeMessages"
|
||||
:key="msg.id"
|
||||
class="ws-packet"
|
||||
:class="msg.sender"
|
||||
>
|
||||
{{ msg.text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务端 -->
|
||||
<div class="node server">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">Game Server</div>
|
||||
<button
|
||||
v-if="isConnected"
|
||||
class="action-btn server-btn"
|
||||
@click="sendMessage('server')"
|
||||
>
|
||||
群发：敌军出动！🛸
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-panel">
|
||||
<div class="status-controls">
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: isConnected }"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ isConnected ? '⏹ 挥泪握手告别' : '⚡ Upgrade: websocket 协议质变' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="log-box">
|
||||
<div v-for="(log, idx) in logs" :key="idx" class="log-line">
|
||||
{{ log }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
const isConnected = ref(false)
|
||||
const activeMessages = ref([])
|
||||
const logs = ref([])
|
||||
let msgId = 0
|
||||
|
||||
const addLog = (msg) => {
|
||||
logs.value.unshift(`[${new Date().toLocaleTimeString()}] ${msg}`)
|
||||
if (logs.value.length > 5) logs.value.pop()
|
||||
}
|
||||
|
||||
const toggleConnection = () => {
|
||||
if (isConnected.value) {
|
||||
isConnected.value = false
|
||||
addLog('断开 WebSockets 连接 (TCP 四次挥手).')
|
||||
activeMessages.value = []
|
||||
} else {
|
||||
addLog('客户端发 HTTP 请求：Upgrade: websocket, Connection: Upgrade')
|
||||
setTimeout(() => {
|
||||
addLog('服务端响应：101 Switching Protocols。神级链路建立完成！')
|
||||
isConnected.value = true
|
||||
}, 600)
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = (sender) => {
|
||||
const text = sender === 'client' ? '【二进制帧】走位左移' : '【JSON帧】Boss 释放技能'
|
||||
const msgObj = { id: msgId++, text, sender }
|
||||
activeMessages.value.push(msgObj)
|
||||
|
||||
if (sender === 'client') {
|
||||
addLog(`客户端：瞬间送出 0101 极简格式数据包`)
|
||||
} else {
|
||||
addLog(`服务端：瞬间下发最新全局状态帧`)
|
||||
}
|
||||
|
||||
// 模拟极快传输
|
||||
setTimeout(() => {
|
||||
activeMessages.value = activeMessages.value.filter(m => m.id !== msgObj.id)
|
||||
if (sender === 'client') addLog('服务端：光速收到玩家操作响应。')
|
||||
else addLog('客户端：光速渲染 Boss 动画！')
|
||||
}, 800)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
isConnected.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-wrapper {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.network-stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 130px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.client-btn {
|
||||
background: #3b82f6; /* Blue for client sending */
|
||||
}
|
||||
.client-btn:hover { background: #2563eb; }
|
||||
|
||||
.server-btn {
|
||||
background: #eab308; /* Yellow for server sending */
|
||||
}
|
||||
.server-btn:hover { background: #ca8a04; }
|
||||
|
||||
.channel {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ws-pipe {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background: repeating-linear-gradient(90deg, #10b981 0px, #10b981 10px, transparent 10px, transparent 20px);
|
||||
}
|
||||
.top-line {
|
||||
animation: slideRight 1s linear infinite;
|
||||
}
|
||||
.bottom-line {
|
||||
animation: slideLeft 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 20px 0; }
|
||||
}
|
||||
@keyframes slideLeft {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: -20px 0; }
|
||||
}
|
||||
|
||||
.ws-packet {
|
||||
position: absolute;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
padding: 0.3rem 0.6rem;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 5;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.ws-packet.client {
|
||||
background: #3b82f6;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation-name: shootRight;
|
||||
}
|
||||
|
||||
.ws-packet.server {
|
||||
background: #eab308;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
animation-name: shootLeft;
|
||||
}
|
||||
|
||||
@keyframes shootRight {
|
||||
0% { left: 0; opacity: 1; transform: scale(0.8); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { left: 85%; opacity: 0; transform: scale(0.5); }
|
||||
}
|
||||
|
||||
@keyframes shootLeft {
|
||||
0% { right: 0; opacity: 1; transform: scale(0.8); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { right: 85%; opacity: 0; transform: scale(0.5); }
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
border-color: #10b981;
|
||||
color: #10b981;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.log-box {
|
||||
background: #1e293b;
|
||||
color: #6ee7b7; /* lighter green for WS logs */
|
||||
padding: 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
min-height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -90,41 +90,11 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Animation Loop Code / 动画循环代码</h4>
|
||||
<pre><code>{{ animationCode }}</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="explanation">
|
||||
<h4>Animation Principles / 动画原理</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>requestAnimationFrame：</strong>
|
||||
浏览器提供的动画 API，在每次重绘前调用回调函数，通常为 60FPS
|
||||
</li>
|
||||
<li>
|
||||
<strong>Clear & Redraw：</strong>
|
||||
每帧先清除画布，再重新绘制所有内容
|
||||
</li>
|
||||
<li>
|
||||
<strong>State Update：</strong>
|
||||
更新对象位置、角度等状态
|
||||
</li>
|
||||
<li>
|
||||
<strong>Performance：</strong>
|
||||
使用时间差计算位置，确保不同刷新率下动画速度一致
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="info-box">
|
||||
<p>
|
||||
<span class="icon">💡</span>
|
||||
<strong>提示：</strong>
|
||||
动画的本质是快速连续绘制静态画面。Canvas 每秒可以绘制 60
|
||||
帧（60FPS），形成流畅的动画效果。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -565,11 +535,12 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -577,83 +548,7 @@ canvas {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -127,16 +127,10 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Code / 代码</h4>
|
||||
<pre><code>{{ currentCode }}</code></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>Canvas 是一个位图画布，所有绘制都是像素操作。绘制后无法修改已有内容，只能覆盖或清除重绘。
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -433,75 +427,20 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 1.5rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
border-left: 4px solid #f59e0b;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.625rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
color: #78350f;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -74,56 +74,11 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
<h4>Canvas Coordinate System / Canvas 坐标系统</h4>
|
||||
<ul>
|
||||
<li><strong>Origin / 原点：</strong>在左上角，坐标为 (0, 0)</li>
|
||||
<li>
|
||||
<strong>X Axis / X 轴：</strong>向右为正方向，从 0 到 canvas.width
|
||||
</li>
|
||||
<li>
|
||||
<strong>Y Axis / Y 轴：</strong>向下为正方向，从 0 到 canvas.height
|
||||
</li>
|
||||
<li><strong>Unit / 单位：</strong>像素 (px)，与 CSS 像素 1:1 对应</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Example Code / 示例代码</h4>
|
||||
<pre><code>// 绘制坐标轴
|
||||
const canvas = document.getElementById('myCanvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
|
||||
// X 轴（红色）
|
||||
ctx.strokeStyle = '#e74c3c'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, 0)
|
||||
ctx.lineTo(canvas.width, 0)
|
||||
ctx.stroke()
|
||||
|
||||
// Y 轴（蓝色）
|
||||
ctx.strokeStyle = '#3498db'
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, 0)
|
||||
ctx.lineTo(0, canvas.height)
|
||||
ctx.stroke()
|
||||
|
||||
// 绘制点
|
||||
ctx.fillStyle = '#2ecc71'
|
||||
ctx.beginPath()
|
||||
ctx.arc({{ Math.round(selectedPoint?.x || 100) }}, {{ Math.round(selectedPoint?.y || 100) }}, 5, 0, Math.PI * 2)
|
||||
ctx.fill()</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<p>
|
||||
<span class="icon">💡</span>
|
||||
<strong>提示：</strong>
|
||||
Canvas 的 Y
|
||||
轴方向与传统数学坐标系相反，向下为正。这在处理图形定位时需要特别注意。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -360,11 +315,12 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -373,83 +329,7 @@ canvas {
|
||||
cursor: crosshair;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -87,32 +87,9 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Event Handling Code / 事件处理代码</h4>
|
||||
<pre><code>{{ currentCode }}</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="explanation">
|
||||
<h4>Event Handling Tips / 事件处理要点</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>坐标转换：</strong>
|
||||
使用 getBoundingClientRect() 获取 Canvas 在页面中的位置，计算相对坐标
|
||||
</li>
|
||||
<li>
|
||||
<strong>碰撞检测：</strong>
|
||||
对于圆形，计算鼠标位置到圆心的距离；对于矩形，判断点是否在范围内
|
||||
</li>
|
||||
<li>
|
||||
<strong>事件委托：</strong>
|
||||
Canvas 只有一个元素，需要手动判断事件发生在哪个对象上
|
||||
</li>
|
||||
<li>
|
||||
<strong>性能优化：</strong>
|
||||
使用 requestAnimationFrame 优化重绘，避免频繁操作
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -647,11 +624,12 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -661,63 +639,11 @@ canvas {
|
||||
outline: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
canvas:focus {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -102,40 +102,11 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Particle System Code / 粒子系统代码</h4>
|
||||
<pre><code>{{ particleCode }}</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="explanation">
|
||||
<h4>Particle System Tips / 粒子系统要点</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>粒子类：</strong>
|
||||
每个粒子是一个对象，包含位置、速度、加速度、生命周期等属性
|
||||
</li>
|
||||
<li>
|
||||
<strong>更新循环：</strong>
|
||||
每帧更新所有粒子的位置和状态，移除死亡的粒子
|
||||
</li>
|
||||
<li>
|
||||
<strong>性能优化：</strong>
|
||||
限制粒子数量，使用对象池复用粒子对象
|
||||
</li>
|
||||
<li>
|
||||
<strong>视觉效果：</strong>
|
||||
使用透明度、混合模式、渐变等增强视觉效果
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="info-box">
|
||||
<p>
|
||||
<span class="icon">💡</span>
|
||||
<strong>提示：</strong>
|
||||
移动鼠标或点击画布来产生粒子！不同的效果有不同的交互方式。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -513,11 +484,12 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -526,83 +498,7 @@ canvas {
|
||||
cursor: crosshair;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -174,36 +174,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Optimization Code / 优化代码</h4>
|
||||
<pre><code>{{ optimizationCode }}</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="explanation">
|
||||
<h4>Performance Tips / 性能优化要点</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>减少重绘：</strong>
|
||||
只重绘变化的部分（脏矩形技术），避免不必要的 clearRect
|
||||
</li>
|
||||
<li>
|
||||
<strong>离屏 Canvas：</strong>
|
||||
预渲染静态内容到离屏 Canvas，减少每帧的绘制操作
|
||||
</li>
|
||||
<li>
|
||||
<strong>批量渲染：</strong>
|
||||
减少状态切换（fillStyle、strokeStyle 等），批量处理相同类型的绘制
|
||||
</li>
|
||||
<li>
|
||||
<strong>对象池：</strong>
|
||||
复用对象，减少垃圾回收压力
|
||||
</li>
|
||||
<li>
|
||||
<strong>requestAnimationFrame：</strong>
|
||||
使用浏览器提供的动画 API，优化渲染时机
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -755,11 +728,12 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -767,6 +741,7 @@ canvas {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
@@ -812,57 +787,4 @@ canvas {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="demo ab-testing-demo">
|
||||
<div class="header">
|
||||
<span class="icon">🧪</span>
|
||||
<span class="title">A/B 测试交互演示</span>
|
||||
<span class="title">A/B 测试演示</span>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div v-if="!props.tab" class="tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
:class="['tab', { active: activeTab === tab.id }]"
|
||||
@click="activeTab = tab.id"
|
||||
v-for="t in tabs"
|
||||
:key="t.id"
|
||||
:class="['tab', { active: activeTab === t.id }]"
|
||||
@click="activeTab = t.id"
|
||||
>
|
||||
{{ tab.icon }} {{ tab.name }}
|
||||
{{ t.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -37,15 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="traffic-controls">
|
||||
<button class="btn-primary" @click="allocateUser">
|
||||
👤 分配1个用户
|
||||
</button>
|
||||
<button class="btn-secondary" @click="allocateBatch">
|
||||
👥 分配100个用户
|
||||
</button>
|
||||
<button class="btn-tertiary" @click="resetTraffic">🔄 重置</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="traffic-stats">
|
||||
<div class="stat-item">
|
||||
@@ -63,7 +54,6 @@
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<span class="tips-icon">💡</span>
|
||||
<span class="tips-text">50/50分配能最快检测出差异，确保两组样本量足够大以获得统计显著性</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,7 +168,7 @@
|
||||
'not-significant': !isSignificant
|
||||
}"
|
||||
>
|
||||
{{ isSignificant ? '显著 ✅' : '不显著 ❌' }}
|
||||
{{ isSignificant ? '显著' : '不显著' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -194,7 +184,6 @@
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<span class="tips-icon">💡</span>
|
||||
<span class="tips-text">P值 < 0.05 表示结果统计显著，说明差异不太可能是随机产生的</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -259,7 +248,7 @@
|
||||
</div>
|
||||
|
||||
<button class="btn-primary btn-calc" @click="calculateSampleSize">
|
||||
🧮 计算所需样本量
|
||||
计算所需样本量
|
||||
</button>
|
||||
|
||||
<div v-if="calculatedSampleSize > 0" class="calc-results">
|
||||
@@ -293,7 +282,6 @@
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<span class="tips-icon">💡</span>
|
||||
<span class="tips-text">提升目标越小，所需样本量越大。5%的提升比20%的提升需要更多样本</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -305,7 +293,6 @@
|
||||
<div class="pitfall-list">
|
||||
<div v-for="pitfall in pitfalls" :key="pitfall.id" class="pitfall-card">
|
||||
<div class="pitfall-header">
|
||||
<span class="pitfall-icon">{{ pitfall.icon }}</span>
|
||||
<span class="pitfall-title">{{ pitfall.title }}</span>
|
||||
</div>
|
||||
<div class="pitfall-desc">{{ pitfall.description }}</div>
|
||||
@@ -313,7 +300,7 @@
|
||||
<strong>示例：</strong>{{ pitfall.example }}
|
||||
</div>
|
||||
<div class="pitfall-solution">
|
||||
<strong>✅ 解决方案：</strong>{{ pitfall.solution }}
|
||||
<strong>解决方案：</strong>{{ pitfall.solution }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -324,13 +311,20 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeTab = ref('traffic')
|
||||
const props = defineProps({
|
||||
tab: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const activeTab = ref(props.tab || 'traffic')
|
||||
|
||||
const tabs = [
|
||||
{ id: 'traffic', icon: '🚦', name: '流量分配' },
|
||||
{ id: 'results', icon: '📊', name: '结果对比' },
|
||||
{ id: 'calculator', icon: '🧮', name: '样本量计算' },
|
||||
{ id: 'pitfalls', icon: '⚠️', name: '常见误区' }
|
||||
{ id: 'traffic', name: '流量分配' },
|
||||
{ id: 'results', name: '结果对比' },
|
||||
{ id: 'calculator', name: '样本量计算' },
|
||||
{ id: 'pitfalls', name: '常见误区' }
|
||||
]
|
||||
|
||||
// 流量分配相关
|
||||
@@ -490,7 +484,6 @@ function calculateSampleSize() {
|
||||
const pitfalls = [
|
||||
{
|
||||
id: 'early-stop',
|
||||
icon: '🛑',
|
||||
title: '过早停止实验',
|
||||
description:
|
||||
'看到结果"显著"就立即停止实验，实际上只是随机波动',
|
||||
@@ -500,7 +493,6 @@ const pitfalls = [
|
||||
},
|
||||
{
|
||||
id: 'peeking',
|
||||
icon: '👁️',
|
||||
title: '频繁窥探结果',
|
||||
description: '每天查看数据，一旦"显著"就停止，这会大幅增加假阳性率',
|
||||
example:
|
||||
@@ -509,7 +501,6 @@ const pitfalls = [
|
||||
},
|
||||
{
|
||||
id: 'simpson',
|
||||
icon: '🔄',
|
||||
title: '辛普森悖论',
|
||||
description: '分组看B组更差，但合并后B组反而更好（或相反）',
|
||||
example:
|
||||
@@ -518,7 +509,6 @@ const pitfalls = [
|
||||
},
|
||||
{
|
||||
id: 'p-hacking',
|
||||
icon: '🔬',
|
||||
title: 'P值操纵（P-hacking）',
|
||||
description: '通过尝试不同指标、不同子群体，直到找到"显著"结果',
|
||||
example:
|
||||
@@ -527,7 +517,6 @@ const pitfalls = [
|
||||
},
|
||||
{
|
||||
id: 'novelty',
|
||||
icon: '✨',
|
||||
title: '新奇效应',
|
||||
description: '用户因好奇点击新功能，导致短期数据虚高',
|
||||
example:
|
||||
@@ -536,7 +525,6 @@ const pitfalls = [
|
||||
},
|
||||
{
|
||||
id: 'underpowered',
|
||||
icon: '🔋',
|
||||
title: '样本量不足',
|
||||
description: '样本量太小，即使有真实差异也检测不出来',
|
||||
example:
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="data-analysis-root">
|
||||
<div class="data-analysis-header">
|
||||
<span class="data-analysis-icon">📊</span>
|
||||
<span class="data-analysis-title">数据分析演示</span>
|
||||
</div>
|
||||
|
||||
<div class="data-analysis-tabs">
|
||||
<div v-if="!props.tab" class="data-analysis-tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
:class="['data-analysis-tab', { active: activeTab === tab.id }]"
|
||||
@click="activeTab = tab.id"
|
||||
v-for="t in tabs"
|
||||
:key="t.id"
|
||||
:class="['data-analysis-tab', { active: activeTab === t.id }]"
|
||||
@click="activeTab = t.id"
|
||||
>
|
||||
{{ tab.icon }} {{ tab.name }}
|
||||
{{ t.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -32,7 +31,7 @@
|
||||
@input="calculateStats"
|
||||
/>
|
||||
<button class="stats-btn" @click="generateRandomData">
|
||||
🎲 随机生成
|
||||
随机生成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,7 +113,7 @@
|
||||
:class="['agg-op-btn', { active: activeAggOp === op.id }]"
|
||||
@click="activeAggOp = op.id"
|
||||
>
|
||||
{{ op.icon }} {{ op.name }}
|
||||
{{ op.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -187,7 +186,6 @@
|
||||
<div class="funnel-insights-title">洞察与建议</div>
|
||||
<div class="funnel-insights-list">
|
||||
<div class="funnel-insight">
|
||||
<span class="funnel-insight-icon">💡</span>
|
||||
<span class="funnel-insight-text">
|
||||
最低转化步骤：<strong>{{ worstStep.name }}</strong> ({{
|
||||
worstStep.rate
|
||||
@@ -195,13 +193,11 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="funnel-insight">
|
||||
<span class="funnel-insight-icon">📈</span>
|
||||
<span class="funnel-insight-text">
|
||||
整体转化率：<strong>{{ overallConversion }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
<div class="funnel-insight">
|
||||
<span class="funnel-insight-icon">🎯</span>
|
||||
<span class="funnel-insight-text">
|
||||
建议：优化
|
||||
<strong>{{ worstStep.name }}</strong>
|
||||
@@ -383,14 +379,21 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeTab = ref('stats')
|
||||
const props = defineProps({
|
||||
tab: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const activeTab = ref(props.tab || 'stats')
|
||||
const activeAggOp = ref('groupBy')
|
||||
|
||||
const tabs = [
|
||||
{ id: 'stats', name: '描述性统计', icon: '📈' },
|
||||
{ id: 'aggregation', name: '数据聚合', icon: '🔗' },
|
||||
{ id: 'funnel', name: '漏斗分析', icon: '🔽' },
|
||||
{ id: 'retention', name: '留存分析', icon: '📊' }
|
||||
{ id: 'stats', name: '描述性统计' },
|
||||
{ id: 'aggregation', name: '数据聚合' },
|
||||
{ id: 'funnel', name: '漏斗分析' },
|
||||
{ id: 'retention', name: '留存分析' }
|
||||
]
|
||||
|
||||
// 描述性统计
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<div class="demo data-tracking-demo">
|
||||
<div class="header">
|
||||
<span class="title">数据埋点与采集演示</span>
|
||||
</div>
|
||||
|
||||
<!-- Overview Diagram -->
|
||||
<div v-if="activeTab === 'overview'" class="content">
|
||||
<div class="overview-container">
|
||||
<div class="app-screen">
|
||||
<div class="app-header">电商 App</div>
|
||||
<div class="app-body">
|
||||
<div class="product-card">
|
||||
<div class="product-img"></div>
|
||||
<div class="product-info">新款手机</div>
|
||||
<div class="product-btn">点击购买</div>
|
||||
</div>
|
||||
<!-- Animated click cursor and ripple -->
|
||||
<div class="animation-cursor"></div>
|
||||
<div class="animation-ripple"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-flow">
|
||||
<div class="flow-line"></div>
|
||||
<div class="data-packet">
|
||||
<span class="bracket">{</span>
|
||||
<div class="packet-lines">
|
||||
<div class="pline">e: "click_buy"</div>
|
||||
<div class="pline">u: "user123"</div>
|
||||
</div>
|
||||
<span class="bracket">}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="server-db">
|
||||
<div class="server-header">后端分析系统</div>
|
||||
<div class="server-body">
|
||||
<div class="db-row">user123 | click_buy | 10:05</div>
|
||||
<div class="db-row skeleton"></div>
|
||||
<div class="db-row skeleton"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="desc">用户每一次关键操作都在底层触发了一个埋点事件，飞掠网络被永远记录在案。</p>
|
||||
</div>
|
||||
|
||||
<!-- Methods Compare -->
|
||||
<div v-if="activeTab === 'methods'" class="content">
|
||||
<div class="methods-compare">
|
||||
<div class="method-card">
|
||||
<div class="method-title">代码埋点 (Code)</div>
|
||||
<div class="method-body">
|
||||
<div class="code-block">tracker.track('buy', { price: 299 })</div>
|
||||
<div class="method-pro">极度精准、深入业务字段</div>
|
||||
<div class="method-con">需要开发排期，成本高</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-card">
|
||||
<div class="method-title">可视化埋点 (Visual)</div>
|
||||
<div class="method-body">
|
||||
<div class="visual-tool">
|
||||
<div class="v-box selected"></div>
|
||||
<div class="v-box"></div>
|
||||
</div>
|
||||
<div class="method-pro">产品经理可自行圈选</div>
|
||||
<div class="method-con">只能抓取表层点击，无法获取深层属性</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-card">
|
||||
<div class="method-title">全埋点 (Auto)</div>
|
||||
<div class="method-body">
|
||||
<div class="auto-tool">
|
||||
<div class="noise-line"></div>
|
||||
<div class="noise-line"></div>
|
||||
<div class="noise-line"></div>
|
||||
</div>
|
||||
<div class="method-pro">无死角全量捕捉</div>
|
||||
<div class="method-con">数据如同雪花般庞大，无用噪音极多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Model -->
|
||||
<div v-if="activeTab === 'model'" class="content">
|
||||
<div class="model-container">
|
||||
<div class="json-code">
|
||||
{
|
||||
<span class="key">"event_name"</span>: <span class="string">"add_to_cart"</span>, <span class="comment">// 发生了什么 (What)</span>
|
||||
<span class="key">"timestamp"</span>: <span class="number">1723456789000</span>, <span class="comment">// 什么时候 (When)</span>
|
||||
<span class="key">"user_id"</span>: <span class="string">"u_98765"</span>, <span class="comment">// 是谁 (Who)</span>
|
||||
|
||||
<span class="key">"common_props"</span>: { <span class="comment">// 在哪里/环境 (Where & How)</span>
|
||||
<span class="key">"device"</span>: <span class="string">"iPhone 15Pro"</span>,
|
||||
<span class="key">"network"</span>: <span class="string">"5G"</span>,
|
||||
<span class="key">"os"</span>: <span class="string">"iOS 17"</span>
|
||||
},
|
||||
|
||||
<span class="key">"custom_props"</span>: { <span class="comment">// 业务详情 (Details)</span>
|
||||
<span class="key">"product_id"</span>: <span class="string">"p_001"</span>,
|
||||
<span class="key">"price"</span>: <span class="number">7999.00</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<p class="desc">每一个标准事件都必须回答 4W1H：Who, What, When, Where, How。</p>
|
||||
</div>
|
||||
|
||||
<!-- Data Pipeline -->
|
||||
<div v-if="activeTab === 'pipeline'" class="content">
|
||||
<div class="pipeline-flow">
|
||||
<div class="pipe-node">App 客户端</div>
|
||||
<div class="pipe-arrow">本地缓存<br>批量上报</div>
|
||||
<div class="pipe-node server">接入网关</div>
|
||||
<div class="pipe-arrow">消息队列</div>
|
||||
<div class="pipe-node etl">清洗 (ETL)</div>
|
||||
<div class="pipe-arrow">入库</div>
|
||||
<div class="pipe-node db">数据仓库</div>
|
||||
</div>
|
||||
<p class="desc">数据并非立刻入库，为了抵御高并发和弱网环境，它必须经历缓存、打包、列队和清洗的漫长流水线。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
tab: {
|
||||
type: String,
|
||||
default: 'overview'
|
||||
}
|
||||
})
|
||||
|
||||
const activeTab = ref(props.tab)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Overview Styles & Animations */
|
||||
.overview-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.app-screen {
|
||||
width: 140px;
|
||||
height: 220px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
border: 4px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
height: 60px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
font-size: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes cursor-move {
|
||||
0% { transform: translate(60px, 180px); opacity: 0; }
|
||||
20% { opacity: 1; }
|
||||
40% { transform: translate(60px, 120px); }
|
||||
50% { transform: translate(60px, 120px) scale(0.9); }
|
||||
60% { transform: translate(60px, 120px); }
|
||||
80% { opacity: 1; }
|
||||
100% { transform: translate(60px, 180px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes ripple-effect {
|
||||
0% { transform: scale(0.5); opacity: 1; }
|
||||
100% { transform: scale(2); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes packet-fly {
|
||||
0% { left: 0; opacity: 0; }
|
||||
10% { opacity: 1; left: 0;}
|
||||
90% { left: 100%; opacity: 1; }
|
||||
100% { left: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
.animation-cursor {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 12px; height: 12px;
|
||||
background: #1e293b;
|
||||
border-radius: 50%;
|
||||
animation: cursor-move 3s infinite;
|
||||
}
|
||||
|
||||
.animation-ripple {
|
||||
position: absolute;
|
||||
top: 120px; left: 60px;
|
||||
width: 20px; height: 20px;
|
||||
border: 2px solid #ef4444;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: ripple-effect 3s infinite;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.data-flow {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.flow-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: dashed 2px #cbd5e1;
|
||||
}
|
||||
|
||||
.data-packet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateY(-5px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #e0f2fe;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: #0369a1;
|
||||
animation: packet-fly 3s infinite;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.server-db {
|
||||
width: 160px;
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.server-header {
|
||||
background: #334155;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.server-body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.db-row {
|
||||
background: #475569;
|
||||
color: #94a3b8;
|
||||
padding: 4px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.db-row.skeleton {
|
||||
height: 14px;
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
/* Methods Compare */
|
||||
.methods-compare {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.method-card {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.method-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
color: #1e293b;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1e293b;
|
||||
color: #cbd5e1;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.visual-tool {
|
||||
background: #f1f5f9;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.v-box {
|
||||
width: 20px; height: 20px;
|
||||
background: #cbd5e1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.v-box.selected {
|
||||
border: 2px dashed #ef4444;
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.auto-tool {
|
||||
background: #f1f5f9;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.noise-line {
|
||||
height: 4px;
|
||||
background: #cbd5e1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.method-pro, .method-con {
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.method-pro {
|
||||
color: #16a34a;
|
||||
}
|
||||
.method-pro::before { content: "优势："; font-weight: bold; }
|
||||
.method-con {
|
||||
color: #dc2626;
|
||||
}
|
||||
.method-con::before { content: "劣势："; font-weight: bold; }
|
||||
|
||||
/* JSON Model */
|
||||
.model-container {
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.json-code {
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 13px;
|
||||
color: #cbd5e1;
|
||||
line-height: 1.6;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.key { color: #38bdf8; }
|
||||
.string { color: #a3e635; }
|
||||
.number { color: #f472b6; }
|
||||
.comment { color: #64748b; font-style: italic; }
|
||||
|
||||
/* Pipeline */
|
||||
.pipeline-flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.pipe-node {
|
||||
padding: 12px 16px;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid #bae6fd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pipe-node.server { background: #fef08a; color: #854d0e; border-color: #fde047; }
|
||||
.pipe-node.etl { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
|
||||
.pipe-node.db { background: #bbf7d0; color: #166534; border-color: #86efac; }
|
||||
|
||||
.pipe-arrow {
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pipe-arrow::after {
|
||||
content: "→";
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="decomp-title">注意力机制的层层拆解</div>
|
||||
|
||||
<!-- 第一层：Multi-Head Attention -->
|
||||
<div class="level-section">
|
||||
<div class="level-label">层级 1：Multi-Head Attention</div>
|
||||
<div class="level-content">
|
||||
<div class="multi-head-box">
|
||||
<div class="head-row">
|
||||
<div v-for="i in 8" :key="i" class="head-item">Head {{ i }}</div>
|
||||
</div>
|
||||
<div class="arrow-down">↓ 拆解</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二层：Single Head -->
|
||||
<div class="level-section">
|
||||
<div class="level-label">层级 2：单个 Attention Head</div>
|
||||
<div class="level-content">
|
||||
<div class="single-head-box">
|
||||
<div class="step-flow">
|
||||
<div class="step">输入 X</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">线性变换</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">Q, K, V</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">Scaled Dot-Product</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">输出</div>
|
||||
</div>
|
||||
<div class="arrow-down">↓ 拆解</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三层：Scaled Dot-Product Attention -->
|
||||
<div class="level-section">
|
||||
<div class="level-label">层级 3：Scaled Dot-Product Attention（核心）</div>
|
||||
<div class="level-content">
|
||||
<div class="dot-product-box">
|
||||
<div class="formula-steps">
|
||||
<div class="formula-step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">计算相似度</div>
|
||||
<div class="step-formula">Score = Q · K<sup>T</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula-step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">缩放</div>
|
||||
<div class="step-formula">Score / √d<sub>k</sub></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula-step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">归一化</div>
|
||||
<div class="step-formula">Attention Weights = Softmax(Score)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula-step">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">加权求和</div>
|
||||
<div class="step-formula">Output = Weights · V</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 组装说明 -->
|
||||
<div class="assembly-note">
|
||||
<div class="note-title">🔧 组装过程</div>
|
||||
<div class="note-content">
|
||||
<span class="note-item">Scaled Dot-Product</span>
|
||||
<span class="note-arrow">→</span>
|
||||
<span class="note-item">单个 Head</span>
|
||||
<span class="note-arrow">→</span>
|
||||
<span class="note-item">Multi-Head（8个并行）</span>
|
||||
<span class="note-arrow">→</span>
|
||||
<span class="note-item">Concat + Linear</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.decomp-title { font-size: 0.9rem; font-weight: bold; color: var(--vp-c-text-1); text-align: center; margin-bottom: 1rem; }
|
||||
.level-section { margin-bottom: 0.8rem; }
|
||||
.level-label { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-brand); background: var(--vp-c-brand-soft); padding: 0.3rem 0.6rem; border-radius: 4px; margin-bottom: 0.5rem; display: inline-block; }
|
||||
.level-content { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.multi-head-box { text-align: center; }
|
||||
.head-row { display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
|
||||
.head-item { font-size: 0.7rem; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.3rem 0.5rem; border-radius: 3px; color: var(--vp-c-text-2); }
|
||||
.arrow-down { font-size: 0.75rem; color: var(--vp-c-brand); font-weight: bold; margin-top: 0.3rem; }
|
||||
.single-head-box { text-align: center; }
|
||||
.step-flow { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
|
||||
.step { font-size: 0.7rem; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.3rem 0.5rem; border-radius: 3px; color: var(--vp-c-text-1); font-weight: 600; }
|
||||
.arrow { font-size: 0.75rem; color: var(--vp-c-text-3); }
|
||||
.dot-product-box { }
|
||||
.formula-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
|
||||
@media (max-width: 560px) { .formula-steps { grid-template-columns: 1fr; } }
|
||||
.formula-step { display: flex; gap: 0.4rem; background: var(--vp-c-bg-alt); padding: 0.5rem; border-radius: 4px; }
|
||||
.step-num { width: 24px; height: 24px; background: var(--vp-c-brand); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; flex-shrink: 0; }
|
||||
.step-content { flex: 1; }
|
||||
.step-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.step-formula { font-size: 0.7rem; font-family: 'Courier New', monospace; color: var(--vp-c-brand); }
|
||||
.assembly-note { background: var(--vp-c-bg); border: 2px dashed var(--vp-c-brand); border-radius: 6px; padding: 0.8rem; margin-top: 1rem; }
|
||||
.note-title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.5rem; text-align: center; }
|
||||
.note-content { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; }
|
||||
.note-item { font-size: 0.7rem; background: var(--vp-c-brand-soft); color: var(--vp-c-brand); padding: 0.25rem 0.5rem; border-radius: 3px; font-weight: 600; }
|
||||
.note-arrow { font-size: 0.75rem; color: var(--vp-c-brand); font-weight: bold; }
|
||||
</style>
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="heads-grid">
|
||||
<div v-for="head in heads" :key="head.id" class="head-card">
|
||||
<div class="head-name">{{ head.name }}</div>
|
||||
<div class="head-desc">{{ head.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">8 个头从不同角度理解语义，最后拼接融合</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const heads = [
|
||||
{ id: 1, name: '语法头', desc: '主谓宾关系' },
|
||||
{ id: 2, name: '语义头', desc: '词义关联' },
|
||||
{ id: 3, name: '位置头', desc: '距离关系' },
|
||||
{ id: 4, name: '指代头', desc: '代词消解' },
|
||||
{ id: 5, name: '情感头', desc: '情绪倾向' },
|
||||
{ id: 6, name: '实体头', desc: '命名实体' },
|
||||
{ id: 7, name: '修饰头', desc: '定状补' },
|
||||
{ id: 8, name: '全局头', desc: '整体语境' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.heads-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
|
||||
@media (max-width: 720px) { .heads-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
.head-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 0.5rem; text-align: center; }
|
||||
.head-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.head-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
|
||||
.summary { font-size: 0.75rem; color: var(--vp-c-text-2); text-align: center; font-style: italic; }
|
||||
</style>
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="pe-content">
|
||||
<div class="problem">
|
||||
<div class="title">问题：词序很重要</div>
|
||||
<div class="examples">
|
||||
<span class="ex">我爱你</span>
|
||||
<span class="vs">≠</span>
|
||||
<span class="ex">你爱我</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution">
|
||||
<div class="title">解决：位置编码</div>
|
||||
<div class="formula">Token Embedding + Positional Encoding</div>
|
||||
<div class="methods">
|
||||
<div class="method">正弦余弦（Transformer 原始）</div>
|
||||
<div class="method">可学习（BERT、GPT）</div>
|
||||
<div class="method">旋转编码 RoPE（LLaMA）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.pe-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
|
||||
@media (max-width: 560px) { .pe-content { grid-template-columns: 1fr; } }
|
||||
.problem, .solution { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.5rem; }
|
||||
.examples { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
|
||||
.ex { font-size: 0.9rem; font-weight: bold; color: var(--vp-c-text-1); }
|
||||
.vs { font-size: 1rem; color: var(--vp-c-brand); }
|
||||
.formula { background: var(--vp-c-brand-soft); border: 1px dashed var(--vp-c-brand); border-radius: 4px; padding: 0.5rem; font-size: 0.75rem; color: var(--vp-c-brand); text-align: center; margin-bottom: 0.5rem; font-family: monospace; }
|
||||
.methods { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.method { font-size: 0.7rem; color: var(--vp-c-text-2); background: var(--vp-c-bg-alt); padding: 0.3rem 0.5rem; border-radius: 3px; }
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="qkv-grid">
|
||||
<div class="qkv-item query">
|
||||
<div class="icon">🔍</div>
|
||||
<div class="name">Query</div>
|
||||
<div class="desc">我想找什么</div>
|
||||
</div>
|
||||
<div class="qkv-item key">
|
||||
<div class="icon">🔑</div>
|
||||
<div class="name">Key</div>
|
||||
<div class="desc">我是什么</div>
|
||||
</div>
|
||||
<div class="qkv-item value">
|
||||
<div class="icon">💎</div>
|
||||
<div class="name">Value</div>
|
||||
<div class="desc">我的内容</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula">
|
||||
Attention(Q, K, V) = softmax(QK<sup>T</sup> / √d<sub>k</sub>) V
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.qkv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.8rem; }
|
||||
@media (max-width: 560px) { .qkv-grid { grid-template-columns: 1fr; } }
|
||||
.qkv-item { background: var(--vp-c-bg); border: 2px solid; border-radius: 6px; padding: 0.7rem; text-align: center; }
|
||||
.qkv-item.query { border-color: #3b82f6; }
|
||||
.qkv-item.key { border-color: #059669; }
|
||||
.qkv-item.value { border-color: #7c3aed; }
|
||||
.icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
|
||||
.name { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.desc { font-size: 0.7rem; color: var(--vp-c-text-2); }
|
||||
.formula { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-brand); border-radius: 4px; padding: 0.6rem; text-align: center; font-size: 0.85rem; font-family: 'Courier New', monospace; color: var(--vp-c-brand); font-weight: bold; }
|
||||
</style>
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="comparison-grid">
|
||||
<div class="model-col">
|
||||
<div class="model-name">RNN / LSTM</div>
|
||||
<div class="model-desc">顺序处理：词1 → 词2 → 词3</div>
|
||||
<div class="issues">
|
||||
<div class="issue">❌ 长距离依赖衰减</div>
|
||||
<div class="issue">❌ 无法并行训练</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-col highlight">
|
||||
<div class="model-name">Transformer</div>
|
||||
<div class="model-desc">并行处理：所有词同时计算</div>
|
||||
<div class="benefits">
|
||||
<div class="benefit">✅ 全局注意力</div>
|
||||
<div class="benefit">✅ 高效并行</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
|
||||
@media (max-width: 560px) { .comparison-grid { grid-template-columns: 1fr; } }
|
||||
.model-col { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.model-col.highlight { border-color: var(--vp-c-brand); background: linear-gradient(135deg, var(--vp-c-bg), var(--vp-c-brand-soft)); }
|
||||
.model-name { font-size: 0.85rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.4rem; }
|
||||
.model-desc { font-size: 0.75rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; }
|
||||
.issues, .benefits { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.issue, .benefit { font-size: 0.7rem; }
|
||||
.issue { color: #dc2626; }
|
||||
.benefit { color: #059669; }
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="attention-demo">
|
||||
<div class="demo-title">自注意力示例：「他」关注「小明」</div>
|
||||
<div class="sentence">小明 把 苹果 给了 <span class="focus">他</span> 的 母亲</div>
|
||||
<div class="attention-bar">
|
||||
<div class="bar-item" v-for="item in weights" :key="item.word">
|
||||
<span class="word">{{ item.word }}</span>
|
||||
<div class="bar" :style="{ width: item.w * 100 + '%', background: getColor(item.w) }"></div>
|
||||
<span class="pct">{{ Math.round(item.w * 100) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">「他」把 65% 注意力投向「小明」，识别代词指代关系</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const weights = [
|
||||
{ word: '小明', w: 0.65 },
|
||||
{ word: '把', w: 0.05 },
|
||||
{ word: '苹果', w: 0.10 },
|
||||
{ word: '给了', w: 0.10 },
|
||||
{ word: '他', w: 0.05 },
|
||||
{ word: '的', w: 0.03 },
|
||||
{ word: '母亲', w: 0.02 },
|
||||
]
|
||||
|
||||
const getColor = (v) => v > 0.5 ? '#dc2626' : v > 0.15 ? '#d97706' : '#059669'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.attention-demo { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.demo-title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-2); margin-bottom: 0.5rem; }
|
||||
.sentence { font-size: 0.9rem; color: var(--vp-c-text-1); margin-bottom: 0.6rem; text-align: center; }
|
||||
.sentence .focus { color: var(--vp-c-brand); font-weight: bold; background: var(--vp-c-brand-soft); padding: 0.1rem 0.3rem; border-radius: 3px; }
|
||||
.attention-bar { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
|
||||
.bar-item { display: flex; align-items: center; gap: 0.3rem; }
|
||||
.word { width: 35px; text-align: right; font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-2); }
|
||||
.bar { height: 10px; border-radius: 5px; min-width: 2px; }
|
||||
.pct { font-size: 0.65rem; color: var(--vp-c-text-3); width: 30px; }
|
||||
.caption { font-size: 0.7rem; color: var(--vp-c-text-3); text-align: center; font-style: italic; }
|
||||
</style>
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="arch-layout">
|
||||
<!-- Encoder 侧 -->
|
||||
<div class="side-col">
|
||||
<div class="side-header encoder-header">Encoder（编码器）</div>
|
||||
<div class="layer-block">
|
||||
<div class="block-label">× N 层</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Multi-Head Self-Attention</div>
|
||||
<div class="comp-desc">捕获输入序列内部依赖</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Feed Forward Network</div>
|
||||
<div class="comp-desc">位置独立的非线性变换</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<div class="input-label">输入</div>
|
||||
<div class="input-desc">Token Embedding + Positional Encoding</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Decoder 侧 -->
|
||||
<div class="side-col">
|
||||
<div class="side-header decoder-header">Decoder（解码器）</div>
|
||||
<div class="output-box">
|
||||
<div class="output-label">输出</div>
|
||||
<div class="output-desc">Linear + Softmax → 概率分布</div>
|
||||
</div>
|
||||
<div class="layer-block">
|
||||
<div class="block-label">× N 层</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Masked Self-Attention</div>
|
||||
<div class="comp-desc">只看当前位置之前的词</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
<div class="component-box cross">
|
||||
<div class="comp-name">Cross-Attention</div>
|
||||
<div class="comp-desc">关注 Encoder 的输出</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Feed Forward Network</div>
|
||||
<div class="comp-desc">位置独立的非线性变换</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<div class="input-label">输出（移位）</div>
|
||||
<div class="input-desc">Token Embedding + Positional Encoding</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.arch-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
@media (max-width: 720px) { .arch-layout { grid-template-columns: 1fr; } }
|
||||
.side-col { display: flex; flex-direction: column; gap: 0.6rem; }
|
||||
.side-header { font-size: 0.85rem; font-weight: bold; text-align: center; padding: 0.5rem; border-radius: 6px; color: white; }
|
||||
.encoder-header { background: linear-gradient(135deg, #3b82f6, #2563eb); }
|
||||
.decoder-header { background: linear-gradient(135deg, #7c3aed, #6366f1); }
|
||||
.layer-block { background: var(--vp-c-bg); border: 2px solid var(--vp-c-divider); border-radius: 6px; padding: 0.7rem; position: relative; }
|
||||
.block-label { position: absolute; top: 0.3rem; right: 0.3rem; font-size: 0.65rem; color: var(--vp-c-text-3); background: var(--vp-c-bg-soft); padding: 0.15rem 0.4rem; border-radius: 3px; font-weight: bold; }
|
||||
.component-box { background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 0.5rem; margin-bottom: 0.4rem; }
|
||||
.component-box.cross { border-color: #d97706; background: linear-gradient(135deg, var(--vp-c-bg-alt), #fef3c7); }
|
||||
.comp-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.comp-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
|
||||
.norm-box { font-size: 0.68rem; color: var(--vp-c-text-3); text-align: center; padding: 0.25rem; background: var(--vp-c-bg-soft); border-radius: 3px; margin-bottom: 0.4rem; }
|
||||
.input-box, .output-box { background: var(--vp-c-brand-soft); border: 1px solid var(--vp-c-brand); border-radius: 4px; padding: 0.5rem; text-align: center; }
|
||||
.input-label, .output-label { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-brand); margin-bottom: 0.2rem; }
|
||||
.input-desc, .output-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
|
||||
</style>
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="quick-start-grid">
|
||||
<div class="qs-item" v-for="item in items" :key="item.icon">
|
||||
<div class="qs-icon">{{ item.icon }}</div>
|
||||
<div class="qs-title">{{ item.title }}</div>
|
||||
<div class="qs-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const items = [
|
||||
{ icon: '🔄', title: 'RNN 的困境', desc: '顺序处理，长距离依赖衰减' },
|
||||
{ icon: '⚡', title: 'Transformer 突破', desc: '并行计算，全局注意力' },
|
||||
{ icon: '🎯', title: '注意力机制', desc: '动态关注重要信息' },
|
||||
{ icon: '🚀', title: '大模型基石', desc: 'GPT、BERT 的核心架构' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.quick-start-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
|
||||
@media (max-width: 720px) { .quick-start-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
.qs-item { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 1rem; text-align: center; }
|
||||
.qs-icon { font-size: 2rem; margin-bottom: 0.5rem; }
|
||||
.qs-title { font-size: 0.85rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.3rem; }
|
||||
.qs-desc { font-size: 0.72rem; color: var(--vp-c-text-2); line-height: 1.4; }
|
||||
</style>
|
||||
@@ -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