refactor: page layout

src/pages/playground/index.tsx

@@ -1,21 +1,32 @@
-import IconFont from '@/components/icon-font';
 import breakpoints from '@/config/breakpoints';
 import HotKeys from '@/config/hotkeys';
 import useWindowResize from '@/hooks/use-window-resize';
+import { ExtraContent } from '@/layouts/extraRender';
 import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
+import { useMemoizedFn } from 'ahooks';
+import { Divider, Segmented, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import styled from 'styled-components';
+import { PageContainerInner } from '../_components/page-box';
 import { queryModelsList } from './apis';
 import GroundLeft from './components/ground-left';
 import MultipleChat from './components/multiple-chat';
+import ViewCodeButtons from './components/view-code-buttons';
 import './style/play-ground.less';
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+  padding-inline: 32px;
+`;
+
 const Playground: React.FC = () => {
   const intl = useIntl();
   const { size } = useWindowResize();
@@ -40,27 +51,28 @@ const Playground: React.FC = () => {
     ];
   }, [intl]);
 
-  const handleViewCode = useCallback(() => {
+  const handleViewCode = useMemoizedFn(() => {
     if (activeKey === 'reranker') {
       groundRerankerRef.current?.viewCode?.();
     } else if (activeKey === 'chat') {
       groundLeftRef.current?.viewCode?.();
     }
-  }, [activeKey]);
+  });
 
-  const handleToggleCollapse = useCallback(() => {
+  const handleToggleCollapse = useMemoizedFn(() => {
     if (activeKey === 'reranker') {
       groundRerankerRef.current?.setCollapse?.();
       return;
     }
     groundLeftRef.current?.setCollapse?.();
-  }, [activeKey]);
+  });
 
   const items: TabsProps['items'] = useMemo(() => {
     return [
       {
         key: 'chat',
         label: 'Chat',
+        icon: <MessageOutlined />,
         children: (
           <GroundLeft ref={groundLeftRef} modelList={modelList}></GroundLeft>
         )
@@ -68,6 +80,7 @@ const Playground: React.FC = () => {
       {
         key: 'compare',
         label: 'Compare',
+        icon: <OneToOneOutlined />,
         children: <MultipleChat modelList={modelList} loaded={loaded} />
       }
     ];
@@ -105,33 +118,6 @@ const Playground: React.FC = () => {
     fetchData();
   }, []);
 
-  const renderExtra = useMemo(() => {
-    if (activeKey === 'compare') {
-      return false;
-    }
-    return (
-      <Space key="buttons">
-        <Button
-          size="middle"
-          onClick={handleViewCode}
-          icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
-        >
-          {intl.formatMessage({ id: 'playground.viewcode' })}
-        </Button>
-        <Button
-          size="middle"
-          onClick={handleToggleCollapse}
-          icon={
-            <IconFont
-              type="icon-a-layout6-line"
-              className="font-size-16"
-            ></IconFont>
-          }
-        ></Button>
-      </Space>
-    );
-  }, [activeKey, intl, handleViewCode, handleToggleCollapse]);
-
   const header = useMemo(() => {
     return {
       title: (
@@ -148,11 +134,7 @@ const Playground: React.FC = () => {
             ></Segmented>
           }
         </div>
-      ),
-      style: {
-        paddingInline: 'var(--layout-content-header-inlinepadding)'
-      },
-      breadcrumb: {}
+      )
     };
   }, [optionsList]);
 
@@ -169,21 +151,33 @@ const Playground: React.FC = () => {
   );
 
   return (
-    <PageContainer
-      ghost
-      header={header}
-      extra={renderExtra}
+    <PageContainerInner
       className={classNames('playground-container', {
         compare: activeKey === 'compare',
         chat: activeKey !== 'compare'
       })}
+      header={header}
+      extra={[
+        <ViewCodeButtons
+          handleViewCode={handleViewCode}
+          handleToggleCollapse={handleToggleCollapse}
+          activeKey={activeKey}
+          key="view-code-buttons"
+        />,
+        <Divider
+          key="divider"
+          type="vertical"
+          style={{ height: 24, marginInline: 16 }}
+        />,
+        <ExtraContent key="extra-content" />
+      ]}
     >
       <div className="play-ground">
         <div className="chat">
           <Tabs items={items} activeKey={activeKey}></Tabs>
         </div>
       </div>
-    </PageContainer>
+    </PageContainerInner>
   );
 };