feat:

ui/src/components/ai-dialog/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="ai-dialog">
+  <div class="ai-dialog p-24">
     <el-scrollbar>
       <div class="ai-dialog__content">
         <div class="avatar">
           <AppAvatar class="avatar-gradient">
             <img src="@/assets/icon_robot.svg" style="width: 54%" alt="" />
           </AppAvatar>
-          <AppAvatar>
+          <!-- <AppAvatar>
             <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-          </AppAvatar>
+          </AppAvatar> -->
         </div>
 
-        <div class="content ml-8">
+        <div class="content">
           <el-card shadow="always" class="dialog-card">
             <h4>您好，我是 MaxKB 智能小助手</h4>
             <div class="mt-4">
@@ -19,23 +19,18 @@
             </div>
           </el-card>
           <el-card shadow="always" class="dialog-card mt-12">
-            <h4>您可以尝试输入以下问题：</h4>
+            <h4 class="mb-8">您可以尝试输入以下问题：</h4>
-            <div class="mt-8">
+            <el-space wrap>
-              <el-row :gutter="20">
+              <el-button icon="EditPen" class="problem-button">
-                <el-col :span="12">
-                  <el-button icon="EditPen" class="problem-button w-full">
                 DataEase支持哪些类型的数据源？
               </el-button>
-                </el-col>
+              <el-button icon="EditPen" class="problem-button">
-                <el-col :span="12">
+                DataEase支持哪些类型的数据源？XXXXXXXXXXX
-                  <el-button icon="EditPen" class="problem-button w-full">
-                    DataEase支持哪些类型的数据源？
               </el-button>
-                </el-col>
+            </el-space>
-              </el-row>
-            </div>
           </el-card>
 
+          <!-- <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
           <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
           <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
           <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
@@ -44,12 +39,12 @@
           <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
           <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
           <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card> -->
-          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
         </div>
       </div>
     </el-scrollbar>
-    <div class="ai-dialog__textarea flex">
+    <div class="ai-dialog__operate p-24">
+      <div class="operate-textarea flex">
         <el-input
           v-model="inputValue"
           type="textarea"
@@ -63,6 +58,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
@@ -76,22 +72,25 @@ const inputValue = ref('')
 </script>
 <style lang="scss" scoped>
 .ai-dialog {
-  min-height: 400px;
+  --padding-left: 40px;
   height: 100%;
-  padding-bottom: 20px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  position: relative;
+  padding-right: 20px;
+  padding-top: 0;
   &__content {
-    flex: 1;
+    width: 99%;
-
+    padding-bottom: 96px;
     .avatar {
       float: left;
     }
     .content {
-      padding-left: 50px;
+      padding-left: var(--padding-left);
     }
     .problem-button {
+      width: 100%;
       border: none;
       border-radius: 8px;
       background: var(--app-layout-bg-color);
@@ -105,10 +104,25 @@ const inputValue = ref('')
       }
     }
   }
-  .dialog-card {
+  &__operate {
-    border: none;
+    background: #f3f7f9;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
+    padding-top: 16px;
+    &:before {
+      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
+      content: '';
+      position: absolute;
+      width: 100%;
+      top: -16px;
+      left: 0;
+      height: 16px;
     }
-  &__textarea {
+    .operate-textarea {
       box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
       background-color: #ffffff;
       border-radius: 8px;
@@ -134,5 +148,9 @@ const inputValue = ref('')
         }
       }
     }
+  }
+  .dialog-card {
+    border: none;
+  }
 }
 </style>

ui/src/styles/variables.scss

@@ -35,4 +35,7 @@
 
   /** dataset */
   --create-dataset-height: calc(var(--app-main-height) - 70px);
+
+  /** ai-dialog */
+  --dialog-bg-gradient-color: linear-gradient(188deg, rgba(235, 241, 255, 0.20) 39.6%, rgba(231, 249, 255, 0.20) 94.3%), #EFF0F1;
 }

ui/src/views/application/CreateApplication.vue

@@ -3,10 +3,13 @@
     <el-row>
       <el-col :span="10" class="p-24"> </el-col>
       <el-col :span="14" class="p-24 border-l">
-        <h4 class="title-decoration-1 mb-8">调试预览</h4>
+        <h4 class="title-decoration-1 mb-16">调试预览</h4>
+        <div class="dialog-bg">
+          <h4 class="p-24">DataEase 智能客服</h4>
           <div class="dialog-height">
             <AiDialog></AiDialog>
           </div>
+        </div>
       </el-col>
     </el-row>
   </LayoutContainer>
@@ -15,7 +18,13 @@
 import AiDialog from '@/components/ai-dialog/index.vue'
 </script>
 <style lang="scss" scoped>
-.dialog-height {
+.dialog-bg {
-  height: calc(var(--app-main-height) - 75px);
+  border-radius: 8px;
+  background: var(--dialog-bg-gradient-color);
+  overflow: hidden;
+  box-sizing: border-box;
+  .dialog-height {
+    height: calc(var(--app-main-height) - 150px);
+  }
 }
 </style>