refactor: 快速切换功能的整理与拆分

web/src/components/QuickSwitcher/index.tsx

@@ -1,52 +1,16 @@
 import { stopPropagation } from '@/utils/dom-helper';
 import { Input } from 'antd';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { t } from 'tailchat-shared';
-import { PortalAdd, PortalRemove } from './Portal';
+import { PortalAdd, PortalRemove } from '../Portal';
-import _take from 'lodash/take';
 import clsx from 'clsx';
 import { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';
 import { isArrowDown, isArrowUp, isEnterHotkey } from '@/utils/hot-key';
-import { useHistory } from 'react-router';
+import { useQuickSwitcherActionContext } from './useQuickSwitcherActionContext';
+import { useQuickSwitcherFilteredActions } from './useQuickSwitcherFilteredActions';
 
 let currentQuickSwitcherKey: number | null = null;
 
-interface QuickActionContext {
-  navigate: (url: string) => void;
-}
-
-interface QuickAction {
-  key: string;
-  label: string;
-  action: (context: QuickActionContext) => void;
-}
-
-const builtinActions: QuickAction[] = [
-  {
-    key: 'personal',
-    label: t('个人主页'),
-    action({ navigate }) {
-      navigate('/main/personal/friends');
-    },
-  },
-  {
-    key: 'plugins',
-    label: t('插件中心'),
-    action({ navigate }) {
-      navigate('/main/personal/plugins');
-    },
-  },
-];
-
-function useQuickSwitcherActionContext(): QuickActionContext {
-  const history = useHistory();
-  return {
-    navigate: (url) => {
-      history.push(url);
-    },
-  };
-}
-
 const QuickSwitcher: React.FC = React.memo(() => {
   const [keyword, setKeyword] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -61,12 +25,7 @@ const QuickSwitcher: React.FC = React.memo(() => {
     currentQuickSwitcherKey = null;
   }, []);
 
-  const filteredActions = useMemo(() => {
+  const filteredActions = useQuickSwitcherFilteredActions(keyword);
-    return _take(
-      builtinActions.filter((action) => action.label.includes(keyword)),
-      5
-    );
-  }, [keyword]);
 
   useGlobalKeyDown((e) => {
     if (isArrowUp(e)) {

web/src/components/QuickSwitcher/useQuickSwitcherActionContext.tsx

@@ -0,0 +1,17 @@
+import { useHistory } from 'react-router';
+
+export interface QuickActionContext {
+  navigate: (url: string) => void;
+}
+
+/**
+ * 快速切换操作上下文信息
+ */
+export function useQuickSwitcherActionContext(): QuickActionContext {
+  const history = useHistory();
+  return {
+    navigate: (url) => {
+      history.push(url);
+    },
+  };
+}

web/src/components/QuickSwitcher/useQuickSwitcherFilteredActions.tsx

@@ -0,0 +1,42 @@
+import { t } from 'tailchat-shared';
+import _take from 'lodash/take';
+import { useMemo } from 'react';
+import type { QuickActionContext } from './useQuickSwitcherActionContext';
+
+interface QuickAction {
+  key: string;
+  label: string;
+  action: (context: QuickActionContext) => void;
+}
+
+const builtinActions: QuickAction[] = [
+  {
+    key: 'personal',
+    label: t('个人主页'),
+    action({ navigate }) {
+      navigate('/main/personal/friends');
+    },
+  },
+  {
+    key: 'plugins',
+    label: t('插件中心'),
+    action({ navigate }) {
+      navigate('/main/personal/plugins');
+    },
+  },
+];
+
+/**
+ * 过滤快速搜索操作
+ * @param keyword 关键字
+ */
+export function useQuickSwitcherFilteredActions(keyword: string) {
+  const filteredActions = useMemo(() => {
+    return _take(
+      builtinActions.filter((action) => action.label.includes(keyword)),
+      5
+    );
+  }, [keyword]);
+
+  return filteredActions;
+}