zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 应用对话框

Browse Source
This commit is contained in:
wangdan-fit2cloud 2023-11-20 18:56:31 +08:00
parent edf46204a8
commit 8e72eb8616
6 changed files with 149 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/assets/icon_robot.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 671 B

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

@ -1,20 +1,112 @@
<template>
<div class="flex">
<div class="ai-dialog">
<div class="ai-dialog__content flex">
<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 class="ml-8 w-full">
<el-card shadow="always"> XXXXXXXXX </el-card>
<el-card shadow="always" class="mt-12"> XXXXXXXXX </el-card>
<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>
</div>
</div>
<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">
<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 {
height: 100%;
display: flex;
flex-direction: column;
&__content {
flex: 1;
.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;
&:has(.el-textarea__inner:focus) {
border: 1px solid var(--el-color-primary);
}
.operate {
padding: 10px 12px;
.sent-button {
.el-icon {
font-size: 24px;
}
}
}
:deep(.el-textarea__inner) {
border-radius: 8px !important;
box-shadow: none;
resize: none;
padding: 12px 16px;
}
}
}
</style>

24
ui/src/components/icons/index.ts
View File

@ -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'
})
]
)
])
}
}
}

12
ui/src/styles/app.scss
View File

@ -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);
}
@ -280,6 +287,11 @@ h4 {
}
}
// 头像渐变背景
.avatar-gradient {
background: var(--app-avatar-gradient-color);
}
.success {
color: var(--el-color-success);
}

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

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

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

@ -1,6 +1,12 @@
<template>
<LayoutContainer header="创建应用" back-to="-1">
<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">