aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2026-02-04 10:09:24 +08:00
parent 6a9fad0fc0
commit 6f370ac874
13 changed files with 354 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/css/style.css
View File

@@ -10,6 +10,9 @@ p {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
html,
body,
#app {
@@ -25,28 +28,3 @@ body,
transform: rotate(360deg);
}
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-1 {
flex: 1;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

4
src/assets/css/style.less
View File

@@ -11,6 +11,10 @@ p {
padding: 0;
}
*{
box-sizing: border-box;
}
html,
body,
#app {

9
src/views/home/versionTree/index.vue
View File

@@ -14,7 +14,7 @@ const props = defineProps({
})
//const emit = defineEmits([
//])
const treeState = ref(false)//
const treeState = ref(true)//
const openTree = ()=>{
treeState.value = !treeState.value
@@ -65,6 +65,13 @@ const {} = toRefs(data);
<style lang="less" scoped>
.versionTree{
--border-radius: 1rem;
--treeItem-width: 5.4rem;
--treeItem-height: 5.4rem;
--treeItem-raduis: 50%;
--treeItem-border: 2px solid #000;
--treeItem-background: #ffffff;
--treeItem-active-background: #e6e6e6;
:deep(.versionTreeBody){
--el-drawer-padding-primary: 0rem;
display: flex;

28
src/views/home/versionTree/tree/index.vue
View File

@@ -2,6 +2,7 @@
import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
import view1Item from './view1Item.vue'
import view2 from './view2/index.vue'
import { versionsList } from './view2/tools/versionsData'
const props = defineProps({
treeState:{
@@ -22,6 +23,30 @@ watch(()=>props.treeState,(newVal,oldVal)=>{
},250)
})
const view2Ref = ref(null)
const pushView2Item = (item)=>{
// if(node)view2Ref.value.pushNode(node)
// if(edge)view2Ref.value.pushEdge(edge)
view2Ref.value.push(item)
}
function traverseArray(items, callback) {
for (let i = 0; i < items.length; i++) {
const item = items[i]
callback(item, i)
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
traverseArray(item.children, callback)
}
}
}
const addView2Item = ()=>{
traverseArray(versionsList, (item, index) => {
pushView2Item(item)
})
}
const view1List = ref([
{
name:'P1',
@@ -32,6 +57,7 @@ const view1List = ref([
}
])
onMounted(()=>{
addView2Item()
})
onUnmounted(()=>{
})
@@ -44,7 +70,7 @@ const {} = toRefs(data);
<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
</div>
<div v-else class="box view2">
<view2 :list="view1List"></view2>
<view2 :list="view1List" ref="view2Ref"></view2>
</div>
</div>
</template>

11
src/views/home/versionTree/tree/view1Item.vue
View File

@@ -25,17 +25,18 @@ const {} = toRefs(data);
<style lang="less" scoped>
.btn{
font-size: 1.2rem;
width: 5rem;
height: 5rem;
width: var(--treeItem-width);
height: var(--treeItem-height);
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 2px solid #000;
border-radius: var(--treeItem-raduis);
border: var(--treeItem-border);
color: #000;
cursor: pointer;
margin-bottom: 4rem;
background-color: var(--treeItem-background);
position: relative;
&::after{
content: '';
@@ -53,7 +54,7 @@ const {} = toRefs(data);
background-origin: border-box;
}
&.active{
background-color: #e6e6e6;
background-color: var(--treeItem-active-background);
}
}
.btn:nth-child(1){

117
src/views/home/versionTree/tree/view2/index.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import type { Node, Edge } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import SpecialEdge from './speciaiEdge.vue'
import SpecialNode from './speciaiNode.vue'
import PrimaryNode from './primaryNode.vue'//主
import SecondaryNode from './secondaryNode.vue'//分支
import { useLayout } from './tools/tools'
const props = defineProps({
item: {
type: Object,
@@ -12,36 +14,76 @@ const props = defineProps({
})
//const emit = defineEmits([
//])
let data = reactive({
})
let selectId = ref(2)
// 节点类型：input、output、default、custom
// input:开始点，output：结尾点，default：普通节点，custom：自定义节点
const position = { x: 0, y: 0 }
const nodes = ref<Node[]>([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 } },
{ id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
{ id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
{ id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
{ id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
{ id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
{ id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
])
// 边类型：custom、default
// custom：自定义边，default：普通边，step：直角边，smoothstep：平滑边
const edges = ref<Edge[]>([
{ id: 'e1-2', source: '1', target: '2', type: 'custom' },
{ id: 'e1-3', source: '1', target: '3', animated: true },
{ id: 'e1-4', source: '1', target: '4', },
{ id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
{ id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
{ id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
])
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)
}
let elIndex = 1
const push = (item)=>{
if(nodes.value.length == 0){
nodes.value.push({ id: '0', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' })
}
let id = item.id.split('-')[0]
nodes.value.push(item)
}
//是否可拖动节点
const nodesDraggable = ref(false)
const toggleNodesDraggable = () => {
nodesDraggable.value = !nodesDraggable.value
}
const handleVueFlowNodeClick = (node: Node) => {
console.log(node)
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
defineExpose({push})
// const {} = toRefs(data);
</script>
<template>
<div class="view2">
<VueFlow :nodes="nodes" :edges="edges">
<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
<template #node-custom="nodeProps">
<SpecialNode v-bind="nodeProps" />
<div @click="toggleNodesDraggable">拖拽节点</div>
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
<template #node-PrimaryNode="nodeProps">
<PrimaryNode v-bind="nodeProps" />
</template>
<template #node-SecondaryNode="nodeProps">
<SecondaryNode
v-bind="nodeProps"
:selectId="selectId"
/>
</template>
<!-- <template #edge-custom="edgeProps">
@@ -59,5 +101,44 @@ const {} = toRefs(data);
width: 100%;
height: 100%;
overflow: hidden;
:deep(.custom-node){
--vf-handle: #000;
--vf-node-color: #000;
--vf-box-shadow: #000;
font-size: 1.2rem;
width: var(--treeItem-width);
height: var(--treeItem-height);
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--treeItem-raduis);
border: var(--treeItem-border);
color: #000;
cursor: pointer;
background-color: var(--treeItem-background);
box-sizing: border-box;
.vue-flow__handle-right{
transform: translate(calc(50% + 2px), -50%);
}
.vue-flow__handle-left{
transform: translate(calc(-50% - 2px), -50%);
}
.vue-flow__handle-top{
transform: translate(-50%, calc(-50% - 2px));
}
.vue-flow__handle-bottom{
transform: translate(-50%, calc(50% + 2px));
}
&.active{
background-color: var(--treeItem-active-background);
}
&.start{
background-color: #7A7A7A;
color: #FFF;
border: 2px solid #7A7A7A;
}
}
}
</style>

26
src/views/home/versionTree/tree/view2/primaryNode.vue Normal file
View File

@@ -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">
<Handle type="target" id="top" :position="Position.Top" />
<Handle type="source" id="bottom" :position="Position.Bottom" />
<Handle type="source" id="right" :position="Position.Right" />
<div>{{ props.data.id }}</div>
</div>
</template>
<style lang="less" scoped>
</style>

25
src/views/home/versionTree/tree/view2/secondaryNode.vue Normal file
View File

@@ -0,0 +1,25 @@
<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">
<Handle type="target" id="left" :position="Position.Left" />
<Handle type="source" id="right" :position="Position.Right" />
<div>{{ props.data.id }}</div>
</div>
</template>
<style lang="less" scoped>
</style>

55
src/views/home/versionTree/tree/view2/speciaiNode.vue
View File

@@ -1,55 +0,0 @@
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { ref } from 'vue'
const counter = ref(0)
</script>
<template>
<div class="custom-node">
<Handle type="target" :position="Position.Top" />
<button class="increment nodrag" @click="counter++">Increment</button>
<div v-if="counter > 0" class="counter">
<div class="count" v-for="count of counter" :key="`count-${count}`">{{ count }}</div>
</div>
</div>
</template>
<style>
.custom-node {
min-width: 100px;
gap: 4px;
padding: 8px;
background: white;
border: 1px solid black;
border-radius: 4px;
}
.increment {
border-radius: 4px;
background: #42b983;
font-size: 10px;
color: #fff;
cursor: pointer;
border: none;
}
.increment:hover {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.counter {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
}
.count {
font-size: 6px;
color: #ff0072;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
</style>

57
src/views/home/versionTree/tree/view2/tools/tools.js Normal file
View File

@@ -0,0 +1,57 @@
// 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) {
// 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 = direction === 'LR'
dagreGraph.setGraph({ rankdir: direction })
previousDirection.value = direction
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)
return {
...node,
targetPosition: isHorizontal ? Position.Left : Position.Top,
sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
}
})
}
return { graph, layout, previousDirection }
}

61
src/views/home/versionTree/tree/view2/tools/versionsData.js Normal file
View File

@@ -0,0 +1,61 @@
export const versionsList = [
{
id: '1',
name:'V1',
child:[
{
id: '1-1',
name:'V1-1',
child:[
{
id: '1-1-1',
name:'V1-1-1',
}
]
},{
id: '1-2',
name:'V1-2',
child:[
{
id: '1-2-1',
name:'V1-2-1',
},{
id: '1-2-2',
name:'V1-2-2',
}
]
},{
id: '1-2',
name:'V1-2',
child:[
{
id: '1-2-1',
name:'V1-2-1',
child:[
{
id: '1-2-1-1',
name:'V1-2-1-1',
}
]
},{
id: '1-2-2',
name:'V1-2-2',
child:[
{
id: '1-2-2-1',
name:'V1-2-2-1',
},{
id: '1-2-2-2',
name:'V1-2-2-2',
}
]
},
]
},{
id: '1-3',
name:'V1-3',
}
]
}
]