queenshow/src/modules/editor/components/Viewport/Slider/SliderLeft/index.tsx

import { Button } from "ant-design-vue";
import { computed, reactive } from "vue";

import { IconImage, IconShape, IconTpl, IconVideo } from "@/assets/icons";
import { css, cx } from "@linaria/core";
import { IconCube, IconLayers } from "@queenjs/icons";
import { defineUI } from "queenjs";
import CustomComps from "./CustomComps";
import Shapes from "./Shapes";
import { Sources } from "./Sources";
import Templates from "./Templates";
import { CompTree } from "../SliderRight/CompTree";

const tabs = [
  {
    title: "图片",
    icon: IconImage,
    content: [
      {
        title: "平台",
        component: Sources,
        props: { sourceType: "Image", sourceFrom: "system" },
      },
      {
        title: "我的",
        component: Sources,
        props: { sourceType: "Image", sourceFrom: "user" },
      },
    ],
  },
  // {
  //   title: "形状",
  //   icon: IconShape,
  //   component: Shapes,
  // },
  {
    title: "视频",
    icon: IconVideo,
    content: [
      {
        title: "平台",
        component: Sources,
        props: { sourceType: "Video", sourceFrom: "system" },
      },
      {
        title: "我的",
        component: Sources,
        props: { sourceType: "Video", sourceFrom: "user" },
      },
    ],
  },
  {
    title: "组件",
    icon: IconCube,
    content: [
      {
        title: "平台",
        component: CustomComps,
        props: { compType: "senior" },
      },
      {
        title: "我的",
        component: CustomComps,
        props: { compType: "user" },
      },
    ],
  },
  {
    title: "模板",
    icon: IconTpl,
    component: Templates,
  },
  {
    title: "图层",
    icon: () => <IconLayers class="text-24px transform scale-170" />,
    component: CompTree,
  },
];

export default defineUI({
  setup() {
    // @ts-ignore
    const state = reactive({
      tabIndex: 0,
      compIndexs: [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 (
        <div class="h-full flex">
          <div class="flex flex-col w-70px py-16px border-right !border-2px">
            {tabs.map((record, index) => {
              return (
                <>
                  {index === tabs.length - 1 && <div class="flex-1"></div>}
                  <div
                    key={index}
                    class={cx(
                      tabItem,
                      "relative mt-10px py-8px text-center cursor-pointer text-light-50 transition",
                      state.tabIndex == index && "active"
                    )}
                    onClick={() => (state.tabIndex = index)}
                  >
                    <record.icon class="text-24px" />
                    <div class="text-center mt-2px">{record.title}</div>
                  </div>
                </>
              );
            })}
          </div>
          <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
            {currentTab.content && (
              <div class="mt-5px ml-10px space-x-10px">
                {currentTab.content?.map((item: any, index: number) => (
                  <Button
                    key={index}
                    type="text"
                    class={cx(
                      "transition",
                      currCompIndex == index && "font-bold"
                    )}
                    onClick={() => (state.compIndexs[tabIndex] = index)}
                  >
                    {item?.title}
                  </Button>
                ))}
              </div>
            )}

            <currComp.component
              class="flex-1 h-1/1 px-16px !my-10px overflow-y-auto"
              {...currComp.props}
            />
          </div>
        </div>
      );
    };
  },
});

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;
    }
  }
`;