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

画布 选择卡片层级

Browse Source
This commit is contained in:
lzp
2026-03-02 10:44:19 +08:00
parent 7045fbe963
commit a865d189f3
8 changed files with 71 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Canvas/FlowCanvas/components/cards/cards-select.vue
View File

@@ -1,7 +1,7 @@
<template>
<!-- 高级工具选择 -->
<div class="cards-select">
<div v-for="v in list" :key="v.type" @click="onClickItem(v)">
<div v-for="v in list" :key="v.type" @click="onClickItem(v)" v-show="v.tier === tier">
<span class="icon">
<svg-icon :name="v.type + '-2'" size="15" size-unit="px" />
</span>
@@ -11,36 +11,44 @@
</template>
<script setup lang="ts">
import { ref, inject } from 'vue'
import { NODE_DATATYPE } from '../../tools/index.d'
import { ref, inject, computed } from 'vue'
import { NODE_DATATYPE, NODE_DATATIER } from '../../tools/index.d'
const nodeManager = inject('nodeManager') as any
const stateManager = inject('stateManager') as any
const props = defineProps({
node: { required: true, type: Object }
node: { required: true, type: Object },
tier: { default: 1, type: Number }
})
console.log(props.tier, props.node)
const list = ref([
{
tier: NODE_DATATIER.TO_REAL_STYLE,
type: NODE_DATATYPE.TO_REAL_STYLE,
title: 'To Real Style'
},
{
tier: NODE_DATATIER.SURFACE_EDIT,
type: NODE_DATATYPE.SURFACE_EDIT,
title: 'Surface Edit'
},
{
tier: NODE_DATATIER.SCENE_COMPOSITION,
type: NODE_DATATYPE.SCENE_COMPOSITION,
title: 'Scene Composition'
},
{
tier: NODE_DATATIER.COLOR_PALETTE,
type: NODE_DATATYPE.COLOR_PALETTE,
title: 'Color Palette'
},
{
tier: NODE_DATATIER.TO_3VIEW,
type: NODE_DATATYPE.TO_3VIEW,
title: 'To 3-View'
},
{
type: 'to-3d-model',
tier: NODE_DATATIER.TO_3D_MODEL,
type: NODE_DATATYPE.TO_3D_MODEL,
title: 'To 3D Model'
}
])

24
src/components/Canvas/FlowCanvas/components/cards/index.vue
View File

@@ -23,6 +23,7 @@
</template>
<script setup lang="ts">
import { NODE_DATATYPE, NODE_DATATIER } from '../../tools/index.d'
import { computed, ref, useAttrs, onMounted, inject } from 'vue'
import CardsSelect from './cards-select.vue'
import ToRealStyle from './to-real-style.vue'
@@ -37,39 +38,46 @@
// import ToCAD from './to-cad.vue'
const components = [
{
type: 'cards-select',
tier: NODE_DATATIER.CARDS_SELECT,
type: NODE_DATATYPE.CARDS_SELECT,
title: 'Advanced Tools',
component: CardsSelect,
hideFooter: true,
hideIcon: true
},
{
type: 'to-real-style',
tier: NODE_DATATIER.TO_REAL_STYLE,
type: NODE_DATATYPE.TO_REAL_STYLE,
title: 'To Real Style',
component: ToRealStyle
},
{
type: 'surface-edit',
tier: NODE_DATATIER.SURFACE_EDIT,
type: NODE_DATATYPE.SURFACE_EDIT,
title: 'Surface Edit',
component: SurfaceEdit
},
{
type: 'scene-composition',
tier: NODE_DATATIER.SCENE_COMPOSITION,
type: NODE_DATATYPE.SCENE_COMPOSITION,
title: 'Scene Composition',
component: SceneComposition
},
{
type: 'color-palette',
tier: NODE_DATATIER.COLOR_PALETTE,
type: NODE_DATATYPE.COLOR_PALETTE,
title: 'Color Palette',
component: ColorPalette
},
{
type: 'to-3view',
tier: NODE_DATATIER.TO_3VIEW,
type: NODE_DATATYPE.TO_3VIEW,
title: 'To 3-View',
component: To3View
},
{
type: 'to-3d-model',
tier: NODE_DATATIER.TO_3D_MODEL,
type: NODE_DATATYPE.TO_3D_MODEL,
title: 'To 3D Model',
component: To3DModel
}
@@ -99,9 +107,9 @@
const componentRef = ref(null)
const onGenerateClick = () => {
const data = { ...componentRef.value.data }
console.log(data)
nodeManager.createResultNode({
data: {
tier: currentComponent.value.tier,
data: {
url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
}

11
src/components/Canvas/FlowCanvas/components/node.vue
View File

@@ -21,7 +21,7 @@
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NODE_TYPE } from '../tools/index.d'
import { NODE_DATATYPE } from '../tools/index.d'
import { NODE_DATATYPE, NODE_DATATIER } from '../tools/index.d'
import { computed } from 'vue'
const props = defineProps({
type: {
@@ -40,11 +40,16 @@
const nodes = computed(() => props.stateManager.nodes.value)
const firstNode = computed(() => nodes.value[0])
const lastNode = computed(() => nodes.value[nodes.value.length - 1])
const tier = computed(() => Number(props.node?.data?.tier || 0))
const isAdd = computed(
() => props.node.id === lastNode.value.id && NODE_DATATYPE.RESULT_IMAGE === props.node.data.type
() =>
props.node.id === lastNode.value.id &&
NODE_DATATYPE.RESULT_IMAGE === props.node.data.type &&
!(tier.value === NODE_DATATIER.TO_3D_MODEL)
)
const onAdd = () => {
props.stateManager.nodeManager.createCardsSelect()
const tier_ = tier.value + 1
props.stateManager.nodeManager.createCardsSelect({ data: { tier: tier_ } })
}
const posCenter = computed(() => {
const arr = [NODE_DATATYPE.RESULT_IMAGE]

1
src/components/Canvas/FlowCanvas/components/result/result-image.vue
View File

@@ -48,6 +48,7 @@
const showHeader = ref(!!attrs.node?.data?.isHeader)
const showMenu = ref(false)
const data = reactive({
tier: props.data?.tier || 0,
url: props.data?.url || ''
})
const menus = ref([

2
src/components/Canvas/FlowCanvas/manager/NodeManager.ts
View File

@@ -53,6 +53,7 @@ export class NodeManager {
...(options ? options : {}),
component: resultImage,
data: {
tier: 0,
type: NODE_DATATYPE.RESULT_IMAGE,
isHeader: true,
...(options?.data || {}),
@@ -67,6 +68,7 @@ export class NodeManager {
component: card,
positionY: 50,
data: {
tier: 1,
type: NODE_DATATYPE.CARDS_SELECT,
...(options?.data || {}),
},

13
src/components/Canvas/FlowCanvas/tools/index.d.ts vendored
View File

@@ -20,3 +20,16 @@ export const NODE_DATATYPE = {
TO_3VIEW: 'to-3view',
TO_3D_MODEL: 'to-3d-model',
}
/**
* 节点数据层级
*/
export const NODE_DATATIER = {
RESULT_IMAGE: 0,
CARDS_SELECT: 0,
TO_REAL_STYLE: 1,
SURFACE_EDIT: 1,
SCENE_COMPOSITION: 2,
COLOR_PALETTE: 2,
TO_3VIEW: 2,
TO_3D_MODEL: 3,
}