diff --git a/src/plugins/trpg/src/components/chatBox/ChatSendBox/ChatMsgTypeSwitch.tsx b/src/plugins/trpg/src/components/chatBox/ChatSendBox/ChatMsgTypeSwitch.tsx index 1e009281c..9276d314e 100644 --- a/src/plugins/trpg/src/components/chatBox/ChatSendBox/ChatMsgTypeSwitch.tsx +++ b/src/plugins/trpg/src/components/chatBox/ChatSendBox/ChatMsgTypeSwitch.tsx @@ -8,6 +8,8 @@ import styled from 'styled-components'; import type { MsgType } from '@capital/shared/redux/types/chat'; import { useTranslation } from '@capital/shared/i18n'; import { trackEvent } from '@capital/web/utils/analytics-helper'; +import { useGlobalKeyDown } from '@capital/web/hooks/useGlobalKeyDown'; +import { isAlt1, isAlt2, isAlt3, isAlt4 } from '@capital/web/utils/hot-key'; const ChatMsgTypeSwitchPopoverContainer = styled(Space)` padding: 6px 10px; @@ -34,6 +36,21 @@ export const ChatMsgTypeSwitch: React.FC = TMemo((props) => { setVisible(false); }; + /** + * 会话消息类型的快捷键 + */ + useGlobalKeyDown((e) => { + if (isAlt1(e)) { + setMsgType('normal'); + } else if (isAlt2(e)) { + setMsgType('ooc'); + } else if (isAlt3(e)) { + setMsgType('speak'); + } else if (isAlt4(e)) { + setMsgType('action'); + } + }); + const content = (
handleSwitchMsgType('normal')}> diff --git a/src/web/hooks/useGlobalKeyDown.ts b/src/web/hooks/useGlobalKeyDown.ts new file mode 100644 index 000000000..5672bc402 --- /dev/null +++ b/src/web/hooks/useGlobalKeyDown.ts @@ -0,0 +1,22 @@ +import { useLayoutEffect } from 'react'; +import { useUpdateRef } from './useUpdateRef'; + +/** + * keydown hooks + * 仅接受最初的函数 + */ +export function useGlobalKeyDown(fn: (e: KeyboardEvent) => void) { + const fnRef = useUpdateRef(fn); + + useLayoutEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + typeof fnRef.current === 'function' && fnRef.current(e); + }; + + window.addEventListener('keydown', handleKeyDown); + + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, []); +} diff --git a/src/web/hooks/useUpdateRef.ts b/src/web/hooks/useUpdateRef.ts new file mode 100644 index 000000000..54990026a --- /dev/null +++ b/src/web/hooks/useUpdateRef.ts @@ -0,0 +1,8 @@ +import { useRef, MutableRefObject } from 'react'; + +export function useUpdateRef(state: T): MutableRefObject { + const ref = useRef(state); + ref.current = state; + + return ref; +} diff --git a/src/web/plugin-loader.ts b/src/web/plugin-loader.ts index ea9e53fc7..0cb5094a7 100644 --- a/src/web/plugin-loader.ts +++ b/src/web/plugin-loader.ts @@ -136,6 +136,10 @@ export function initPlugins(): Promise { '@capital/web/components/QRCode', () => import('@web/components/QRCode') ); + regSharedModule( + '@capital/web/hooks/useGlobalKeyDown', + () => import('@web/hooks/useGlobalKeyDown') + ); regSharedModule( '@capital/web/utils/upload-helper', () => import('@web/utils/upload-helper') @@ -149,6 +153,10 @@ export function initPlugins(): Promise { '@capital/web/utils/analytics-helper', () => import('@web/utils/analytics-helper') ); + regSharedModule( + '@capital/web/utils/hot-key', + () => import('@web/utils/hot-key') + ); // Shared regSharedModule( diff --git a/src/web/utils/hot-key.ts b/src/web/utils/hot-key.ts index a0a2dc930..270aa3bcb 100644 --- a/src/web/utils/hot-key.ts +++ b/src/web/utils/hot-key.ts @@ -8,3 +8,8 @@ export const isEscHotkey = isHotkey('escape'); export const isArrowUpHotkey = isHotkey('arrowup'); export const isArrowDownHotkey = isHotkey('arrowdown'); + +export const isAlt1 = isHotkey('alt+1'); +export const isAlt2 = isHotkey('alt+2'); +export const isAlt3 = isHotkey('alt+3'); +export const isAlt4 = isHotkey('alt+4');