From bf802c1019f19d9d08bafbab9332484baf70b6e9 Mon Sep 17 00:00:00 2001
From: super <2903208875@qq.com>
Date: Mon, 30 Mar 2026 23:15:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E8=BF=99=E4=B8=AApython?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=E7=B4=AB=E9=B8=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/main.py                                   |  18 +-
 .../brand/components/BrandDeleteBrandTab.vue  | 649 ++++++++++++++----
 frontend-vue/src/shared/bridges/pywebview.ts  |   1 +
 3 files changed, 541 insertions(+), 127 deletions(-)

diff --git a/app/main.py b/app/main.py
index 721bd10..b1225f5 100644
--- a/app/main.py
+++ b/app/main.py
@@ -16,6 +16,7 @@ import webview
 import threading
 import time
 import requests
+import subprocess
 
 
 with open("version.txt","w",encoding="utf-8") as file:
@@ -234,6 +235,21 @@ class WindowAPI:
         except Exception as e:
             return {'success': False, 'error': str(e)}
 
+    def open_external_url(self, url):
+        if not url or not str(url).strip():
+            return {'success': False, 'error': '链接为空'}
+        target = str(url).strip()
+        try:
+            if sys.platform.startswith('win'):
+                os.startfile(target)
+            elif sys.platform == 'darwin':
+                subprocess.Popen(['open', target])
+            else:
+                subprocess.Popen(['xdg-open', target])
+            return {'success': True}
+        except Exception as e:
+            return {'success': False, 'error': str(e)}
+
     def enqueue_json(self, data):
         """保存任务到队列"""
         try:
@@ -350,7 +366,7 @@ def main():
     )
     api = WindowAPI(window)
     window.expose(api.close, api.minimize, api.maximize, api.toggle_maximize, generate_images, api.save_image, api.save_image_to_folder, api.select_folder, api.select_brand_xlsx_files, api.select_brand_folder,
-                  api.save_file_from_url, api.save_template_xlsx,api.save_template_zip,api.upload_file_to_java,api.enqueue_json)
+                  api.save_file_from_url, api.save_template_xlsx,api.save_template_zip,api.upload_file_to_java,api.open_external_url,api.enqueue_json)
     webview.start(
         debug=True,
         storage_path=cache_path,
diff --git a/frontend-vue/src/pages/brand/components/BrandDeleteBrandTab.vue b/frontend-vue/src/pages/brand/components/BrandDeleteBrandTab.vue
index b07ab72..2db5a03 100644
--- a/frontend-vue/src/pages/brand/components/BrandDeleteBrandTab.vue
+++ b/frontend-vue/src/pages/brand/components/BrandDeleteBrandTab.vue
@@ -99,27 +99,27 @@
               <div v-if="currentSectionItems.length" class="result-subsection">
                 <div class="result-subsection-title">当前任务</div>
                 <ul class="task-list clean-result-list">
-                  <li
-                    v-for="item in currentSectionItems"
+                  <li v-for="item in currentSectionItems"
                     :key="`current-${item.taskId || item.resultId || item.sourceFilename}`"
-
-                    class="task-item split-result-item"
-                  >
+                    class="task-item split-result-item">
                     <div class="left split-result-main">
                       <span class="id" :title="item.sourceFilename">{{ item.sourceFilename || '-' }}</span>
                       <div class="files">店铺名：{{ item.shopName || '-' }}</div>
                       <div class="files">匹配结果：{{ item.matched ? `已匹配 ${item.shopId || ''}` : '未匹配到紫鸟店铺' }}</div>
                       <div v-if="item.platform" class="files">平台：{{ item.platform }}</div>
                       <div v-if="getQueueStatus(item)" class="files">队列状态：{{ getQueueStatus(item) }}</div>
-                      <div v-if="item.countryCount !== undefined && item.matched" class="files">国家数：{{ item.countryCount }}</div>
-                      <div v-if="item.totalRows !== undefined && item.matched" class="time">去重后 {{ item.totalRows }} 条</div>
+                      <div v-if="item.countryCount !== undefined && item.matched" class="files">国家数：{{ item.countryCount
+                        }}</div>
+                      <div v-if="item.totalRows !== undefined && item.matched" class="time">去重后 {{ item.totalRows }} 条
+                      </div>
                       <div v-if="shouldShowProgress(item)" class="delete-brand-progress-block">
                         <div class="delete-brand-progress-header">
                           <span>任务进度</span>
                           <span>{{ formatProgressPercent(item.taskId!) }}%</span>
                         </div>
                         <div class="delete-brand-progress-bar">
-                          <div class="delete-brand-progress-bar-fill" :style="{ width: `${formatProgressPercent(item.taskId!)}%` }"></div>
+                          <div class="delete-brand-progress-bar-fill"
+                            :style="{ width: `${formatProgressPercent(item.taskId!)}%` }"></div>
                         </div>
                         <div class="files delete-brand-progress">{{ formatProgress(item.taskId!) }}</div>
                       </div>
@@ -133,28 +133,15 @@
                       <span class="status" :class="getTaskStatusInfo(item).className">
                         {{ getTaskStatusInfo(item).text }}
                       </span>
-                      <button
-                        v-if="item.openStoreUrl"
-                        type="button"
-                        class="download"
-                        @click="triggerItemRun(item)"
-                      >
+                      <button v-if="item.openStoreUrl" type="button" class="download" @click="triggerItemRun(item)">
                         打开紫鸟
                       </button>
-                      <button
-                        v-if="canDownloadTaskResult(item)"
-                        type="button"
-                        class="download"
-                        @click="downloadTaskResult(item)"
-                      >
+                      <button v-if="canDownloadTaskResult(item)" type="button" class="download"
+                        @click="downloadTaskResult(item)">
                         下载
                       </button>
-                      <button
-                        v-if="item.resultId"
-                        type="button"
-                        class="btn-delete"
-                        @click="deleteHistoryRecord(item.resultId)"
-                      >
+                      <button v-if="item.resultId" type="button" class="btn-delete"
+                        @click="deleteHistoryRecord(item.resultId)">
                         删除
                       </button>
                     </div>
@@ -165,26 +152,26 @@
               <div v-if="historySectionItems.length" class="result-subsection">
                 <div class="result-subsection-title">历史记录</div>
                 <ul class="task-list clean-result-list">
-                  <li
-                    v-for="item in historySectionItems"
+                  <li v-for="item in historySectionItems"
                     :key="`history-${item.taskId || item.resultId || item.sourceFilename}`"
-
-                    class="task-item split-result-item"
-                  >
+                    class="task-item split-result-item">
                     <div class="left split-result-main">
                       <span class="id" :title="item.sourceFilename">{{ item.sourceFilename || '-' }}</span>
                       <div class="files">店铺名：{{ item.shopName || '-' }}</div>
                       <div class="files">匹配结果：{{ item.matched ? `已匹配 ${item.shopId || ''}` : '未匹配到紫鸟店铺' }}</div>
                       <div v-if="item.platform" class="files">平台：{{ item.platform }}</div>
-                      <div v-if="item.countryCount !== undefined && item.matched" class="files">国家数：{{ item.countryCount }}</div>
-                      <div v-if="item.totalRows !== undefined && item.matched" class="time">去重后 {{ item.totalRows }} 条</div>
+                      <div v-if="item.countryCount !== undefined && item.matched" class="files">国家数：{{ item.countryCount
+                        }}</div>
+                      <div v-if="item.totalRows !== undefined && item.matched" class="time">去重后 {{ item.totalRows }} 条
+                      </div>
                       <div v-if="shouldShowProgress(item)" class="delete-brand-progress-block">
                         <div class="delete-brand-progress-header">
                           <span>任务进度</span>
                           <span>{{ formatProgressPercent(item.taskId!) }}%</span>
                         </div>
                         <div class="delete-brand-progress-bar">
-                          <div class="delete-brand-progress-bar-fill" :style="{ width: `${formatProgressPercent(item.taskId!)}%` }"></div>
+                          <div class="delete-brand-progress-bar-fill"
+                            :style="{ width: `${formatProgressPercent(item.taskId!)}%` }"></div>
                         </div>
                         <div class="files delete-brand-progress">{{ formatProgress(item.taskId!) }}</div>
                       </div>
@@ -199,20 +186,12 @@
                         {{ getTaskStatusInfo(item).text }}
                       </span>
                       <!-- 历史记录区不再显示打开紫鸟按钮 -->
-                      <button
-                        v-if="canDownloadTaskResult(item)"
-                        type="button"
-                        class="download"
-                        @click="downloadTaskResult(item)"
-                      >
+                      <button v-if="canDownloadTaskResult(item)" type="button" class="download"
+                        @click="downloadTaskResult(item)">
                         下载
                       </button>
-                      <button
-                        v-if="item.resultId"
-                        type="button"
-                        class="btn-delete"
-                        @click="deleteHistoryRecord(item.resultId)"
-                      >
+                      <button v-if="item.resultId" type="button" class="btn-delete"
+                        @click="deleteHistoryRecord(item.resultId)">
                         删除
                       </button>
                     </div>
@@ -303,9 +282,9 @@ function saveSessionTask(taskId: number, items: DeleteBrandResultItem[], pushRes
   const validItems = items.filter(i => i.matched !== false && i.success !== false)
   if (validItems.length === 0) return
 
-  const newTask: StoredCurrentTask = { 
-    taskId, 
-    items: validItems, 
+  const newTask: StoredCurrentTask = {
+    taskId,
+    items: validItems,
     createdAt: Date.now(),
     queuePushResult: pushResult,
     queuePayloadText: payloadText
@@ -454,7 +433,7 @@ function getQueueStatus(item: DeleteBrandResultItem) {
   if (!taskId) return ''
   const sessionTask = sessionTasks.value.find(t => t.taskId === taskId)
   if (!sessionTask) return ''
-  
+
   const status = getTaskStatus(taskId)
   if (status === 'SUCCESS' || status === 'FAILED' || item.taskStatus === 'SUCCESS' || item.taskStatus === 'FAILED') {
     return '已被全局判定为终态'
@@ -463,7 +442,7 @@ function getQueueStatus(item: DeleteBrandResultItem) {
   const sessionItem = sessionTask.items.find(i => i.resultId === item.resultId || i.sourceFilename === item.sourceFilename)
 
   const info = taskDetails.value[taskId]?.line_progress
-  
+
   // 此时这个特定文件是否正好被后端报了进度名
   if (status === 'RUNNING' && info?.has_progress && info?.info?.file_name === item.sourceFilename) {
     return '处理中'
@@ -489,7 +468,7 @@ function getQueueStatus(item: DeleteBrandResultItem) {
 function canDownloadTaskResult(item: DeleteBrandResultItem) {
   // 核心修复：只要单个项目已经成功（后端返回了下载地址或标记为成功），就允许下载，哪怕整包任务还在“执行中”
   if (item.downloadUrl || item.success) return true
-  
+
   const taskId = item.taskId
   if (!taskId) return false
   const status = taskDetails.value[taskId]?.task?.status
@@ -523,7 +502,7 @@ function scheduleNextPoll(immediate = false) {
     clearTimeout(pollTimer.value)
     pollTimer.value = null
   }
-  
+
   const executePoll = async () => {
     pollTimer.value = null
     if (pollingInFlight.value) {
@@ -723,7 +702,7 @@ async function loadHistory() {
     const response = await getDeleteBrandHistory()
     historyItems.value = normalizeDeleteBrandItems(response.items || [])
     syncResultState()
-    
+
     // 关键：页面加载历史后，立刻拉取详情触发状态机
     await refreshTaskDetails()
     ensurePolling(true)
@@ -793,8 +772,17 @@ async function triggerItemRun(item: DeleteBrandResultItem) {
     return
   }
 
+  const api = getPywebviewApi()
   if (item.openStoreUrl) {
-    window.open(item.openStoreUrl, '_blank')
+    if (api?.open_external_url) {
+      const openResult = await api.open_external_url(item.openStoreUrl)
+      if (!openResult?.success) {
+        ElMessage.error(openResult?.error || '打开紫鸟失败')
+        return
+      }
+    } else {
+      window.open(item.openStoreUrl, '_self')
+    }
   }
 
   const taskId = item.taskId
@@ -803,7 +791,6 @@ async function triggerItemRun(item: DeleteBrandResultItem) {
   const sessionTask = sessionTasks.value.find(t => t.taskId === taskId)
   if (!sessionTask) return
 
-  const api = getPywebviewApi()
   if (!api?.enqueue_json) {
     ElMessage.error('当前环境未启用 pywebview enqueue_json（浏览器环境不会推送）')
     return
@@ -812,7 +799,7 @@ async function triggerItemRun(item: DeleteBrandResultItem) {
   const payload = {
     type: 'delete-brand-run',
     ts: Date.now(),
-    data: { 
+    data: {
       taskId: taskId,
       items: [item]
     },
@@ -823,14 +810,14 @@ async function triggerItemRun(item: DeleteBrandResultItem) {
   let qpr = ''
   if (pushResult?.success) {
     qpr = `已单独推送文件 ${item.sourceFilename}，当前队列长度：${pushResult.queue_size ?? '-'}`
-    
+
     // Mark the item as pushed
     const sessionItem = sessionTask.items.find(i => i.resultId === item.resultId || i.sourceFilename === item.sourceFilename)
     if (sessionItem) {
       (sessionItem as any)._pushed = true
     }
     saveSessionTask(taskId, sessionTask.items, qpr, queuePayloadText.value)
-    
+
     ensurePolling(true)
   } else {
     qpr = `推送到 Python 队列失败：${pushResult?.error || '未知错误'}`
@@ -872,71 +859,481 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.queue-debug-card { margin-top: 18px; padding: 14px; border: 1px solid #2a2a2a; border-radius: 10px; background: #202020; }
-.queue-debug-title { margin-bottom: 8px; }
-.queue-debug-line { color: #b8c1cc; font-size: 12px; line-height: 1.6; margin-bottom: 8px; }
-.queue-debug-payload { margin: 0; max-height: 220px; overflow: auto; padding: 10px; border-radius: 8px; background: #141414; color: #8fd3ff; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
-.module-page { min-height: 100vh; background: #1a1a1a; }
-.main-content { display: flex; min-height: calc(100vh - 56px); height: calc(100vh - 56px); }
-.left-panel { width: 380px; background: #1e1e1e; padding: 20px; overflow-y: auto; border-right: 1px solid #2a2a2a; }
-.right-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #1a1a1a; }
-.section-title { font-size: 13px; color: #bbb; margin-bottom: 10px; }
-.upload-zone { border: 1px dashed #3a3a3a; border-radius: 10px; padding: 24px; text-align: center; background: #252525; margin-bottom: 20px; transition: all 0.2s ease; }
-.upload-zone:hover { border-color: #3498db; background: #2a2a2a; }
-.hint { color: #888; font-size: 13px; margin-bottom: 12px; line-height: 1.5; }
-.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
-.opt-btn, .btn-run, .download, .btn-delete { border: none; cursor: pointer; transition: all 0.2s ease; }
-.opt-btn { padding: 8px 16px; font-size: 13px; color: #ccc; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 6px; }
-.opt-btn:hover { color: #3498db; background: #333; border-color: #3498db; }
-.selected-files { margin-top: 14px; font-size: 12px; color: #888; max-height: 112px; overflow-y: auto; text-align: left; }
-.selected-files span { display: block; margin: 4px 0; word-break: break-all; }
-.more-line { color: #b8c1cc; }
-.split-selected-files { max-height: 120px; min-height: 72px; padding-right: 4px; }
-.option-group { margin-bottom: 20px; }
-.radio-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: 8px; background: #252525; border: 1px solid #2a2a2a; margin-bottom: 8px; transition: all 0.2s ease; }
-.radio-item:hover, .radio-item.active { background: #2a2a2a; border-color: #3a3a3a; }
-.radio-item input { margin-top: 3px; }
-.label { font-weight: 500; color: #e0e0e0; font-size: 13px; }
-.desc { font-size: 12px; color: #888; margin-top: 2px; line-height: 1.5; font-weight: 400; }
-.run-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; }
-.btn-run { padding: 10px 22px; background: #3498db; color: #fff; border-radius: 8px; font-size: 14px; }
-.btn-run:hover { background: #2980b9; }
-.btn-run:disabled { background: #555; color: #999; cursor: not-allowed; }
-.loading-msg { color: #3498db; font-size: 13px; }
-.panel-header { padding: 16px 20px; border-bottom: 1px solid #2a2a2a; font-size: 15px; font-weight: 600; color: #ddd; }
-.task-list-wrap { flex: 1; overflow-y: auto; padding: 16px; }
-.task-list { list-style: none; margin: 0; padding: 0; }
-.task-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #2a2a2a; border-radius: 8px; margin-bottom: 10px; background: #1e1e1e; }
-.split-result-item { align-items: flex-start; }
-.left { flex: 1; min-width: 0; }
-.split-result-main { display: flex; flex-direction: column; gap: 4px; }
-.id { display: inline-block; font-weight: 600; color: #e0e0e0; font-size: 13px; }
-.files { font-size: 12px; color: #888; margin-top: 4px; }
-.time { font-size: 12px; color: #666; margin-top: 2px; }
-.split-entry-list { line-height: 1.6; word-break: break-all; max-width: 100%; }
-.delete-brand-preview { white-space: normal; }
-.delete-brand-progress-block { margin-top: 8px; }
-.delete-brand-progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: #8fbfff; }
-.delete-brand-progress-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
-.delete-brand-progress-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2d8cf0 0%, #4db3ff 100%); transition: width 0.3s ease; }
-.delete-brand-progress { color: #69b6ff; line-height: 1.6; white-space: normal; margin-top: 6px; }
-.task-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
-.split-result-actions { flex-shrink: 0; min-width: 180px; justify-content: flex-end; align-self: center; }
-.status { padding: 4px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
-.status.success { background: rgba(46, 204, 113, 0.18); color: #2ecc71; }
-.status.failed { background: rgba(231, 76, 60, 0.18); color: #ff6b6b; }
-.status.running { background: rgba(52, 152, 219, 0.18); color: #3498db; }
-.download { padding: 6px 10px; border-radius: 6px; font-size: 12px; background: rgba(52, 152, 219, 0.18); color: #69b6ff; }
-.download:hover { background: rgba(52, 152, 219, 0.28); }
-.btn-delete { padding: 6px 10px; border-radius: 6px; font-size: 12px; background: rgba(231, 76, 60, 0.12); color: #ff8f8f; }
-.btn-delete:hover { background: rgba(231, 76, 60, 0.22); }
-.empty-tasks { color: #666; font-size: 13px; padding: 24px 8px; }
-.clean-placeholder { max-height: 112px; }
-.clean-result-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 16px; margin-bottom: 18px; }
-.summary-card { padding: 16px 18px; border: 1px solid #2a2a2a; border-radius: 10px; background: #1e1e1e; }
-.summary-card strong { display: block; margin-top: 8px; font-size: 24px; color: #eaf4ff; }
-.summary-label { font-size: 12px; color: #8d8d8d; }
-.result-list-wrap { border: 1px solid #2a2a2a; border-radius: 10px; background: #1e1e1e; min-height: 260px; }
-.result-list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #2a2a2a; font-size: 14px; color: #ddd; }
-@media (max-width: 1100px) { .main-content { flex-direction: column; height: auto; } .left-panel { width: 100%; border-right: none; border-bottom: 1px solid #2a2a2a; } .right-panel { min-height: 420px; } .task-item { flex-direction: column; align-items: flex-start; } .task-right { width: 100%; justify-content: flex-start; } .split-result-actions { min-width: 0; align-self: flex-start; } .clean-result-summary { grid-template-columns: 1fr; } }
+.queue-debug-card {
+  margin-top: 18px;
+  padding: 14px;
+  border: 1px solid #2a2a2a;
+  border-radius: 10px;
+  background: #202020;
+}
+
+.queue-debug-title {
+  margin-bottom: 8px;
+}
+
+.queue-debug-line {
+  color: #b8c1cc;
+  font-size: 12px;
+  line-height: 1.6;
+  margin-bottom: 8px;
+}
+
+.queue-debug-payload {
+  margin: 0;
+  max-height: 220px;
+  overflow: auto;
+  padding: 10px;
+  border-radius: 8px;
+  background: #141414;
+  color: #8fd3ff;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.module-page {
+  min-height: 100vh;
+  background: #1a1a1a;
+}
+
+.main-content {
+  display: flex;
+  min-height: calc(100vh - 56px);
+  height: calc(100vh - 56px);
+}
+
+.left-panel {
+  width: 380px;
+  background: #1e1e1e;
+  padding: 20px;
+  overflow-y: auto;
+  border-right: 1px solid #2a2a2a;
+}
+
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: #1a1a1a;
+}
+
+.section-title {
+  font-size: 13px;
+  color: #bbb;
+  margin-bottom: 10px;
+}
+
+.upload-zone {
+  border: 1px dashed #3a3a3a;
+  border-radius: 10px;
+  padding: 24px;
+  text-align: center;
+  background: #252525;
+  margin-bottom: 20px;
+  transition: all 0.2s ease;
+}
+
+.upload-zone:hover {
+  border-color: #3498db;
+  background: #2a2a2a;
+}
+
+.hint {
+  color: #888;
+  font-size: 13px;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.btns {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.opt-btn,
+.btn-run,
+.download,
+.btn-delete {
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.opt-btn {
+  padding: 8px 16px;
+  font-size: 13px;
+  color: #ccc;
+  background: #2a2a2a;
+  border: 1px solid #3a3a3a;
+  border-radius: 6px;
+}
+
+.opt-btn:hover {
+  color: #3498db;
+  background: #333;
+  border-color: #3498db;
+}
+
+.selected-files {
+  margin-top: 14px;
+  font-size: 12px;
+  color: #888;
+  max-height: 112px;
+  overflow-y: auto;
+  text-align: left;
+}
+
+.selected-files span {
+  display: block;
+  margin: 4px 0;
+  word-break: break-all;
+}
+
+.more-line {
+  color: #b8c1cc;
+}
+
+.split-selected-files {
+  max-height: 120px;
+  min-height: 72px;
+  padding-right: 4px;
+}
+
+.option-group {
+  margin-bottom: 20px;
+}
+
+.radio-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  cursor: pointer;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #252525;
+  border: 1px solid #2a2a2a;
+  margin-bottom: 8px;
+  transition: all 0.2s ease;
+}
+
+.radio-item:hover,
+.radio-item.active {
+  background: #2a2a2a;
+  border-color: #3a3a3a;
+}
+
+.radio-item input {
+  margin-top: 3px;
+}
+
+.label {
+  font-weight: 500;
+  color: #e0e0e0;
+  font-size: 13px;
+}
+
+.desc {
+  font-size: 12px;
+  color: #888;
+  margin-top: 2px;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+.run-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px 12px;
+  margin-top: 16px;
+}
+
+.btn-run {
+  padding: 10px 22px;
+  background: #3498db;
+  color: #fff;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.btn-run:hover {
+  background: #2980b9;
+}
+
+.btn-run:disabled {
+  background: #555;
+  color: #999;
+  cursor: not-allowed;
+}
+
+.loading-msg {
+  color: #3498db;
+  font-size: 13px;
+}
+
+.panel-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #2a2a2a;
+  font-size: 15px;
+  font-weight: 600;
+  color: #ddd;
+}
+
+.task-list-wrap {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.task-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.task-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 16px;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  background: #1e1e1e;
+}
+
+.split-result-item {
+  align-items: flex-start;
+}
+
+.left {
+  flex: 1;
+  min-width: 0;
+}
+
+.split-result-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.id {
+  display: inline-block;
+  font-weight: 600;
+  color: #e0e0e0;
+  font-size: 13px;
+}
+
+.files {
+  font-size: 12px;
+  color: #888;
+  margin-top: 4px;
+}
+
+.time {
+  font-size: 12px;
+  color: #666;
+  margin-top: 2px;
+}
+
+.split-entry-list {
+  line-height: 1.6;
+  word-break: break-all;
+  max-width: 100%;
+}
+
+.delete-brand-preview {
+  white-space: normal;
+}
+
+.delete-brand-progress-block {
+  margin-top: 8px;
+}
+
+.delete-brand-progress-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: #8fbfff;
+}
+
+.delete-brand-progress-bar {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.delete-brand-progress-bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #2d8cf0 0%, #4db3ff 100%);
+  transition: width 0.3s ease;
+}
+
+.delete-brand-progress {
+  color: #69b6ff;
+  line-height: 1.6;
+  white-space: normal;
+  margin-top: 6px;
+}
+
+.task-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.split-result-actions {
+  flex-shrink: 0;
+  min-width: 180px;
+  justify-content: flex-end;
+  align-self: center;
+}
+
+.status {
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.status.success {
+  background: rgba(46, 204, 113, 0.18);
+  color: #2ecc71;
+}
+
+.status.failed {
+  background: rgba(231, 76, 60, 0.18);
+  color: #ff6b6b;
+}
+
+.status.running {
+  background: rgba(52, 152, 219, 0.18);
+  color: #3498db;
+}
+
+.download {
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  background: rgba(52, 152, 219, 0.18);
+  color: #69b6ff;
+}
+
+.download:hover {
+  background: rgba(52, 152, 219, 0.28);
+}
+
+.btn-delete {
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  background: rgba(231, 76, 60, 0.12);
+  color: #ff8f8f;
+}
+
+.btn-delete:hover {
+  background: rgba(231, 76, 60, 0.22);
+}
+
+.empty-tasks {
+  color: #666;
+  font-size: 13px;
+  padding: 24px 8px;
+}
+
+.clean-placeholder {
+  max-height: 112px;
+}
+
+.clean-result-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 220px));
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.summary-card {
+  padding: 16px 18px;
+  border: 1px solid #2a2a2a;
+  border-radius: 10px;
+  background: #1e1e1e;
+}
+
+.summary-card strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 24px;
+  color: #eaf4ff;
+}
+
+.summary-label {
+  font-size: 12px;
+  color: #8d8d8d;
+}
+
+.result-list-wrap {
+  border: 1px solid #2a2a2a;
+  border-radius: 10px;
+  background: #1e1e1e;
+  min-height: 260px;
+}
+
+.result-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #2a2a2a;
+  font-size: 14px;
+  color: #ddd;
+}
+
+@media (max-width: 1100px) {
+  .main-content {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .left-panel {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #2a2a2a;
+  }
+
+  .right-panel {
+    min-height: 420px;
+  }
+
+  .task-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .task-right {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .split-result-actions {
+    min-width: 0;
+    align-self: flex-start;
+  }
+
+  .clean-result-summary {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/frontend-vue/src/shared/bridges/pywebview.ts b/frontend-vue/src/shared/bridges/pywebview.ts
index 2a08292..fe4dc0f 100644
--- a/frontend-vue/src/shared/bridges/pywebview.ts
+++ b/frontend-vue/src/shared/bridges/pywebview.ts
@@ -21,6 +21,7 @@ export interface PywebviewApi {
   save_template_xlsx?: () => Promise<{ success: boolean; path?: string; error?: string }>
   save_template_zip?: () => Promise<{ success: boolean; path?: string; error?: string }>
   enqueue_json?: (data: unknown) => Promise<{ success: boolean; queue_size?: number; error?: string }>
+  open_external_url?: (url: string) => Promise<{ success: boolean; error?: string }>
 }
 
 declare global {