chore: playground layout

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

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

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

@@ -0,0 +1,68 @@
+.chatEmpty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 200px;
+  flex-direction: column;
+  .logo {
+    height: 60px;
+    width: 60px;
+    margin-block: 20px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .tips {
+    margin-top: 20px;
+  }
+}
+
+.chatContent {
+  width: max(50%, 500px);
+}
+.chatMessageItem {
+  margin-bottom: 12px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-inline: 44px 16px;
+  .name {
+    padding-block: 8px 16px;
+  }
+  .content {
+    padding: 8px 12px;
+    border-radius: var(--border-radius-base);
+    background-color: var(--color-fill-3);
+    font-size: var(--font-size-base);
+  }
+  .contentWrap {
+    position: relative;
+    padding-right: 45px;
+    &:hover .edit {
+      display: block;
+    }
+    .edit {
+      display: none;
+      position: absolute;
+      top: -10px;
+      right: 0;
+      padding: 8px;
+    }
+  }
+  .img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+.ground-left {
+  position: relative;
+  height: 100vh;
+  padding-bottom: 120px;
+  .message-list-wrap {
+    max-height: calc(100vh - 152px);
+    overflow-y: auto;
+  }
+  .ground-left-footer {
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+  }
+}

src/pages/playground/style/message-input.less

@@ -0,0 +1,63 @@
+.ant-pro-footer-bar {
+  padding-block: 20px;
+  padding-bottom: 30px;
+  border: none;
+  .ant-pro-footer-bar-right {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.messageInput {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max(50%, 500px);
+  background-color: var(--color-fill-1);
+  border-radius: 30px;
+  padding-right: 50px;
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+  &:focus-within {
+    border-color: var(--ant-input-active-border-color);
+    box-shadow: var(--ant-input-active-shadow);
+    background-color: var(--color-white-1);
+    transition: all 0.2s ease;
+    &:hover {
+      background-color: var(--color-white-1);
+    }
+  }
+
+  &:hover {
+    background: var(--ant-color-fill-secondary);
+    transition: background 0.2s ease;
+  }
+  textarea {
+    padding: 16px;
+    border-radius: 30px;
+    background-color: transparent;
+  }
+  textarea::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  textarea::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+  }
+
+  textarea::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+    border-radius: 6px;
+  }
+  .send-btn {
+    position: absolute;
+    right: 10px;
+    bottom: 11px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: rotate(-30deg);
+  }
+}

src/pages/playground/style/message-item.less

@@ -0,0 +1,16 @@
+.message-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  .role-type {
+    margin-right: 12px;
+    .ant-btn {
+      text-align: left;
+      width: 100px;
+    }
+  }
+  .message-content-input {
+    flex: 1;
+  }
+}

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

@@ -0,0 +1,20 @@
+.play-ground {
+  display: flex;
+  align-items: flex-start;
+  .chat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .params {
+    // width: 465px;
+    padding: 20px;
+  }
+  .divider-line {
+    width: 1px;
+    .ant-divider {
+      margin: 0;
+      min-height: 100vh;
+    }
+  }
+}

src/pages/playground/style/reference-params.less

@@ -0,0 +1,8 @@
+.reference-params {
+  display: flex;
+  cursor: pointer;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  color: var(--ant-orange);
+}