feat: 更新附录交互组件和文档

docs/.vitepress/theme/components/appendix/api-design/ApiRequestDemo.vue

@@ -14,9 +14,7 @@
             </div>
             <div class="t-line">
               <span class="t-ps">&gt; </span>
-              <span class="t-typing"
-                >{{ typing }}<span class="t-cur">▋</span></span
-              >
+              <span class="t-typing">{{ typing }}<span class="t-cur">▋</span></span>
             </div>
           </div>
         </div>

docs/.vitepress/theme/components/appendix/api-design/DataFieldDesignDemo.vue

@@ -29,8 +29,7 @@
     "id": 123,
     "name": "张三"
   }
-}</pre
-            >
+}</pre>
           </div>
           <div class="compare-col">
             <div class="compare-title">列表</div>
@@ -44,8 +43,7 @@
       "total": 100
     }
   }
-}</pre
-            >
+}</pre>
           </div>
         </div>
         <div class="note">
@@ -79,8 +77,7 @@
   "created_at": "2024-01-15T09:30:00.000Z",
   "updated_at": "2024-01-15T10:00:00.000Z",
   "expired_at": "2025-01-15T00:00:00.000Z"
-}</pre
-          >
+}</pre>
         </div>
         <div class="time-rules">
           <div class="time-rule">
@@ -97,9 +94,7 @@
           </div>
           <div class="time-rule">
             <span class="rule-label">命名</span>
-            <span class="rule-value"
-              >xxx_at 表示时间点，xxx_duration 表示时长</span
-            >
+            <span class="rule-value">xxx_at 表示时间点，xxx_duration 表示时长</span>
           </div>
         </div>
       </div>
@@ -114,8 +109,7 @@
   "name": "张三",
   "nickname": null,
   "avatar": null
-}</pre
-            >
+}</pre>
             <div class="compare-desc">字段存在但无值时返回 null</div>
           </div>
           <div class="compare-col bad-col">
@@ -123,8 +117,7 @@
             <pre class="code-sm">
 {
   "name": "张三"
-}</pre
-            >
+}</pre>
             <div class="compare-desc">省略字段，前端需判断是否存在</div>
           </div>
         </div>
@@ -156,9 +149,7 @@
 
     <div class="tips">
       <span class="tips-icon">💡</span>
-      <span class="tips-text"
-        >参考 ISO 8601 时间标准，字段命名保持 snake_case 风格</span
-      >
+      <span class="tips-text">参考 ISO 8601 时间标准，字段命名保持 snake_case 风格</span>
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/api-design/ErrorResponseDesignDemo.vue

@@ -37,8 +37,7 @@
       }
     ]
   }
-}</pre
-        >
+}</pre>
         <div class="field-tips">
           <div class="tip-row">
             <code>field</code>
@@ -67,8 +66,7 @@
     "shortfall": 49.00,
     "suggestion": "请充值后重试"
   }
-}</pre
-        >
+}</pre>
         <div class="business-tips">
           <div class="b-tip">✓ 返回当前状态数据，便于前端展示</div>
           <div class="b-tip">✓ 提供 suggestion 给出解决建议</div>
@@ -166,9 +164,7 @@
 
     <div class="tips">
       <span class="tips-icon">💡</span>
-      <span class="tips-text"
-        >错误信息要"机器可读 + 人类友好"，便于前端统一处理</span
-      >
+      <span class="tips-text">错误信息要"机器可读 + 人类友好"，便于前端统一处理</span>
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue

@@ -29,8 +29,7 @@
 { "result": { "user": {...} } }
 
 // 接口 C
-{ "user": {...} }</pre
-          >
+{ "user": {...} }</pre>
           <div class="problem-desc">
             前端需要针对每个接口单独处理，代码冗余，容易出错
           </div>
@@ -43,8 +42,7 @@
   "message": "success",
   "data": { ... },
   "request_id": "req-xxx"
-}</pre
-          >
+}</pre>
         </div>
       </div>
 
@@ -141,8 +139,7 @@
   "total": 156,
   "total_pages": 8,
   "has_next": true
-}</pre
-            >
+}</pre>
           </div>
         </div>
       </div>
@@ -150,9 +147,7 @@
 
     <div class="tips">
       <span class="tips-icon">💡</span>
-      <span class="tips-text"
-        >request_id 用于问题追踪，建议使用 UUID v4 或雪花算法生成</span
-      >
+      <span class="tips-text">request_id 用于问题追踪，建议使用 UUID v4 或雪花算法生成</span>
     </div>
   </div>
 </template>

docs/.vitepress/theme/components/appendix/api-design/RestfulApiFlow.vue

@@ -14,8 +14,8 @@
               v-for="s in scenarios"
               :key="s.id"
               :class="['raf-chip', { active: currentScenario.id === s.id }]"
-              @click="selectScenario(s)"
               :disabled="processing"
+              @click="selectScenario(s)"
             >
               {{ s.label }}
             </button>
@@ -34,14 +34,14 @@
           </div>
           <button
             class="raf-send-btn"
-            @click="sendRequest"
             :disabled="processing"
+            @click="sendRequest"
           >
             {{ processing ? 'Sending...' : 'Send Request' }}
           </button>
         </div>
 
-        <div class="raf-response-box" v-if="response">
+        <div v-if="response" class="raf-response-box">
           <div class="raf-status-line">
             <span class="raf-label">Response Status:</span>
             <span
@@ -82,7 +82,7 @@
           <!-- Logs -->
           <div class="raf-section">
             <div class="raf-section-title">📜 Server Logs</div>
-            <div class="raf-logs" ref="logsRef">
+            <div ref="logsRef" class="raf-logs">
               <div v-for="(log, i) in logs" :key="i" class="raf-log-line">
                 <span class="raf-log-time">[{{ log.time }}]</span>
                 <span :class="log.type">{{ log.msg }}</span>