From 54b461dfb4c460ed1d3b818b8fbb3b783d9b96f1 Mon Sep 17 00:00:00 2001
From: root <root@nepiedg.quitsmoke.site>
Date: Tue, 10 Mar 2026 18:19:02 +0800
Subject: [PATCH] feat: improve submenu dark theme and enrich parse log fields

---
 src/layouts/MainLayout.vue               | 47 +++++++++++++-
 src/views/watermark/video-parse-logs.vue | 80 ++++++++++++++++++++++--
 2 files changed, 120 insertions(+), 7 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 54e26aa..02febeb 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -255,9 +255,13 @@ const handleCommand = async (command) => {
   background: #2b3a4b;
 }
 
-.el-menu {
+:deep(.el-menu) {
   border-right: none;
-  background: #304156;
+  background: transparent;
+  --el-menu-bg-color: #304156;
+  --el-menu-text-color: #bfcbd9;
+  --el-menu-hover-bg-color: #263445;
+  --el-menu-active-color: #ffffff;
 }
 
 :deep(.el-menu-item),
@@ -276,6 +280,45 @@ const handleCommand = async (command) => {
   color: #fff;
 }
 
+:deep(.el-menu--inline) {
+  background: linear-gradient(180deg, #27374a 0%, #243244 100%) !important;
+  padding: 6px 0 10px;
+}
+
+:deep(.el-menu--inline .el-menu-item) {
+  min-width: auto;
+  margin: 4px 10px;
+  border-radius: 8px;
+  color: #d7e2ee;
+}
+
+:deep(.el-menu--inline .el-menu-item:hover) {
+  background: #33475e !important;
+}
+
+:deep(.el-menu--inline .el-menu-item.is-active) {
+  background: #1f8fff !important;
+  color: #fff;
+}
+
+:deep(.el-menu--popup) {
+  background: #263445 !important;
+  border: 1px solid #3b4d63;
+}
+
+:deep(.el-menu--popup .el-menu-item) {
+  color: #d7e2ee;
+}
+
+:deep(.el-menu--popup .el-menu-item:hover) {
+  background: #33475e !important;
+}
+
+:deep(.el-menu--popup .el-menu-item.is-active) {
+  background: #1f8fff !important;
+  color: #fff;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
diff --git a/src/views/watermark/video-parse-logs.vue b/src/views/watermark/video-parse-logs.vue
index 7aa0817..c26f72e 100644
--- a/src/views/watermark/video-parse-logs.vue
+++ b/src/views/watermark/video-parse-logs.vue
@@ -58,18 +58,19 @@
 
     <el-table v-loading="loading" :data="list" stripe>
       <el-table-column prop="id" label="ID" width="80" />
-      <el-table-column label="小程序" min-width="140">
+      <el-table-column label="小程序" min-width="150">
         <template #default="{ row }">
           {{ row.mini_program_name || '-' }}
         </template>
       </el-table-column>
-      <el-table-column prop="user_id" label="用户ID" width="90" />
-      <el-table-column label="原始内容" min-width="220" show-overflow-tooltip>
+      <el-table-column prop="mini_program_id" label="小程序ID" width="110" />
+      <el-table-column prop="user_id" label="用户ID" width="100" />
+      <el-table-column label="原始内容" min-width="240" show-overflow-tooltip>
         <template #default="{ row }">
           {{ row.request_content || '-' }}
         </template>
       </el-table-column>
-      <el-table-column label="解析链接" min-width="220" show-overflow-tooltip>
+      <el-table-column label="解析链接" min-width="240" show-overflow-tooltip>
         <template #default="{ row }">
           <el-link
             v-if="row.parsed_url"
@@ -83,6 +84,29 @@
           <span v-else>-</span>
         </template>
       </el-table-column>
+      <el-table-column label="第三方状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="statusTagType(row.third_party_status)">
+            {{ displayStatus(row.third_party_status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="第三方响应" min-width="180">
+        <template #default="{ row }">
+          <el-popover
+            v-if="hasPayload(row.third_party_payload)"
+            placement="top-start"
+            :width="520"
+            trigger="click"
+          >
+            <template #reference>
+              <el-button type="primary" link>查看响应</el-button>
+            </template>
+            <pre class="payload-block">{{ formatPayload(row.third_party_payload) }}</pre>
+          </el-popover>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <el-table-column label="免费次数" width="100">
         <template #default="{ row }">
           <el-tag :type="row.free_quota_used ? 'success' : 'info'">
@@ -90,7 +114,7 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="duration_ms" label="耗时(ms)" width="100" />
+      <el-table-column prop="duration_ms" label="耗时(ms)" width="110" />
       <el-table-column label="错误信息" min-width="180" show-overflow-tooltip>
         <template #default="{ row }">
           {{ row.error_message || '-' }}
@@ -143,6 +167,38 @@ const formatDateTime = (value) => {
   return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
 }
 
+const hasPayload = (value) => {
+  if (value === null || value === undefined) return false
+  return String(value).trim() !== ''
+}
+
+// 后端返回的 payload 可能是 JSON 字符串，也可能是对象，这里统一格式化展示
+const formatPayload = (value) => {
+  if (!hasPayload(value)) return '-'
+  if (typeof value === 'object') {
+    return JSON.stringify(value, null, 2)
+  }
+  const text = String(value)
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2)
+  } catch (error) {
+    return text
+  }
+}
+
+const displayStatus = (value) => {
+  if (value === null || value === undefined || value === '') return '-'
+  return String(value)
+}
+
+const statusTagType = (value) => {
+  const num = Number(value)
+  if (!Number.isFinite(num)) return 'info'
+  if (num >= 200 && num < 400) return 'success'
+  if (num >= 400) return 'danger'
+  return 'info'
+}
+
 const loadMiniProgramOptions = async () => {
   const res = await getMiniPrograms({ page: 1, page_size: 200 })
   const payload = res.data || {}
@@ -219,6 +275,20 @@ onMounted(async () => {
   flex-wrap: wrap;
 }
 
+.payload-block {
+  max-height: 360px;
+  overflow: auto;
+  margin: 0;
+  padding: 10px;
+  border-radius: 8px;
+  background: #0f172a;
+  color: #dbeafe;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
 .pagination {
   display: flex;
   justify-content: flex-end;