Merge branch 'main' of github.com:maxkb-dev/maxkb

ui/src/assets/icon_robot.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33333 1.33337H6.66667V3.33337H7.33333V4.66671H3.66667C2.93029 4.66671 2.33333 5.26366 2.33333 6.00004V13.3334C2.33333 14.0698 2.93029 14.6667 3.66667 14.6667H12.3333C13.0697 14.6667 13.6667 14.0698 13.6667 13.3334V6.00004C13.6667 5.26366 13.0697 4.66671 12.3333 4.66671H8.66667V3.33337H9.33333V1.33337ZM4.66667 8.66671H6.66667V10.6667H4.66667V8.66671ZM11.3333 8.66671V10.6667H9.33333V8.66671H11.3333Z" fill="white"/>
+<path d="M1.33333 8.00004H0V11.3334H1.33333V8.00004Z" fill="white"/>
+<path d="M14.6667 8.00004H16V11.3334H14.6667V8.00004Z" fill="white"/>
+</svg>

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

@@ -1,20 +1,138 @@
 <template>
-  <div class="flex">
-    <AppAvatar>
-      <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-    </AppAvatar>
-    <div class="ml-8 w-full">
-      <el-card shadow="always"> XXXXXXXXX </el-card>
-      <el-card shadow="always" class="mt-12"> XXXXXXXXX </el-card>
+  <div class="ai-dialog">
+    <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>
+            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+          </AppAvatar>
+        </div>
+
+        <div class="content ml-8">
+          <el-card shadow="always" class="dialog-card">
+            <h4>您好，我是 MaxKB 智能小助手</h4>
+            <div class="mt-4">
+              <el-text type="info">回答用户提出的 MaxKB 产品使用问题</el-text>
+            </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>
+          </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>
+          <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>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { ref } from 'vue'
 const props = defineProps({
   data: {
     type: Array<any>,
     default: () => []
   }
 })
+const inputValue = ref('')
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.ai-dialog {
+  min-height: 400px;
+  height: 100%;
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  &__content {
+    flex: 1;
+
+    .avatar {
+      float: left;
+    }
+    .content {
+      padding-left: 50px;
+    }
+    .problem-button {
+      border: none;
+      border-radius: 8px;
+      background: var(--app-layout-bg-color);
+      height: 46px;
+      justify-content: left;
+      &:hover {
+        background: var(--el-color-primary-light-9);
+      }
+      :deep(.el-icon) {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+  .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;
+    box-sizing: border-box;
+
+    &: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;
+        }
+      }
+    }
+  }
+}
+</style>

ui/src/components/icons/index.ts

@@ -173,5 +173,29 @@ export const iconMap: any = {
         )
       ])
     }
+  },
+  'app-send': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
   }
 }

ui/src/styles/app.scss

@@ -103,6 +103,10 @@ h4 {
   width: 240px;
 }
 
+.mt-4 {
+  margin-top: calc(var(--app-base-px) - 4px);
+}
+
 .mt-8 {
   margin-top: var(--app-base-px);
 }
@@ -128,6 +132,9 @@ h4 {
 .ml-16 {
   margin-left: calc(var(--app-base-px) * 2);
 }
+.mr-4 {
+  margin-right: calc(var(--app-base-px) - 4px);
+}
 .mr-8 {
   margin-right: var(--app-base-px);
 }
@@ -260,6 +267,7 @@ h4 {
 
 // 表格第一行插入自定义行
 .table-quick-append {
+  background: #ffffff;
   .el-table__append-wrapper {
     position: absolute;
     top: 0;
@@ -270,9 +278,12 @@ h4 {
     align-items: center;
     display: flex;
     padding: 0 12px;
+    background: #ffffff;
     cursor: pointer;
+    z-index: 2;
     &:hover {
       background: var(--el-color-primary-light-9);
+      z-index: 1;
     }
   }
   .el-table__body {
@@ -280,6 +291,11 @@ h4 {
   }
 }
 
+// 头像渐变背景
+.avatar-gradient {
+  background: var(--app-avatar-gradient-color);
+}
+
 .success {
   color: var(--el-color-success);
 }

ui/src/styles/variables.scss

@@ -14,6 +14,7 @@
   --app-header-padding: 0 20px;
   --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
   --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 100%);
+  --app-avatar-gradient-color: linear-gradient(270deg, #9258F7 0%, #3370FF 100%);
 
   // 计算高度
   --app-main-height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);

ui/src/views/application/CreateApplication.vue

@@ -1,6 +1,12 @@
 <template>
   <LayoutContainer header="创建应用" back-to="-1">
-    <AiDialog></AiDialog>
+    <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>
+        <AiDialog></AiDialog>
+      </el-col>
+    </el-row>
   </LayoutContainer>
 </template>
 <script setup lang="ts">

ui/src/views/dataset/step/StepSecond.vue

@@ -13,29 +13,50 @@
                 </el-radio>
                 <el-radio label="2" size="large" border class="mb-16">
                   <p>高级分段</p>
-                  <el-text type="info">用户可根据文档规范自行设置分段标识符、分段长度以及清洗规则
+                  <el-text type="info"
+                    >用户可根据文档规范自行设置分段标识符、分段长度以及清洗规则
                   </el-text>
                   <el-card shadow="never" class="card-never mt-16" v-if="radio === '2'">
                     <div class="set-rules__form">
                       <div class="form-item mb-16">
                         <div class="title flex align-center mb-8">
                           <span style="margin-right: 4px">分段标识</span>
-                          <el-tooltip effect="dark" content="按照所选符号先后顺序做递归分割，分割结果超出分段长度将截取至分段长度。" placement="right">
+                          <el-tooltip
+                            effect="dark"
+                            content="按照所选符号先后顺序做递归分割，分割结果超出分段长度将截取至分段长度。"
+                            placement="right"
+                          >
                             <el-icon style="font-size: 16px">
                               <Warning />
                             </el-icon>
                           </el-tooltip>
                         </div>
 
-                        <el-select v-loading="patternLoading" v-model="form.patterns" multiple placeholder="请选择">
-                          <el-option v-for="item in splitPatternList" :key="item" :label="item.key" :value="item.value"
-                            multiple>
+                        <el-select
+                          v-loading="patternLoading"
+                          v-model="form.patterns"
+                          multiple
+                          placeholder="请选择"
+                        >
+                          <el-option
+                            v-for="item in splitPatternList"
+                            :key="item"
+                            :label="item.key"
+                            :value="item.value"
+                            multiple
+                          >
                           </el-option>
                         </el-select>
                       </div>
                       <div class="form-item mb-16">
                         <div class="title mb-8">分段长度</div>
-                        <el-slider v-model="form.limit" show-input :show-input-controls="false" :min="50" :max="1024" />
+                        <el-slider
+                          v-model="form.limit"
+                          show-input
+                          :show-input-controls="false"
+                          :min="50"
+                          :max="1024"
+                        />
                       </div>
                       <div class="form-item mb-16">
                         <div class="title mb-8">自动清洗</div>
@@ -120,7 +141,7 @@ function splitDocument() {
 }
 
 const initSplitPatternList = () => {
-  DatasetApi.listSplitPattern(patternLoading).then(ok => {
+  DatasetApi.listSplitPattern(patternLoading).then((ok) => {
     splitPatternList.value = ok.data
   })
 }

ui/src/views/document/index.vue

@@ -28,6 +28,7 @@
           @creatQuick="creatQuickHandle"
           @row-click="rowClickHandle"
           v-loading="loading"
+          :max-height="tableHeight"
         >
           <el-table-column prop="name" label="文件名称" min-width="280">
             <template #default="{ row }">
@@ -114,6 +115,7 @@ const loading = ref(false)
 const filterText = ref('')
 const documentData = ref<any[]>([])
 const currentMouseId = ref(null)
+const tableHeight = ref(0)
 
 const paginationConfig = reactive({
   currentPage: 1,
@@ -223,6 +225,12 @@ function getList() {
 }
 
 onMounted(() => {
+  tableHeight.value = window.innerHeight - 300
+  window.onresize = () => {
+    return (() => {
+      tableHeight.value = window.innerHeight - 300
+    })()
+  }
   getList()
 })
 </script>