diff --git a/web/src/components/QuickSwitcher.tsx b/web/src/components/QuickSwitcher/index.tsx
similarity index 73%
rename from web/src/components/QuickSwitcher.tsx
rename to web/src/components/QuickSwitcher/index.tsx
index af573ad9..de42a6d4 100644
--- a/web/src/components/QuickSwitcher.tsx
+++ b/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 _take from 'lodash/take';
+import { PortalAdd, PortalRemove } from '../Portal';
 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(() => {
-    return _take(
-      builtinActions.filter((action) => action.label.includes(keyword)),
-      5
-    );
-  }, [keyword]);
+  const filteredActions = useQuickSwitcherFilteredActions(keyword);
 
   useGlobalKeyDown((e) => {
     if (isArrowUp(e)) {
diff --git a/web/src/components/QuickSwitcher/useQuickSwitcherActionContext.tsx b/web/src/components/QuickSwitcher/useQuickSwitcherActionContext.tsx
new file mode 100644
index 00000000..408f53ab
--- /dev/null
+++ b/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);
+    },
+  };
+}
diff --git a/web/src/components/QuickSwitcher/useQuickSwitcherFilteredActions.tsx b/web/src/components/QuickSwitcher/useQuickSwitcherFilteredActions.tsx
new file mode 100644
index 00000000..63525f5b
--- /dev/null
+++ b/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;
+}