style: ui style

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

@@ -39,6 +39,13 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
     },
     { enabled: !disabled }
   );
+  useHotkeys(
+    HotKeys.CREATE.join(','),
+    (e) => {
+      onNewMessage();
+    },
+    { enabled: !disabled }
+  );
 
   return (
     <div className="chat-footer">
@@ -52,6 +59,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
               onClick={onNewMessage}
             >
               {intl.formatMessage({ id: 'playground.newMessage' })}
+              <span className="m-l-5 opct-7">CTRL+SHIFT+ N</span>
             </Button>
             <Button
               icon={<DeleteOutlined></DeleteOutlined>}

src/pages/playground/style/chat-footer.less

@@ -1,7 +1,4 @@
 .chat-footer {
   display: flex;
   align-items: center;
-  padding-inline: 0 32px;
-  height: 100px;
-  // box-shadow: 0px -1px 2px 0px var(--ant-color-border);
 }

src/pages/playground/style/custom-label.less

@@ -9,8 +9,9 @@
     top: -14px;
     right: 26px;
     width: 80px;
-    border-radius: var(--border-radius-small);
+    border-radius: 8px;
     text-align: center;
+    border: 1px solid var(--ant-color-border) !important;
 
     :global(.ant-input-number-input) {
       text-align: center !important;

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

@@ -1,7 +1,10 @@
 .ground-left {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
   position: relative;
-  height: calc(100vh - 84px);
-  padding-bottom: 120px;
+  height: calc(100vh - 136px);
+  // padding-bottom: 120px;
   padding-right: 32px;
 
   .message-list-wrap {
@@ -10,8 +13,8 @@
   }
 
   .ground-left-footer {
-    position: absolute;
-    bottom: 20px;
-    width: 100%;
+    // position: absolute;
+    // bottom: 20px;
+    // width: 100%;
   }
 }

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

@@ -9,8 +9,8 @@
   }
 
   .params {
-    // width: 465px;
     padding: 20px;
+    padding-top: 0;
   }
 
   .divider-line {
@@ -18,7 +18,7 @@
 
     .ant-divider {
       margin: 0;
-      min-height: calc(100vh - 84px);
+      min-height: calc(100vh - 136px);
     }
   }
 }