fix: restrict image preview to markdown images

Feature/ffmpeg load

frontend_nuxt/.env.example

@@ -17,8 +17,3 @@ NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
 NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
 NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ
 NUXT_PUBLIC_TELEGRAM_BOT_ID=8450237135
-
-# 视频压缩配置 - FFmpeg.wasm 专用
-# 支持 Chrome 60+ 和 Safari 11.1+
-NUXT_PUBLIC_VIDEO_MAX_SIZE=52428800  # 50MB (字节)
-NUXT_PUBLIC_VIDEO_TARGET_SIZE=20971520  # 20MB (字节)

frontend_nuxt/components/CommentItem.vue

@@ -342,7 +342,7 @@ const copyCommentLink = () => {
 
 const handleContentClick = (e) => {
   handleMarkdownClick(e)
-  if (e.target.tagName === 'IMG') {
+  if (e.target.tagName === 'IMG' && !e.target.classList.contains('emoji')) {
     const container = e.target.parentNode
     const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
     lightboxImgs.value = imgs

frontend_nuxt/components/MessageEditor.vue

@@ -5,7 +5,10 @@
     </div>
     <div class="message-bottom-container">
       <div class="message-submit" :class="{ disabled: isDisabled }" @click="submit">
-        <template v-if="!loading"> 发送 </template>
+        <template v-if="!loading">
+          发送
+          <span class="shortcut-icon" v-if="!isMobile"> {{ isMac ? '⌘' : 'Ctrl' }} ⏎ </span>
+        </template>
         <template v-else> <loading-four /> 发送中... </template>
       </div>
     </div>
@@ -21,6 +24,8 @@ import {
   getEditorTheme as getEditorThemeUtil,
   getPreviewTheme as getPreviewThemeUtil,
 } from '~/utils/vditor'
+import { useIsMobile } from '~/utils/screen'
+import { isMac } from '~/utils/device'
 import '~/assets/global.css'
 
 export default {
@@ -44,6 +49,7 @@ export default {
     const vditorInstance = ref(null)
     const text = ref('')
     const editorId = ref(props.editorId)
+    const isMobile = useIsMobile()
     if (!editorId.value) {
       editorId.value = 'editor-' + useId()
     }
@@ -84,6 +90,28 @@ export default {
           applyTheme()
         },
       })
+
+      // 不是手机的情况下不添加快捷键
+      if (!isMobile.value) {
+        // 添加快捷键监听 (Ctrl+Enter 或 Cmd+Enter)
+        const handleKeydown = (e) => {
+          if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault()
+            submit()
+          }
+        }
+
+        const el = document.getElementById(editorId.value)
+        if (el) {
+          el.addEventListener('keydown', handleKeydown)
+        }
+
+        onUnmounted(() => {
+          if (el) {
+            el.removeEventListener('keydown', handleKeydown)
+          }
+        })
+      }
     })
 
     onUnmounted(() => {
@@ -121,7 +149,7 @@ export default {
       },
     )
 
-    return { submit, isDisabled, editorId }
+    return { submit, isDisabled, editorId, isMac, isMobile }
   },
 }
 </script>
@@ -168,4 +196,17 @@ export default {
 .message-submit:not(.disabled):hover {
   background-color: var(--primary-color-hover);
 }
+
+/** 评论按钮快捷键样式 */
+.shortcut-icon {
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  background-color: rgba(0, 0, 0, 0.25);
+}
+.comment-submit.disabled .shortcut-icon {
+  background-color: rgba(0, 0, 0, 0);
+}
 </style>

frontend_nuxt/config/uploadConfig.js

@@ -3,53 +3,12 @@
  * 专注于 FFmpeg.wasm 视频压缩，支持 Chrome/Safari
  */
 
-// 声明全局变量以避免 TypeScript 错误
-/* global useRuntimeConfig */
-
-// 简化的环境变量读取功能
-function getEnvNumber(key, defaultValue) {
-  if (typeof window !== 'undefined') {
-    // 客户端：尝试从 Nuxt 环境获取
-    try {
-      // 使用 globalThis 避免直接引用未定义的变量
-      const nuxtApp = globalThis.$nuxt || globalThis.nuxtApp
-      if (nuxtApp && nuxtApp.$config) {
-        const value = nuxtApp.$config.public?.[key.replace('NUXT_PUBLIC_', '').toLowerCase()]
-        return value ? Number(value) : defaultValue
-      }
-      return defaultValue
-    } catch {
-      return defaultValue
-    }
-  }
-  // 服务端：从 process.env 获取
-  return process.env[key] ? Number(process.env[key]) : defaultValue
-}
-
-function getEnvBoolean(key, defaultValue) {
-  if (typeof window !== 'undefined') {
-    try {
-      // 使用 globalThis 避免直接引用未定义的变量
-      const nuxtApp = globalThis.$nuxt || globalThis.nuxtApp
-      if (nuxtApp && nuxtApp.$config) {
-        const value = nuxtApp.$config.public?.[key.replace('NUXT_PUBLIC_', '').toLowerCase()]
-        return value === 'true' || value === true
-      }
-      return defaultValue
-    } catch {
-      return defaultValue
-    }
-  }
-  const envValue = process.env[key]
-  return envValue ? envValue === 'true' : defaultValue
-}
-
 export const UPLOAD_CONFIG = {
   // 视频文件配置 - 专为 FFmpeg.wasm 优化
   VIDEO: {
     // 文件大小限制 (字节)
-    MAX_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_MAX_SIZE', 20 * 1024 * 1024), // 5MB
+    MAX_SIZE: 20 * 1024 * 1024,
-    TARGET_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_TARGET_SIZE', 5 * 1024 * 1024), // 5MB
+    TARGET_SIZE: 5 * 1024 * 1024, // 5MB
 
     // 支持的输入格式 (FFmpeg.wasm 支持更多格式)
     SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],

frontend_nuxt/nuxt.config.ts

@@ -1,17 +1,5 @@
 import { defineNuxtConfig } from 'nuxt/config'
-import { createRequire } from 'node:module'
 
-const require = createRequire(import.meta.url)
-const appPkg = require('./package.json') as {
-  dependencies?: Record<string, string>
-  devDependencies?: Record<string, string>
-}
-const ffmpegVersion = (
-  process.env.NUXT_PUBLIC_FFMPEG_VERSION ||
-  appPkg.dependencies?.['@ffmpeg/ffmpeg'] ||
-  appPkg.devDependencies?.['@ffmpeg/ffmpeg'] ||
-  '0.12.15'
-).replace(/^[^\d]*/, '')
 export default defineNuxtConfig({
   devServer: {
     host: '0.0.0.0',
@@ -29,7 +17,6 @@ export default defineNuxtConfig({
       discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '',
       twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
       telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '',
-      ffmpegVersion,
     },
   },
   css: [
@@ -110,26 +97,9 @@ export default defineNuxtConfig({
     },
   },
   vite: {
-    build: {
+    optimizeDeps: {
-      // increase warning limit and split large libraries into separate chunks
+      exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
-      // chunkSizeWarningLimit: 1024,
-      // rollupOptions: {
-      //   output: {
-      //     manualChunks(id) {
-      //       if (id.includes('node_modules')) {
-      //         if (id.includes('vditor')) {
-      //           return 'vditor'
-      //         }
-      //         if (id.includes('echarts')) {
-      //           return 'echarts'
-      //         }
-      //         if (id.includes('highlight.js')) {
-      //           return 'highlight'
-      //         }
-      //       }
-      //     },
-      //   },
-      // },
     },
+    build: {},
   },
 })

frontend_nuxt/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@icon-park/vue-next": "^1.4.2",
-    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/ffmpeg": "^0.12.2",
     "@ffmpeg/util": "^0.12.2",
     "@nuxt/image": "^1.11.0",
     "@stomp/stompjs": "^7.0.0",

frontend_nuxt/pages/message-box/[id].vue

@@ -463,7 +463,11 @@ function minimize() {
 
 function handleContentClick(e) {
   handleMarkdownClick(e)
-  if (e.target.tagName === 'IMG') {
+  if (
+    e.target.tagName === 'IMG' &&
+    !e.target.classList.contains('emoji') &&
+    !e.target.closest('.reactions-container')
+  ) {
     const container = e.target.parentNode
     const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
     lightboxImgs.value = imgs

frontend_nuxt/pages/posts/[id]/index.vue

@@ -434,7 +434,7 @@ const removeCommentFromList = (id, list) => {
 
 const handleContentClick = (e) => {
   handleMarkdownClick(e)
-  if (e.target.tagName === 'IMG') {
+  if (e.target.tagName === 'IMG' && !e.target.classList.contains('emoji')) {
     const container = e.target.parentNode
     const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
     lightboxImgs.value = imgs

frontend_nuxt/plugins/ffmpeg.client.ts

@@ -1,33 +1,21 @@
 import { FFmpeg } from '@ffmpeg/ffmpeg'
 import { toBlobURL } from '@ffmpeg/util'
-import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app'
+import { defineNuxtPlugin } from 'nuxt/app'
 
 let ffmpeg: FFmpeg | null = null
 
 export default defineNuxtPlugin(() => {
-  const {
-    public: { ffmpegVersion },
-  } = useRuntimeConfig()
-
   return {
     provide: {
       ffmpeg: async () => {
         if (ffmpeg) return ffmpeg
-
         ffmpeg = new FFmpeg()
-
+        const base = `https://unpkg.com/@ffmpeg/core@0.12.2/dist/esm`
-        const mtOk =
+        const libBase = `https://unpkg.com/@ffmpeg/ffmpeg@0.12.2/dist/esm`
-          typeof crossOriginIsolated !== 'undefined' &&
-          crossOriginIsolated &&
-          typeof SharedArrayBuffer !== 'undefined'
-
-        const pkg = mtOk ? '@ffmpeg/core-mt' : '@ffmpeg/core-st'
-        const base = `https://unpkg.com/${pkg}@${ffmpegVersion}/dist/umd`
-
         await ffmpeg.load({
           coreURL: await toBlobURL(`${base}/ffmpeg-core.js`, 'text/javascript'),
           wasmURL: await toBlobURL(`${base}/ffmpeg-core.wasm`, 'application/wasm'),
-          workerURL: await toBlobURL(`${base}/ffmpeg-core.worker.js`, 'text/javascript'),
+          workerURL: await toBlobURL(`${libBase}/worker.js`, 'text/javascript'),
         })
 
         return ffmpeg

frontend_nuxt/utils/device.js

@@ -0,0 +1,28 @@
+export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
+
+export const isMac = getIsMac()
+
+function getIsMac() {
+  if (!isClient) {
+    return false
+  }
+
+  try {
+    // 优先使用现代浏览器的 navigator.userAgentData API
+    if (navigator.userAgentData && navigator.userAgentData.platform) {
+      return navigator.userAgentData.platform === 'macOS'
+    }
+
+    // 降级到传统的 User-Agent 检测
+    if (navigator.userAgent) {
+      return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent)
+    }
+
+    // 默认返回false
+    return false
+  } catch (error) {
+    // 异常处理，记录错误并返回默认值
+    console.warn('检测Mac设备时发生错误:', error)
+    return false
+  }
+}

frontend_nuxt/utils/vditor.js

@@ -118,7 +118,7 @@ export function createVditor(editorId, options = {}) {
         // 如果是视频文件且需要压缩
         if (isVideo && sizeCheck.needsCompression) {
           try {
-            vditor.tip('视频压缩中...', 0)
+            vditor.tip('开始部署ffmpeg环境... 请稍等', 0)
             vditor.disabled()
 
             // 使用 FFmpeg 压缩视频