Fix: Home and team page style adjustment, and some bug fixes #10703 (#10805)

### What problem does this PR solve?

Fix: Home and team page style adjustment, and some bug fixes #10703

### Type of change

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

web/src/pages/home/agent-list.tsx

@@ -1,10 +1,10 @@
+import { HomeCard } from '@/components/home-card';
 import { MoreButton } from '@/components/more-button';
 import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
 import { AgentDropdown } from '../agents/agent-dropdown';
 import { useRenameAgent } from '../agents/use-rename-agent';
-import { ApplicationCard } from './application-card';
 
 export function Agents() {
   const { data } = useFetchAgentListByPage();
@@ -21,9 +21,9 @@ export function Agents() {
   return (
     <>
       {data.slice(0, 10).map((x) => (
-        <ApplicationCard
+        <HomeCard
           key={x.id}
-          app={x}
+          data={{ name: x.title, ...x } as any}
           onClick={navigateToAgent(x.id)}
           moreDropdown={
             <AgentDropdown
@@ -33,7 +33,7 @@ export function Agents() {
               <MoreButton></MoreButton>
             </AgentDropdown>
           }
-        ></ApplicationCard>
+        ></HomeCard>
       ))}
       {agentRenameVisible && (
         <RenameDialog

web/src/pages/home/application-card.tsx

@@ -48,7 +48,7 @@ export type SeeAllAppCardProps = {
 
 export function SeeAllAppCard({ click }: SeeAllAppCardProps) {
   return (
-    <Card className="w-64 min-h-[76px]" onClick={click}>
+    <Card className="w-full min-h-[76px]" onClick={click}>
       <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>

web/src/pages/home/applications.tsx

@@ -1,3 +1,4 @@
+import { CardSineLineContainer } from '@/components/card-singleline-container';
 import { IconFont } from '@/components/icon-font';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
@@ -34,7 +35,7 @@ export function Applications() {
   );
 
   const handleChange = (path: SegmentedValue) => {
-    setVal(path as string);
+    setVal(path as Routes);
   };
 
   return (
@@ -51,16 +52,19 @@ export function Applications() {
           options={options}
           value={val}
           onChange={handleChange}
-          className="bg-bg-card border border-border-button rounded-full"
-          activeClassName="bg-text-primary border-none"
+          buttonSize="xl"
+          // className="bg-bg-card border border-border-button rounded-lg"
+          // activeClassName="bg-text-primary border-none rounded-lg"
         ></Segmented>
       </div>
-      <div className="flex flex-wrap gap-4">
+      {/* <div className="flex flex-wrap gap-4"> */}
+      <CardSineLineContainer>
         {val === Routes.Agents && <Agents></Agents>}
         {val === Routes.Chats && <ChatList></ChatList>}
         {val === Routes.Searches && <SearchList></SearchList>}
         {<SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
-      </div>
+      </CardSineLineContainer>
+      {/* </div> */}
     </section>
   );
 }

web/src/pages/home/chat-list.tsx

@@ -1,3 +1,4 @@
+import { HomeCard } from '@/components/home-card';
 import { MoreButton } from '@/components/more-button';
 import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
@@ -5,7 +6,6 @@ import { useFetchDialogList } from '@/hooks/use-chat-request';
 import { useTranslation } from 'react-i18next';
 import { ChatDropdown } from '../next-chats/chat-dropdown';
 import { useRenameChat } from '../next-chats/hooks/use-rename-chat';
-import { ApplicationCard } from './application-card';
 
 export function ChatList() {
   const { t } = useTranslation();
@@ -24,12 +24,11 @@ export function ChatList() {
   return (
     <>
       {data.dialogs.slice(0, 10).map((x) => (
-        <ApplicationCard
+        <HomeCard
           key={x.id}
-          app={{
+          data={{
             avatar: x.icon,
-            title: x.name,
-            update_time: x.update_time,
+            ...x,
           }}
           onClick={navigateToChat(x.id)}
           moreDropdown={
@@ -37,7 +36,7 @@ export function ChatList() {
               <MoreButton></MoreButton>
             </ChatDropdown>
           }
-        ></ApplicationCard>
+        ></HomeCard>
       ))}
       {chatRenameVisible && (
         <RenameDialog

web/src/pages/home/datasets.tsx

@@ -1,3 +1,4 @@
+import { CardSineLineContainer } from '@/components/card-singleline-container';
 import { IconFont } from '@/components/icon-font';
 import { RenameDialog } from '@/components/rename-dialog';
 import { CardSkeleton } from '@/components/ui/skeleton';
@@ -30,7 +31,8 @@ export function Datasets() {
             <CardSkeleton />
           </div>
         ) : (
-          <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 max-h-[78vh] overflow-auto">
+          // <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 max-h-[78vh] overflow-auto">
+          <CardSineLineContainer>
             {kbs
               ?.slice(0, 6)
               .map((dataset) => (
@@ -43,7 +45,8 @@ export function Datasets() {
             <div className="min-h-24">
               <SeeAllCard></SeeAllCard>
             </div>
-          </div>
+          </CardSineLineContainer>
+          // </div>
         )}
       </div>
       {datasetRenameVisible && (

web/src/pages/home/search-list.tsx

@@ -1,10 +1,10 @@
+import { HomeCard } from '@/components/home-card';
 import { IconFont } from '@/components/icon-font';
 import { MoreButton } from '@/components/more-button';
 import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchSearchList, useRenameSearch } from '../next-searches/hooks';
 import { SearchDropdown } from '../next-searches/search-dropdown';
-import { ApplicationCard } from './application-card';
 
 export function SearchList() {
   const { data, refetch: refetchList } = useFetchSearchList();
@@ -25,13 +25,9 @@ export function SearchList() {
   return (
     <>
       {data?.data.search_apps.slice(0, 10).map((x) => (
-        <ApplicationCard
+        <HomeCard
           key={x.id}
-          app={{
-            avatar: x.avatar,
-            title: x.name,
-            update_time: x.update_time,
-          }}
+          data={x}
           onClick={navigateToSearch(x.id)}
           moreDropdown={
             <SearchDropdown
@@ -41,7 +37,7 @@ export function SearchList() {
               <MoreButton></MoreButton>
             </SearchDropdown>
           }
-        ></ApplicationCard>
+        ></HomeCard>
       ))}
       {openCreateModal && (
         <RenameDialog