style: playround params collapse

src/pages/playground/components/params-settings.tsx

@@ -150,7 +150,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </h3>
         <Form.Item<ParamsSettingsFormProps>
           name="model"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <SealSelect
             options={ModelList}
@@ -162,7 +162,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </h3>
         <Form.Item<ParamsSettingsFormProps>
           name="temperature"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <FieldWrapper
             label={renderLabel({
@@ -188,7 +188,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="max_tokens"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <FieldWrapper
             label={renderLabel({
@@ -214,7 +214,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="top_p"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <FieldWrapper
             label={renderLabel({
@@ -240,7 +240,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="seed"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <SealInput.Number
             label="Seed"
@@ -253,7 +253,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="stop"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <SealInput.Input
             label="Stop Sequence"

src/pages/playground/index.tsx

@@ -1,6 +1,8 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useSearchParams } from '@umijs/max';
-import { Divider } from 'antd';
+import { Button, Divider } from 'antd';
+import classNames from 'classnames';
 import { useState } from 'react';
 import GroundLeft from './components/ground-left';
 import ParamsSettings from './components/params-settings';
@@ -10,24 +12,49 @@ const Playground: React.FC = () => {
   const [searchParams] = useSearchParams();
   const selectModel = searchParams.get('model') || '';
   const [params, setParams] = useState({});
+  const [collapse, setCollapse] = useState(false);
 
   return (
-    <>
-      <PageContainer ghost extra={[]}>
-        <div className="play-ground">
-          <div className="chat">
-            <GroundLeft parameters={params}></GroundLeft>
-          </div>
-          <div className="divider-line">
+    <PageContainer ghost extra={[]} className="playground-container">
+      <div className="play-ground">
+        <div className="chat">
+          <GroundLeft parameters={params}></GroundLeft>
+        </div>
+        <div
+          className={classNames('left', {
+            collapse: collapse
+          })}
+        >
+          <Button
+            onClick={() => setCollapse(!collapse)}
+            icon={collapse ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
+            style={{ color: 'var(--ant-color-text-tertiary)' }}
+            size="small"
+            type="text"
+            className="collapse-btn"
+          ></Button>
+          <div
+            className={classNames('divider-line', {
+              collapse: collapse
+            })}
+          >
             <Divider type="vertical" />
           </div>
-
-          <div className="params">
-            <ParamsSettings setParams={setParams} selectedModel={selectModel} />
+          <div className={classNames('params')}>
+            <div
+              className={classNames('params-box', {
+                collapse: collapse
+              })}
+            >
+              <ParamsSettings
+                setParams={setParams}
+                selectedModel={selectModel}
+              />
+            </div>
           </div>
         </div>
-      </PageContainer>
-    </>
+      </div>
+    </PageContainer>
   );
 };
 

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

@@ -2,6 +2,28 @@
   display: flex;
   align-items: flex-start;
 
+  .left {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    width: 391px;
+
+    .collapse-btn {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+
+    transition: width 0.3s ease;
+
+    &.collapse {
+      width: 0;
+      padding-left: 32px;
+      transition: width 0.3s ease;
+    }
+  }
+
   .chat {
     flex: 1;
     display: flex;
@@ -9,16 +31,38 @@
   }
 
   .params {
-    padding: 20px;
-    padding-top: 0;
+    overflow: hidden;
+    height: calc(100vh - 136px);
+
+    .collapse {
+      width: 0;
+      overflow: hidden;
+    }
+  }
+
+  .params-box {
+    padding-inline: 32px;
+    height: 100%;
+    overflow-y: auto;
   }
 
   .divider-line {
     width: 1px;
 
+    &.collapse {
+      width: 0;
+      transition: width 0.3s;
+    }
+
     .ant-divider {
       margin: 0;
-      min-height: calc(100vh - 136px);
+      height: calc(100vh - 136px);
     }
   }
 }
+
+.playground-container {
+  .ant-pro-page-container-children-container {
+    padding-right: 0;
+  }
+}