panyy
/
UnisKB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:

v3.2
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> <template>
<div class="ai-dialog"> <div class="ai-dialog p-24">
<el-scrollbar> <el-scrollbar>
<div class="ai-dialog__content"> <div class="ai-dialog__content">
<div class="avatar"> <div class="avatar">
<AppAvatar class="avatar-gradient"> <AppAvatar class="avatar-gradient">
<img src="@/assets/icon_robot.svg" style="width: 54%" alt="" /> <img src="@/assets/icon_robot.svg" style="width: 54%" alt="" />
</AppAvatar> </AppAvatar>
<AppAvatar> <!-- <AppAvatar>
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" /> <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
</AppAvatar> </AppAvatar> -->
</div> </div>
<div class="content ml-8"> <div class="content">
<el-card shadow="always" class="dialog-card"> <el-card shadow="always" class="dialog-card">
<h4>您好，我是 MaxKB 智能小助手</h4> <h4>您好，我是 MaxKB 智能小助手</h4>
<div class="mt-4"> <div class="mt-4">
@ -19,23 +19,18 @@
</div> </div>
</el-card> </el-card>
<el-card shadow="always" class="dialog-card mt-12"> <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"> DataEase支持哪些类型的数据源？
<el-button icon="EditPen" class="problem-button w-full"> </el-button>
DataEase支持哪些类型的数据源？ <el-button icon="EditPen" class="problem-button">
</el-button> DataEase支持哪些类型的数据源？XXXXXXXXXXX
</el-col> </el-button>
<el-col :span="12"> </el-space>
<el-button icon="EditPen" class="problem-button w-full">
DataEase支持哪些类型的数据源？
</el-button>
</el-col>
</el-row>
</div>
</el-card> </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>
@ -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>
<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>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div class="ai-dialog__textarea flex"> <div class="ai-dialog__operate p-24">
<el-input <div class="operate-textarea flex">
v-model="inputValue" <el-input
type="textarea" v-model="inputValue"
placeholder="请输入" type="textarea"
:autosize="{ minRows: 1, maxRows: 8 }" placeholder="请输入"
/> :autosize="{ minRows: 1, maxRows: 8 }"
<div class="operate"> />
<el-button text class="sent-button" disabled> <div class="operate">
<AppIcon iconName="app-send"></AppIcon> <el-button text class="sent-button" disabled>
</el-button> <AppIcon iconName="app-send"></AppIcon>
</el-button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -76,22 +72,25 @@ const inputValue = ref('')
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ai-dialog { .ai-dialog {
min-height: 400px; --padding-left: 40px;
height: 100%; height: 100%;
padding-bottom: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
position: relative;
padding-right: 20px;
padding-top: 0;
&__content { &__content {
flex: 1; width: 99%;
padding-bottom: 96px;
.avatar { .avatar {
float: left; float: left;
} }
.content { .content {
padding-left: 50px; padding-left: var(--padding-left);
} }
.problem-button { .problem-button {
width: 100%;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background: var(--app-layout-bg-color); background: var(--app-layout-bg-color);
@ -105,34 +104,53 @@ const inputValue = ref('')
} }
} }
} }
.dialog-card { &__operate {
border: none; background: #f3f7f9;
} position: absolute;
&__textarea { bottom: 0;
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08); left: 0;
background-color: #ffffff; width: 100%;
border-radius: 8px;
border: 1px solid #ffffff;
box-sizing: border-box; box-sizing: border-box;
z-index: 10;
&:has(.el-textarea__inner:focus) { padding-top: 16px;
border: 1px solid var(--el-color-primary); &: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) { &:has(.el-textarea__inner:focus) {
border-radius: 8px !important; border: 1px solid var(--el-color-primary);
box-shadow: none; }
resize: none;
padding: 12px 16px; :deep(.el-textarea__inner) {
} border-radius: 8px !important;
.operate { box-shadow: none;
padding: 10px 12px; resize: none;
.sent-button { padding: 12px 16px;
.el-icon { }
font-size: 24px; .operate {
padding: 10px 12px;
.sent-button {
.el-icon {
font-size: 24px;
}
} }
} }
} }
} }
.dialog-card {
border: none;
}
} }
</style> </style>

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

@ -35,4 +35,7 @@
/** dataset */ /** dataset */
--create-dataset-height: calc(var(--app-main-height) - 70px); --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-row>
<el-col :span="10" class="p-24"> </el-col> <el-col :span="10" class="p-24"> </el-col>
<el-col :span="14" class="p-24 border-l"> <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-height"> <div class="dialog-bg">
<AiDialog></AiDialog> <h4 class="p-24">DataEase 智能客服</h4>
<div class="dialog-height">
<AiDialog></AiDialog>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -15,7 +18,13 @@
import AiDialog from '@/components/ai-dialog/index.vue' import AiDialog from '@/components/ai-dialog/index.vue'
</script> </script>
<style lang="scss" scoped> <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> </style>