root
412befef53
Surface the new runtime_health/runtime_checked_at fields through a tiny desktop-account-runtime helper so PublishArticleModal, MediaView, and TrackingView fall back to the desktop client's last live signal instead of the slower DB column. This keeps the publishable card and tracking breakdown in sync with the desktop probe loop. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1094 lines
30 KiB
Vue
1094 lines
30 KiB
Vue
<script setup lang="ts">
|
||
import { MinusCircleFilled } from "@ant-design/icons-vue";
|
||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||
import { message, notification } from "ant-design-vue";
|
||
import type { ArticleDetail, DesktopAccountInfo, MediaPlatform } from "@geo/shared-types";
|
||
import { computed, ref, watch, watchEffect } from "vue";
|
||
import { useI18n } from "vue-i18n";
|
||
|
||
import CoverPickerModal from "@/components/CoverPickerModal.vue";
|
||
import { articlesApi, mediaApi, publishJobsApi, resolveApiURL, tenantAccountsApi } from "@/lib/api";
|
||
import { coverUploadRequired, deriveCoverFileName } from "@/lib/cover-requirements";
|
||
import { resolveAccountCheckedAt, resolveAccountHealth } from "@/lib/desktop-account-runtime";
|
||
import { formatError } from "@/lib/errors";
|
||
import {
|
||
getPublishPlatformMeta,
|
||
isPublishPlatformId,
|
||
normalizePublishPlatformId,
|
||
normalizePublishPlatformIds,
|
||
} from "@/lib/publish-platforms";
|
||
|
||
type PublishState = "immediate" | "queued" | "unavailable";
|
||
|
||
const platformLogoCatalog: Record<string, string> = {
|
||
toutiaohao: "/logos/logo_toutiao.png",
|
||
baijiahao: "/logos/logo_baijiahao.png",
|
||
sohuhao: "/logos/logo_souhu.png",
|
||
qiehao: "/logos/logo_qiehao.png",
|
||
zhihu: "/logos/logo_zhihu.png",
|
||
wangyihao: "/logos/logo_wangyihao.png",
|
||
jianshu: "/logos/logo_jianshu.svg",
|
||
bilibili: "/logos/logo_bilibili.png",
|
||
juejin: "/logos/logo_juejin.png",
|
||
smzdm: "/logos/logo_smzdm.svg",
|
||
weixin_gzh: "/logos/logo_weixin_gzh.svg",
|
||
zol: "/logos/logo_zol.png",
|
||
dongchedi: "/logos/logo_dongchedi.svg",
|
||
};
|
||
|
||
interface PublishAccountCard {
|
||
id: string;
|
||
platformId: string;
|
||
platformName: string;
|
||
platformShortName: string;
|
||
platformAccent: string;
|
||
platformLogoUrl: string | null;
|
||
displayName: string;
|
||
platformUid: string;
|
||
avatarUrl: string | null;
|
||
health: DesktopAccountInfo["health"];
|
||
verifiedAt: string | null;
|
||
clientId: string | null;
|
||
clientOnline: boolean | null;
|
||
clientDeviceName: string | null;
|
||
clientLastSeenAt: string | null;
|
||
publishState: PublishState;
|
||
selectable: boolean;
|
||
statusText: string;
|
||
}
|
||
|
||
const props = defineProps<{
|
||
open: boolean;
|
||
articleId: number | null;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
"update:open": [value: boolean];
|
||
published: [];
|
||
}>();
|
||
|
||
const { t } = useI18n();
|
||
const queryClient = useQueryClient();
|
||
|
||
const selectedAccountIds = ref<string[]>([]);
|
||
const coverEnabled = ref(false);
|
||
const coverAssetUrl = ref("");
|
||
const coverFileName = ref("");
|
||
const coverImageAssetId = ref<number | null>(null);
|
||
const coverPickerOpen = ref(false);
|
||
const selectionHydrated = ref(false);
|
||
const coverHydrated = ref(false);
|
||
|
||
const detailQuery = useQuery({
|
||
queryKey: computed(() => ["articles", "detail", props.articleId, "publish-modal"]),
|
||
enabled: computed(() => props.open && Boolean(props.articleId)),
|
||
queryFn: () => articlesApi.detail(props.articleId as number),
|
||
});
|
||
|
||
const accountsQuery = useQuery({
|
||
queryKey: ["tenant", "desktop-accounts", "publish-modal"],
|
||
enabled: computed(() => props.open),
|
||
queryFn: () => tenantAccountsApi.list(),
|
||
});
|
||
|
||
const platformsQuery = useQuery({
|
||
queryKey: ["media", "platforms", "publish-modal"],
|
||
enabled: computed(() => props.open),
|
||
queryFn: () => mediaApi.platforms(),
|
||
});
|
||
|
||
watch(
|
||
() => props.open,
|
||
async (open) => {
|
||
if (!open) {
|
||
selectedAccountIds.value = [];
|
||
coverAssetUrl.value = "";
|
||
coverFileName.value = "";
|
||
coverImageAssetId.value = null;
|
||
coverEnabled.value = false;
|
||
selectionHydrated.value = false;
|
||
coverHydrated.value = false;
|
||
return;
|
||
}
|
||
|
||
selectionHydrated.value = false;
|
||
coverHydrated.value = false;
|
||
|
||
await Promise.allSettled([
|
||
props.articleId ? detailQuery.refetch() : Promise.resolve(),
|
||
accountsQuery.refetch(),
|
||
platformsQuery.refetch(),
|
||
]);
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
const platformMap = computed<Map<string, MediaPlatform>>(() => {
|
||
return new Map(
|
||
(platformsQuery.data.value ?? []).map((platform: MediaPlatform) => [
|
||
normalizePublishPlatformId(platform.platform_id),
|
||
platform,
|
||
]),
|
||
);
|
||
});
|
||
|
||
const publishAccounts = computed(() => {
|
||
return (accountsQuery.data.value ?? []).filter((account) => {
|
||
if (account.deleted_at) {
|
||
return false;
|
||
}
|
||
|
||
const platformId = normalizePublishPlatformId(account.platform);
|
||
return platformMap.value.has(platformId) || isPublishPlatformId(platformId);
|
||
});
|
||
});
|
||
|
||
const articlePlatformIds = computed(() => normalizePublishPlatformIds(detailQuery.data.value?.platforms ?? []));
|
||
|
||
const accountCards = computed<PublishAccountCard[]>(() => {
|
||
const preferredPlatforms = new Set(articlePlatformIds.value);
|
||
|
||
return [...publishAccounts.value]
|
||
.map((account) => {
|
||
const platformId = normalizePublishPlatformId(account.platform);
|
||
const platform = platformMap.value.get(platformId);
|
||
const fallback = getPublishPlatformMeta(platformId);
|
||
const publishState = resolvePublishState(account);
|
||
const health = resolveAccountHealth(account);
|
||
|
||
return {
|
||
id: account.id,
|
||
platformId,
|
||
platformName: platform?.name || fallback.name,
|
||
platformShortName: platform?.short_name || fallback.shortName,
|
||
platformAccent: platform?.accent_color || fallback.accent,
|
||
platformLogoUrl: resolvePlatformLogoUrl(platformId, platform?.logo_url),
|
||
displayName: account.display_name,
|
||
platformUid: normalizePlatformUid(account.platform_uid),
|
||
avatarUrl: resolveApiURL(account.avatar_url),
|
||
health,
|
||
verifiedAt: resolveAccountCheckedAt(account),
|
||
clientId: account.client_id,
|
||
clientOnline: account.client_online,
|
||
clientDeviceName: account.client_device_name,
|
||
clientLastSeenAt: account.client_last_seen_at,
|
||
publishState,
|
||
selectable: publishState !== "unavailable",
|
||
statusText: resolveStatusText(account, publishState),
|
||
};
|
||
})
|
||
.sort((left, right) => {
|
||
const preferredGap =
|
||
Number(preferredPlatforms.has(right.platformId)) - Number(preferredPlatforms.has(left.platformId));
|
||
if (preferredGap !== 0) {
|
||
return preferredGap;
|
||
}
|
||
|
||
const publishGap = publishRank(left.publishState) - publishRank(right.publishState);
|
||
if (publishGap !== 0) {
|
||
return publishGap;
|
||
}
|
||
|
||
const leftVerifiedAt = Date.parse(left.verifiedAt ?? "") || 0;
|
||
const rightVerifiedAt = Date.parse(right.verifiedAt ?? "") || 0;
|
||
return rightVerifiedAt - leftVerifiedAt;
|
||
});
|
||
});
|
||
|
||
watch(
|
||
accountCards,
|
||
(cards) => {
|
||
const selectableIds = new Set(cards.filter((card) => card.selectable).map((card) => card.id));
|
||
selectedAccountIds.value = selectedAccountIds.value.filter((id) => selectableIds.has(id));
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
watchEffect(() => {
|
||
if (!props.open) {
|
||
return;
|
||
}
|
||
|
||
if (!coverHydrated.value && !detailQuery.isPending.value && !detailQuery.isFetching.value) {
|
||
const initialUrl = resolveApiURL(detailQuery.data.value?.cover_asset_url);
|
||
coverAssetUrl.value = initialUrl;
|
||
coverFileName.value = deriveCoverFileName(initialUrl);
|
||
coverImageAssetId.value = detailQuery.data.value?.cover_image_asset_id ?? null;
|
||
coverEnabled.value = Boolean(initialUrl);
|
||
coverHydrated.value = true;
|
||
}
|
||
|
||
if (selectionHydrated.value) {
|
||
return;
|
||
}
|
||
|
||
if (
|
||
detailQuery.isPending.value ||
|
||
detailQuery.isFetching.value ||
|
||
accountsQuery.isPending.value ||
|
||
accountsQuery.isFetching.value ||
|
||
platformsQuery.isPending.value ||
|
||
platformsQuery.isFetching.value
|
||
) {
|
||
return;
|
||
}
|
||
|
||
const preferredPlatforms = new Set(articlePlatformIds.value);
|
||
selectedAccountIds.value = accountCards.value
|
||
.filter((card) => card.selectable && preferredPlatforms.has(card.platformId))
|
||
.map((card) => card.id);
|
||
selectionHydrated.value = true;
|
||
});
|
||
|
||
const selectedCards = computed(() => {
|
||
const selected = new Set(selectedAccountIds.value);
|
||
return accountCards.value.filter((card) => selected.has(card.id));
|
||
});
|
||
|
||
const modalTitle = computed(() => detailQuery.data.value?.title || t("article.untitled"));
|
||
const selectedPlatformIds = computed(() => Array.from(new Set(selectedCards.value.map((card) => card.platformId))));
|
||
const selectedImmediateCount = computed(() => selectedCards.value.filter((card) => card.publishState === "immediate").length);
|
||
const selectedQueuedCount = computed(() => selectedCards.value.filter((card) => card.publishState === "queued").length);
|
||
const publishModalVisible = computed(() => props.open && !coverPickerOpen.value);
|
||
const coverRequired = computed(() => coverUploadRequired(selectedPlatformIds.value));
|
||
const effectiveCoverEnabled = computed(() => coverRequired.value || coverEnabled.value);
|
||
const normalizedCoverValue = computed(() => (effectiveCoverEnabled.value ? coverAssetUrl.value.trim() : ""));
|
||
|
||
watch(
|
||
coverRequired,
|
||
(required) => {
|
||
if (required) {
|
||
coverEnabled.value = true;
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
const publishMutation = useMutation({
|
||
mutationFn: async () => {
|
||
if (!props.articleId || !detailQuery.data.value) {
|
||
throw new Error("missing_article");
|
||
}
|
||
if (!selectedAccountIds.value.length) {
|
||
throw new Error("no_accounts_selected");
|
||
}
|
||
if (coverRequired.value && !normalizedCoverValue.value) {
|
||
throw new Error("cover_required_for_selected_platforms");
|
||
}
|
||
|
||
const article = await persistCoverIfNeeded(detailQuery.data.value);
|
||
return publishJobsApi.create({
|
||
title: article.title?.trim() || t("article.untitled"),
|
||
content_ref: {
|
||
article_id: article.id,
|
||
},
|
||
accounts: selectedAccountIds.value.map((accountId) => ({
|
||
account_id: accountId,
|
||
})),
|
||
});
|
||
},
|
||
onSuccess: async () => {
|
||
notification.success({
|
||
message: "已提交发布任务",
|
||
description: successDescription(),
|
||
placement: "topRight",
|
||
duration: 5,
|
||
});
|
||
|
||
await Promise.all([
|
||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["tenant", "desktop-accounts"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["articles", "detail", props.articleId] }),
|
||
queryClient.invalidateQueries({ queryKey: ["articles", "detail", props.articleId, "publish-modal"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["articles", "publish-records", props.articleId] }),
|
||
]);
|
||
|
||
emit("published");
|
||
emit("update:open", false);
|
||
},
|
||
onError: (error) => {
|
||
const normalized = error instanceof Error ? error.message : "";
|
||
if (normalized === "no_accounts_selected") {
|
||
message.warning("请先选择至少一个可发布账号");
|
||
return;
|
||
}
|
||
if (normalized === "cover_required_for_selected_platforms") {
|
||
message.warning(t("media.publish.messages.coverRequired"));
|
||
return;
|
||
}
|
||
message.error(formatError(error));
|
||
},
|
||
});
|
||
|
||
async function persistCoverIfNeeded(detail: ArticleDetail): Promise<ArticleDetail> {
|
||
const currentUrl = resolveApiURL(detail.cover_asset_url).trim();
|
||
const nextUrl = normalizedCoverValue.value.trim();
|
||
const currentAssetId = detail.cover_image_asset_id ?? null;
|
||
|
||
if (currentUrl === nextUrl && currentAssetId === coverImageAssetId.value) {
|
||
return detail;
|
||
}
|
||
|
||
return articlesApi.update(detail.id, {
|
||
title: detail.title?.trim() || t("article.untitled"),
|
||
markdown_content: detail.markdown_content ?? "",
|
||
platforms: normalizePublishPlatformIds(detail.platforms ?? []),
|
||
cover_asset_url: nextUrl || null,
|
||
cover_image_asset_id: coverImageAssetId.value,
|
||
});
|
||
}
|
||
|
||
function successDescription(): string {
|
||
const total = selectedCards.value.length;
|
||
if (total === 0) {
|
||
return "任务已进入发布队列。";
|
||
}
|
||
if (selectedQueuedCount.value === 0) {
|
||
return `共 ${total} 个账号，在线客户端会立即开始消费。`;
|
||
}
|
||
if (selectedImmediateCount.value === 0) {
|
||
return `共 ${total} 个账号已进入离线队列，客户端上线后会自动继续发布。`;
|
||
}
|
||
return `共 ${total} 个账号：${selectedImmediateCount.value} 个立即发布，${selectedQueuedCount.value} 个离线排队。`;
|
||
}
|
||
|
||
function toggleAccount(accountId: string, selectable: boolean): void {
|
||
if (!selectable || publishMutation.isPending.value) {
|
||
return;
|
||
}
|
||
|
||
if (selectedAccountIds.value.includes(accountId)) {
|
||
selectedAccountIds.value = selectedAccountIds.value.filter((id) => id !== accountId);
|
||
return;
|
||
}
|
||
|
||
selectedAccountIds.value = [...selectedAccountIds.value, accountId];
|
||
}
|
||
|
||
function isSelected(accountId: string): boolean {
|
||
return selectedAccountIds.value.includes(accountId);
|
||
}
|
||
|
||
function handleCoverToggle(checked: boolean): void {
|
||
if (coverRequired.value) {
|
||
coverEnabled.value = true;
|
||
return;
|
||
}
|
||
coverEnabled.value = checked;
|
||
}
|
||
|
||
function handleCoverPicked(payload: { url: string; fileName: string; assetId?: number | null }): void {
|
||
coverAssetUrl.value = payload.url;
|
||
coverFileName.value = payload.fileName;
|
||
coverImageAssetId.value = payload.assetId ?? null;
|
||
coverEnabled.value = true;
|
||
}
|
||
|
||
function handleRemoveCover(): void {
|
||
coverAssetUrl.value = "";
|
||
coverFileName.value = "";
|
||
coverImageAssetId.value = null;
|
||
}
|
||
|
||
function resolvePublishState(account: DesktopAccountInfo): PublishState {
|
||
if (resolveAccountHealth(account) !== "live") {
|
||
return "unavailable";
|
||
}
|
||
if (!account.client_id) {
|
||
return "unavailable";
|
||
}
|
||
return account.client_online === true ? "immediate" : "queued";
|
||
}
|
||
|
||
function resolveStatusText(account: DesktopAccountInfo, publishState: PublishState): string {
|
||
if (publishState === "immediate") {
|
||
return "客户端在线，RabbitMQ 会立即唤醒桌面端开始发布。";
|
||
}
|
||
if (publishState === "queued") {
|
||
return "客户端当前离线，任务会先落库排队，等桌面端上线后自动继续发布。";
|
||
}
|
||
if (resolveAccountHealth(account) !== "live") {
|
||
return "该账号授权状态异常，请先在桌面端重新校验或重新授权。";
|
||
}
|
||
return "该账号还没有绑定桌面客户端，当前不能进入发布队列。";
|
||
}
|
||
|
||
function publishRank(state: PublishState): number {
|
||
switch (state) {
|
||
case "immediate":
|
||
return 0;
|
||
case "queued":
|
||
return 1;
|
||
default:
|
||
return 2;
|
||
}
|
||
}
|
||
|
||
function publishStateLabel(state: PublishState): string {
|
||
switch (state) {
|
||
case "immediate":
|
||
return "立即发布";
|
||
case "queued":
|
||
return "离线排队";
|
||
default:
|
||
return "不可发布";
|
||
}
|
||
}
|
||
|
||
function healthLabel(health: DesktopAccountInfo["health"]): string {
|
||
switch (health) {
|
||
case "live":
|
||
return "授权正常";
|
||
case "captcha":
|
||
return "待处理";
|
||
case "risk":
|
||
return "风险观察";
|
||
default:
|
||
return "授权异常";
|
||
}
|
||
}
|
||
|
||
function healthColor(health: DesktopAccountInfo["health"]): string {
|
||
switch (health) {
|
||
case "live":
|
||
return "green";
|
||
case "captcha":
|
||
return "orange";
|
||
case "risk":
|
||
return "gold";
|
||
default:
|
||
return "red";
|
||
}
|
||
}
|
||
|
||
function clientStatusLabel(card: PublishAccountCard): string {
|
||
if (!card.clientId) {
|
||
return "未绑定客户端";
|
||
}
|
||
return card.clientOnline ? "客户端在线" : "客户端离线";
|
||
}
|
||
|
||
function clientStatusColor(card: PublishAccountCard): string {
|
||
if (!card.clientId) {
|
||
return "default";
|
||
}
|
||
return card.clientOnline ? "green" : "gold";
|
||
}
|
||
|
||
function accountInitial(card: PublishAccountCard): string {
|
||
const trimmed = card.displayName.trim();
|
||
return trimmed ? trimmed.slice(0, 1).toUpperCase() : card.platformShortName;
|
||
}
|
||
|
||
function resolvePlatformLogoUrl(platformId: string, remoteLogoUrl?: string | null): string | null {
|
||
const localLogoUrl = platformLogoCatalog[platformId];
|
||
if (localLogoUrl) {
|
||
return localLogoUrl;
|
||
}
|
||
const resolvedRemoteLogoUrl = resolveApiURL(remoteLogoUrl);
|
||
return resolvedRemoteLogoUrl || null;
|
||
}
|
||
|
||
function normalizePlatformUid(value?: string | null): string {
|
||
let normalized = String(value ?? "").trim();
|
||
while (normalized.toLowerCase().startsWith("platform:")) {
|
||
normalized = normalized.slice("platform:".length).trim();
|
||
}
|
||
return normalized || "--";
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<a-modal
|
||
:open="publishModalVisible"
|
||
title="发布"
|
||
:width="980"
|
||
:confirm-loading="publishMutation.isPending.value"
|
||
ok-text="提交发布"
|
||
:cancel-text="t('common.cancel')"
|
||
@ok="publishMutation.mutate()"
|
||
@cancel="emit('update:open', false)"
|
||
>
|
||
<div class="publish-modal">
|
||
<section class="publish-modal__hero">
|
||
<div>
|
||
<span class="publish-modal__eyebrow">发布标题</span>
|
||
<h3>{{ modalTitle }}</h3>
|
||
<p>在线账号会立即消费，离线账号会自动排队；数据库保留任务真相，RabbitMQ 负责唤醒在线客户端。</p>
|
||
</div>
|
||
|
||
<div class="publish-modal__hero-metrics">
|
||
<div class="publish-modal__metric">
|
||
<strong>{{ selectedCards.length }}</strong>
|
||
<span>已选账号</span>
|
||
</div>
|
||
<div class="publish-modal__metric">
|
||
<strong>{{ selectedImmediateCount }}</strong>
|
||
<span>立即发布</span>
|
||
</div>
|
||
<div class="publish-modal__metric">
|
||
<strong>{{ selectedQueuedCount }}</strong>
|
||
<span>离线排队</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="publish-modal__section">
|
||
<div class="publish-modal__section-header">
|
||
<h3><span class="required-star">*</span> 目标账号</h3>
|
||
<p class="muted">优先预选文章里已经勾选的平台账号。支持同平台多账号；授权异常或未绑定桌面客户端的账号不可选。</p>
|
||
</div>
|
||
|
||
<div v-if="accountsQuery.isPending.value || platformsQuery.isPending.value" class="publish-modal__loading">
|
||
<a-skeleton active :paragraph="{ rows: 5 }" />
|
||
</div>
|
||
|
||
<div v-else-if="accountCards.length" class="publish-modal__list">
|
||
<button
|
||
v-for="account in accountCards"
|
||
:key="account.id"
|
||
type="button"
|
||
class="publish-modal__card"
|
||
:class="{
|
||
'publish-modal__card--active': isSelected(account.id),
|
||
'publish-modal__card--disabled': !account.selectable,
|
||
}"
|
||
@click="toggleAccount(account.id, account.selectable)"
|
||
>
|
||
<div class="publish-modal__card-header">
|
||
<div class="publish-modal__card-identity">
|
||
<span class="publish-modal__avatar" :style="{ background: account.platformAccent }">
|
||
<img v-if="account.avatarUrl" :src="account.avatarUrl" :alt="account.displayName" referrerpolicy="no-referrer" />
|
||
<span v-else>{{ accountInitial(account) }}</span>
|
||
</span>
|
||
<div class="publish-modal__identity-copy">
|
||
<strong :title="account.displayName">{{ account.displayName }}</strong>
|
||
<span class="publish-modal__platform-line" :title="`${account.platformName} · ${account.platformUid}`">
|
||
<img
|
||
v-if="account.platformLogoUrl"
|
||
class="publish-modal__platform-logo"
|
||
:src="account.platformLogoUrl"
|
||
:alt="account.platformName"
|
||
referrerpolicy="no-referrer"
|
||
/>
|
||
<span
|
||
v-else
|
||
class="publish-modal__platform-logo publish-modal__platform-logo--fallback"
|
||
:style="{ background: account.platformAccent }"
|
||
>{{ account.platformShortName }}</span>
|
||
<span class="publish-modal__platform-text">{{ account.platformName }} · {{ account.platformUid }}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span class="publish-modal__check">
|
||
<span v-if="isSelected(account.id)" class="publish-modal__check-inner"></span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="publish-modal__card-footer">
|
||
<div class="publish-modal__tags">
|
||
<a-tag :color="healthColor(account.health)">{{ healthLabel(account.health) }}</a-tag>
|
||
<a-tag :color="clientStatusColor(account)">{{ clientStatusLabel(account) }}</a-tag>
|
||
</div>
|
||
|
||
<a-tooltip :title="account.statusText" placement="top">
|
||
<span class="publish-modal__state-pill" :class="`publish-modal__state-pill--${account.publishState}`">
|
||
{{ publishStateLabel(account.publishState) }}
|
||
</span>
|
||
</a-tooltip>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<a-empty v-else description="当前还没有可用的桌面媒体账号，请先在桌面端绑定。" />
|
||
</section>
|
||
|
||
<section class="publish-modal__section">
|
||
<div class="publish-modal__section-header publish-modal__section-header--inline">
|
||
<h3>封面图</h3>
|
||
<a-switch :checked="effectiveCoverEnabled" :disabled="coverRequired" @change="handleCoverToggle" />
|
||
</div>
|
||
<p class="muted">
|
||
{{ coverRequired ? t("media.publish.messages.coverRequired") : "默认关闭。需要时可在这里单独指定发布封面，并先写回文章。" }}
|
||
</p>
|
||
|
||
<div v-if="effectiveCoverEnabled" class="publish-modal__cover-body">
|
||
<div class="publish-modal__cover-preview-wrap">
|
||
<button type="button" class="publish-modal__cover-preview" @click="coverPickerOpen = true">
|
||
<template v-if="coverAssetUrl">
|
||
<img :src="coverAssetUrl" alt="cover preview" />
|
||
</template>
|
||
<template v-else>
|
||
<span class="publish-modal__cover-plus">+</span>
|
||
<span>{{ t("media.publish.coverUpload") }}</span>
|
||
</template>
|
||
</button>
|
||
|
||
<button
|
||
v-if="coverAssetUrl"
|
||
type="button"
|
||
class="publish-modal__cover-remove"
|
||
:aria-label="t('article.editor.coverRemove')"
|
||
:title="t('article.editor.coverRemove')"
|
||
@click.stop="handleRemoveCover"
|
||
>
|
||
<MinusCircleFilled />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</a-modal>
|
||
|
||
<CoverPickerModal
|
||
v-model:open="coverPickerOpen"
|
||
:article-id="detailQuery.data.value?.id ?? null"
|
||
:platform-ids="selectedPlatformIds"
|
||
:current-url="coverAssetUrl"
|
||
:current-file-name="coverFileName"
|
||
:current-asset-id="coverImageAssetId"
|
||
@confirmed="handleCoverPicked"
|
||
/>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.publish-modal {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.publish-modal__hero {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 24px;
|
||
padding: 24px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
background: #ffffff;
|
||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
|
||
}
|
||
|
||
.publish-modal__eyebrow {
|
||
display: inline-block;
|
||
margin-bottom: 12px;
|
||
padding: 4px 10px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #4f46e5;
|
||
background: #e0e7ff;
|
||
border-radius: 6px;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.publish-modal__hero h3 {
|
||
margin: 0;
|
||
color: #111827;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.publish-modal__hero p {
|
||
margin: 8px 0 0;
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.publish-modal__hero-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(96px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.publish-modal__metric {
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #f9fafb;
|
||
border: 1px solid #f3f4f6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.publish-modal__metric strong {
|
||
display: block;
|
||
color: #111827;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
|
||
.publish-modal__metric span {
|
||
display: block;
|
||
margin-top: 6px;
|
||
color: #6b7280;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.publish-modal__section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.publish-modal__section-header {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.publish-modal__section-header--inline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.publish-modal__section-header h3 {
|
||
margin: 0 0 6px;
|
||
color: #1f2937;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.publish-modal__section-header--inline h3 {
|
||
margin: 0;
|
||
}
|
||
|
||
.required-star {
|
||
color: #ef4444;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.muted {
|
||
margin: 0;
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.publish-modal__loading {
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.publish-modal__list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
||
gap: 16px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
padding-right: 6px;
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
/* Custom scrollbar for list */
|
||
.publish-modal__list::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.publish-modal__list::-webkit-scrollbar-thumb {
|
||
background: #d1d5db;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.publish-modal__card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
width: 100%;
|
||
padding: 16px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
background: #ffffff;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
||
}
|
||
|
||
.publish-modal__card:hover:not(.publish-modal__card--disabled) {
|
||
border-color: #d1d5db;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.publish-modal__card--active {
|
||
border-color: #3b82f6;
|
||
background: #eff6ff;
|
||
box-shadow: 0 0 0 1px #3b82f6;
|
||
}
|
||
|
||
.publish-modal__card--active:hover:not(.publish-modal__card--disabled) {
|
||
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.15), 0 0 0 1px #3b82f6;
|
||
}
|
||
|
||
.publish-modal__card--disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.6;
|
||
background: #f9fafb;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.publish-modal__card-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.publish-modal__card-identity {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.publish-modal__card-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 12px;
|
||
border-top: 1px dashed #e5e7eb;
|
||
gap: 8px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.publish-modal__card--active .publish-modal__card-footer {
|
||
border-top-color: #bfdbfe;
|
||
}
|
||
|
||
.publish-modal__check {
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 4px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
flex-shrink: 0;
|
||
transition: all 0.2s;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.publish-modal__card--active .publish-modal__check {
|
||
background: #3b82f6;
|
||
border-color: #3b82f6;
|
||
}
|
||
|
||
.publish-modal__check-inner {
|
||
width: 6px;
|
||
height: 10px;
|
||
border-right: 2px solid #fff;
|
||
border-bottom: 2px solid #fff;
|
||
transform: rotate(45deg) translate(-1px, -2px);
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.publish-modal__card--active .publish-modal__check-inner {
|
||
opacity: 1;
|
||
}
|
||
|
||
.publish-modal__avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.publish-modal__avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.publish-modal__identity-copy {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
.publish-modal__identity-copy strong {
|
||
color: #111827;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.publish-modal__identity-copy span {
|
||
margin-top: 2px;
|
||
color: #6b7280;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.publish-modal__platform-line {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.publish-modal__platform-logo {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 3px;
|
||
object-fit: contain;
|
||
flex-shrink: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
.publish-modal__platform-logo--fallback {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.publish-modal__platform-text {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.publish-modal__state-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 72px;
|
||
height: 24px;
|
||
padding: 0 10px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.publish-modal__state-pill--immediate {
|
||
background: #ecfdf5;
|
||
color: #059669;
|
||
border: 1px solid #a7f3d0;
|
||
}
|
||
|
||
.publish-modal__state-pill--queued {
|
||
background: #fffbeb;
|
||
color: #d97706;
|
||
border: 1px solid #fde68a;
|
||
}
|
||
|
||
.publish-modal__state-pill--unavailable {
|
||
background: #fef2f2;
|
||
color: #dc2626;
|
||
border: 1px solid #fecaca;
|
||
}
|
||
|
||
.publish-modal__tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.publish-modal__tags .ant-tag {
|
||
margin: 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.publish-modal__cover-body {
|
||
display: flex;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.publish-modal__cover-preview-wrap {
|
||
position: relative;
|
||
width: 176px;
|
||
flex: 0 0 176px;
|
||
}
|
||
|
||
.publish-modal__cover-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
min-height: 124px;
|
||
padding: 0;
|
||
border: 1px dashed #d1d5db;
|
||
border-radius: 8px;
|
||
background: #f9fafb;
|
||
color: #6b7280;
|
||
font-size: 13px;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.publish-modal__cover-preview:hover {
|
||
border-color: #6366f1;
|
||
color: #6366f1;
|
||
background: #f5f3ff;
|
||
}
|
||
|
||
.publish-modal__cover-preview img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 124px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.publish-modal__cover-plus {
|
||
font-size: 20px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.publish-modal__cover-remove {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
width: 28px;
|
||
height: 28px;
|
||
border: none;
|
||
border-radius: 999px;
|
||
background: rgba(17, 24, 39, 0.7);
|
||
color: #fff;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.publish-modal__cover-remove:hover {
|
||
background: rgba(17, 24, 39, 0.9);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.publish-modal__hero {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.publish-modal__hero-metrics {
|
||
min-width: 0;
|
||
}
|
||
}
|
||
</style>
|