优化页面、修复BUG

client/src/pages/admin/PostForm.vue

@@ -17,6 +17,15 @@
         </button>
       </div>
       <div class="flex gap-3">
+        <button 
+          v-if="isEditing" 
+          type="button" 
+          class="admin-btn-secondary" 
+          @click="openHistoryModal"
+          title="查看历史版本"
+        >
+          📜 历史版本
+        </button>
         <button 
           v-if="isEditing" 
           type="button" 
@@ -40,14 +49,17 @@
       <div class="flex-1 flex flex-col min-w-0 transition-all duration-300 ease-in-out h-full">
         <div 
           class="admin-card flex-1 flex flex-col overflow-hidden border border-white/10 focus-within:border-art-accent/50 transition-colors"
-          @paste="handlePaste"
+          @paste="handleVideoPaste"
         >
           <MdEditor
+              ref="editorRef"
               v-model="form.content"
               theme="dark"
               :preview="false"
               placeholder="开始创作..."
               class="custom-md-editor flex-1"
+              @onUploadImg="handleUploadImg"
+              @onDrop="handleEditorDrop"
           />
         </div>
       </div>
@@ -251,6 +263,13 @@
     </form>
 
     <!-- Access Log Modal -->
+    <PostHistoryModal
+      v-if="isEditing"
+      :is-open="isHistoryModalOpen"
+      :post-id="route.params.id as string"
+      @close="isHistoryModalOpen = false"
+      @restored="loadData"
+    />
     <AccessLogModal
       v-if="isEditing"
       v-model:isOpen="isAccessLogModalOpen"
@@ -265,6 +284,7 @@ import { ref, reactive, onMounted, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 // 引入 md-editor-v3
 import { MdEditor } from 'md-editor-v3'
+import type { ExposeParam, UploadImgCallBack } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 
 import { useToast } from '../../composables/useToast'
@@ -280,8 +300,10 @@ import {
   createTag as createTagApi,
   Tag 
 } from '../../services/api'
+import { authFetch, parseApiResponse } from '../../services/api'
 import CustomSelect from '../../components/CustomSelect.vue'
 import AccessLogModal from '../../components/admin/AccessLogModal.vue'
+import PostHistoryModal from '../../components/admin/PostHistoryModal.vue'
 import ImageUpload from '../../components/admin/ImageUpload.vue'
 
 const router = useRouter()
@@ -301,9 +323,13 @@ const errors = reactive<Record<string, string>>({})
 
 // Access log modal state
 const isAccessLogModalOpen = ref(false)
+const isHistoryModalOpen = ref(false)
 const openAccessLogModal = () => {
   isAccessLogModalOpen.value = true
 }
+const openHistoryModal = () => {
+  isHistoryModalOpen.value = true
+}
 
 // Data sources
 const categories = ref<{value: number, label: string}[]>([])
@@ -517,67 +543,96 @@ const handleCancel = () => {
   router.push('/admin/posts')
 }
 
-// Handle paste event for image upload
-const handlePaste = async (e: ClipboardEvent) => {
+const editorRef = ref<ExposeParam>()
+
+const uploadMediaFile = async (file: File): Promise<string | null> => {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('categoryId', '1')
+  formData.append('storageType', 'local')
+
+  const response = await authFetch('/api/admin/attachments/upload', {
+    method: 'POST',
+    headers: {},
+    body: formData
+  })
+
+  const result = await parseApiResponse<{ fileUrl: string }>(response)
+  return result?.fileUrl ?? null
+}
+
+const insertAtCursor = (text: string) => {
+  editorRef.value?.insert?.(() => ({ targetValue: text }))
+}
+
+const uploadAndInsertVideo = async (file: File) => {
+  try {
+    const url = await uploadMediaFile(file)
+    if (!url) return
+    insertAtCursor(`\n<video controls src="${url}" style="max-width:100%"></video>\n`)
+    toast.showToast('视频上传成功', 'success')
+  } catch (error: any) {
+    console.error('上传视频失败:', error)
+    toast.showToast(error.message || '上传视频失败', 'error')
+  }
+}
+
+const handleUploadImg = async (files: File[], callback: UploadImgCallBack) => {
+  try {
+    const uploadResults = await Promise.all(
+      files.map(async (file) => {
+        const url = await uploadMediaFile(file)
+        return url ? { url, alt: file.name, title: file.name } : null
+      })
+    )
+    const urls = uploadResults.filter((item): item is { url: string; alt: string; title: string } => item !== null)
+    if (urls.length > 0) {
+      callback(urls)
+      toast.showToast('图片上传成功', 'success')
+    }
+  } catch (error: any) {
+    console.error('上传图片失败:', error)
+    toast.showToast(error.message || '上传图片失败', 'error')
+  }
+}
+
+const handleEditorDrop = async (e: DragEvent) => {
+  const files = Array.from(e.dataTransfer?.files || [])
+  const imageFiles = files.filter((f) => f.type.startsWith('image/'))
+  const videoFiles = files.filter((f) => f.type.startsWith('video/'))
+  if (imageFiles.length === 0 && videoFiles.length === 0) return
+
+  e.preventDefault()
+
+  if (imageFiles.length > 0) {
+    await handleUploadImg(imageFiles, (urls) => {
+      if (!Array.isArray(urls) || urls.length === 0) return
+      urls.forEach((item) => {
+        if (typeof item === 'string') {
+          insertAtCursor(`![image](${item})`)
+        } else {
+          insertAtCursor(`![${item.alt || 'image'}](${item.url})`)
+        }
+      })
+    })
+  }
+
+  for (const file of videoFiles) {
+    await uploadAndInsertVideo(file)
+  }
+}
+
+const handleVideoPaste = async (e: ClipboardEvent) => {
   const items = e.clipboardData?.items
   if (!items) return
 
-  // Check if any item is an image
-  let hasImage = false
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].type.startsWith('image/')) {
-      hasImage = true
-      break
-    }
-  }
-
-  if (!hasImage) return
-
-  // Prevent default paste behavior for images
-  e.preventDefault()
-
   for (let i = 0; i < items.length; i++) {
     const item = items[i]
-    if (item.type.startsWith('image/')) {
+    if (item.type.startsWith('video/')) {
+      e.preventDefault()
       const file = item.getAsFile()
-      if (!file) continue
-
-      try {
-        // Upload image
-        const formData = new FormData()
-        formData.append('file', file)
-        formData.append('categoryId', '1') // 默认上传到分类1
-        formData.append('storageType', 'local')
-
-        const token = localStorage.getItem('token')
-        const response = await fetch('/api/admin/attachments/upload', {
-          method: 'POST',
-          headers: {
-            ...(token ? { Authorization: `Bearer ${token}` } : {})
-          },
-          body: formData
-        })
-
-        if (!response.ok) {
-          const errorData = await response.json()
-          throw new Error(errorData.message || '上传失败')
-        }
-
-        const data = await response.json()
-        const imageUrl = data.result.fileUrl
-
-        // Insert markdown image syntax
-        const imageMarkdown = `![${file.name}](${imageUrl})`
-        const currentContent = form.content
-        // Insert at the end of content (md-editor-v3 will handle cursor position)
-        form.content = currentContent + (currentContent ? '\n\n' : '') + imageMarkdown + '\n'
-        
-        toast.showToast('图片上传成功', 'success')
-      } catch (error: any) {
-        console.error('上传图片失败:', error)
-        toast.showToast(error.message || '上传图片失败', 'error')
-      }
-      break // Only handle first image
+      if (file) await uploadAndInsertVideo(file)
+      break
     }
   }
 }