style: playground style

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

@@ -15,10 +15,6 @@
     cursor: pointer;
     padding: 2px 4px;
     border-radius: var(--border-radius-mini);
-
-    &:hover {
-      background-color: var(--ant-color-fill-secondary);
-    }
   }
 
   .actions {

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

@@ -7,6 +7,7 @@
     border-left: 1px solid var(--ant-color-split);
     transition: width 0.3s ease;
     height: calc(100vh - 72px);
+    padding-top: 16px;
     overflow-y: auto;
 
     .box {
@@ -42,6 +43,7 @@
       flex-direction: column;
       padding-inline: var(--layout-content-inlinepadding);
       overflow-y: auto;
+      padding-top: 16px;
 
       .content {
         flex: 1;

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

@@ -68,4 +68,24 @@
       justify-content: flex-end;
     }
   }
+
+  .input-box {
+    width: 100%;
+    display: flex;
+    position: relative;
+
+    .holder {
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 6px;
+      color: var(--ant-color-text-quaternary);
+
+      kbd {
+        border: 1px solid var(--ant-color-border);
+        border-radius: 3px;
+        padding: 0 2px;
+      }
+    }
+  }
 }

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

@@ -78,6 +78,25 @@
     padding-block: 0;
   }
 
+  .ant-page-header {
+    position: relative;
+    height: 72px;
+  }
+
+  &.chat {
+    .ant-page-header {
+      &::after {
+        position: absolute;
+        content: '';
+        left: 32px;
+        right: 32px;
+        bottom: 0;
+        height: 1px;
+        background-color: var(--ant-color-split);
+      }
+    }
+  }
+
   &.compare {
     .ant-pro-page-container-children-container {
       padding-inline: 0;

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

@@ -24,12 +24,26 @@
     top: 6px;
   }
 
+  .system-label {
+    font-weight: var(--font-weight-bold);
+    padding-left: 16px;
+  }
+
   .sys-content {
+    flex: 1;
     height: 38px;
+    width: 300px;
     line-height: 18px;
     padding: 10px 14px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+    color: var(--ant-color-text-secondary);
+
+    .title {
+      font-weight: var(--font-weight-bold);
+      padding-right: 10px;
+      color: var(--ant-color-text);
+    }
   }
 }

src/pages/playground/style/thumb-img.less

@@ -11,10 +11,6 @@
     overflow: hidden;
     border-radius: var(--border-radius-base);
     cursor: pointer;
-    // background-position: center;
-    // background-size: cover;
-    // background-repeat: no-repeat;
-    // border: 1px solid var(--ant-color-border);
   }
 
   .del {
@@ -26,12 +22,22 @@
     background-color: var(--color-white-1);
     display: none;
     border-radius: 50%;
+    height: 16px;
+    width: 16px;
     overflow: hidden;
+    pointer-events: all;
   }
 
   &:hover {
+    .ant-image .ant-image-mask {
+      opacity: 1;
+      transition: opacity var(--ant-motion-duration-slow);
+    }
+
     .del {
-      display: block;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 }