feat: Add Sider to SearchPage #2247 (#2262)

### What problem does this PR solve?

feat: Add Sider to SearchPage #2247

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/knowledge-hooks.ts

@@ -69,7 +69,7 @@ export const useFetchKnowledgeBaseConfiguration = () => {
 export const useNextFetchKnowledgeList = (
   shouldFilterListWithoutDocument: boolean = false,
 ): {
-  list: any[];
+  list: IKnowledge[];
   loading: boolean;
 } => {
   const { data, isFetching: loading } = useQuery({

web/src/pages/search/index.less

@@ -0,0 +1,24 @@
+.searchSide {
+  overflow: auto;
+  height: 100vh;
+  position: fixed !important;
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  scrollbar-width: thin;
+  scrollbar-color: unset;
+
+  .checkGroup {
+    width: 100%;
+    height: 100%;
+  }
+  .list {
+    width: 100%;
+  }
+  .checkbox {
+    width: 100%;
+  }
+  .knowledgeName {
+    width: 120px;
+  }
+}

web/src/pages/search/index.tsx

@@ -1,5 +1,69 @@
+import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { Checkbox, Layout, List, Typography } from 'antd';
+import React, { useCallback } from 'react';
+
+import { CheckboxValueType } from 'antd/es/checkbox/Group';
+import styles from './index.less';
+
+const { Header, Content, Footer, Sider } = Layout;
+
 const SearchPage = () => {
-  return <div>SearchPage</div>;
+  const { list } = useNextFetchKnowledgeList();
+
+  const handleChange = useCallback((checkedValue: CheckboxValueType[]) => {
+    console.log('🚀 ~ handleChange ~ args:', checkedValue);
+  }, []);
+
+  return (
+    <Layout hasSider>
+      <Sider className={styles.searchSide} theme={'light'}>
+        <Checkbox.Group className={styles.checkGroup} onChange={handleChange}>
+          <List
+            bordered
+            dataSource={list}
+            className={styles.list}
+            renderItem={(item) => (
+              <List.Item>
+                <Checkbox value={item.id} className={styles.checkbox}>
+                  <Typography.Text
+                    ellipsis={{ tooltip: item.name }}
+                    className={styles.knowledgeName}
+                  >
+                    {item.name}
+                  </Typography.Text>
+                </Checkbox>
+              </List.Item>
+            )}
+          />
+        </Checkbox.Group>
+      </Sider>
+      <Layout style={{ marginInlineStart: 200 }}>
+        <Header style={{ padding: 0 }} />
+        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+          <div
+            style={{
+              padding: 24,
+              textAlign: 'center',
+            }}
+          >
+            <p>long content</p>
+            {
+              // indicates very long content
+              Array.from({ length: 100 }, (_, index) => (
+                <React.Fragment key={index}>
+                  {index % 20 === 0 && index ? 'more' : '...'}
+                  <br />
+                </React.Fragment>
+              ))
+            }
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>
+          Ant Design ©{new Date().getFullYear()} Created by Ant UED
+        </Footer>
+      </Layout>
+    </Layout>
+  );
 };
 
 export default SearchPage;