|
<template>
|
<a-button v-if="typeAngint=='edit'" type="text" size="small" @click="handleClick">
|
<template #icon>
|
<icon-tool />
|
</template>
|
</a-button>
|
<!-- <a-button v-if="typeAngint=='add'" style="margin-left: 10px" type="primary" @click="handleClick">确定</a-button>-->
|
<a-modal v-model:visible="visible" title=""
|
@before-open="handleOpened"
|
@cancel="handleCancel"
|
:footer="false"
|
title-align="start"
|
fullscreen
|
>
|
<div class="main-container">
|
<div class="main-container-lf">
|
<div style="padding: 10px;font-size: 16px;background:#eeeeee;">智能体配置</div>
|
<div style="display: flex;width: 100%;" :style="{height:height}">
|
<div style="width: 50%;height: 100%">
|
<div style="padding: 10px;font-size: 12px;color: #2a2a2b;">智能体画像</div>
|
<div>
|
|
</div>
|
|
</div>
|
<div style="background:#eeeeee;width: 50%;">
|
<a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" layout="vertical" >
|
|
<a-collapse :default-active-key="['1']">
|
<a-collapse-item header="AI模型配置" key="1">
|
|
</a-collapse-item>
|
<a-collapse-item header="开场引导" :key="'2'">
|
|
</a-collapse-item>
|
<a-collapse-item header="知识库" key="3">
|
|
</a-collapse-item>
|
<a-collapse-item header="工具" key="4" disabled>
|
</a-collapse-item>
|
<a-collapse-item header="工作流" key="5" disabled>
|
</a-collapse-item>
|
</a-collapse>
|
|
<a-form-item>
|
<div style="position: absolute;right: 10px;top: 10px">
|
<!-- <a-button @click="visible = false">取消</a-button>-->
|
<a-button style="margin-left: 10px" type="primary" html-type="submit">保存</a-button>
|
</div>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</div>
|
<div class="main-container-rt">
|
<div :style="{height:heightrg}">
|
<div style="padding: 10px">
|
<a-avatar :style="{ backgroundColor: '#3370ff' }">
|
<img
|
:style="{ width: '100%'}"
|
alt="dessert"
|
src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
|
/>
|
</a-avatar>
|
调试预览
|
</div>
|
<a-divider style="margin: 0;margin-left: 10px"/>
|
|
<div class="bottom">
|
<div class="input">
|
<a-input placeholder="输入您想了解的内容，按Enter发送">
|
<template #suffix>
|
<icon-send style="cursor: pointer" />
|
</template>
|
</a-input></div>
|
<div class="text">内容由AI生成，仅供参考</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</a-modal>
|
</template>
|
|
<script lang="ts" setup>
|
import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
|
import { IconSend } from "@arco-design/web-vue/es/icon";
|
const props = defineProps(['typeAngint','formData'])
|
const visible = ref(false);
|
const loading = ref(false);
|
const form = reactive({
|
|
});
|
const formRef = ref(null);
|
const height = ref('calc(100vh - 150px)')
|
const heightrg = ref('calc(100vh - 100px)')
|
|
const rules = {
|
name: [
|
{
|
required: true,
|
message:'名称不允许为空',
|
},
|
],
|
}
|
|
|
const handleSubmit = ({values, errors}) => {
|
console.log('values:', values, '\nerrors:', errors)
|
}
|
|
const handleClick = (data) => {
|
visible.value = true;
|
nextTick(()=>{
|
Object.assign(form,data);
|
console.log(form);
|
})
|
};
|
defineExpose({
|
handleClick
|
})
|
const handleBeforeOk = (done) => {
|
formRef.value.validate().then(res => {
|
console.log('form:', form)
|
if (!form.name) {
|
done(false)
|
}else {
|
console.log('请求数据');
|
|
}
|
})
|
};
|
const handleCancel = () => {
|
visible.value = false;
|
}
|
|
const handleOpened =(el) => {
|
formRef.value.resetFields();
|
}
|
|
const file = ref();
|
|
const onChange = (_, currentFile) => {
|
file.value = {
|
...currentFile,
|
// url: URL.createObjectURL(currentFile.file),
|
};
|
};
|
const onProgress = (currentFile) => {
|
file.value = currentFile;
|
};
|
|
onBeforeMount(()=>{
|
|
})
|
onMounted(()=>{
|
|
|
})
|
</script>
|
|
<style scoped lang="less">
|
.main-container {
|
width: 100%;
|
display: flex;
|
.main-container-lf {
|
width: 60%;
|
}
|
.main-container-rt {
|
position: relative;
|
width: 40%;
|
}
|
}
|
.bottom{
|
width: 100%;
|
position: absolute;
|
bottom: 40px;
|
left:0;
|
.input{
|
margin-left: 20%;
|
width: 60%;
|
}
|
.text{
|
margin-left: 40%;
|
font-size: 12px;
|
color: lightgrey;
|
line-height: 40px;
|
}
|
}
|
</style>
|
