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/CssFlexbox.vue

@@ -1,15 +1,41 @@
 <template>
   <div class="flex-demo">
     <div class="demo-header">
-      <span class="icon">📐</span>
-      <span class="title">Flex 布局</span>
-      <span class="subtitle">一行代码搞定排列对齐</span>
+      <span class="title">Flexbox 布局</span>
+      <span class="subtitle">通过调整参数观察元素排列方式的变化</span>
+    </div>
+
+    <div class="axis-concept">
+      <div class="concept-row">
+        <div class="concept-item">
+          <div class="concept-visual main">
+            <span class="arrow">→</span>
+            <span class="label">主轴</span>
+            <span class="arrow">→</span>
+          </div>
+          <div class="concept-desc">
+            <strong>主轴 (Main Axis)</strong>
+            <span>元素排列的方向，由 flex-direction 决定</span>
+          </div>
+        </div>
+        <div class="concept-item">
+          <div class="concept-visual cross">
+            <span class="arrow">↓</span>
+            <span class="label">交叉轴</span>
+            <span class="arrow">↓</span>
+          </div>
+          <div class="concept-desc">
+            <strong>交叉轴 (Cross Axis)</strong>
+            <span>垂直于主轴，用于对齐元素</span>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="main-area">
       <div class="controls">
         <div class="control-group">
-          <label>方向</label>
+          <label>flex-direction</label>
           <div class="chips">
             <button
               v-for="d in directions"
@@ -22,7 +48,7 @@
           </div>
         </div>
         <div class="control-group">
-          <label>对齐</label>
+          <label>justify-content（主轴对齐）</label>
           <div class="chips">
             <button
               v-for="j in justifies"
@@ -35,7 +61,20 @@
           </div>
         </div>
         <div class="control-group">
-          <label>换行</label>
+          <label>align-items（交叉轴对齐）</label>
+          <div class="chips">
+            <button
+              v-for="a in aligns"
+              :key="a.id"
+              :class="['chip', { active: align === a.id }]"
+              @click="align = a.id"
+            >
+              {{ a.label }}
+            </button>
+          </div>
+        </div>
+        <div class="control-group">
+          <label>flex-wrap</label>
           <div class="chips">
             <button
               v-for="w in wraps"
@@ -51,19 +90,24 @@
 
       <div class="preview-area">
         <div class="canvas" :style="boxStyle">
-          <div v-for="n in 4" :key="n" class="item">{{ n }}</div>
+          <div v-for="n in 6" :key="n" class="item">{{ n }}</div>
+        </div>
+        <div class="axis-hint">
+          <span class="axis-tag main">主轴方向: {{ dir === 'row' ? '水平 →' : '垂直 ↓' }}</span>
+          <span class="axis-tag cross">交叉轴方向: {{ dir === 'row' ? '垂直 ↓' : '水平 →' }}</span>
         </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 class="code-label">CSS</div>
+      <code class="code-text">{{ cssCode }}</code>
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>核心思想：</strong>Flex 让元素自动排列，就像书架上的书会自动对齐一样。
+      <strong>记忆方法：</strong>
+      <code>justify-content</code> 控制主轴方向的对齐（水平时左右，垂直时上下）；
+      <code>align-items</code> 控制交叉轴方向的对齐。
     </div>
   </div>
 </template>
@@ -72,95 +116,188 @@
 import { computed, ref } from 'vue'
 
 const directions = [
-  { id: 'row', label: '水平' },
-  { id: 'column', label: '垂直' }
+  { id: 'row', label: 'row（水平）' },
+  { id: 'column', label: 'column（垂直）' }
 ]
 const justifies = [
-  { id: 'flex-start', label: '靠左' },
-  { id: 'center', label: '居中' },
-  { id: 'space-between', label: '两端' }
+  { id: 'flex-start', label: 'flex-start' },
+  { id: 'center', label: 'center' },
+  { id: 'flex-end', label: 'flex-end' },
+  { id: 'space-between', label: 'space-between' },
+  { id: 'space-around', label: 'space-around' }
+]
+const aligns = [
+  { id: 'stretch', label: 'stretch' },
+  { id: 'flex-start', label: 'flex-start' },
+  { id: 'center', label: 'center' },
+  { id: 'flex-end', label: 'flex-end' }
 ]
 const wraps = [
-  { id: 'nowrap', label: '不换行' },
-  { id: 'wrap', label: '换行' }
+  { id: 'nowrap', label: 'nowrap' },
+  { id: 'wrap', label: 'wrap' }
 ]
 
 const dir = ref('row')
 const justify = ref('flex-start')
+const align = ref('stretch')
 const wrap = ref('nowrap')
 
 const boxStyle = computed(() => ({
   display: 'flex',
   flexDirection: dir.value,
   justifyContent: justify.value,
+  alignItems: align.value,
   flexWrap: wrap.value,
   gap: '8px',
-  minHeight: dir.value === 'column' ? '140px' : '60px',
-  padding: '12px'
+  minHeight: dir.value === 'column' ? '240px' : '100px'
 }))
+
+const cssCode = computed(() => {
+  const parts = ['display: flex']
+  if (dir.value !== 'row') parts.push(`flex-direction: ${dir.value}`)
+  if (justify.value !== 'flex-start') parts.push(`justify-content: ${justify.value}`)
+  if (align.value !== 'stretch') parts.push(`align-items: ${align.value}`)
+  if (wrap.value !== 'nowrap') parts.push(`flex-wrap: ${wrap.value}`)
+  return parts.join('; ') + ';'
+})
 </script>
 
 <style scoped>
 .flex-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;
+}
+
+.axis-concept {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.concept-row {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.concept-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.concept-visual {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.4rem 0.6rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.concept-visual.main {
+  background: rgba(14, 165, 233, 0.15);
+  color: var(--vp-c-brand);
+}
+
+.concept-visual.cross {
+  background: rgba(34, 197, 94, 0.15);
+  color: #16a34a;
+}
+
+.concept-visual .arrow {
+  font-size: 0.7rem;
+}
+
+.concept-visual .label {
+  font-weight: 600;
+}
+
+.concept-desc {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.concept-desc strong {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+}
+
+.concept-desc span {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
 
 .main-area {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 1rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1rem;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .main-area { grid-template-columns: 1fr; }
 }
 
 .controls {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.75rem;
+  min-width: 200px;
 }
 
 .control-group {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.35rem;
 }
 
 .control-group label {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
 }
 
 .chips {
   display: flex;
-  gap: 0.25rem;
+  flex-wrap: wrap;
+  gap: 0.35rem;
 }
 
 .chip {
-  padding: 0.25rem 0.5rem;
+  padding: 0.3rem 0.5rem;
   border-radius: 4px;
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg);
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
+  font-family: var(--vp-font-family-mono);
   transition: all 0.2s;
 }
 
@@ -174,15 +311,16 @@ const boxStyle = computed(() => ({
 .preview-area {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
+  border-radius: 8px;
   overflow: hidden;
 }
 
 .canvas {
   background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
   background-size: 16px 16px;
-  border-radius: 6px;
+  border-radius: 8px;
   transition: all 0.3s;
+  padding: 12px;
 }
 
 .item {
@@ -196,17 +334,44 @@ const boxStyle = computed(() => ({
   place-items: center;
   font-size: 14px;
   flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.axis-hint {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--vp-c-bg-soft);
+  border-top: 1px solid var(--vp-c-divider);
+  flex-wrap: wrap;
+}
+
+.axis-tag {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-family: var(--vp-font-family-mono);
+}
+
+.axis-tag.main {
+  background: rgba(14, 165, 233, 0.15);
+  color: var(--vp-c-brand);
+}
+
+.axis-tag.cross {
+  background: rgba(34, 197, 94, 0.15);
+  color: #16a34a;
 }
 
 .code-row {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0.75rem;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  margin-bottom: 1rem;
   flex-wrap: wrap;
 }
 
@@ -214,27 +379,32 @@ const boxStyle = computed(() => ({
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
+  font-family: var(--vp-font-family-mono);
 }
 
 .code-text {
   font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--vp-c-text-1);
-  background: var(--vp-c-bg-alt);
-  padding: 0.2rem 0.4rem;
+  background: var(--vp-c-bg-soft);
+  padding: 0.3rem 0.5rem;
   border-radius: 4px;
+  word-break: break-all;
 }
 
 .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); }
+.info-box code {
+  background: var(--vp-c-bg-soft);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.8rem;
+}
 </style>