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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user