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

feat: enhance demo components with consistent styling and info boxes

Browse Source 
- 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
2026-02-14 12:14:07 +08:00
parent cd2ce9e661
commit ebe2bf6109
70 changed files with 12307 additions and 10445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
+147 -93
View File
@@ -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 />
&lt;div v-if="count > 5"&gt;...&lt;/div&gt;
</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 }}
&lt;div v-if="count > 5"&gt;...&lt;/div&gt;
</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>