优化 Debug EML 调试页面布局

client/src/views/debug/DebugEmlSuperAgentRunView.vue

@@ -1,18 +1,43 @@
 <template>
   <div class="th-page debug-eml-view">
-    <header class="page-heading">
+    <header class="debug-eml-hero">
-      <div>
+      <div class="debug-eml-hero__copy">
         <h1>{{ t('debugEml.title') }}</h1>
         <p>{{ t('debugEml.subtitle') }}</p>
       </div>
+
+      <dl class="debug-eml-status-strip">
+        <div>
+          <dt>{{ t('debugEml.status') }}</dt>
+          <dd>{{ statusLabel }}</dd>
+        </div>
+        <div>
+          <dt>{{ t('debugEml.debugRunId') }}</dt>
+          <dd class="th-code">
+            {{ result?.debug_run_id ?? '-' }}
+          </dd>
+        </div>
+        <div>
+          <dt>{{ t('debugEml.backendStatus') }}</dt>
+          <dd class="th-code">
+            {{ result?.status ?? '-' }}
+          </dd>
+        </div>
+      </dl>
     </header>
 
+    <div class="debug-eml-workspace">
+      <aside class="debug-eml-panel">
         <form
-      class="th-section debug-eml-form"
+          class="debug-eml-card debug-eml-form"
           @submit.prevent="submitUpload"
         >
           <div class="th-section-header">
             <h2 class="th-section-title">
+              <i
+                class="pi pi-upload"
+                aria-hidden="true"
+              />
               {{ t('debugEml.uploadConfig') }}
             </h2>
           </div>
@@ -65,20 +90,32 @@
               class="primary-button"
               :disabled="submitDisabled"
             >
+              <i
+                class="pi pi-send"
+                aria-hidden="true"
+              />
               {{ busy ? t('debugEml.submitting') : t('debugEml.submit') }}
             </button>
             <span
               v-if="selectedFile"
-          class="th-muted"
+              class="debug-eml-selected-file"
             >
+              <i
+                class="pi pi-file"
+                aria-hidden="true"
+              />
               {{ selectedFile.name }}
             </span>
           </div>
         </form>
 
-    <section class="th-section debug-eml-status">
+        <section class="debug-eml-card debug-eml-status">
           <div class="th-section-header">
             <h2 class="th-section-title">
+              <i
+                class="pi pi-info-circle"
+                aria-hidden="true"
+              />
               {{ t('debugEml.executionStatus') }}
             </h2>
           </div>
@@ -117,11 +154,17 @@
             </small>
           </div>
         </section>
+      </aside>
 
+      <main class="debug-eml-results">
         <template v-if="result">
-      <section class="th-section">
+          <section class="debug-eml-card">
             <div class="th-section-header">
               <h2 class="th-section-title">
+                <i
+                  class="pi pi-sitemap"
+                  aria-hidden="true"
+                />
                 {{ t('debugEml.sourceTrace') }}
               </h2>
             </div>
@@ -153,9 +196,13 @@
             </dl>
           </section>
 
-      <section class="th-section debug-eml-preview-section">
+          <section class="debug-eml-card debug-eml-preview-section">
             <div class="th-section-header">
               <h2 class="th-section-title">
+                <i
+                  class="pi pi-envelope"
+                  aria-hidden="true"
+                />
                 {{ t('debugEml.mailPreview') }}
               </h2>
             </div>
@@ -211,9 +258,13 @@
             </details>
           </section>
 
-      <section class="th-section debug-eml-result-section">
+          <section class="debug-eml-card debug-eml-result-section">
             <div class="th-section-header">
               <h2 class="th-section-title">
+                <i
+                  class="pi pi-bolt"
+                  aria-hidden="true"
+                />
                 {{ t('debugEml.superAgentResult') }}
               </h2>
             </div>
@@ -257,15 +308,31 @@
             </div>
           </section>
 
-      <section class="th-section">
+          <section class="debug-eml-card">
             <div class="th-section-header">
               <h2 class="th-section-title">
+                <i
+                  class="pi pi-code"
+                  aria-hidden="true"
+                />
                 {{ t('debugEml.debugPayload') }}
               </h2>
             </div>
             <pre>{{ formatJson(result.agentbus_like_payload) }}</pre>
           </section>
         </template>
+
+        <section
+          v-else
+          class="debug-eml-card debug-eml-empty-panel"
+        >
+          <div class="empty-state">
+            <strong>{{ t('debugEml.executionStatus') }}</strong>
+            <span>{{ busy ? t('debugEml.waitingSuperAgent') : t('common.noData') }}</span>
+          </div>
+        </section>
+      </main>
+    </div>
   </div>
 </template>
 
@@ -383,23 +450,108 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 <style scoped>
 .debug-eml-view {
-  max-width: 1320px;
+  max-width: 1440px;
+  display: grid;
+  gap: 18px;
 }
 
-.page-heading h1,
+.debug-eml-hero {
-.page-heading p {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
+  gap: 18px;
+  align-items: stretch;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 14px;
+  background:
+    linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(248 250 252 / 92%)),
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 34%);
+  box-shadow: 0 20px 50px rgb(15 23 42 / 6%);
+  padding: 22px;
+}
+
+.debug-eml-hero__copy {
+  min-width: 0;
+  display: grid;
+  align-content: center;
+  gap: 8px;
+}
+
+.debug-eml-hero__copy h1,
+.debug-eml-hero__copy p {
   margin: 0;
 }
 
-.page-heading h1 {
+.debug-eml-hero__copy h1 {
   color: var(--th-color-slate-900);
   font-size: 28px;
+  line-height: 1.2;
 }
 
-.page-heading p {
+.debug-eml-hero__copy p {
-  margin-top: 8px;
+  max-width: 760px;
   color: var(--th-color-slate-500);
   font-size: 14px;
+  line-height: 1.7;
+}
+
+.debug-eml-status-strip {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin: 0;
+}
+
+.debug-eml-status-strip div {
+  min-width: 0;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 10px;
+  background: rgb(255 255 255 / 82%);
+  padding: 14px;
+}
+
+.debug-eml-status-strip dt {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.debug-eml-status-strip dd {
+  margin: 7px 0 0;
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+
+.debug-eml-workspace {
+  display: grid;
+  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.debug-eml-panel {
+  position: sticky;
+  top: calc(var(--th-topbar-height) + 18px);
+  display: grid;
+  gap: 14px;
+}
+
+.debug-eml-results {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.debug-eml-card {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 12px;
+  background: rgb(255 255 255 / 96%);
+  box-shadow: 0 12px 30px rgb(15 23 42 / 5%);
+  padding: 18px;
 }
 
 .debug-eml-form,
@@ -412,8 +564,8 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: 1fr;
-  gap: 14px;
+  gap: 13px;
 }
 
 .debug-eml-grid label {
@@ -425,12 +577,36 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .debug-eml-grid input {
-  min-height: 38px;
+  width: 100%;
-  border: 1px solid var(--th-color-slate-200);
+  min-height: 40px;
-  border-radius: var(--th-radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.45);
+  border-radius: 8px;
   background: var(--th-color-white);
   color: var(--th-color-slate-900);
   padding: 0 12px;
+  font: inherit;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.debug-eml-grid input[type='file'] {
+  min-height: auto;
+  padding: 9px 10px;
+  color: var(--th-color-slate-600);
+  font-size: 12px;
+}
+
+.debug-eml-grid input:focus {
+  outline: none;
+  border-color: var(--th-color-blue-600);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+}
+
+.debug-eml-grid input:disabled {
+  cursor: not-allowed;
+  background: var(--th-color-slate-50);
+  color: var(--th-color-slate-500);
 }
 
 .debug-eml-actions {
@@ -441,19 +617,49 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .primary-button {
-  min-height: 38px;
+  min-height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   border: 0;
-  border-radius: var(--th-radius-sm);
+  border-radius: 9px;
   background: var(--th-color-blue-600);
   color: var(--th-color-white);
-  padding: 0 16px;
+  padding: 0 18px;
   font-weight: 800;
   cursor: pointer;
+  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.primary-button:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.25);
 }
 
 .primary-button:disabled {
   cursor: not-allowed;
   opacity: 0.55;
+  box-shadow: none;
+}
+
+.debug-eml-selected-file {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 999px;
+  background: var(--th-color-slate-50);
+  color: var(--th-color-slate-600);
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
 }
 
 .empty-state {
@@ -465,6 +671,9 @@ function formatMediaSize(sizeBytes: number | null): string {
   font-size: 13px;
   padding: 24px;
   text-align: center;
+  border: 1px dashed rgba(148, 163, 184, 0.38);
+  border-radius: 10px;
+  background: var(--th-color-slate-50);
 }
 
 .empty-state strong {
@@ -472,13 +681,17 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .empty-state--error {
+  place-items: start;
   color: var(--th-color-danger);
+  text-align: left;
+  background: rgba(220, 38, 38, 0.06);
+  border-color: rgba(220, 38, 38, 0.22);
 }
 
 .debug-eml-kv {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: 1fr;
-  gap: 12px;
+  gap: 10px;
   margin: 0;
 }
 
@@ -488,10 +701,10 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-kv div {
   min-width: 0;
-  border: 1px solid var(--th-color-slate-200);
+  border: 1px solid rgba(148, 163, 184, 0.25);
-  border-radius: var(--th-radius-sm);
+  border-radius: 10px;
   padding: 12px;
-  background: var(--th-color-white);
+  background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
 }
 
 .debug-eml-kv dt {
@@ -510,7 +723,8 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-callout {
   margin: 0;
-  border-radius: var(--th-radius-sm);
+  border: 1px solid rgba(37, 99, 235, 0.16);
+  border-radius: 10px;
   background: rgba(37, 99, 235, 0.08);
   color: var(--th-color-blue-600);
   padding: 12px;
@@ -521,10 +735,12 @@ function formatMediaSize(sizeBytes: number | null): string {
 .debug-eml-html-preview {
   max-height: 520px;
   overflow: auto;
-  border: 1px solid var(--th-color-slate-200);
+  border: 1px solid rgba(148, 163, 184, 0.28);
-  border-radius: var(--th-radius-sm);
+  border-radius: 10px;
   background: var(--th-color-white);
-  padding: 16px;
+  padding: 18px;
+  color: var(--th-color-slate-900);
+  line-height: 1.65;
 }
 
 .debug-eml-media-list {
@@ -551,11 +767,12 @@ function formatMediaSize(sizeBytes: number | null): string {
 
 .debug-eml-media-list li {
   display: grid;
-  grid-template-columns: 140px minmax(0, 1fr) 220px;
+  grid-template-columns: minmax(100px, 140px) minmax(0, 1fr) minmax(170px, 220px);
   gap: 12px;
   align-items: center;
-  border: 1px solid var(--th-color-slate-200);
+  border: 1px solid rgba(148, 163, 184, 0.25);
-  border-radius: var(--th-radius-sm);
+  border-radius: 10px;
+  background: var(--th-color-slate-50);
   padding: 10px 12px;
 }
 
@@ -572,8 +789,9 @@ function formatMediaSize(sizeBytes: number | null): string {
 }
 
 .debug-eml-raw-html {
-  border: 1px solid var(--th-color-slate-200);
+  border: 1px solid rgba(148, 163, 184, 0.28);
-  border-radius: var(--th-radius-sm);
+  border-radius: 10px;
+  background: var(--th-color-slate-50);
   padding: 12px;
 }
 
@@ -588,13 +806,22 @@ pre {
   max-height: 420px;
   overflow: auto;
   margin: 0;
-  border: 1px solid var(--th-color-slate-200);
+  border: 1px solid rgba(148, 163, 184, 0.28);
-  border-radius: var(--th-radius-sm);
+  border-radius: 10px;
-  background: var(--th-color-slate-50);
+  background: #0f172a;
-  color: var(--th-color-slate-900);
+  color: #dbeafe;
   padding: 12px;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.debug-eml-result-section pre,
+.debug-eml-card > pre,
+.debug-eml-raw-html pre {
+  background: #0f172a;
+  color: #dbeafe;
 }
 
 .debug-eml-two-column {
@@ -606,6 +833,7 @@ pre {
 .debug-eml-two-column section {
   display: grid;
   gap: 10px;
+  min-width: 0;
 }
 
 .debug-eml-warning-list {
@@ -614,7 +842,7 @@ pre {
 }
 
 .debug-eml-warning-list li {
-  border-radius: var(--th-radius-sm);
+  border-radius: 10px;
   background: rgba(245, 158, 11, 0.12);
   color: #92400e;
   padding: 10px 12px;
@@ -622,13 +850,62 @@ pre {
   font-weight: 700;
 }
 
+.debug-eml-empty-panel {
+  min-height: 360px;
+  align-content: center;
+}
+
+.th-section-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.th-section-title i {
+  color: var(--th-color-blue-600);
+  font-size: 14px;
+}
+
+@media (max-width: 1180px) {
+  .debug-eml-hero,
+  .debug-eml-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .debug-eml-panel {
+    position: static;
+  }
+
+  .debug-eml-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 920px) {
-  .debug-eml-grid,
+  .debug-eml-status-strip,
   .debug-eml-kv,
   .debug-eml-kv--grid,
   .debug-eml-two-column,
   .debug-eml-media-list li {
     grid-template-columns: 1fr;
   }
+
+  .debug-eml-hero {
+    padding: 18px;
+  }
+}
+
+@media (max-width: 640px) {
+  .debug-eml-hero__copy h1 {
+    font-size: 24px;
+  }
+
+  .debug-eml-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .debug-eml-card {
+    padding: 16px;
+  }
 }
 </style>