refactor: page layout

src/pages/playground/components/ground-stt.tsx

@@ -5,6 +5,7 @@ import AudioPlayer from '@/components/audio-player';
 import CopyButton from '@/components/copy-button';
 import IconFont from '@/components/icon-font';
 import UploadAudio from '@/components/upload-audio';
+import { HEADER_HEIGHT } from '@/config/constants';
 import routeCachekey from '@/config/route-cachekey';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { useCancelToken } from '@/hooks/use-request-token';
@@ -13,7 +14,6 @@ import { SendOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
 import { Button, Spin, Tooltip } from 'antd';
 import classNames from 'classnames';
-import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
   forwardRef,
   useCallback,
@@ -289,7 +289,7 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
     <div
       className="ground-left-wrapper"
       style={{
-        height: 'calc(100vh - 72px)'
+        height: `calc(100vh - ${HEADER_HEIGHT}px)`
       }}
     >
       <div className="ground-left">

src/pages/playground/components/multiple-chat/index.tsx

@@ -1,6 +1,6 @@
+import { HEADER_HEIGHT } from '@/config/constants';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import _ from 'lodash';
-import 'overlayscrollbars/overlayscrollbars.css';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CompareContext from '../../config/compare-context';
 import {
@@ -39,7 +39,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
   const modelsCounterMap = useRef<Record<string, number>>({});
   const modelRefs = useRef<any>({});
   const chatListScrollRef = useRef<any>(null);
-  const boxHeight = 'calc(100vh - 72px)';
+  const boxHeight = `calc(100vh - ${HEADER_HEIGHT}px)`;
   const [actions, setActions] = useState<MessageItemAction[]>([
     'upload',
     'delete',

src/pages/playground/components/view-code-buttons.tsx

@@ -0,0 +1,40 @@
+import { useIntl } from '@umijs/max';
+import { Button, Space } from 'antd';
+import React from 'react';
+import IconFont from '../../../components/icon-font';
+
+const ViewCodeButtons: React.FC<{
+  handleViewCode: () => void;
+  handleToggleCollapse: () => void;
+  activeKey: string;
+}> = ({ handleViewCode, handleToggleCollapse, activeKey }) => {
+  const intl = useIntl();
+
+  if (activeKey === 'compare') {
+    return null;
+  }
+
+  return (
+    <Space key="buttons" style={{ marginRight: 8 }}>
+      <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>
+  );
+};
+
+export default ViewCodeButtons;