Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front
This commit is contained in:
@@ -1,5 +1,14 @@
|
||||
<template>
|
||||
<div class="home background-pink">
|
||||
<div class="bg bg-1">
|
||||
<div class="topright"></div>
|
||||
<div class="bottomleft"></div>
|
||||
</div>
|
||||
<div class="bg bg-2">
|
||||
<div class="bottom-1"></div>
|
||||
<div class="bottom-2"></div>
|
||||
<div class="bottom-3"></div>
|
||||
</div>
|
||||
<div class="home">
|
||||
<left-nav />
|
||||
<div class="right-main">
|
||||
<top-nav />
|
||||
@@ -38,4 +47,150 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-1 {
|
||||
z-index: -1;
|
||||
}
|
||||
.bg-2 {
|
||||
@keyframes bg-2 {
|
||||
0% {
|
||||
z-index: 10;
|
||||
}
|
||||
100% {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
animation: bg-2 0.5s ease-in-out 1 both;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: rgba(248, 247, 245, 1);
|
||||
> * {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
> .topright {
|
||||
width: 174.7rem;
|
||||
height: 42.1rem;
|
||||
top: -15.7rem;
|
||||
right: -70rem;
|
||||
|
||||
background: linear-gradient(
|
||||
86.85deg,
|
||||
rgba(244, 147, 116, 0.6) 13.62%,
|
||||
rgba(241, 193, 145, 0.6) 25.57%,
|
||||
rgba(255, 178, 91, 0.582) 41.03%,
|
||||
rgba(242, 173, 126, 0.6) 59.37%,
|
||||
rgba(255, 232, 200, 0.6) 75.27%
|
||||
);
|
||||
opacity: 0.2;
|
||||
filter: blur(20.7656rem);
|
||||
transform: rotate(178.95deg);
|
||||
}
|
||||
> .bottomleft {
|
||||
// border-radius: 0;
|
||||
// border: 1px solid #000;
|
||||
width: 62.418rem;
|
||||
height: 68.245rem;
|
||||
left: -30rem;
|
||||
bottom: 0;
|
||||
|
||||
background: linear-gradient(
|
||||
161.16deg,
|
||||
rgba(132, 230, 255, 0.2) 14.98%,
|
||||
rgba(255, 223, 142, 0.2) 68.79%
|
||||
);
|
||||
filter: blur(8.263rem);
|
||||
transform: rotate(-25.36deg);
|
||||
}
|
||||
> .bottom-1 {
|
||||
animation: bottom-1 0.5s ease-in-out 1 both;
|
||||
background: linear-gradient(
|
||||
87.58deg,
|
||||
rgba(241, 193, 145, 0.8) 23.02%,
|
||||
rgba(255, 178, 91, 0.776) 35.36%,
|
||||
rgba(244, 147, 116, 0.8) 56.32%,
|
||||
rgba(242, 173, 126, 0.8) 67.34%,
|
||||
rgba(255, 232, 200, 0.8) 82.74%
|
||||
);
|
||||
filter: blur(13.17rem);
|
||||
transform: matrix(-1, 0.03, -0.05, -1, 0, 0);
|
||||
}
|
||||
> .bottom-2 {
|
||||
animation: bottom-2 0.5s ease-in-out 1 both;
|
||||
|
||||
background: conic-gradient(
|
||||
from 94.36deg at 71.77% 41.01%,
|
||||
rgba(242, 171, 180, 0.2) 0deg,
|
||||
rgba(255, 105, 117, 0.2) 100.75deg,
|
||||
rgba(254, 59, 83, 0.2) 179.32deg,
|
||||
rgba(255, 105, 117, 0.2) 252deg,
|
||||
rgba(242, 171, 180, 0.2) 360deg
|
||||
);
|
||||
filter: blur(12.927rem);
|
||||
transform: matrix(-0.05, 1, -1, -0.03, 0, 0);
|
||||
}
|
||||
> .bottom-3 {
|
||||
animation: bottom-3 0.5s ease-in-out 1 both;
|
||||
background: linear-gradient(
|
||||
130.72deg,
|
||||
rgba(242, 171, 180, 0.24) 29.52%,
|
||||
rgba(234, 133, 200, 0.24) 39.73%,
|
||||
rgba(238, 64, 173, 0.24) 55.81%,
|
||||
rgba(234, 133, 158, 0.24) 69.59%,
|
||||
rgba(242, 171, 180, 0.24) 82.61%
|
||||
);
|
||||
filter: blur(11.5411rem);
|
||||
transform: matrix(-0.26, -0.97, 0.99, -0.15, 0, 0);
|
||||
}
|
||||
@keyframes bottom-1 {
|
||||
0% {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
100% {
|
||||
width: 138.014rem;
|
||||
height: 29.323rem;
|
||||
left: 32.123rem;
|
||||
bottom: -21rem;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bottom-2 {
|
||||
0% {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
100% {
|
||||
width: 42.215rem;
|
||||
height: 98.009rem;
|
||||
left: 150rem;
|
||||
bottom: -65rem;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bottom-3 {
|
||||
0% {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
100% {
|
||||
width: 51.936rem;
|
||||
height: 97.139rem;
|
||||
left: 40rem;
|
||||
bottom: -65rem;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
139
src/views/home/versionTree/components/dialog.vue
Normal file
139
src/views/home/versionTree/components/dialog.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
textData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
} as any,
|
||||
styleData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
} as any,
|
||||
callBack: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
// const emit = defineEmits([
|
||||
// ])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const dialogFormVisible = ref(false)
|
||||
|
||||
const confirm = async ()=>{
|
||||
if(props.callBack)await props.callBack()
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({open:()=>dialogFormVisible.value = true})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="dialog">
|
||||
<el-dialog
|
||||
:align-center="true"
|
||||
v-model="dialogFormVisible"
|
||||
:close-on-click-modal="false"
|
||||
:title="props.textData?.title"
|
||||
:show-close="false"
|
||||
:width="props.styleData?.width || '50%'">
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="my-header">
|
||||
<div class="text">{{ props.textData?.title }}</div>
|
||||
<div class="icon" @click="dialogFormVisible = false">
|
||||
<SvgIcon
|
||||
name="close"
|
||||
size="8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="boundary"></div>
|
||||
<div class="dialog-content">
|
||||
{{ props.textData?.text }}
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<div class="dialog-footer-cancel" @click="dialogFormVisible = false">
|
||||
{{ props.textData?.cancelText || 'Cancel' }}
|
||||
</div>
|
||||
<div class="dialog-footer-confirm" type="primary" @click="confirm">
|
||||
{{ props.textData?.submitText || 'Confirm' }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.dialog{
|
||||
--el-dialog-padding-primary: 1.6rem 1.2rem;
|
||||
--el-dialog-border-radius: .8rem;
|
||||
:deep(.el-dialog){
|
||||
.my-header{
|
||||
display: flex;
|
||||
padding: 0 .5rem;
|
||||
justify-content: space-between;
|
||||
--el-dialog-padding-primary: 1.2rem
|
||||
.text{
|
||||
font-family: 'Semibold';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
letter-spacing: -0.18px;
|
||||
}
|
||||
.icon{
|
||||
cursor: pointer;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.boundary{
|
||||
border-bottom: .7px solid rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
}
|
||||
.dialog-content{
|
||||
padding: 0 .5rem;
|
||||
padding-top: 1.2rem;
|
||||
font-family: 'Regular';
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
letter-spacing: -0.18px;
|
||||
}
|
||||
.dialog-footer{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
--el-dialog-padding-primary: 1.7rem;
|
||||
> div{
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
letter-spacing: -0.18px;
|
||||
width: 5.9rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: 1.5rem;
|
||||
padding: .3rem 0 .4rem;
|
||||
}
|
||||
.dialog-footer-cancel{
|
||||
color: #000;
|
||||
margin-right: .6rem;
|
||||
border: 0.7px solid #0000001A;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.dialog-footer-confirm{
|
||||
color: #fff;
|
||||
background-color: #f74545;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@ let data = reactive({
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import VersionDetail from './versionDetail.vue'
|
||||
import ChatHistory from './chatHistory.vue'
|
||||
import ChatDetail from './chatDetail.vue'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
const emit = defineEmits([
|
||||
@@ -14,7 +14,7 @@ const detailData = ref({
|
||||
versionSketch:'Version 1 - Sketch',
|
||||
versionSketchTime:'2023-08-01 10:00:00',
|
||||
},
|
||||
userChatHistory:{
|
||||
userChatDetail:{
|
||||
|
||||
}
|
||||
|
||||
@@ -35,10 +35,10 @@ defineExpose({})
|
||||
></VersionDetail>
|
||||
</div>
|
||||
<div class="useInput">
|
||||
<ChatHistory type="user"></ChatHistory>
|
||||
<ChatDetail type="user"></ChatDetail>
|
||||
</div>
|
||||
<div class="systemInput">
|
||||
<ChatHistory type="robot"></ChatHistory>
|
||||
<ChatDetail type="robot"></ChatDetail>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,7 @@ import SpecialEdge from './speciaiEdge.vue'
|
||||
import InputNode from './InputNode.vue'//主
|
||||
import SecondaryNode from './secondaryNode.vue'//分支
|
||||
import { useLayout } from '../../tools/tools'
|
||||
import dialogVue from "../../components/dialog.vue";
|
||||
const props = defineProps({
|
||||
selectItem: {
|
||||
type: Object,
|
||||
@@ -22,6 +23,9 @@ const emit = defineEmits([
|
||||
'versionDelete',
|
||||
])
|
||||
|
||||
const dialogDeleteRef = ref()
|
||||
const dialogRestoreRef = ref()
|
||||
|
||||
// 节点类型：input、output、default、custom
|
||||
// input:开始点，output：结尾点，default：普通节点，custom：自定义节点
|
||||
const position = { x: 0, y: 0 }
|
||||
@@ -88,10 +92,11 @@ watch(()=>props.selectItem.id, (newVal, oldVal) => {
|
||||
|
||||
const versionRestore = ()=>{
|
||||
emit('versionRestore')
|
||||
dialogRestoreRef.value?.open()
|
||||
}
|
||||
|
||||
const versionDelete = ()=>{
|
||||
emit('versionDelete')
|
||||
dialogDeleteRef.value?.open()
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
@@ -135,6 +140,30 @@ defineExpose({push})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dialogVue
|
||||
:textData="{
|
||||
title: $t('VersionTree.deleteChat'),
|
||||
text: $t('VersionTree.deleteHint'),
|
||||
submitText: $t('VersionTree.delete'),
|
||||
cancelText: $t('VersionTree.cancel'),
|
||||
}"
|
||||
:styleData="{
|
||||
width: '40.6rem'
|
||||
}"
|
||||
:callBack="()=>emit('versionDelete')"
|
||||
ref="dialogDeleteRef" />
|
||||
<dialogVue
|
||||
:textData="{
|
||||
title: $t('VersionTree.restoreChat'),
|
||||
text: $t('VersionTree.restoreHint'),
|
||||
submitText: $t('VersionTree.confirm'),
|
||||
cancelText: $t('VersionTree.cancel'),
|
||||
}"
|
||||
:styleData="{
|
||||
width: '40.6rem'
|
||||
}"
|
||||
:callBack="()=>emit('versionRestore')"
|
||||
ref="dialogRestoreRef" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
|
||||
Reference in New Issue
Block a user