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>
This commit is contained in:
2026-04-27 00:59:51 +08:00
parent a72ba4490e
commit 3a367e7967
@@ -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;