diff --git a/preview/views/MainView.vue b/preview/views/MainView.vue index f79a56e..c7e4f7b 100644 --- a/preview/views/MainView.vue +++ b/preview/views/MainView.vue @@ -77,7 +77,7 @@ let componentsList = []; const store = useSchemeStore(); watch(store, (n) => { - console.log("store发生了变化", n); + // console.log("store发生了变化", n); }); const baseScheme = { @@ -158,7 +158,7 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex const onEnd = (event: DraggableEvent) => { // console.log("onEnd", event); - store.nowComponentsData = event.clonedData; + store.updateNowScheme(event.clonedData); }; const onStart = (event) => { diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue index 8b9fbdf..32d193d 100644 --- a/src/components/DynamicComponent.vue +++ b/src/components/DynamicComponent.vue @@ -76,7 +76,8 @@ const isHovered = ref(false); const handleClick = () => { const currentComponent = getCurrentSchemeObj(); if (currentComponent) { - store.nowComponentsData = currentComponent + + store.updateNowScheme(currentComponent); console.log(`Component with id ${currentComponent?.id} was clicked.`); // 你可以在这里执行更多的逻辑,例如发出一个事件或调用一个方法 } @@ -137,7 +138,7 @@ const adjustHeaderPosition = () => { }; onMounted(() => { - console.log(props.componentData); + console.log("组件挂载后",props.componentData); }); watch(() => componentSelected.value, () => { diff --git a/src/stores/useSchemeStore.ts b/src/stores/useSchemeStore.ts index 3151535..a60c02e 100644 --- a/src/stores/useSchemeStore.ts +++ b/src/stores/useSchemeStore.ts @@ -1,16 +1,27 @@ -import { defineStore } from 'pinia'; -import { IPageComponent } from '@/type/IPageComponent'; -import { sha256 } from 'js-sha256'; +import {defineStore} from 'pinia'; +import {IPageComponent} from '@/type/IPageComponent'; +import {sha256} from 'js-sha256'; // 缓存对象 const idToObjectCache = new Map(); +// 栈维护函数 +function pushToStack(stack: string[], id: string): void { + if (!stack.includes(id)) { + stack.push(id); + } +} + +function popFromStack(stack: string[]): string | undefined { + return stack.pop(); +} + function findObjectById(obj: any, targetId: string) { if (Array.isArray(obj)) { for (let i = 0; i < obj.length; i++) { const item = obj[i]; if (item.id === targetId) { - return { item, index: i, parent: obj }; + return {item, index: i, parent: obj}; } const found = findObjectById(item, targetId); if (found) return found; @@ -38,6 +49,7 @@ export const useSchemeStore = defineStore('scheme', { currentIndex: -1, // 当前索引 currentLength: 0, // 当前队列中有效元素的数量 currentHash: '', // 当前状态的哈希值 + selectedComponentStack: [] as string[], // 最近选择组件栈 }), getters: { canUndo: (state) => state.currentIndex >= 0, @@ -76,23 +88,33 @@ export const useSchemeStore = defineStore('scheme', { } this.saveNewState(currentStateHash); }, + updateNowScheme(updates: Partial) { + this.nowComponentsData = updates; + pushToStack(this.selectedComponentStack, this.nowComponentsData.id); + }, deleteScheme(id: string) { + console.log("删除前,组件id",id) + console.log("删除前,栈",this.selectedComponentStack) + const currentStateHash = this.currentHash; const objToDelete = findObjectById(this.previewScheme, id); if (objToDelete) { - const { item, index, parent } = objToDelete; + const {item, index, parent} = objToDelete; parent.splice(index, 1); idToObjectCache.delete(id); // 从缓存中删除 - - // 清理 nowComponentsData - if (this.nowComponentsData.id === id) { - this.nowComponentsData = {} as IPageComponent; - } - // 清理 history 中的引用 this.cleanupReferences(id); + } this.saveNewState(currentStateHash); + popFromStack(this.selectedComponentStack); + const preComponentId=popFromStack(this.selectedComponentStack) + console.log("删除后,栈",this.selectedComponentStack) + console.log("删除后,前一个组件id",preComponentId) + const preObj=this.getSchemeObj(preComponentId) + console.log("删除后,前一个组件",preObj) + + this.nowComponentsData = preObj; }, cleanupReferences(id: string) { // 清理 nowComponentsData @@ -106,7 +128,7 @@ export const useSchemeStore = defineStore('scheme', { if (historyState) { const obj = findObjectById(historyState, id); if (obj) { - const { parent, index } = obj; + const {parent, index} = obj; parent.splice(index, 1); } }