From b5c13d5f24a1feaf471945b26eadb37419b59696 Mon Sep 17 00:00:00 2001
From: wx <2636507191@qq.com>
Date: Mon, 4 May 2026 14:19:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(blog):=20=E5=90=8E=E5=8F=B0=E5=8D=9A?=
 =?UTF-8?q?=E5=AE=A2=E5=9B=BE=E7=89=87=E6=94=AF=E6=8C=81=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=20+=20=E5=B0=81=E9=9D=A2=E5=9B=BE=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E9=94=99=E8=AF=AF=E4=BF=A1=E6=81=AF=E6=9A=B4=E9=9C=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

正文编辑器:
- 新增"图片"按钮: 点击弹文件选择 -> 调 /api/admin/upload -> 自动插入 <img src=/uploads/...>
- 保留"图片URL"按钮兼容外链/已有路径(原来唯一的 prompt 路径)
- 上传中按钮 disabled, 失败用 naive-ui message 提示

封面图 ImageUpload:
- 改用 useAdmin().adminFetch 替代裸 \$fetch + useState 取 token 的双轨写法
- 错误信息从单一字符串"上传失败"改为 e.data?.message || e.message || HTTP statusCode, 让线上"上传失败"自暴露真实根因

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/admin/ImageUpload.vue    |  6 ++---
 components/admin/RichTextEditor.vue | 41 ++++++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/components/admin/ImageUpload.vue b/components/admin/ImageUpload.vue
index 33902f2..1a51546 100644
--- a/components/admin/ImageUpload.vue
+++ b/components/admin/ImageUpload.vue
@@ -90,11 +90,9 @@ async function uploadFile(file) {
     const formData = new FormData()
     formData.append('file', file)
 
-    const token = useState('admin_token')
-    const result = await $fetch('/api/admin/upload', {
+    const result = await adminFetch('/api/admin/upload', {
       method: 'POST',
       body: formData,
-      headers: { Authorization: `Bearer ${token.value}` },
     })
 
     if (result.files?.length) {
@@ -102,7 +100,7 @@ async function uploadFile(file) {
       imgError.value = false
     }
   } catch (e) {
-    uploadError.value = e.data?.message || '上传失败'
+    uploadError.value = e?.data?.message || e?.message || `上传失败 (HTTP ${e?.statusCode ?? '?'})`
   } finally {
     uploading.value = false
   }
diff --git a/components/admin/RichTextEditor.vue b/components/admin/RichTextEditor.vue
index 6ec23e5..a237a57 100644
--- a/components/admin/RichTextEditor.vue
+++ b/components/admin/RichTextEditor.vue
@@ -14,7 +14,8 @@
       <button type="button" :class="btn(editor.isActive('blockquote'))" @click="editor.chain().focus().toggleBlockquote().run()" title="引用">" 引用</button>
       <span class="divider" />
       <button type="button" :class="btn(editor.isActive('link'))" @click="setLink" title="链接">🔗 链接</button>
-      <button type="button" class="toolbar-btn" @click="addImage" title="插入图片">🖼 图片</button>
+      <button type="button" class="toolbar-btn" :disabled="uploading" @click="addImage" :title="uploading ? '上传中...' : '插入图片'">🖼 {{ uploading ? '上传中' : '图片' }}</button>
+      <button type="button" class="toolbar-btn" @click="addImageByUrl" title="插入网络图片URL">🌐 图片URL</button>
       <span class="divider" />
       <button type="button" class="toolbar-btn" @click="editor.chain().focus().undo().run()" title="撤销">↶</button>
       <button type="button" class="toolbar-btn" @click="editor.chain().focus().redo().run()" title="重做">↷</button>
@@ -22,6 +23,8 @@
       <button type="button" class="toolbar-btn" :class="{ active: showHtml }" @click="showHtml = !showHtml" title="源代码视图">&lt;/&gt; HTML</button>
     </div>
 
+    <input ref="fileInput" type="file" accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml" style="display: none" @change="handleFileChange" />
+
     <EditorContent v-show="!showHtml" :editor="editor" class="rich-editor-body" />
     <textarea
       v-show="showHtml"
@@ -39,6 +42,7 @@ import StarterKit from '@tiptap/starter-kit'
 import Link from '@tiptap/extension-link'
 import Image from '@tiptap/extension-image'
 import { watch, ref, onBeforeUnmount } from 'vue'
+import { useMessage } from 'naive-ui'
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
@@ -47,6 +51,10 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const showHtml = ref(false)
+const fileInput = ref(null)
+const uploading = ref(false)
+const message = useMessage()
+const { adminFetch } = useAdmin()
 
 const editor = useEditor({
   content: props.modelValue,
@@ -79,8 +87,35 @@ function setLink() {
 }
 
 function addImage() {
-  const url = window.prompt('图片 URL（可填 /uploads/ 或 /images/ 路径）')
-  if (url) editor.value.chain().focus().setImage({ src: url }).run()
+  if (uploading.value) return
+  fileInput.value?.click()
+}
+
+function addImageByUrl() {
+  const url = window.prompt('图片 URL（可填 /uploads/ 或 /images/ 路径，或外部 https:// 链接）')
+  if (url) editor.value.chain().focus().setImage({ src: url.trim() }).run()
+}
+
+async function handleFileChange(e) {
+  const file = e.target.files?.[0]
+  e.target.value = ''
+  if (!file) return
+  if (file.size > 10 * 1024 * 1024) { message.error('文件过大，最大 10MB'); return }
+
+  uploading.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    const result = await adminFetch('/api/admin/upload', { method: 'POST', body: formData })
+    const url = result?.files?.[0]?.url
+    if (!url) throw new Error('上传响应缺少 url 字段')
+    editor.value.chain().focus().setImage({ src: url }).run()
+    message.success('图片已插入')
+  } catch (err) {
+    message.error(err?.data?.message || err?.message || `上传失败 (HTTP ${err?.statusCode ?? '?'})`)
+  } finally {
+    uploading.value = false
+  }
 }
 </script>