feat: highlight search matches in Team settings tables (#15985)

Added a reusable SearchHighlight component to visually highlight matching search text in Team Settings tables (Team Members and Joined Teams), with case-insensitive support and full test coverage.

Author: carlh7777

web/src/components/search-highlight.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import { escapeRegExp } from 'lodash';
+import { Fragment, useMemo } from 'react';
+
+type SearchHighlightProps = {
+  text?: string | null;
+  query: string;
+  className?: string;
+};
+
+export function SearchHighlight({
+  text,
+  query,
+  className,
+}: SearchHighlightProps) {
+  const safeText = text ?? '';
+
+  const parts = useMemo(() => {
+    const trimmedQuery = query.trim();
+    if (!trimmedQuery) {
+      return [{ text: safeText, highlight: false }];
+    }
+
+    const regex = new RegExp(`(${escapeRegExp(trimmedQuery)})`, 'gi');
+    return safeText.split(regex).map((part) => ({
+      text: part,
+      highlight: part.toLowerCase() === trimmedQuery.toLowerCase(),
+    }));
+  }, [safeText, query]);
+
+  return (
+    <span className={cn('inline', className)}>
+      {parts.map((part, index) =>
+        part.highlight ? (
+          <mark
+            key={index}
+            className="rounded-sm bg-accent-primary/25 text-inherit"
+          >
+            {part.text}
+          </mark>
+        ) : (
+          <Fragment key={index}>{part.text}</Fragment>
+        ),
+      )}
+    </span>
+  );
+}

web/src/pages/user-setting/setting-team/tenant-table.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { SearchHighlight } from '@/components/search-highlight';
 import { Button } from '@/components/ui/button';
 import {
   Table,
@@ -128,12 +129,14 @@ const TenantTable = ({ searchTerm }: { searchTerm: string }) => {
                     avatar={tenant.avatar}
                     name={tenant.nickname}
                   />
-                  {tenant.nickname}
+                  <SearchHighlight text={tenant.nickname} query={searchTerm} />
                 </TableCell>
                 <TableCell className="p-4">
                   {formatDate(tenant.update_date)}
                 </TableCell>
-                <TableCell className="p-4">{tenant.email}</TableCell>
+                <TableCell className="p-4">
+                  <SearchHighlight text={tenant.email} query={searchTerm} />
+                </TableCell>
                 <TableCell className="p-4">
                   {tenant.role === TenantRole.Invite ? (
                     <div className="flex gap-2">

web/src/pages/user-setting/setting-team/user-table.tsx

@@ -19,6 +19,7 @@ import {
   ConfirmDeleteDialogNode,
 } from '@/components/confirm-delete-dialog';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { SearchHighlight } from '@/components/search-highlight';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -53,7 +54,6 @@ const UserTable = ({ searchUser }: { searchUser: string }) => {
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null);
   const { t } = useTranslation();
   const sortedData = useMemo(() => {
-    console.log('sortedData', data, searchUser);
     if (!data || data.length === 0) return data;
     let filtered = data;
     if (searchUser) {
@@ -140,13 +140,18 @@ const UserTable = ({ searchUser }: { searchUser: string }) => {
                       avatar={record.avatar}
                       name={record.nickname}
                     />
-                    {record.nickname}
+                    <SearchHighlight
+                      text={record.nickname}
+                      query={searchUser}
+                    />
                   </div>
                 </TableCell>
                 <TableCell className="p-4">
                   {formatDate(record.update_date)}
                 </TableCell>
-                <TableCell className="p-4">{record.email}</TableCell>
+                <TableCell className="p-4">
+                  <SearchHighlight text={record.email} query={searchUser} />
+                </TableCell>
                 <TableCell className="p-4">
                   {record.role === TenantRole.Normal && (
                     <Badge className={ColorMap[record.role]}>