diff --git a/package.json b/package.json index e94590e..445f0f0 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,14 @@ }, "dependencies": { "@element-plus/icons-vue": "^2.3.1", + "@vue-flow/background": "^1.3.2", + "@vue-flow/controls": "^1.1.2", + "@vue-flow/core": "^1.42.5", + "@vue-flow/node-resizer": "^1.4.0", "@vueup/vue-quill": "^1.2.0", "element-plus": "^2.9.1", "html2canvas": "^1.4.1", "pinia": "^3.0.1", - "simple-mind-map": "^0.13.1-fix.2", "vue": "^3.3.10", "vue-i18n": "^11.1.1", "vue3-draggable-resizable": "^1.6.5", diff --git a/src/App.vue b/src/App.vue index 6123a01..a6ee4e0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,34 +1,68 @@ \ No newline at end of file diff --git a/src/components/Yys.vue b/src/components/Yys.vue index 16c2738..1928d6a 100644 --- a/src/components/Yys.vue +++ b/src/components/Yys.vue @@ -1,9 +1,109 @@ + \ No newline at end of file diff --git a/src/components/YysRank.vue b/src/components/YysRank.vue index 503b716..c59f188 100644 --- a/src/components/YysRank.vue +++ b/src/components/YysRank.vue @@ -16,7 +16,7 @@
-
+
{{ t('AddShikigami') }} @@ -26,9 +26,6 @@ + + + + \ No newline at end of file diff --git a/src/components/flow/nodes/yys/YuhunSelect.vue b/src/components/flow/nodes/yys/YuhunSelect.vue new file mode 100644 index 0000000..c9fd5e7 --- /dev/null +++ b/src/components/flow/nodes/yys/YuhunSelect.vue @@ -0,0 +1,129 @@ + + + \ No newline at end of file diff --git a/src/components/flow/nodes/yys/YuhunSelectNode.vue b/src/components/flow/nodes/yys/YuhunSelectNode.vue new file mode 100644 index 0000000..e3d4dda --- /dev/null +++ b/src/components/flow/nodes/yys/YuhunSelectNode.vue @@ -0,0 +1,230 @@ + + + + + diff --git a/src/data/Shikigami.json b/src/data/Shikigami.json index 8b8dd38..a40d90c 100644 --- a/src/data/Shikigami.json +++ b/src/data/Shikigami.json @@ -1,9 +1,4 @@ [ - { - "avatar": "/assets/Shikigami/ssr/583.png", - "name": "卑弥呼", - "rarity": "SSR" - }, { "avatar": "/assets/Shikigami/l/582.png", "name": "巡音流歌", diff --git a/src/ts/dialogStore.js b/src/ts/dialogStore.js new file mode 100644 index 0000000..574d6cc --- /dev/null +++ b/src/ts/dialogStore.js @@ -0,0 +1,123 @@ +// src/store/dialogStore.js +import { defineStore } from 'pinia'; + +export const useDialogStore = defineStore('dialog', { + state: () => ({ + // 对话框可见性 + shikigamiVisible: false, + yuhunVisible: false, + propertyVisible: false, + + // 当前选中的节点信息 + selectedNode: null, + + // 当前选中的数据（式神、御魂、属性） + currentShikigami: { name: '未选择式神', avatar: '', rarity: '' }, + currentYuhun: { name: '未选择御魂', avatar: '', type: '' }, + currentProperty: { type: '未选择属性', priority: 'optional', description: '' }, + }), + + actions: { + // 打开式神选择对话框 + openShikigamiDialog(node) { + this.selectedNode = node; + this.shikigamiVisible = true; + }, + + // 关闭式神选择对话框 + closeShikigamiDialog() { + this.shikigamiVisible = false; + }, + + // 更新式神信息 + updateShikigami(shikigami) { + if (this.selectedNode) { + try { + // 获取节点引用，尝试多种方式获取 Vue 组件实例 + const nodeElement = document.querySelector(`[data-id="${this.selectedNode.id}"]`); + if (nodeElement) { + let nodeInstance = null; + + // 方法1：通过 __vueParentComponent (Vue 3) + if (nodeElement.__vueParentComponent && nodeElement.__vueParentComponent.ctx) { + nodeInstance = nodeElement.__vueParentComponent.ctx; + } + // 方法2：通过 __vue_app__ (Vue 3) + else if (nodeElement.__vue_app__) { + nodeInstance = nodeElement.__vue_app__; + } + + // 如果找到实例并且有更新方法，调用它 + if (nodeInstance && nodeInstance.updateNodeShikigami) { + nodeInstance.updateNodeShikigami(shikigami); + console.log('式神信息已更新:', shikigami.name); + } else { + console.warn('无法调用节点更新方法'); + // 备用方案：通过全局事件总线传递更新 + window.dispatchEvent(new CustomEvent('update-shikigami', { + detail: { nodeId: this.selectedNode.id, shikigami }, + })); + } + } + } catch (error) { + console.error('更新式神信息时出错:', error); + } + } + + // 关闭对话框 + this.shikigamiVisible = false; + }, + + // 打开御魂选择对话框 + openYuhunDialog(node) { + this.selectedNode = node; + this.yuhunVisible = true; + }, + + // 关闭御魂选择对话框 + closeYuhunDialog() { + this.yuhunVisible = false; + }, + + // 更新御魂信息 + updateYuhun(yuhun) { + this.currentYuhun = yuhun; + this.closeYuhunDialog(); + this.updateNodeData('yuhun', yuhun); + }, + + // 打开属性选择对话框 + openPropertyDialog(node) { + this.selectedNode = node; + this.propertyVisible = true; + }, + + // 关闭属性选择对话框 + closePropertyDialog() { + this.propertyVisible = false; + }, + + // 更新属性信息 + updateProperty(property) { + this.currentProperty = property; + this.closePropertyDialog(); + this.updateNodeData('property', property); + }, + + // 统一更新节点数据（通过事件总线或直接调用方法） + updateNodeData(type, data) { + if (this.selectedNode) { + // 方法1：通过事件总线触发更新（推荐） + window.dispatchEvent(new CustomEvent(`update-${type}`, { + detail: { nodeId: this.selectedNode.id, data } + })); + + // 方法2：直接调用节点实例的方法（如果节点组件支持） + // const nodeElement = document.querySelector(`[data-id="${this.selectedNode.id}"]`); + // if (nodeElement && nodeElement.__vueParentComponent?.ctx?.[`updateNode${type.charAt(0).toUpperCase() + type.slice(1)}`]) { + // nodeElement.__vueParentComponent.ctx[`updateNode${type.charAt(0).toUpperCase() + type.slice(1)}`](data); + // } + } + }, + }, +}); \ No newline at end of file