From 66391f52d78a99f64359f1335d3dc32cc67194c4 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 21 Nov 2023 18:32:51 +0800
Subject: [PATCH] feat:

---
 ui/src/components/ai-dialog/index.vue         | 136 ++++++++++--------
 ui/src/styles/variables.scss                  |   3 +
 .../views/application/CreateApplication.vue   |  19 ++-
 3 files changed, 94 insertions(+), 64 deletions(-)

diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index 2dbdacf6..1b501637 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/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>
-            <div class="mt-8">
-              <el-row :gutter="20">
-                <el-col :span="12">
-                  <el-button icon="EditPen" class="problem-button w-full">
-                    DataEase支持哪些类型的数据源？
-                  </el-button>
-                </el-col>
-                <el-col :span="12">
-                  <el-button icon="EditPen" class="problem-button w-full">
-                    DataEase支持哪些类型的数据源？
-                  </el-button>
-                </el-col>
-              </el-row>
-            </div>
+            <h4 class="mb-8">您可以尝试输入以下问题：</h4>
+            <el-space wrap>
+              <el-button icon="EditPen" class="problem-button">
+                DataEase支持哪些类型的数据源？
+              </el-button>
+              <el-button icon="EditPen" class="problem-button">
+                DataEase支持哪些类型的数据源？XXXXXXXXXXX
+              </el-button>
+            </el-space>
           </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,22 +39,23 @@
           <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">
-      <el-input
-        v-model="inputValue"
-        type="textarea"
-        placeholder="请输入"
-        :autosize="{ minRows: 1, maxRows: 8 }"
-      />
-      <div class="operate">
-        <el-button text class="sent-button" disabled>
-          <AppIcon iconName="app-send"></AppIcon>
-        </el-button>
+    <div class="ai-dialog__operate p-24">
+      <div class="operate-textarea flex">
+        <el-input
+          v-model="inputValue"
+          type="textarea"
+          placeholder="请输入"
+          :autosize="{ minRows: 1, maxRows: 8 }"
+        />
+        <div class="operate">
+          <el-button text class="sent-button" disabled>
+            <AppIcon iconName="app-send"></AppIcon>
+          </el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -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,34 +104,53 @@ const inputValue = ref('')
       }
     }
   }
-  .dialog-card {
-    border: none;
-  }
-  &__textarea {
-    box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
-    background-color: #ffffff;
-    border-radius: 8px;
-    border: 1px solid #ffffff;
+  &__operate {
+    background: #f3f7f9;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
     box-sizing: border-box;
-
-    &:has(.el-textarea__inner:focus) {
-      border: 1px solid var(--el-color-primary);
+    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;
     }
+    .operate-textarea {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
 
-    :deep(.el-textarea__inner) {
-      border-radius: 8px !important;
-      box-shadow: none;
-      resize: none;
-      padding: 12px 16px;
-    }
-    .operate {
-      padding: 10px 12px;
-      .sent-button {
-        .el-icon {
-          font-size: 24px;
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      :deep(.el-textarea__inner) {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 12px 16px;
+      }
+      .operate {
+        padding: 10px 12px;
+        .sent-button {
+          .el-icon {
+            font-size: 24px;
+          }
         }
       }
     }
   }
+  .dialog-card {
+    border: none;
+  }
 }
 </style>
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index f72b4306..bcc2ab38 100644
--- a/ui/src/styles/variables.scss
+++ b/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;
 }
diff --git a/ui/src/views/application/CreateApplication.vue b/ui/src/views/application/CreateApplication.vue
index 9e7c7cba..3dfd9233 100644
--- a/ui/src/views/application/CreateApplication.vue
+++ b/ui/src/views/application/CreateApplication.vue
@@ -3,9 +3,12 @@
     <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>
-        <div class="dialog-height">
-          <AiDialog></AiDialog>
+        <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>
@@ -15,7 +18,13 @@
 import AiDialog from '@/components/ai-dialog/index.vue'
 </script>
 <style lang="scss" scoped>
-.dialog-height {
-  height: calc(var(--app-main-height) - 75px);
+.dialog-bg {
+  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>