From 568575d8daced390bf49ff014d07badd83d6e173 Mon Sep 17 00:00:00 2001 From: Echo <1711788888@qq.com> Date: Sat, 6 Sep 2025 21:45:14 +0800 Subject: [PATCH] =?UTF-8?q?:art:=20=E4=BF=AE=E5=A4=8D=E5=AF=8C=E6=96=87?= =?UTF-8?q?=E6=9C=AC=E7=BB=84=E4=BB=B6=E6=B0=B4=E5=8D=B0=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E7=9A=84bug&=E5=88=86=E7=B1=BB=E5=8A=9F=E8=83=BD=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=96=87=E7=AB=A0=E5=88=86=E7=B1=BB=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/richtext/rich-edit.vue | 73 ++++++++++++++++--------- src/view/bot/bot/bot.vue | 2 +- src/view/category/category/category.vue | 27 +++++++-- src/view/goods/article/edit.vue | 13 +++-- 4 files changed, 81 insertions(+), 34 deletions(-) diff --git a/src/components/richtext/rich-edit.vue b/src/components/richtext/rich-edit.vue index eae460a..5308ddc 100644 --- a/src/components/richtext/rich-edit.vue +++ b/src/components/richtext/rich-edit.vue @@ -28,6 +28,7 @@ import { ElMessage } from 'element-plus' import { getUrl } from '@/utils/image' import botLogo from '@/assets/bot_logo.png' + import { useUserStore } from '@/pinia/modules/user' const emits = defineEmits(['change', 'update:modelValue']) @@ -47,20 +48,14 @@ } }) - // 强制启用水印功能（临时解决方案） - const forceWatermark = true - // 调试：监听 props 变化 watch(() => props.useWatermark, (newVal) => { console.log('useWatermark prop changed to:', newVal) }, { immediate: true }) - // 调试：打印所有 props - console.log('All props:', props) - console.log('useWatermark value:', props.useWatermark) - const editorRef = shallowRef() const valueHtml = ref('') + const userStore = useUserStore() const toolbarConfig = {} @@ -68,17 +63,22 @@ const createCustomUpload = () => { return async (file, insertFn) => { // 直接获取当前的 props.useWatermark 值 - const shouldUseWatermark = props.useWatermark || forceWatermark + const shouldUseWatermark = props.useWatermark console.log('customUpload called, useWatermark:', shouldUseWatermark) console.log('props.useWatermark:', props.useWatermark) - console.log('forceWatermark:', forceWatermark) // 未开启水印则直接上传原图 if (!shouldUseWatermark) { - console.log('直接上传原图，不加水印') const formData = new FormData() formData.append('file', file) - const resp = await fetch(basePath + '/fileUploadAndDownload/upload?noSave=1', { method: 'POST', body: formData }) + const resp = await fetch(basePath + '/fileUploadAndDownload/upload?noSave=1', { + method: 'POST', + body: formData, + headers: { + 'x-token': userStore.token, + 'x-user-id': userStore.userInfo.ID + } + }) const res = await resp.json() if (res.code === 0) { const urlPath = getUrl(res.data.file.url) @@ -89,7 +89,7 @@ return } try { - console.log('开始添加水印') + console.log('开始添加水印，文件:', file.name) const watermarkedBlob = await addBottomWatermark(file, { stripRatio: 0.18, // 水印条高度占原图高度比例 background: 'rgba(255,255,255,0.96)', @@ -98,14 +98,18 @@ fontFamily: 'PingFang SC, Microsoft YaHei, Arial', logo: botLogo }) - console.log('水印处理完成') + console.log('水印处理完成，新文件大小:', watermarkedBlob.size) const newFile = new File([watermarkedBlob], file.name, { type: watermarkedBlob.type || file.type }) const formData = new FormData() formData.append('file', newFile) const resp = await fetch(basePath + '/fileUploadAndDownload/upload?noSave=1', { method: 'POST', - body: formData + body: formData, + headers: { + 'x-token': userStore.token, + 'x-user-id': userStore.userInfo.ID + } }) const res = await resp.json() if (res.code === 0) { @@ -183,7 +187,6 @@ const config = editor.getConfig() if (config.MENU_CONF && config.MENU_CONF.uploadImage) { config.MENU_CONF.uploadImage.customUpload = createCustomUpload() - console.log('动态更新上传配置，useWatermark:', props.useWatermark) } } @@ -216,25 +219,25 @@ // 监听 useWatermark 变化，动态更新编辑器配置 watch( () => props.useWatermark, - (newVal) => { - console.log('useWatermark changed to:', newVal) + () => { if (editorRef.value && editorRef.value.getConfig) { const config = editorRef.value.getConfig() if (config.MENU_CONF && config.MENU_CONF.uploadImage) { config.MENU_CONF.uploadImage.customUpload = createCustomUpload() - console.log('动态更新上传配置，useWatermark:', newVal) } } } ) async function addBottomWatermark(file, options) { + console.log('addBottomWatermark 开始处理，文件:', file.name, '大小:', file.size) const { stripRatio = 0.18, background = 'rgba(255,255,255,0.96)', text = '', textColor = '#333', fontFamily = 'Arial', logo } = options || {} const img = await fileToImage(file) const width = img.naturalWidth || img.width const height = img.naturalHeight || img.height const stripHeight = Math.max(60, Math.floor(height * stripRatio)) + console.log('图片尺寸:', width, 'x', height, '水印条高度:', stripHeight) const canvas = document.createElement('canvas') canvas.width = width @@ -280,11 +283,20 @@ const reader = new FileReader() reader.onload = () => { const img = new Image() - img.onload = () => resolve(img) - img.onerror = reject + img.onload = () => { + console.log('图片加载成功，尺寸:', img.naturalWidth, 'x', img.naturalHeight) + resolve(img) + } + img.onerror = (error) => { + console.error('图片加载失败:', error) + reject(error) + } img.src = reader.result } - reader.onerror = reject + reader.onerror = (error) => { + console.error('文件读取失败:', error) + reject(error) + } reader.readAsDataURL(file) }) } @@ -293,8 +305,14 @@ return new Promise((resolve, reject) => { const img = new Image() img.crossOrigin = 'anonymous' - img.onload = () => resolve(img) - img.onerror = reject + img.onload = () => { + console.log('Logo 加载成功，尺寸:', img.naturalWidth, 'x', img.naturalHeight) + resolve(img) + } + img.onerror = (error) => { + console.error('Logo 加载失败:', error, 'src:', src) + reject(error) + } img.src = src }) } @@ -302,7 +320,10 @@ function canvasToBlob(canvas, mime) { return new Promise((resolve) => { if (canvas.toBlob) { - canvas.toBlob((blob) => resolve(blob), mime, 0.92) + canvas.toBlob((blob) => { + console.log('Canvas 转 Blob 成功，大小:', blob.size, '类型:', blob.type) + resolve(blob) + }, mime, 0.92) } else { // 兼容处理 const dataURL = canvas.toDataURL(mime) @@ -311,7 +332,9 @@ let n = bstr.length const u8arr = new Uint8Array(n) while (n--) u8arr[n] = bstr.charCodeAt(n) - resolve(new Blob([u8arr], { type: mime })) + const blob = new Blob([u8arr], { type: mime }) + console.log('Canvas 转 Blob (兼容模式) 成功，大小:', blob.size, '类型:', blob.type) + resolve(blob) } }) } diff --git a/src/view/bot/bot/bot.vue b/src/view/bot/bot/bot.vue index 13bc921..e4f6474 100644 --- a/src/view/bot/bot/bot.vue +++ b/src/view/bot/bot/bot.vue @@ -93,7 +93,7 @@ - + diff --git a/src/view/category/category/category.vue b/src/view/category/category/category.vue index c1fad86..f5874db 100644 --- a/src/view/category/category/category.vue +++ b/src/view/category/category/category.vue @@ -18,7 +18,12 @@ @@ -67,9 +72,12 @@ - + + + +