1.3.9.07

UE-DND · UE-DND · commit 4a1dddac44e3 · 2026-01-28T16:45:40.000+08:00
【优化】
- 搜索高亮性能
diff --git a/src/components/interactions/SearchDrawer/SearchResultItem.tsx b/src/components/interactions/SearchDrawer/SearchResultItem.tsx
@@ -8,43 +8,63 @@ import {
   Stack,
   Tooltip,
   Typography,
-  useMediaQuery,
-  useTheme
 } from "@mui/material";
 import { GitHub as GitHubIcon } from "@mui/icons-material";
 import { g3BorderRadius, G3_PRESETS } from "@/theme/g3Curves";
 import { highlightKeyword, highlightKeywords, resolveItemHtmlUrl } from "./utils";
 import type { RepoSearchItem } from "@/hooks/github/useRepoSearch";
 import { useI18n } from "@/contexts/I18nContext";
 import React from "react";
+import type { CSSProperties } from "react";
 
 interface SearchResultItemProps {
   item: RepoSearchItem;
   keyword: string;
+  keywordLower: string;
+  highlightRegex: RegExp | null;
+  isSmallScreen: boolean;
   onClick: (item: RepoSearchItem) => void;
   onOpenGithub: (item: RepoSearchItem) => void;
+  style?: CSSProperties;
+  ariaAttributes?: {
+    "aria-posinset": number;
+    "aria-setsize": number;
+    role: "listitem";
+  };
 }
 
 export const SearchResultItem: React.FC<SearchResultItemProps> = ({
   item,
   keyword,
+  keywordLower,
+  highlightRegex,
+  isSmallScreen,
   onClick,
-  onOpenGithub
+  onOpenGithub,
+  style,
+  ariaAttributes
 }) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const { t } = useI18n();
 
-  const pathParts = highlightKeyword(item.path, keyword);
+  const pathParts = highlightKeyword(item.path, keyword, keywordLower);
   const githubUrl = resolveItemHtmlUrl(item);
 
   const snippet = ("snippet" in item && typeof (item as { snippet?: unknown }).snippet === "string")
     ? (item as { snippet?: string }).snippet
     : undefined;
-  const snippetParts = snippet !== undefined && snippet.length > 0 ? highlightKeywords(snippet, keyword) : null;
+  const snippetParts = snippet !== undefined && snippet.length > 0
+    ? highlightKeywords(snippet, keyword, highlightRegex)
+    : null;
+
+  const listItemProps = {
+    disablePadding: true,
+    alignItems: "flex-start" as const,
+    ...(style !== undefined ? { style } : {}),
+    ...(ariaAttributes ?? {})
+  };
 
   return (
-    <ListItem disablePadding alignItems="flex-start">
+    <ListItem {...listItemProps}>
       <Box
         sx={{
           display: "flex",
diff --git a/src/components/interactions/SearchDrawer/SearchResults.tsx b/src/components/interactions/SearchDrawer/SearchResults.tsx
@@ -1,7 +1,8 @@
 import {
   Alert,
+  Box,
   Button,
-  List,
+  List as MuiList,
   ListItem,
   ListItemText,
   Typography,
@@ -10,9 +11,13 @@ import {
 } from "@mui/material";
 import { g3BorderRadius, G3_PRESETS } from "@/theme/g3Curves";
 import { SearchResultItem } from "./SearchResultItem";
+import { getHighlightRegex } from "./utils";
 import type { RepoSearchItem } from "@/hooks/github/useRepoSearch";
 import { useI18n } from "@/contexts/I18nContext";
-import React from "react";
+import React, { useMemo } from "react";
+import { AutoSizer } from "react-virtualized-auto-sizer";
+import { List as VirtualList, useDynamicRowHeight } from "react-window";
+import type { RowComponentProps } from "react-window";
 
 interface SearchResultsProps {
   items: RepoSearchItem[];
@@ -28,6 +33,51 @@ interface SearchResultsProps {
   disableSearchButton: boolean;
 }
 
+interface SearchResultRowData {
+  items: RepoSearchItem[];
+  keyword: string;
+  keywordLower: string;
+  highlightRegex: RegExp | null;
+  isSmallScreen: boolean;
+  onResultClick: (item: RepoSearchItem) => void;
+  onOpenGithub: (item: RepoSearchItem) => void;
+}
+
+const VIRTUALIZE_THRESHOLD = 30;
+
+const SearchResultRow = ({
+  ariaAttributes,
+  index,
+  style,
+  ...rowData
+}: RowComponentProps<SearchResultRowData>): React.ReactElement => {
+  const item = rowData.items[index];
+
+  if (item === undefined) {
+    return (
+      <div
+        style={style}
+        {...ariaAttributes}
+        aria-hidden="true"
+      />
+    );
+  }
+
+  return (
+    <SearchResultItem
+      item={item}
+      keyword={rowData.keyword}
+      keywordLower={rowData.keywordLower}
+      highlightRegex={rowData.highlightRegex}
+      isSmallScreen={rowData.isSmallScreen}
+      onClick={rowData.onResultClick}
+      onOpenGithub={rowData.onOpenGithub}
+      style={style}
+      ariaAttributes={ariaAttributes}
+    />
+  );
+};
+
 export const SearchResults: React.FC<SearchResultsProps> = ({
   items,
   keyword,
@@ -41,6 +91,33 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const { t } = useI18n();
+  const listHeight = isSmallScreen ? 300 : 400;
+  const shouldVirtualize = items.length >= VIRTUALIZE_THRESHOLD;
+  const keywordLower = useMemo(() => keyword.toLowerCase(), [keyword]);
+  const highlightRegex = useMemo(() => getHighlightRegex(keyword), [keyword]);
+  const defaultRowHeight = isSmallScreen ? 72 : 88;
+  const dynamicRowHeight = useDynamicRowHeight({ defaultRowHeight, key: keyword });
+
+  const rowData = useMemo(
+    (): SearchResultRowData => ({
+      items,
+      keyword,
+      keywordLower,
+      highlightRegex,
+      isSmallScreen,
+      onResultClick,
+      onOpenGithub
+    }),
+    [
+      items,
+      keyword,
+      keywordLower,
+      highlightRegex,
+      isSmallScreen,
+      onResultClick,
+      onOpenGithub
+    ]
+  );
 
   const showEmptyIndexResult =
     !loading &&
@@ -82,40 +159,74 @@ export const SearchResults: React.FC<SearchResultsProps> = ({
         </Alert>
       )}
 
-      <List
-        sx={{
-          maxHeight: isSmallScreen ? 300 : 400,
-          overflowY: "auto",
-          overflowX: "hidden",
-          width: "100%"
-        }}
-      >
-        {items.map(item => (
-          <SearchResultItem
-            key={`${item.branch}:${item.path}`}
-            item={item}
-            keyword={keyword}
-            onClick={onResultClick}
-            onOpenGithub={onOpenGithub}
+      {shouldVirtualize && items.length > 0 ? (
+        <Box sx={{ height: listHeight, width: "100%" }}>
+          <AutoSizer
+            renderProp={({ width, height }) => {
+              if (width === undefined || height === undefined) {
+                return null;
+              }
+
+              return (
+                <VirtualList
+                  rowCount={items.length}
+                  rowHeight={dynamicRowHeight}
+                  rowComponent={SearchResultRow}
+                  rowProps={rowData}
+                  overscanCount={6}
+                  tagName="ul"
+                  style={{
+                    height,
+                    width,
+                    overflowX: "hidden",
+                    listStyle: "none",
+                    margin: 0,
+                    padding: 0
+                  }}
+                />
+              );
+            }}
           />
-        ))}
-        {searchResult !== null && searchResult.items.length === 0 && (
-          <ListItem>
-            <ListItemText
-              primary={t('search.results.noResults')}
-              secondary={t('search.results.noResultsHint')}
-              slotProps={{
-                primary: {
-                  variant: isSmallScreen ? "body2" : "body1"
-                },
-                secondary: {
-                  variant: isSmallScreen ? "caption" : "body2"
-                }
-              }}
+        </Box>
+      ) : (
+        <MuiList
+          sx={{
+            maxHeight: listHeight,
+            overflowY: "auto",
+            overflowX: "hidden",
+            width: "100%"
+          }}
+        >
+          {items.map(item => (
+            <SearchResultItem
+              key={`${item.branch}:${item.path}`}
+              item={item}
+              keyword={keyword}
+              keywordLower={keywordLower}
+              highlightRegex={highlightRegex}
+              isSmallScreen={isSmallScreen}
+              onClick={onResultClick}
+              onOpenGithub={onOpenGithub}
             />
-          </ListItem>
-        )}
-      </List>
+          ))}
+          {searchResult !== null && searchResult.items.length === 0 && (
+            <ListItem>
+              <ListItemText
+                primary={t('search.results.noResults')}
+                secondary={t('search.results.noResultsHint')}
+                slotProps={{
+                  primary: {
+                    variant: isSmallScreen ? "body2" : "body1"
+                  },
+                  secondary: {
+                    variant: isSmallScreen ? "caption" : "body2"
+                  }
+                }}
+              />
+            </ListItem>
+          )}
+        </MuiList>
+      )}
     </>
   );
 };
diff --git a/src/components/interactions/SearchDrawer/utils.ts b/src/components/interactions/SearchDrawer/utils.ts
@@ -22,16 +22,17 @@ export const parseExtensionInput = (value: string): string[] => {
  * 高亮文本中的关键字
  */
 export const highlightKeyword = (
-  text: string, 
-  keyword: string
+  text: string,
+  keyword: string,
+  lowerKeywordOverride?: string
 ): { text: string; highlight: boolean }[] => {
   if (keyword.trim().length === 0) {
     return [{ text, highlight: false }];
   }
   
   const parts: { text: string; highlight: boolean }[] = [];
   const lowerText = text.toLowerCase();
-  const lowerKeyword = keyword.toLowerCase();
+  const lowerKeyword = lowerKeywordOverride ?? keyword.toLowerCase();
   let lastIndex = 0;
   let index = lowerText.indexOf(lowerKeyword);
 
@@ -59,20 +60,18 @@ export const highlightKeyword = (
 const escapeRegExp = (value: string): string =>
   value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
-/**
- * 高亮文本中的多个关键字
- */
-export const highlightKeywords = (
-  text: string,
-  keyword: string
-): { text: string; highlight: boolean }[] => {
+const HIGHLIGHT_REGEX_CACHE_LIMIT = 50;
+// 关键词高亮正则缓存，减少重复编译
+const highlightRegexCache = new Map<string, RegExp>();
+
+export const getHighlightRegex = (keyword: string): RegExp | null => {
   const tokens = keyword
     .split(/\s+/)
     .map((token) => token.trim())
     .filter((token) => token.length > 0);
 
   if (tokens.length === 0) {
-    return [{ text, highlight: false }];
+    return null;
   }
 
   const uniqueTokens = Array.from(new Set(tokens))
@@ -81,10 +80,42 @@ export const highlightKeywords = (
 
   const pattern = uniqueTokens.join("|");
   if (pattern.length === 0) {
-    return [{ text, highlight: false }];
+    return null;
+  }
+
+  const cached = highlightRegexCache.get(pattern);
+  if (cached !== undefined) {
+    return cached;
   }
 
   const regex = new RegExp(`(${pattern})`, "gi");
+  highlightRegexCache.set(pattern, regex);
+
+  if (highlightRegexCache.size > HIGHLIGHT_REGEX_CACHE_LIMIT) {
+    // 简单淘汰最早插入项，避免缓存无限增长
+    const firstKey = highlightRegexCache.keys().next().value;
+    if (typeof firstKey === "string") {
+      highlightRegexCache.delete(firstKey);
+    }
+  }
+
+  return regex;
+};
+
+/**
+ * 高亮文本中的多个关键字
+ */
+export const highlightKeywords = (
+  text: string,
+  keyword: string,
+  regexOverride?: RegExp | null
+): { text: string; highlight: boolean }[] => {
+  const regex = regexOverride ?? getHighlightRegex(keyword);
+  if (regex === null) {
+    return [{ text, highlight: false }];
+  }
+
+  regex.lastIndex = 0;
   const parts: { text: string; highlight: boolean }[] = [];
   let lastIndex = 0;
   let match = regex.exec(text);
