fix: 评论后--需要刷新帖子内容 #939

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/assets/global.css

@@ -356,7 +356,7 @@ body {
   }
 
   .d2h-file-name {
-    font-size: 12px !important;
+    font-size: 14px !important;
   }
 
   .d2h-file-header {
@@ -371,14 +371,14 @@ body {
     padding-left: 10px !important;
   }
 
-  .d2h-diff-table {
+  /* .d2h-diff-table {
     font-size: 6px !important;
   }
 
   .d2h-code-line ins {
     height: 100%;
     font-size: 13px !important;
-  }
+  } */
 
   /* .d2h-code-line {
     height: 12px;

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
-    TARGET_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_TARGET_SIZE', 5 * 1024 * 1024), // 5MB
+    MAX_SIZE: 20 * 1024 * 1024,
+    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: {
-      // increase warning limit and split large libraries into separate chunks
-      // 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'
-      //         }
-      //       }
-      //     },
-      //   },
-      // },
+    optimizeDeps: {
+      exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
     },
+    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/posts/[id]/index.vue

@@ -445,7 +445,7 @@ const handleContentClick = (e) => {
 
 const onCommentDeleted = (id) => {
   removeCommentFromList(Number(id), comments.value)
-  fetchComments()
+  fetchTimeline()
 }
 
 const {
@@ -557,7 +557,7 @@ const postComment = async (parentUserName, text, clear) => {
     if (res.ok) {
       const data = await res.json()
       console.debug('Post comment response data', data)
-      await fetchComments()
+      await fetchTimeline()
       clear()
       if (data.reward && data.reward > 0) {
         toast.success(`评论成功，获得 ${data.reward} 经验值`)
@@ -612,7 +612,7 @@ const approvePost = async () => {
     status.value = 'PUBLISHED'
     toast.success('已通过审核')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -628,7 +628,7 @@ const pinPost = async () => {
   if (res.ok) {
     toast.success('已置顶')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -644,7 +644,7 @@ const unpinPost = async () => {
   if (res.ok) {
     toast.success('已取消置顶')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -660,7 +660,7 @@ const excludeRss = async () => {
   if (res.ok) {
     rssExcluded.value = true
     toast.success('已标记为rss不推荐')
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -676,7 +676,8 @@ const includeRss = async () => {
   if (res.ok) {
     rssExcluded.value = false
     toast.success('已标记为rss推荐')
-    await fetchChangeLogs()
+    await refreshPost()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -693,7 +694,7 @@ const closePost = async () => {
     closed.value = true
     toast.success('已关闭')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -710,7 +711,7 @@ const reopenPost = async () => {
     closed.value = false
     toast.success('已重新打开')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -755,7 +756,7 @@ const rejectPost = async () => {
     status.value = 'REJECTED'
     toast.success('已驳回')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }

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 mtOk =
-          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`
-
+        const base = `https://unpkg.com/@ffmpeg/core@0.12.2/dist/esm`
+        const libBase = `https://unpkg.com/@ffmpeg/ffmpeg@0.12.2/dist/esm`
         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 压缩视频