feat: 增加快速切换会话类型的快捷方式

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 = (
     <ChatMsgTypeSwitchPopoverContainer>
       <div title={t('普通信息')} onClick={() => handleSwitchMsgType('normal')}>

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);
+    };
+  }, []);
+}

src/web/hooks/useUpdateRef.ts

@@ -0,0 +1,8 @@
+import { useRef, MutableRefObject } from 'react';
+
+export function useUpdateRef<T>(state: T): MutableRefObject<T> {
+  const ref = useRef<T>(state);
+  ref.current = state;
+
+  return ref;
+}

src/web/plugin-loader.ts

@@ -136,6 +136,10 @@ export function initPlugins(): Promise<void> {
     '@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<void> {
     '@capital/web/utils/analytics-helper',
     () => import('@web/utils/analytics-helper')
   );
+  regSharedModule(
+    '@capital/web/utils/hot-key',
+    () => import('@web/utils/hot-key')
+  );
 
   // Shared
   regSharedModule(

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');