import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
import { css } from "@linaria/core";
import { useReactive } from "@queenjs/use";
import { Tree } from "ant-design-vue";
import { defineComponent } from "vue";
import { string } from "vue-types";
import { useEditor } from "../../../..";
import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
type TreeItem = {
key: string;
title: string;
value: string;
children: TreeItem[];
};
export const CompTree = defineComponent({
setup() {
const { store, actions, helper, controls } = useEditor();
const { compUICtrl } = controls;
const state = useReactive(() => ({
expandedKeys() {
const comps = helper.getCompTrees(store.currCompId);
return comps.map((comp) => comp.id);
},
treeData() {
const rootComp = helper.findRootComp();
function getCompChildren(ids: string[]): TreeItem[] {
return ids.map((id) => {
const comp = helper.findComp(id) as DesignComp;
return {
key: comp.id,
title:
compUICtrl.state.components.get(comp.compKey)?.name || "未命名",
value: comp.id,
children: getCompChildren(comp.getChildIds()),
};
});
}
return getCompChildren(rootComp?.id ? [rootComp.id] : []);
},
}));
return () => (