feat: implement browser extension for media publishing and add backend support for media management
This commit is contained in:
@@ -0,0 +1,451 @@
|
||||
<script setup lang="ts">
|
||||
import { ReloadOutlined, SendOutlined } from "@ant-design/icons-vue";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import type { MediaPlatform, PlatformAccount, PublisherLocalPlatformState } from "@geo/shared-types";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import { articlesApi, getApiBaseURL, mediaApi } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import { publishWithPublisherPlugin } from "@/lib/publisher-plugin";
|
||||
import { loadPublisherRuntimeState } from "@/lib/publisher-runtime";
|
||||
|
||||
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<number[]>([]);
|
||||
const coverEnabled = ref(true);
|
||||
const coverAssetUrl = ref("");
|
||||
const runtimeLoading = ref(false);
|
||||
const pluginInstalled = ref(false);
|
||||
const pluginVersion = ref<string | undefined>();
|
||||
const pluginInstallationId = ref<number | null>(null);
|
||||
const localPlatforms = ref<PublisherLocalPlatformState[]>([]);
|
||||
|
||||
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: ["media", "platform-accounts", "publish-modal"],
|
||||
enabled: computed(() => props.open),
|
||||
queryFn: () => mediaApi.accounts(),
|
||||
});
|
||||
|
||||
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 = "";
|
||||
pluginInstallationId.value = null;
|
||||
localPlatforms.value = [];
|
||||
return;
|
||||
}
|
||||
await refreshRuntime();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const localPlatformMap = computed(() => {
|
||||
return new Map(localPlatforms.value.map((item) => [item.platform_id, item]));
|
||||
});
|
||||
|
||||
const accountCards = computed(() => {
|
||||
const accountMap = new Map((accountsQuery.data.value ?? []).map((account) => [account.platform_id, account]));
|
||||
|
||||
return (platformsQuery.data.value ?? []).map((platform) => {
|
||||
const account = accountMap.get(platform.platform_id) ?? null;
|
||||
const local = localPlatformMap.value.get(platform.platform_id);
|
||||
const localConnected = Boolean(local?.connected);
|
||||
const uidMatches = account
|
||||
? localConnected && (!local?.platform_uid || local.platform_uid === account.platform_uid)
|
||||
: false;
|
||||
const selectable = Boolean(account && account.status === "active" && uidMatches && pluginInstalled.value);
|
||||
|
||||
return {
|
||||
key: account?.id ?? platform.platform_id,
|
||||
accountId: account?.id ?? null,
|
||||
platformId: platform.platform_id,
|
||||
platformName: platform.name,
|
||||
platformCategory: platform.category,
|
||||
platformUid: account?.platform_uid ?? local?.platform_uid ?? "--",
|
||||
nickname: account?.nickname ?? local?.nickname ?? t("media.card.unbound"),
|
||||
status: account?.status ?? "unbound",
|
||||
local,
|
||||
selectable,
|
||||
statusText: resolveAccountStatusText(platform, account, local),
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const modalTitle = computed(() => detailQuery.data.value?.title || t("article.untitled"));
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
const batch = await articlesApi.publishBatch(props.articleId, {
|
||||
platform_account_ids: selectedAccountIds.value,
|
||||
plugin_installation_id: pluginInstallationId.value,
|
||||
publish_type: "publish",
|
||||
cover_asset_url: coverEnabled.value ? coverAssetUrl.value.trim() || null : null,
|
||||
});
|
||||
|
||||
return publishWithPublisherPlugin({
|
||||
article_id: detailQuery.data.value.id,
|
||||
title: detailQuery.data.value.title ?? t("article.untitled"),
|
||||
markdown_content: detailQuery.data.value.markdown_content ?? "",
|
||||
html_content: detailQuery.data.value.html_content ?? null,
|
||||
cover_asset_url: coverEnabled.value ? coverAssetUrl.value.trim() || null : null,
|
||||
callback_base_url: getApiBaseURL(),
|
||||
publish_type: "publish",
|
||||
tasks: batch.tasks,
|
||||
});
|
||||
},
|
||||
onSuccess: async (result) => {
|
||||
const successCount = result.results.filter((item) => item.success).length;
|
||||
const failedCount = result.results.length - successCount;
|
||||
if (failedCount === 0) {
|
||||
message.success(t("media.publish.messages.success", { count: successCount }));
|
||||
} else {
|
||||
message.warning(t("media.publish.messages.partial", { success: successCount, failed: failedCount }));
|
||||
}
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["media"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["articles", "detail", props.articleId] }),
|
||||
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(t("media.publish.messages.selectPlatform"));
|
||||
return;
|
||||
}
|
||||
message.error(formatError(error));
|
||||
},
|
||||
});
|
||||
|
||||
async function refreshRuntime(): Promise<void> {
|
||||
runtimeLoading.value = true;
|
||||
try {
|
||||
const runtime = await loadPublisherRuntimeState();
|
||||
pluginInstalled.value = runtime.ping.installed;
|
||||
pluginVersion.value = runtime.ping.version;
|
||||
pluginInstallationId.value = runtime.pluginInstallationId;
|
||||
localPlatforms.value = runtime.localPlatforms;
|
||||
} catch (error) {
|
||||
pluginInstalled.value = false;
|
||||
localPlatforms.value = [];
|
||||
message.error(formatError(error));
|
||||
} finally {
|
||||
runtimeLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAccount(accountId: number, 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: number): boolean {
|
||||
return selectedAccountIds.value.includes(accountId);
|
||||
}
|
||||
|
||||
function resolveAccountStatusText(
|
||||
platform: MediaPlatform,
|
||||
account: PlatformAccount | null,
|
||||
local?: PublisherLocalPlatformState,
|
||||
): string {
|
||||
if (!account) {
|
||||
return t("media.card.unboundHint", { platform: platform.name });
|
||||
}
|
||||
if (!pluginInstalled.value) {
|
||||
return t("media.plugin.notInstalled");
|
||||
}
|
||||
if (!local?.connected) {
|
||||
return t("media.account.localMissing");
|
||||
}
|
||||
if (local.platform_uid && local.platform_uid !== account.platform_uid) {
|
||||
return t("media.account.localMismatch");
|
||||
}
|
||||
return t("media.account.ready");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="t('media.publish.title')"
|
||||
width="920"
|
||||
:confirm-loading="publishMutation.isPending.value"
|
||||
@ok="publishMutation.mutate()"
|
||||
@cancel="emit('update:open', false)"
|
||||
>
|
||||
<div class="publish-modal">
|
||||
<section class="publish-modal__hero">
|
||||
<div>
|
||||
<p class="eyebrow">{{ t("media.publish.subtitle") }}</p>
|
||||
<h3>{{ modalTitle }}</h3>
|
||||
<p>{{ t("media.publish.description") }}</p>
|
||||
</div>
|
||||
<div class="publish-modal__hero-actions">
|
||||
<a-tag :color="pluginInstalled ? 'success' : 'error'">
|
||||
{{ pluginInstalled ? t("media.plugin.ready") : t("media.plugin.notInstalled") }}
|
||||
</a-tag>
|
||||
<a-button :loading="runtimeLoading" @click="refreshRuntime">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
{{ t("media.actions.redetect") }}
|
||||
</a-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a-alert
|
||||
v-if="!pluginInstalled"
|
||||
type="warning"
|
||||
show-icon
|
||||
:message="t('media.plugin.installTitle')"
|
||||
:description="t('media.plugin.installDesc')"
|
||||
/>
|
||||
|
||||
<section class="publish-modal__section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<h3>{{ t("media.publish.platformsTitle") }}</h3>
|
||||
<p class="muted">{{ t("media.publish.platformsHint") }}</p>
|
||||
</div>
|
||||
</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__grid">
|
||||
<button
|
||||
v-for="account in accountCards"
|
||||
:key="account.key"
|
||||
type="button"
|
||||
class="publish-modal__card"
|
||||
:class="{
|
||||
'publish-modal__card--active': account.accountId ? isSelected(account.accountId) : false,
|
||||
'publish-modal__card--disabled': !account.selectable,
|
||||
}"
|
||||
@click="account.accountId ? toggleAccount(account.accountId, account.selectable) : undefined"
|
||||
>
|
||||
<span class="publish-modal__check">
|
||||
<span
|
||||
v-if="account.accountId && isSelected(account.accountId)"
|
||||
class="publish-modal__check-dot"
|
||||
></span>
|
||||
</span>
|
||||
<span class="publish-modal__card-copy">
|
||||
<strong>{{ account.platformName }}</strong>
|
||||
<small>{{ account.nickname }} · ID: {{ account.platformUid }}</small>
|
||||
<small>{{ account.statusText }}</small>
|
||||
</span>
|
||||
<a-tag :color="account.selectable ? 'success' : account.accountId ? 'warning' : 'default'">
|
||||
{{ account.selectable ? t("media.account.selectable") : t("media.account.unavailable") }}
|
||||
</a-tag>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a-empty v-else :description="t('media.empty.accounts')" />
|
||||
</section>
|
||||
|
||||
<section class="publish-modal__section">
|
||||
<div class="publish-modal__cover">
|
||||
<div class="publish-modal__cover-head">
|
||||
<div>
|
||||
<h3>{{ t("media.publish.coverTitle") }}</h3>
|
||||
<p class="muted">{{ t("media.publish.coverHint") }}</p>
|
||||
</div>
|
||||
<a-switch v-model:checked="coverEnabled" />
|
||||
</div>
|
||||
|
||||
<a-input
|
||||
v-if="coverEnabled"
|
||||
v-model:value="coverAssetUrl"
|
||||
:placeholder="t('media.publish.coverPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.publish-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.publish-modal__hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 20px 22px;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #fbfdff 0%, #f4f9ff 100%);
|
||||
}
|
||||
|
||||
.publish-modal__hero h3,
|
||||
.publish-modal__section h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.publish-modal__hero p:last-child {
|
||||
margin: 8px 0 0;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.publish-modal__hero-actions {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.publish-modal__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.publish-modal__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.publish-modal__card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
border: 1px solid #dbe5f0;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.publish-modal__card:hover {
|
||||
border-color: #adc6ff;
|
||||
box-shadow: 0 16px 28px rgba(22, 119, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.publish-modal__card--active {
|
||||
border-color: #1677ff;
|
||||
background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
|
||||
}
|
||||
|
||||
.publish-modal__card--disabled {
|
||||
opacity: 0.72;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.publish-modal__check {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.publish-modal__check-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.publish-modal__card-copy {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.publish-modal__card-copy strong {
|
||||
font-size: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.publish-modal__card-copy small {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.publish-modal__cover {
|
||||
padding: 18px;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.publish-modal__cover-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.publish-modal__loading {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.publish-modal__hero {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.publish-modal__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user