Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front
This commit is contained in:
@@ -3,7 +3,7 @@ import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
|
||||
import Tree from './tree/index.vue'
|
||||
import Detail from './detail/index.vue'
|
||||
// import { versionsList } from './tools/versionsData'
|
||||
import { findAndAddChild, findAndRemoveChild } from './tools/tools'
|
||||
import { findAndAddChild, findAndRemoveChild } from '../../../../../utils/treeDiagram'
|
||||
import { useProjectStore } from '@/stores'
|
||||
import { versionTree, getChatNodeDetail } from '@/api/versitonTree'
|
||||
|
||||
|
||||
@@ -1,145 +0,0 @@
|
||||
// import dagre from '@dagrejs/dagre'
|
||||
import dagre from 'dagre'
|
||||
import { Position, useVueFlow } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* Composable to run the layout algorithm on the graph.
|
||||
* It uses the `dagre` library to calculate the layout of the nodes and edges.
|
||||
*/
|
||||
export function useLayout() {
|
||||
const { findNode } = useVueFlow()
|
||||
|
||||
const graph = ref(new dagre.graphlib.Graph())
|
||||
|
||||
const previousDirection = ref('LR')
|
||||
|
||||
function layout(nodes, edges, direction = 'LR') {
|
||||
// 验证和规范化方向参数
|
||||
const validDirections = ['TB', 'BT', 'LR', 'RL']
|
||||
const layoutDirection = validDirections.includes(direction) ? direction : 'LR'
|
||||
|
||||
// we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
|
||||
const dagreGraph = new dagre.graphlib.Graph()
|
||||
|
||||
graph.value = dagreGraph
|
||||
|
||||
dagreGraph.setDefaultEdgeLabel(() => ({}))
|
||||
|
||||
// 根据方向判断是否为水平布局
|
||||
const isHorizontal = layoutDirection === 'LR' || layoutDirection === 'RL'
|
||||
dagreGraph.setGraph({ rankdir: layoutDirection })
|
||||
|
||||
previousDirection.value = layoutDirection
|
||||
|
||||
for (const node of nodes) {
|
||||
// if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
|
||||
const graphNode = findNode(node.id)
|
||||
|
||||
dagreGraph.setNode(node.id, {
|
||||
width: graphNode.dimensions.width || 150,
|
||||
height: graphNode.dimensions.height || 50
|
||||
})
|
||||
}
|
||||
|
||||
for (const edge of edges) {
|
||||
dagreGraph.setEdge(edge.source, edge.target)
|
||||
}
|
||||
|
||||
dagre.layout(dagreGraph)
|
||||
|
||||
// set nodes with updated positions
|
||||
return nodes.map((node) => {
|
||||
const nodeWithPosition = dagreGraph.node(node.id)
|
||||
|
||||
// 根据方向动态计算连接点位置
|
||||
let targetPosition, sourcePosition
|
||||
switch (layoutDirection) {
|
||||
case 'BT': // 从上到下 (Top to Bottom)
|
||||
targetPosition = Position.Bottom // 目标节点连接点在下方
|
||||
sourcePosition = Position.Top // 源节点连接点在上方
|
||||
break
|
||||
case 'TB': // 从下到上 (Bottom to Top)
|
||||
targetPosition = Position.Top // 目标节点连接点在上方
|
||||
sourcePosition = Position.Bottom // 源节点连接点在下方
|
||||
break
|
||||
case 'LR': // 从左到右 (Left to Right)
|
||||
targetPosition = Position.Left
|
||||
sourcePosition = Position.Right
|
||||
break
|
||||
case 'RL': // 从右到左 (Right to Left)
|
||||
targetPosition = Position.Right
|
||||
sourcePosition = Position.Left
|
||||
break
|
||||
default:
|
||||
targetPosition = Position.Top
|
||||
sourcePosition = Position.Bottom
|
||||
}
|
||||
|
||||
return {
|
||||
...node,
|
||||
targetPosition,
|
||||
sourcePosition,
|
||||
position: { x: nodeWithPosition.x, y: nodeWithPosition.y }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return { graph, layout, previousDirection }
|
||||
}
|
||||
/**
|
||||
* 递归查找指定ID的节点并添加子节点
|
||||
* @param {Array} items - 要搜索的数组
|
||||
* @param {string} targetId - 要查找的节点ID
|
||||
* @param {Object} newChild - 要添加的新子节点
|
||||
* @returns {boolean} 是否成功添加
|
||||
*/
|
||||
export function findAndAddChild(items, targetId, newChild) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i]
|
||||
|
||||
// 如果找到目标节点
|
||||
if (item.id === targetId) {
|
||||
// 初始化child数组（如果不存在）
|
||||
if (!item.children) {
|
||||
item.children = []
|
||||
}
|
||||
// 添加新子节点
|
||||
item.children.push(newChild)
|
||||
return true
|
||||
}
|
||||
|
||||
// 递归搜索子节点
|
||||
if (item.children && item.children.length > 0) {
|
||||
const found = findAndAddChild(item.children, targetId, newChild)
|
||||
if (found) return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
/**
|
||||
* 递归删除指定ID的节点
|
||||
* @param {Array} items - 要搜索的数组
|
||||
* @param {string} targetId - 要删除的节点ID
|
||||
* @returns {boolean} 是否成功删除
|
||||
*/
|
||||
export function findAndRemoveChild(items, targetId) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i]
|
||||
|
||||
// 如果找到目标节点，从当前数组中删除
|
||||
if (item.id === targetId) {
|
||||
items.splice(i, 1)
|
||||
return true
|
||||
}
|
||||
|
||||
// 递归搜索子节点
|
||||
if (item.children && item.children.length > 0) {
|
||||
const found = findAndRemoveChild(item.children, targetId)
|
||||
if (found) return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import SpecialEdge from './speciaiEdge.vue'
|
||||
import InputNode from './InputNode.vue'//主
|
||||
import SecondaryNode from './secondaryNode.vue'//分支
|
||||
import { useLayout } from '../../tools/tools'
|
||||
import { useLayout } from '@/utils/treeDiagram'
|
||||
import dialogVue from "../../components/dialog.vue";
|
||||
const props = defineProps({
|
||||
selectItem: {
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<setting />
|
||||
<flow-canvas />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -26,6 +27,7 @@
|
||||
import { useGlobalStore } from '@/stores'
|
||||
const globalStore = useGlobalStore()
|
||||
const loading = computed(() => globalStore.state.loading)
|
||||
import FlowCanvas from '@/components/Canvas/FlowCanvas/index.vue'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -4,70 +4,20 @@
|
||||
<svg-icon name="back" size="18" />
|
||||
</span>
|
||||
<p class="division"></p>
|
||||
<div class="credits-box">
|
||||
<span class="credits">{{ $t('Home.creditsNum', { num: 6000 }) }}</span>
|
||||
<span class="icon" @click="onRefresh" :class="{ loading }">
|
||||
<svg-icon name="refresh" size="21" />
|
||||
</span>
|
||||
<span class="link"></span>
|
||||
<span class="icon" @click="onShop"><svg-icon name="shop" size="21" /></span>
|
||||
</div>
|
||||
<el-popover
|
||||
placement="bottom-end"
|
||||
popper-style="width:auto; min-width: 22rem; padding: 0.8rem; border-radius: 1.4rem;"
|
||||
>
|
||||
<template #reference>
|
||||
<img class="pic" src="@/assets/images/pic.jpg" />
|
||||
</template>
|
||||
<div class="menu-box">
|
||||
<div>
|
||||
<span class="label">{{ email }}</span>
|
||||
</div>
|
||||
<p></p>
|
||||
<div class="btn" @click="onSetting">
|
||||
<span class="icon"><svg-icon name="setting" size="18" /></span>
|
||||
<span class="label">Settings</span>
|
||||
</div>
|
||||
<div class="btn" @click="onLogout">
|
||||
<span class="icon"><svg-icon name="logout" size="18" /></span>
|
||||
<span class="label">Log out</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<my-info />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MyEvent from '@/utils/myEvent'
|
||||
import MyInfo from '@/components/MyInfo.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useUserInfoStore } from '@/stores'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const email = computed(() => userInfoStore.state.userInfo.email || '------')
|
||||
const route = useRoute()
|
||||
const topNavStyle = computed(() => route.meta.topNavStyle)
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const onBack = () => {
|
||||
router.back()
|
||||
}
|
||||
const onShop = () => {
|
||||
console.log('onShop')
|
||||
// router.push({ name: 'shop' })
|
||||
}
|
||||
const onRefresh = () => {
|
||||
console.log('onRefresh')
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
const onSetting = () => {
|
||||
MyEvent.emit('openSettingDialog')
|
||||
}
|
||||
const onLogout = () => {
|
||||
userInfoStore.logOut()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -91,74 +41,5 @@
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
> .credits-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18rem;
|
||||
height: 4.3rem;
|
||||
margin-right: 1rem;
|
||||
background-color: rgba(255, 252, 244, 1);
|
||||
border: 1px solid #ffcf90;
|
||||
border-radius: 0.8rem;
|
||||
> .credits {
|
||||
flex: 1;
|
||||
font-size: 1.3rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
> .link {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-right: 1px solid #ffcf90;
|
||||
}
|
||||
> .icon {
|
||||
cursor: pointer;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
> .loading {
|
||||
animation: loading 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
.pic {
|
||||
width: 4.65rem;
|
||||
height: 4.65rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.menu-box {
|
||||
user-select: none;
|
||||
> * {
|
||||
margin-bottom: 0.4rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
height: 3.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
&.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
> .label {
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
> .icon {
|
||||
margin-left: 1rem;
|
||||
--svg-icon-color: #000;
|
||||
}
|
||||
}
|
||||
> p {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-bottom: 0.1rem solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user