From 3a367e79673e3b2c56ed1d365530d9ae75d03401 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Mon, 27 Apr 2026 00:59:51 +0800
Subject: [PATCH] feat(desktop-client): show platform logo in publish task
 table

Replace the hard-coded platform name map with a lookup against the
shared desktop publish media catalog so the task table renders the
real platform logo (or a colored short-name fallback) next to the
account name and stays in sync as new platforms are added.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../renderer/views/PublishManagementView.vue  | 80 ++++++++++++++++---
 1 file changed, 68 insertions(+), 12 deletions(-)

diff --git a/apps/desktop-client/src/renderer/views/PublishManagementView.vue b/apps/desktop-client/src/renderer/views/PublishManagementView.vue
index 09e9789..8c35bd5 100644
--- a/apps/desktop-client/src/renderer/views/PublishManagementView.vue
+++ b/apps/desktop-client/src/renderer/views/PublishManagementView.vue
@@ -12,9 +12,14 @@ import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import StatusBadge from "../components/StatusBadge.vue";
 import { useDesktopRuntime } from "../composables/useDesktopRuntime";
 import { formatDateTime, formatRelativeTime, titleCaseToken } from "../lib/formatters";
+import { desktopPublishMediaCatalog } from "../lib/media-catalog";
 
 const PAGE_SIZE = 10;
 
+const publishPlatformIndex: Record<string, (typeof desktopPublishMediaCatalog)[number]> = Object.fromEntries(
+  desktopPublishMediaCatalog.map((item) => [item.id, item]),
+);
+
 interface PublishTaskItem {
   id: string;
   title: string;
@@ -35,18 +40,25 @@ interface PublishTaskItem {
 
 let refreshTimer: ReturnType<typeof setInterval> | null = null;
 
+function platformMeta(platform: string) {
+  const key = (platform ?? "").toLowerCase();
+  return publishPlatformIndex[key] ?? null;
+}
+
 function translatePlatform(platform: string) {
-  const map: Record<string, string> = {
-    toutiaohao: "头条号",
-    bilibili: "哔哩哔哩",
-    xiaohongshu: "小红书",
-    douyin: "抖音",
-    kuaishou: "快手",
-    wechat_oa: "微信公众号",
-    baijiahao: "百家号",
-    zhihu: "知乎",
-  };
-  return map[platform?.toLowerCase()] || titleCaseToken(platform);
+  return platformMeta(platform)?.label || titleCaseToken(platform);
+}
+
+function platformLogo(platform: string): string | null {
+  return platformMeta(platform)?.logoUrl ?? null;
+}
+
+function platformAccent(platform: string): string {
+  return platformMeta(platform)?.accent ?? "#64748b";
+}
+
+function platformShortName(platform: string): string {
+  return platformMeta(platform)?.shortName ?? titleCaseToken(platform).slice(0, 1);
 }
 
 function statusLabel(status: DesktopTaskInfo["status"]): string {
@@ -396,7 +408,23 @@ const tableColumns = [
               <div class="cell-primary-secondary">
                 <div class="info-stack">
                   <span class="title">{{ record.accountName }}</span>
-                  <span class="subtitle">{{ translatePlatform(record.platform) }}</span>
+                  <span class="subtitle platform-line">
+                    <span class="platform-logo-mini">
+                      <img
+                        v-if="platformLogo(record.platform)"
+                        :src="platformLogo(record.platform) || ''"
+                        :alt="translatePlatform(record.platform)"
+                      />
+                      <span
+                        v-else
+                        class="platform-logo-fallback"
+                        :style="{ color: platformAccent(record.platform) }"
+                      >
+                        {{ platformShortName(record.platform) }}
+                      </span>
+                    </span>
+                    <span>{{ translatePlatform(record.platform) }}</span>
+                  </span>
                 </div>
               </div>
             </template>
@@ -675,6 +703,34 @@ const tableColumns = [
   color: #94a3b8;
 }
 
+.platform-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.platform-logo-mini {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px #e2e8f0;
+  overflow: hidden;
+  flex: 0 0 auto;
+}
+.platform-logo-mini img {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+}
+.platform-logo-fallback {
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .external-task-link {
   display: inline-flex;
   align-items: center;