Merge pull request #974 from 4twocc/feat/message-box-shortcut

feat(MessageEditor): 添加发送消息的快捷键支持

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