refactor: ui/ux

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

@@ -9,7 +9,10 @@
     justify-content: space-between;
     flex-direction: column;
     position: relative;
-    height: calc(100vh - @HEADER_HEIGHT);
+    height: calc(
+      100vh - @HEADER_HEIGHT - var(--page-content-padding) -
+        var(--page-header-height)
+    );
     width: calc(100% - 390px);
 
     .message-list-wrap {

src/pages/playground/style/params-container.module.less

@@ -5,7 +5,10 @@
   width: 390px;
   border-left: 1px solid var(--ant-color-split);
   transition: width 0.3s ease;
-  height: calc(100vh - @HEADER_HEIGHT);
+  height: calc(
+    100vh - @HEADER_HEIGHT - var(--page-content-padding) -
+      var(--page-header-height)
+  );
   padding-top: 16px;
   display: flex;
   flex-direction: column;

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

@@ -1,4 +1,4 @@
-@HEADER_HEIGHT: 56px;
+@HEADER_HEIGHT: 48px;
 
 .play-ground {
   display: flex;
@@ -39,7 +39,10 @@
 
   .params {
     overflow: hidden;
-    height: calc(100vh - @HEADER_HEIGHT);
+    height: calc(
+      100vh - var(--page-header-height) - var(--page-content-padding) -
+        @HEADER_HEIGHT
+    );
 
     .collapse {
       width: 0;
@@ -48,7 +51,7 @@
   }
 
   .params-box {
-    padding-inline: 32px;
+    padding-inline: var(--layout-content-inlinepadding);
     height: 100%;
     width: 390px;
     overflow-y: auto;
@@ -70,7 +73,10 @@
 
     .ant-divider {
       margin: 0;
-      height: calc(100vh - 136px);
+      height: calc(
+        100vh - var(--page-header-height) - var(--page-content-padding) -
+          @HEADER_HEIGHT
+      );
     }
   }
 }
@@ -85,20 +91,6 @@
     position: relative;
   }
 
-  &.chat {
-    .ant-page-header {
-      // &::after {
-      //   position: absolute;
-      //   content: '';
-      //   left: 32px;
-      //   right: 32px;
-      //   bottom: 0;
-      //   height: 1px;
-      //   border-bottom: 1px solid var(--ant-color-split);
-      // }
-    }
-  }
-
   &.compare {
     .ant-pro-page-container-children-container {
       padding-inline: 0;

src/pages/playground/style/rerank.less

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding-inline: 32px;
+    padding-inline: var(--layout-content-inlinepadding);
     padding-bottom: 16px;
 
     .documents {

src/pages/playground/style/speech-to-text.less

@@ -1,5 +1,5 @@
 .speech-to-text {
-  padding: 32px;
+  padding: var(--layout-content-inlinepadding);
   height: 100%;
   display: flex;
   gap: 30px;