优化查询，增加标题高亮关键字

src/pages/videos/list/index.tsx

@@ -41,6 +41,7 @@ const Video = () => {
   const { data: category, isLoading: isCategoryFetching } = useAtomValue(categoryByIdAtom)
   const [ open, setOpen ] = useState(false)
   const [ openFilter, setFilterOpen ] = useState(false)
+  const [ searchKey, setSearchKey ] = useState(search?.title)
 
   const columns = useMemo(() => {
     return [
@@ -69,6 +70,12 @@ const Video = () => {
         colProps: {
           span: 8
         },
+        render: (_text, record) => {
+          //高亮搜索关键字, 从search.title中获取
+          const title = record.title?.replace?.(new RegExp(`(${search?.title})`, 'ig'), '<span class="ant-pro-table-highlight">$1</span>')
+
+          return <span dangerouslySetInnerHTML={{ __html: title }}></span>
+        }
       },
       {
         'title': t(`${i18nPrefix}.columns.title_sub`, 'TitleSub'),
@@ -79,6 +86,12 @@ const Video = () => {
         },
         colProps: {
           span: 16
+        },
+        render: (_text, record) => {
+          //高亮搜索关键字, 从search.title中获取
+          const title = record.title_sub?.replace?.(new RegExp(`(${search?.title_sub})`, 'ig'), '<span class="ant-pro-table-highlight">$1</span>')
+
+          return <span dangerouslySetInnerHTML={{ __html: title }}></span>
         }
       },
       {
@@ -558,6 +571,7 @@ const Video = () => {
 
   useEffect(() => {
 
+    setSearchKey(search?.title)
     filterForm.setFieldsValue(search)
 
   }, [ search ])
@@ -575,19 +589,23 @@ const Video = () => {
                     headerTitle={t(`${i18nPrefix}.title`, '视频管理')}
                     toolbar={{
                       search: {
-                        loading: isFetching && !!search.key,
+                        loading: isFetching && !!search.title,
                         onSearch: (value: string) => {
                           setSearch(prev => ({
                             ...prev,
-                            key: value
+                            title: value
                           }))
                         },
                         allowClear: true,
+                        onChange: (e) => {
+                          setSearchKey(e.target?.value)
+                        },
+                        value: searchKey,
                         placeholder: t(`${i18nPrefix}.placeholder`, '输入视频名称')
                       },
                       actions: [
                         <Tooltip key={'filter'} title={t(`${i18nPrefix}.filter.tooltip`, '高级查询')}>
-                          <Badge count={ getValueCount(search) }>
+                          <Badge count={getValueCount(search)}>
                             <Button
                                     onClick={() => {
                                       setFilterOpen(true)
@@ -714,6 +732,7 @@ const Video = () => {
                                   <Space>
                                     <Button onClick={() => {
                                       props.reset()
+
                                     }}>{props.searchConfig?.resetText}</Button>
                                     <Button type="primary"
                                             onClick={() => {
@@ -745,16 +764,9 @@ const Video = () => {
                         }
                       })
 
-                      if (Object.keys(values).length === 0) {
-                        setSearch({})
-                      } else {
-                        setSearch(prev => {
-                          return {
-                            ...prev,
-                            ...values
-                          }
-                        })
-                      }
+                      setSearch(values)
+
+
                     }}
                     columns={columns.filter(item => !item.hideInSearch) as ProFormColumnsType[]}/>
           </ListPageLayout>

src/pages/videos/list/style.ts

@@ -15,6 +15,9 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
             height: calc(100vh - 350px)
           }
         }
+      .ant-pro-table-highlight{
+        color: red;
+      }
     `
 
     return {