chore: remove ffmpeg video compression

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/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

@@ -1,62 +1,15 @@
 /**
- * 文件上传配置 - 简化版
+ * 文件上传配置
- * 专注于 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
 
-    // 支持的输入格式 (FFmpeg.wasm 支持更多格式)
+    // 支持的输入格式
     SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],
-
-    // 输出格式 - MP4 (兼容性最好)
-    OUTPUT_FORMAT: 'mp4',
-    OUTPUT_CODEC: 'h264',
   },
 
   // 图片文件配置

frontend_nuxt/nuxt.config.ts

@@ -1,4 +1,5 @@
 import { defineNuxtConfig } from 'nuxt/config'
+
 export default defineNuxtConfig({
   devServer: {
     host: '0.0.0.0',
@@ -96,26 +97,7 @@ export default defineNuxtConfig({
     },
   },
   vite: {
-    build: {
+    optimizeDeps: {},
-      // increase warning limit and split large libraries into separate chunks
+    build: {},
-      // 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'
-      //         }
-      //       }
-      //     },
-      //   },
-      // },
-    },
   },
 })

frontend_nuxt/package.json

@@ -25,7 +25,6 @@
     "ldrs": "^1.0.0",
     "markdown-it": "^14.1.0",
     "mermaid": "^10.9.4",
-    "mp4box": "^2.1.1",
     "nanoid": "^5.1.5",
     "nprogress": "^0.2.0",
     "nuxt": "latest",

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

@@ -3,8 +3,7 @@ import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
 import { tiebaEmoji } from './tiebaEmoji'
 import vditorPostCitation from './vditorPostCitation.js'
-import { checkFileSize, formatFileSize, compressVideo, VIDEO_CONFIG } from './videoCompressor.js'
+import { checkFileSize, formatFileSize } from './videoCompressor.js'
-import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
 
 export function getEditorTheme() {
   return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
@@ -95,7 +94,6 @@ export function createVditor(editorId, options = {}) {
         const file = files[0]
         const ext = file.name.split('.').pop().toLowerCase()
         const videoExts = ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv']
-        const isVideo = videoExts.includes(ext)
 
         // 检查文件大小
         const sizeCheck = checkFileSize(file)
@@ -113,60 +111,10 @@ export function createVditor(editorId, options = {}) {
           return '文件过大'
         }
 
-        let processedFile = file
-
-        // 如果是视频文件且需要压缩
-        if (isVideo && sizeCheck.needsCompression) {
-          try {
-            vditor.tip('视频压缩中...', 0)
-            vditor.disabled()
-
-            // 使用 WebCodecs 压缩视频
-            processedFile = await compressVideo(file, (progress) => {
-              const messages = {
-                initializing: '初始化编解码器',
-                preparing: '准备压缩',
-                compressing: '压缩中',
-                packaging: '封装中',
-                completed: '压缩完成',
-              }
-              const message = messages[progress.stage] || progress.stage
-              vditor.tip(`${message} ${progress.progress}%`, 0)
-            })
-
-            const originalSize = formatFileSize(file.size)
-            const compressedSize = formatFileSize(processedFile.size)
-            const savings = Math.round((1 - processedFile.size / file.size) * 100)
-
-            vditor.tip(`压缩完成！${originalSize} → ${compressedSize} (节省 ${savings}%)`, 2000)
-            // 压缩成功但仍然超过最大限制，则阻止上传
-            if (processedFile.size > VIDEO_CONFIG.MAX_SIZE) {
-              vditor.tip(
-                `压缩后仍超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请降低分辨率或码率后再上传。`,
-                4000,
-              )
-              vditor.enable()
-              return '压缩后仍超过大小限制'
-            }
-          } catch (error) {
-            // 压缩失败时，如果原文件超过最大限制，则阻止上传
-            if (file.size > VIDEO_CONFIG.MAX_SIZE) {
-              vditor.tip(
-                `视频压缩失败，且文件超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请先压缩后再上传。`,
-                4000,
-              )
-              vditor.enable()
-              return '视频压缩失败且文件过大'
-            }
-            vditor.tip('视频压缩失败，将尝试上传原文件', 3000)
-            processedFile = file
-          }
-        }
-
         vditor.tip('文件上传中', 0)
         vditor.disabled()
         const res = await fetch(
-          `${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(processedFile.name)}`,
+          `${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(file.name)}`,
           { headers: { Authorization: `Bearer ${getToken()}` } },
         )
         if (!res.ok) {
@@ -175,7 +123,7 @@ export function createVditor(editorId, options = {}) {
           return '获取上传地址失败'
         }
         const info = await res.json()
-        const put = await fetch(info.uploadUrl, { method: 'PUT', body: processedFile })
+        const put = await fetch(info.uploadUrl, { method: 'PUT', body: file })
         if (!put.ok) {
           vditor.enable()
           vditor.tip('上传失败')

frontend_nuxt/utils/videoCompressor.js

@@ -1,10 +1,8 @@
 /**
- * 基于 WebCodecs + MP4Box.js 的视频压缩工具
+ * 视频上传工具
- * 专为现代浏览器 (Chrome/Safari) 优化
  */
 
 import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
-import { compressVideoWithWebCodecs, isWebCodecSupported } from './webcodecVideoCompressor.js'
 
 // 导出配置供外部使用
 export const VIDEO_CONFIG = UPLOAD_CONFIG.VIDEO
@@ -17,7 +15,6 @@ export function checkFileSize(file) {
     isValid: file.size <= VIDEO_CONFIG.MAX_SIZE,
     actualSize: file.size,
     maxSize: VIDEO_CONFIG.MAX_SIZE,
-    needsCompression: file.size > VIDEO_CONFIG.TARGET_SIZE,
   }
 }
 
@@ -31,42 +28,3 @@ export function formatFileSize(bytes) {
   const i = Math.floor(Math.log(bytes) / Math.log(k))
   return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
 }
-
-/**
- * 压缩视频文件 - 使用 WebCodecs
- */
-export async function compressVideo(file, onProgress = () => {}) {
-  // 检查是否需要压缩
-  const sizeCheck = checkFileSize(file)
-  if (!sizeCheck.needsCompression) {
-    onProgress({ stage: 'completed', progress: 100 })
-    return file
-  }
-
-  // 检查 WebCodecs 支持
-  if (!isWebCodecSupported()) {
-    throw new Error('当前浏览器不支持视频压缩功能，请使用 Chrome 或 Safari 浏览器')
-  }
-
-  try {
-    return await compressVideoWithWebCodecs(file, { onProgress })
-  } catch (error) {
-    console.error('WebCodecs 压缩失败:', error)
-    throw new Error(`视频压缩失败: ${error.message}`)
-  }
-}
-
-/**
- * 预加载 WebCodecs（可选的性能优化）
- */
-export async function preloadVideoCompressor() {
-  try {
-    if (!isWebCodecSupported()) {
-      throw new Error('当前浏览器不支持 WebCodecs')
-    }
-    return { success: true, message: 'WebCodecs 可用' }
-  } catch (error) {
-    console.warn('WebCodecs 预加载失败:', error)
-    return { success: false, error: error.message }
-  }
-}

frontend_nuxt/utils/webcodecVideoCompressor.js

@@ -1,108 +0,0 @@
-/**
- * WebCodecs + MP4Box.js video compressor
- * Simplified transcoding using browser WebCodecs API
- */
-import { createFile } from 'mp4box'
-import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
-
-export function isWebCodecSupported() {
-  return (
-    typeof window !== 'undefined' &&
-    'VideoEncoder' in window &&
-    'MediaStreamTrackProcessor' in window &&
-    'VideoFrame' in window
-  )
-}
-
-/**
- * Compress a video File using WebCodecs and MP4Box.js
- * @param {File} file original video file
- * @param {Object} options optional callbacks
- * @param {Function} options.onProgress progress callback
- * @returns {Promise<File>} compressed file
- */
-export async function compressVideoWithWebCodecs(file, { onProgress = () => {} } = {}) {
-  if (!isWebCodecSupported()) {
-    throw new Error('当前浏览器不支持 WebCodecs')
-  }
-
-  onProgress({ stage: 'initializing', progress: 0 })
-
-  const url = URL.createObjectURL(file)
-  const video = document.createElement('video')
-  video.src = url
-  await video.play()
-  video.pause()
-
-  onProgress({ stage: 'preparing', progress: 10 })
-
-  const stream = video.captureStream()
-  const track = stream.getVideoTracks()[0]
-  const processor = new MediaStreamTrackProcessor({ track })
-  const reader = processor.readable.getReader()
-
-  const { width, height, frameRate = 30 } = track.getSettings()
-  const bitrate = UPLOAD_CONFIG.VIDEO.TARGET_BITRATE || 1_000_000
-
-  const chunks = []
-  const encoder = new VideoEncoder({
-    output: (chunk) => {
-      const copy = new Uint8Array(chunk.byteLength)
-      chunk.copyTo(copy)
-      chunks.push({ type: chunk.type, timestamp: chunk.timestamp, data: copy })
-    },
-    error: (e) => console.error('编码失败', e),
-  })
-
-  encoder.configure({
-    codec: 'avc1.42001E',
-    width,
-    height,
-    bitrate,
-    framerate: frameRate,
-  })
-
-  let processed = 0
-  const totalFrames = Math.ceil(video.duration * frameRate)
-
-  while (true) {
-    const { done, value } = await reader.read()
-    if (done) break
-    encoder.encode(value)
-    value.close()
-    processed++
-    onProgress({ stage: 'compressing', progress: Math.round((processed / totalFrames) * 80) })
-  }
-
-  await encoder.flush()
-
-  onProgress({ stage: 'packaging', progress: 90 })
-
-  const mp4 = createFile()
-  const trackId = mp4.addTrack({
-    id: 1,
-    type: 'avc1',
-    width,
-    height,
-    timescale: frameRate,
-  })
-
-  chunks.forEach((chunk) => {
-    mp4.addSample(trackId, chunk.data.buffer, {
-      duration: 1,
-      dts: chunk.timestamp,
-      cts: 0,
-      is_sync: chunk.type === 'key',
-    })
-  })
-
-  const streamOut = mp4.getBuffer()
-  const outBuffer = streamOut.buffer.slice(0, streamOut.position)
-  const outFile = new File([outBuffer], file.name.replace(/\.[^.]+$/, '.mp4'), {
-    type: 'video/mp4',
-  })
-
-  onProgress({ stage: 'completed', progress: 100 })
-
-  return outFile
-}