增加全局dialog处理逻辑

src/components/DialogManager.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useDialogs } from '../ts/useDialogs'
+import ShikigamiSelect from './flow/nodes/yys/ShikigamiSelect.vue'
+import YuhunSelect from './flow/nodes/yys/YuhunSelect.vue'
+import PropertySelect from './flow/nodes/yys/PropertySelect.vue'
+
+const { dialogs, closeDialog } = useDialogs();
+</script>
+
+<template>
+  <ShikigamiSelect
+    v-if="dialogs.shikigami.show"
+    :showSelectShikigami="dialogs.shikigami.show"
+    :currentShikigami="dialogs.shikigami.data"
+    @closeSelectShikigami="closeDialog('shikigami')"
+    @updateShikigami="data => { dialogs.shikigami.callback?.(data, dialogs.shikigami.node); closeDialog('shikigami') }"
+  />
+  <YuhunSelect
+    v-if="dialogs.yuhun.show"
+    :showSelectYuhun="dialogs.yuhun.show"
+    :currentYuhun="dialogs.yuhun.data"
+    @closeSelectYuhun="closeDialog('yuhun')"
+    @updateYuhun="data => { dialogs.yuhun.callback?.(data, dialogs.yuhun.node); closeDialog('yuhun') }"
+  />
+  <PropertySelect
+    v-if="dialogs.property.show"
+    :showPropertySelect="dialogs.property.show"
+    :currentProperty="dialogs.property.data"
+    @closePropertySelect="closeDialog('property')"
+    @updateProperty="data => { dialogs.property.callback?.(data, dialogs.property.node); closeDialog('property') }"
+  />
+</template> 

src/components/flow/nodes/yys/ShikigamiSelect.vue

@@ -2,10 +2,8 @@
   <el-dialog
       v-model="show"
       title="请选择式神"
-      @close="cancel"
-      :before-close="cancel"
   >
-    <span>当前选择式神：{{ current.name }}</span>
+    <span>当前选择式神：{{ props.currentShikigami.name }}</span>
     <div style="display: flex; align-items: center;">
       <el-input
           placeholder="请输入内容"
@@ -45,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, computed } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import shikigamiData from "../../../../data/Shikigami.json"
 
@@ -58,7 +56,7 @@ interface Shikigami {
 const props = defineProps({
   currentShikigami: {
     type: Object as () => Shikigami,
-    default: () => ({ name: '' })
+    default: () => ({ name: '未选择式神', avatar: '', rarity: '' })
   },
   showSelectShikigami: {
     type: Boolean,
@@ -68,10 +66,19 @@ const props = defineProps({
 
 const emit = defineEmits(['closeSelectShikigami', 'updateShikigami'])
 
-const searchText = ref('') // 新增搜索文本
+const show = computed({
+  get() {
+    return props.showSelectShikigami
+  },
+  set(value) {
+    if (!value) {
+      emit('closeSelectShikigami')
+    }
+  }
+})
+
+const searchText = ref('')
 const activeName = ref('ALL')
-let current = ref({name:''})
-const show = ref(false)
 
 const rarityLevels = [
   { label: "全部", name: "ALL" },
@@ -84,34 +91,16 @@ const rarityLevels = [
   { label: "呱太", name: "G" },
 ]
 
-watch(() => props.showSelectShikigami, (newVal) => {
-  show.value = newVal
-})
-
-watch(() => props.currentShikigami, (newVal) => {
-  console.log("ShikigamiSelect.vue" + current.value.name)
-  current.value = newVal
-  console.log("ShikigamiSelect.vue" + current.value.name)
-}, {deep: true})
-
-
 const handleClick = (tab: TabsPaneContext) => {
   console.log('Tab clicked:', tab)
 }
 
-const cancel = () => {
-  emit('closeSelectShikigami')
-  show.value = false
-}
-
 const confirm = (shikigami: Shikigami) => {
   emit('updateShikigami', shikigami)
-  searchText.value=''
-  activeName.value='ALL'
-  // cancel()
+  searchText.value = ''
+  activeName.value = 'ALL'
 }
 
-
 // 修改后的过滤函数
 const filterShikigamiByRarityAndSearch = (rarity: string, search: string) => {
   let filteredList = shikigamiData;

src/components/flow/nodes/yys/YuhunSelect.vue

@@ -2,10 +2,8 @@
   <el-dialog
       v-model="show"
       title="请选择御魂"
-      @close="cancel"
-      :before-close="cancel"
   >
-    <span>当前选择御魂：{{ current.name }}</span>
+    <span>当前选择御魂：{{ props.currentYuhun.name }}</span>
     <div style="display: flex; align-items: center;">
       <el-input
           placeholder="请输入内容"
@@ -45,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, computed } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import yuhunData from "../../../../data/Yuhun.json"
 
@@ -59,7 +57,7 @@ interface Yuhun {
 const props = defineProps({
   currentYuhun: {
     type: Object as () => Yuhun,
-    default: () => ({ name: '' })
+    default: () => ({ name: '未选择御魂', type: '', avatar: '' })
   },
   showSelectYuhun: {
     type: Boolean,
@@ -69,10 +67,19 @@ const props = defineProps({
 
 const emit = defineEmits(['closeSelectYuhun', 'updateYuhun'])
 
+const show = computed({
+  get() {
+    return props.showSelectYuhun
+  },
+  set(value) {
+    if (!value) {
+      emit('closeSelectYuhun')
+    }
+  }
+})
+
 const searchText = ref('') // 搜索文本
 const activeName = ref('ALL')
-let current = ref({name:''})
-const show = ref(false)
 
 const yuhunTypes = [
   { label: "全部", name: "ALL" },
@@ -85,30 +92,14 @@ const yuhunTypes = [
   { label: "特殊类", name: "Special" }
 ]
 
-watch(() => props.showSelectYuhun, (newVal) => {
-  show.value = newVal
-})
-
-watch(() => props.currentYuhun, (newVal) => {
-  console.log("YuhunSelect.vue" + current.value.name)
-  current.value = newVal
-  console.log("YuhunSelect.vue" + current.value.name)
-}, {deep: true})
-
 const handleClick = (tab: TabsPaneContext) => {
   console.log('Tab clicked:', tab)
 }
 
-const cancel = () => {
-  emit('closeSelectYuhun')
-  show.value = false
-}
-
 const confirm = (yuhun: Yuhun) => {
   emit('updateYuhun', yuhun)
-  searchText.value=''
-  activeName.value='ALL'
-  // cancel()
+  searchText.value = ''
+  activeName.value = 'ALL'
 }
 
 // 过滤函数