feat: enhance post management

src/components/CodemirrorEditor/EditorHeader/PostInfo.vue

@@ -5,7 +5,7 @@ import { Check, Info } from 'lucide-vue-next'
 import { CheckboxIndicator, CheckboxRoot, Primitive } from 'radix-vue'
 
 const store = useStore()
-const { output } = storeToRefs(store)
+const { output, editor } = storeToRefs(store)
 
 const dialogVisible = ref(false)
 const extensionInstalled = ref(false)
@@ -17,6 +17,7 @@ const form = ref<Post>({
   desc: ``,
   thumb: ``,
   content: ``,
+  markdown: ``,
   accounts: [] as PostAccount[],
 })
 
@@ -28,6 +29,7 @@ async function prePost() {
     title: ``,
     desc: ``,
     content: ``,
+    markdown: ``,
     accounts: [],
   }
   try {
@@ -39,6 +41,7 @@ async function prePost() {
         .textContent ?? ``,
       desc: document.querySelector(`#output p`)!.textContent ?? ``,
       content: output.value,
+      markdown: editor.value?.getValue() ?? ``,
       accounts: allAccounts.value,
     }
   }
@@ -121,7 +124,7 @@ onBeforeMount(() => {
         <Info class="h-4 w-4" />
         <AlertTitle>提示</AlertTitle>
         <AlertDescription>
-          此功能由第三方浏览器插件支持，本平台不保证安全性。
+          此功能由第三方浏览器插件支持，本平台不保证安全性及同步准确度。
         </AlertDescription>
       </Alert>
 
@@ -198,5 +201,5 @@ onBeforeMount(() => {
     </DialogContent>
   </Dialog>
 
-  <PostTaskDialog :open="postTaskDialogVisible" :post="form" />
+  <PostTaskDialog v-model:open="postTaskDialogVisible" :post="form" />
 </template>

src/components/CodemirrorEditor/EditorHeader/PostTaskDialog.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { Post } from '@/types'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+
+const props = defineProps<{
+  post: Post
+  open: boolean
+}>()
+
+const emit = defineEmits([`update:open`])
+
+const dialogVisible = computed({
+  get: () => props.open,
+  set: value => emit(`update:open`, value),
+})
+
+const taskStatus = ref<any>(null)
+const submitting = ref(false)
+
+async function startPost() {
+  if (!props.post)
+    return
+
+  try {
+    window.$syncer?.addTask(
+      {
+        post: {
+          title: props.post.title,
+          content: props.post.content,
+          markdown: props.post.markdown,
+          thumb: props.post.thumb,
+          desc: props.post.desc,
+        },
+        accounts: props.post.accounts.filter(a => a.checked),
+      },
+      (newStatus: any) => {
+        taskStatus.value = newStatus
+      },
+      () => {
+        submitting.value = false
+      },
+    )
+  }
+  catch (error) {
+    console.error(`发布失败:`, error)
+  }
+}
+
+watch(() => props.open, (newVal) => {
+  if (newVal) {
+    startPost()
+  }
+})
+</script>
+
+<template>
+  <Dialog v-model:open="dialogVisible">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>提交发布任务</DialogTitle>
+      </DialogHeader>
+
+      <div class="mt-4">
+        <div v-if="!taskStatus" class="py-4 text-center">
+          等待发布..
+        </div>
+        <div v-else class="max-h-[400px] flex flex-col overflow-y-auto">
+          <div
+            v-for="account in taskStatus?.accounts"
+            :key="account.uid + account.displayName"
+            class="border-b py-4 last:border-b-0"
+          >
+            <div class="mb-2 flex items-center gap-2">
+              <img
+                v-if="account.icon"
+                :src="account.icon"
+                class="object-cover h-5 w-5"
+                alt=""
+              >
+              <span>{{ account.title }} - {{ account.displayName || account.home }}</span>
+            </div>
+            <div
+              class="w-full flex-1 gap-2 overflow-auto pl-7 text-sm" :class="{
+                'text-yellow-600': account.status === 'uploading',
+                'text-red-600': account.status === 'failed',
+                'text-green-600': account.status === 'done',
+              }"
+            >
+              <template v-if="account.status === 'uploading'">
+                {{ account.msg || '发布中' }}
+              </template>
+
+              <template v-if="account.status === 'failed'">
+                同步失败, 错误内容：{{ account.error }}
+              </template>
+
+              <template v-if="account.status === 'done' && account.editResp">
+                同步成功
+                <a
+                  v-if="account.type !== 'wordpress' && account.editResp"
+                  :href="account.editResp.draftLink"
+                  class="ml-2 text-blue-500 hover:underline"
+                  referrerPolicy="no-referrer"
+                  target="_blank"
+                >查看草稿</a>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<style scoped>
+.account-item {
+  margin-bottom: 1rem;
+}
+</style>

src/types/index.ts

@@ -83,12 +83,15 @@ export interface PostAccount {
   type: string
   uid: string
   checked: boolean
+  status?: string
+  error?: string
 }
 
 export interface Post {
   title: string
   desc: string
   thumb: string
   content: string
+  markdown: string
   accounts: PostAccount[]
 }