import { css, cx } from "@linaria/core"; import { Button, Tooltip } from "ant-design-vue"; import { computed, reactive } from "vue"; import { IconAi, IconApplication, IconCloud, IconImage, IconText, IconTpl, IconVideo, } from "@/assets/icons"; import { IconCube, IconLayers } from "@queenjs/icons"; import { defineUI } from "queenjs"; import { CompTree } from "../SliderRight/CompTree"; import AiText from "./AiText"; import Application from "./Application"; import CustomComps from "./CustomComps"; import { Sources } from "./Sources"; import Templates from "./Templates"; import Text from "./Text"; const tabs = [ { title: "模板", icon: IconTpl, component: Templates, }, { title: "组合", icon: IconCube, content: [ { title: "平台", component: CustomComps, props: { compType: "senior" }, }, { title: "我的", component: CustomComps, props: { compType: "user" }, }, ], }, { title: "文字", icon: IconText, component: Text, }, { title: "图片", icon: IconImage, component: Sources, props: { sourceType: "Image", sourceFrom: "system" }, }, // { // title: "形状", // icon: IconShape, // component: Shapes, // }, { title: "视频", icon: IconVideo, component: Sources, props: { sourceType: "Video", sourceFrom: "system" }, }, { title: "组件", icon: IconApplication, component: Application, }, { title: "已上传", icon: IconCloud, content: [ { title: "图片", component: Sources, props: { sourceType: "Image", sourceFrom: "user" }, }, { title: "视频", component: Sources, props: { sourceType: "Video", sourceFrom: "user" }, }, ], }, { title: "AI", icon: IconAi, component: AiText, }, { title: "图层", icon: () => , component: CompTree, }, ]; export default defineUI({ setup() { // @ts-ignore const state = reactive({ tabIndex: 0, compIndexs: [0, 0, 0, 0, 0, 0, 0], currentTab: computed(() => { return tabs[state.tabIndex]; }), currCompIndex: computed(() => { return state.compIndexs[state.tabIndex]; }), }); return () => { const { tabIndex, currentTab, currCompIndex } = state; const currComp = currentTab.component ? currentTab : currentTab.content?.[state.currCompIndex]; return (
{tabs.map((record, index) => { return ( <> {index === tabs.length - 2 &&
}
(state.tabIndex = index)} >
); })}
{currentTab.content && (
{currentTab.content?.map((item: any, index: number) => ( ))}
)}
); }; }, }); const tabItem = css` &:hover { color: @inf-primary-color; } &.active { color: @inf-primary-color; &:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background-color: @inf-primary-color; } } `;