delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sanbuphy
2026-01-18 10:24:35 +08:00
parent 82be39a9ac
commit 26ed39e1eb
44 changed files with 9868 additions and 2633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
+390 -247
View File
@@ -1,102 +1,109 @@
<template>
<div class="browser-rendering-demo">
<div class="control-bar">
<div class="step-indicator">Step: {{ currentStep + 1 }} / 4</div>
<div class="steps-nav">
<button
v-for="(step, index) in steps"
:key="index"
:class="{ active: currentStep === index }"
@click="currentStep = index"
>
{{ step.label }}
</button>
</div>
<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="workspace">
<!-- Left: Source Code -->
<div class="source-panel">
<div class="panel-label">HTML / CSS</div>
<div class="code-block">
<div class="line">&lt;div id="app"&gt;</div>
<div class="line indent">&lt;h1&gt;Hello&lt;/h1&gt;</div>
<div class="line indent">&lt;p&gt;World&lt;/p&gt;</div>
<div class="line">&lt;/div&gt;</div>
<div class="line mt-2">h1 { color: red; }</div>
<div class="stage-container">
<div class="stage-info">
<h3>{{ steps[currentStep].title }}</h3>
<p>{{ steps[currentStep].desc }}</p>
</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">&lt;!DOCTYPE html&gt;</div>
<div class="line" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'html' }" @mouseenter="hoveredPart = 'html'" @mouseleave="hoveredPart = null">&lt;html&gt;</div>
<div class="line indent" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'body' }" @mouseenter="hoveredPart = 'body'" @mouseleave="hoveredPart = null">&lt;body&gt;</div>
<div class="line indent-2" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'card' }" @mouseenter="hoveredPart = 'card'" @mouseleave="hoveredPart = null">&lt;div class="card"&gt;</div>
<div class="line indent-3" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'img' }" @mouseenter="hoveredPart = 'img'" @mouseleave="hoveredPart = null">&lt;img class="icon" src="castle.png" /&gt;</div>
<div class="line indent-3" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'title' }" @mouseenter="hoveredPart = 'title'" @mouseleave="hoveredPart = null">&lt;h2 class="title"&gt;乐高城堡&lt;/h2&gt;</div>
<div class="line indent-3" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'btn' }" @mouseenter="hoveredPart = 'btn'" @mouseleave="hoveredPart = null">&lt;button class="btn"&gt;购买&lt;/button&gt;</div>
<div class="line indent-2" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'card' }" @mouseenter="hoveredPart = 'card'" @mouseleave="hoveredPart = null">&lt;/div&gt;</div>
<div class="line indent" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'body' }" @mouseenter="hoveredPart = 'body'" @mouseleave="hoveredPart = null">&lt;/body&gt;</div>
<div class="line" :class="{ active: currentStep >= 0, hovered: hoveredPart === 'html' }" @mouseenter="hoveredPart = 'html'" @mouseleave="hoveredPart = null">&lt;/html&gt;</div>
<div class="spacer"></div>
<!-- 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">.card { display: flex; padding: 10px; }</div>
<div class="line" :class="{ active: currentStep === 2, hovered: hoveredPart === 'img' }" @mouseenter="hoveredPart = 'img'" @mouseleave="hoveredPart = null">.icon { width: 50px; height: 50px; }</div>
<!-- Style properties -->
<div class="line" :class="{ active: currentStep === 1 || currentStep === 3, hovered: hoveredPart === 'title' }" @mouseenter="hoveredPart = 'title'" @mouseleave="hoveredPart = null">.title { color: red; }</div>
<div class="line" :class="{ active: currentStep === 1 || currentStep === 3, hovered: hoveredPart === 'btn' }" @mouseenter="hoveredPart = 'btn'" @mouseleave="hoveredPart = null">.btn { background: blue; }</div>
</div>
</div>
<div class="transform-arrow">→</div>
<!-- Render Result -->
<div class="result-view">
<div class="window-title">{{ steps[currentStep].resultTitle }}</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.card</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.icon</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>
</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 v-if="currentStep === 2" class="overlay-info layout-info">
<div class="ruler">📏 正在排版 (Layout)...</div>
</div>
<div v-if="currentStep === 3" class="overlay-info paint-info">
<div class="paint">✨ 绘制完成 (Paint)!</div>
</div>
</div>
</div>
</div>
<!-- Arrow -->
<div class="arrow">→</div>
<!-- Right: Visualization -->
<div class="viz-panel">
<div class="panel-label">{{ steps[currentStep].title }}</div>
<transition name="fade" mode="out-in">
<!-- Step 1: DOM Tree -->
<div v-if="currentStep === 0" class="tree-viz">
<div class="node root">Document</div>
<div class="tree-lines">
<div class="line-v"></div>
</div>
<div class="node element">html</div>
<div class="tree-lines">
<div class="line-v"></div>
</div>
<div class="node element">body</div>
<div class="tree-children">
<div class="node element active">div#app</div>
<div class="tree-children row">
<div class="node element">h1</div>
<div class="node element">p</div>
</div>
</div>
</div>
<!-- Step 2: Render Tree -->
<div v-else-if="currentStep === 1" class="tree-viz render-tree">
<div class="node render-obj">RenderBlock (div)</div>
<div class="tree-children row">
<div class="node render-obj red">
RenderText (h1) <br /><small>color: red</small>
</div>
<div class="node render-obj">RenderText (p)</div>
</div>
</div>
<!-- Step 3: Layout -->
<div v-else-if="currentStep === 2" class="layout-viz">
<div class="layout-box root">
<span class="dims">100% x 100%</span>
<div class="layout-box container">
<span class="dims">div: 100% x auto</span>
<div class="layout-box item h1">h1: 100% x 32px (x:0, y:0)</div>
<div class="layout-box item p">p: 100% x 16px (x:0, y:32)</div>
</div>
</div>
</div>
<!-- Step 4: Paint -->
<div v-else-if="currentStep === 3" class="paint-viz">
<div class="browser-window">
<div class="painted-content">
<h1 style="color: red; margin: 0">Hello</h1>
<p style="margin: 0">World</p>
</div>
<div class="paint-layers">
<div class="layer-item">Layer 1: Background</div>
<div class="layer-item">Layer 2: Text</div>
</div>
</div>
</div>
</transition>
</div>
</div>
<div class="info-footer">
<p>{{ steps[currentStep].desc }}</p>
</div>
</div>
</template>
@@ -104,204 +111,340 @@
<script setup>
import { ref } from 'vue'
const currentStep = ref(0)
const steps = [
{
label: '1. DOM',
title: 'DOM Tree Construction',
desc: '浏览器解析 HTML 标记，构建 DOM (文档对象模型) 树。每个标签成为一个节点。'
label: 'DOM (搭骨架)',
title: '1. 搭建骨架 (DOM)',
desc: '浏览器工头 (Parser) 解析 HTML 代码，构建出完整的文档树结构。注意：即使代码中省略了 html/body，浏览器也会自动补全。',
resultTitle: 'DOM 树结构'
},
{
label: '2. Render Tree',
title: 'Render Tree Construction',
desc: '结合 DOM 和 CSSOM，生成渲染树。只有可见元素会被包含（display: none 的元素会被排除）。'
label: 'Style (上色)',
title: '2. 计算样式 (Recalculate Style)',
desc: '装修工 (CSS Parser) 匹配 CSS 规则。比如发现 .title 需要红色，.btn 需要蓝色背景。此时只关心"长什么样"，不关心"在哪"。',
resultTitle: '附带样式的节点'
},
{
label: '3. Layout',
title: 'Layout (Reflow)',
desc: '计算每个节点在屏幕上的确切位置和大小。这一步也叫"回流"。'
label: 'Layout (排版)',
title: '3. 布局排版 (Layout/Reflow)',
desc: '测量员 (Layout) 根据 display:flex 和 padding 等属性，计算每个盒子的精确位置和大小。图片在左，文字在右。',
resultTitle: '几何布局'
},
{
label: '4. Paint',
title: 'Painting & Composite',
desc: '将各个节点绘制到屏幕像素。现代浏览器会将不同部分绘制到不同图层，最后合成。'
label: 'Paint (绘制)',
title: '4. 像素绘制 (Paint)',
desc: '画家 (Paint) 按照计算好的位置和样式，真正把像素点画在屏幕上。最终你看到了一个完整的商品卡片。',
resultTitle: '最终画面'
}
]
const currentStep = ref(0)
const hoveredPart = ref(null)
</script>
<style scoped>
.browser-rendering-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
background-color: var(--vp-c-bg-soft);
padding: 1.5rem;
background: var(--vp-c-bg);
margin: 1rem 0;
font-family: var(--vp-font-family-mono);
overflow: hidden;
}
.control-bar {
.stepper {
display: flex;
justify-content: space-between;
background: var(--vp-c-bg-soft);
border-bottom: 1px solid var(--vp-c-divider);
}
.step-btn {
flex: 1;
padding: 1rem;
border: none;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1.5rem;
}
.steps-nav {
display: flex;
gap: 0.5rem;
}
.steps-nav button {
padding: 0.4rem 0.8rem;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
background: var(--vp-c-bg);
cursor: pointer;
font-size: 0.8rem;
position: relative;
transition: all 0.2s;
}
.steps-nav button.active {
.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);
}
.workspace {
display: flex;
gap: 1rem;
align-items: center;
height: 300px;
.stage-container {
padding: 1.5rem;
}
.source-panel,
.viz-panel {
flex: 1;
height: 100%;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
padding: 1rem;
display: flex;
flex-direction: column;
}
.panel-label {
font-weight: bold;
font-size: 0.8rem;
margin-bottom: 1rem;
color: var(--vp-c-text-2);
.stage-info {
margin-bottom: 2rem;
text-align: center;
}
.code-block {
font-family: monospace;
font-size: 0.8rem;
.stage-info h3 {
margin: 0 0 0.5rem 0;
color: var(--vp-c-text-1);
}
.line.indent {
padding-left: 1rem;
}
.line.mt-2 {
margin-top: 1rem;
}
.viz-panel {
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Visualization Styles */
.node {
padding: 0.5rem;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
background: var(--vp-c-bg-alt);
text-align: center;
font-size: 0.8rem;
margin: 0.2rem;
}
.node.active {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
}
.node.root {
background: #e5e7eb;
color: #374151;
}
.tree-viz {
display: flex;
flex-direction: column;
align-items: center;
}
.tree-children.row {
display: flex;
gap: 1rem;
}
.render-obj.red {
border-color: red;
color: red;
}
.layout-box {
border: 1px dashed var(--vp-c-text-3);
padding: 1rem;
position: relative;
}
.layout-box .dims {
position: absolute;
top: 2px;
right: 2px;
font-size: 0.6rem;
color: var(--vp-c-text-3);
}
.layout-box.container {
border-color: var(--vp-c-brand);
margin: 0.5rem;
}
.layout-box.item {
border-style: solid;
margin-bottom: 0.5rem;
background: var(--vp-c-bg-soft);
}
.painted-content {
background: white;
padding: 1rem;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
}
.paint-layers {
font-size: 0.7rem;
color: var(--vp-c-text-3);
}
.info-footer {
margin-top: 1.5rem;
padding: 1rem;
background: var(--vp-c-bg-alt);
border-radius: 6px;
.stage-info p {
margin: 0;
color: var(--vp-c-text-2);
font-size: 0.9rem;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
.visualization-window {
display: flex;
gap: 1rem;
align-items: stretch;
min-height: 400px;
}
.fade-enter-from,
.fade-leave-to {
.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: 1rem;
font-size: 0.8rem;
font-family: monospace;
overflow-y: auto;
}
.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);
}
.result-view {
background: white;
position: relative;
}
.render-canvas {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow-y: auto;
}
/* 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: red; /* Text color applied but not painted yet */
border: 1px solid red; /* Visual cue for style applied */
background: #fee2e2;
}
.block-box.btn.styled {
background: blue;
color: white;
border: 1px solid blue;
}
/* Step 3: Layout */
.block-box.card.layout {
display: flex;
flex-direction: row; /* Horizontal layout */
align-items: center;
gap: 10px;
padding: 15px;
background: white;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.block-box.img.layout {
width: 50px;
height: 50px;
background: #eee;
border: none;
}
.block-box.title.layout {
border: none;
background: transparent;
margin: 0;
padding: 0;
}
.block-box.btn.layout {
margin-left: auto; /* Push to right */
padding: 5px 15px;
border-radius: 4px;
}
/* Content visibility for Paint step */
.content, .content-img, .content-btn {
font-size: 1rem;
font-weight: bold;
animation: fadeIn 0.5s;
align-self: center;
}
.content-img { font-size: 2rem; }
.content-btn { font-size: 0.8rem; }
/* Overlay Info */
.overlay-info {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
text-align: center;
animation: bounceIn 0.5s;
pointer-events: none;
}
.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);
}
/* 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;
}
</style>