使用element ui

apps/frontend/src/views/admin/webhook-events/AdminWebhookEventDetailView.vue

@@ -100,11 +100,11 @@ onMounted(loadDetail)
       >
     </AdminPageHeader>
 
-    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
-    <div v-if="loading" class="empty-block">Webhook 详情加载中</div>
+    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" />
+    <el-skeleton v-if="loading" :rows="8" animated />
 
     <template v-else-if="detail">
-      <section class="info-card">
+      <el-card shadow="never" class="section-card">
         <div class="overview-top">
           <div>
             <h3>{{ formatAdminWebhookEventType(detail.eventType) }}</h3>
@@ -175,9 +175,9 @@ onMounted(loadDetail)
         </div>
 
         <div v-if="detail.processError" class="inline-error">{{ detail.processError }}</div>
-      </section>
+      </el-card>
 
-      <section v-if="lastReplayResult" class="info-card">
+      <el-card v-if="lastReplayResult" shadow="never" class="section-card">
         <h3>最近一次重放结果</h3>
         <p class="result-copy">
           {{ lastReplayResult.provider }} / {{ lastReplayResult.platform }}
@@ -202,27 +202,27 @@ onMounted(loadDetail)
             </template>
           </el-table-column>
         </el-table>
-      </section>
+      </el-card>
 
-      <section class="info-card">
+      <el-card shadow="never" class="section-card">
         <h3>解析后的 Payload</h3>
         <pre class="json-block">{{ prettyJson(detail.payload) }}</pre>
-      </section>
+      </el-card>
 
-      <section class="info-card">
+      <el-card shadow="never" class="section-card">
         <h3>Headers</h3>
         <pre class="json-block">{{ prettyJson(detail.headers) }}</pre>
-      </section>
+      </el-card>
 
-      <section class="info-card">
+      <el-card shadow="never" class="section-card">
         <h3>Query</h3>
         <pre class="json-block">{{ prettyJson(detail.query) }}</pre>
-      </section>
+      </el-card>
 
-      <section class="info-card">
+      <el-card shadow="never" class="section-card">
         <h3>Body</h3>
         <pre class="json-block">{{ prettyJson(detail.body) }}</pre>
-      </section>
+      </el-card>
     </template>
   </section>
 </template>
@@ -233,15 +233,6 @@ onMounted(loadDetail)
   gap: var(--space-4);
 }
 
-.info-card,
-.empty-block,
-.error-copy {
-  padding: 18px;
-  border-radius: var(--radius-lg);
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-}
-
 .overview-top {
   display: flex;
   justify-content: space-between;
@@ -250,7 +241,7 @@ onMounted(loadDetail)
 }
 
 .overview-top h3,
-.info-card h3 {
+.section-card h3 {
   margin: 0;
   color: var(--text-primary);
 }
@@ -319,10 +310,6 @@ onMounted(loadDetail)
   white-space: pre-wrap;
 }
 
-.error-copy {
-  color: var(--color-danger);
-}
-
 .inline-error {
   margin-top: var(--space-4);
   padding: var(--space-3) 14px;