优化 Debug EML 调试页面布局
This commit is contained in:
andy
@@ -1,88 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="th-page debug-eml-view">
|
<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>
|
<h1>{{ t('debugEml.title') }}</h1>
|
||||||
<p>{{ t('debugEml.subtitle') }}</p>
|
<p>{{ t('debugEml.subtitle') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
<form
|
<dl class="debug-eml-status-strip">
|
||||||
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">
|
|
||||||
<div>
|
<div>
|
||||||
<dt>{{ t('debugEml.status') }}</dt>
|
<dt>{{ t('debugEml.status') }}</dt>
|
||||||
<dd>{{ statusLabel }}</dd>
|
<dd>{{ statusLabel }}</dd>
|
||||||
@@ -100,172 +24,315 @@
|
|||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
</dl>
|
</dl>
|
||||||
<p
|
</header>
|
||||||
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>
|
|
||||||
|
|
||||||
<template v-if="result">
|
<div class="debug-eml-workspace">
|
||||||
<section class="th-section">
|
<aside class="debug-eml-panel">
|
||||||
<div class="th-section-header">
|
<form
|
||||||
<h2 class="th-section-title">
|
class="debug-eml-card debug-eml-form"
|
||||||
{{ t('debugEml.sourceTrace') }}
|
@submit.prevent="submitUpload"
|
||||||
</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"
|
|
||||||
>
|
>
|
||||||
{{ t('debugEml.noSafeHtml') }}
|
<div class="th-section-header">
|
||||||
</div>
|
<h2 class="th-section-title">
|
||||||
|
<i
|
||||||
|
class="pi pi-upload"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
{{ t('debugEml.uploadConfig') }}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="debug-eml-media-list">
|
<div class="debug-eml-grid">
|
||||||
<h3>{{ t('debugEml.uploadedMedia') }}</h3>
|
<label>
|
||||||
<ul v-if="result.uploaded_media.length">
|
<span>{{ t('debugEml.hotelId') }}</span>
|
||||||
<li
|
<input
|
||||||
v-for="(media, index) in result.uploaded_media"
|
v-model="hotelId"
|
||||||
:key="media.external_media_id ?? media.object_key ?? index"
|
name="hotel_id"
|
||||||
>
|
type="text"
|
||||||
<span>{{ media.media_type ?? '-' }}</span>
|
:disabled="busy"
|
||||||
<a
|
autocomplete="off"
|
||||||
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') }}
|
</label>
|
||||||
</a>
|
<label>
|
||||||
<strong v-else>
|
<span>{{ t('debugEml.debugUploadKey') }}</span>
|
||||||
{{ media.file_name ?? media.external_media_id ?? t('debugEml.unnamedMedia') }}
|
<input
|
||||||
</strong>
|
v-model="debugUploadKey"
|
||||||
<small>
|
name="debug_upload_key"
|
||||||
{{ media.content_type ?? '-' }} / {{ formatMediaSize(media.size_bytes) }}
|
type="password"
|
||||||
</small>
|
:disabled="busy"
|
||||||
</li>
|
autocomplete="off"
|
||||||
</ul>
|
>
|
||||||
<p
|
</label>
|
||||||
v-else
|
<label>
|
||||||
class="th-muted"
|
<span>{{ t('debugEml.runLabel') }}</span>
|
||||||
>
|
<input
|
||||||
{{ t('common.noData') }}
|
v-model="runLabel"
|
||||||
</p>
|
name="run_label"
|
||||||
</div>
|
type="text"
|
||||||
|
:disabled="busy"
|
||||||
<details class="debug-eml-raw-html">
|
autocomplete="off"
|
||||||
<summary>{{ t('debugEml.rawHtml') }}</summary>
|
>
|
||||||
<pre>{{ result.html_body_with_oss_urls ?? '-' }}</pre>
|
</label>
|
||||||
</details>
|
<label>
|
||||||
</section>
|
<span>{{ t('debugEml.emlFile') }}</span>
|
||||||
|
<input
|
||||||
<section class="th-section debug-eml-result-section">
|
type="file"
|
||||||
<div class="th-section-header">
|
accept=".eml,message/rfc822"
|
||||||
<h2 class="th-section-title">
|
:disabled="busy"
|
||||||
{{ t('debugEml.superAgentResult') }}
|
@change="onFileChange"
|
||||||
</h2>
|
>
|
||||||
</div>
|
</label>
|
||||||
<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>
|
||||||
<div>
|
|
||||||
<dt>{{ t('debugEml.superAgentRunId') }}</dt>
|
<div class="debug-eml-actions">
|
||||||
<dd class="th-code">
|
<button
|
||||||
{{ result.superagent_run_id ?? '-' }}
|
type="submit"
|
||||||
</dd>
|
class="primary-button"
|
||||||
</div>
|
:disabled="submitDisabled"
|
||||||
</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 }}
|
<i
|
||||||
</li>
|
class="pi pi-send"
|
||||||
</ul>
|
aria-hidden="true"
|
||||||
</div>
|
/>
|
||||||
</section>
|
{{ 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">
|
<section class="debug-eml-card debug-eml-status">
|
||||||
<div class="th-section-header">
|
<div class="th-section-header">
|
||||||
<h2 class="th-section-title">
|
<h2 class="th-section-title">
|
||||||
{{ t('debugEml.debugPayload') }}
|
<i
|
||||||
</h2>
|
class="pi pi-info-circle"
|
||||||
</div>
|
aria-hidden="true"
|
||||||
<pre>{{ formatJson(result.agentbus_like_payload) }}</pre>
|
/>
|
||||||
</section>
|
{{ t('debugEml.executionStatus') }}
|
||||||
</template>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -383,23 +450,108 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.debug-eml-view {
|
.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;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-heading h1 {
|
.debug-eml-hero__copy h1 {
|
||||||
color: var(--th-color-slate-900);
|
color: var(--th-color-slate-900);
|
||||||
font-size: 28px;
|
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);
|
color: var(--th-color-slate-500);
|
||||||
font-size: 14px;
|
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,
|
.debug-eml-form,
|
||||||
@@ -412,8 +564,8 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
|
|
||||||
.debug-eml-grid {
|
.debug-eml-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: 1fr;
|
||||||
gap: 14px;
|
gap: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug-eml-grid label {
|
.debug-eml-grid label {
|
||||||
@@ -425,12 +577,36 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.debug-eml-grid input {
|
.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);
|
background: var(--th-color-white);
|
||||||
color: var(--th-color-slate-900);
|
color: var(--th-color-slate-900);
|
||||||
padding: 0 12px;
|
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 {
|
.debug-eml-actions {
|
||||||
@@ -441,19 +617,49 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.primary-button {
|
.primary-button {
|
||||||
min-height: 38px;
|
min-height: 42px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: var(--th-radius-sm);
|
border-radius: 9px;
|
||||||
background: var(--th-color-blue-600);
|
background: var(--th-color-blue-600);
|
||||||
color: var(--th-color-white);
|
color: var(--th-color-white);
|
||||||
padding: 0 16px;
|
padding: 0 18px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
cursor: pointer;
|
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 {
|
.primary-button:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.55;
|
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 {
|
.empty-state {
|
||||||
@@ -465,6 +671,9 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px dashed rgba(148, 163, 184, 0.38);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--th-color-slate-50);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state strong {
|
.empty-state strong {
|
||||||
@@ -472,13 +681,17 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.empty-state--error {
|
.empty-state--error {
|
||||||
|
place-items: start;
|
||||||
color: var(--th-color-danger);
|
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 {
|
.debug-eml-kv {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: 1fr;
|
||||||
gap: 12px;
|
gap: 10px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -488,10 +701,10 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
|
|
||||||
.debug-eml-kv div {
|
.debug-eml-kv div {
|
||||||
min-width: 0;
|
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;
|
padding: 12px;
|
||||||
background: var(--th-color-white);
|
background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug-eml-kv dt {
|
.debug-eml-kv dt {
|
||||||
@@ -510,7 +723,8 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
|
|
||||||
.debug-eml-callout {
|
.debug-eml-callout {
|
||||||
margin: 0;
|
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);
|
background: rgba(37, 99, 235, 0.08);
|
||||||
color: var(--th-color-blue-600);
|
color: var(--th-color-blue-600);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
@@ -521,10 +735,12 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
.debug-eml-html-preview {
|
.debug-eml-html-preview {
|
||||||
max-height: 520px;
|
max-height: 520px;
|
||||||
overflow: auto;
|
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);
|
background: var(--th-color-white);
|
||||||
padding: 16px;
|
padding: 18px;
|
||||||
|
color: var(--th-color-slate-900);
|
||||||
|
line-height: 1.65;
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug-eml-media-list {
|
.debug-eml-media-list {
|
||||||
@@ -551,11 +767,12 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
|
|
||||||
.debug-eml-media-list li {
|
.debug-eml-media-list li {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 140px minmax(0, 1fr) 220px;
|
grid-template-columns: minmax(100px, 140px) minmax(0, 1fr) minmax(170px, 220px);
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
align-items: center;
|
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;
|
padding: 10px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -572,8 +789,9 @@ function formatMediaSize(sizeBytes: number | null): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.debug-eml-raw-html {
|
.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;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -588,13 +806,22 @@ pre {
|
|||||||
max-height: 420px;
|
max-height: 420px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: 0;
|
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;
|
padding: 12px;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
overflow-wrap: anywhere;
|
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 {
|
.debug-eml-two-column {
|
||||||
@@ -606,6 +833,7 @@ pre {
|
|||||||
.debug-eml-two-column section {
|
.debug-eml-two-column section {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug-eml-warning-list {
|
.debug-eml-warning-list {
|
||||||
@@ -614,7 +842,7 @@ pre {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.debug-eml-warning-list li {
|
.debug-eml-warning-list li {
|
||||||
border-radius: var(--th-radius-sm);
|
border-radius: 10px;
|
||||||
background: rgba(245, 158, 11, 0.12);
|
background: rgba(245, 158, 11, 0.12);
|
||||||
color: #92400e;
|
color: #92400e;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
@@ -622,13 +850,62 @@ pre {
|
|||||||
font-weight: 700;
|
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) {
|
@media (max-width: 920px) {
|
||||||
.debug-eml-grid,
|
.debug-eml-status-strip,
|
||||||
.debug-eml-kv,
|
.debug-eml-kv,
|
||||||
.debug-eml-kv--grid,
|
.debug-eml-kv--grid,
|
||||||
.debug-eml-two-column,
|
.debug-eml-two-column,
|
||||||
.debug-eml-media-list li {
|
.debug-eml-media-list li {
|
||||||
grid-template-columns: 1fr;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user