style: update border-radius and padding values across components

- standardize border-radius from 8px to 6px for consistent styling
- adjust padding values from 1rem to 0.75rem for better visual hierarchy
- remove redundant overflow-y properties for cleaner code

docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue

@@ -131,34 +131,32 @@ const eras = [
 <style scoped>
 .evolution-timeline {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
-  margin: 1rem 0;
-  max-height: 600px;
-  overflow-y: auto;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
 }
 
 .demo-header .icon {
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .demo-header .title {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 .demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.85rem;
-  margin-left: 0.5rem;
+  font-size: 0.75rem;
+  margin-left: 0.25rem;
 }
 
 .demo-content {
@@ -172,8 +170,8 @@ const eras = [
 
 .era-item {
   display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -195,15 +193,15 @@ const eras = [
 }
 
 .era-dot {
-  width: 48px;
-  height: 48px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
   background: var(--vp-c-brand);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   z-index: 1;
   transition: all 0.3s ease;
 }
@@ -214,20 +212,20 @@ const eras = [
 }
 
 .era-line {
-  width: 4px;
+  width: 2px;
   flex: 1;
   background: var(--vp-c-divider);
-  margin-top: 8px;
-  min-height: 30px;
+  margin-top: 4px;
+  min-height: 20px;
 }
 
 /* 内容区域 */
 .era-content {
   flex: 1;
   background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 0.75rem;
-  border: 2px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.5rem;
+  border: 1px solid var(--vp-c-divider);
   transition: all 0.3s ease;
 }
 
@@ -243,40 +241,40 @@ const eras = [
 .era-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.5rem;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .era-year {
-  padding: 2px 10px;
+  padding: 1px 6px;
   background: var(--vp-c-brand);
   color: white;
-  border-radius: 8px;
-  font-size: 0.75rem;
+  border-radius: 4px;
+  font-size: 0.65rem;
   font-weight: bold;
 }
 
 .era-name {
-  font-size: 1rem;
+  font-size: 0.85rem;
   font-weight: bold;
   color: var(--vp-c-text-1);
 }
 
 .era-brief {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 /* 详情展开 */
 .era-detail {
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 2px dashed var(--vp-c-divider);
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px dashed var(--vp-c-divider);
 }
 
 .detail-section {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.4rem;
 }
 
 .detail-section:last-child {
@@ -284,37 +282,35 @@ const eras = [
 }
 
 .section-title {
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   font-weight: bold;
   color: var(--vp-c-brand);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
-/* 技术标签 */
 .tech-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .tech-tag {
-  padding: 2px 10px;
+  padding: 1px 6px;
   background: var(--vp-c-bg-soft);
   color: var(--vp-c-brand);
-  border-radius: 8px;
-  font-size: 0.75rem;
+  border-radius: 4px;
+  font-size: 0.65rem;
   font-weight: 500;
 }
 
-/* 比喻框 */
 .metaphor-box {
   background: var(--vp-c-bg-alt);
-  border-left: 4px solid var(--vp-c-brand);
-  padding: 0.75rem;
-  border-radius: 6px;
-  font-size: 0.8rem;
+  border-left: 2px solid var(--vp-c-brand);
+  padding: 0.4rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
   color: var(--vp-c-text-2);
-  line-height: 1.6;
+  line-height: 1.5;
 }
 
 /* 动画 */
@@ -332,7 +328,7 @@ const eras = [
 
 .expand-enter-to,
 .expand-leave-from {
-  max-height: 600px;
+  
   opacity: 1;
 }
 

docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue

@@ -231,12 +231,10 @@ function updateJq(change) {
 <style scoped>
 .imperative-declarative-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
-  margin: 1rem 0;
-  max-height: 600px;
-  overflow-y: auto;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
 }
 
 /* 标题区 */
@@ -344,8 +342,8 @@ function updateJq(change) {
 .counter-ui {
   background-color: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
+  border-radius: 6px;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;

docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue

@@ -217,12 +217,10 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 <style scoped>
 .jquery-vs-state-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
-  margin: 1rem 0;
-  max-height: 600px;
-  overflow-y: auto;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
 }
 
 /* 标题区 */
@@ -260,7 +258,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   margin-bottom: 1rem;
   background: var(--vp-c-bg);
   padding: 0.5rem;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
 }
 
@@ -319,7 +317,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 /* 场景面板 */
 .scenario-panel {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
   overflow: hidden;
 }
@@ -344,7 +342,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 }
 
 .scenario-content {
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .step-list {
@@ -395,7 +393,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 /* 账本面板 */
 .ledger-panel {
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
   overflow: hidden;
 }
@@ -439,7 +437,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 }
 
 .ledger-content {
-  padding: 1rem;
+  padding: 0.75rem;
 }
 
 .order-list {

docs/.vitepress/theme/components/appendix/frontend-evolution/RenderingStrategyDemo.vue

@@ -359,7 +359,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   gap: 4px;
   padding: 16px;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   background: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -453,7 +453,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   width: 48px;
   height: 48px;
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -571,7 +571,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .info-label {
   padding: 8px 16px;
   background: #e0e0e0;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 /* 性能指标 */
@@ -627,7 +627,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .btn {
   padding: 12px 24px;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;

docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue

@@ -299,7 +299,7 @@ const clothes = [
   color: #666;
   background: #f8f9fa;
   padding: 8px;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 /* 衣柜展示 */

docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue

@@ -545,7 +545,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   width: 100%;
   padding: 8px 12px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -580,7 +580,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .nav-btn {
   padding: 8px 16px;
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: white;
   cursor: pointer;
   font-size: 13px;
@@ -607,7 +607,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .status-indicator {
   text-align: center;
   padding: 12px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-size: 13px;
 }
 
@@ -621,14 +621,14 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   background: #fff3e0;
   color: #e65100;
   padding: 8px 16px;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .status-text.spa {
   background: #e3f2fd;
   color: #1565c0;
   padding: 8px 16px;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .status-icon {

docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue

@@ -255,12 +255,10 @@ const resetStats = () => {
 <style scoped>
 .slice-request-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
-  margin: 1rem 0;
-  max-height: 600px;
-  overflow-y: auto;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
 }
 
 /* 标题区 */
@@ -320,8 +318,8 @@ const resetStats = () => {
 .mode-card {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
+  border-radius: 6px;
+  padding: 0.75rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
@@ -382,9 +380,9 @@ const resetStats = () => {
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1rem;
-  padding: 1rem;
+  padding: 0.75rem;
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
 }
 
@@ -481,8 +479,8 @@ const resetStats = () => {
 
 .stat-item {
   background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
+  border-radius: 6px;
+  padding: 0.75rem;
   text-align: center;
   border: 2px solid var(--vp-c-divider);
 }