perf: 优化用户输入样式

This commit is contained in:
wangdan-fit2cloud 2024-09-13 17:25:47 +08:00
parent 7c5fb47b75
commit 8920b71867
3 changed files with 29 additions and 9 deletions

View File

@ -1,5 +1,27 @@
<template> <template>
<div ref="aiChatRef" class="ai-chat" :class="log ? 'chart-log' : ''"> <div ref="aiChatRef" class="ai-chat" :class="log ? 'chart-log' : ''">
<div v-if="inputFieldList.length > 0" class="mb-16" style="padding: 0 24px">
<el-card shadow="always" class="dialog-card">
<div class="flex align-center cursor w-full" @click="showUserInput = !showUserInput">
<el-icon class="mr-8 arrow-icon" :class="showUserInput ? 'rotate-90' : ''"
><CaretRight
/></el-icon>
用户输入
</div>
<el-collapse-transition>
<DynamicsForm
class="mt-16"
v-show="showUserInput"
v-model="form_data"
:model="form_data"
label-position="left"
require-asterisk-position="right"
:render_data="inputFieldList"
ref="dynamicsFormRef"
/>
</el-collapse-transition>
</el-card>
</div>
<el-scrollbar ref="scrollDiv" @scroll="handleScrollTop"> <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
<div ref="dialogScrollbar" class="ai-chat__content p-24 chat-width"> <div ref="dialogScrollbar" class="ai-chat__content p-24 chat-width">
<div class="item-content mb-16" v-if="!props.available || (props.data?.prologue && !log)"> <div class="item-content mb-16" v-if="!props.available || (props.data?.prologue && !log)">
@ -240,7 +262,7 @@ const props = defineProps({
chatId: { chatId: {
type: String, type: String,
default: '' default: ''
}, // Id } // Id
}) })
const emit = defineEmits(['refresh', 'scroll']) const emit = defineEmits(['refresh', 'scroll'])
@ -264,6 +286,8 @@ const apiInputFieldList = ref<FormField[]>([])
const form_data = ref<any>({}) const form_data = ref<any>({})
const api_form_data = ref<any>({}) const api_form_data = ref<any>({})
const showUserInput = ref(true)
const isDisabledChart = computed( const isDisabledChart = computed(
() => !(inputValue.value.trim() && (props.appId || props.data?.name)) () => !(inputValue.value.trim() && (props.appId || props.data?.name))
) )
@ -985,6 +1009,7 @@ defineExpose({
.dialog-card { .dialog-card {
border: none; border: none;
border-radius: 8px; border-radius: 8px;
box-sizing: border-box;
} }
} }

View File

@ -254,12 +254,7 @@ const themeForm = ref<any>({
loginImage: '', loginImage: '',
title: 'MaxKB', title: 'MaxKB',
slogan: '欢迎使用 MaxKB 智能知识库问答系统', slogan: '欢迎使用 MaxKB 智能知识库问答系统',
showUserManual: false, ...defaultPlatformSetting
userManualUrl: '',
showForum: false,
forumUrl: '',
showProject: false,
projectUrl: ''
}) })
const themeRadio = ref('') const themeRadio = ref('')
const customColor = ref('') const customColor = ref('')

View File

@ -54,7 +54,7 @@
</MdEditor> </MdEditor>
</el-form-item> </el-form-item>
<div class="flex-between mb-8"> <div class="flex-between mb-8">
<h5 class="lighter">输入变量</h5> <h5 class="lighter">全局变量</h5>
<el-button link type="primary" @click="openAddDialog()"> <el-button link type="primary" @click="openAddDialog()">
<el-icon class="mr-4"><Plus /></el-icon> <el-icon class="mr-4"><Plus /></el-icon>
</el-button> </el-button>