tangger/matagent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'processedit'

Browse Source
This commit is contained in:
yangqiao
2025-02-18 18:02:46 +08:00
parent fac2c95184
commit 6719fecf23
5 changed files with 86 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/ProcessView/index.less
View File

@@ -58,6 +58,10 @@
.dashed_line {
position: absolute;
width: 13px;
img {
width: 100%;
}
}
}
@@ -98,8 +102,8 @@
.dashed_line {
transform: rotate(-90deg);
top: -34px;
left: 108px;
top: -38px;
left: 113px;
}
}
@@ -118,7 +122,7 @@
.dashed_line {
top: 61px;
left: 24px;
left: 28px;
width: 12.4px;
}
}
@@ -138,8 +142,8 @@
.dashed_line {
transform: rotate(90deg);
top: -28px;
left: -66.6px;
top: -23px;
left: -70.6px;
}
}
@@ -158,8 +162,8 @@
.dashed_line {
transform: rotate(180deg);
top: -113px;
left: 20px;
top: -117px;
left: 14px;
width: 12.4px;
}
}

4
frontend/src/components/ProcessView/index.vue
View File

@@ -7,7 +7,9 @@
<img class="item_round" :src="item.url" alt="" />
<p class="p">{{ item.goup }}</p>
<span class="span">{{ item.content }}</span>
<div class="dashed_line"></div>
<div class="dashed_line">
<img src="../../assets/chart/dashed_line_arrow.png" alt="" />
</div>
</div>
<div class="centent_box" v-else>
<div class="item_text">

94
frontend/src/components/collapseView/index.vue
View File

@@ -12,12 +12,14 @@
><component :is="getIcon()"></component
></el-icon>
</div>
<div class="title">{{ generateTitle("模型调用流程") }}</div>
<div class="title">{{ generateTitle('模型调用流程') }}</div>
</div>
<div style="height: 100%" v-show="isCollapse">
<steps-view :reasoningList="reasoningList" />
</div>
<ProcessView />
<div v-show="isCollapse">
<ProcessView />
</div>
<!-- <div class="user-box">
<img src="../../assets/logo.png" alt="" />
<span v-show="isCollapse">Jayson</span>
@@ -95,70 +97,70 @@
</template>
<script setup lang="ts">
import StepsView from "../StepsView.vue";
import ProcessView from "../ProcessView/index.vue";
import { ref, defineProps, defineExpose, defineEmits } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { generateTitle } from "../../utils/i18n";
import StepsView from '../StepsView.vue'
import ProcessView from '../ProcessView/index.vue'
import { ref, defineProps, defineExpose, defineEmits } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { generateTitle } from '../../utils/i18n'
const getIcon = () => {
return isCollapse.value ? ArrowLeft : ArrowRight;
};
return isCollapse.value ? ArrowLeft : ArrowRight
}
const props = defineProps({
reasoningList: {
type: Array,
default: [],
},
});
default: []
}
})
const chartList = ref<Array<any>>([
{
type: "G1",
group_name: "Planner",
type: 'G1',
group_name: 'Planner'
},
{
type: "G2",
group_name: "Retrieval",
type: 'G2',
group_name: 'Retrieval'
},
{
type: "G3",
group_name: "Generate",
type: 'G3',
group_name: 'Generate'
},
{
type: "G4",
group_name: "Converter",
type: 'G4',
group_name: 'Converter'
},
{
type: "G5",
group_name: "Executor",
type: 'G5',
group_name: 'Executor'
},
{
type: "G6",
group_name: "Optimize",
},
]);
const emits = defineEmits(["changeStatusFun"]);
const getStatus = (val: any) => {
let arr: any = props.reasoningList;
if (arr.length) {
let children: any = arr[arr.length - 1].children;
if (!children.length) {
return false;
}
let group_name = children[children.length - 1].group_name.toLowerCase();
return group_name === val.toLowerCase();
} else {
return false;
type: 'G6',
group_name: 'Optimize'
}
};
])
const emits = defineEmits(['changeStatusFun'])
const getStatus = (val: any) => {
let arr: any = props.reasoningList
if (arr.length) {
let children: any = arr[arr.length - 1].children
if (!children.length) {
return false
}
let group_name = children[children.length - 1].group_name.toLowerCase()
return group_name === val.toLowerCase()
} else {
return false
}
}
const changeStatusFun = () => {
isCollapse.value = !isCollapse.value;
emits("changeStatusFun", isCollapse.value);
};
const isCollapse = ref<boolean>(true);
isCollapse.value = !isCollapse.value
emits('changeStatusFun', isCollapse.value)
}
const isCollapse = ref<boolean>(true)
defineExpose({
isCollapse,
});
isCollapse
})
</script>
<style scoped>
@import "./index.less";
@import './index.less';
</style>

7
frontend/src/view/reasoning/index.less
View File

@@ -92,4 +92,11 @@
}
}
}
.message_btn {
position: fixed;
top: 0;
left: 150px;
cursor: pointer;
}
}

18
frontend/src/view/reasoning/index.vue
View File

@@ -41,6 +41,18 @@
<span>监控2</span>
</div>
</div>
<div class="message_btn">
<el-icon color="#fff" size="16" v-show="messageShow"><Expand /></el-icon>
<el-icon color="#fff" size="16" v-show="!messageShow"><Fold /></el-icon>
</div>
<el-drawer
v-model="messageShow"
title="I am the title"
direction="ltr"
:before-close="handleClose"
>
<span>Hi, there!</span>
</el-drawer>
<CameraView
ref="cameraViewRef"
v-show="cameraShow"
@@ -53,7 +65,7 @@ import ReasoningView from '../../components/ReasoningView/index.vue'
import TextareaView from '../../components/TextareaView.vue'
import collapseView from '../../components/collapseView/index.vue'
import CameraView from '../../components/CameraView/index.vue'
import { Plus, VideoCameraFilled } from '@element-plus/icons-vue'
import { Plus, VideoCameraFilled, Expand, Fold } from '@element-plus/icons-vue'
import { ref, onMounted, nextTick } from 'vue'
// import { getModelList } from '../../api/user'
import { useRoute } from 'vue-router'
@@ -66,10 +78,14 @@ const textareaRef = ref<any>(null)
const collapseRef = ref<any>(null)
const isCollapse = ref<boolean>(true)
const cameraShow = ref<boolean>(false)
const messageShow = ref<boolean>(false)
const cameraViewRef = ref<any>(null)
const changeStatusFun = (val: boolean) => {
isCollapse.value = val
}
const handleClose = () => {
messageShow.value = false
}
const cameraFun = (val: number) => {
cameraShow.value = true
cameraViewRef.value.cameraNumber = val