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

style: update border-radius and padding values across components

Browse Source 
- standardize border-radius from 8px to 6px for consistent styling
- adjust padding values from 1rem to 0.75rem for better visual hierarchy
- remove redundant overflow-y properties for cleaner code
This commit is contained in:
sanbuphy
2026-02-14 20:23:34 +08:00
parent 81e4284b87
commit d35211071a
373 changed files with 3441 additions and 5629 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue
+5 -5
View File
@@ -113,12 +113,12 @@ const commonSkills = [
<style scoped>
.bigfe-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
+6 -6
View File
@@ -339,9 +339,9 @@ const hoveredPart = ref(null)
<style scoped>
.browser-rendering-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
margin: 1rem 0;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
overflow: hidden;
}
@@ -354,7 +354,7 @@ const hoveredPart = ref(null)
.step-btn {
flex: 1;
padding: 1rem;
padding: 0.75rem;
border: none;
background: transparent;
display: flex;
@@ -453,10 +453,10 @@ const hoveredPart = ref(null)
}
.code-content {
padding: 1rem;
padding: 0.75rem;
font-size: 0.8rem;
font-family: monospace;
overflow-y: auto;
}
.line {
@@ -506,7 +506,7 @@ const hoveredPart = ref(null)
flex-direction: column;
align-items: center;
position: relative;
overflow-y: auto;
}
/* Blocks Animation */
docs/.vitepress/theme/components/appendix/web-basics/ComponentReusabilityDemo.vue
+3 -3
View File
@@ -89,17 +89,17 @@ const remove = (id) => {
<style scoped>
.component-reusability-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
overflow: hidden;
margin: 1rem 0;
margin: 0.5rem 0;
display: flex;
flex-direction: column;
}
.toolbox {
background: var(--vp-c-bg-soft);
padding: 1rem;
padding: 0.75rem;
border-bottom: 1px solid var(--vp-c-divider);
display: flex;
gap: 1rem;
docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue
+155 -224
View File
@@ -1,94 +1,71 @@
<!--
CssBoxModel.vue
盒模型速懂：三根滑杆 + 颜色区分，实时显示总宽高、渲染顺序提示和 CSS 片段。
-->
<template>
<div class="box-demo">
<div class="demo-header">
<span class="icon">📦</span>
<span class="title">CSS 盒模型</span>
<span class="subtitle">理解元素尺寸的构成（通俗说：盒子的四层包装）</span>
<span class="subtitle">理解元素尺寸的构成</span>
</div>
<div class="controls">
<div class="control-item">
<div class="control-header">
<label>Padding (内边距)</label>
<span class="val">{{ padding }}px</span>
<div class="main-area">
<div class="left-panel">
<div class="controls">
<div class="control-row">
<label>Padding</label>
<input type="range" min="0" max="30" v-model.number="padding" />
<span class="val">{{ padding }}px</span>
</div>
<div class="control-row">
<label>Border</label>
<input type="range" min="0" max="20" v-model.number="border" />
<span class="val">{{ border }}px</span>
</div>
<div class="control-row">
<label>Margin</label>
<input type="range" min="0" max="30" v-model.number="margin" />
<span class="val">{{ margin }}px</span>
</div>
</div>
<input type="range" min="0" max="50" v-model.number="padding" />
</div>
<div class="control-item">
<div class="control-header">
<label>Border (边框)</label>
<span class="val">{{ border }}px</span>
</div>
<input type="range" min="0" max="30" v-model.number="border" />
</div>
<div class="control-item">
<div class="control-header">
<label>Margin (外边距)</label>
<span class="val">{{ margin }}px</span>
</div>
<input type="range" min="0" max="50" v-model.number="margin" />
</div>
</div>
<div class="stage-container">
<div class="stage-scroll">
<div class="layer margin" :style="{ padding: margin + 'px' }">
<span class="layer-label" v-if="margin >= 15">Margin</span>
<div class="layer border" :style="{ borderWidth: border + 'px' }">
<span class="layer-label" v-if="border >= 10">Border</span>
<div class="layer padding" :style="{ padding: padding + 'px' }">
<span class="layer-label" v-if="padding >= 15">Padding</span>
<div class="content">
<div class="content-inner">
内容区<br />
{{ contentW }} × {{ contentH }}
</div>
<div class="visual">
<div class="layer margin" :style="{ padding: margin + 'px' }">
<span class="label" v-if="margin >= 10">Margin</span>
<div class="layer border" :style="{ borderWidth: border + 'px' }">
<span class="label" v-if="border >= 8">Border</span>
<div class="layer padding" :style="{ padding: padding + 'px' }">
<span class="label" v-if="padding >= 10">Padding</span>
<div class="content">内容</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="meta">
<div class="meta-row main">
<span class="meta-label">总占用宽度：</span>
<span class="meta-value">{{ total }}px</span>
</div>
<div class="meta-detail">
<div class="detail-item">
<span class="detail-label">渲染顺序</span>
<span class="detail-text">内容 → Padding → Border → Margin</span>
<div class="right-panel">
<div class="result">
<div class="result-row">
<span class="result-label">总宽度：</span>
<span class="result-value">{{ total }}px</span>
</div>
<div class="formula">= {{ margin }}×2 + {{ border }}×2 + {{ padding }}×2 + {{ contentW }}</div>
</div>
<div class="detail-item">
<span class="detail-label">计算公式</span>
<span class="detail-text"
>Margin(×2) + Border(×2) + Padding(×2) + 内容宽</span
>
<div class="code-block">
<div class="code-title">CSS</div>
<div class="code-content">
<div class="line">.box {</div>
<div class="line"> width: {{ contentW }}px;</div>
<div class="line"> padding: {{ padding }}px;</div>
<div class="line"> border: {{ border }}px solid;</div>
<div class="line"> margin: {{ margin }}px;</div>
<div class="line">}</div>
</div>
</div>
</div>
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>每个元素都是一个"盒子"，从内到外依次是：内容区 → 内边距 → 边框 → 外边距。
</div>
<div class="code-block">
<div class="code-title">CSS 代码片段</div>
<div class="code-content">
<div class="line">.box {</div>
<div class="line">width: {{ contentW }}px;</div>
<div class="line">height: {{ contentH }}px;</div>
<div class="line">padding: {{ padding }}px;</div>
<div class="line">border: {{ border }}px solid #0ea5e9;</div>
<div class="line">margin: {{ margin }}px;</div>
<div class="line">}</div>
</div>
<strong>核心思想：</strong>元素实际占用宽度 = 内容宽 + padding×2 + border×2 + margin×2
</div>
</div>
</template>
@@ -96,11 +73,10 @@
<script setup>
import { computed, ref } from 'vue'
const contentW = 120
const contentH = 80
const padding = ref(20)
const border = ref(10)
const margin = ref(20)
const contentW = 80
const padding = ref(15)
const border = ref(8)
const margin = ref(15)
const total = computed(
() => margin.value * 2 + border.value * 2 + padding.value * 2 + contentW
@@ -110,15 +86,10 @@ const total = computed(
<style scoped>
.box-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -128,227 +99,192 @@ const total = computed(
margin-bottom: 0.75rem;
}
.demo-header .icon {
font-size: 1.25rem;
.demo-header .icon { font-size: 1.25rem; }
.demo-header .title { font-weight: bold; font-size: 1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
.main-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 0.75rem;
}
.demo-header .title {
font-weight: bold;
font-size: 1rem;
@media (max-width: 768px) {
.main-area { grid-template-columns: 1fr; }
}
.demo-header .subtitle {
color: var(--vp-c-text-2);
font-size: 0.85rem;
margin-left: 0.5rem;
.left-panel {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.control-item {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
gap: 0.4rem;
}
.control-header {
.control-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
label {
font-weight: 700;
color: var(--vp-c-text-1);
}
.val {
font-family: var(--vp-font-family-mono);
color: var(--vp-c-brand);
font-weight: 600;
}
input[type='range'] {
width: 100%;
accent-color: var(--vp-c-brand);
cursor: pointer;
}
.stage-container {
gap: 0.5rem;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 20px;
border-radius: 6px;
padding: 0.4rem 0.6rem;
}
.control-row label {
font-size: 0.8rem;
font-weight: 600;
min-width: 55px;
color: var(--vp-c-text-1);
}
.control-row input[type='range'] {
flex: 1;
height: 4px;
accent-color: var(--vp-c-brand);
}
.control-row .val {
font-family: var(--vp-font-family-mono);
font-size: 0.75rem;
color: var(--vp-c-brand);
min-width: 35px;
text-align: right;
}
.visual {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
padding: 0.75rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.stage-scroll {
overflow: auto;
max-width: 100%;
padding: 10px; /* space for scrollbar if needed */
}
.layer {
position: relative;
border-radius: 4px;
transition: all 0.2s ease-out;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.layer-label {
.layer .label {
position: absolute;
top: 2px;
left: 4px;
font-size: 10px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
opacity: 0.7;
pointer-events: none;
}
/* Margin Layer */
.margin {
background-color: #f9fafb; /* gray-50 */
border: 1px dashed #d1d5db; /* gray-300 */
color: #6b7280;
}
.margin > .layer-label {
color: #6b7280;
background: var(--vp-c-bg-soft);
border: 1px dashed var(--vp-c-divider);
}
.margin .label { color: var(--vp-c-text-3); }
/* Border Layer */
.border {
background-color: #e0f2fe; /* sky-100 */
background: var(--vp-c-brand-soft);
border-style: solid;
border-color: #7dd3fc; /* sky-300 */
color: #0284c7;
}
.border > .layer-label {
color: #0284c7;
border-color: var(--vp-c-brand);
}
.border .label { color: var(--vp-c-brand-1); }
/* Padding Layer */
.padding {
background-color: #dbeafe; /* blue-100 */
border: 1px dashed #93c5fd; /* blue-300 */
color: #2563eb;
}
.padding > .layer-label {
color: #2563eb;
background: var(--vp-c-bg-alt);
border: 1px dashed var(--vp-c-divider);
}
.padding .label { color: var(--vp-c-text-2); }
/* Content Box */
.content {
background: var(--vp-c-brand);
color: #fff;
border-radius: 4px;
font-weight: 700;
font-size: 0.75rem;
width: 80px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
width: 120px;
height: 80px;
flex-shrink: 0;
}
.content-inner {
text-align: center;
font-size: 13px;
line-height: 1.4;
}
.meta {
.right-panel {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: var(--vp-c-bg-alt);
border-radius: 8px;
border: 1px solid var(--vp-c-divider);
gap: 0.5rem;
}
.meta-row.main {
.result {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
padding: 0.6rem;
}
.result-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
gap: 0.5rem;
}
.meta-value {
.result-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--vp-c-text-1);
}
.result-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--vp-c-brand);
}
.meta-detail {
display: flex;
flex-direction: column;
gap: 6px;
}
.detail-item {
display: flex;
gap: 12px;
font-size: 13px;
align-items: flex-start;
}
.detail-label {
color: var(--vp-c-text-2);
min-width: 60px;
flex-shrink: 0;
}
.detail-text {
color: var(--vp-c-text-1);
.formula {
font-family: var(--vp-font-family-mono);
font-size: 0.75rem;
color: var(--vp-c-text-2);
margin-top: 0.25rem;
}
.code-block {
background: var(--vp-c-bg-alt);
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 10px;
padding: 16px;
border-radius: 6px;
padding: 0.6rem;
flex: 1;
}
.code-title {
font-weight: 700;
margin-bottom: 8px;
font-size: 13px;
font-size: 0.75rem;
font-weight: 600;
color: var(--vp-c-text-2);
margin-bottom: 0.4rem;
}
.code-content {
background: #0b1221;
color: #e5e7eb;
border-radius: 8px;
padding: 16px;
border-radius: 4px;
padding: 0.5rem;
font-family: var(--vp-font-family-mono);
font-size: 13px;
overflow-x: auto;
line-height: 1.6;
font-size: 0.7rem;
line-height: 1.5;
}
.line {
white-space: pre;
}
.line { white-space: pre; }
.info-box {
background: var(--vp-c-bg-alt);
padding: 0.75rem;
padding: 0.6rem;
border-radius: 6px;
font-size: 0.85rem;
color: var(--vp-c-text-2);
@@ -356,11 +292,6 @@ input[type='range'] {
gap: 0.25rem;
}
.info-box .icon {
flex-shrink: 0;
}
.info-box strong {
color: var(--vp-c-text-1);
}
.info-box .icon { flex-shrink: 0; }
.info-box strong { color: var(--vp-c-text-1); }
</style>
docs/.vitepress/theme/components/appendix/web-basics/CssCommonProperties.vue
+3 -3
View File
@@ -135,7 +135,7 @@ const categories = [
desc: '圆角',
categoryLabel: '边框',
fullDesc: '让盒子的角变圆润。现在的按钮通常都有点圆角。',
example: 'border-radius: 8px;'
example: 'border-radius: 6px;'
},
{
name: 'box-shadow',
@@ -194,7 +194,7 @@ const categories = [
<style scoped>
.css-props-ref {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 20px;
margin: 20px 0;
@@ -264,7 +264,7 @@ const categories = [
margin-top: 20px;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
animation: fadeIn 0.3s ease;
}
docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue
+81 -123
View File
@@ -1,21 +1,15 @@
<!--
CssFlexbox.vue
Flex 布局速学：三个按钮控制方向/对齐/换行，实时看盒子怎么排
-->
<template>
<div class="flex-demo">
<div class="demo-header">
<span class="icon">📐</span>
<span class="title">Flex 布局</span>
<span class="subtitle">一行代码搞定排列对齐（通俗说：自动排版）</span>
<span class="subtitle">一行代码搞定排列对齐</span>
</div>
<div class="demo-content">
<div class="main-area">
<div class="controls">
<div class="control-item">
<div class="control-header">
<label>主轴方向 (flex-direction)</label>
</div>
<div class="control-group">
<label>方向</label>
<div class="chips">
<button
v-for="d in directions"
@@ -27,10 +21,8 @@
</button>
</div>
</div>
<div class="control-item">
<div class="control-header">
<label>主轴对齐 (justify-content)</label>
</div>
<div class="control-group">
<label>对齐</label>
<div class="chips">
<button
v-for="j in justifies"
@@ -42,10 +34,8 @@
</button>
</div>
</div>
<div class="control-item">
<div class="control-header">
<label>是否换行 (flex-wrap)</label>
</div>
<div class="control-group">
<label>换行</label>
<div class="chips">
<button
v-for="w in wraps"
@@ -59,28 +49,21 @@
</div>
</div>
<div class="canvas-container">
<div class="preview-area">
<div class="canvas" :style="boxStyle">
<div v-for="n in 6" :key="n" class="item">{{ n }}</div>
</div>
</div>
<div class="code-block">
<div class="code-title">CSS 代码片段</div>
<div class="code-content">
<div class="line">.container {</div>
<div class="line">display: flex;</div>
<div class="line">flex-direction: {{ dir }};</div>
<div class="line">justify-content: {{ justify }};</div>
<div class="line">flex-wrap: {{ wrap }};</div>
<div class="line">}</div>
<div v-for="n in 4" :key="n" class="item">{{ n }}</div>
</div>
</div>
</div>
<div class="code-row">
<div class="code-label">CSS：</div>
<code class="code-text">display: flex; flex-direction: {{ dir }}; justify-content: {{ justify }}; flex-wrap: {{ wrap }};</code>
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>Flex 让元素自动排列，不用手动计算位置。就像书架上的书，会自动对齐。
<strong>核心思想：</strong>Flex 让元素自动排列，就像书架上的书会自动对齐一样。
</div>
</div>
</template>
@@ -89,17 +72,17 @@
import { computed, ref } from 'vue'
const directions = [
{ id: 'row', label: '水平 (row)' },
{ id: 'column', label: '垂直 (column)' }
{ id: 'row', label: '水平' },
{ id: 'column', label: '垂直' }
]
const justifies = [
{ id: 'flex-start', label: '靠左/上' },
{ id: 'flex-start', label: '靠左' },
{ id: 'center', label: '居中' },
{ id: 'space-between', label: '两端对齐' }
{ id: 'space-between', label: '两端' }
]
const wraps = [
{ id: 'nowrap', label: '不换行' },
{ id: 'wrap', label: '可换行' }
{ id: 'wrap', label: '换行' }
]
const dir = ref('row')
@@ -111,21 +94,19 @@ const boxStyle = computed(() => ({
flexDirection: dir.value,
justifyContent: justify.value,
flexWrap: wrap.value,
gap: '12px',
minHeight: '180px',
padding: '16px'
gap: '8px',
minHeight: dir.value === 'column' ? '140px' : '60px',
padding: '12px'
}))
</script>
<style scoped>
.flex-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -135,136 +116,118 @@ const boxStyle = computed(() => ({
margin-bottom: 0.75rem;
}
.demo-header .icon {
font-size: 1.25rem;
.demo-header .icon { font-size: 1.25rem; }
.demo-header .title { font-weight: bold; font-size: 1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
.main-area {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
margin-bottom: 0.75rem;
}
.demo-header .title {
font-weight: bold;
font-size: 1rem;
}
.demo-header .subtitle {
color: var(--vp-c-text-2);
font-size: 0.85rem;
margin-left: 0.5rem;
}
.demo-content {
margin-bottom: 0.5rem;
@media (max-width: 640px) {
.main-area { grid-template-columns: 1fr; }
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.control-item {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.control-header label {
.control-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.control-group label {
font-size: 0.75rem;
font-weight: 600;
color: var(--vp-c-text-1);
font-size: 0.8rem;
color: var(--vp-c-text-2);
}
.chips {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
gap: 0.25rem;
}
.chip {
padding: 0.25rem 0.75rem;
border-radius: 6px;
padding: 0.25rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-alt);
background: var(--vp-c-bg);
cursor: pointer;
font-size: 0.8rem;
font-size: 0.75rem;
transition: all 0.2s;
}
.chip:hover {
background: var(--vp-c-bg-soft);
}
.chip:hover { background: var(--vp-c-bg-soft); }
.chip.active {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
background: var(--vp-c-brand-soft);
font-weight: 600;
}
.canvas-container {
.preview-area {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 0.25rem;
margin-bottom: 1rem;
border-radius: 6px;
overflow: hidden;
}
.canvas {
background: var(--vp-c-bg);
border-radius: 6px;
background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
background-size: 20px 20px;
background-size: 16px 16px;
border-radius: 6px;
transition: all 0.3s;
}
.item {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
border-radius: 6px;
background: var(--vp-c-brand);
color: #fff;
font-weight: 700;
display: grid;
place-items: center;
font-size: 16px;
transition: all 0.3s;
font-size: 14px;
flex-shrink: 0;
}
.code-block {
background: var(--vp-c-bg-alt);
.code-row {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
padding: 0.5rem 0.75rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.code-title {
font-weight: 600;
margin-bottom: 0.5rem;
.code-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--vp-c-text-2);
}
.code-content {
background: var(--vp-c-bg);
color: var(--vp-c-text-1);
border-radius: 6px;
padding: 0.75rem;
.code-text {
font-family: var(--vp-font-family-mono);
font-size: 0.75rem;
overflow-x: auto;
line-height: 1.6;
}
.line {
white-space: pre;
color: var(--vp-c-text-1);
background: var(--vp-c-bg-alt);
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
.info-box {
background: var(--vp-c-bg-alt);
padding: 0.75rem;
padding: 0.6rem;
border-radius: 6px;
font-size: 0.85rem;
color: var(--vp-c-text-2);
@@ -272,11 +235,6 @@ const boxStyle = computed(() => ({
gap: 0.25rem;
}
.info-box .icon {
flex-shrink: 0;
}
.info-box strong {
color: var(--vp-c-text-1);
}
.info-box .icon { flex-shrink: 0; }
.info-box strong { color: var(--vp-c-text-1); }
</style>
docs/.vitepress/theme/components/appendix/web-basics/CssLayoutDemo.vue
+4 -4
View File
@@ -183,7 +183,7 @@ const getItemColor = (n) => {
<style scoped>
.layout-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 20px;
margin: 20px 0;
@@ -237,7 +237,7 @@ const getItemColor = (n) => {
.preview-area {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
height: 200px;
margin-bottom: 16px;
overflow: hidden;
@@ -260,7 +260,7 @@ const getItemColor = (n) => {
justify-content: center;
color: white;
font-weight: bold;
border-radius: 8px;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
@@ -268,7 +268,7 @@ const getItemColor = (n) => {
.code-display {
background: #1e293b;
padding: 16px;
border-radius: 8px;
border-radius: 6px;
color: #e2e8f0;
font-family: monospace;
font-size: 13px;
docs/.vitepress/theme/components/appendix/web-basics/CssPlaygroundDemo.vue
+3 -3
View File
@@ -89,7 +89,7 @@ const borderColor = ref('#000000')
<style scoped>
.css-playground {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 20px;
margin: 20px 0;
@@ -101,7 +101,7 @@ const borderColor = ref('#000000')
.demo-box {
background: var(--vp-c-bg);
border: 1px dashed var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
height: 150px;
display: flex;
align-items: center;
@@ -168,7 +168,7 @@ input[type='color'] {
.code-preview {
background: #1e1e1e;
border-radius: 8px;
border-radius: 6px;
padding: 16px;
color: #d4d4d4;
font-family: var(--vp-font-family-mono);
docs/.vitepress/theme/components/appendix/web-basics/CssSelectorsDemo.vue
+1 -1
View File
@@ -103,7 +103,7 @@ const activeType = ref(null)
<style scoped>
.selectors-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 20px;
margin: 20px 0;
docs/.vitepress/theme/components/appendix/web-basics/DeploymentArchitecture.vue
+4 -4
View File
@@ -238,7 +238,7 @@ const views = [
<style scoped>
.deployment-architecture {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
background: var(--vp-c-bg-soft);
margin: 20px 0;
@@ -246,7 +246,7 @@ const views = [
.architecture-view {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
}
@@ -314,7 +314,7 @@ const views = [
.origin-node {
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-brand);
border-radius: 8px;
border-radius: 6px;
padding: 15px;
text-align: center;
margin: 0 auto;
@@ -418,7 +418,7 @@ const views = [
.info-card {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
border-left: 4px solid var(--vp-c-brand);
}
docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue
+4 -4
View File
@@ -46,16 +46,16 @@ defineProps({
<style scoped>
.dns-lookup-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
padding: 1.5rem;
margin: 1rem 0;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
.concept-explanation {
background: var(--vp-c-bg-soft);
padding: 1rem;
padding: 0.75rem;
border-radius: 6px;
margin-bottom: 2rem;
}
@@ -104,7 +104,7 @@ defineProps({
.fake-output {
background: var(--vp-c-bg-alt);
padding: 0.8rem;
border-radius: 8px;
border-radius: 6px;
font-size: 1.2rem;
font-weight: bold;
border: 2px solid var(--vp-c-divider);
docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue
+118 -102
View File
@@ -1,44 +1,48 @@
<!--
DomManipulator.vue
DOM 操作速体验：输入标题+切换高亮类，直观看到文本和样式变化
-->
<template>
<div class="dom-demo">
<div class="demo-header">
<span class="icon">🎯</span>
<span class="title">DOM 操作</span>
<span class="subtitle">网页内容的动态修改（通俗说：用代码改页面）</span>
<span class="subtitle">用代码动态修改页面</span>
</div>
<div class="demo-content">
<div class="controls">
<div class="field">
<label>改个标题</label>
<input v-model="title" placeholder="输入新标题" />
<div class="main-area">
<div class="left-panel">
<div class="controls">
<div class="field">
<label>修改标题</label>
<input v-model="title" placeholder="输入新标题" />
</div>
<label class="checkbox">
<input type="checkbox" v-model="highlight" />
高亮模式
</label>
</div>
<div class="field checkbox">
<label><input type="checkbox" v-model="highlight" /> 高亮模式 (class="highlight")</label>
<div class="card" :class="{ highlight }">
<h2>{{ title }}</h2>
<p>这里是段落说明，勾选高亮看看变化。</p>
<button @click="toggleText">{{ buttonText }}</button>
</div>
</div>
<div class="card" :class="{ highlight }">
<h2 id="hero">{{ title }}</h2>
<p id="desc">这里是段落说明，勾选高亮看看变化。</p>
<button @click="toggleText">{{ buttonText }}</button>
<div class="right-panel">
<div class="code-block">
<div class="code-title">JavaScript</div>
<div class="code-content">
<div class="line">// 改内容</div>
<div class="line">titleEl.textContent = '{{ title }}'</div>
<div class="line"></div>
<div class="line">// 切换 class</div>
<div class="line">card.classList.toggle('highlight', {{ highlight }})</div>
</div>
</div>
</div>
<pre class="code"><code>// JS 改内容
const titleEl = document.getElementById('hero')
titleEl.textContent = '{{ title }}'
// JS 切 class
const card = document.querySelector('.card')
card.classList.toggle('highlight', {{ highlight }})</code></pre>
</div>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>DOM 是网页的"乐高积木"，JavaScript 可以随时添加、删除、修改这些积木。
<strong>核心思想：</strong>DOM 是网页的"乐高积木"，JS 可以随时添加、删除、修改这些积木。
</div>
</div>
</template>
@@ -58,12 +62,10 @@ const toggleText = () => {
<style scoped>
.dom-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -73,127 +75,146 @@ const toggleText = () => {
margin-bottom: 0.75rem;
}
.demo-header .icon {
font-size: 1.25rem;
}
.demo-header .icon { font-size: 1.25rem; }
.demo-header .title { font-weight: bold; font-size: 1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
.demo-header .title {
font-weight: bold;
font-size: 1rem;
}
.demo-header .subtitle {
color: var(--vp-c-text-2);
font-size: 0.85rem;
margin-left: 0.5rem;
}
.demo-content {
margin-bottom: 0.5rem;
}
.controls {
.main-area {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
margin-bottom: 1rem;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 0.75rem;
}
.field {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 0.75rem;
@media (max-width: 640px) {
.main-area { grid-template-columns: 1fr; }
}
.left-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.controls {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.field {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
padding: 0.4rem 0.6rem;
}
.field label {
font-size: 0.8rem;
font-weight: 600;
color: var(--vp-c-text-2);
}
.field input[type='text'] {
border: none;
background: transparent;
color: var(--vp-c-text-1);
font-size: 0.85rem;
outline: none;
width: 120px;
}
.checkbox {
flex-direction: row;
display: flex;
align-items: center;
gap: 0.5rem;
}
input[type='text'] {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
background: var(--vp-c-bg);
gap: 0.4rem;
font-size: 0.8rem;
color: var(--vp-c-text-1);
cursor: pointer;
}
input[type='text']:focus {
outline: none;
border-color: var(--vp-c-brand);
}
input[type='checkbox'] {
.checkbox input {
accent-color: var(--vp-c-brand);
}
.card {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
background: var(--vp-c-bg);
transition: all 0.2s;
margin-bottom: 1rem;
}
.card.highlight {
border-color: var(--vp-c-warning);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: var(--vp-c-bg-soft);
}
.card h2 {
margin: 0 0 0.5rem 0;
margin: 0 0 0.25rem 0;
color: var(--vp-c-text-1);
font-size: 0.95rem;
}
.card p {
margin: 0 0 0.75rem 0;
margin: 0 0 0.5rem 0;
color: var(--vp-c-text-2);
font-size: 0.9rem;
font-size: 0.8rem;
}
.card button {
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 6px;
padding: 0.5rem 1rem;
border-radius: 4px;
padding: 0.35rem 0.75rem;
cursor: pointer;
font-size: 0.85rem;
font-size: 0.8rem;
transition: opacity 0.2s;
}
.card button:hover {
opacity: 0.9;
.card button:hover { opacity: 0.9; }
.right-panel {
display: flex;
flex-direction: column;
}
.code {
background: var(--vp-c-bg-alt);
color: var(--vp-c-text-1);
border-radius: 8px;
padding: 0.75rem;
font-family: var(--vp-font-family-mono);
font-size: 0.75rem;
overflow-x: auto;
line-height: 1.6;
.code-block {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
padding: 0.6rem;
height: 100%;
}
.code-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--vp-c-text-2);
margin-bottom: 0.4rem;
}
.code-content {
background: #0b1221;
color: #e5e7eb;
border-radius: 4px;
padding: 0.5rem;
font-family: var(--vp-font-family-mono);
font-size: 0.7rem;
line-height: 1.5;
}
.line { white-space: pre; }
.info-box {
background: var(--vp-c-bg-alt);
padding: 0.75rem;
padding: 0.6rem;
border-radius: 6px;
font-size: 0.85rem;
color: var(--vp-c-text-2);
@@ -201,11 +222,6 @@ input[type='checkbox'] {
gap: 0.25rem;
}
.info-box .icon {
flex-shrink: 0;
}
.info-box strong {
color: var(--vp-c-text-1);
}
.info-box .icon { flex-shrink: 0; }
.info-box strong { color: var(--vp-c-text-1); }
</style>
docs/.vitepress/theme/components/appendix/web-basics/FrontendEvolutionDemo.vue
+2 -2
View File
@@ -482,7 +482,7 @@ export default {
}
.editor-content {
padding: 1rem;
padding: 0.75rem;
overflow: auto;
flex: 1;
}
@@ -515,7 +515,7 @@ export default {
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.8rem 1.2rem;
border-radius: 8px;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
font-weight: 600;
font-size: 0.9rem;
docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue
+4 -4
View File
@@ -192,9 +192,9 @@ const statusClass = computed(() => {
<style scoped>
.http-exchange-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
margin: 1rem 0;
margin: 0.5rem 0;
font-family:
system-ui,
-apple-system,
@@ -338,8 +338,8 @@ html.dark .log-row.selected {
.tab-content {
flex: 1;
overflow-y: auto;
padding: 1rem;
padding: 0.75rem;
}
.section {
docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
+6 -6
View File
@@ -128,12 +128,12 @@ const decIncrement = () => {
<style scoped>
.imperative-declarative-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -177,7 +177,7 @@ const decIncrement = () => {
.panel {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
docs/.vitepress/theme/components/appendix/web-basics/JQueryVsStateDemo.vue
+2 -2
View File
@@ -208,7 +208,7 @@ const resetAll = () => {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
border-radius: 12px;
padding: 1rem;
padding: 0.75rem;
}
.pane-title {
@@ -359,7 +359,7 @@ const resetAll = () => {
color: var(--vp-c-text-2);
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.35rem 0.5rem;
}
docs/.vitepress/theme/components/appendix/web-basics/NetworkLayers.vue
+4 -4
View File
@@ -151,7 +151,7 @@ const layers = [
<style scoped>
.network-layers {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
background: var(--vp-c-bg-soft);
margin: 20px 0;
@@ -170,7 +170,7 @@ const layers = [
gap: 15px;
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 15px;
cursor: pointer;
transition: all 0.3s;
@@ -228,7 +228,7 @@ const layers = [
.layer-detail {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
border-left: 4px solid var(--vp-c-brand);
@@ -277,7 +277,7 @@ const layers = [
.data-flow {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
docs/.vitepress/theme/components/appendix/web-basics/NetworkTroubleshooting.vue
+8 -8
View File
@@ -356,7 +356,7 @@ const toggleStep = (index) => {
<style scoped>
.network-troubleshooting {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
background: var(--vp-c-bg-soft);
margin: 20px 0;
@@ -364,7 +364,7 @@ const toggleStep = (index) => {
.problem-selector {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
}
@@ -388,7 +388,7 @@ const toggleStep = (index) => {
gap: 10px;
padding: 12px 15px;
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
cursor: pointer;
transition: all 0.2s;
@@ -420,7 +420,7 @@ const toggleStep = (index) => {
.solution-panel {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
}
@@ -465,7 +465,7 @@ const toggleStep = (index) => {
gap: 15px;
padding: 15px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
border-left: 3px solid var(--vp-c-divider);
cursor: pointer;
transition: all 0.2s;
@@ -545,7 +545,7 @@ const toggleStep = (index) => {
.related-tools {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 15px;
}
@@ -584,7 +584,7 @@ const toggleStep = (index) => {
.common-commands {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
}
@@ -632,7 +632,7 @@ const toggleStep = (index) => {
.troubleshooting-tips {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
border-left: 4px solid var(--vp-c-brand);
}
docs/.vitepress/theme/components/appendix/web-basics/ResponsiveGridDemo.vue
+1 -1
View File
@@ -102,7 +102,7 @@ const gridStyle = computed(() => ({
.card {
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
font-size: 0.9rem;
text-align: center;
docs/.vitepress/theme/components/appendix/web-basics/RoutingModeDemo.vue
+2 -2
View File
@@ -125,7 +125,7 @@ const navigate = (page) => {
background: var(--vp-c-brand);
color: white;
padding: 0.35rem 0.7rem;
border-radius: 8px;
border-radius: 6px;
font-size: 0.85rem;
cursor: pointer;
}
@@ -134,7 +134,7 @@ const navigate = (page) => {
margin-top: 1rem;
border: 1px dashed var(--vp-c-divider);
border-radius: 10px;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg);
min-height: 60px;
display: flex;
docs/.vitepress/theme/components/appendix/web-basics/SemanticTagsDemo.vue
+2 -2
View File
@@ -168,7 +168,7 @@ pre {
margin: 0;
background: #0b1221;
color: #e5e7eb;
border-radius: 8px;
border-radius: 6px;
padding: 10px;
font-family: var(--vp-font-family-mono);
font-size: 13px;
@@ -177,7 +177,7 @@ pre {
.preview-box {
border: 1px dashed var(--vp-c-divider);
padding: 16px;
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
}
.tip {
docs/.vitepress/theme/components/appendix/web-basics/SpaStatePreservationDemo.vue
+4 -4
View File
@@ -199,7 +199,7 @@ const reasonText = computed(() =>
border: 1px dashed var(--vp-c-divider);
border-radius: 12px;
background: var(--vp-c-bg);
padding: 1rem;
padding: 0.75rem;
}
.nav {
@@ -213,7 +213,7 @@ const reasonText = computed(() =>
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
padding: 0.35rem 0.7rem;
border-radius: 8px;
border-radius: 6px;
font-size: 0.85rem;
cursor: pointer;
}
@@ -254,7 +254,7 @@ const reasonText = computed(() =>
.form input {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 0.45rem 0.6rem;
font-size: 0.9rem;
}
@@ -270,7 +270,7 @@ const reasonText = computed(() =>
background: rgba(99, 102, 241, 0.15);
color: #4338ca;
padding: 0.2rem 0.55rem;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
margin: 0 0.35rem;
}
docs/.vitepress/theme/components/appendix/web-basics/SubnetCalculator.vue
+5 -5
View File
@@ -239,7 +239,7 @@ calculate()
<style scoped>
.subnet-calculator {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
background: var(--vp-c-bg-soft);
margin: 20px 0;
@@ -247,7 +247,7 @@ calculate()
.calculator-input {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
display: flex;
@@ -311,7 +311,7 @@ calculate()
.result-section {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -460,7 +460,7 @@ calculate()
.example-presets {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
}
@@ -503,7 +503,7 @@ calculate()
.info-box {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
border-left: 4px solid var(--vp-c-brand);
}
docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue
+3 -3
View File
@@ -161,10 +161,10 @@ const reset = () => {
<style scoped>
.tcp-handshake-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
padding: 1.5rem;
margin: 1rem 0;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
@@ -388,7 +388,7 @@ Here I want it to appear and move.
.description-box {
margin-top: 1rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 6px;
text-align: center;
docs/.vitepress/theme/components/appendix/web-basics/TcpUdpComparison.vue
+6 -6
View File
@@ -235,7 +235,7 @@ const sendUdpData = () => {
<style scoped>
.tcp-udp-comparison {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
background: var(--vp-c-bg-soft);
margin: 20px 0;
@@ -257,7 +257,7 @@ const sendUdpData = () => {
.protocol-card {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -352,7 +352,7 @@ const sendUdpData = () => {
.handshake-demo {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 15px;
}
@@ -420,7 +420,7 @@ const sendUdpData = () => {
.comparison-table {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 25px;
overflow-x: auto;
@@ -456,7 +456,7 @@ tr:last-child td {
.real-world-example {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -481,7 +481,7 @@ tr:last-child td {
.scenario {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 15px;
}
docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue
+4 -4
View File
@@ -156,10 +156,10 @@ const parts = computed(() => {
<style scoped>
.url-parser-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg);
overflow: hidden;
margin: 1rem 0;
margin: 0.5rem 0;
font-family: var(--vp-font-family-mono);
}
@@ -272,8 +272,8 @@ const parts = computed(() => {
}
.url-segment {
padding: 1rem;
border-radius: 8px;
padding: 0.75rem;
border-radius: 6px;
border: 2px solid transparent; /* Prepare for border color */
background: var(--vp-c-bg-alt);
transition: all 0.2s;
docs/.vitepress/theme/components/appendix/web-basics/UrlToBrowserDemo.vue
+2 -2
View File
@@ -203,8 +203,8 @@ const nextStage = () => {
.component-wrapper {
background: var(--vp-c-bg);
border-radius: 8px;
/* padding: 1rem; */
border-radius: 6px;
/* padding: 0.75rem; */
}
.action-footer {
docs/.vitepress/theme/components/appendix/web-basics/VueReactComparisonDemo.vue
+1 -1
View File
@@ -227,7 +227,7 @@ const steps = computed(() => {
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
border-radius: 12px;
padding: 1rem;
padding: 0.75rem;
}
.panel-title {
docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue
+165 -508
View File
@@ -1,635 +1,292 @@
<!--
WebTechTriad.vue
三剑客轻交互：同一段小页面，切换 HTML/CSS/JS。
目标：让读者“看到页面上的某一块”就能立刻找到“代码里的哪一行”，再用三步解释发生了什么。
风格：先玩后讲，句子短。
-->
<template>
<div class="triad">
<div class="top">
<div>
<div class="title">先玩一下：同一段页面，切换层次</div>
<div class="subtitle">HTML 定骨架 → CSS 换外观 → JS 让它动起来</div>
</div>
<div class="modes">
<button
v-for="m in modes"
:key="m.id"
:class="['mode', { active: current === m.id }]"
@click="current = m.id"
>
{{ m.label }}
</button>
</div>
<div class="demo-header">
<span class="icon">🎭</span>
<span class="title">三剑客协作</span>
<span class="subtitle">同一段页面，切换看 HTML/CSS/JS 各自的作用</span>
</div>
<!-- 🎨 交互式配置面板 -->
<div class="config-panel" v-if="current === 'css'">
<div class="config-header">
<div class="config-title">🎨 教学演示参数调整 (仅 CSS 模式生效)</div>
<button class="reset-btn" @click="resetColors">重置默认</button>
</div>
<div class="config-items">
<div class="config-item">
<label>Primary Color (主题色)</label>
<div class="input-group">
<input type="color" v-model="customColors.primary" />
<input
type="text"
v-model="customColors.primary"
class="hex-input"
/>
</div>
</div>
<div class="config-item">
<label>Text Color (文字色)</label>
<div class="input-group">
<input type="color" v-model="customColors.text" />
<input type="text" v-model="customColors.text" class="hex-input" />
</div>
</div>
<div class="config-item">
<label>Button Text (按钮文字)</label>
<div class="input-group">
<input type="color" v-model="customColors.btnText" />
<input
type="text"
v-model="customColors.btnText"
class="hex-input"
/>
</div>
</div>
</div>
</div>
<div class="preview" :class="current">
<div class="hint">
点一下标题/段落/按钮，我会在下面的代码里高亮对应行。
</div>
<h1
class="hero"
:class="{ selected: selectedPart === 'h1' }"
@click="selectedPart = 'h1'"
>
<span class="badge">①</span>
欢迎来到我的网站
</h1>
<p
class="desc"
:class="{ selected: selectedPart === 'p' }"
@click="selectedPart = 'p'"
>
<span class="badge">②</span>
这是一段描述文字，告诉用户这里能做什么。
</p>
<button
class="cta"
:class="{ selected: selectedPart === 'btn' }"
@click="handleBtnClick"
>
<span class="badge">③</span>
点我试试看 ({{ clicks }})
</button>
<div class="click-tip" v-if="current === 'js'">
现在再点一次按钮计数会变：这是 JS 在改页面。
</div>
</div>
<div class="code-block">
<div class="code-title">{{ codeTitle }}</div>
<div class="code-content">
<div
v-for="(line, i) in codeLines"
:key="i"
:class="['line', { hl: line.key === selectedPart }]"
>
{{ line.text }}
</div>
</div>
</div>
<div class="explain">
<div class="card">
<div class="card-title">对照：页面 ↔ 代码</div>
<div class="map">
<div class="main-area">
<div class="left-panel">
<div class="modes">
<button
v-for="row in mappingRows"
:key="row.key"
:class="['map-row', { active: selectedPart === row.key }]"
@click="selectedPart = row.key"
v-for="m in modes"
:key="m.id"
:class="['mode-btn', { active: current === m.id }]"
@click="current = m.id"
>
<span class="left">{{ row.left }}</span>
<span class="right">{{ row.right }}</span>
{{ m.label }}
</button>
</div>
<div class="preview" :class="current">
<h1 class="hero" :class="{ selected: selectedPart === 'h1' }" @click="selectedPart = 'h1'">
<span class="badge">①</span>欢迎来到我的网站
</h1>
<p class="desc" :class="{ selected: selectedPart === 'p' }" @click="selectedPart = 'p'">
<span class="badge">②</span>这是一段描述文字
</p>
<button class="cta" :class="{ selected: selectedPart === 'btn' }" @click="handleBtnClick">
<span class="badge">③</span>点我试试 ({{ clicks }})
</button>
</div>
</div>
<div class="card">
<div class="card-title">发生了什么（简单版）</div>
<ol class="steps">
<li v-for="s in steps" :key="s">{{ s }}</li>
</ol>
<div class="right-panel">
<div class="code-section">
<div class="code-label">{{ codeTitle }}</div>
<div class="code-block">
<div v-for="(line, i) in codeLines" :key="i" :class="['line', { hl: line.key === selectedPart }]">
{{ line.text }}
</div>
</div>
</div>
<div class="explain-section">
<div class="explain-label">发生了什么</div>
<ol class="steps">
<li v-for="s in steps" :key="s">{{ s }}</li>
</ol>
</div>
</div>
</div>
<div class="one-line">
<span class="one-line-title">一句话总结：</span>
<span class="one-line-body">{{ oneLine }}</span>
<div class="info-box">
<span class="icon">💡</span>
<strong>核心思想：</strong>HTML 是骨架，CSS 是皮肤，JS 是大脑。三者分工明确，缺一不可。
</div>
</div>
</template>
<script setup>
import { computed, ref, reactive } from 'vue'
const props = defineProps({
primaryColor: {
type: String,
default: '#0ea5e9'
},
textColor: {
type: String,
default: '#111827'
},
btnTextColor: {
type: String,
default: '#fff'
}
})
// 🎨 用户自定义颜色状态
const customColors = reactive({
primary: props.primaryColor,
text: props.textColor,
btnText: props.btnTextColor
})
// 重置为默认值
const resetColors = () => {
customColors.primary = props.primaryColor
customColors.text = props.textColor
customColors.btnText = props.btnTextColor
}
// =============================================================================
// 🔧 演示参数配置 (Demo Configuration)
// =============================================================================
// 优先使用用户自定义的颜色，如果有变化的话
const DEMO_CONFIG = computed(() => ({
colors: {
primary: customColors.primary,
text: customColors.text,
btnText: customColors.btnText
}
}))
import { computed, ref } from 'vue'
const modes = [
{ id: 'html', label: '看骨架 (HTML)' },
{ id: 'css', label: '看外观 (CSS)' },
{ id: 'js', label: '看交互 (JS)' }
{ id: 'html', label: 'HTML' },
{ id: 'css', label: 'CSS' },
{ id: 'js', label: 'JS' }
]
const current = ref('html')
const clicks = ref(0)
const selectedPart = ref('h1') // 'h1' | 'p' | 'btn'
const selectedPart = ref('h1')
const codeTitle = computed(() => {
if (current.value === 'html') return 'HTML 片段：告诉浏览器这是什么'
if (current.value === 'css') return 'CSS 片段：决定长什么样'
return 'JS 片段：让它动起来'
if (current.value === 'html') return 'HTML：定义结构'
if (current.value === 'css') return 'CSS：定义样式'
return 'JS：定义行为'
})
const codeLines = computed(() => {
if (current.value === 'html') {
return [
{ key: 'h1', text: '<h1>欢迎来到我的网站</h1>' },
{ key: 'p', text: '<p>这是一段描述文字...</p>' },
{ key: 'btn', text: '<button>点我试试看</button>' }
{ key: 'p', text: '<p>这是一段描述文字</p>' },
{ key: 'btn', text: '<button>点我试试</button>' }
]
}
if (current.value === 'css') {
return [
{
key: 'h1',
text: `.hero { color: ${DEMO_CONFIG.value.colors.primary}; font-size: 24px; }`
},
{ key: 'p', text: `.desc { color: ${DEMO_CONFIG.value.colors.text}; }` },
{
key: 'btn',
text: `.cta { background: ${DEMO_CONFIG.value.colors.primary}; color: ${DEMO_CONFIG.value.colors.btnText}; border-radius: 10px; }`
}
{ key: 'h1', text: '.hero { color: #0ea5e9; font-size: 20px; }' },
{ key: 'p', text: '.desc { color: #666; }' },
{ key: 'btn', text: '.cta { background: #0ea5e9; color: #fff; }' }
]
}
return [
{ key: 'btn', text: "const btn = document.querySelector('button')" },
{ key: 'btn', text: 'let count = 0' },
{ key: 'btn', text: "btn.addEventListener('click', () => {" },
{ key: 'btn', text: ' count++' },
{ key: 'btn', text: " btn.textContent = '点我试试看 (' + count + ')'" },
{ key: 'btn', text: " btn.textContent = '点我 (' + count + ')'" },
{ key: 'btn', text: '})' }
]
})
const mappingRows = computed(() => {
if (current.value === 'html') {
return [
{ key: 'h1', left: '① 标题', right: '<h1>...</h1>' },
{ key: 'p', left: '② 段落', right: '<p>...</p>' },
{ key: 'btn', left: '③ 按钮', right: '<button>...</button>' }
]
}
if (current.value === 'css') {
return [
{ key: 'h1', left: '① 标题', right: '.hero { ... }' },
{ key: 'p', left: '② 段落', right: '.desc { ... }' },
{ key: 'btn', left: '③ 按钮', right: '.cta { ... }' }
]
}
return [
{ key: 'h1', left: '① 标题', right: '（此例未涉及）' },
{ key: 'p', left: '② 段落', right: '（此例未涉及）' },
{ key: 'btn', left: '③ 按钮', right: "addEventListener('click', ...)" }
]
})
const steps = computed(() => {
if (current.value === 'html') {
return [
'浏览器读到 HTML：知道页面上有“标题/段落/按钮”。',
'把它们先按默认规则摆出来（所以看起来很朴素）。',
'下一步才轮到 CSS 和 JS。'
]
return ['浏览器读取标签，知道"这是标题、这是按钮"', '按默认样式显示（所以看起来朴素）']
}
if (current.value === 'css') {
return [
'浏览器先把 HTML 结构摆好。',
'再读取 CSS：给标题/段落/按钮套上颜色、字号、间距。',
'重新绘制外观：你看到页面“变好看”。'
]
return ['读取选择器，找到对应元素', '应用颜色、字号、间距等样式']
}
return [
'页面先按 HTML+CSS 显示出来。',
'JS 给按钮装上“点击开关”（事件监听）。',
'你点击按钮时：JS 改按钮文字/计数，页面立即更新。'
]
return ['给按钮绑定点击事件', '点击时更新计数和文字']
})
const oneLine = computed(() => {
if (current.value === 'html') return '先把“有哪些东西、是什么东西”说清楚。'
if (current.value === 'css')
return '在不改结构的前提下，把外观调到你想要的样子。'
return '把“点击/输入”等行为接上逻辑，让页面能互动。'
})
// Keep the demo behavior: only JS mode should increment on click.
// We implement it by watching mode and only allowing clicks to increment in JS mode.
const increment = () => {
if (current.value !== 'js') return
clicks.value++
}
const handleBtnClick = () => {
selectedPart.value = 'btn'
increment()
if (current.value === 'js') clicks.value++
}
</script>
<style scoped>
.triad {
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
background: var(--vp-c-bg-soft);
padding: 16px;
margin: 20px 0;
display: flex;
flex-direction: column;
gap: 12px;
max-height: 600px;
overflow-y: auto;
}
/* New Config Panel Styles */
.config-panel {
background: var(--vp-c-bg-alt);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
}
.config-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.config-title {
font-size: 14px;
font-weight: 600;
color: var(--vp-c-text-1);
}
.config-items {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.config-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.config-item label {
font-size: 12px;
font-weight: 500;
color: var(--vp-c-text-2);
}
.input-group {
display: flex;
align-items: center;
gap: 8px;
background: var(--vp-c-bg);
padding: 4px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg-soft);
padding: 0.75rem;
margin: 0.5rem 0;
}
input[type='color'] {
width: 28px;
height: 28px;
border: none;
padding: 0;
background: none;
cursor: pointer;
border-radius: 4px;
}
.hex-input {
border: none;
background: transparent;
color: var(--vp-c-text-1);
font-size: 13px;
width: 65px;
font-family: var(--vp-font-family-mono);
outline: none;
}
.reset-btn {
font-size: 12px;
color: var(--vp-c-brand);
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-brand);
border-radius: 4px;
cursor: pointer;
padding: 4px 12px;
transition: all 0.2s;
}
.reset-btn:hover {
background: var(--vp-c-brand);
color: white;
}
.top {
.demo-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.title {
font-weight: 800;
font-size: 16px;
.demo-header .icon { font-size: 1.25rem; }
.demo-header .title { font-weight: bold; font-size: 1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
.main-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 0.75rem;
}
.subtitle {
color: var(--vp-c-text-2);
font-size: 13px;
margin-top: 4px;
@media (max-width: 768px) {
.main-area {
grid-template-columns: 1fr;
}
}
.left-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.modes {
display: flex;
gap: 8px;
flex-wrap: wrap;
gap: 0.25rem;
}
.mode {
.mode-btn {
flex: 1;
padding: 0.4rem 0.5rem;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
background: var(--vp-c-bg);
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-size: 0.8rem;
font-weight: 600;
transition: all 0.2s;
}
.mode:hover {
background: var(--vp-c-bg-soft);
}
.mode.active {
.mode-btn:hover { background: var(--vp-c-bg-soft); }
.mode-btn.active {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
background: var(--vp-c-brand-dimm);
background: var(--vp-c-brand-soft);
}
.preview {
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 24px;
border-radius: 6px;
padding: 0.75rem;
background: var(--vp-c-bg);
display: flex;
flex-direction: column;
gap: 16px;
transition: all 0.2s;
gap: 0.75rem;
}
.hint {
color: var(--vp-c-text-2);
font-size: 13px;
margin-bottom: 8px;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 6px;
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
margin-right: 12px;
margin-right: 8px;
font-weight: 800;
font-size: 12px;
font-size: 11px;
flex-shrink: 0;
}
.hero {
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
line-height: 1.4;
}
.desc {
margin: 0;
color: var(--vp-c-text-2);
cursor: pointer;
display: flex;
align-items: center;
line-height: 1.5;
}
.hero { margin: 0; cursor: pointer; display: flex; align-items: center; font-size: 1rem; }
.desc { margin: 0; color: var(--vp-c-text-2); cursor: pointer; display: flex; align-items: center; font-size: 0.9rem; }
.cta {
width: fit-content;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 8px 16px;
border-radius: 6px;
padding: 0.4rem 0.8rem;
cursor: pointer;
background: var(--vp-c-bg);
display: flex;
align-items: center;
font-size: 14px;
font-size: 0.85rem;
transition: all 0.2s;
}
.selected {
outline: 2px solid var(--vp-c-brand);
outline-offset: 4px;
outline-offset: 2px;
border-radius: 4px;
}
.click-tip {
margin-top: 6px;
.preview.css .hero { color: var(--vp-c-brand); font-size: 1.1rem; }
.preview.css .desc { color: var(--vp-c-text-2); }
.preview.css .cta { background: var(--vp-c-brand); color: #fff; border-color: var(--vp-c-brand); }
.preview.js .cta { background: #22c55e; color: #fff; border-color: #22c55e; }
.preview.js { border-color: rgba(34, 197, 94, 0.4); }
.right-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.code-section, .explain-section {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
padding: 0.6rem;
}
.code-label, .explain-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--vp-c-text-2);
font-size: 13px;
}
.preview.css .hero {
color: v-bind('DEMO_CONFIG.colors.primary');
font-size: 24px;
}
.preview.css .desc {
color: v-bind('DEMO_CONFIG.colors.text');
}
.preview.css .cta {
background: v-bind('DEMO_CONFIG.colors.primary');
color: v-bind('DEMO_CONFIG.colors.btnText');
border-color: v-bind('DEMO_CONFIG.colors.primary');
border-radius: 10px;
}
.preview.js .cta {
background: #22c55e;
color: #fff;
border-color: #22c55e;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.preview.js {
border-color: rgba(34, 197, 94, 0.4);
margin-bottom: 0.4rem;
}
.code-block {
background: var(--vp-c-bg-alt);
border: 1px solid var(--vp-c-divider);
border-radius: 10px;
padding: 16px;
}
.code-title {
font-weight: 700;
margin-bottom: 8px;
font-size: 13px;
color: var(--vp-c-text-2);
}
.code-content {
background: #0b1221;
color: #e5e7eb;
border-radius: 8px;
padding: 16px;
font-family: var(--vp-font-family-mono);
font-size: 13px;
overflow-x: auto;
line-height: 1.6;
}
.line {
min-height: 1.6em;
}
.hl {
background: var(--vp-c-brand-dimm);
border-left: 3px solid var(--vp-c-brand);
border-radius: 4px;
display: block;
width: 100%;
padding-left: 8px; /* Offset text to account for border */
font-weight: bold; /* Make text bolder */
/* color: white; Removed to fix visibility issue on light theme if brand-dimm is light */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}
.explain {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.card {
background: var(--vp-c-bg);
border: 1px dashed var(--vp-c-divider);
border-radius: 10px;
padding: 10px;
}
.card-title {
font-weight: 700;
margin-bottom: 4px;
}
.card-body {
color: var(--vp-c-text-2);
font-size: 13px;
padding: 0.5rem;
font-family: var(--vp-font-family-mono);
font-size: 0.7rem;
line-height: 1.5;
}
.map {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.map-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 10px;
border-radius: 10px;
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
cursor: pointer;
text-align: left;
}
.map-row.active {
border-color: var(--vp-c-brand);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.left {
font-weight: 800;
}
.right {
color: var(--vp-c-text-2);
}
.steps {
margin: 8px 0 0 18px;
color: var(--vp-c-text-2);
line-height: 1.6;
.line { padding-left: 0.25rem; }
.hl {
background: var(--vp-c-brand-dimm);
border-left: 2px solid var(--vp-c-brand);
font-weight: 600;
}
.one-line {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
}
.one-line-title {
font-weight: 800;
}
.one-line-body {
.steps {
margin: 0;
padding-left: 1rem;
color: var(--vp-c-text-2);
font-size: 0.8rem;
line-height: 1.5;
}
.info-box {
background: var(--vp-c-bg-alt);
padding: 0.6rem;
border-radius: 6px;
font-size: 0.85rem;
color: var(--vp-c-text-2);
display: flex;
gap: 0.25rem;
}
.info-box .icon { flex-shrink: 0; }
.info-box strong { color: var(--vp-c-text-1); }
</style>