style: playground collapse button

src/pages/playground/components/chat-footer.tsx

@@ -88,7 +88,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
           style={{ textAlign: 'right' }}
         >
           <Space size={20}>
-            <Button
+            {/* <Button
               icon={
                 <IconFont type="icon-code" className="font-size-16"></IconFont>
               }
@@ -96,7 +96,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
               disabled={disabled}
             >
               {intl.formatMessage({ id: 'playground.viewcode' })}
-            </Button>
+            </Button> */}
             {!disabled ? (
               <Button
                 type="primary"

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

@@ -6,7 +6,13 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Spin, Tooltip } from 'antd';
 import _ from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { CHAT_API } from '../apis';
 import { Roles } from '../config';
@@ -19,6 +25,7 @@ import ViewCodeModal from './view-code-modal';
 
 interface MessageProps {
   parameters: any;
+  ref?: any;
 }
 
 interface MessageItemProps {
@@ -27,7 +34,7 @@ interface MessageItemProps {
   uid: number;
 }
 
-const MessageList: React.FC<MessageProps> = (props) => {
+const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { parameters } = props;
   const messageId = useRef<number>(0);
   const [messageList, setMessageList] = useState<MessageItemProps[]>([
@@ -59,6 +66,13 @@ const MessageList: React.FC<MessageProps> = (props) => {
     updateScrollerPosition();
   }, [messageList]);
 
+  useImperativeHandle(ref, () => {
+    return {
+      viewCode() {
+        setShow(true);
+      }
+    };
+  });
   const handleSystemMessageChange = (e: any) => {
     setSystemMessage(e.target.value);
   };
@@ -301,6 +315,6 @@ const MessageList: React.FC<MessageProps> = (props) => {
       ></ViewCodeModal>
     </div>
   );
-};
+});
 
 export default MessageList;

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

src/pages/playground/style/play-ground.less

@@ -7,6 +7,8 @@
     display: flex;
     justify-content: flex-start;
     width: 391px;
+    overflow-x: hidden;
+    transition: width 0.3s ease;
 
     .collapse-btn {
       position: absolute;
@@ -15,12 +17,9 @@
       z-index: 1;
     }
 
-    transition: width 0.3s ease;
-
     &.collapse {
-      width: 33px;
-      padding-left: 32px;
-      // overflow: hidden;
+      width: 0;
+      overflow: hidden;
       transition: width 0.3s ease;
     }
   }