feat(web-basics): enhance demo components with improved UI and functionality

- Update WebTechTriad component with clearer labels and better visual hierarchy
- Improve Flexbox demo with axis visualization and more comprehensive controls
- Enhance BoxModel demo with box-sizing toggle and real-world scenario
- Refactor DomManipulator with expanded operations and code examples
- Add consistent styling and responsive design across all components

docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue

@@ -1,48 +1,121 @@
 <template>
   <div class="dom-demo">
     <div class="demo-header">
-      <span class="icon">🎯</span>
-      <span class="title">DOM 操作</span>
-      <span class="subtitle">用代码动态修改页面</span>
+      <span class="title">DOM 操作演示</span>
+      <span class="subtitle">通过 JavaScript 动态修改页面内容、样式和结构</span>
     </div>
 
     <div class="main-area">
       <div class="left-panel">
-        <div class="controls">
-          <div class="field">
-            <label>修改标题</label>
-            <input v-model="title" placeholder="输入新标题" />
+        <div class="operations">
+          <div class="op-group">
+            <div class="op-label">修改内容</div>
+            <div class="op-row">
+              <input v-model="titleText" placeholder="输入标题" class="input" />
+              <button @click="updateTitle" class="btn">更新标题</button>
+            </div>
+          </div>
+
+          <div class="op-group">
+            <div class="op-label">修改样式</div>
+            <div class="op-row">
+              <button 
+                v-for="s in styles" 
+                :key="s.id"
+                @click="currentStyle = s.id"
+                :class="['btn-sm', { active: currentStyle === s.id }]"
+              >
+                {{ s.label }}
+              </button>
+            </div>
+          </div>
+
+          <div class="op-group">
+            <div class="op-label">添加/删除元素</div>
+            <div class="op-row">
+              <button @click="addItem" class="btn">添加项目</button>
+              <button @click="removeLastItem" class="btn btn-danger">删除最后</button>
+            </div>
           </div>
-          <label class="checkbox">
-            <input type="checkbox" v-model="highlight" />
-            高亮模式
-          </label>
         </div>
 
-        <div class="card" :class="{ highlight }">
-          <h2>{{ title }}</h2>
-          <p>这里是段落说明，勾选高亮看看变化。</p>
-          <button @click="toggleText">{{ buttonText }}</button>
+        <div class="preview-card" :class="currentStyle">
+          <h2 class="card-title">{{ titleText || '点击按钮更新标题' }}</h2>
+          <p class="card-desc">这是一个演示 DOM 操作的卡片区域。</p>
+          <ul class="card-list">
+            <li v-for="(item, i) in items" :key="i">{{ item }}</li>
+            <li v-if="items.length === 0" class="empty">（列表为空）</li>
+          </ul>
         </div>
       </div>
 
       <div class="right-panel">
         <div class="code-block">
-          <div class="code-title">JavaScript</div>
+          <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>
+            <template v-if="lastOp === 'title'">
+              <div class="line comment">// 修改文本内容</div>
+              <div class="line">const el = document.querySelector('.card-title')</div>
+              <div class="line">el.textContent = '{{ titleText }}'</div>
+            </template>
+            <template v-else-if="lastOp === 'style'">
+              <div class="line comment">// 切换 CSS 类</div>
+              <div class="line">const card = document.querySelector('.preview-card')</div>
+              <div class="line">card.className = 'preview-card {{ currentStyle }}'</div>
+            </template>
+            <template v-else-if="lastOp === 'add'">
+              <div class="line comment">// 创建并添加新元素</div>
+              <div class="line">const list = document.querySelector('.card-list')</div>
+              <div class="line">const li = document.createElement('li')</div>
+              <div class="line">li.textContent = '新项目 {{ items.length }}'</div>
+              <div class="line">list.appendChild(li)</div>
+            </template>
+            <template v-else-if="lastOp === 'remove'">
+              <div class="line comment">// 删除最后一个元素</div>
+              <div class="line">const list = document.querySelector('.card-list')</div>
+              <div class="line">const last = list.lastElementChild</div>
+              <div class="line">if (last) last.remove()</div>
+            </template>
+            <template v-else>
+              <div class="line comment">// 点击左侧按钮查看对应代码</div>
+            </template>
+          </div>
+        </div>
+
+        <div class="methods-card">
+          <div class="methods-title">常用 DOM 方法</div>
+          <div class="methods-list">
+            <div class="method">
+              <code>querySelector()</code>
+              <span>按选择器查找元素</span>
+            </div>
+            <div class="method">
+              <code>textContent</code>
+              <span>获取/设置文本内容</span>
+            </div>
+            <div class="method">
+              <code>classList</code>
+              <span>操作元素的 CSS 类</span>
+            </div>
+            <div class="method">
+              <code>createElement()</code>
+              <span>创建新元素</span>
+            </div>
+            <div class="method">
+              <code>appendChild()</code>
+              <span>添加子元素</span>
+            </div>
+            <div class="method">
+              <code>remove()</code>
+              <span>删除元素</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>核心思想：</strong>DOM 是网页的"乐高积木"，JS 可以随时添加、删除、修改这些积木。
+      <strong>注意：</strong>频繁操作 DOM 会影响性能。现代框架（Vue/React）使用虚拟 DOM 来优化这个过程——先在内存中计算差异，再批量更新真实 DOM。
     </div>
   </div>
 </template>
@@ -50,178 +123,307 @@
 <script setup>
 import { ref } from 'vue'
 
-const title = ref('欢迎来到我的网站')
-const highlight = ref(false)
-const buttonText = ref('点我试试')
+const titleText = ref('欢迎学习 DOM')
+const currentStyle = ref('')
+const items = ref(['项目 1', '项目 2'])
+const lastOp = ref('')
 
-const toggleText = () => {
-  buttonText.value = buttonText.value === '点我试试' ? '再点一次' : '点我试试'
+const styles = [
+  { id: '', label: '默认' },
+  { id: 'highlight', label: '高亮' },
+  { id: 'dark', label: '深色' }
+]
+
+const updateTitle = () => {
+  lastOp.value = 'title'
+}
+
+const addItem = () => {
+  items.value.push(`新项目 ${items.value.length + 1}`)
+  lastOp.value = 'add'
+}
+
+const removeLastItem = () => {
+  if (items.value.length > 0) {
+    items.value.pop()
+  }
+  lastOp.value = 'remove'
 }
 </script>
 
 <style scoped>
 .dom-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 0.75rem;
-  margin: 0.5rem 0;
+  padding: 1rem;
+  margin: 1rem 0;
 }
 
 .demo-header {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
 }
 
-.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: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+}
 
 .main-area {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1rem;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .main-area { grid-template-columns: 1fr; }
 }
 
 .left-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.operations {
   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;
+.op-group {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 6px;
-  padding: 0.4rem 0.6rem;
+  padding: 0.5rem 0.6rem;
 }
 
-.field label {
-  font-size: 0.8rem;
+.op-label {
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.35rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.field input[type='text'] {
-  border: none;
-  background: transparent;
-  color: var(--vp-c-text-1);
-  font-size: 0.85rem;
-  outline: none;
-  width: 120px;
-}
-
-.checkbox {
+.op-row {
   display: flex;
-  align-items: center;
   gap: 0.4rem;
-  font-size: 0.8rem;
-  color: var(--vp-c-text-1);
-  cursor: pointer;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
-.checkbox input {
-  accent-color: var(--vp-c-brand);
-}
-
-.card {
+.input {
+  flex: 1;
+  min-width: 120px;
+  padding: 0.35rem 0.5rem;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.75rem;
-  background: var(--vp-c-bg);
+  border-radius: 4px;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  font-size: 0.8rem;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+}
+
+.btn {
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 4px;
+  background: var(--vp-c-brand);
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 500;
   transition: all 0.2s;
 }
 
-.card.highlight {
-  border-color: var(--vp-c-warning);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  background: var(--vp-c-bg-soft);
+.btn:hover {
+  opacity: 0.9;
 }
 
-.card h2 {
-  margin: 0 0 0.25rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 0.95rem;
+.btn-danger {
+  background: #ef4444;
+  border-color: #ef4444;
 }
 
-.card p {
-  margin: 0 0 0.5rem 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.8rem;
-}
-
-.card button {
-  background: var(--vp-c-brand);
-  color: white;
-  border: none;
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
-  padding: 0.35rem 0.75rem;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
   cursor: pointer;
-  font-size: 0.8rem;
-  transition: opacity 0.2s;
+  font-size: 0.7rem;
+  transition: all 0.2s;
 }
 
-.card button:hover { opacity: 0.9; }
+.btn-sm:hover {
+  background: var(--vp-c-bg);
+}
+
+.btn-sm.active {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+}
+
+.preview-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  transition: all 0.3s;
+}
+
+.preview-card.highlight {
+  border-color: var(--vp-c-warning);
+  background: var(--vp-c-warning-soft);
+}
+
+.preview-card.dark {
+  background: #1a1a2e;
+  border-color: #2d2d44;
+}
+
+.preview-card.dark .card-title,
+.preview-card.dark .card-desc,
+.preview-card.dark .card-list {
+  color: #e5e7eb;
+}
+
+.card-title {
+  margin: 0 0 0.35rem 0;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+.card-desc {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.card-list {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+}
+
+.card-list li {
+  margin-bottom: 0.15rem;
+}
+
+.card-list .empty {
+  color: var(--vp-c-text-3);
+  font-style: italic;
+}
 
 .right-panel {
   display: flex;
   flex-direction: column;
+  gap: 0.75rem;
 }
 
 .code-block {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.6rem;
-  height: 100%;
+  border-radius: 8px;
+  padding: 0.75rem;
 }
 
 .code-title {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .code-content {
-  background: #0b1221;
+  background: #1a1a2e;
   color: #e5e7eb;
-  border-radius: 4px;
-  padding: 0.5rem;
+  border-radius: 6px;
+  padding: 0.75rem;
   font-family: var(--vp-font-family-mono);
-  font-size: 0.7rem;
-  line-height: 1.5;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  min-height: 100px;
 }
 
-.line { white-space: pre; }
+.line {
+  padding-left: 0.25rem;
+}
+
+.comment {
+  color: #6b7280;
+}
+
+.methods-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+  flex: 1;
+}
+
+.methods-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.methods-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.method {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.method code {
+  background: var(--vp-c-bg-soft);
+  padding: 0.15rem 0.35rem;
+  border-radius: 3px;
+  font-family: var(--vp-font-family-mono);
+  color: var(--vp-c-brand);
+}
+
+.method span {
+  color: var(--vp-c-text-2);
+}
 
 .info-box {
   background: var(--vp-c-bg-alt);
-  padding: 0.6rem;
-  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
   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>