import { TreeToolbars } from "@/modules/editor/objects/Toolbars"; import { css } from "@linaria/core"; import { Image } from "@queenjs/ui"; import { useReactive } from "@queenjs/use"; import { Tree } from "ant-design-vue"; import { defineComponent, effect } 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: [] as string[], 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: comp.title || compUICtrl.state.components.get(comp.compKey)?.name || "未命名", value: comp.id, children: getCompChildren(comp.getChildIds()), }; }); } return getCompChildren(rootComp?.id ? [rootComp.id] : []); }, })); effect(() => { state.expandedKeys = helper .getCompTrees(store.currCompId) .map((comp) => comp.id); }); return () => ( actions.pickComp( (ids[0] as string) || state.expandedKeys.at(-2) || "root" ) } > {{ title: (data: any) => { return ; }, }} ); }, }); const CompNode = defineComponent({ props: { id: string().isRequired, title: string().isRequired, }, setup(props) { const editor = useEditor(); const comp = editor.helper.findComp(props.id); return () => { if (!comp) return; const compOpts = editor.controls.compUICtrl.state.components.get( comp.compKey ); const actions = TreeToolbars[comp.compKey] || TreeToolbars.default; const thumbnail = comp.compKey === "Image" ? comp.value.url : comp.thumbnail || compOpts?.thumbnail; return (
{props.title} {actions.map((action) => action.getVisible.call(editor, comp) ? ( { e.stopPropagation(); action.onClick.call(editor, comp); }} /> ) : null )}
); }; }, }); const treeStyle = css` .ant-tree-switcher { display: flex; justify-content: center; align-items: center; } `; const nodeStyle = css` display: flex; align-items: center; padding: 6px; @apply rounded; > img { width: 24px; height: 24px; margin-right: 6px; object-fit: contain; } `;