feat: implement browser extension for media publishing and add backend support for media management

apps/admin-web/src/views/ArticleEditorView.vue

@@ -8,6 +8,7 @@ import { useRoute, useRouter } from "vue-router";
 import { MilkdownProvider } from "@milkdown/vue";
 
 import ArticleEditorCanvas from "@/components/ArticleEditorCanvas.vue";
+import PublishArticleModal from "@/components/PublishArticleModal.vue";
 import PublishPlatformSelector from "@/components/PublishPlatformSelector.vue";
 import { articlesApi } from "@/lib/api";
 import { formatError } from "@/lib/errors";
@@ -29,6 +30,7 @@ const initialPublishPlatforms = ref<string[]>([]);
 const coverEnabled = ref(true);
 const coverPreviewUrl = ref("");
 const leaveModalOpen = ref(false);
+const publishModalOpen = ref(false);
 
 const detailQuery = useQuery({
   queryKey: computed(() => ["articles", "detail", articleId.value]),
@@ -133,7 +135,15 @@ async function handlePublish(): Promise<void> {
     }
   }
 
-  message.warning(t("article.editor.messages.publishPending"));
+  publishModalOpen.value = true;
+}
+
+async function handlePublished(): Promise<void> {
+  await Promise.all([
+    detailQuery.refetch(),
+    queryClient.invalidateQueries({ queryKey: ["articles"] }),
+    queryClient.invalidateQueries({ queryKey: ["workspace"] }),
+  ]);
 }
 
 function handleBack(): void {
@@ -342,6 +352,12 @@ function serializePlatformSelection(platformIds: string[]): string {
         </a-button>
       </template>
     </a-modal>
+
+    <PublishArticleModal
+      v-model:open="publishModalOpen"
+      :article-id="detail?.id ?? null"
+      @published="handlePublished"
+    />
   </div>
 </template>