From 9421d004d4f4ba182cedd8cc9c58e58a930e2f87 Mon Sep 17 00:00:00 2001 From: jiahaosheng Date: Thu, 11 Sep 2025 17:27:54 +0800 Subject: [PATCH] =?UTF-8?q?feat(MessageEditor):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8F=91=E9=80=81=E6=B6=88=E6=81=AF=E7=9A=84=E5=BF=AB=E6=8D=B7?= =?UTF-8?q?=E9=94=AE=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend_nuxt/components/MessageEditor.vue | 45 +++++++++++++++++++++- frontend_nuxt/utils/is.js | 28 ++++++++++++++ 2 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 frontend_nuxt/utils/is.js diff --git a/frontend_nuxt/components/MessageEditor.vue b/frontend_nuxt/components/MessageEditor.vue index ae3fbc9b3..e42331dd8 100644 --- a/frontend_nuxt/components/MessageEditor.vue +++ b/frontend_nuxt/components/MessageEditor.vue @@ -5,7 +5,10 @@
- +
@@ -21,6 +24,8 @@ import { getEditorTheme as getEditorThemeUtil, getPreviewTheme as getPreviewThemeUtil, } from '~/utils/vditor' +import { useIsMobile } from '~/utils/screen' +import { isMac } from '~/utils/is' 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 } }, } @@ -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); +} diff --git a/frontend_nuxt/utils/is.js b/frontend_nuxt/utils/is.js new file mode 100644 index 000000000..e286a6a45 --- /dev/null +++ b/frontend_nuxt/utils/is.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 + } +}