style: playground collapse button

src/pages/playground/index.tsx

@@ -1,38 +1,71 @@
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import IconFont from '@/components/icon-font';
 import { PageContainer } from '@ant-design/pro-components';
-import { useSearchParams } from '@umijs/max';
+import { useIntl, useSearchParams } from '@umijs/max';
 import { Button, Divider } from 'antd';
 import classNames from 'classnames';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import GroundLeft from './components/ground-left';
 import ParamsSettings from './components/params-settings';
 import './style/play-ground.less';
 
 const Playground: React.FC = () => {
+  const intl = useIntl();
   const [searchParams] = useSearchParams();
   const selectModel = searchParams.get('model') || '';
   const [params, setParams] = useState({});
   const [collapse, setCollapse] = useState(false);
+  const groundLeftRef = useRef<any>(null);
+
+  const handleViewCode = () => {
+    groundLeftRef.current?.viewCode?.();
+  };
 
   return (
-    <PageContainer ghost extra={[]} className="playground-container">
+    <PageContainer
+      ghost
+      extra={[
+        <>
+          <Button
+            size="middle"
+            onClick={handleViewCode}
+            icon={
+              <IconFont type="icon-code" className="font-size-16"></IconFont>
+            }
+          >
+            {intl.formatMessage({ id: 'playground.viewcode' })}
+          </Button>
+          <Button
+            size="middle"
+            className="m-l-5"
+            onClick={() => setCollapse(!collapse)}
+            icon={
+              <IconFont
+                type="icon-a-layout6-line"
+                className="font-size-16"
+              ></IconFont>
+            }
+          ></Button>
+        </>
+      ]}
+      className="playground-container"
+    >
       <div className="play-ground">
         <div className="chat">
-          <GroundLeft parameters={params}></GroundLeft>
+          <GroundLeft parameters={params} ref={groundLeftRef}></GroundLeft>
         </div>
         <div
           className={classNames('left', {
             collapse: collapse
           })}
         >
-          <Button
+          {/* <Button
             onClick={() => setCollapse(!collapse)}
             icon={collapse ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
             style={{ color: 'var(--ant-color-text-tertiary)' }}
             size="small"
             type="text"
             className="collapse-btn"
-          ></Button>
+          ></Button> */}
           <div
             className={classNames('divider-line', {
               collapse: collapse