Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

src/views/canvas1/components/node/InputNode.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { ref } from 'vue'
+const props = defineProps<{
+	data: {
+		type: Object,
+		default: () => ({
+			id: '',
+		})
+	}
+}>()
+
+</script>
+
+<template>
+	<div class="node start">
+		<Handle type="source" style="top: 40px;" id="Right" :position="Position.Right" />
+		<div class="item">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/views/canvas1/components/node/secondaryNode.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { ref } from 'vue'
+const props = defineProps<{
+	data: {
+		type: Object,
+		default: () => ({
+			id: '',
+		})
+	},
+}>()
+
+</script>
+<!-- source输入，target输出 -->
+<template>
+	<div class="node">
+		<Handle type="target" style="top: 40px;" id="Left" :position="Position.Left" />
+		<Handle type="source" style="top: 40px;" id="Right" :position="Position.Right" />
+		<!-- <Handle type="source" id="Right" :position="Position.Right" />
+		<Handle type="target" id="Left" :position="Position.Left" /> -->
+		<!-- <div>{{ props.data.id }}</div> -->
+		<div class="item">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.node{
+	.item{
+	}
+}
+</style>

src/views/canvas1/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="canvas">
-		<div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
+		<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
 			<div
 				class="canvas-content"
 				:style="{
@@ -18,14 +18,35 @@
 				<card type="add-print" />
 				<card type="edit-material" />
 			</div>
-		</div>
+		</div> -->
+
+		<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="" :nodes-draggable="true">
+			<template #node-InputNode="nodeProps">
+				<inputNode v-bind="nodeProps" >
+					<template v-slot:content>{{ nodeProps.type }}
+						<card type="to-real-style" />
+					</template> 	
+				</inputNode>
+			</template>
+			<template #node-SecondaryNode="nodeProps">
+				<secondaryNode v-bind="nodeProps" >
+					<template v-slot:content>
+						<card type="scene-composition" />
+					</template> 
+				</secondaryNode>
+			</template>
+		</VueFlow>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import card from './components/cards/index.vue'
-	import { computed, ref, markRaw, onMounted, reactive } from 'vue'
+	import { useLayout } from '@/utils/treeDiagram'
+	import { VueFlow, useVueFlow } from '@vue-flow/core'
+	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
 	import { useGlobalStore } from '@/stores'
+	import secondaryNode from './components/node/secondaryNode.vue'
+	import inputNode from './components/node/InputNode.vue'
 	const globalStore = useGlobalStore()
 	const data = reactive({
 		x: 100,
@@ -59,11 +80,35 @@
 		if (scale > 10) scale = 10
 		data.scale = scale
 	}
+	const position = { x: 0, y: 0 }
+
+	const nodes = ref<Node[]>([
+		  { id: '1', type: 'InputNode', label: 'Node 1', class: 'custom-node start', position },
+		  { id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
+	])
+	const edges = ref<Edge[]>([
+		  { id: 'e1-3', source: '1', target: '2', type: 'smoothstep', },
+	])
+	const { fitView } = useVueFlow()
+	const { layout } = useLayout()
+	async function layoutGraph(direction) {
+		setTimeout(() => {
+			nodes.value = layout(nodes.value, edges.value, direction)
+			console.log(nodes.value)
+			nextTick(() => {
+				fitView()
+			})
+		}, 0)
+	}
+
 	onMounted(() => {
 		globalStore.setHomeLeftNavCollapse(true)
 	})
 </script>
-
+<style lang="less">
+@import "@vue-flow/core/dist/style.css";
+@import "@vue-flow/core/dist/theme-default.css";
+</style>
 <style lang="less" scoped>
 	.canvas {
 		// overflow-y: auto;
@@ -90,5 +135,9 @@
 				transform-origin: top left;
 			}
 		}
+		> .vue-flow{
+			width: 100%;
+			height: 100%;
+		}
 	}
 </style>

src/views/home/agent/components/versionTree/index.vue

@@ -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'
 

src/views/home/agent/components/versionTree/tools/tools.js

@@ -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
-  }

src/views/home/agent/components/versionTree/tree/view2/index.vue

@@ -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: {

src/views/home/index.vue

@@ -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>

src/views/home/top-nav.vue

@@ -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>

src/views/login/login.vue

@@ -48,7 +48,12 @@
 					</el-form>
 					<div class="tip-2" v-html="$t('Login.noAccountToSignUp')"></div>
 				</template>
-				<visible-code v-else :email="formData.email" @submit="onVerifyCode" />
+				<visible-code
+					v-show="isVisible"
+					ref="visibleCodeRef"
+					:email="formData.email"
+					@submit="onVerifyCode"
+				/>
 				<other-login />
 			</div>
 		</div>
@@ -84,11 +89,14 @@
 			router.back()
 		}
 	}
+	const visibleCodeRef = ref(null)
 	const onSubmit = () => {
 		formRef.value?.validate?.((valid) => {
 			if (valid) {
 				// console.log('submit!')
-				isVisible.value = true
+				visibleCodeRef.value?.onSendCode().then(() => {
+					isVisible.value = true
+				})
 			} else {
 				console.warn('error submit!')
 			}

src/views/login/register.vue

@@ -52,7 +52,12 @@
 					</el-form>
 					<div class="tip-2" v-html="$t('Login.havenAccountToLogin')"></div>
 				</template>
-				<visible-code v-else :email="formData.email" @submit="onVerifyCode" />
+				<visible-code
+					v-show="isVisible"
+					ref="visibleCodeRef"
+					:email="formData.email"
+					@submit="onVerifyCode"
+				/>
 				<other-login />
 			</div>
 		</div>
@@ -90,11 +95,14 @@
 			router.back()
 		}
 	}
+	const visibleCodeRef = ref(null)
 	const onSubmit = () => {
 		formRef.value?.validate?.((valid) => {
 			if (valid) {
 				// console.log('submit!')
-				isVisible.value = true
+				visibleCodeRef.value?.onSendCode().then(() => {
+					isVisible.value = true
+				})
 			} else {
 				console.warn('error submit!')
 			}

src/views/login/visible-code.vue

@@ -45,16 +45,17 @@
 		clearTime()
 	})
 	onMounted(() => {
-		onSendCode()
+		// onSendCode()
 	})
 	const onSendCode = async () => {
 		const email = props.email
 		if (!email) {
 			console.warn('请输入邮箱')
-			return
+			return Promise.reject('请输入邮箱')
 		}
-		setTime()
 		await SendVerificationCode({ email })
+		setTime()
+		return Promise.resolve()
 	}
 	const onResend = () => {
 		if (time.value > 0) return
@@ -64,6 +65,9 @@
 		if (code.value.length !== 6) return
 		emit('submit', code.value)
 	}
+	defineExpose({
+		onSendCode
+	})
 </script>
 
 <style lang="less" scoped>