diff --git a/src/api/index.js b/src/api/index.js
index 487fb66..525753d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,8 +19,8 @@ const service = axios.create({
 	// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
 	// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
 	// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
-	baseURL: '/api', //本地
-	// baseURL: '/', //正式
+	// baseURL: '/api', //本地
+	baseURL: '/', //正式
 
 });
 
diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index 442418b..c390035 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -916,17 +916,38 @@ colTitle: 'Template title',
 		startConfig: 'Start auto promotion configuration',
 		notConfigured: 'Not configured',
 		searchPlaceholder: 'Name / Email',
+		statusAll: 'All status',
 		searchBtn: 'Search',
 		index: 'No.',
+		taskName: 'Task Name',
+		taskParams: 'Parameters',
+		templateIdLabel: 'Template ID',
+		styleIdLabel: 'Style ID',
+		deliveryStats: 'Delivery Stats',
+		totalCount: 'Total',
+		sentCount: 'Sent',
+		failCount: 'Failed',
+		bounceCount: 'Bounce',
+		noDeliveryIssue: 'No delivery issues',
+		deliveryIssue: 'Delivery issues',
+		completedText: 'Completed',
 		expertInfo: 'Expert Info',
 		templateStyle: 'Template / Style',
 		stylePrefix: 'Style',
 		runAt: 'Execution time',
 		status: 'Status',
+		state0: 'Draft',
+		state1: 'Running',
+		state2: 'Paused',
+		state3: 'Completed',
+		state4: 'Cancelled',
+		state5: 'Preparing',
 		paused: 'Paused',
 		toRun: 'To run',
 		operation: 'Operation',
 		preview: 'Preview',
+		previewAction: 'Preview',
+		editAction: 'Edit',
 		enable: 'Enable',
 		pause: 'Pause',
 		previewEditTitle: 'Preview and edit promotion email',
@@ -943,9 +964,50 @@ colTitle: 'Template title',
 		configUpdated: 'Configuration updated',
 		pauseSuccess: 'Paused',
 		enableSuccess: 'Enabled',
+		operationFailed: 'Operation failed',
+		selectTaskForLogs: 'Please select a task first (click the view icon in the list)',
+		pushLogTitle: 'Task list',
+		logRefresh: 'Refresh',
+		taskLogStateFilter: 'Status',
+		taskLogStateAll: 'All',
+		taskLogState0: 'Pending',
+		taskLogState1: 'Sent',
+		taskLogState2: 'Failed',
+		taskLogState3: 'Bounced',
+		taskLogState4: 'Cancelled',
+		logColExpert: 'Expert',
+		logColSendTime: 'Sent at',
+		logColPreparedAt: 'Prepared at',
+		logColStatus: 'Status',
+		logColAction: 'Action',
+		emptyLogs: 'No logs',
+		viewFailureReason: 'Reason',
+		editLogTip: 'Edit',
+		deleteLogTip: 'Delete',
+		previewLogTip: 'Preview',
+		logFieldAffiliation: 'Affiliation',
+		logFieldSubject: 'Subject',
+		logFieldSendTime: 'Sent at',
+		logFieldExecutionTime: 'Executed at',
+		saveDetail: 'Save',
+		failureReasonTitle: 'Failure reason',
+		saveDetailSuccess: 'Saved',
+		saveDetailFailed: 'Save failed',
+		logDetailLoadFailed: 'Failed to load detail',
+		logIdMissing: 'Missing log id',
+		logAlreadySent: 'This record is no longer pending; switched to preview',
+		deleteLogConfirm: 'Delete this log entry?',
+		tipTitle: 'Tip',
+		deleteLogSuccess: 'Deleted',
+		deleteLogFailed: 'Delete failed',
+		noFailureReason: 'No failure reason',
 		deletedSuccess: 'Deleted',
 		mockPromotionSubject: 'Promotion for {journal}',
 		mockPromotionContent: '<p>Dear {name},</p><p>Check out our latest journal updates...</p>'
+	  },
+	  tmrEmailEditor: {
+		preview: 'Preview',
+		placeholder: 'Please enter email content'
 	  }
 	  
 	
diff --git a/src/components/common/langs/zh.js b/src/components/common/langs/zh.js
index 443120e..46fb914 100644
--- a/src/components/common/langs/zh.js
+++ b/src/components/common/langs/zh.js
@@ -901,17 +901,38 @@ const zh = {
 		startConfig: '立即开始期刊自动推广配置',
 		notConfigured: '尚未配置',
 		searchPlaceholder: '姓名 / 邮箱',
+		statusAll: '全部状态',
 		searchBtn: '搜索',
 		index: '序号',
+		taskName: '任务名称',
+		taskParams: '参数内容',
+		templateIdLabel: '模板ID',
+		styleIdLabel: '风格ID',
+		deliveryStats: '投递统计',
+		totalCount: '总量',
+		sentCount: '已发送',
+		failCount: '失败',
+		bounceCount: '退信',
+		noDeliveryIssue: '无发送异常',
+		deliveryIssue: '投递异常',
+		completedText: '已完成',
 		expertInfo: '专家信息',
 		templateStyle: '模板 / 风格',
 		stylePrefix: '风格',
 		runAt: '执行时间',
 		status: '状态',
+		state0: '草稿',
+		state1: '运行中',
+		state2: '暂停',
+		state3: '完成',
+		state4: '取消',
+		state5: '准备',
 		paused: '已暂停',
 		toRun: '待执行',
 		operation: '操作',
 		preview: '查看预览',
+		previewAction: '预览',
+		editAction: '编辑',
 		enable: '开启',
 		pause: '暂停',
 		previewEditTitle: '预览并修改推广邮件',
@@ -928,9 +949,50 @@ const zh = {
 		configUpdated: '配置已更新',
 		pauseSuccess: '已暂停',
 		enableSuccess: '已开启',
+		operationFailed: '操作失败',
+		selectTaskForLogs: '请先选择一条任务（点击列表「查看」图标）',
+		pushLogTitle: '任务列表',
+		logRefresh: '刷新',
+		taskLogStateFilter: '发送状态',
+		taskLogStateAll: '全部',
+		taskLogState0: '待发送',
+		taskLogState1: '已发送',
+		taskLogState2: '失败',
+		taskLogState3: '退信',
+		taskLogState4: '取消',
+		logColExpert: '专家信息',
+		logColSendTime: '发送时间',
+		logColPreparedAt: '预处理完成时间',
+		logColStatus: '状态',
+		logColAction: '操作',
+		emptyLogs: '暂无日志',
+		viewFailureReason: '原因',
+		editLogTip: '编辑',
+		deleteLogTip: '删除',
+		previewLogTip: '预览',
+		logFieldAffiliation: '单位/机构',
+		logFieldSubject: '主题',
+		logFieldSendTime: '发送时间',
+		logFieldExecutionTime: '执行时间',
+		saveDetail: '保存',
+		failureReasonTitle: '失败原因',
+		saveDetailSuccess: '保存成功',
+		saveDetailFailed: '保存失败',
+		logDetailLoadFailed: '加载详情失败',
+		logIdMissing: '缺少日志 ID',
+		logAlreadySent: '该记录已非待发送状态，已切换为预览',
+		deleteLogConfirm: '确定删除该条发送记录？',
+		tipTitle: '提示',
+		deleteLogSuccess: '删除成功',
+		deleteLogFailed: '删除失败',
+		noFailureReason: '暂无失败原因',
 		deletedSuccess: '已删除',
 		mockPromotionSubject: '自动推广：{journal}',
 		mockPromotionContent: '<p>亲爱的 {name}，</p><p>请查看我们最新的期刊更新...</p>'
+	  },
+	  tmrEmailEditor: {
+		preview: '预览效果',
+		placeholder: '请输入邮件内容'
 	  }
    
 	  
diff --git a/src/components/page/autoPromotion.vue b/src/components/page/autoPromotion.vue
index 90139a5..270a8d8 100644
--- a/src/components/page/autoPromotion.vue
+++ b/src/components/page/autoPromotion.vue
@@ -104,7 +104,7 @@
       :selectedStyleName="selectedStyleName"
       :saving="saving"
       :title="`${$t('autoPromotion.journalManage')}: ${wizardJournal ? wizardJournal.title : ''}`"
-      @open-template-selector="showTemplateDialog = true"
+      @open-template-selector="openTemplateSelector"
       @cancel="showWizardDialog = false"
       @confirm="saveWizardConfig"
     />
@@ -114,6 +114,8 @@
       :visible.sync="showTemplateDialog"
       :journalId="wizardJournal ? wizardJournal.journal_id : ''"
       :journalLabel="wizardJournal ? wizardJournal.title : ''"
+      :initial-style-id="templateDialogInitialStyleId"
+      :initial-template-id="templateDialogInitialTemplateId"
       :return-source="'autoPromotion'"
       @confirm="handleTemplateApply"
       @close-all-dialogs="closeAllDialogs"
@@ -148,6 +150,8 @@ export default {
       selectedTemplateThumbHtml: '',
       selectedTemplateName: '',
       selectedStyleName: '',
+      templateDialogInitialStyleId: '',
+      templateDialogInitialTemplateId: '',
       templateNameMap: {},
       allJournals: []
     };
@@ -156,6 +160,16 @@ export default {
     this.fetchPromotionJournals();
   },
   methods: {
+    openTemplateSelector() {
+      // 更换模板时优先回显当前已选 style/template；没有则由选择器回落到第一项
+      this.templateDialogInitialStyleId = this.wizardConfig && this.wizardConfig.defaultStyleId
+        ? String(this.wizardConfig.defaultStyleId)
+        : '';
+      this.templateDialogInitialTemplateId = this.wizardConfig && this.wizardConfig.defaultTemplateId
+        ? String(this.wizardConfig.defaultTemplateId)
+        : '';
+      this.showTemplateDialog = true;
+    },
     closeAllDialogs() {
       // 进入“新增模板/跳转列表页”前，先关闭当前页所有弹窗，减少卡顿
       this.showWizardDialog = false;
diff --git a/src/components/page/autoPromotionLogs.vue b/src/components/page/autoPromotionLogs.vue
index 0e9a29e..4281b68 100644
--- a/src/components/page/autoPromotionLogs.vue
+++ b/src/components/page/autoPromotionLogs.vue
@@ -1,892 +1,1510 @@
 <template>
-  <div class="auto-promo-container">
-    <div class="crumbs">
-      <div class="page-header">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item><i class="el-icon-s-promotion"></i> {{ $t('autoPromotion.title') }}</el-breadcrumb-item>
-        <el-breadcrumb-item>
-          {{ $t('autoPromotionLogs.detail') }}
-        </el-breadcrumb-item>
-       
-      </el-breadcrumb>
-    </div>
- 
-    </div>
-
-    <el-card shadow="never" class="journal-header-card">
-      <div class="config-bar">
-        <div class="left">
-          <span class="label">{{ $t('autoPromotion.journal') }} : </span>
-         {{currentJournalName}}
-
-         <template v-if="config.initialized">
- <el-tag  type="success" size="small" effect="plain" style="margin-left: 10px">
-              <i class="el-icon-circle-check"></i> {{ $t('autoPromotionLogs.configured') }}
-            </el-tag>
-            <el-button 
-              type="text" 
-              size="small" 
-              style="margin-left: 10px" 
-              @click="openWizardDialog"
-            >
-            <i class="el-icon-edit"></i>
-              {{
-                config.initialized
-                  ? $t('autoPromotionLogs.editConfig')
-                  : $t('autoPromotionLogs.startConfig')
-              }}
-            </el-button>
-       
-         </template>
-         
-            <el-tag v-else type="info" size="small" effect="plain" style="margin-left: 10px">
-              <i class="el-icon-info"></i> {{ $t('autoPromotionLogs.notConfigured') }}
-            </el-tag>
-
+    <div class="auto-promo-container">
+        <div class="crumbs">
+            <div class="page-header">
+                <el-breadcrumb separator="/">
+                    <el-breadcrumb-item><i class="el-icon-s-promotion"></i> {{ $t('autoPromotion.title') }}</el-breadcrumb-item>
+                    <el-breadcrumb-item>
+                        {{ $t('autoPromotionLogs.detail') }}
+                    </el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+        </div>
+        <div v-if="!hidePage">
+            <el-card shadow="never" class="journal-header-card">
+                <div class="config-bar">
+                    <div class="left">
+                        <span class="label">{{ $t('autoPromotion.journal') }} : </span>
+                        {{ currentJournalName }}
+
+                        <template v-if="config.initialized">
+                            <el-tag type="success" size="small" effect="plain" style="margin-left: 10px">
+                                <i class="el-icon-circle-check"></i> {{ $t('autoPromotionLogs.configured') }}
+                            </el-tag>
+                            <el-button type="text" size="small" style="margin-left: 10px" @click="openWizardDialog">
+                                <i class="el-icon-edit"></i>
+                                {{ config.initialized ? $t('autoPromotionLogs.editConfig') : $t('autoPromotionLogs.startConfig') }}
+                            </el-button>
+                        </template>
+
+                        <el-tag v-else type="info" size="small" effect="plain" style="margin-left: 10px">
+                            <i class="el-icon-info"></i> {{ $t('autoPromotionLogs.notConfigured') }}
+                        </el-tag>
+                    </div>
+                </div>
+            </el-card>
+
+            <div v-loading="loading" class="main-body">
+                <el-card v-if="!config.initialized" shadow="never" class="wizard-card">
+                    <auto-promotion-wizard
+                        mode="inline"
+                        :config="config"
+                        :wizardStartDate.sync="wizardStartDate"
+                        :currentJournalName="currentJournalName"
+                        :selectedTemplateThumbHtml="selectedTemplateThumbHtml"
+                        :selectedTemplateName="selectedTemplateName"
+                        :selectedStyleName="selectedStyleName"
+                        :saving="saving"
+                        :title="$t('autoPromotion.title')"
+                        @open-template-selector="showTemplateDialog = true"
+                        @confirm="completeInitialization"
+                    />
+                </el-card>
+
+                <div v-else class="manage-mode">
+                    <el-card shadow="never" class="list-card">
+                     
+
+                        <div class="filter-header-row">
+  <div class="tmr-capsule-group">
+    <el-tabs v-model="query.state" type="card" @tab-click="handleTabClick">
+      <el-tab-pane :label="$t('autoPromotionLogs.statusAll')" name="all"></el-tab-pane>
+      <el-tab-pane :label="$t('autoPromotionLogs.state0')" name="0"></el-tab-pane>
+      <el-tab-pane :label="$t('autoPromotionLogs.state5')" name="5"></el-tab-pane>
+      <el-tab-pane :label="$t('autoPromotionLogs.state1')" name="1"></el-tab-pane>
+      <el-tab-pane :label="$t('autoPromotionLogs.state3')" name="3"></el-tab-pane>
+      <el-tab-pane :label="$t('autoPromotionLogs.state2')" name="2"></el-tab-pane>
+      <el-tab-pane :label="$t('autoPromotionLogs.state4')" name="4"></el-tab-pane>
+    </el-tabs>
+  </div>
+
+  <!-- <div class="filter-actions">
+    <el-button type="primary" icon="el-icon-search" @click="handleSearch">{{ $t('autoPromotionLogs.searchBtn') }}</el-button>
+  </div> -->
+</div>
+
+                        <el-table :data="list" border stripe size="small" class="custom-table exquisite-log-table">
+                            <el-table-column
+                                type="index"
+                                :label="$t('autoPromotionLogs.index')"
+                                width="60"
+                                align="center"
+                            ></el-table-column>
+
+                            <el-table-column :label="$t('autoPromotionLogs.taskName')" min-width="240">
+                                <template slot-scope="scope">
+                                    <div class="task-column">
+                                        <div class="task-name">{{ scope.row.task_name || '-' }}</div>
+                                        <div class="task-id-tags">
+                                            <span class="id-tag">{{ $t('autoPromotionLogs.templateIdLabel') }}: {{ scope.row.template_id }}</span>
+                                            <span class="id-tag">{{ $t('autoPromotionLogs.styleIdLabel') }}: {{ scope.row.style_id }}</span>
+                                        </div>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column :label="$t('autoPromotionLogs.taskParams')" width="200">
+                                <template slot-scope="scope">
+                                    <div class="strategy-column">
+                                        <div class="strategy-item">
+                                            <i class="el-icon-collection-tag"></i>
+                                            <span>{{ scope.row.scene || '-' }}</span>
+                                        </div>
+                                        <div class="strategy-item mini-text">
+                                            <i class="el-icon-timer"></i>
+                                            <span
+                                                >{{ scope.row.send_start_hour }}~{{ scope.row.send_end_hour }}h /
+                                                {{ scope.row.min_interval }}-{{ scope.row.max_interval }}m</span
+                                            >
+                                        </div>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column :label="$t('autoPromotionLogs.deliveryStats')" min-width="320">
+                                <template slot-scope="scope">
+                                    <div class="delivery-dashboard">
+                                        <div class="num-grid">
+                                            <div class="num-item">
+                                                <div class="label">{{ $t('autoPromotionLogs.totalCount') }}</div>
+                                                <div class="value primary">{{ scope.row.total_count }}</div>
+                                            </div>
+                                            <div class="num-item">
+                                                <div class="label">{{ $t('autoPromotionLogs.sentCount') }}</div>
+                                                <div class="value success">{{ scope.row.sent_count }}</div>
+                                            </div>
+                                            <div class="num-item">
+                                                <div class="label">{{ $t('autoPromotionLogs.failCount') }}</div>
+                                                <div :class="['value', scope.row.fail_count > 0 ? 'danger' : 'neutral']">
+                                                    {{ scope.row.fail_count }}
+                                                </div>
+                                            </div>
+                                            <div class="num-item">
+                                                <div class="label">{{ $t('autoPromotionLogs.bounceCount') }}</div>
+                                                <div :class="['value', scope.row.bounce_count > 0 ? 'warning' : 'neutral']">
+                                                    {{ scope.row.bounce_count }}
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- <div class="progress-container">
+                                            <el-progress
+                                                :percentage="getPercent(scope.row)"
+                                                :status="scope.row.fail_count > 0 || scope.row.bounce_count > 0 ? 'warning' : 'success'"
+                                                :stroke-width="6"
+                                                :show-text="false"
+                                            ></el-progress>
+                                        </div> -->
+
+                                        <!-- <div class="stats-status">
+                                            <span v-if="scope.row.fail_count === 0 && scope.row.bounce_count === 0" class="safe-tag">
+                                                <i class="el-icon-circle-check"></i> {{ $t('autoPromotionLogs.noDeliveryIssue') }}
+                                            </span>
+                                            <span v-else class="warning-tag"> <i class="el-icon-warning-outline"></i> {{ $t('autoPromotionLogs.deliveryIssue') }} </span>
+                                            <span class="percent-tag">{{ getPercent(scope.row) }}% {{ $t('autoPromotionLogs.completedText') }}</span>
+                                        </div> -->
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="run_at" :label="$t('autoPromotionLogs.runAt')" width="160">
+                                <template slot-scope="scope">
+                                    <span class="time-cell"> <i class="el-icon-date"></i> {{ scope.row.run_at }} </span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column :label="$t('autoPromotionLogs.status')" width="130" align="center">
+                                <template slot-scope="scope">
+                                    <span :class="['status-badge', getTaskStatusClass(scope.row.state)]">
+                                        {{ getTaskStatusText(scope.row.state) }}
+                                    </span>
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column label="" width="100" align="center">
+                                <template slot-scope="scope">
+                                    <div class="action-btns">
+                                        <el-button
+                                            type="text"
+                                            :icon="String(scope.row.state) === '5' ? 'el-icon-edit-outline' : 'el-icon-view'"
+                                            @click="previewRow(scope.row)"
+                                        >
+                                            {{ String(scope.row.state) === '5' ? $t('autoPromotionLogs.editAction') : $t('autoPromotionLogs.previewAction') }}
+                                        </el-button>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+
+                        <div class="pagination">
+                            <el-pagination
+                                background
+                                layout="total, sizes, prev, pager, next"
+                                :current-page="query.pageIndex"
+                                :page-size="query.pageSize"
+                                :page-sizes="[10, 20, 50]"
+                                :total="total"
+                                @size-change="handlePageSizeChange"
+                                @current-change="handlePageChange"
+                            />
+                        </div>
+                    </el-card>
+                </div>
+            </div>
         </div>
-        <div class="right" v-if="config.initialized">
-          <el-button size="small" icon="el-icon-document" @click="openLogs">
-            {{ $t('autoPromotion.logs') }}
-          </el-button>
-        </div>
-      </div>
-    </el-card>
 
-    <div v-loading="loading" class="main-body">
-      <el-card v-if="!config.initialized" shadow="never" class="wizard-card">
         <auto-promotion-wizard
-          mode="inline"
-          :config="config"
-          :wizardStartDate.sync="wizardStartDate"
-          :currentJournalName="currentJournalName"
-          :selectedTemplateThumbHtml="selectedTemplateThumbHtml"
-          :selectedTemplateName="selectedTemplateName"
-          :selectedStyleName="selectedStyleName"
-          :saving="saving"
-          :title="$t('autoPromotion.title')"
-          @open-template-selector="showTemplateDialog = true"
-          @confirm="completeInitialization"
+            mode="dialog"
+            :visible.sync="showWizardDialog"
+            :config="config"
+            :wizardStartDate.sync="wizardStartDate"
+            :currentJournalName="currentJournalName"
+            :selectedTemplateThumbHtml="selectedTemplateThumbHtml"
+            :selectedTemplateName="selectedTemplateName"
+            :selectedStyleName="selectedStyleName"
+            :saving="saving"
+            :title="$t('autoPromotion.title')"
+            @open-template-selector="showTemplateDialog = true"
+            @cancel="showWizardDialog = false"
+            @confirm="completeInitialization"
         />
-      </el-card>
 
-      <div v-else class="manage-mode" style="display: none;">
-       
-
-        <el-card shadow="never" class="list-card">
-          <div class="list-header">
-            <el-input
-              v-model="query.keyword"
-              size="small"
-              clearable
-              style="width: 300px"
-              :placeholder="$t('autoPromotionLogs.searchPlaceholder')"
-              @keyup.enter.native="fetchList"
-            >
-              
-            </el-input>
-            <el-button type="primary" size="small"  icon="el-icon-search" style="margin-left: 20px;" @click="fetchList">{{ $t('autoPromotionLogs.searchBtn') }}</el-button>
-          </div>
-
-          <el-table :data="list" border stripe size="small" class="custom-table">
-  <el-table-column type="index" :label="$t('autoPromotionLogs.index')" width="70" align="center"></el-table-column>
-  <el-table-column :label="$t('autoPromotionLogs.expertInfo')" min-width="180">
-    <template slot-scope="scope">
-      <div class="user-info">
-        <div class="name">{{ scope.row.name }}</div>
-        <div class="email">{{ scope.row.email }}</div>
-      </div>
-    </template>
-  </el-table-column>
-
-  <el-table-column :label="$t('autoPromotionLogs.templateStyle')" min-width="200">
-    <template slot-scope="scope">
-      <div class="template-info-cell">
-        <div class="text-content">
-          <div class="tpl-main">{{ getTemplateName(scope.row.template_id) }}</div>
-          <div class="tpl-sub">{{ $t('autoPromotionLogs.stylePrefix') }}: {{ getStyleDisplay(scope.row) }}</div>
-        </div>
-        <el-button 
-          type="text" 
-          icon="el-icon-edit-outline" 
-          class="edit-icon-btn"
-          @click="handleEditRowTemplate(scope.row)"
-        ></el-button>
-      </div>
-    </template>
-  </el-table-column>
-
-  <el-table-column prop="run_at" :label="$t('autoPromotionLogs.runAt')" width="180">
-    <template slot-scope="scope">
-      <span class="time-cell">
-        <i class="el-icon-time"></i> {{ scope.row.run_at }}
-      </span>
-    </template>
-  </el-table-column>
-
-  <el-table-column :label="$t('autoPromotionLogs.status')" width="120">
-    <template slot-scope="scope">
-      <span :class="['status-badge', scope.row.paused ? 'is-paused' : 'is-waiting']">
-        {{ scope.row.paused ? $t('autoPromotionLogs.paused') : $t('autoPromotionLogs.toRun') }}
-      </span>
-    </template>
-  </el-table-column>
-
-  <el-table-column :label="$t('autoPromotionLogs.operation')" width="150" align="center">
-    <template slot-scope="scope">
-      <div class="action-btns">
-        <el-tooltip :content="$t('autoPromotionLogs.preview')" placement="top">
-          <el-button type="text" icon="el-icon-view" @click="previewRow(scope.row)"></el-button>
-        </el-tooltip>
-        
-        <el-tooltip :content="scope.row.paused ? $t('autoPromotionLogs.enable') : $t('autoPromotionLogs.pause')" placement="top">
-          <el-button 
-            type="text" 
-            :icon="scope.row.paused ? 'el-icon-video-play' : 'el-icon-video-pause'" 
-            @click="togglePause(scope.row)"
-          ></el-button>
-        </el-tooltip>
-
-       
-          <el-button 
-            type="text" 
-            icon="el-icon-delete" 
-            class="delete-btn" 
-            @click="deleteRow(scope.row)"
-          ></el-button>
-     
-      </div>
-    </template>
-  </el-table-column>
-</el-table>
-          
-          <div class="pagination">
-            <el-pagination
-              background
-              layout="total, prev, pager, next"
-              :current-page="query.pageIndex"
-              :page-size="query.pageSize"
-              :total="total"
-              @current-change="handlePageChange"
-            />
-          </div>
-        </el-card>
-      </div>
+        <template-selector-dialog
+            v-if="showTemplateDialog"
+            :visible.sync="showTemplateDialog"
+            :journalId="selectedJournalId"
+            :journalLabel="currentJournalName"
+            :initial-style-id="templateDialogInitialStyleId"
+            :initial-template-id="templateDialogInitialTemplateId"
+            :return-source="'autoPromotion'"
+            @confirm="handleTemplateApply"
+            @close-all-dialogs="closeAllDialogs"
+        />
+        <el-dialog :title="$t('autoPromotionLogs.previewEditTitle')" :visible.sync="showPreviewDialog" width="1200px" top="5vh">
+            <div class="mail-edit-wrapper" v-if="previewForm">
+                <el-form label-width="120px" size="small">
+                    <el-form-item :label="$t('autoPromotionLogs.receiver')">
+                        <el-input
+                            v-model="previewForm.email"
+                            disabled
+                            :placeholder="$t('autoPromotionLogs.receiverImmutablePlaceholder')"
+                        />
+                    </el-form-item>
+                    <el-form-item :label="$t('autoPromotionLogs.subject')">
+                        <el-input v-model="previewForm.subject" :placeholder="$t('autoPromotionLogs.subjectPlaceholder')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('autoPromotionLogs.runAt') + ':'">
+                        <el-date-picker
+                            v-model="previewForm.run_at"
+                            type="datetime"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            :placeholder="$t('autoPromotionLogs.runAtPlaceholder')"
+                            style="width: 100%"
+                        />
+                    </el-form-item>
+                    <CkeditorMail v-model="previewForm.content" />
+                </el-form>
+            </div>
+            <div slot="footer">
+                <el-button size="small" @click="showPreviewDialog = false">{{ $t('autoPromotionLogs.cancel') }}</el-button>
+                <el-button size="small" type="primary" @click="saveMailContent" :loading="saving">{{
+                    $t('autoPromotionLogs.confirmEdit')
+                }}</el-button>
+            </div>
+        </el-dialog>
+        <PromotionDetailDrawer
+            v-model="drawerVisible"
+            :detail-data="currentRowData"
+            :is-conflict="currentRowData.isNotMyJournal"
+            @appealed="handleRefreshList"
+        />
     </div>
-
-    <auto-promotion-wizard
-      mode="dialog"
-      :visible.sync="showWizardDialog"
-      :config="config"
-      :wizardStartDate.sync="wizardStartDate"
-      :currentJournalName="currentJournalName"
-      :selectedTemplateThumbHtml="selectedTemplateThumbHtml"
-      :selectedTemplateName="selectedTemplateName"
-      :selectedStyleName="selectedStyleName"
-      :saving="saving"
-      :title="$t('autoPromotion.title')"
-      @open-template-selector="showTemplateDialog = true"
-      @cancel="showWizardDialog = false"
-      @confirm="completeInitialization"
-    />
-
-    <template-selector-dialog
-      v-if="showTemplateDialog"
-      :visible.sync="showTemplateDialog"
-      :journalId="selectedJournalId"
-      :journalLabel="currentJournalName"
-      :initial-style-id="templateDialogInitialStyleId"
-      :initial-template-id="templateDialogInitialTemplateId"
-      :return-source="'autoPromotion'"
-      @confirm="handleTemplateApply"
-      @close-all-dialogs="closeAllDialogs"
-    />
-    <el-dialog :title="$t('autoPromotionLogs.previewEditTitle')" :visible.sync="showPreviewDialog" width="1200px" top="5vh">
-  <div class="mail-edit-wrapper" v-if="previewForm">
-    <el-form label-width="80px" size="small">
-      <el-form-item :label="$t('autoPromotionLogs.receiver')">
-        <el-input v-model="previewForm.email" disabled :placeholder="$t('autoPromotionLogs.receiverImmutablePlaceholder')" />
-      </el-form-item>
-      <el-form-item :label="$t('autoPromotionLogs.subject')">
-        <el-input v-model="previewForm.subject" :placeholder="$t('autoPromotionLogs.subjectPlaceholder')" />
-      </el-form-item>
-      <el-form-item :label="$t('autoPromotionLogs.runAt')">
-        <el-date-picker
-          v-model="previewForm.run_at"
-          type="datetime"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :placeholder="$t('autoPromotionLogs.runAtPlaceholder')"
-          style="width: 100%;"
-        />
-      </el-form-item>
-      <CkeditorMail v-model="previewForm.content" />
-    
-    </el-form>
-  </div>
-  <div slot="footer">
-    <el-button size="small" @click="showPreviewDialog = false">{{ $t('autoPromotionLogs.cancel') }}</el-button>
-    <el-button size="small" type="primary" @click="saveMailContent" :loading="saving">{{ $t('autoPromotionLogs.confirmEdit') }}</el-button>
-  </div>
-</el-dialog>
-  </div>
 </template>
 
 <script>
 import CkeditorMail from '@/components/page/components/email/CkeditorMail.vue';
-import TemplateSelectorDialog from '@/components/page/components/email/TemplateSelectorDialog.vue'
-import AutoPromotionWizard from '@/components/page/components/autoPromotion/AutoPromotionWizard.vue'
+import TemplateSelectorDialog from '@/components/page/components/email/TemplateSelectorDialog.vue';
+import AutoPromotionWizard from '@/components/page/components/autoPromotion/AutoPromotionWizard.vue';
+import PromotionDetailDrawer from '@/components/page/components/autoPromotion/PromotionDetailDrawer.vue';
 // 这里假设你已经定义了 API 地址
 const API = {
-  getAllJournal: 'api/email_client/getPromotionJournalList',
-  listTemplates: 'api/mail_template/listTemplates',
-  getConfig: 'api/auto_promotion/getConfig',
-  saveConfig: 'api/email_client/setDefaultPromotion',
-  list: 'api/auto_promotion/getList',
+    getAllJournal: 'api/email_client/getPromotionJournalList',
+    listTemplates: 'api/mail_template/listTemplates',
+    getConfig: 'api/auto_promotion/getConfig',
+    saveConfig: 'api/email_client/setDefaultPromotion',
+    list: 'api/email_client/getTaskList',
+    toggleTaskState: 'api/email_client/setTaskState'
 };
 
 export default {
-  name: 'autoPromotion',
-  components: { TemplateSelectorDialog, AutoPromotionWizard, CkeditorMail },
-  data() {
-    return {
-      // 基础数据
-      journalOptions: [],
-      selectedJournalId: '',
-      templateOptions: [],
-      
-      // 配置对象
-      config: {
-        initialized: false, // 核心：控制向导与列表的显示
-        enabled: false,
-        defaultTemplateId: '',
-        defaultTime: '09:00:00'
-      },
+    name: 'autoPromotion',
+    components: { TemplateSelectorDialog, AutoPromotionWizard, CkeditorMail, PromotionDetailDrawer },
+    data() {
+        return {
+            handleRefreshList: [],
+            drawerVisible: false,
+            currentRowData: {},
+            hidePage: false,
+            // 基础数据
+            journalOptions: [],
+            selectedJournalId: '',
+            templateOptions: [],
 
-      // 向导控制
-      wizardStep: 0,
-      wizardStartDate: '',
-      showTemplateDialog: false,
-      selectedTemplateThumbHtml: '',
-      selectedTemplateName: '',
-      selectedStyleName: '',
+            // 配置对象
+            config: {
+                initialized: false, // 核心：控制向导与列表的显示
+                enabled: false,
+                defaultTemplateId: '',
+                defaultTime: '09:00:00'
+            },
 
-      // 列表数据
-      query: { keyword: '', pageIndex: 1, pageSize: 15 },
-      list: [],
-      total: 0,
-      
-      // 状态控制
-      loading: false,
-      saving: false,
-currentJournalName: '',
-      // 向导弹窗（用于编辑已初始化配置）
-      showWizardDialog: false,
-      showPreviewDialog: false,
-      currentRow: null,
-      templateDialogInitialStyleId: '',
-      templateDialogInitialTemplateId: '',
-    previewForm: {
-      id: '',
-      email: '',
-      run_at: '',
-      subject: '',
-      content: ''
-    },
-    };
-  },
-  computed: {
-  
-  },
-  created() {
-    this.initPage();
-  },
-  methods: {
-    closeAllDialogs() {
-      // 点击“去新增模板”后：关闭当前页面所有可能的弹窗
-      this.showWizardDialog = false;
-      this.showTemplateDialog = false;
-      this.showPreviewDialog = false;
-      this.currentRow = null;
-    },
-    openLogs() {
-      this.$router.push({
-        path: '/autoPromotionLogs',
-        query: { journal_id: this.selectedJournalId || '' }
-      });
-    },
-    // 点击列表“查看”图标
-  previewRow(row) {
-    this.previewForm = {
-      id: row.id,
-      email: row.email,
-      run_at: row.run_at || '',
-      // 假设后端或mock数据里有这些字段，没有则赋初始值
-      subject:
-        row.subject ||
-        this.$t('autoPromotionLogs.mockPromotionSubject', { journal: this.currentJournalName }),
-      content:
-        row.mail_content ||
-        this.$t('autoPromotionLogs.mockPromotionContent', { name: row.name || '' })
-    };
-    this.showPreviewDialog = true;
-  },
+            // 向导控制
+            wizardStep: 0,
+            wizardStartDate: '',
+            showTemplateDialog: false,
+            selectedTemplateThumbHtml: '',
+            selectedTemplateName: '',
+            selectedStyleName: '',
 
-  // 保存修改后的邮件内容
-  async saveMailContent() {
-    this.saving = true;
-    try {
-      // 模拟调用 API
-      // await this.$api.post(API.updateMailDetail, this.previewForm);
-      
-      // 同步到本地 list 中（Mock 效果）
-      const index = this.list.findIndex(item => item.id === this.previewForm.id);
-      if (index !== -1) {
-        this.$set(this.list[index], 'run_at', this.previewForm.run_at);
-        this.$set(this.list[index], 'subject', this.previewForm.subject);
-        this.$set(this.list[index], 'mail_content', this.previewForm.content);
-      }
-      
-      this.$message.success(this.$t('autoPromotionLogs.mailContentSaved'));
-      this.showPreviewDialog = false;
-    } finally {
-      this.saving = false;
-    }
-  },
-  
-  // 修改 handleEditRowTemplate 使其调用你已有的选择器
-  handleEditRowTemplate(row) {
-    this.currentRow = row;
-    this.showTemplateDialog = true;
-  },
-    // 处理表格内点击编辑图标
-  handleEditRowTemplate(row) {
-    this.currentRow = row; // 记录当前正在操作哪一行
-    this.templateDialogInitialStyleId = row && row.style_id ? String(row.style_id) : '';
-    this.templateDialogInitialTemplateId = row && row.template_id ? String(row.template_id) : '';
-    this.showTemplateDialog = true;
-  },
+            // 列表数据
+            query: { keyword: '', state: 'all', pageIndex: 1, pageSize: 15 },
+            list: [],
+            total: 0,
 
-  // 修改原有的 handleTemplateApply 方法，使其兼容向导和表格修改
-  handleTemplateApply(payload) {
-    const templateObj = payload && payload.template ? payload.template : {};
-    const styleObj = payload && payload.style ? payload.style : {};
-    const templateId = templateObj.id || (payload && payload.template_id) || '';
-    const templateName = templateObj.name || '';
-    const styleName = styleObj.name || '';
-
-    if (this.currentRow) {
-      // 说明是修改表格里的某一行
-      this.currentRow.template_id = String(templateId);
-      this.currentRow.template_name = templateName;
-      this.currentRow.style_name = styleName;
-      this.updateRow(this.currentRow); // 提交保存
-      this.currentRow = null; // 清空引用
-    } else {
-      // 说明是向导模式在选择
-      this.config.defaultTemplateId = String(templateId);
-      this.selectedTemplateName = templateName;
-      this.selectedStyleName = styleName;
-      this.selectedTemplateThumbHtml = `<div style="zoom:0.18; pointer-events:none;">${payload.html}</div>`;
-    }
-    this.showTemplateDialog = false;
-  },
-
-  getTemplateName(id) {
-    const found = this.templateOptions.find(t => String(t.template_id) === String(id));
-    return found ? found.title : id || this.$t('autoPromotionLogs.templateNotSelected');
-  },
-  getStyleDisplay(row) {
-    if (!row) return '-';
-    if (row.style_name) return row.style_name;
-    if (row.style_id) return String(row.style_id);
-    return '-';
-  },
-  
- 
-    async initPage() {
-      var journal_id = (this.$route.query && this.$route.query.journal_id) || '';
-      this.selectedJournalId = String(journal_id);
-      this.loading = true;
-      try {
-        await this.fetchJournalDetail();
-        if (this.config.initialized) {
-          await this.fetchTemplates();
-          await this.fetchList();
-        }
-      } finally {
-        this.loading = false;
-      }
-    },
-    _parseJournalDetail(data) {
-      const journalInfo = data.journal || data || {};
-      const tpl = journalInfo.template || data.template || {};
-      const style = journalInfo.style || data.style || {};
-      
-      const tplId = String(journalInfo.default_template_id || '0');
-      const styleId = String(journalInfo.default_style_id || '0');
-      
-      return {
-        title: journalInfo.title || journalInfo.journal_title || '',
-        templateId: tplId,
-        styleId: styleId,
-        templateName: tpl.name || tpl.title || journalInfo.default_template_name || '',
-        styleName: style.name || style.title || journalInfo.default_style_name || '',
-        html: `${style.header_html || ''}${tpl.body_html || ''}${style.footer_html || ''}`,
-        enabled: String(journalInfo.start_promotion || '0') === '1',
-        initialized: tplId !== '0' && styleId !== '0'
-      };
-    },
-    async fetchJournalDetail() {
-      if (!this.selectedJournalId) {
-        this.config.initialized = false;
-        return;
-      }
-      try {
-        var res = await this.$api.post('api/email_client/getPromotionJournalDetail', {
-          journal_id: this.selectedJournalId
-        });
-        var data = (res && res.data) || {};
-        var detail = this._parseJournalDetail(data);
-        var journalInfo = data.journal || data || {};
-
-        this.currentJournalName = detail.title || this.currentJournalName || '';
-        this.config = {
-          initialized: detail.initialized,
-          enabled: detail.enabled, // 回显“是否立即推广”
-          defaultTemplateId: detail.initialized ? detail.templateId : '',
-          defaultStyleId: detail.initialized ? detail.styleId : '',
-          defaultTime: journalInfo.default_time || this.config.defaultTime || ''
+            // 状态控制
+            loading: false,
+            saving: false,
+            currentJournalName: '',
+            // 向导弹窗（用于编辑已初始化配置）
+            showWizardDialog: false,
+            showPreviewDialog: false,
+            currentRow: null,
+            templateDialogInitialStyleId: '',
+            templateDialogInitialTemplateId: '',
+            togglingTaskId: '',
+            previewForm: {
+                id: '',
+                email: '',
+                run_at: '',
+                subject: '',
+                content: ''
+            }
         };
-
-        // 回显默认模板/风格（用于“修改默认配置”）
-        this.selectedTemplateName = detail.initialized ? (detail.templateName || '') : '';
-        this.selectedStyleName = detail.initialized ? (detail.styleName || '') : '';
-        this.selectedTemplateThumbHtml = detail.initialized && detail.html
-          ? `<div style="zoom:0.18; pointer-events:none; user-select:none;">${detail.html}</div>`
-          : '';
-
-        // 打开模板选择弹窗时，默认选中当前配置
-        this.templateDialogInitialTemplateId = detail.initialized ? String(detail.templateId || '') : '';
-        this.templateDialogInitialStyleId = detail.initialized ? String(detail.styleId || '') : '';
-      } catch (e) {
-        this.config.initialized = false;
-      }
     },
-
-    // 打开向导弹窗：用于“修改期刊自动推广配置”
-    openWizardDialog() {
-      this.showWizardDialog = true;
-      this.wizardStep = 0;
-      // 尽量从已加载的 config 里取开始日期（没有就保持空）
-      if (this.config && this.config.start_date) {
-        this.wizardStartDate = this.config.start_date;
-      }
+    computed: {},
+    created() {
+        this.initPage();
     },
-
-    // 切换期刊逻辑
-    async handleJournalChange() {
-      this.loading = true;
-      // 切换期刊时：先清空“已选模板/缩略图/风格名”，再判断该期刊是否初始化
-      this.showTemplateDialog = false;
-      this.selectedTemplateThumbHtml = '';
-      this.selectedTemplateName = '';
-      this.selectedStyleName = '';
-      this.config.defaultTemplateId = '';
-      this.wizardStartDate = '';
-      this.wizardStep = 0;
-      try {
-        await this.fetchTemplates(); // 获取对应期刊的模版
-        await this.loadConfig();    // 获取该期刊的初始化状态
-        if (!this.config.initialized) {
-          // 未初始化：确保默认模板为空（保持向导第一步）
-          this.config.defaultTemplateId = '';
-        } else if (this.config.initialized) {
-          await this.fetchList();   // 已初始化的直接加载列表
-        }
-      } finally {
-        this.loading = false;
-      }
+    methods: {
+        handleTabClick(tab) {
+      // tab.name 对应的就是原来的 value ("0", "1" 等)
+      // 注意：el-tabs 的 v-model 绑定的是字符串
+      this.query.state = tab.name;
+      this.handleStateChange(); // 触发你原有的搜索逻辑
     },
+        getPercent(row) {
+            if (!row.total_count || row.total_count === 0) return 0;
+            // 计算已发送占比
+            return Math.floor((row.sent_count / row.total_count) * 100);
+        },
+        closeAllDialogs() {
+            // 点击“去新增模板”后：关闭当前页面所有可能的弹窗
+            this.showWizardDialog = false;
+            this.showTemplateDialog = false;
+            this.showPreviewDialog = false;
+            this.currentRow = null;
+        },
+        openLogs() {
+            const row = this.currentRowData || {};
+            const tid = row.task_id != null && row.task_id !== '' ? row.task_id : row.id;
+            if (tid == null || tid === '') {
+                this.$message.warning(this.$t('autoPromotionLogs.selectTaskForLogs'));
+                return;
+            }
+            this.drawerVisible = true;
+        },
+        // 点击列表“查看”图标：打开推送历史日志抽屉（与顶部「日志」按钮一致）
+        previewRow(row) {
+            this.currentRowData = row ? { ...row } : {};
+            this.openLogs();
+        },
 
-    async fetchJournals() {
-      const res = await this.$api.post(API.getAllJournal, {user_id: localStorage.getItem('U_id')});
-      this.journalOptions = res.data.journals || [];
-    },
+        // 保存修改后的邮件内容
+        async saveMailContent() {
+            this.saving = true;
+            try {
+                // 模拟调用 API
+                // await this.$api.post(API.updateMailDetail, this.previewForm);
 
-    async fetchTemplates() {
-      const res = await this.$api.post(API.listTemplates, { journal_id: this.selectedJournalId });
-      this.templateOptions = (res.data.list || []).map(t => ({
-        template_id: t.template_id || t.id,
-        title: t.title || t.name
-      }));
-    },
+                // 同步到本地 list 中（Mock 效果）
+                const index = this.list.findIndex((item) => item.id === this.previewForm.id);
+                if (index !== -1) {
+                    this.$set(this.list[index], 'run_at', this.previewForm.run_at);
+                    this.$set(this.list[index], 'subject', this.previewForm.subject);
+                    this.$set(this.list[index], 'mail_content', this.previewForm.content);
+                }
 
-    async loadConfig() {
-      await this.fetchJournalDetail();
-    },
+                this.$message.success(this.$t('autoPromotionLogs.mailContentSaved'));
+                this.showPreviewDialog = false;
+            } finally {
+                this.saving = false;
+            }
+        },
 
-    // 接收模版选择：兼容向导与列表行编辑
-    handleTemplateApply(payload) {
-      // payload 兼容：可能是 string(html) 或对象
-      const html = payload && typeof payload === 'object' ? payload.html : String(payload || '');
-      const templateId =
-        payload && typeof payload === 'object'
-          ? (payload.template_id || payload.id || (payload.template && (payload.template.id || payload.template.template_id)) || '')
-          : '';
-      const styleId =
-        payload && typeof payload === 'object'
-          ? (payload.style_id || (payload.style && payload.style.id) || '')
-          : '';
-      const templateName = payload && typeof payload === 'object' && payload.template ? payload.template.name : '';
-      const styleName = payload && typeof payload === 'object' && payload.style ? payload.style.name : '';
+        // 修改 handleEditRowTemplate 使其调用你已有的选择器
+        handleEditRowTemplate(row) {
+            this.currentRow = row;
+            this.showTemplateDialog = true;
+        },
+        // 处理表格内点击编辑图标
+        handleEditRowTemplate(row) {
+            this.currentRow = row; // 记录当前正在操作哪一行
+            this.templateDialogInitialStyleId = row && row.style_id ? String(row.style_id) : '';
+            this.templateDialogInitialTemplateId = row && row.template_id ? String(row.template_id) : '';
+            this.showTemplateDialog = true;
+        },
 
-      // 必须选到模板（template_id）才允许“下一步”解除置灰
-      if (!templateId) {
-        this.$message.warning(this.$t('autoPromotionLogs.selectTemplateWarning'));
-        return;
-      }
-      if (this.currentRow) {
-        this.currentRow.template_id = String(templateId);
-        this.currentRow.template_name = templateName || this.getTemplateName(templateId);
-        this.currentRow.style_id = styleId ? String(styleId) : this.currentRow.style_id;
-        this.currentRow.style_name = styleName || this.currentRow.style_name || '';
-        this.updateRow(this.currentRow);
-        this.currentRow = null;
-      } else {
-        this.config.defaultTemplateId = String(templateId);
-        this.selectedTemplateName = templateName || '';
-        this.selectedStyleName = styleName || '';
-        // 生成缩略图 HTML（禁用交互，避免点击跳转）
-        this.selectedTemplateThumbHtml = `<div style="zoom:0.18; pointer-events:none; user-select:none;">${html}</div>`;
-      }
-      this.templateDialogInitialStyleId = '';
-      this.templateDialogInitialTemplateId = '';
-      this.showTemplateDialog = false;
-      // this.$message.success(this.$t('autoPromotion.saved') || 'Saved');
-    },
+        // 修改原有的 handleTemplateApply 方法，使其兼容向导和表格修改
+        handleTemplateApply(payload) {
+            const templateObj = payload && payload.template ? payload.template : {};
+            const styleObj = payload && payload.style ? payload.style : {};
+            const templateId = templateObj.id || (payload && payload.template_id) || '';
+            const templateName = templateObj.name || '';
+            const styleName = styleObj.name || '';
 
-    // 最终提交初始化
-    async completeInitialization() {
-      this.saving = true;
-      try {
-        const payload = {
-          journal_id: String(this.selectedJournalId || ''),
-          default_template_id: String(this.config.defaultTemplateId || ''),
-          default_style_id: String(this.config.defaultStyleId || ''),
-          start_promotion: this.config.enabled ? '1' : '0'
-        };
-        this.config.initialized = true; // 切换到管理模式
-        this.showWizardDialog = false;
-        this.fetchList();
-        await this.$api.post(API.saveConfig, payload);
-        this.$message.success(this.$t('autoPromotionLogs.configUpdated'));
-        
-      } finally {
-        this.saving = false;
-      }
-    },
+            if (this.currentRow) {
+                // 说明是修改表格里的某一行
+                this.currentRow.template_id = String(templateId);
+                this.currentRow.template_name = templateName;
+                this.currentRow.style_name = styleName;
+                this.updateRow(this.currentRow); // 提交保存
+                this.currentRow = null; // 清空引用
+            } else {
+                // 说明是向导模式在选择
+                this.config.defaultTemplateId = String(templateId);
+                this.selectedTemplateName = templateName;
+                this.selectedStyleName = styleName;
+                this.selectedTemplateThumbHtml = `<div style="zoom:0.18; pointer-events:none;">${payload.html}</div>`;
+            }
+            this.showTemplateDialog = false;
+        },
 
-    async saveConfig() {
-      // 用于管理模式下的快捷修改保存
-      await this.$api.post(API.saveConfig, {
-        journal_id: String(this.selectedJournalId || ''),
-        default_template_id: String(this.config.defaultTemplateId || ''),
-        default_style_id: String(this.config.defaultStyleId || ''),
-        start_promotion: this.config.enabled ? '1' : '0'
-      });
-      this.$message.success(this.$t('autoPromotionLogs.configUpdated'));
-    },
+        getTemplateName(id) {
+            const found = this.templateOptions.find((t) => String(t.template_id) === String(id));
+            return found ? found.title : id || this.$t('autoPromotionLogs.templateNotSelected');
+        },
+        getStyleDisplay(row) {
+            if (!row) return '-';
+            if (row.style_name) return row.style_name;
+            if (row.style_id) return String(row.style_id);
+            return '-';
+        },
 
-    async fetchList() {
-      this.loading = true;
-      try {
-        // 当前接口未联通：直接使用本地假数据
-        const mock = this.generateMockList();
-        this.list = mock.list;
-        this.total = mock.total;
-      } finally {
-        this.loading = false;
-      }
-    },
+        async initPage() {
+            this.hidePage = false;
+            var journal_id = (this.$route.query && this.$route.query.journal_id) || '';
+            this.selectedJournalId = String(journal_id);
+            this.loading = true;
+            try {
+                await this.fetchJournalDetail();
+                if (this.config.initialized) {
+                    await this.fetchTemplates();
+                    await this.fetchList();
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+        _parseJournalDetail(data) {
+            const journalInfo = data.journal || data || {};
+            const tpl = journalInfo.template || data.template || {};
+            const style = journalInfo.style || data.style || {};
 
-    // 生成用于页面展示的假数据（mock）
-    generateMockList() {
-      const tpl1 = this.templateOptions && this.templateOptions.length ? String(this.templateOptions[0].template_id) : '1';
-      const tpl2 = this.templateOptions && this.templateOptions.length > 1 ? String(this.templateOptions[1].template_id) : tpl1;
+            const tplId = String(journalInfo.default_template_id || '0');
+            const styleId = String(journalInfo.default_style_id || '0');
 
-      const baseDate = new Date();
-      // 使用固定的偏移，保证每次打开都有“未来”的时间
-      const d1 = new Date(baseDate.getTime() + 86400000 * 2);
-      const d2 = new Date(baseDate.getTime() + 86400000 * 3);
-      const d3 = new Date(baseDate.getTime() + 86400000 * 4);
-      const d4 = new Date(baseDate.getTime() + 86400000 * 5);
-      const d5 = new Date(baseDate.getTime() + 86400000 * 6);
+            return {
+                title: journalInfo.title || journalInfo.journal_title || '',
+                templateId: tplId,
+                styleId: styleId,
+                templateName: tpl.name || tpl.title || journalInfo.default_template_name || '',
+                styleName: style.name || style.title || journalInfo.default_style_name || '',
+                html: `${style.header_html || ''}${tpl.body_html || ''}${style.footer_html || ''}`,
+                enabled: String(journalInfo.start_promotion || '0') === '1',
+                initialized: tplId !== '0' && styleId !== '0'
+            };
+        },
+        async fetchJournalDetail() {
+            if (!this.selectedJournalId) {
+                this.config.initialized = false;
+                return;
+            }
+            try {
+                var res = await this.$api.post('api/email_client/getPromotionJournalDetail', {
+                    journal_id: this.selectedJournalId
+                });
+                var data = (res && res.data) || {};
+                if (!data.journal) {
+                    this.$message.error('数据获取失败');
+                    this.hidePage = true;
+                    return;
+                }
+                var detail = this._parseJournalDetail(data);
+                var journalInfo = data.journal || data || {};
 
-      const fmt = (d) => {
-        const yyyy = d.getFullYear();
-        const mm = String(d.getMonth() + 1).padStart(2, '0');
-        const dd = String(d.getDate()).padStart(2, '0');
-        return `${yyyy}-${mm}-${dd} 09:00:00`;
-      };
+                this.currentJournalName = detail.title || this.currentJournalName || '';
+                this.config = {
+                    initialized: detail.initialized,
+                    enabled: detail.enabled, // 回显“是否立即推广”
+                    defaultTemplateId: detail.initialized ? detail.templateId : '',
+                    defaultStyleId: detail.initialized ? detail.styleId : '',
+                    defaultTime: journalInfo.default_time || this.config.defaultTime || ''
+                };
 
-      const mk = (idx, name, email, template_id, style_id, style_name, paused, run_at) => ({
-        id: `mock_${idx}`,
-        name,
-        email,
-        template_id: String(template_id),
-        style_id: String(style_id),
-        style_name: style_name || '',
-        paused: Boolean(paused),
-        run_at
-      });
+                // 回显默认模板/风格（用于“修改默认配置”）
+                this.selectedTemplateName = detail.initialized ? detail.templateName || '' : '';
+                this.selectedStyleName = detail.initialized ? detail.styleName || '' : '';
+                this.selectedTemplateThumbHtml =
+                    detail.initialized && detail.html
+                        ? `<div style="zoom:0.18; pointer-events:none; user-select:none;">${detail.html}</div>`
+                        : '';
 
-      const list = [
-        mk(1, '张三', 'zhangsan@example.com', tpl1, 1, '简约风格', false, fmt(d1)),
-        mk(2, '李四', 'lisi@example.com', tpl2, 2, '商务风格', true, fmt(d2)),
-        mk(3, '王五', 'wangwu@example.com', tpl1, 1, '简约风格', false, fmt(d3)),
-        mk(4, '赵六', 'zhaoliu@example.com', tpl2, 3, '学术风格', false, fmt(d4)),
-        mk(5, '钱七', 'qianqi@example.com', tpl1, 2, '商务风格', true, fmt(d5)),
-      ];
+                // 打开模板选择弹窗时，默认选中当前配置
+                this.templateDialogInitialTemplateId = detail.initialized ? String(detail.templateId || '') : '';
+                this.templateDialogInitialStyleId = detail.initialized ? String(detail.styleId || '') : '';
+            } catch (e) {
+                this.config.initialized = false;
+            }
+        },
 
-      return { list, total: list.length };
-    },
+        // 打开向导弹窗：用于“修改期刊自动推广配置”
+        openWizardDialog() {
+            this.showWizardDialog = true;
+            this.wizardStep = 0;
+            // 尽量从已加载的 config 里取开始日期（没有就保持空）
+            if (this.config && this.config.start_date) {
+                this.wizardStartDate = this.config.start_date;
+            }
+        },
 
-    // 模板切换（mock：仅更新本行数据，不做后端请求）
-    updateRow(row) {
-      if (!row) return;
-      row.template_id = row.template_id == null ? '' : String(row.template_id);
-      this.$message.success(this.$t('autoPromotion.saved') || 'Saved');
-    },
+        // 切换期刊逻辑
+        async handleJournalChange() {
+            this.loading = true;
+            // 切换期刊时：先清空“已选模板/缩略图/风格名”，再判断该期刊是否初始化
+            this.showTemplateDialog = false;
+            this.selectedTemplateThumbHtml = '';
+            this.selectedTemplateName = '';
+            this.selectedStyleName = '';
+            this.config.defaultTemplateId = '';
+            this.wizardStartDate = '';
+            this.wizardStep = 0;
+            try {
+                await this.fetchTemplates(); // 获取对应期刊的模版
+                await this.loadConfig(); // 获取该期刊的初始化状态
+                if (!this.config.initialized) {
+                    // 未初始化：确保默认模板为空（保持向导第一步）
+                    this.config.defaultTemplateId = '';
+                } else if (this.config.initialized) {
+                    await this.fetchList(); // 已初始化的直接加载列表
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
 
-    // 暂停/开启（mock：切换 paused）
-    togglePause(row) {
-      if (!row) return;
-      row.paused = !row.paused;
-      if (row.paused) {
-        this.$message({
-          type: 'info',
-          message: this.$t('autoPromotionLogs.pauseSuccess')
-        });
-      } else {
-        this.$message.success(this.$t('autoPromotionLogs.enableSuccess'));
-      }
-    },
+        async fetchJournals() {
+            const res = await this.$api.post(API.getAllJournal, { user_id: localStorage.getItem('U_id') });
+            this.journalOptions = res.data.journals || [];
+        },
 
-    // 删除（mock：从列表移除）
-    deleteRow(row) {
-      if (!row) return;
-      this.list = (this.list || []).filter(item => item !== row);
-      this.total = this.list.length;
-      this.$message.success(this.$t('autoPromotionLogs.deletedSuccess'));
-    },
+        async fetchTemplates() {
+            const res = await this.$api.post(API.listTemplates, { journal_id: this.selectedJournalId });
+            this.templateOptions = (res.data.list || []).map((t) => ({
+                template_id: t.template_id || t.id,
+                title: t.title || t.name
+            }));
+        },
 
-    handlePageChange(p) {
-      this.query.pageIndex = p;
-      this.fetchList();
+        async loadConfig() {
+            await this.fetchJournalDetail();
+        },
+
+        // 接收模版选择：兼容向导与列表行编辑
+        handleTemplateApply(payload) {
+            // payload 兼容：可能是 string(html) 或对象
+            const html = payload && typeof payload === 'object' ? payload.html : String(payload || '');
+            const templateId =
+                payload && typeof payload === 'object'
+                    ? payload.template_id || payload.id || (payload.template && (payload.template.id || payload.template.template_id)) || ''
+                    : '';
+            const styleId = payload && typeof payload === 'object' ? payload.style_id || (payload.style && payload.style.id) || '' : '';
+            const templateName = payload && typeof payload === 'object' && payload.template ? payload.template.name : '';
+            const styleName = payload && typeof payload === 'object' && payload.style ? payload.style.name : '';
+
+            // 必须选到模板（template_id）才允许“下一步”解除置灰
+            if (!templateId) {
+                this.$message.warning(this.$t('autoPromotionLogs.selectTemplateWarning'));
+                return;
+            }
+            if (this.currentRow) {
+                this.currentRow.template_id = String(templateId);
+                this.currentRow.template_name = templateName || this.getTemplateName(templateId);
+                this.currentRow.style_id = styleId ? String(styleId) : this.currentRow.style_id;
+                this.currentRow.style_name = styleName || this.currentRow.style_name || '';
+                this.updateRow(this.currentRow);
+                this.currentRow = null;
+            } else {
+                this.config.defaultTemplateId = String(templateId);
+                this.selectedTemplateName = templateName || '';
+                this.selectedStyleName = styleName || '';
+                // 生成缩略图 HTML（禁用交互，避免点击跳转）
+                this.selectedTemplateThumbHtml = `<div style="zoom:0.18; pointer-events:none; user-select:none;">${html}</div>`;
+            }
+            this.templateDialogInitialStyleId = '';
+            this.templateDialogInitialTemplateId = '';
+            this.showTemplateDialog = false;
+            // this.$message.success(this.$t('autoPromotion.saved') || 'Saved');
+        },
+
+        // 最终提交初始化
+        async completeInitialization() {
+            this.saving = true;
+            try {
+                const payload = {
+                    journal_id: String(this.selectedJournalId || ''),
+                    default_template_id: String(this.config.defaultTemplateId || ''),
+                    default_style_id: String(this.config.defaultStyleId || ''),
+                    start_promotion: this.config.enabled ? '1' : '0'
+                };
+                this.config.initialized = true; // 切换到管理模式
+                this.showWizardDialog = false;
+                this.fetchList();
+                await this.$api.post(API.saveConfig, payload);
+                this.$message.success(this.$t('autoPromotionLogs.configUpdated'));
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        async saveConfig() {
+            // 用于管理模式下的快捷修改保存
+            await this.$api.post(API.saveConfig, {
+                journal_id: String(this.selectedJournalId || ''),
+                default_template_id: String(this.config.defaultTemplateId || ''),
+                default_style_id: String(this.config.defaultStyleId || ''),
+                start_promotion: this.config.enabled ? '1' : '0'
+            });
+            this.$message.success(this.$t('autoPromotionLogs.configUpdated'));
+        },
+
+        async fetchList() {
+            this.loading = true;
+            try {
+                const params = {
+                    journal_id: String(this.selectedJournalId || ''),
+                    page: Number(this.query.pageIndex || 1),
+                    per_page: Number(this.query.pageSize || 15)
+                };
+                if (this.query.state !== 'all' && this.query.state !== '' && this.query.state != null) {
+                    params.state = String(this.query.state);
+                }
+                const res = await this.$api.post(API.list, params);
+                const data = (res && res.data) || {};
+                const rawList = Array.isArray(data.list) ? data.list : [];
+
+                this.list = rawList.map((item, idx) => {
+                    const runAt = item.run_at || item.run_time || item.plan_time || item.execute_time || item.send_date || '';
+                    const state = String(item.state != null ? item.state : '');
+                    return {
+                        id: item.id || item.task_id || `task_${idx + 1}`,
+                        task_id: String(item.task_id != null ? item.task_id : item.id || ''),
+                        task_name: item.task_name || item.name || '',
+                        scene: item.scene || '',
+                        name: item.name || item.expert_name || '',
+                        email: item.email || item.to_email || '',
+                        template_id: String(item.template_id || item.default_template_id || ''),
+                        style_id: String(item.style_id || item.default_style_id || ''),
+                        style_name: item.style_name || item.default_style_name || '',
+                        state: state,
+                        paused: state === '2',
+                        run_at: runAt,
+                        total_count: Number(item.total_count || 0),
+                        sent_count: Number(item.sent_count || 0),
+                        fail_count: Number(item.fail_count || 0),
+                        bounce_count: Number(item.bounce_count || 0),
+                        min_interval: Number(item.min_interval || 0),
+                        max_interval: Number(item.max_interval || 0),
+                        send_start_hour: item.send_start_hour != null ? item.send_start_hour : '-',
+                        send_end_hour: item.send_end_hour != null ? item.send_end_hour : '-'
+                    };
+                });
+
+                this.total = Number(data.total || data.count || this.list.length || 0);
+                // 兼容后端返回 page/per_page
+                if (data.page != null) this.query.pageIndex = Number(data.page);
+                if (data.per_page != null) this.query.pageSize = Number(data.per_page);
+            } catch (e) {
+                this.list = [];
+                this.total = 0;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // 生成用于页面展示的假数据（mock）
+        generateMockList() {
+            const tpl1 = this.templateOptions && this.templateOptions.length ? String(this.templateOptions[0].template_id) : '1';
+            const tpl2 = this.templateOptions && this.templateOptions.length > 1 ? String(this.templateOptions[1].template_id) : tpl1;
+
+            const baseDate = new Date();
+            // 使用固定的偏移，保证每次打开都有“未来”的时间
+            const d1 = new Date(baseDate.getTime() + 86400000 * 2);
+            const d2 = new Date(baseDate.getTime() + 86400000 * 3);
+            const d3 = new Date(baseDate.getTime() + 86400000 * 4);
+            const d4 = new Date(baseDate.getTime() + 86400000 * 5);
+            const d5 = new Date(baseDate.getTime() + 86400000 * 6);
+
+            const fmt = (d) => {
+                const yyyy = d.getFullYear();
+                const mm = String(d.getMonth() + 1).padStart(2, '0');
+                const dd = String(d.getDate()).padStart(2, '0');
+                return `${yyyy}-${mm}-${dd} 09:00:00`;
+            };
+
+            const mk = (idx, name, email, template_id, style_id, style_name, paused, run_at) => ({
+                id: `mock_${idx}`,
+                name,
+                email,
+                template_id: String(template_id),
+                style_id: String(style_id),
+                style_name: style_name || '',
+                paused: Boolean(paused),
+                run_at
+            });
+
+            const list = [
+                mk(1, '张三', 'zhangsan@example.com', tpl1, 1, '简约风格', false, fmt(d1)),
+                mk(2, '李四', 'lisi@example.com', tpl2, 2, '商务风格', true, fmt(d2)),
+                mk(3, '王五', 'wangwu@example.com', tpl1, 1, '简约风格', false, fmt(d3)),
+                mk(4, '赵六', 'zhaoliu@example.com', tpl2, 3, '学术风格', false, fmt(d4)),
+                mk(5, '钱七', 'qianqi@example.com', tpl1, 2, '商务风格', true, fmt(d5))
+            ];
+
+            return { list, total: list.length };
+        },
+
+        // 模板切换（mock：仅更新本行数据，不做后端请求）
+        updateRow(row) {
+            if (!row) return;
+            row.template_id = row.template_id == null ? '' : String(row.template_id);
+            this.$message.success(this.$t('autoPromotion.saved') || 'Saved');
+        },
+
+        // 暂停/开启（走接口）
+        async togglePause(row) {
+            if (!row) return;
+            const prevPaused = !!row.paused;
+            const prevState = String(row.state == null ? '' : row.state);
+            const nextPaused = !prevPaused;
+            const nextState = nextPaused ? '2' : '1';
+            const taskId = String(row.id || row.task_id || '');
+            if (!taskId) return;
+            try {
+                this.togglingTaskId = taskId;
+                row.paused = nextPaused;
+                row.state = nextState;
+                await this.$api.post(API.toggleTaskState, {
+                    task_id: taskId,
+                    journal_id: String(this.selectedJournalId || row.journal_id || ''),
+                    state: nextState
+                });
+                this.$message.success(nextPaused ? this.$t('autoPromotionLogs.pauseSuccess') : this.$t('autoPromotionLogs.enableSuccess'));
+                await this.fetchList();
+            } catch (e) {
+                row.paused = prevPaused;
+                row.state = prevState;
+                this.$message.error((e && e.msg) || (e && e.message) || this.$t('autoPromotionLogs.operationFailed'));
+            } finally {
+                this.togglingTaskId = '';
+            }
+        },
+
+        // 删除（mock：从列表移除）
+        deleteRow(row) {
+            if (!row) return;
+            this.list = (this.list || []).filter((item) => item !== row);
+            this.total = this.list.length;
+            this.$message.success(this.$t('autoPromotionLogs.deletedSuccess'));
+        },
+
+        handlePageChange(p) {
+            this.query.pageIndex = p;
+            this.fetchList();
+        },
+        handlePageSizeChange(size) {
+            this.query.pageSize = Number(size || 10);
+            this.query.pageIndex = 1;
+            this.fetchList();
+        },
+        handleSearch() {
+            this.query.pageIndex = 1;
+            this.fetchList();
+        },
+        handleStateChange() {
+            this.query.pageIndex = 1;
+            this.fetchList();
+        },
+        getTaskStatusText(state) {
+            const stateTextMap = {
+                0: this.$t('autoPromotionLogs.state0'),
+                1: this.$t('autoPromotionLogs.state1'),
+                2: this.$t('autoPromotionLogs.state2'),
+                3: this.$t('autoPromotionLogs.state3'),
+                4: this.$t('autoPromotionLogs.state4'),
+                5: this.$t('autoPromotionLogs.state5')
+            };
+            const key = Number(state);
+            return Object.prototype.hasOwnProperty.call(stateTextMap, key) ? stateTextMap[key] : '-';
+        },
+        getTaskStatusClass(state) {
+    const stateClassMap = {
+        0: 'status-draft',      // Draft - 浅灰色
+        5: 'status-preparing',  // Preparing - 橘色
+        1: 'status-running',    // Running - 深蓝色
+        2: 'status-paused',     // Paused - 深灰色
+        3: 'status-completed',  // Completed - 绿色
+        4: 'status-cancelled'   // Cancelled - 浅红色
+    };
+    return stateClassMap[Number(state)] || '';
+}
     }
-  }
 };
 </script>
 
 <style scoped>
-.auto-promo-container {  background: #f9fafc; min-height: 90%; }
-.journal-header-card { margin-bottom: 15px; }
-.config-bar { display: flex; justify-content: space-between; align-items: center; }
+.auto-promo-container {
+    background: #f9fafc;
+    min-height: 90%;
+}
+.journal-header-card {
+    margin-bottom: 15px;
+}
+.config-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
 /* 向导样式 */
-.wizard-card { margin-top: 10px; min-height: 500px; }
-.wizard-header { padding: 20px 0 40px; border-bottom: 1px solid #f0f2f5; }
-.wizard-body { padding: 40px 0; }
-.step-content { text-align: center; }
-.step-tips { margin-bottom: 30px; }
-.step-tips i { font-size: 40px; color: #409EFF; margin-bottom: 15px; }
+.wizard-card {
+    margin-top: 10px;
+    min-height: 500px;
+}
+.wizard-header {
+    padding: 20px 0 40px;
+    border-bottom: 1px solid #f0f2f5;
+}
+.wizard-body {
+    padding: 40px 0;
+}
+.step-content {
+    text-align: center;
+}
+.step-tips {
+    margin-bottom: 30px;
+}
+.step-tips i {
+    font-size: 40px;
+    color: #409eff;
+    margin-bottom: 15px;
+}
 
 .template-placeholder {
-  width: 520px;
-  max-width: 100%;
-  border: 2px dashed #dcdfe6;
-  margin: 0 auto;
-  border-radius: 8px;
-  padding: 14px;
-  cursor: pointer;
-  transition: 0.3s;
+    width: 520px;
+    max-width: 100%;
+    border: 2px dashed #dcdfe6;
+    margin: 0 auto;
+    border-radius: 8px;
+    padding: 14px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+.template-placeholder:hover {
+    border-color: #409eff;
+    color: #409eff;
+    background: #f5f7fa;
+}
+.template-placeholder .inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 150px;
+}
+.template-placeholder .inner.selected {
+    display: block;
+    min-height: unset;
+    color: #333;
+}
+.template-placeholder .inner i {
+    font-size: 30px;
 }
-.template-placeholder:hover { border-color: #409EFF; color: #409EFF; background: #f5f7fa; }
-.template-placeholder .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; }
-.template-placeholder .inner.selected { display: block; min-height: unset; color: #333; }
-.template-placeholder .inner i { font-size: 30px; }
 .thumb-box {
-  border: 1px solid #ebeef5;
-  border-radius: 6px;
-  overflow: hidden;
-  background: #fff;
-  height: 120px;
-  margin-bottom: 10px;
+    border: 1px solid #ebeef5;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #fff;
+    height: 120px;
+    margin-bottom: 10px;
+}
+.thumb-content {
+    transform-origin: top left;
+}
+.selected-meta {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.selected-text {
+    flex: 1;
+    min-width: 0;
+}
+.tpl-line {
+    color: #606266;
+    line-height: 20px;
+}
+.style-line {
+    color: #909399;
+    font-size: 12px;
+    line-height: 18px;
+    margin-top: 2px;
 }
-.thumb-content { transform-origin: top left; }
-.selected-meta { display: flex; align-items: center; gap: 10px; }
-.selected-text { flex: 1; min-width: 0; }
-.tpl-line { color: #606266; line-height: 20px; }
-.style-line { color: #909399; font-size: 12px; line-height: 18px; margin-top: 2px; }
 
-.wizard-footer { text-align: center; padding-top: 30px; border-top: 1px solid #f0f2f5; }
+.wizard-footer {
+    text-align: center;
+    padding-top: 30px;
+    border-top: 1px solid #f0f2f5;
+}
 
 /* 管理模式样式 */
-.config-card { margin-bottom: 15px; background: #fff; }
-.list-card { background: #fff; }
-.list-header { margin-bottom: 15px; }
-.pagination { margin-top: 20px; text-align: right; }
-.final-check { margin-top: 15px; line-height: 2; }
+.config-card {
+    margin-bottom: 15px;
+    background: #fff;
+}
+.list-card {
+    background: #fff;
+}
+.list-header {
+    margin-bottom: 15px;
+}
+.pagination {
+    margin-top: 20px;
+    text-align: right;
+}
+.final-check {
+    margin-top: 15px;
+    line-height: 2;
+}
 /* 弹窗容器布局 */
 .vertical-wizard-container {
-  display: flex;
-  gap: 30px;
-  padding: 10px;
+    display: flex;
+    gap: 30px;
+    padding: 10px;
 }
 
 .side-nav {
-  width: 120px;
-  flex-shrink: 0;
-  padding-top: 10px;
+    width: 120px;
+    flex-shrink: 0;
+    padding-top: 10px;
 }
 
 .main-form-content {
-  flex: 1;
-  max-height: 60vh; /* 开启滚动条防止内容过长 */
-  overflow-y: auto;
-  padding-right: 15px;
+    flex: 1;
+    max-height: 60vh; /* 开启滚动条防止内容过长 */
+    overflow-y: auto;
+    padding-right: 15px;
 }
 
 /* 每一个小节的样式 */
 .form-section {
-  margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .section-title {
-  margin: 0 0 20px 0;
-  font-size: 15px;
-  color: #303133;
-  display: flex;
-  align-items: center;
+    margin: 0 0 20px 0;
+    font-size: 15px;
+    color: #303133;
+    display: flex;
+    align-items: center;
 }
 
 .section-title i {
-  margin-right: 8px;
-  color: #409EFF;
-  font-size: 18px;
+    margin-right: 8px;
+    color: #409eff;
+    font-size: 18px;
 }
 
 /* 优化后的模板选择框 */
 .template-placeholder.mini-mode {
-  width: 100%;
-  padding: 15px;
-  min-height: 60px;
-  background: #f8f9fb;
+    width: 100%;
+    padding: 15px;
+    min-height: 60px;
+    background: #f8f9fb;
 }
 
 .thumb-box-mini {
-  width: 100px;
-  height: 60px;
-  border: 1px solid #ddd;
-  overflow: hidden;
-  background: #fff;
-  border-radius: 4px;
-  margin-right: 15px;
+    width: 100px;
+    height: 60px;
+    border: 1px solid #ddd;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 4px;
+    margin-right: 15px;
 }
 
 .status-confirm-box {
-  padding: 15px;
-  background: #f0f9eb;
-  border-radius: 4px;
-  border: 1px inset #e1f3d8;
+    padding: 15px;
+    background: #f0f9eb;
+    border-radius: 4px;
+    border: 1px inset #e1f3d8;
 }
 
 .selected-meta {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 /* 调整分割线间距 */
 .el-divider--horizontal {
-  margin: 24px 0;
+    margin: 24px 0;
 }
 /* 表格内容排版 */
-.user-info .name { font-weight: bold; color: #303133; margin-bottom: 2px; }
-.user-info .email { color: #909399; font-size: 12px; }
+.user-info .name {
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 2px;
+}
+.user-info .email {
+    color: #909399;
+    font-size: 12px;
+}
 
-.template-info-cell { display: flex; align-items: center; justify-content: space-between; }
-.tpl-main { font-weight: 600; color: #409EFF; font-size: 13px; }
-.tpl-sub { color: #909399; font-size: 12px; margin-top: 2px; }
-.edit-icon-btn { font-size: 16px; margin-left: 8px; color: #909399; }
-.edit-icon-btn:hover { color: #409EFF; }
+.template-info-cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.tpl-main {
+    font-weight: 600;
+    color: #409eff;
+    font-size: 13px;
+}
+.tpl-sub {
+    color: #909399;
+    font-size: 12px;
+    margin-top: 2px;
+}
+.edit-icon-btn {
+    font-size: 16px;
+    margin-left: 8px;
+    color: #909399;
+}
+.edit-icon-btn:hover {
+    color: #409eff;
+}
 
-.time-cell { color: #606266; display: flex; align-items: center; gap: 5px; }
+.time-cell {
+    color: #606266;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
 
 /* 状态标签 (带圆点) */
 .status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 10px;
-  border-radius: 12px;
-  font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 12px;
 }
 .status-badge::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  margin-right: 6px;
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 6px;
 }
 
-.is-waiting { color: #e67e22; background: #fff3e6; }
-.is-waiting::before { background: #e67e22; }
+.is-waiting {
+    color: #e67e22;
+    background: #fff3e6;
+}
+.is-waiting::before {
+    background: #e67e22;
+}
 
-.is-paused { color: #909399; background: #f4f4f5; }
-.is-paused::before { background: #909399; }
+.is-paused {
+    color: #909399;
+    background: #f4f4f5;
+}
+.is-paused::before {
+    background: #909399;
+}
 
 /* 操作按钮 */
 .action-btns .el-button {
-  font-size: 18px;
-  padding: 0 5px;
-  color: #606266;
+    font-size: 13px;
+    padding: 0 4px;
+    color: #606266;
+}
+.action-btns .el-button [class*='el-icon-'] {
+    font-size: 12px;
+}
+.action-btns .el-button:hover {
+    color: #409eff;
+}
+.action-btns .delete-btn {
+    color: #f56c6c;
+}
+.action-btns .delete-btn:hover {
+    color: #f56c6c;
+}
+.action-btns .delete-btn.el-button--text {
+    color: #f56c6c !important;
 }
-.action-btns .el-button:hover { color: #409EFF; }
-.action-btns .delete-btn { color: #F56C6C; }
-.action-btns .delete-btn:hover { color: #F56C6C; }
-.action-btns .delete-btn.el-button--text { color: #F56C6C !important; }
 
 /* 深度选择器处理表格边距 */
-.custom-table >>> .el-table__cell { padding: 12px 0; }
+.custom-table >>> .el-table__cell {
+    padding: 12px 0;
+}
 /* 邮件编辑弹窗专用样式 */
 .mail-edit-wrapper {
-  padding: 10px 20px;
+    padding: 10px 20px;
 }
 
 .editor-container {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  background: #fff;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    background: #fff;
 }
 
 /* 模拟富文本编辑器的工具栏感 (如果你没有引入富文本) */
 .editor-container >>> .el-textarea__inner {
-  border: none;
-  padding: 15px;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", sans-serif;
-  line-height: 1.6;
+    border: none;
+    padding: 15px;
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', sans-serif;
+    line-height: 1.6;
 }
 
 /* 让 Dialog 的 footer 更靠右 */
 .el-dialog__footer {
-  padding: 20px;
-  border-top: 1px solid #f0f2f5;
+    padding: 20px;
+    border-top: 1px solid #f0f2f5;
 }
 
 /* 列表内的主题预览小字（可选） */
 .tpl-sub.mail-subject {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #8c939d;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #8c939d;
 }
-</style>
\ No newline at end of file
+/* 表格整体精致化 */
+.exquisite-log-table {
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+/* 任务列样式 */
+.task-column .task-name {
+    font-weight: bold;
+    color: #334155;
+    margin-bottom: 4px;
+}
+.task-id-tags {
+    display: flex;
+    gap: 8px;
+}
+.id-tag {
+    font-size: 11px;
+    background: #f1f5f9;
+    color: #64748b;
+    padding: 1px 6px;
+    border-radius: 4px;
+}
+
+/* 策略列样式 */
+.strategy-item {
+    font-size: 13px;
+    color: #475569;
+    margin-bottom: 2px;
+}
+.strategy-item i {
+    color: #3b82f6;
+    margin-right: 4px;
+}
+.mini-text {
+    font-size: 11px;
+    color: #94a3b8;
+}
+
+/* 进度条与数据展示统计 */
+.delivery-stats-wrapper {
+    padding: 4px 0;
+}
+.stats-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 6px;
+    font-size: 12px;
+}
+.percent-text b {
+    font-size: 14px;
+    color: #1e293b;
+}
+.count-text {
+    color: #94a3b8;
+}
+.stats-footer {
+    margin-top: 6px;
+    display: flex;
+    gap: 12px;
+    font-size: 11px;
+}
+.error-label.red {
+    color: #f43f5e;
+    font-weight: 500;
+}
+.error-label.orange {
+    color: #f59e0b;
+    font-weight: 500;
+}
+.success-label {
+    color: #10b981;
+}
+
+/* 状态标签样式（根据你现有的类名微调） */
+.status-badge {
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+}
+
+/* 操作按钮 */
+.delete-btn {
+    color: #f43f5e !important;
+}
+.delete-btn:hover {
+    color: #be123c !important;
+}
+.delivery-dashboard {
+    padding: 0px 0;
+}
+
+/* 数字网格布局 */
+.num-grid {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    background: #f8fafc;
+    border-radius: 6px;
+    padding: 0px 10px 2px;
+    border: 1px solid #edf2f7;
+}
+
+.num-item {
+    text-align: center;
+    flex: 1;
+}
+
+.num-item .label {
+    font-size: 12px;
+    color: #333;
+    /* text-transform: uppercase; */
+}
+
+.num-item .value {
+    font-size: 15px;
+    font-weight: 700;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+/* 颜色体系 */
+.value.primary {
+    color: #3b82f6;
+} /* 蓝色 */
+.value.success {
+    color: #10b981;
+} /* 绿色 */
+.value.danger {
+    color: #ef4444;
+} /* 红色 */
+.value.warning {
+    color: #f59e0b;
+} /* 橙色 */
+.value.neutral {
+    color: #cbd5e1;
+} /* 灰色(0的时候) */
+
+/* 进度条微调 */
+.progress-container {
+    margin-bottom: 8px;
+    padding: 0 4px;
+}
+
+/* 底部标签 */
+.stats-status {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 4px;
+}
+
+.safe-tag {
+    font-size: 11px;
+    color: #10b981;
+    background: #ecfdf5;
+    padding: 2px 8px;
+    border-radius: 10px;
+}
+
+.warning-tag {
+    font-size: 11px;
+    color: #f59e0b;
+    background: #fffbe6;
+    padding: 2px 8px;
+    border-radius: 10px;
+}
+
+.percent-tag {
+    font-size: 11px;
+    color: #64748b;
+    font-style: italic;
+}
+::v-deep .custom-table .el-table__cell {
+    padding: 6px 0 !important;
+}
+
+.filter-header-row {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  gap: 16px;          /* 胶囊和Search按钮之间的间距 */
+  margin-bottom: 16px;
+  background-color: transparent; /* 容器透明，不厚重 */
+}
+
+/* 2. 彻底重置 el-tabs 的原生样式 (最丑的地方) */
+.tmr-capsule-group {
+  flex: 1; /* 占据左侧空间 */
+}
+
+/* 强制隐藏默认灰色横线和卡片灰边 */
+.tmr-capsule-group .el-tabs__header {
+  margin: 0 !important;
+  border-bottom: none !important;
+}
+
+.tmr-capsule-group .el-tabs__nav {
+  border: none !important;
+}
+
+/* 3. 重新定义每个 Tab 的样式 (让其变成按钮) */
+.tmr-capsule-group .el-tabs--card > .el-tabs__header .el-tabs__item {
+  height: 32px !important;    /* 紧凑高度 */
+  line-height: 32px !important;
+  font-size: 13px;           /* 紧凑字体 */
+  border: none !important;    /* 彻底隐藏原生卡片边框 */
+  background-color: transparent; /* 默认状态下透明背景 */
+  color: #515a6e;            /* 默认状态深灰文字，更专业 */
+  transition: all 0.2s ease-in-out;
+  padding: 0 16px !important; /* 适当内边距 */
+  margin-right: 8px;         /* 每个 Tab 之间的间距 */
+  border-radius: 6px !important; /* 先统一圆角 */
+  overflow: visible;         /* 确保选中的阴影显示完全 */
+}
+
+/* 首尾 Tab 的圆角处理 (形成整体感) */
+.tmr-capsule-group .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.tmr-capsule-group .el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  margin-right: 0;
+}
+
+/* 中间 Tab 的处理 (去掉左右圆角，紧凑对齐) */
+.tmr-capsule-group .el-tabs--card > .el-tabs__header .el-tabs__item:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+/* 4. **选中效果 (Active) - 胶囊浮动核心** */
+.tmr-capsule-group .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  background-color: #ffffff !important; /* 白色底色 */
+  color: #409eff !important;           /* 主题蓝色文字 */
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* **关键：增加轻微阴影，浮动感** */
+  border-radius: 6px;                  /* 选中时恢复圆角 */
+  position: relative;
+  z-index: 2; /* 确保选中态在最前面，不被覆盖线破坏 */
+}
+
+/* 5. 处理 Tab 之间的断层 (像素级微调) */
+.tmr-capsule-group .el-tabs--card > .el-tabs__header .el-tabs__item {
+  position: relative;
+}
+
+/* 首尾 Tab 之间的像素级处理 */
+.tmr-capsule-group .el-tabs--card > .el-tabs__header .el-tabs__item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  right: -5px; /* 让 Tab 之间紧密无缝 */
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background: transparent; /* 移除灰线，不丑 */
+}
+
+/* 6. 搜索按钮对齐微调 */
+.filter-actions .el-button {
+  height: 32px; /* 与 Tab 高度一致 */
+  padding: 0 16px;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+/* 基础 Badge 样式 */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 10px;
+    height: 24px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+/* 状态圆点 (利用伪元素实现) */
+.status-badge::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 6px;
+}
+
+/* 基础 Badge 结构 */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 12px;
+    height: 26px;
+    border-radius: 13px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+/* 状态点基础样式 */
+.status-badge::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+/* 0: Draft - 浅灰色 */
+.status-draft {
+    background-color: #f1f5f9;
+    color: #64748b;
+}
+.status-draft::before { background-color: #94a3b8; }
+
+/* 5: Preparing - 橘色 */
+.status-preparing {
+    background-color: #fff7ed;
+    color: #c2410c;
+}
+.status-preparing::before { background-color: #f97316; }
+
+/* 1: Running - 深蓝色 */
+.status-running {
+    background-color: #eff6ff;
+    color: #1d4ed8;
+}
+.status-running::before { 
+    background-color: #3b82f6;
+    box-shadow: 0 0 4px rgba(59, 130, 246, 0.5); /* 模拟运行中的发光感 */
+}
+
+/* 2: Paused - 深灰色 */
+.status-paused {
+    background-color: #f8fafc;
+    color: #334155;
+    border: 1px solid #e2e8f0; /* 停用状态加个微边框增加分量感 */
+}
+.status-paused::before { background-color: #475569; }
+
+/* 3: Completed - 绿色 */
+.status-completed {
+    background-color: #f0fdf4;
+    color: #15803d;
+}
+.status-completed::before { background-color: #22c55e; }
+
+/* 4: Cancelled - 浅红色 */
+.status-cancelled {
+    background-color: #fef2f2;
+    color: #b91c1c;
+}
+.status-cancelled::before { background-color: #ef4444; }
+</style>
diff --git a/src/components/page/components/autoPromotion/PromotionDetailDrawer.vue b/src/components/page/components/autoPromotion/PromotionDetailDrawer.vue
new file mode 100644
index 0000000..017a5c7
--- /dev/null
+++ b/src/components/page/components/autoPromotion/PromotionDetailDrawer.vue
@@ -0,0 +1,1197 @@
+<template>
+    <div>
+        <el-drawer
+            :visible.sync="visible"
+            size="1000px"
+            :with-header="false"
+            :wrapper-closable="false"
+            :close-on-press-escape="false"
+            append-to-body
+            destroy-on-close
+            custom-class="compact-log-drawer"
+            @open="handleOpen"
+            @close="visible = false"
+        >
+            <div class="drawer-container">
+                <header class="drawer-header">
+                    <div class="header-top">
+                        <span class="title title-with-task" style="display: flex; align-items: center">
+                            <span>{{ $t('autoPromotionLogs.pushLogTitle') }}</span>
+                            <span
+                                v-if="currentTaskName"
+                                class="task-title-name"
+                                :title="currentTaskName"
+                            > · {{ currentTaskName }}</span>
+                        </span>
+
+                        <div class="header-right">
+                            <i class="el-icon-close close-btn" @click="visible = false"></i>
+                        </div>
+                    </div>
+                    <div class="header-filter">
+                        <el-select
+                            v-model="logState"
+                            size="mini"
+                            clearable
+                            style="width: 160px"
+                            :placeholder="$t('autoPromotionLogs.taskLogStateFilter')"
+                            @change="handleLogStateChange"
+                        >
+                            <el-option :label="$t('autoPromotionLogs.taskLogStateAll')" value=""></el-option>
+                            <el-option :label="$t('autoPromotionLogs.taskLogState0')" value="0"></el-option>
+                            <el-option :label="$t('autoPromotionLogs.taskLogState1')" value="1"></el-option>
+                            <el-option :label="$t('autoPromotionLogs.taskLogState2')" value="2"></el-option>
+                            <el-option :label="$t('autoPromotionLogs.taskLogState3')" value="3"></el-option>
+                            <el-option :label="$t('autoPromotionLogs.taskLogState4')" value="4"></el-option>
+                        </el-select>
+                        <el-button
+                            type="primary"
+                            size="mini"
+                            icon="el-icon-refresh"
+                            :loading="loading"
+                            class="log-refresh-btn"
+                            @click="handleRefreshLogs"
+                        >
+                            {{ $t('autoPromotionLogs.logRefresh') }}
+                        </el-button>
+                    </div>
+                </header>
+
+                <div class="drawer-body" v-loading="loading">
+                    <div class="list-header">
+                        <div class="col-info">{{ $t('autoPromotionLogs.logColExpert') }}</div>
+                        <div class="col-send" style="font-size: 12px;">{{ $t('autoPromotionLogs.logColSendTime') }}</div>
+                        <div class="col-prepared" style="font-size: 12px;">{{ $t('autoPromotionLogs.logColPreparedAt') }}</div>
+                        <div class="col-status">{{ $t('autoPromotionLogs.logColStatus') }}</div>
+                        <div class="col-action">{{ $t('autoPromotionLogs.logColAction') }}</div>
+                    </div>
+
+                    <div class="list-wrapper">
+                        <div
+                            v-for="item in fullData"
+                            :key="item.id"
+                            class="log-row"
+                            :class="{ 'row-error': item.isErrorRow }"
+                        >
+                            <div class="col-info">
+                                <div class="expert-main">
+                                    <span class="name">{{ item.expertName }}</span>
+                                </div>
+                                <div class="journal-name" :title="item.journalName">
+                                    <span class="email">{{ item.email }}</span>
+                                </div>
+                            </div>
+
+                            <div class="col-send">
+                                <span>{{ formatTime(item.sendTime) }}</span>
+                            </div>
+
+                            <div class="col-prepared">
+                                <span>{{ formatTime(item.preparedAt) }}</span>
+                            </div>
+
+                            <div class="col-status">
+                                <div class="status-line">
+                                    <span class="status-dot" :class="item.statusClass"></span>
+                                    <span class="status-text" :class="item.statusTextClass">{{ item.statusText }}</span>
+                                    <el-button
+                                        v-if="item.errorMsg"
+                                        type="text"
+                                        class="reason-btn"
+                                        @click.stop="openErrorMsgDialog(item)"
+                                    >
+                                        {{ $t('autoPromotionLogs.viewFailureReason') }}
+                                    </el-button>
+                                </div>
+                            </div>
+
+                            <div class="col-action col-action-btns">
+                                <template v-if="item.isPending">
+                                    <el-tooltip :content="$t('autoPromotionLogs.editLogTip')" placement="top">
+                                        <el-button
+                                            type="text"
+                                            icon="el-icon-edit"
+                                            @click.stop="openLogDetail(item, 'edit')"
+                                        ></el-button>
+                                    </el-tooltip>
+                                    <el-tooltip :content="$t('autoPromotionLogs.deleteLogTip')" placement="top">
+                                        <el-button
+                                            type="text"
+                                            icon="el-icon-delete"
+                                            class="delete-log-btn"
+                                            @click.stop="handleDeleteLog(item)"
+                                        ></el-button>
+                                    </el-tooltip>
+                                </template>
+                                <template v-else>
+                                    <el-tooltip :content="$t('autoPromotionLogs.previewLogTip')" placement="top">
+                                        <el-button
+                                            type="text"
+                                            icon="el-icon-view"
+                                            @click.stop="openLogDetail(item, 'preview')"
+                                        ></el-button>
+                                    </el-tooltip>
+                                </template>
+                            </div>
+                        </div>
+
+                        <div v-if="!loading && fullData.length === 0" class="empty-ui">
+                            <i class="el-icon-document"></i>
+                            <p>{{ $t('autoPromotionLogs.emptyLogs') }}</p>
+                        </div>
+                    </div>
+
+                    <div class="footer-pagination">
+                        <el-pagination
+                            :current-page.sync="currentPage"
+                            :page-size="pageSize"
+                            :page-sizes="[20, 50, 100]"
+                            :total="totalCount"
+                            layout="total, sizes, prev, pager, next, jumper"
+                            @size-change="handlePageSizeChange"
+                            @current-change="loadData"
+                        />
+                    </div>
+                </div>
+            </div>
+        </el-drawer>
+
+        <el-dialog
+            :title="logDetailDialogTitle"
+            :visible.sync="logDetailVisible"
+            width="1200px"
+            top="6vh"
+            append-to-body
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            custom-class="task-log-detail-dialog"
+            @closed="resetLogDetail"
+        >
+            <div v-loading="logDetailLoading" class="log-detail-wrap">
+                <!-- Pending：编辑 -->
+                <template v-if="logDetailMode === 'edit'">
+  <div class="email-detail-container edit-mode-flat">
+    <div class="email-meta-header">
+      <div class="expert-main">
+        <span class="expert-name-text">{{ logDetail.expert_name }}</span>
+        <span class="expert-email">&lt;{{ logDetail.to_email }}&gt;</span>
+      </div>
+      
+      <div class="header-right-times">
+        <span class="time-node">
+          <i class="el-icon-time"></i> {{ $t('autoPromotionLogs.logColPreparedAt') }}: {{ formatTime(logDetail.prepared_at) }}
+        </span>
+      </div>
+    </div>
+
+    <div class="affiliation-bar" >
+      <span class="sub-label">{{ $t('autoPromotionLogs.logFieldAffiliation') }}:</span> {{ logDetail.affiliation || '-' }}
+    </div>
+
+    <div class="subject-row">
+      <span class="subject-label">{{ $t('autoPromotionLogs.logFieldSubject') }}:</span>
+      <el-input 
+        v-model="logDetail.subject_prepared" 
+        :placeholder="$t('autoPromotionLogs.subjectPlaceholder')"
+        size="small"
+        class="flat-subject-input"
+      />
+    </div>
+
+    <div class="editor-pure-wrap">
+      <CkeditorMail
+        v-model="logDetail.body_prepared"
+      />
+    </div>
+  </div>
+</template>
+                <!-- 非 Pending：只读预览 -->
+                <template v-else>
+  <div class="email-detail-container">
+    <div class="email-meta-header">
+      <div class="expert-main">
+        <span class="expert-name-text" v-if="logDetail.expert_name && logDetail.to_email">{{ logDetail.expert_name }}</span>
+        <span class="expert-email" v-if="logDetail.expert_name && logDetail.to_email">&lt;{{ logDetail.to_email }}&gt;</span>
+        <span class="expert-email" v-else>{{ logDetail.to_email || logDetail.expert_name || '-' }}</span>
+      </div>
+      
+      <div class="header-right-times">
+        <span class="time-node">
+          <i class="el-icon-paper-plane"></i> {{ $t('autoPromotionLogs.logFieldSendTime') }}: {{ formatTime(logDetail.send_time) }}
+        </span>
+        <span class="time-divider">|</span>
+        <span class="time-node">
+          <i class="el-icon-cpu"></i> {{ $t('autoPromotionLogs.logFieldExecutionTime') }}: {{ formatTime(logDetail.execution_time) }}
+        </span>
+      </div>
+    </div>
+
+    <div class="" style="margin-top: 4px;">
+      <div class="sub-item">
+        <span class="sub-label">{{ $t('autoPromotionLogs.logFieldAffiliation') }}:</span> {{ logDetail.affiliation || '-' }}
+      </div>
+     
+    </div>
+
+    <div class="mail-viewport">
+      <div class="viewport-header">
+        <span class="view-title"><i class="el-icon-view"></i> {{ $t('autoPromotionLogs.logFieldSubject') }}: {{ logDetail.subject_prepared || '-' }}</span>
+        <el-select v-model="previewScale" size="mini" class="scale-select">
+          <el-option :label="'50%'" :value="50"></el-option>
+          <el-option :label="'80%'" :value="80"></el-option>
+          <el-option :label="'100%'" :value="100"></el-option>
+        </el-select>
+      </div>
+      
+      <div class="mail-scroll-area">
+        <div class="mail-zoom-container" :style="mailZoomStyle">
+           <div class="mail-paper-shadow" v-html="logDetail.body_prepared"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="logDetailVisible = false">{{ $t('autoPromotionLogs.cancel') }}</el-button>
+                <el-button
+                    v-if="logDetailMode === 'edit'"
+                    type="primary"
+                    size="small"
+                    :loading="saveLogLoading"
+                    @click="saveLogDetail"
+                >
+                    {{ $t('autoPromotionLogs.saveDetail') }}
+                </el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog
+            :title="$t('autoPromotionLogs.failureReasonTitle')"
+            :visible.sync="errorMsgVisible"
+            width="520px"
+            append-to-body
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            @closed="errorMsgText = ''"
+        >
+            <div class="error-msg-body">{{ errorMsgText }}</div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import CkeditorMail from '@/components/page/components/email/CkeditorMail.vue';
+const API_GET_TASK_LOGS = 'api/email_client/getTaskLogs';
+/** 获取 / 保存邮件详情（保存时传 subject_prepared、body_prepared） */
+const API_TASK_LOG_DETAIL = 'api/email_client/getTaskLogDetail';
+const API_TASK_LOG_UPDATE = 'api/email_client/updateTaskLog';
+/** 删除单条任务日志（若后端路径不同请改此处） */
+const API_DELETE_TASK_LOG = 'api/email_client/cancelTaskLog';
+
+export default {
+    components: {
+        CkeditorMail
+    },
+    props: {
+        value: Boolean,
+        detailData: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    data() {
+        return {
+            loading: false,
+            logState: '',
+            currentPage: 1,
+            pageSize: 20,
+            totalCount: 0,
+            fullData: [],
+            logDetailVisible: false,
+            logDetailLoading: false,
+            logDetailMode: 'preview',
+            saveLogLoading: false,
+            logDetail: {
+                log_id: '',
+                state: -1,
+                subject_prepared: '',
+                body_prepared: '',
+                to_email: '',
+                expert_name: '',
+                affiliation: '',
+                send_time: '',
+                execution_time: '',
+                error_msg: ''
+            },
+            // 编辑器包装/回拼所需
+            originalBodyBefore: '',
+            originalBodyAfter: '',
+            errorMsgVisible: false,
+            errorMsgText: '',
+            previewScale: 80
+        };
+    },
+    computed: {
+        visible: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit('input', val);
+            }
+        },
+        taskId() {
+            const d = this.detailData || {};
+            const tid = d.task_id != null && d.task_id !== '' ? d.task_id : d.id;
+            return tid != null && tid !== '' ? String(tid) : '';
+        },
+        /** 当前任务名称（来自列表行 / detailData） */
+        currentTaskName() {
+            const d = this.detailData || {};
+            const n = d.task_name != null && d.task_name !== '' ? d.task_name : d.taskName || '';
+            return String(n).trim();
+        },
+        logDetailDialogTitle() {
+            return this.logDetailMode === 'edit'
+                ? this.$t('autoPromotionLogs.logDetailEditTitle')
+                : this.$t('autoPromotionLogs.logDetailPreviewTitle');
+        },
+        mailZoomStyle() {
+            const scale = Number(this.previewScale || 80) / 100;
+            const compensation = Math.round((1 - scale) * 550);
+            return {
+                transform: `scale(${scale})`,
+                marginBottom: `${compensation > 0 ? -compensation : 0}px`
+            };
+        }
+    },
+    watch: {
+        // 仅当抽屉已打开且「切换了不同任务」时再拉取，避免与 @open -> handleOpen 重复请求
+        taskId(newVal, oldVal) {
+            if (!this.visible || !newVal) return;
+            if (newVal === oldVal) return;
+            if (oldVal === '' || oldVal == null) return;
+            this.currentPage = 1;
+            this.logState = '';
+            this.loadData();
+        }
+    },
+    methods: {
+        handleOpen() {
+            this.currentPage = 1;
+            this.logState = '';
+            this.loadData();
+        },
+        handleLogStateChange() {
+            this.currentPage = 1;
+            this.loadData();
+        },
+        handleRefreshLogs() {
+            this.loadData();
+        },
+        handlePageSizeChange(size) {
+            this.pageSize = size;
+            this.currentPage = 1;
+            this.loadData();
+        },
+        async loadData() {
+            if (!this.taskId) {
+                this.fullData = [];
+                this.totalCount = 0;
+                return;
+            }
+            this.loading = true;
+            try {
+                const params = {
+                    task_id: this.taskId,
+                    page: this.currentPage,
+                    per_page: String(this.pageSize)
+                };
+                if (this.logState !== '' && this.logState != null) {
+                    params.state = String(this.logState);
+                }
+                const res = await this.$api.post(API_GET_TASK_LOGS, params);
+                if (res && res.code != null && Number(res.code) !== 0) {
+                    this.$message.error(res.msg || this.$t('autoPromotionLogs.logLoadFailed'));
+                    this.fullData = [];
+                    this.totalCount = 0;
+                    return;
+                }
+                const payload = res && res.data !== undefined ? res.data : res || {};
+                const rawList = Array.isArray(payload)
+                    ? payload
+                    : Array.isArray(payload.list)
+                      ? payload.list
+                      : Array.isArray(payload.records)
+                        ? payload.records
+                        : [];
+                this.totalCount = Number(
+                    (payload && (payload.total != null ? payload.total : payload.count)) || rawList.length || 0
+                );
+                this.fullData = rawList.map((row, idx) => this.mapLogItem(row, idx));
+            } catch (e) {
+                this.fullData = [];
+                this.totalCount = 0;
+                this.$message.error((e && e.message) || this.$t('autoPromotionLogs.logLoadFailed'));
+            } finally {
+                this.loading = false;
+            }
+        },
+        mapLogItem(raw, idx) {
+            const state = Number(raw.state != null ? raw.state : raw.send_state != null ? raw.send_state : -1);
+            const status = this.getStatusByState(state);
+            // 发送时间：优先接口发送时间字段
+            const sendTime =
+                raw.send_time ||
+                raw.sent_at ||
+                raw.send_at ||
+                raw.execution_time ||
+                raw.run_at ||
+                raw.email_date ||
+                '';
+            // 预处理完成时间
+            const preparedAt = raw.prepared_at || raw.prepared_time || '';
+            const errorMsg = String(raw.error_msg || raw.error_message || raw.fail_reason || '').trim();
+            const logId = raw.log_id != null && raw.log_id !== '' ? raw.log_id : raw.id;
+            return {
+                id: raw.id || raw.log_id || raw.inbox_id || `log_${idx}`,
+                logId: logId != null ? String(logId) : '',
+                state,
+                isPending: state === 0,
+                expertName: raw.expert_name || raw.name || raw.to_name || raw.from_name || '-',
+                email: raw.email || raw.email_to || raw.to_email || raw.recipient || '',
+                journalName: raw.journal_name || '',
+                sendTime,
+                preparedAt,
+                errorMsg,
+                statusText: status.text,
+                statusClass: status.cls,
+                statusTextClass: status.textCls,
+                isErrorRow: state === 2 || state === 3,
+                raw
+            };
+        },
+        getStatusByState(state) {
+            const map = {
+                0: { key: 'taskLogState0', cls: 'dot-pending', textCls: 'text-pending' },
+                1: { key: 'taskLogState1', cls: 'dot-success', textCls: 'text-success' },
+                2: { key: 'taskLogState2', cls: 'dot-fail', textCls: 'text-fail' },
+                3: { key: 'taskLogState3', cls: 'dot-bounce', textCls: 'text-bounce' },
+                4: { key: 'taskLogState4', cls: 'dot-cancel', textCls: 'text-cancel' }
+            };
+            const m = map[state];
+            if (m) {
+                return { text: this.$t(`autoPromotionLogs.${m.key}`), cls: m.cls, textCls: m.textCls };
+            }
+            return { text: '-', cls: 'dot-paused', textCls: 'text-pending' };
+        },
+        formatTime(time) {
+            if (time == null || time === '') return '-';
+            if (typeof time === 'number' || (typeof time === 'string' && /^\d{10,13}$/.test(String(time)))) {
+                const n = Number(time);
+                const ms = String(n).length <= 10 ? n * 1000 : n;
+                const d = new Date(ms);
+                return isNaN(d.getTime()) ? String(time) : this.formatDateTime(d);
+            }
+            const s = String(time);
+            if (s.includes(' ')) {
+                const parts = s.split(' ');
+                const datePart = parts[0] || '';
+                const timePart = parts[1] || '';
+                const shortDate = datePart.replace(/^\d{4}-/, '');
+                return `${shortDate} ${timePart}`.trim();
+            }
+            return s;
+        },
+        formatDateTime(d) {
+            const pad = (n) => String(n).padStart(2, '0');
+            return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(
+                d.getSeconds()
+            )}`;
+        },
+        resetLogDetail() {
+            this.logDetail = {
+                log_id: '',
+                state: -1,
+                subject_prepared: '',
+                body_prepared: '',
+                to_email: '',
+                expert_name: '',
+                affiliation: '',
+                send_time: '',
+                execution_time: '',
+                error_msg: ''
+            };
+            this.originalBodyBefore = '';
+            this.originalBodyAfter = '';
+            this.logDetailMode = 'preview';
+            this.logDetailLoading = false;
+            this.saveLogLoading = false;
+        },
+        applyLogDetailFromApi(d) {
+            const x = d.log && typeof d.log === 'object' ? d.log : d || {};
+            const expert = d.expert && typeof d.expert === 'object' ? d.expert : {};
+            const expertField = expert.field && typeof expert.field === 'object' ? expert.field : {};
+
+            this.logDetail = {
+                log_id: x.log_id != null ? String(x.log_id) : String(x.id || ''),
+                state: Number(x.state != null ? x.state : x.send_state != null ? x.send_state : -1),
+                subject_prepared: x.subject_prepared || x.subject || '',
+                body_prepared: x.body_prepared || x.body || x.content_html || x.content || x.html || '',
+                to_email: x.to_email || x.email || x.email_to || x.recipient || x.to || x.mail_to || '',
+                expert_name: expert.name || '',
+                prepared_at: x.prepared_at || '',
+                affiliation:
+                    expert.affiliation ||
+                   
+                    '',
+                // 你的接口里常见是 ctime / prepared_at，这里做兼容
+                send_time: x.send_time || x.sent_at || x.send_at || x.ctime || '',
+                execution_time: x.execution_time || x.execute_time || x.run_time || x.run_at || x.ctime || '',
+                error_msg: String(x.error_msg || x.error_message || x.fail_reason || '').trim()
+            };
+        },
+        // 在本页面处理：把原始 html 的 body 包成可编辑容器
+        prepareBodyForEditor(rawHtml) {
+            const html = String(rawHtml || '');
+            if (!html) {
+                this.originalBodyBefore = '';
+                this.originalBodyAfter = '';
+                return '';
+            }
+            const bodyMatch = html.match(/([\s\S]*?)<body[^>]*>([\s\S]*?)<\/body>([\s\S]*)/i);
+            if (bodyMatch) {
+                this.originalBodyBefore = `${bodyMatch[1]}<body>`;
+                this.originalBodyAfter = `</body>${bodyMatch[3] || ''}`;
+                return `<div id="mail-body-temp" style="margin:0;padding:0;">${bodyMatch[2] || ''}</div>`;
+            }
+            this.originalBodyBefore = '';
+            this.originalBodyAfter = '';
+            return html;
+        },
+        // 保存前回拼完整 html
+        restoreBodyForSave(editorHtml) {
+            const content = String(editorHtml || '');
+            if (!content) return '';
+            const wrappedInner = content
+                .replace(/^\s*<div[^>]*id=["']mail-body-temp["'][^>]*>/i, '')
+                .replace(/<\/div>\s*$/i, '');
+            if (this.originalBodyBefore) {
+                return `${this.originalBodyBefore}${wrappedInner}${this.originalBodyAfter || '</body></html>'}`;
+            }
+            return content;
+        },
+        pickLogDetailFromResponse(res) {
+            const top = res || {};
+            const dataPart = top.data && typeof top.data === 'object' ? top.data : null;
+            if (dataPart) {
+                if (Array.isArray(dataPart) && dataPart.length) return dataPart[0];
+                if (dataPart.log && typeof dataPart.log === 'object') {
+                    const lp = dataPart.log;
+                    return Array.isArray(lp) ? (lp[0] || {}) : lp;
+                }
+                return dataPart;
+            }
+            if (top.log && typeof top.log === 'object') {
+                const lp = top.log;
+                return Array.isArray(lp) ? (lp[0] || {}) : lp;
+            }
+            return top;
+        },
+
+        async openLogDetail(item, mode) {
+            const logId = item.logId || (item.raw && (item.raw.log_id || item.raw.id)) || item.id;
+            if (!logId) {
+                this.$message.warning(this.$t('autoPromotionLogs.logIdMissing'));
+                return;
+            }
+            this.logDetailVisible = true;
+            this.logDetailLoading = true;
+            this.logDetailMode = item.isPending && mode === 'edit' ? 'edit' : 'preview';
+            try {
+                const res = await this.$api.post(API_TASK_LOG_DETAIL, { log_id: String(logId) });
+                if (res && res.code != null && Number(res.code) !== 0) {
+                    this.$message.error(res.msg || this.$t('autoPromotionLogs.logDetailLoadFailed'));
+                    this.logDetailVisible = false;
+                    return;
+                }
+                // 兼容返回：
+                // 1) { code, data: {...} } / { code, data: [...] }
+                // 2) { code, log: {...} } / { code, log: [...] }
+                // 3) { code, log_id, subject_prepared, body_prepared, ... }
+                this.applyLogDetailFromApi(res.data || res);
+                if (this.logDetailMode === 'edit') {
+                    this.logDetail.body_prepared = this.prepareBodyForEditor(this.logDetail.body_prepared);
+                }
+                const st = Number(this.logDetail.state);
+                if (this.logDetailMode === 'edit' && st !== 0) {
+                    this.logDetailMode = 'preview';
+                    this.$message.warning(this.$t('autoPromotionLogs.logAlreadySent'));
+                }
+            } catch (e) {
+                this.logDetailVisible = false;
+                this.$message.error((e && e.message) || this.$t('autoPromotionLogs.logDetailLoadFailed'));
+            } finally {
+                this.logDetailLoading = false;
+            }
+        },
+        async saveLogDetail() {
+            if (!this.logDetail.log_id) return;
+            this.saveLogLoading = true;
+            try {
+                const finalBodyPrepared = this.restoreBodyForSave(this.logDetail.body_prepared);
+                const res = await this.$api.post(API_TASK_LOG_UPDATE, {
+                    log_id: String(this.logDetail.log_id),
+                    subject_prepared: this.logDetail.subject_prepared || '',
+                    body_prepared: finalBodyPrepared || ''
+                });
+                if (res && res.code != null && Number(res.code) !== 0) {
+                    this.$message.error(res.msg || this.$t('autoPromotionLogs.saveDetailFailed'));
+                    return;
+                }
+                this.$message.success(this.$t('autoPromotionLogs.saveDetailSuccess'));
+                this.logDetailVisible = false;
+                this.loadData();
+            } catch (e) {
+                this.$message.error((e && e.message) || this.$t('autoPromotionLogs.saveDetailFailed'));
+            } finally {
+                this.saveLogLoading = false;
+            }
+        },
+        async handleDeleteLog(item) {
+            const logId = item.logId || (item.raw && (item.raw.log_id || item.raw.id)) || item.id;
+            if (!logId) {
+                this.$message.warning(this.$t('autoPromotionLogs.logIdMissing'));
+                return;
+            }
+            try {
+                await this.$confirm(this.$t('autoPromotionLogs.deleteLogConfirm'), this.$t('autoPromotionLogs.tipTitle'), {
+                    type: 'warning'
+                });
+            } catch (e) {
+                return;
+            }
+            try {
+                const res = await this.$api.post(API_DELETE_TASK_LOG, { log_id: String(logId) });
+                if (res && res.code != null && Number(res.code) !== 0) {
+                    this.$message.error(res.msg || this.$t('autoPromotionLogs.deleteLogFailed'));
+                    return;
+                }
+                this.$message.success(this.$t('autoPromotionLogs.deleteLogSuccess'));
+                this.loadData();
+            } catch (e) {
+                this.$message.error((e && e.message) || this.$t('autoPromotionLogs.deleteLogFailed'));
+            }
+        },
+        openErrorMsgDialog(item) {
+            const raw = item && item.raw ? item.raw : {};
+            const msg = (item && item.errorMsg) || String(raw.error_msg || raw.error_message || '').trim();
+            if (!msg) {
+                this.$message.info(this.$t('autoPromotionLogs.noFailureReason'));
+                return;
+            }
+            this.errorMsgText = msg;
+            this.errorMsgVisible = true;
+        }
+    }
+};
+</script>
+
+<style scoped>
+/* 样式穿透与重置 */
+.compact-log-drawer >>> .el-drawer__body {
+    padding: 0 !important;
+}
+
+.drawer-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #fff;
+}
+
+.drawer-header {
+    padding: 16px 20px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.header-top .title {
+    font-size: 15px;
+    font-weight: bold;
+    color: #1e293b;
+}
+
+.title-with-task {
+    flex: 1;
+    min-width: 0;
+}
+
+.task-title-name {
+    margin-left: 2px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #475569;
+    max-width: min(420px, 55vw);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.header-stats {
+    font-size: 12px;
+    color: #64748b;
+    display: flex;
+    align-items: center;
+}
+
+.blue {
+    color: #3b82f6;
+}
+
+.close-btn {
+    cursor: pointer;
+    font-size: 18px;
+    color: #64748b;
+}
+
+.header-filter {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.log-refresh-btn {
+    padding: 7px 10px;
+}
+
+.list-header {
+    display: flex;
+    padding: 10px 20px;
+    background: #f1f5f9;
+    font-size: 12px;
+    font-weight: bold;
+    color: #475569;
+}
+
+.col-info {
+    flex: 1.8;
+}
+
+.col-send {
+    flex: 1.1;
+    min-width: 0;
+}
+
+.col-prepared {
+    flex: 1.1;
+    min-width: 0;
+}
+
+.col-status {
+    flex: 1;
+    min-width: 0;
+}
+
+.status-line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 6px;
+}
+
+.reason-btn {
+    padding: 0 !important;
+    margin-left: 2px;
+    font-size: 12px !important;
+    color: #f56c6c !important;
+}
+
+.reason-btn:hover {
+    color: #f78989 !important;
+}
+
+.error-msg-body {
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #334155;
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+.col-action {
+    flex: 0.95;
+    text-align: right;
+    min-width: 0;
+}
+
+.col-action-btns {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+    flex-wrap: wrap;
+}
+
+.delete-log-btn {
+    color: #f56c6c !important;
+}
+
+.log-detail-wrap {
+    min-height: 120px;
+}
+
+.log-detail-meta {
+    margin-bottom: 12px;
+    padding: 12px;
+    background: #f8fafc;
+    border-radius: 8px;
+    font-size: 13px;
+}
+
+.meta-row {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 8px;
+    line-height: 1.45;
+}
+
+.meta-row:last-child {
+    margin-bottom: 0;
+}
+
+.meta-label {
+    flex: 0 0 100px;
+    color: #64748b;
+}
+
+.meta-value {
+    flex: 1;
+    min-width: 0;
+    color: #1e293b;
+    word-break: break-word;
+}
+
+.log-detail-body-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #475569;
+    margin-bottom: 8px;
+}
+
+.log-detail-alert {
+    margin-bottom: 12px;
+}
+
+.log-detail-body-html {
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 12px;
+    background: #fff;
+}
+
+.drawer-body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-wrapper {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.log-row {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 1px solid #f1f5f9;
+    font-size: 13px;
+    transition: background 0.2s;
+}
+
+.log-row:hover {
+    background: #f8fafc;
+}
+
+.row-error {
+    background: #fff7f7;
+}
+
+.expert-main {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.expert-main .name {
+    font-weight: 500;
+    color: #334155;
+}
+
+.journal-name {
+    font-size: 12px;
+    color: #64748b;
+    margin-top: 2px;
+}
+
+.col-send,
+.col-prepared {
+    font-family: monospace;
+    font-size: 12px;
+    color: #475569;
+    line-height: 1.35;
+    word-break: break-all;
+}
+
+.status-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 6px;
+}
+
+.dot-success {
+    background: #22c55e;
+    box-shadow: 0 0 5px #22c55e;
+}
+
+.dot-pending {
+    background: #409eff;
+    box-shadow: 0 0 5px rgba(64, 158, 255, 0.45);
+}
+
+.dot-fail {
+    background: #ef4444;
+}
+
+.dot-bounce {
+    background: #f59e0b;
+}
+
+.dot-cancel {
+    background: #64748b;
+}
+
+.dot-paused {
+    background: #94a3b8;
+}
+
+.status-text {
+    font-size: 12px;
+    color: #64748b;
+}
+
+.status-text.text-pending {
+    color: #409eff;
+}
+
+.status-text.text-success {
+    color: #22c55e;
+}
+
+.status-text.text-fail {
+    color: #ef4444;
+}
+
+.status-text.text-bounce {
+    color: #f59e0b;
+}
+
+.status-text.text-cancel {
+    color: #6b7280;
+}
+
+.footer-pagination {
+    padding: 10px 12px 14px;
+    border-top: 1px solid #f1f5f9;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.footer-pagination >>> .el-pagination {
+    flex-wrap: wrap;
+    white-space: normal;
+    margin-left: auto;
+}
+
+.empty-ui {
+    text-align: center;
+    padding: 40px;
+    color: #cbd5e1;
+}
+
+.empty-ui i {
+    font-size: 32px;
+}
+
+.mail-preview-body {
+    max-height: 60vh;
+    overflow: auto;
+    font-size: 13px;
+    line-height: 1.5;
+}
+.email-detail-container {
+  padding: 0 5px;
+  color: #334155;
+}
+
+/* 头部排版 */
+.email-meta-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.expert-email {
+  font-size: 16px;
+  font-weight: 600;
+  color: #2563eb !important;
+}
+
+.expert-name-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-right: 2px;
+}
+
+.header-right-times {
+  font-size: 12px;
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+}
+
+.time-divider { margin: 0 10px; color: #e2e8f0; }
+
+.email-sub-header {
+  margin-top: 10px;
+  padding: 10px 12px;
+  font-size: 13px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+}
+
+.sub-item { margin-bottom: 0; }
+.sub-label { color: #64748b; margin-right: 6px; }
+
+/* 邮件预览窗口 */
+.mail-viewport {
+  margin-top: 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc; /* 模拟桌面的灰色背景 */
+}
+
+.viewport-header {
+  padding: 8px 12px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+}
+
+.scale-select {
+  width: 90px;
+}
+
+.mail-scroll-area {
+  height: 550px; /* 足够的高度看完整邮件 */
+  overflow-y: auto;
+  padding: 20px 0;
+  display: flex;
+  justify-content: center; /* 邮件居中展示 */
+}
+
+.mail-zoom-container {
+  width: 800px; /* 固定原始宽度，用于缩放计算 */
+  transform-origin: top center; /* 居中缩放 */
+}
+
+.mail-paper-shadow {
+  background: #fff;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  min-height: 600px;
+}
+.edit-mode-flat {
+  padding: 0 10px;
+}
+
+/* 顶部信息样式 */
+.email-meta-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+}
+
+.expert-name-text { font-weight: 600; font-size: 15px; color: #1e293b; }
+.expert-email { color: #64748b; margin-left: 6px; font-size: 14px; }
+
+.header-right-times { font-size: 12px; color: #94a3b8; }
+
+/* 机构信息栏 */
+.affiliation-bar {
+  font-size: 13px;
+  color: #94a3b8;
+  margin-bottom: 12px;
+  margin-top: 12px;
+}
+
+/* Subject 行：极致扁平 */
+.subject-row {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-top: 1px solid #f1f5f9;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.subject-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+  width: 70px;
+  flex-shrink: 0;
+}
+
+
+
+</style>
+
+<style>
+/* 邮件详情弹窗挂到 body，需非 scoped */
+.task-log-detail-dialog .el-dialog__body {
+    padding-top: 8px;
+}
+
+.task-log-detail-dialog .log-detail-body-html.mail-preview-body {
+    max-height: 48vh;
+    overflow: auto;
+}
+</style>
diff --git a/src/components/page/components/email/CkeditorMail.vue b/src/components/page/components/email/CkeditorMail.vue
index 1ec4362..67e2936 100644
--- a/src/components/page/components/email/CkeditorMail.vue
+++ b/src/components/page/components/email/CkeditorMail.vue
@@ -12,7 +12,9 @@ export default {
   props: {
     value: { type: String, default: '' },
     id: { type: String, default: () => 'tiny-' + +new Date() },
-    showSelectTemplateButton: { type: Boolean, default: false }
+    showSelectTemplateButton: { type: Boolean, default: false },
+    // 仅在需要的页面开启“安全初始化内容”
+    useSafeInitContent: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -125,7 +127,7 @@ autoInlineStyles(htmlContent) {
         height: 500,
         // 核心配置：允许所有 HTML 标签和样式，这对比邮件模板至关重要
         valid_children: '+body[tr],+body[thead],+body[tbody],+body[table],+body[style],+p[style],+div[style]',
-        extended_valid_elements: 'style,meta,title',
+        extended_valid_elements: 'div[*],table[*],tr[*],td[*],img[*],style',
         custom_elements: 'style,meta,title',
         verify_html: false, // 关闭 HTML 校验，防止自动删掉你的邮件结构
         forced_root_block: '', // 停止自动包裹 <p> 标签
@@ -162,7 +164,10 @@ autoInlineStyles(htmlContent) {
         init_instance_callback: (editor) => {
           this.editor = editor;
           if (this.value) {
-            editor.setContent(this.value);
+            const initContent = this.useSafeInitContent
+              ? this.prepareContentForEditor(this.value)
+              : this.value;
+            editor.setContent(initContent);
           }
 
           // 监听内容变化
@@ -172,6 +177,21 @@ autoInlineStyles(htmlContent) {
         }
       });
     },
+  
+    // 假设 rawHtml 是你那一大串完整的 HTML
+prepareContentForEditor(rawHtml) {
+    // 1. 分离出 Head 及其之前的部分 (包含 doctype, html, head)
+    const headMatch = rawHtml.match(/([\s\S]*?)<body([\s\S]*?)>/i);
+    this.originalFullHead = headMatch ? headMatch[0] : ''; // 备份头部
+
+    // 2. 提取 Body 内部内容，并将 <body> 换成 <div>
+    // 这样 TinyMCE 就不会因为 fullpage 插件失效而删掉它
+    let bodyContent = rawHtml.replace(/([\s\S]*?)<body([\s\S]*?)>/i, '')
+                             .replace(/<\/body>([\s\S]*?)<\/html>/i, '');
+    
+    // 返回给编辑器的内容：用一个特殊的 div 包裹
+    return `<div id="mail-body-temp" style="margin:0;padding:0;">${bodyContent}</div>`;
+},
     // 获取经过行内样式转换后的内容
     getInlinedContent() {
       if (!this.editor) return '';
diff --git a/src/components/page/components/email/TmrEmailEditor.vue b/src/components/page/components/email/TmrEmailEditor.vue
new file mode 100644
index 0000000..5842507
--- /dev/null
+++ b/src/components/page/components/email/TmrEmailEditor.vue
@@ -0,0 +1,174 @@
+<template>
+    <div class="tmr-editor-container">
+      <div class="editor-header">
+        <span class="title"></span>
+        <button @click="showModal = true" class="preview-trigger-btn">
+          <i class="icon-eye"></i> {{ $t('tmrEmailEditor.preview') }}
+        </button>
+      </div>
+  
+      <textarea
+        :value="plainText"
+        @input="handleInput"
+        :placeholder="resolvedPlaceholder"
+        class="tmr-textarea"
+      ></textarea>
+  
+      <transition name="fade">
+        <div v-if="showModal" class="tmr-modal-mask" @click.self="showModal = false">
+          <div class="tmr-modal-container">
+            <div class="modal-header">
+              <span>{{ $t('tmrEmailEditor.preview') }}</span>
+              <button class="close-btn" @click="showModal = false">&times;</button>
+            </div>
+            
+            <div class="modal-body">
+              <div class="common_tmr_email_box" v-html="htmlContentForPreview"></div>
+            </div>
+  
+           
+          </div>
+        </div>
+      </transition>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'TmrEmailEditor',
+    props: {
+      value: { type: String, default: '' },
+      placeholder: { type: String, default: '' }
+    },
+    data() {
+      return {
+        showModal: false // 控制弹窗显示
+      }
+    },
+    computed: {
+      resolvedPlaceholder() {
+        return this.placeholder || this.$t('tmrEmailEditor.placeholder');
+      },
+      // 剥离外壳给 textarea 显示
+      plainText() {
+        if (!this.value) return '';
+        const regex = /<div class="common_tmr_email_box">([\s\S]*?)<\/div>/i;
+        const match = this.value.match(regex);
+        const content = (match && match[1]) ? match[1] : this.value;
+        return content.replace(/<br\s*\/?>/gi, '\n');
+      },
+      // 提取内部内容用于预览
+      htmlContentForPreview() {
+        const regex = /<div class="common_tmr_email_box">([\s\S]*?)<\/div>/i;
+        const match = this.value.match(regex);
+        return match ? match[1] : this.value;
+      }
+    },
+    methods: {
+      handleInput(e) {
+        const rawValue = e.target.value;
+        const htmlContent = rawValue.replace(/\n/g, '<br>');
+        const finalResult = `<div class="common_tmr_email_box">${htmlContent}</div>`;
+        this.$emit('input', finalResult);
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  /* 1. 基础布局 */
+  .tmr-editor-container { width: 100%; position: relative; }
+  .editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+  }
+  .preview-trigger-btn {
+    background: #f0f2f5;
+    border: 1px solid #dcdfe6;
+    padding: 5px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #606266;
+    font-size: 13px;
+  }
+  .preview-trigger-btn:hover { color: #409eff; border-color: #c6e2ff; background: #ecf5ff; }
+  
+  .tmr-textarea {
+    width: 100%;
+    min-height: 70vh;
+    padding: 15px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1.6;
+    box-sizing: border-box;
+    resize: vertical;
+  }
+  
+  /* 2. 弹窗动画 */
+  .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
+  .fade-enter, .fade-leave-to { opacity: 0; }
+  
+  /* 3. 弹窗样式 */
+  .tmr-modal-mask {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .tmr-modal-container {
+    width: 1000px;
+    max-width: 90%;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    overflow: hidden;
+  }
+  
+  .modal-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+  }
+  
+  .close-btn { border: none; background: none; font-size: 20px; cursor: pointer; color: #909399; }
+  
+  .modal-body {
+    padding: 20px;
+    min-height: 60vh;
+    overflow-y: auto;
+    text-align: left;
+  }
+  
+  .modal-footer {
+    padding: 10px 20px;
+    border-top: 1px solid #eee;
+    text-align: right;
+  }
+  
+  .confirm-btn {
+    background: #409eff;
+    color: #fff;
+    border: none;
+    padding: 8px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  /* 确保预览区域样式正确渲染 */
+  .common_tmr_email_box {
+    word-break: break-all;
+    line-height: 1.6;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/components/page/mailboxMouldDetail.vue b/src/components/page/mailboxMouldDetail.vue
index 5110040..e742118 100644
--- a/src/components/page/mailboxMouldDetail.vue
+++ b/src/components/page/mailboxMouldDetail.vue
@@ -96,7 +96,11 @@
           
           <div class="body-editor-container">
             <div class="subject-label" style="margin-bottom: 10px;">{{ $t('mailboxMouldDetail.emailBody') }}:</div>
-            <CkeditorMail v-model="form.body" />
+            <TmrEmailEditor 
+      v-model="form.body" 
+      placeholder="" 
+    />
+            <!-- <CkeditorMail v-model="form.body" />  -->
           </div>
         </el-card>
       </section>
@@ -106,7 +110,7 @@
 
 <script>
 import CkeditorMail from '@/components/page/components/email/CkeditorMail.vue';
-
+import TmrEmailEditor from '@/components/page/components/email/TmrEmailEditor.vue';
 const API = {
   getAllJournal: 'api/Article/getJournal',
   getTemplate: 'api/mail_template/getTemplate',
@@ -115,7 +119,7 @@ const API = {
 
 export default {
   name: 'mailboxMouldDetail',
-  components: { CkeditorMail },
+  components: { CkeditorMail,TmrEmailEditor },
   data() {
     return {
       journalLoading: true,