Fix: Added styles for empty states on the page. #10703 (#11588)

### What problem does this PR solve?

Fix: Added styles for empty states on the page.
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/next-searches/index.tsx

@@ -1,4 +1,6 @@
 import { CardContainer } from '@/components/card-container';
+import { EmptyCardType } from '@/components/empty/constant';
+import { EmptyAppCard } from '@/components/empty/empty';
 import { IconFont } from '@/components/icon-font';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
@@ -6,6 +8,8 @@ import { Button } from '@/components/ui/button';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useTranslate } from '@/hooks/common-hooks';
 import { Plus } from 'lucide-react';
+import { useCallback, useEffect } from 'react';
+import { useSearchParams } from 'umi';
 import { useFetchSearchList, useRenameSearch } from './hooks';
 import { SearchCard } from './search-card';
 
@@ -27,6 +31,7 @@ export default function SearchList() {
     onSearchRenameOk,
     initialSearchName,
   } = useRenameSearch();
+
   const handleSearchChange = (value: string) => {
     console.log(value);
   };
@@ -35,61 +40,86 @@ export default function SearchList() {
       refetchList();
     });
   };
-  const openCreateModalFun = () => {
+  const openCreateModalFun = useCallback(() => {
     // setIsEdit(false);
     showSearchRenameModal();
-  };
+  }, [showSearchRenameModal]);
   const handlePageChange = (page: number, pageSize: number) => {
     // setIsEdit(false);
     setSearchListParams({ ...searchParams, page, page_size: pageSize });
   };
 
+  const [searchUrl, setSearchUrl] = useSearchParams();
+  const isCreate = searchUrl.get('isCreate') === 'true';
+  useEffect(() => {
+    if (isCreate) {
+      openCreateModalFun();
+      searchUrl.delete('isCreate');
+      setSearchUrl(searchUrl);
+    }
+  }, [isCreate, openCreateModalFun, searchUrl, setSearchUrl]);
+
   return (
     <section className="w-full h-full flex flex-col">
-      <div className="px-8 pt-8">
-        <ListFilterBar
-          icon="searches"
-          title={t('searchApps')}
-          showFilter={false}
-          onSearchChange={(e) => handleSearchChange(e.target.value)}
-        >
-          <Button
-            variant={'default'}
-            onClick={() => {
-              openCreateModalFun();
-            }}
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            {t('createSearch')}
-          </Button>
-        </ListFilterBar>
-      </div>
-      <div className="flex-1">
-        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
-          {list?.data.search_apps.map((x) => {
-            return (
-              <SearchCard
-                key={x.id}
-                data={x}
-                showSearchRenameModal={() => {
-                  showSearchRenameModal(x);
-                }}
-              ></SearchCard>
-            );
-          })}
-        </CardContainer>
-      </div>
-      {list?.data.total && list?.data.total > 0 && (
-        <div className="px-8 mb-4">
-          <RAGFlowPagination
-            current={searchParams.page}
-            pageSize={searchParams.page_size}
-            total={list?.data.total}
-            onChange={handlePageChange}
+      {(!list?.data?.search_apps?.length ||
+        list?.data?.search_apps?.length <= 0) && (
+        <div className="flex w-full items-center justify-center h-[calc(100vh-164px)]">
+          <EmptyAppCard
+            showIcon
+            size="large"
+            className="w-[480px] p-14"
+            type={EmptyCardType.Search}
+            onClick={() => openCreateModalFun()}
           />
         </div>
       )}
-
+      {!!list?.data?.search_apps?.length && (
+        <>
+          <div className="px-8 pt-8">
+            <ListFilterBar
+              icon="searches"
+              title={t('searchApps')}
+              showFilter={false}
+              onSearchChange={(e) => handleSearchChange(e.target.value)}
+            >
+              <Button
+                variant={'default'}
+                onClick={() => {
+                  openCreateModalFun();
+                }}
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                {t('createSearch')}
+              </Button>
+            </ListFilterBar>
+          </div>
+          <div className="flex-1">
+            <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
+              {list?.data.search_apps.map((x) => {
+                return (
+                  <SearchCard
+                    key={x.id}
+                    data={x}
+                    showSearchRenameModal={() => {
+                      showSearchRenameModal(x);
+                    }}
+                  ></SearchCard>
+                );
+              })}
+            </CardContainer>
+          </div>
+          {list?.data.total && list?.data.total > 0 && (
+            <div className="px-8 mb-4">
+              <RAGFlowPagination
+                current={searchParams.page}
+                pageSize={searchParams.page_size}
+                total={list?.data.total}
+                onChange={handlePageChange}
+              />
+            </div>
+          )}
+        </>
+      )}
       {openCreateModal && (
         <RenameDialog
           hideModal={hideSearchRenameModal}