From d4b0cd859912400092e940b32dddbe6a68dcd14e Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Mon, 1 Sep 2025 18:52:32 +0800
Subject: [PATCH] Fix: Optimize page layout and style #3221 (#9852)

### What problem does this PR solve?

Fix: Optimize page layout and style #3221

- Added the cursor-pointer class to the logo in the Header component
- Added an icon property to the ListFilterBar in the Agents and ChatList
components
- Adjusted the Dataset page layout and set a minimum width
- Optimized the DatasetWrapper page layout and added the overflow-auto
class
- Simplified the search icon in the SearchList component

### Type of change

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

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>
---
 web/src/layouts/next-header.tsx         | 2 +-
 web/src/pages/agents/index.tsx          | 1 +
 web/src/pages/dataset/dataset/index.tsx | 2 +-
 web/src/pages/dataset/index.tsx         | 2 +-
 web/src/pages/next-chats/index.tsx      | 1 +
 web/src/pages/next-searches/index.tsx   | 6 +-----
 6 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/web/src/layouts/next-header.tsx b/web/src/layouts/next-header.tsx
index da8819367..f7d7c9fb3 100644
--- a/web/src/layouts/next-header.tsx
+++ b/web/src/layouts/next-header.tsx
@@ -111,7 +111,7 @@ export function Header() {
         <img
           src={'/logo.svg'}
           alt="logo"
-          className="size-10 mr-[12]"
+          className="size-10 mr-[12] cursor-pointer"
           onClick={handleLogoClick}
         />
         <a
diff --git a/web/src/pages/agents/index.tsx b/web/src/pages/agents/index.tsx
index 69d8f31ad..1fd77647a 100644
--- a/web/src/pages/agents/index.tsx
+++ b/web/src/pages/agents/index.tsx
@@ -39,6 +39,7 @@ export default function Agents() {
           title="Agents"
           searchString={searchString}
           onSearchChange={handleInputChange}
+          icon="agent"
         >
           <Button onClick={navigateToAgentTemplates}>
             <Plus className="mr-2 h-4 w-4" />
diff --git a/web/src/pages/dataset/dataset/index.tsx b/web/src/pages/dataset/dataset/index.tsx
index 5432fe129..41a523fb9 100644
--- a/web/src/pages/dataset/dataset/index.tsx
+++ b/web/src/pages/dataset/dataset/index.tsx
@@ -59,7 +59,7 @@ export default function Dataset() {
     setRowSelection,
   });
   return (
-    <section className="p-5">
+    <section className="p-5 min-w-[880px]">
       <ListFilterBar
         title="Dataset"
         onSearchChange={handleInputChange}
diff --git a/web/src/pages/dataset/index.tsx b/web/src/pages/dataset/index.tsx
index 0f33d6a79..3cb4e2bc7 100644
--- a/web/src/pages/dataset/index.tsx
+++ b/web/src/pages/dataset/index.tsx
@@ -39,7 +39,7 @@ export default function DatasetWrapper() {
       </PageHeader>
       <div className="flex flex-1 min-h-0">
         <SideBar></SideBar>
-        <div className="flex-1">
+        <div className="flex-1 overflow-auto">
           <Outlet />
         </div>
       </div>
diff --git a/web/src/pages/next-chats/index.tsx b/web/src/pages/next-chats/index.tsx
index 3d71bc0c4..95ee6b763 100644
--- a/web/src/pages/next-chats/index.tsx
+++ b/web/src/pages/next-chats/index.tsx
@@ -39,6 +39,7 @@ export default function ChatList() {
       <div className="px-8 pt-8">
         <ListFilterBar
           title="Chat apps"
+          icon="chat"
           onSearchChange={handleInputChange}
           searchString={searchString}
         >
diff --git a/web/src/pages/next-searches/index.tsx b/web/src/pages/next-searches/index.tsx
index f115b459c..fb9cad54c 100644
--- a/web/src/pages/next-searches/index.tsx
+++ b/web/src/pages/next-searches/index.tsx
@@ -114,11 +114,7 @@ export default function SearchList() {
     <section className="w-full h-full flex flex-col">
       <div className="px-8 pt-8">
         <ListFilterBar
-          icon={
-            <div className="rounded-sm bg-emerald-400 bg-gradient-to-t from-emerald-400 via-emerald-400 to-emerald-200 p-1 size-6 flex justify-center items-center">
-              <Search size={14} className="font-bold m-auto" />
-            </div>
-          }
+          icon="search"
           title="Search apps"
           showFilter={false}
           onSearchChange={(e) => handleSearchChange(e.target.value)}