15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 01:33:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat:

This commit is contained in:
wangdan-fit2cloud 2023-11-21 18:32:51 +08:00
parent dc9d625a29
commit 66391f52d7
3 changed files with 94 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
ui/src/components/ai-dialog/index.vue
View File

@ -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>

3
ui/src/styles/variables.scss
View File

@ -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;
}

19
ui/src/views/application/CreateApplication.vue
View File

@ -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>