From a736890ab861701d0825e2f3745ac8619a736c2e Mon Sep 17 00:00:00 2001
From: simonzhangs <2863389578@qq.com>
Date: Sat, 27 Sep 2025 22:36:12 +0800
Subject: [PATCH 1/3] feat: support publish articles to wxmp draft

---
 .../src/components/editor/UploadImgDialog.vue |   9 +
 .../editor/editor-header/WeChatPublish.vue    | 460 ++++++++++++++++++
 .../components/editor/editor-header/index.vue |   3 +
 apps/web/src/utils/file.ts                    |   5 +-
 apps/web/src/utils/index.ts                   |   2 +
 apps/web/src/utils/wechat-publish.ts          | 109 +++++
 apps/web/vite.config.ts                       |  11 +
 7 files changed, 597 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/editor/editor-header/WeChatPublish.vue
 create mode 100644 apps/web/src/utils/wechat-publish.ts

diff --git a/apps/web/src/components/editor/UploadImgDialog.vue b/apps/web/src/components/editor/UploadImgDialog.vue
index 77178ede9..a5875592d 100644
--- a/apps/web/src/components/editor/UploadImgDialog.vue
+++ b/apps/web/src/components/editor/UploadImgDialog.vue
@@ -352,6 +352,15 @@ onBeforeMount(() => {
   }
 })
 
+// 当弹窗打开，且 imgHost 设为 mp 时，默认切换到公众号图床 Tab
+watch(() => displayStore.isShowUploadImgDialog, (open) => {
+  if (open) {
+    const host = localStorage.getItem(`imgHost`) || imgHost.value
+    if (host === `mp`)
+      activeName.value = `mp`
+  }
+}, { immediate: false })
+
 function changeImgHost() {
   localStorage.setItem(`imgHost`, imgHost.value)
   toast.success(`图床已切换`)
diff --git a/apps/web/src/components/editor/editor-header/WeChatPublish.vue b/apps/web/src/components/editor/editor-header/WeChatPublish.vue
new file mode 100644
index 000000000..db880edc7
--- /dev/null
+++ b/apps/web/src/components/editor/editor-header/WeChatPublish.vue
@@ -0,0 +1,460 @@
+<script setup lang="ts">
+import { Check, ExternalLink, Info, Loader2 } from 'lucide-vue-next'
+import { useDisplayStore, useStore } from '@/stores'
+import { processClipboardContent } from '@/utils'
+import { toast } from '@/utils/toast'
+import { addMpArticleDraft, getMpCoverMediaId } from '@/utils/wechat-publish'
+
+const store = useStore()
+const { output, primaryColor } = storeToRefs(store)
+const displayStore = useDisplayStore()
+
+const wechatForm = ref({
+  title: ``,
+  author: ``,
+  digest: ``,
+  contentSourceUrl: ``,
+  // 封面图链接（用户可见/可输入）
+  coverUrl: ``,
+  // 内部使用的微信素材ID
+  thumbMediaId: ``,
+  needOpenComment: 1,
+  onlyFansCanComment: 0,
+})
+
+const wechatPublishing = ref(false)
+const wechatConfigDialogVisible = ref(false)
+const wechatSuccessDialogVisible = ref(false)
+
+const disabledBtn = computed(() => {
+  const content = output.value || ``
+  return wechatPublishing.value || content.trim() === ``
+})
+
+const uploadingThumb = ref(false)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+let coverUrlDebounceTimer: number | undefined
+
+function extractTitleAndDesc() {
+  try {
+    // 优先从当前选中文章的标题中提取
+    const currentPostTitleEl = document.querySelector(`a.bg-primary.text-primary-foreground.shadow span.line-clamp-1`) as HTMLElement | null
+    let derivedTitle = currentPostTitleEl?.textContent?.trim() || ``
+
+    // 如果没找到当前文章标题，再从 #output 的 h1-h6 中提取
+    if (!derivedTitle) {
+      const headingLevels = [1, 2, 3, 4, 5, 6]
+      const headingElements = headingLevels.map((level) => {
+        return document.querySelector(`#output h${level}`) as HTMLElement | null
+      })
+      const firstHeading = headingElements.find(el => el)
+      derivedTitle = (firstHeading?.textContent || ``).trim()
+    }
+
+    const firstParagraph = document.querySelector(`#output p`) as HTMLElement | null
+    const derivedDesc = (firstParagraph?.textContent || ``).trim()
+    const firstImg = document.querySelector(`#output img`) as HTMLImageElement | null
+    const derivedCover = firstImg?.src || ``
+
+    wechatForm.value.title = derivedTitle
+    wechatForm.value.digest = derivedDesc
+    wechatForm.value.coverUrl = derivedCover
+  }
+  catch (e) {
+    console.warn(`extractTitleAndDesc error`, e)
+  }
+}
+
+watch(
+  () => output.value,
+  () => {
+    // 当内容变化时，若未手填摘要，则尝试重新生成摘要
+    if (!wechatForm.value.digest) {
+      extractTitleAndDesc()
+    }
+  },
+  { immediate: false },
+)
+
+// 封面链接变化时，清空已得的 media_id，等待重新上传
+watch(
+  () => wechatForm.value.coverUrl,
+  (val) => {
+    wechatForm.value.thumbMediaId = ``
+    const url = (val || ``).trim()
+    if (!url)
+      return
+    if (uploadingThumb.value)
+      return
+    if (coverUrlDebounceTimer)
+      clearTimeout(coverUrlDebounceTimer)
+    coverUrlDebounceTimer = window.setTimeout(() => {
+      // 若期间用户又清空了，跳过
+      if (!wechatForm.value.coverUrl?.trim())
+        return
+      uploadThumbIfNeeded().catch(() => {})
+    }, 600)
+  },
+)
+
+function openWechatConfig() {
+  const content = output.value || ``
+  if (content.trim() === ``) {
+    toast.error(`请先填写内容`)
+    return
+  }
+  // 打开弹窗后提示是否缺少配置
+  extractTitleAndDesc()
+  // 预取并上传封面图，获取 thumb_media_id
+  uploadThumbIfNeeded().catch((err) => {
+    console.warn(`uploadThumbIfNeeded error`, err)
+  })
+  wechatConfigDialogVisible.value = true
+}
+
+const mpConfigured = ref(true)
+function isMpConfigured(): boolean {
+  try {
+    const mpConfigStr = localStorage.getItem(`mpConfig`)
+    const cfg = mpConfigStr ? JSON.parse(mpConfigStr) : null
+    return Boolean(cfg?.appID && cfg?.appsecret)
+  }
+  catch {
+    return false
+  }
+}
+function openMpConfigDialog() {
+  localStorage.setItem(`imgHost`, `mp`)
+  displayStore.toggleShowUploadImgDialog()
+}
+function recheckMpConfig() {
+  mpConfigured.value = isMpConfigured()
+  if (mpConfigured.value)
+    toast.success(`已检测到公众号图床配置`)
+  else
+    toast.error(`仍未检测到配置，请完成后再试`)
+}
+
+watch(wechatConfigDialogVisible, (open) => {
+  if (open) {
+    mpConfigured.value = isMpConfigured()
+    if (!mpConfigured.value)
+      toast.error(`未检测到公众号图床配置，请先完成配置`)
+  }
+})
+
+async function publishToWechat() {
+  wechatPublishing.value = true
+  try {
+    if (uploadingThumb.value) {
+      toast.error(`封面上传中，请稍后再试`)
+      return
+    }
+    if (!wechatForm.value.thumbMediaId) {
+      toast.error(`请先提供封面并上传到微信后台`)
+      return
+    }
+
+    /**
+     * 处理HTML内容中的img标签，将wsrv.nl代理链接替换为原始解码后的地址
+     * @param html 包含img标签的HTML字符串
+     * @returns 处理后的HTML字符串
+     */
+    function processImageSrc(html: string): string {
+    // 正则匹配img标签中的src属性，捕获url=后面的编码内容
+      const imgSrcRegex = /(<img[^>]*src=")https:\/\/wsrv\.nl\?url=([^"]*)("[^>]*>)/g
+
+      // 替换匹配的内容：解码url参数值并作为新的src
+      return html.replace(imgSrcRegex, (match, prefix, encodedUrl, suffix) => {
+        try {
+          // 解码URL中的特殊字符（如%3A->:，%2F->/）
+          const decodedUrl = decodeURIComponent(encodedUrl)
+          // 拼接成新的img标签
+          return `${prefix}${decodedUrl}${suffix}`
+        }
+        catch (e) {
+          console.error(`URL解码失败:`, e)
+          // 解码失败时保留原始内容
+          return match
+        }
+      })
+    }
+
+    const processedContent = await processClipboardContent(primaryColor.value)
+    const finalContent = processImageSrc(processedContent)
+
+    const draftContent = {
+      title: wechatForm.value.title,
+      author: wechatForm.value.author,
+      digest: wechatForm.value.digest,
+      content_source_url: wechatForm.value.contentSourceUrl || ``,
+      thumb_media_id: wechatForm.value.thumbMediaId || ``,
+      need_open_comment: wechatForm.value.needOpenComment,
+      only_fans_can_comment: wechatForm.value.onlyFansCanComment,
+      content: finalContent,
+    }
+
+    const result = await addMpArticleDraft(draftContent)
+    if (result.media_id) {
+      toast.success(`发布成功！`)
+      wechatConfigDialogVisible.value = false
+      wechatSuccessDialogVisible.value = true
+    }
+    else {
+      toast.error(`发布失败：${result.errmsg}`)
+    }
+  }
+  catch (error) {
+    console.error(`发布到微信公众号失败:`, error)
+    if (error instanceof Error) {
+      if (error.message.includes(`配置`))
+        toast.error(error.message)
+      else
+        toast.error(`发布失败：${error.message}`)
+    }
+    else {
+      toast.error(`发布失败，请检查网络连接`)
+    }
+  }
+  finally {
+    wechatPublishing.value = false
+  }
+}
+
+// 从 #output 提取第一张图片并上传到公众号，返回 media_id
+async function uploadThumbIfNeeded(): Promise<string | undefined> {
+  try {
+    if (wechatForm.value.thumbMediaId)
+      return wechatForm.value.thumbMediaId
+
+    const sourceUrl = (wechatForm.value.coverUrl || ``).trim()
+    const imgSrc = sourceUrl || (document.querySelector(`#output img`) as HTMLImageElement | null)?.src || ``
+    if (!imgSrc)
+      return
+
+    // 匹配图片链接，支持本地或者远程的图片格式
+    if (!imgSrc.match(/^https?:\/\//) && !imgSrc.match(/^blob:\//)) {
+      toast.error(`封面链接格式不正确，请输入正确的图片链接`)
+      return
+    }
+
+    uploadingThumb.value = true
+    const res = await fetch(imgSrc)
+    const blob = await res.blob()
+
+    // 使用原文件名或默认名
+    const urlObj = new URL(imgSrc, window.location.href)
+    const pathname = urlObj.pathname
+    const originalName = pathname.split(`/`).pop() || `cover.jpg`
+    const file = new File([blob], originalName, { type: blob.type || `image/jpeg` })
+
+    const { media_id, errmsg } = await getMpCoverMediaId(file)
+
+    if (media_id) {
+      wechatForm.value.thumbMediaId = media_id
+      return media_id as string
+    }
+
+    // 若失败，给出提示但不阻断发布（允许用户手动填）
+    if (errmsg)
+      toast.error(`封面上传失败：${errmsg}`)
+  }
+  catch (e: any) {
+    toast.error(`封面上传失败：${e?.message || e}`)
+  }
+  finally {
+    uploadingThumb.value = false
+  }
+}
+
+function pickLocalCoverImage() {
+  if (uploadingThumb.value)
+    return
+  fileInputRef.value?.click()
+}
+
+async function onLocalCoverFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (!input.files || !input.files.length)
+    return
+  const file = input.files[0]
+  try {
+    uploadingThumb.value = true
+    const previewUrl = URL.createObjectURL(file)
+    wechatForm.value.coverUrl = previewUrl
+
+    const json = await getMpCoverMediaId(file)
+
+    if (json.media_id) {
+      wechatForm.value.thumbMediaId = json.media_id
+      toast.success(`封面已上传微信后台`)
+    }
+    else if (json.errmsg) {
+      toast.error(`封面上传失败：${json.errmsg}`)
+    }
+  }
+  catch (e: any) {
+    toast.error(`封面上传失败：${e?.message || e}`)
+  }
+  finally {
+    uploadingThumb.value = false
+    // 重置 input 值以便可重复选择同一文件
+    if (input)
+      input.value = ``
+  }
+}
+</script>
+
+<template>
+  <div>
+    <Button
+      variant="outline"
+      :disabled="disabledBtn"
+      @click="openWechatConfig"
+    >
+      {{ wechatPublishing ? '发布中...' : '发布到公众号' }}
+    </Button>
+
+    <Dialog v-model:open="wechatConfigDialogVisible">
+      <DialogContent class="z-[200]">
+        <DialogHeader>
+          <DialogTitle>发布到微信公众号</DialogTitle>
+        </DialogHeader>
+
+        <Alert v-if="!mpConfigured">
+          <Info class="h-4 w-4" />
+          <AlertTitle>需要先配置公众号图床</AlertTitle>
+          <AlertDescription>
+            请先完成 appID 与 appsecret 的配置。
+            <div class="mt-2 flex items-center gap-2">
+              <Button size="sm" variant="outline" @click="openMpConfigDialog">
+                打开配置
+              </Button>
+              <Button size="sm" variant="ghost" @click="recheckMpConfig">
+                我已配置，重新检测
+              </Button>
+            </div>
+          </AlertDescription>
+        </Alert>
+
+        <div class="w-full flex items-center gap-4">
+          <Label for="wechat-title" class="w-16 text-end">
+            标题
+          </Label>
+          <Input id="wechat-title" v-model="wechatForm.title" placeholder="文章标题" />
+        </div>
+
+        <div class="w-full flex items-center gap-4">
+          <Label for="wechat-author" class="w-16 text-end">
+            作者
+          </Label>
+          <Input id="wechat-author" v-model="wechatForm.author" placeholder="作者名称" />
+        </div>
+
+        <div class="w-full flex items-start gap-4">
+          <Label for="wechat-digest" class="w-16 text-end">
+            摘要
+          </Label>
+          <Textarea id="wechat-digest" v-model="wechatForm.digest" placeholder="文章摘要内容" />
+        </div>
+
+        <div class="w-full flex items-center gap-4">
+          <Label for="wechat-cover" class="w-16 text-end">
+            封面链接
+          </Label>
+          <div class="flex-1 flex items-center gap-2">
+            <Input
+              id="wechat-cover"
+              v-model="wechatForm.coverUrl"
+              :disabled="uploadingThumb"
+              placeholder="https://..."
+            />
+            <span class="text-sm text-muted-foreground select-none inline-flex items-center gap-1">
+              <Loader2 v-if="uploadingThumb" class="h-4 w-4 animate-spin" />
+              <Check v-else-if="wechatForm.thumbMediaId" class="h-4 w-4 text-green-500" />
+              <span class="text-xs">
+                {{ uploadingThumb ? '自动上传中…' : (wechatForm.thumbMediaId ? '已上传微信后台' : '将自动上传到微信后台') }}
+              </span>
+            </span>
+          </div>
+        </div>
+
+        <div v-if="!wechatForm.coverUrl" class="w-full flex items-center gap-4">
+          <div class="w-16 text-end" />
+          <div class="flex-1 flex items-center gap-2">
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept="image/*"
+              class="hidden"
+              @change="onLocalCoverFileChange"
+            >
+            <Button variant="outline" :disabled="uploadingThumb" @click="pickLocalCoverImage">
+              {{ uploadingThumb ? '上传中…' : '上传图片' }}
+            </Button>
+            <span class="text-xs text-muted-foreground">未提取到封面，请上传本地图片或在上方输入图片地址</span>
+          </div>
+        </div>
+
+        <div class="w-full flex items-center gap-4">
+          <Label for="wechat-url" class="w-18 text-end">
+            原文链接
+          </Label>
+          <Input id="wechat-url" v-model="wechatForm.contentSourceUrl" placeholder="" />
+        </div>
+
+        <div class="w-full flex items-center gap-4">
+          <Label class="w-16 text-end">
+            评论设置
+          </Label>
+          <div class="flex gap-4">
+            <label class="flex items-center gap-2">
+              <input v-model="wechatForm.needOpenComment" type="checkbox" :true-value="1" :false-value="0">
+              <span class="text-sm">开启评论</span>
+            </label>
+            <label class="flex items-center gap-2">
+              <input v-model="wechatForm.onlyFansCanComment" type="checkbox" :true-value="1" :false-value="0">
+              <span class="text-sm">仅粉丝可评论</span>
+            </label>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" @click="wechatConfigDialogVisible = false">
+            取 消
+          </Button>
+          <Button :disabled="wechatPublishing || !mpConfigured" @click="publishToWechat">
+            {{ wechatPublishing ? '发布中...' : '确 定' }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <Dialog v-model:open="wechatSuccessDialogVisible">
+      <DialogContent class="z-[1000]">
+        <DialogHeader>
+          <DialogTitle>发布成功</DialogTitle>
+        </DialogHeader>
+        <div class="space-y-4">
+          <div class="text-center">
+            <Check class="h-12 w-12 text-green-500 mx-auto mb-4" />
+            <p class="text-lg font-medium">
+              文章已成功发布到微信公众号
+            </p>
+            <p class="text-sm text-gray-600 mt-2">
+              <a
+                href="https://mp.weixin.qq.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors"
+              >
+                打开微信公众号管理后台
+                <ExternalLink class="h-4 w-4 opacity-90" />
+              </a>
+            </p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
diff --git a/apps/web/src/components/editor/editor-header/index.vue b/apps/web/src/components/editor/editor-header/index.vue
index dd7c48a9c..ed6cc113c 100644
--- a/apps/web/src/components/editor/editor-header/index.vue
+++ b/apps/web/src/components/editor/editor-header/index.vue
@@ -181,6 +181,9 @@ async function copy() {
       <!-- 文章信息（移动端隐藏） -->
       <PostInfo class="hidden md:inline-flex" />
 
+      <!-- 发布公众号后台（移动端隐藏） -->
+      <WeChatPublish class="hidden md:inline-flex" />
+
       <!-- 设置按钮 -->
       <Button
         variant="outline"
diff --git a/apps/web/src/utils/file.ts b/apps/web/src/utils/file.ts
index db89adfa7..4ff0bff3d 100644
--- a/apps/web/src/utils/file.ts
+++ b/apps/web/src/utils/file.ts
@@ -302,7 +302,7 @@ interface MpResponse {
   errcode: number
   errmsg: string
 }
-async function getMpToken(appID: string, appsecret: string, proxyOrigin: string) {
+export async function getMpToken(appID: string, appsecret: string, proxyOrigin: string) {
   const data = localStorage.getItem(`mpToken:${appID}`)
   if (data) {
     const token = JSON.parse(data)
@@ -319,7 +319,8 @@ async function getMpToken(appID: string, appsecret: string, proxyOrigin: string)
     },
   }
   let url = `https://api.weixin.qq.com/cgi-bin/stable_token`
-  if (proxyOrigin) {
+  // 兼容空字符串情况，本地代理时不需要传入域名
+  if (proxyOrigin !== null && proxyOrigin !== undefined) {
     url = `${proxyOrigin}/cgi-bin/stable_token`
   }
   const res = await fetch<any, MpResponse>(url, requestOptions)
diff --git a/apps/web/src/utils/index.ts b/apps/web/src/utils/index.ts
index a0475c133..3bab581ff 100644
--- a/apps/web/src/utils/index.ts
+++ b/apps/web/src/utils/index.ts
@@ -337,4 +337,6 @@ export async function processClipboardContent(primaryColor: string) {
       /<tspan([^>]*)>/g,
       `<tspan$1 style="fill: #333333 !important; color: #333333 !important; stroke: none !important;">`,
     )
+  // 新增返回值，公众号发布组件使用
+  return clipboardDiv.innerHTML
 }
diff --git a/apps/web/src/utils/wechat-publish.ts b/apps/web/src/utils/wechat-publish.ts
new file mode 100644
index 000000000..8063f5b4b
--- /dev/null
+++ b/apps/web/src/utils/wechat-publish.ts
@@ -0,0 +1,109 @@
+import { getMpToken } from '@/utils/file'
+
+const isCfPage = import.meta.env.CF_PAGES === `1`
+const isDev = import.meta.env.DEV
+export async function getMpAccessToken() {
+  let { appID, appsecret, proxyOrigin } = JSON.parse(
+    localStorage.getItem(`mpConfig`)!,
+  )
+  // 未填写代理域名且是cfpages环境
+  if (!proxyOrigin && isCfPage) {
+    proxyOrigin = window.location.origin
+  }
+  // 开发环境，走本地代理配置
+  if (isDev) {
+    proxyOrigin = ``
+  }
+  const access_token = await getMpToken(appID, appsecret, proxyOrigin)
+  return access_token
+}
+
+interface MpCoverMediaId {
+  url: string
+  media_id: string
+}
+export async function getMpCoverMediaId(file: File): Promise<{ url: string, media_id: string, errmsg?: string }> {
+  let { appID, appsecret, proxyOrigin } = JSON.parse(
+    localStorage.getItem(`mpConfig`)!,
+  )
+  // 未填写代理域名且是cfpages环境
+  if (!proxyOrigin && isCfPage) {
+    proxyOrigin = window.location.origin
+  }
+
+  // 开发环境，走本地代理配置
+  if (isDev) {
+    proxyOrigin = ``
+  }
+  const access_token = await getMpToken(appID, appsecret, proxyOrigin)
+
+  const formdata = new FormData()
+  formdata.append(`media`, file, file.name)
+
+  const requestOptions = {
+    method: `POST`,
+    body: formdata,
+  }
+
+  let url = `https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=${access_token}&type=image`
+  if (proxyOrigin !== null && proxyOrigin !== undefined) {
+    url = url.replace(`https://api.weixin.qq.com`, proxyOrigin)
+  }
+
+  const res = await (await fetch(url, requestOptions)).json() as MpCoverMediaId
+
+  if (!res.url || !res.media_id) {
+    throw new Error(`上传失败，未获取到URL`)
+  }
+
+  return res
+}
+
+interface MpArticleDraft {
+  title: string
+  author?: string
+  digest?: string
+  content_source_url?: string
+  thumb_media_id: string
+  content: string
+  need_open_comment?: number
+  only_fans_can_comment?: number
+}
+
+export async function addMpArticleDraft(params: MpArticleDraft) {
+  let { appID, appsecret, proxyOrigin } = JSON.parse(
+    localStorage.getItem(`mpConfig`)!,
+  )
+  // 未填写代理域名且是cfpages环境
+  if (!proxyOrigin && isCfPage) {
+    proxyOrigin = window.location.origin
+  }
+
+  // 开发环境，走本地代理配置
+  if (isDev) {
+    proxyOrigin = ``
+  }
+  const access_token = await getMpToken(appID, appsecret, proxyOrigin)
+
+  let url = `https://api.weixin.qq.com/cgi-bin/draft/add?access_token=${access_token}`
+  if (proxyOrigin !== null && proxyOrigin !== undefined) {
+    url = url.replace(`https://api.weixin.qq.com`, proxyOrigin)
+  }
+
+  const response = await fetch(url, {
+    method: `POST`,
+    headers: { 'Content-Type': `application/json` },
+    body: JSON.stringify({
+      articles: [
+        {
+          article_type: `news`,
+          ...params,
+        },
+      ],
+    }),
+  })
+
+  const result = await response.json()
+
+  return result
+}
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index ac61c5f19..ab87e2a4e 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -21,6 +21,17 @@ export default defineConfig(({ mode }) => {
     base,
     define: { process },
     envPrefix: [`VITE_`, `CF_`],
+    // Support local dev, resolve cross-origin issues
+    server: {
+      proxy: {
+        '/cgi-bin': {
+          target: `https://api.weixin.qq.com`,
+          changeOrigin: true,
+          secure: true,
+          rewrite: path => path.replace(/^\/cgi-bin/, `/cgi-bin`),
+        },
+      },
+    },
     plugins: [
       vue(),
       tailwindcss(),

From 1f8bc3b15b9da368c0e71b6dd82fc9623c4fd2d1 Mon Sep 17 00:00:00 2001
From: simonzhangs <2863389578@qq.com>
Date: Sat, 27 Sep 2025 23:36:35 +0800
Subject: [PATCH 2/3] fix: support chorme extension publish wxmp articles

---
 .../editor/editor-header/WeChatPublish.vue       | 16 ++++++++++++++--
 apps/web/src/utils/file.ts                       |  3 ++-
 apps/web/src/utils/wechat-publish.ts             |  4 ++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/editor/editor-header/WeChatPublish.vue b/apps/web/src/components/editor/editor-header/WeChatPublish.vue
index db880edc7..857dcb148 100644
--- a/apps/web/src/components/editor/editor-header/WeChatPublish.vue
+++ b/apps/web/src/components/editor/editor-header/WeChatPublish.vue
@@ -57,7 +57,8 @@ function extractTitleAndDesc() {
     const derivedCover = firstImg?.src || ``
 
     wechatForm.value.title = derivedTitle
-    wechatForm.value.digest = derivedDesc
+    // 限制摘要最多120个字符
+    wechatForm.value.digest = derivedDesc.length > 120 ? derivedDesc.substring(0, 120) : derivedDesc
     wechatForm.value.coverUrl = derivedCover
   }
   catch (e) {
@@ -355,7 +356,18 @@ async function onLocalCoverFileChange(event: Event) {
           <Label for="wechat-digest" class="w-16 text-end">
             摘要
           </Label>
-          <Textarea id="wechat-digest" v-model="wechatForm.digest" placeholder="文章摘要内容" />
+          <div class="flex-1">
+            <Textarea
+              id="wechat-digest"
+              v-model="wechatForm.digest"
+              placeholder="文章摘要内容"
+              :maxlength="120"
+              class="resize-none"
+            />
+            <div class="text-xs text-muted-foreground mt-1 text-right">
+              {{ wechatForm.digest.length }}/120
+            </div>
+          </div>
         </div>
 
         <div class="w-full flex items-center gap-4">
diff --git a/apps/web/src/utils/file.ts b/apps/web/src/utils/file.ts
index 4ff0bff3d..97021ebc7 100644
--- a/apps/web/src/utils/file.ts
+++ b/apps/web/src/utils/file.ts
@@ -320,7 +320,8 @@ export async function getMpToken(appID: string, appsecret: string, proxyOrigin:
   }
   let url = `https://api.weixin.qq.com/cgi-bin/stable_token`
   // 兼容空字符串情况，本地代理时不需要传入域名
-  if (proxyOrigin !== null && proxyOrigin !== undefined) {
+  // 兼容浏览器插件环境 proxyOrigin 为空情况
+  if (proxyOrigin !== null && proxyOrigin !== undefined && !(chrome.runtime)) {
     url = `${proxyOrigin}/cgi-bin/stable_token`
   }
   const res = await fetch<any, MpResponse>(url, requestOptions)
diff --git a/apps/web/src/utils/wechat-publish.ts b/apps/web/src/utils/wechat-publish.ts
index 8063f5b4b..f8862144c 100644
--- a/apps/web/src/utils/wechat-publish.ts
+++ b/apps/web/src/utils/wechat-publish.ts
@@ -46,7 +46,7 @@ export async function getMpCoverMediaId(file: File): Promise<{ url: string, medi
   }
 
   let url = `https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=${access_token}&type=image`
-  if (proxyOrigin !== null && proxyOrigin !== undefined) {
+  if (proxyOrigin !== null && proxyOrigin !== undefined && !(chrome.runtime)) {
     url = url.replace(`https://api.weixin.qq.com`, proxyOrigin)
   }
 
@@ -86,7 +86,7 @@ export async function addMpArticleDraft(params: MpArticleDraft) {
   const access_token = await getMpToken(appID, appsecret, proxyOrigin)
 
   let url = `https://api.weixin.qq.com/cgi-bin/draft/add?access_token=${access_token}`
-  if (proxyOrigin !== null && proxyOrigin !== undefined) {
+  if (proxyOrigin !== null && proxyOrigin !== undefined && !(chrome.runtime)) {
     url = url.replace(`https://api.weixin.qq.com`, proxyOrigin)
   }
 

From 0977bb903aa2680e67fe0e4e06e32725a68a0e95 Mon Sep 17 00:00:00 2001
From: simonzhangs <2863389578@qq.com>
Date: Mon, 29 Sep 2025 00:37:51 +0800
Subject: [PATCH 3/3] feat: support chorme extension publish wxmp articles

---
 .../editor/editor-header/WeChatPublish.vue    | 43 ++++++++++++-------
 apps/web/src/sidepanel.ts                     |  2 +-
 apps/web/src/utils/file.ts                    |  8 +++-
 apps/web/src/utils/wechat-publish.ts          |  5 ++-
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/editor/editor-header/WeChatPublish.vue b/apps/web/src/components/editor/editor-header/WeChatPublish.vue
index 857dcb148..d83c9524e 100644
--- a/apps/web/src/components/editor/editor-header/WeChatPublish.vue
+++ b/apps/web/src/components/editor/editor-header/WeChatPublish.vue
@@ -26,6 +26,9 @@ const wechatPublishing = ref(false)
 const wechatConfigDialogVisible = ref(false)
 const wechatSuccessDialogVisible = ref(false)
 
+const mpConfigured = ref(false)
+recheckMpConfig()
+
 const disabledBtn = computed(() => {
   const content = output.value || ``
   return wechatPublishing.value || content.trim() === ``
@@ -38,7 +41,7 @@ let coverUrlDebounceTimer: number | undefined
 function extractTitleAndDesc() {
   try {
     // 优先从当前选中文章的标题中提取
-    const currentPostTitleEl = document.querySelector(`a.bg-primary.text-primary-foreground.shadow span.line-clamp-1`) as HTMLElement | null
+    const currentPostTitleEl = document.querySelector(`a.bg-primary.text-primary-foreground.shadow-sm span.line-clamp-1`) as HTMLElement | null
     let derivedTitle = currentPostTitleEl?.textContent?.trim() || ``
 
     // 如果没找到当前文章标题，再从 #output 的 h1-h6 中提取
@@ -77,21 +80,26 @@ watch(
   { immediate: false },
 )
 
-// 封面链接变化时，清空已得的 media_id，等待重新上传
+// 观察 coverUrl 和 mpConfigured.value 为true时，触发上传
 watch(
-  () => wechatForm.value.coverUrl,
-  (val) => {
-    wechatForm.value.thumbMediaId = ``
-    const url = (val || ``).trim()
-    if (!url)
+  [() => wechatForm.value.coverUrl, () => mpConfigured.value],
+  ([coverUrl, configured], [prevCoverUrl]) => {
+    const url = (coverUrl || ``).trim()
+    if (!url || !configured)
       return
     if (uploadingThumb.value)
       return
+
+    // 如果封面链接发生变化，清空旧的 thumbMediaId
+    if (prevCoverUrl !== coverUrl) {
+      wechatForm.value.thumbMediaId = ``
+    }
+
     if (coverUrlDebounceTimer)
       clearTimeout(coverUrlDebounceTimer)
     coverUrlDebounceTimer = window.setTimeout(() => {
-      // 若期间用户又清空了，跳过
-      if (!wechatForm.value.coverUrl?.trim())
+      // 若期间用户又清空了或配置失效，跳过
+      if (!wechatForm.value.coverUrl?.trim() || !mpConfigured.value)
         return
       uploadThumbIfNeeded().catch(() => {})
     }, 600)
@@ -106,14 +114,15 @@ function openWechatConfig() {
   }
   // 打开弹窗后提示是否缺少配置
   extractTitleAndDesc()
-  // 预取并上传封面图，获取 thumb_media_id
-  uploadThumbIfNeeded().catch((err) => {
-    console.warn(`uploadThumbIfNeeded error`, err)
-  })
+  if (mpConfigured.value) {
+    // 预取并上传封面图，获取 thumb_media_id
+    uploadThumbIfNeeded().catch((err) => {
+      console.warn(`uploadThumbIfNeeded error`, err)
+    })
+  }
   wechatConfigDialogVisible.value = true
 }
 
-const mpConfigured = ref(true)
 function isMpConfigured(): boolean {
   try {
     const mpConfigStr = localStorage.getItem(`mpConfig`)
@@ -229,7 +238,7 @@ async function uploadThumbIfNeeded(): Promise<string | undefined> {
       return wechatForm.value.thumbMediaId
 
     const sourceUrl = (wechatForm.value.coverUrl || ``).trim()
-    const imgSrc = sourceUrl || (document.querySelector(`#output img`) as HTMLImageElement | null)?.src || ``
+    let imgSrc = sourceUrl || (document.querySelector(`#output img`) as HTMLImageElement | null)?.src || ``
     if (!imgSrc)
       return
 
@@ -240,6 +249,10 @@ async function uploadThumbIfNeeded(): Promise<string | undefined> {
     }
 
     uploadingThumb.value = true
+    // 兼容浏览器插件直接下载微信图片无法成功问题
+    if (imgSrc.startsWith(`http://mmbiz.qpic.cn`) || imgSrc.startsWith(`https://mmbiz.qpic.cn`)) {
+      imgSrc = `https://wsrv.nl?url=${encodeURIComponent(imgSrc)}`
+    }
     const res = await fetch(imgSrc)
     const blob = await res.blob()
 
diff --git a/apps/web/src/sidepanel.ts b/apps/web/src/sidepanel.ts
index d2e2d9a45..c233b39fb 100644
--- a/apps/web/src/sidepanel.ts
+++ b/apps/web/src/sidepanel.ts
@@ -14,7 +14,7 @@ declare namespace chrome {
   }
 }
 
-const isInExtension = typeof chrome !== `undefined` && chrome.runtime && chrome.runtime.id
+export const isInExtension = typeof chrome !== `undefined` && chrome.runtime && chrome.runtime.id
 
 async function getCurrentTab() {
   const queryOptions = { active: true, lastFocusedWindow: true }
diff --git a/apps/web/src/utils/file.ts b/apps/web/src/utils/file.ts
index 97021ebc7..c7a99ead5 100644
--- a/apps/web/src/utils/file.ts
+++ b/apps/web/src/utils/file.ts
@@ -11,6 +11,7 @@ import CryptoJS from 'crypto-js'
 import * as qiniu from 'qiniu-js'
 import OSS from 'tiny-oss'
 import { v4 as uuidv4 } from 'uuid'
+import { isInExtension } from '../sidepanel'
 
 function getConfig(useDefault: boolean, platform: string) {
   if (useDefault) {
@@ -321,7 +322,7 @@ export async function getMpToken(appID: string, appsecret: string, proxyOrigin:
   let url = `https://api.weixin.qq.com/cgi-bin/stable_token`
   // 兼容空字符串情况，本地代理时不需要传入域名
   // 兼容浏览器插件环境 proxyOrigin 为空情况
-  if (proxyOrigin !== null && proxyOrigin !== undefined && !(chrome.runtime)) {
+  if (proxyOrigin !== null && proxyOrigin !== undefined && !isInExtension) {
     url = `${proxyOrigin}/cgi-bin/stable_token`
   }
   const res = await fetch<any, MpResponse>(url, requestOptions)
@@ -337,6 +338,7 @@ export async function getMpToken(appID: string, appsecret: string, proxyOrigin:
 }
 // Cloudflare Pages 环境
 const isCfPage = import.meta.env.CF_PAGES === `1`
+const isDev = import.meta.env.DEV
 async function mpFileUpload(file: File) {
   let { appID, appsecret, proxyOrigin } = JSON.parse(
     localStorage.getItem(`mpConfig`)!,
@@ -364,6 +366,10 @@ async function mpFileUpload(file: File) {
   if (fileSizeInMB < 1 && (fileType === `image/jpeg` || fileType === `image/png`)) {
     url = `https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token=${access_token}`
   }
+  // 本地代理转发
+  if (isDev && !isInExtension) {
+    url = url.replace(`https://api.weixin.qq.com`, ``)
+  }
   if (proxyOrigin) {
     url = url.replace(`https://api.weixin.qq.com`, proxyOrigin)
   }
diff --git a/apps/web/src/utils/wechat-publish.ts b/apps/web/src/utils/wechat-publish.ts
index f8862144c..28a5185ea 100644
--- a/apps/web/src/utils/wechat-publish.ts
+++ b/apps/web/src/utils/wechat-publish.ts
@@ -1,4 +1,5 @@
 import { getMpToken } from '@/utils/file'
+import { isInExtension } from '../sidepanel'
 
 const isCfPage = import.meta.env.CF_PAGES === `1`
 const isDev = import.meta.env.DEV
@@ -46,7 +47,7 @@ export async function getMpCoverMediaId(file: File): Promise<{ url: string, medi
   }
 
   let url = `https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=${access_token}&type=image`
-  if (proxyOrigin !== null && proxyOrigin !== undefined && !(chrome.runtime)) {
+  if (proxyOrigin !== null && proxyOrigin !== undefined && !isInExtension) {
     url = url.replace(`https://api.weixin.qq.com`, proxyOrigin)
   }
 
@@ -86,7 +87,7 @@ export async function addMpArticleDraft(params: MpArticleDraft) {
   const access_token = await getMpToken(appID, appsecret, proxyOrigin)
 
   let url = `https://api.weixin.qq.com/cgi-bin/draft/add?access_token=${access_token}`
-  if (proxyOrigin !== null && proxyOrigin !== undefined && !(chrome.runtime)) {
+  if (proxyOrigin !== null && proxyOrigin !== undefined && !isInExtension) {
     url = url.replace(`https://api.weixin.qq.com`, proxyOrigin)
   }