优化 Debug EML 调试页面布局
This commit is contained in:
andy
@@ -1,88 +1,12 @@
|
||||
<template>
|
||||
<div class="th-page debug-eml-view">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<header class="debug-eml-hero">
|
||||
<div class="debug-eml-hero__copy">
|
||||
<h1>{{ t('debugEml.title') }}</h1>
|
||||
<p>{{ t('debugEml.subtitle') }}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<form
|
||||
class="th-section debug-eml-form"
|
||||
@submit.prevent="submitUpload"
|
||||
>
|
||||
<div class="th-section-header">
|
||||
<h2 class="th-section-title">
|
||||
{{ t('debugEml.uploadConfig') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="debug-eml-grid">
|
||||
<label>
|
||||
<span>{{ t('debugEml.hotelId') }}</span>
|
||||
<input
|
||||
v-model="hotelId"
|
||||
name="hotel_id"
|
||||
type="text"
|
||||
:disabled="busy"
|
||||
autocomplete="off"
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ t('debugEml.debugUploadKey') }}</span>
|
||||
<input
|
||||
v-model="debugUploadKey"
|
||||
name="debug_upload_key"
|
||||
type="password"
|
||||
:disabled="busy"
|
||||
autocomplete="off"
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ t('debugEml.runLabel') }}</span>
|
||||
<input
|
||||
v-model="runLabel"
|
||||
name="run_label"
|
||||
type="text"
|
||||
:disabled="busy"
|
||||
autocomplete="off"
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ t('debugEml.emlFile') }}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept=".eml,message/rfc822"
|
||||
:disabled="busy"
|
||||
@change="onFileChange"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="debug-eml-actions">
|
||||
<button
|
||||
type="submit"
|
||||
class="primary-button"
|
||||
:disabled="submitDisabled"
|
||||
>
|
||||
{{ busy ? t('debugEml.submitting') : t('debugEml.submit') }}
|
||||
</button>
|
||||
<span
|
||||
v-if="selectedFile"
|
||||
class="th-muted"
|
||||
>
|
||||
{{ selectedFile.name }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section class="th-section debug-eml-status">
|
||||
<div class="th-section-header">
|
||||
<h2 class="th-section-title">
|
||||
{{ t('debugEml.executionStatus') }}
|
||||
</h2>
|
||||
</div>
|
||||
<dl class="debug-eml-kv">
|
||||
<dl class="debug-eml-status-strip">
|
||||
<div>
|
||||
<dt>{{ t('debugEml.status') }}</dt>
|
||||
<dd>{{ statusLabel }}</dd>
|
||||
@@ -100,172 +24,315 @@
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p
|
||||
v-if="busy"
|
||||
class="debug-eml-callout"
|
||||
>
|
||||
{{ t('debugEml.waitingSuperAgent') }}
|
||||
</p>
|
||||
<div
|
||||
v-if="errorCode"
|
||||
class="empty-state empty-state--error"
|
||||
>
|
||||
<strong>{{ errorCode }}</strong>
|
||||
<span>{{ errorDisplayMessage }}</span>
|
||||
<small v-if="errorMessage">
|
||||
{{ t('debugEml.backendMessage') }}: {{ errorMessage }}
|
||||
</small>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<template v-if="result">
|
||||
<section class="th-section">
|
||||
<div class="th-section-header">
|
||||
<h2 class="th-section-title">
|
||||
{{ t('debugEml.sourceTrace') }}
|
||||
</h2>
|
||||
</div>
|
||||
<dl class="debug-eml-kv debug-eml-kv--grid">
|
||||
<div>
|
||||
<dt>{{ t('debugEml.sourceMessageId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.source_message_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.sourceProvider') }}</dt>
|
||||
<dd>
|
||||
{{ result.source_provider ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.externalMessageId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.external_message_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.externalConversationId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.external_conversation_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="th-section debug-eml-preview-section">
|
||||
<div class="th-section-header">
|
||||
<h2 class="th-section-title">
|
||||
{{ t('debugEml.mailPreview') }}
|
||||
</h2>
|
||||
</div>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="renderableHtmlBody"
|
||||
class="debug-eml-html-preview"
|
||||
v-html="renderableHtmlBody"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<div
|
||||
v-else
|
||||
class="empty-state"
|
||||
<div class="debug-eml-workspace">
|
||||
<aside class="debug-eml-panel">
|
||||
<form
|
||||
class="debug-eml-card debug-eml-form"
|
||||
@submit.prevent="submitUpload"
|
||||
>
|
||||
{{ t('debugEml.noSafeHtml') }}
|
||||
</div>
|
||||
<div class="th-section-header">
|
||||
<h2 class="th-section-title">
|
||||
<i
|
||||
class="pi pi-upload"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ t('debugEml.uploadConfig') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="debug-eml-media-list">
|
||||
<h3>{{ t('debugEml.uploadedMedia') }}</h3>
|
||||
<ul v-if="result.uploaded_media.length">
|
||||
<li
|
||||
v-for="(media, index) in result.uploaded_media"
|
||||
:key="media.external_media_id ?? media.object_key ?? index"
|
||||
>
|
||||
<span>{{ media.media_type ?? '-' }}</span>
|
||||
<a
|
||||
v-if="safeExternalUrl(media.external_url)"
|
||||
:href="safeExternalUrl(media.external_url)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div class="debug-eml-grid">
|
||||
<label>
|
||||
<span>{{ t('debugEml.hotelId') }}</span>
|
||||
<input
|
||||
v-model="hotelId"
|
||||
name="hotel_id"
|
||||
type="text"
|
||||
:disabled="busy"
|
||||
autocomplete="off"
|
||||
>
|
||||
{{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
|
||||
</a>
|
||||
<strong v-else>
|
||||
{{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
|
||||
</strong>
|
||||
<small>
|
||||
{{ media.content_type ?? '-' }} / {{ formatMediaSize(media.size_bytes) }}
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
<p
|
||||
v-else
|
||||
class="th-muted"
|
||||
>
|
||||
{{ t('common.noData') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<details class="debug-eml-raw-html">
|
||||
<summary>{{ t('debugEml.rawHtml') }}</summary>
|
||||
<pre>{{ result.html_body_with_oss_urls ?? '-' }}</pre>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="th-section debug-eml-result-section">
|
||||
<div class="th-section-header">
|
||||
<h2 class="th-section-title">
|
||||
{{ t('debugEml.superAgentResult') }}
|
||||
</h2>
|
||||
</div>
|
||||
<dl class="debug-eml-kv debug-eml-kv--grid">
|
||||
<div>
|
||||
<dt>{{ t('debugEml.superAgentSessionId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.superagent_session_id ?? '-' }}
|
||||
</dd>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ t('debugEml.debugUploadKey') }}</span>
|
||||
<input
|
||||
v-model="debugUploadKey"
|
||||
name="debug_upload_key"
|
||||
type="password"
|
||||
:disabled="busy"
|
||||
autocomplete="off"
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ t('debugEml.runLabel') }}</span>
|
||||
<input
|
||||
v-model="runLabel"
|
||||
name="run_label"
|
||||
type="text"
|
||||
:disabled="busy"
|
||||
autocomplete="off"
|
||||
>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ t('debugEml.emlFile') }}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept=".eml,message/rfc822"
|
||||
:disabled="busy"
|
||||
@change="onFileChange"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.superAgentRunId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.superagent_run_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="debug-eml-two-column">
|
||||
<section>
|
||||
<h3>{{ t('debugEml.parsedJson') }}</h3>
|
||||
<pre>{{ formatJson(result.superagent_parsed_json) }}</pre>
|
||||
</section>
|
||||
<section>
|
||||
<h3>{{ t('debugEml.rawAnswer') }}</h3>
|
||||
<pre>{{ result.superagent_raw_answer ?? '-' }}</pre>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
v-if="result.warnings.length"
|
||||
class="debug-eml-warning-list"
|
||||
>
|
||||
<h3>{{ t('debugEml.warnings') }}</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="warning in result.warnings"
|
||||
:key="warning"
|
||||
|
||||
<div class="debug-eml-actions">
|
||||
<button
|
||||
type="submit"
|
||||
class="primary-button"
|
||||
:disabled="submitDisabled"
|
||||
>
|
||||
{{ warning }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<i
|
||||
class="pi pi-send"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ busy ? t('debugEml.submitting') : t('debugEml.submit') }}
|
||||
</button>
|
||||
<span
|
||||
v-if="selectedFile"
|
||||
class="debug-eml-selected-file"
|
||||
>
|
||||
<i
|
||||
class="pi pi-file"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ selectedFile.name }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section class="th-section">
|
||||
<div class="th-section-header">
|
||||
<h2 class="th-section-title">
|
||||
{{ t('debugEml.debugPayload') }}
|
||||
</h2>
|
||||
</div>
|
||||
<pre>{{ formatJson(result.agentbus_like_payload) }}</pre>
|
||||
</section>
|
||||
</template>
|
||||
<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>
|
||||
<dl class="debug-eml-kv">
|
||||
<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>
|
||||
<p
|
||||
v-if="busy"
|
||||
class="debug-eml-callout"
|
||||
>
|
||||
{{ t('debugEml.waitingSuperAgent') }}
|
||||
</p>
|
||||
<div
|
||||
v-if="errorCode"
|
||||
class="empty-state empty-state--error"
|
||||
>
|
||||
<strong>{{ errorCode }}</strong>
|
||||
<span>{{ errorDisplayMessage }}</span>
|
||||
<small v-if="errorMessage">
|
||||
{{ t('debugEml.backendMessage') }}: {{ errorMessage }}
|
||||
</small>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<main class="debug-eml-results">
|
||||
<template v-if="result">
|
||||
<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>
|
||||
<dl class="debug-eml-kv debug-eml-kv--grid">
|
||||
<div>
|
||||
<dt>{{ t('debugEml.sourceMessageId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.source_message_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.sourceProvider') }}</dt>
|
||||
<dd>
|
||||
{{ result.source_provider ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.externalMessageId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.external_message_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.externalConversationId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.external_conversation_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</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>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="renderableHtmlBody"
|
||||
class="debug-eml-html-preview"
|
||||
v-html="renderableHtmlBody"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<div
|
||||
v-else
|
||||
class="empty-state"
|
||||
>
|
||||
{{ t('debugEml.noSafeHtml') }}
|
||||
</div>
|
||||
|
||||
<div class="debug-eml-media-list">
|
||||
<h3>{{ t('debugEml.uploadedMedia') }}</h3>
|
||||
<ul v-if="result.uploaded_media.length">
|
||||
<li
|
||||
v-for="(media, index) in result.uploaded_media"
|
||||
:key="media.external_media_id ?? media.object_key ?? index"
|
||||
>
|
||||
<span>{{ media.media_type ?? '-' }}</span>
|
||||
<a
|
||||
v-if="safeExternalUrl(media.external_url)"
|
||||
:href="safeExternalUrl(media.external_url)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
|
||||
</a>
|
||||
<strong v-else>
|
||||
{{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
|
||||
</strong>
|
||||
<small>
|
||||
{{ media.content_type ?? '-' }} / {{ formatMediaSize(media.size_bytes) }}
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
<p
|
||||
v-else
|
||||
class="th-muted"
|
||||
>
|
||||
{{ t('common.noData') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<details class="debug-eml-raw-html">
|
||||
<summary>{{ t('debugEml.rawHtml') }}</summary>
|
||||
<pre>{{ result.html_body_with_oss_urls ?? '-' }}</pre>
|
||||
</details>
|
||||
</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>
|
||||
<dl class="debug-eml-kv debug-eml-kv--grid">
|
||||
<div>
|
||||
<dt>{{ t('debugEml.superAgentSessionId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.superagent_session_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('debugEml.superAgentRunId') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ result.superagent_run_id ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="debug-eml-two-column">
|
||||
<section>
|
||||
<h3>{{ t('debugEml.parsedJson') }}</h3>
|
||||
<pre>{{ formatJson(result.superagent_parsed_json) }}</pre>
|
||||
</section>
|
||||
<section>
|
||||
<h3>{{ t('debugEml.rawAnswer') }}</h3>
|
||||
<pre>{{ result.superagent_raw_answer ?? '-' }}</pre>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
v-if="result.warnings.length"
|
||||
class="debug-eml-warning-list"
|
||||
>
|
||||
<h3>{{ t('debugEml.warnings') }}</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="warning in result.warnings"
|
||||
:key="warning"
|
||||
>
|
||||
{{ warning }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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,
|
||||
.page-heading p {
|
||||
.debug-eml-hero {
|
||||
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 {
|
||||
margin-top: 8px;
|
||||
.debug-eml-hero__copy p {
|
||||
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));
|
||||
gap: 14px;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.debug-eml-grid label {
|
||||
@@ -425,12 +577,36 @@ function formatMediaSize(sizeBytes: number | null): string {
|
||||
}
|
||||
|
||||
.debug-eml-grid input {
|
||||
min-height: 38px;
|
||||
border: 1px solid var(--th-color-slate-200);
|
||||
border-radius: var(--th-radius-sm);
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
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));
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
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-radius: var(--th-radius-sm);
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
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-radius: var(--th-radius-sm);
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
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-radius: var(--th-radius-sm);
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
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-radius: var(--th-radius-sm);
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
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-radius: var(--th-radius-sm);
|
||||
background: var(--th-color-slate-50);
|
||||
color: var(--th-color-slate-900);
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
border-radius: 10px;
|
||||
background: #0f172a;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user