feat: Cover the entire search page with a background image #2247 (#2381)

### What problem does this PR solve? feat: Cover the entire search page with a background image #2247 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
infiniflow · Sep 12, 2024 · 9835406 · 9835406
1 parent 6722b3d
commit 9835406
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/web/src/pages/search/index.less b/web/src/pages/search/index.less
@@ -1,4 +1,6 @@
 .searchPage {
+  background-position: center;
+  background-size: cover;
   .card {
     width: 100%;
     :global(.ant-card-body) {
@@ -13,14 +15,18 @@
     font-size: 14px;
     cursor: pointer;
   }
+
+  .mainLayout {
+    background: transparent;
+  }
+}
+
+.transparentSearchSide {
+  background-color: rgb(251 251 251 / 88%) !important;
 }
 
 .searchSide {
-  // height: calc(100vh - 72px);
   position: relative;
-  // position: fixed !important;
-  // top: 72px;
-  // bottom: 0;
   :global(.ant-layout-sider-children) {
     height: auto;
   }
@@ -37,9 +43,11 @@
   }
   .list {
     width: 100%;
-    // height: 100%;
     height: calc(100vh - 152px);
     overflow: auto;
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
   }
   .checkbox {
     width: 100%;
@@ -51,8 +59,6 @@
 
 .firstRenderContent {
   height: 100%;
-  background-position: center;
-  background-size: cover;
 }
 
 .content {

diff --git a/web/src/pages/search/index.tsx b/web/src/pages/search/index.tsx
@@ -86,25 +86,24 @@ const SearchPage = () => {
 
   return (
     <>
-      <Layout className={styles.searchPage}>
+      <Layout
+        className={styles.searchPage}
+        style={{ backgroundImage: `url(${imgUrl})` }}
+      >
         <SearchSidebar
+          isFirstRender={isFirstRender}
           checkedList={checkedList}
           setCheckedList={setCheckedList}
         ></SearchSidebar>
-        <Layout>
+        <Layout className={isFirstRender ? styles.mainLayout : ''}>
           <Content>
             {isFirstRender ? (
               <Flex
                 justify="center"
                 align="center"
                 className={styles.firstRenderContent}
-                style={{ backgroundImage: `url(${imgUrl})` }}
               >
                 <Flex vertical align="center" gap={'large'}>
-                  {/* <Space size={30}>
-                    <img src="/logo.svg" alt="" className={styles.appIcon} />
-                    <span className={styles.appName}>{appConf.appName}</span>
-                  </Space> */}
                   {InputSearch}
                 </Flex>
               </Flex>

diff --git a/web/src/pages/search/sidebar.tsx b/web/src/pages/search/sidebar.tsx
@@ -1,7 +1,10 @@
 import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { UserOutlined } from '@ant-design/icons';
 import type { CheckboxProps } from 'antd';
 import { Avatar, Checkbox, Layout, List, Space, Typography } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { CheckboxValueType } from 'antd/es/checkbox/Group';
+import classNames from 'classnames';
 import {
   Dispatch,
   SetStateAction,
@@ -10,18 +13,21 @@ import {
   useMemo,
 } from 'react';
 
-import { UserOutlined } from '@ant-design/icons';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import styles from './index.less';
 
 const { Sider } = Layout;
 
 interface IProps {
+  isFirstRender: boolean;
   checkedList: string[];
   setCheckedList: Dispatch<SetStateAction<string[]>>;
 }
 
-const SearchSidebar = ({ checkedList, setCheckedList }: IProps) => {
+const SearchSidebar = ({
+  isFirstRender,
+  checkedList,
+  setCheckedList,
+}: IProps) => {
   const { list, loading } = useNextFetchKnowledgeList();
   const ids = useMemo(() => list.map((x) => x.id), [list]);
 
@@ -49,7 +55,13 @@ const SearchSidebar = ({ checkedList, setCheckedList }: IProps) => {
   }, [ids, setCheckedList]);
 
   return (
-    <Sider className={styles.searchSide} theme={'light'} width={240}>
+    <Sider
+      className={classNames(styles.searchSide, {
+        [styles.transparentSearchSide]: isFirstRender,
+      })}
+      theme={'light'}
+      width={240}
+    >
       <Checkbox
         className={styles.modelForm}
         indeterminate={indeterminate}