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

docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="tech-stack-timeline-demo">
     <div class="demo-header">
-      <h4>📚 技术栈演进时间线</h4>
-      <p>每个时代的主流技术栈</p>
+      <span class="icon">📚</span>
+      <span class="title">技术栈演进时间线</span>
+      <span class="subtitle">每个时代的主流技术栈</span>
     </div>
 
     <div class="timeline">
@@ -106,6 +107,8 @@ const eras = [
   background: var(--vp-c-bg-soft);
   padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
@@ -247,4 +250,23 @@ const eras = [
     grid-template-columns: 1fr;
   }
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>