feat: enhance demo components with consistent styling and info boxes
- Add standardized header and info box components to all demo files - Improve visual consistency with theme colors and spacing - Add max-height and overflow-y for better content containment - Update package.json build script with --force flag - Add .gitignore entries for REFACTORING files - Fix table formatting in audio-intro.md
This commit is contained in:
sanbuphy
@@ -1,50 +1,51 @@
|
||||
<!--
|
||||
BigFrontendScopeDemo.vue
|
||||
前端 vs 大前端（跨端）范围演示
|
||||
-->
|
||||
<template>
|
||||
<div class="bigfe-demo">
|
||||
<div class="header">
|
||||
<div class="title">前端 vs 大前端：到底“前端”都包含什么？</div>
|
||||
<div class="subtitle">点一下不同“端”，立刻看到它跑在哪里、怎么发布</div>
|
||||
<div class="demo-header">
|
||||
<span class="icon">🌐</span>
|
||||
<span class="title">前端 vs 大前端</span>
|
||||
<span class="subtitle">了解不同平台的运行环境和技术栈</span>
|
||||
</div>
|
||||
|
||||
<div class="platforms">
|
||||
<button
|
||||
v-for="p in platforms"
|
||||
:key="p.key"
|
||||
class="platform"
|
||||
:class="{ active: current === p.key }"
|
||||
@click="current = p.key"
|
||||
>
|
||||
<span class="icon">{{ p.icon }}</span>
|
||||
<span>{{ p.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-content">
|
||||
<div class="platforms">
|
||||
<button
|
||||
v-for="p in platforms"
|
||||
:key="p.key"
|
||||
class="platform"
|
||||
:class="{ active: current === p.key }"
|
||||
@click="current = p.key"
|
||||
>
|
||||
<span class="icon">{{ p.icon }}</span>
|
||||
<span>{{ p.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<div class="label">运行环境</div>
|
||||
<div class="value">{{ currentData.runtime }}</div>
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<div class="label">运行环境</div>
|
||||
<div class="value">{{ currentData.runtime }}</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">主要技术</div>
|
||||
<div class="value">{{ currentData.stack }}</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">发布方式</div>
|
||||
<div class="value">{{ currentData.release }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">主要技术</div>
|
||||
<div class="value">{{ currentData.stack }}</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="label">发布方式</div>
|
||||
<div class="value">{{ currentData.release }}</div>
|
||||
|
||||
<div class="skills">
|
||||
<div class="skills-title">哪些能力是"共通的"？</div>
|
||||
<div class="tags">
|
||||
<span v-for="t in commonSkills.slice(0, 6)" :key="t" class="tag">{{ t }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skills">
|
||||
<div class="skills-title">哪些能力是“共通的”？</div>
|
||||
<div class="tags">
|
||||
<span v-for="t in commonSkills" :key="t" class="tag">{{ t }}</span>
|
||||
</div>
|
||||
<div class="skills-note">
|
||||
大前端的核心不是“会更多框架”，而是：<strong>用同一套工程能力，把体验交付到不同平台</strong>。
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>大前端不是"会更多框架"，而是用同一套工程能力，把体验交付到不同平台。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -53,11 +54,11 @@
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const platforms = [
|
||||
{ key: 'web', label: 'Web 网站', icon: '🌐' },
|
||||
{ key: 'h5', label: 'H5 活动页', icon: '📱' },
|
||||
{ key: 'web', label: 'Web网站', icon: '🌐' },
|
||||
{ key: 'h5', label: 'H5活动页', icon: '📱' },
|
||||
{ key: 'miniapp', label: '小程序', icon: '🧩' },
|
||||
{ key: 'native', label: 'App（原生）', icon: '📲' },
|
||||
{ key: 'cross', label: '跨端 App', icon: '🧱' },
|
||||
{ key: 'native', label: '原生App', icon: '📲' },
|
||||
{ key: 'cross', label: '跨端App', icon: '🧱' },
|
||||
{ key: 'desktop', label: '桌面应用', icon: '🖥️' }
|
||||
]
|
||||
|
||||
@@ -112,32 +113,45 @@ const commonSkills = [
|
||||
<style scoped>
|
||||
.bigfe-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1rem;
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.platforms {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.75rem 0 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.platform {
|
||||
@@ -150,22 +164,25 @@ const commonSkills = [
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.platform:hover {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.platform.active {
|
||||
border-color: #3b82f6;
|
||||
color: #1d4ed8;
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1rem;
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -185,17 +202,19 @@ const commonSkills = [
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.skills {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px dashed var(--vp-c-divider);
|
||||
padding-top: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.skills-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.tags {
|
||||
@@ -208,14 +227,26 @@ const commonSkills = [
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
color: #15803d;
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-1);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.skills-note {
|
||||
margin-top: 0.75rem;
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
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>
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="box-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">📦</span>
|
||||
<span class="title">CSS 盒模型</span>
|
||||
<span class="subtitle">理解元素尺寸的构成（通俗说：盒子的四层包装）</span>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="control-item">
|
||||
<div class="control-header">
|
||||
@@ -67,6 +73,11 @@
|
||||
</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">
|
||||
@@ -99,13 +110,37 @@ const total = computed(
|
||||
<style scoped>
|
||||
.box-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 24px;
|
||||
margin: 24px 0;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.controls {
|
||||
@@ -310,4 +345,22 @@ input[type='range'] {
|
||||
.line {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
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>
|
||||
|
||||
@@ -1,73 +1,86 @@
|
||||
<!--
|
||||
CssFlexbox.vue
|
||||
Flex 速学：三个按钮控制方向/对齐/换行，实时看盒子怎么排。
|
||||
Flex 布局速学：三个按钮控制方向/对齐/换行，实时看盒子怎么排
|
||||
-->
|
||||
<template>
|
||||
<div class="flex-demo">
|
||||
<div class="controls">
|
||||
<div class="control-item">
|
||||
<div class="control-header">
|
||||
<label>主轴方向 (flex-direction)</label>
|
||||
<div class="demo-header">
|
||||
<span class="icon">📐</span>
|
||||
<span class="title">Flex 布局</span>
|
||||
<span class="subtitle">一行代码搞定排列对齐（通俗说：自动排版）</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="controls">
|
||||
<div class="control-item">
|
||||
<div class="control-header">
|
||||
<label>主轴方向 (flex-direction)</label>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="d in directions"
|
||||
:key="d.id"
|
||||
:class="['chip', { active: dir === d.id }]"
|
||||
@click="dir = d.id"
|
||||
>
|
||||
{{ d.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="d in directions"
|
||||
:key="d.id"
|
||||
:class="['chip', { active: dir === d.id }]"
|
||||
@click="dir = d.id"
|
||||
>
|
||||
{{ d.label }}
|
||||
</button>
|
||||
<div class="control-item">
|
||||
<div class="control-header">
|
||||
<label>主轴对齐 (justify-content)</label>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="j in justifies"
|
||||
:key="j.id"
|
||||
:class="['chip', { active: justify === j.id }]"
|
||||
@click="justify = j.id"
|
||||
>
|
||||
{{ j.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="control-header">
|
||||
<label>是否换行 (flex-wrap)</label>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="w in wraps"
|
||||
:key="w.id"
|
||||
:class="['chip', { active: wrap === w.id }]"
|
||||
@click="wrap = w.id"
|
||||
>
|
||||
{{ w.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="control-header">
|
||||
<label>主轴对齐 (justify-content)</label>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="j in justifies"
|
||||
:key="j.id"
|
||||
:class="['chip', { active: justify === j.id }]"
|
||||
@click="justify = j.id"
|
||||
>
|
||||
{{ j.label }}
|
||||
</button>
|
||||
|
||||
<div class="canvas-container">
|
||||
<div class="canvas" :style="boxStyle">
|
||||
<div v-for="n in 6" :key="n" class="item">{{ n }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="control-header">
|
||||
<label>是否换行 (flex-wrap)</label>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="w in wraps"
|
||||
:key="w.id"
|
||||
:class="['chip', { active: wrap === w.id }]"
|
||||
@click="wrap = w.id"
|
||||
>
|
||||
{{ w.label }}
|
||||
</button>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas-container">
|
||||
<div class="canvas" :style="boxStyle">
|
||||
<div v-for="n in 8" :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>
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>Flex 让元素自动排列，不用手动计算位置。就像书架上的书，会自动对齐。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -99,7 +112,7 @@ const boxStyle = computed(() => ({
|
||||
justifyContent: justify.value,
|
||||
flexWrap: wrap.value,
|
||||
gap: '12px',
|
||||
minHeight: '200px',
|
||||
minHeight: '180px',
|
||||
padding: '16px'
|
||||
}))
|
||||
</script>
|
||||
@@ -107,50 +120,76 @@ const boxStyle = computed(() => ({
|
||||
<style scoped>
|
||||
.flex-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 24px;
|
||||
margin: 24px 0;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.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-content {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
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: 16px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-header label {
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 13px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 6px 12px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: 0.8rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@@ -161,77 +200,60 @@ const boxStyle = computed(() => ({
|
||||
.chip.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-dimm);
|
||||
background: var(--vp-c-brand-soft);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 4px; /* Tiny padding for the inner canvas */
|
||||
border-radius: 8px;
|
||||
padding: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
/* border: 1px dashed var(--vp-c-divider); */
|
||||
border-radius: 6px;
|
||||
background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #0ea5e9, #10b981);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-brand);
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 18px;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.val {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
width: 100%;
|
||||
accent-color: var(--vp-c-brand);
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.code-content {
|
||||
background: #0b1221;
|
||||
color: #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 13px;
|
||||
font-size: 0.75rem;
|
||||
overflow-x: auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -239,4 +261,22 @@ input[type='range'] {
|
||||
.line {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
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>
|
||||
|
||||
@@ -1,35 +1,45 @@
|
||||
<!--
|
||||
DomManipulator.vue
|
||||
DOM 速体验：输入标题+切换高亮类，直观看到文本和样式变化。
|
||||
DOM 操作速体验：输入标题+切换高亮类，直观看到文本和样式变化
|
||||
-->
|
||||
<template>
|
||||
<div class="dom-demo">
|
||||
<div class="controls">
|
||||
<div class="field">
|
||||
<label>改个标题</label>
|
||||
<input v-model="title" placeholder="输入新标题" />
|
||||
</div>
|
||||
<div class="field checkbox">
|
||||
<label
|
||||
><input type="checkbox" v-model="highlight" /> 高亮模式
|
||||
(class="highlight")</label
|
||||
>
|
||||
</div>
|
||||
<div class="demo-header">
|
||||
<span class="icon">🎯</span>
|
||||
<span class="title">DOM 操作</span>
|
||||
<span class="subtitle">网页内容的动态修改（通俗说：用代码改页面）</span>
|
||||
</div>
|
||||
|
||||
<div class="card" :class="{ highlight }">
|
||||
<h2 id="hero">{{ title }}</h2>
|
||||
<p id="desc">这里是段落说明，勾选高亮看看变化。</p>
|
||||
<button @click="toggleText">{{ buttonText }}</button>
|
||||
</div>
|
||||
<div class="demo-content">
|
||||
<div class="controls">
|
||||
<div class="field">
|
||||
<label>改个标题</label>
|
||||
<input v-model="title" placeholder="输入新标题" />
|
||||
</div>
|
||||
<div class="field checkbox">
|
||||
<label><input type="checkbox" v-model="highlight" /> 高亮模式 (class="highlight")</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre class="code"><code>// JS 改内容
|
||||
<div class="card" :class="{ highlight }">
|
||||
<h2 id="hero">{{ title }}</h2>
|
||||
<p id="desc">这里是段落说明，勾选高亮看看变化。</p>
|
||||
<button @click="toggleText">{{ buttonText }}</button>
|
||||
</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 可以随时添加、删除、修改这些积木。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -48,73 +58,154 @@ const toggleText = () => {
|
||||
<style scoped>
|
||||
.dom-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 16px;
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.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-content {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
input[type='text'],
|
||||
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
input[type='text']:focus {
|
||||
outline: none;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
accent-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card.highlight {
|
||||
border-color: #f59e0b;
|
||||
box-shadow: 0 8px 18px rgba(245, 158, 11, 0.2);
|
||||
background: #fff7ed;
|
||||
border-color: var(--vp-c-warning);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card button {
|
||||
background: var(--vp-c-brand);
|
||||
color: #fff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.card button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #0b1221;
|
||||
color: #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
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: 13px;
|
||||
font-size: 0.75rem;
|
||||
overflow-x: auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
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>
|
||||
|
||||
+147
-93
@@ -1,70 +1,83 @@
|
||||
<template>
|
||||
<div class="imperative-declarative-demo">
|
||||
<div class="demo-grid">
|
||||
<!-- Imperative (jQuery Style) -->
|
||||
<div class="panel imperative">
|
||||
<div class="panel-header">
|
||||
<span class="badge yellow">Imperative (命令式)</span>
|
||||
<span class="sub-text">jQuery Style</span>
|
||||
</div>
|
||||
<div class="code-preview">
|
||||
<code>
|
||||
// 手动操作 DOM<br />
|
||||
$('#count').text(val);<br />
|
||||
if (val > 5) $('#msg').show();
|
||||
</code>
|
||||
</div>
|
||||
<div class="interactive-area">
|
||||
<div class="output-box">
|
||||
Count: <span id="imp-count-display">{{ impCount }}</span>
|
||||
<div v-show="impShowMsg" class="warning-msg">⚠️ Count is high!</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button @click="impIncrement" class="btn">Step 1: Value++</button>
|
||||
<button @click="impUpdateText" class="btn" :disabled="!impChanged">
|
||||
Step 2: Update Text
|
||||
</button>
|
||||
<button
|
||||
@click="impCheckState"
|
||||
class="btn"
|
||||
:disabled="!impTextUpdated"
|
||||
>
|
||||
Step 3: Check Logic
|
||||
</button>
|
||||
</div>
|
||||
<div class="status-log">{{ impStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-header">
|
||||
<span class="icon">🔄</span>
|
||||
<span class="title">命令式 vs 声明式</span>
|
||||
<span class="subtitle">两种编程思维的对比（通俗说：手动操作 vs 自动响应）</span>
|
||||
</div>
|
||||
|
||||
<!-- Declarative (Vue Style) -->
|
||||
<div class="panel declarative">
|
||||
<div class="panel-header">
|
||||
<span class="badge green">Declarative (声明式)</span>
|
||||
<span class="sub-text">Vue/React Style</span>
|
||||
</div>
|
||||
<div class="code-preview">
|
||||
<code>
|
||||
// 只需要绑定数据<br />
|
||||
{{ '{' + '{ count }' + '}' }}<br />
|
||||
<div v-if="count > 5">...</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="interactive-area">
|
||||
<div class="output-box">
|
||||
Count: <span>{{ decCount }}</span>
|
||||
<div v-if="decCount > 5" class="warning-msg">⚠️ Count is high!</div>
|
||||
<div class="demo-content">
|
||||
<div class="demo-grid">
|
||||
<!-- Imperative (jQuery Style) -->
|
||||
<div class="panel imperative">
|
||||
<div class="panel-header">
|
||||
<span class="badge yellow">命令式 (Imperative)</span>
|
||||
<span class="sub-text">jQuery Style - 手动操作</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button @click="decIncrement" class="btn primary">
|
||||
Value++ (Auto Render)
|
||||
</button>
|
||||
<div class="code-preview">
|
||||
<code>
|
||||
// 手动操作 DOM<br />
|
||||
$('#count').text(val);<br />
|
||||
if (val > 5) $('#msg').show();
|
||||
</code>
|
||||
</div>
|
||||
<div class="status-log">
|
||||
Framework handles DOM updates automatically.
|
||||
<div class="interactive-area">
|
||||
<div class="output-box">
|
||||
Count: <span id="imp-count-display">{{ impCount }}</span>
|
||||
<div v-show="impShowMsg" class="warning-msg">⚠️ Count is high!</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button @click="impIncrement" class="btn">Step 1: Value++</button>
|
||||
<button @click="impUpdateText" class="btn" :disabled="!impChanged">
|
||||
Step 2: Update Text
|
||||
</button>
|
||||
<button
|
||||
@click="impCheckState"
|
||||
class="btn"
|
||||
:disabled="!impTextUpdated"
|
||||
>
|
||||
Step 3: Check Logic
|
||||
</button>
|
||||
</div>
|
||||
<div class="status-log">{{ impStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Declarative (Vue Style) -->
|
||||
<div class="panel declarative">
|
||||
<div class="panel-header">
|
||||
<span class="badge green">声明式 (Declarative)</span>
|
||||
<span class="sub-text">Vue/React Style - 自动响应</span>
|
||||
</div>
|
||||
<div class="code-preview">
|
||||
<code v-pre>
|
||||
// 只需要绑定数据
|
||||
{{ count }}
|
||||
<div v-if="count > 5">...</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="interactive-area">
|
||||
<div class="output-box">
|
||||
Count: <span>{{ decCount }}</span>
|
||||
<div v-if="decCount > 5" class="warning-msg">⚠️ Count is high!</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button @click="decIncrement" class="btn primary">
|
||||
Value++ (Auto Render)
|
||||
</button>
|
||||
</div>
|
||||
<div class="status-log">
|
||||
Framework handles DOM updates automatically.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>命令式像"手把手教电脑怎么做"，声明式像"告诉电脑要什么，它自己搞定"。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -119,12 +132,40 @@ const decIncrement = () => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.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-content {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@@ -143,7 +184,7 @@ const decIncrement = () => {
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 0.8rem;
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -152,48 +193,51 @@ const decIncrement = () => {
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge.yellow {
|
||||
background: #f59e0b;
|
||||
background: var(--vp-c-warning);
|
||||
}
|
||||
|
||||
.badge.green {
|
||||
background: #10b981;
|
||||
background: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.code-preview {
|
||||
background: #1e1e2e;
|
||||
padding: 0.8rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
color: #a6accd;
|
||||
height: 80px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.interactive-area {
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.output-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
min-height: 80px;
|
||||
min-height: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -201,10 +245,9 @@ const decIncrement = () => {
|
||||
}
|
||||
|
||||
.warning-msg {
|
||||
color: #ef4444;
|
||||
color: var(--vp-c-danger);
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
animation: popIn 0.3s;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -217,42 +260,53 @@ const decIncrement = () => {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #3b82f6;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background: #2563eb;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.status-log {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-style: italic;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
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>
|
||||
|
||||
@@ -303,6 +303,8 @@ const handleBtnClick = () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* New Config Panel Styles */
|
||||
|
||||
Reference in New Issue
Block a user