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

import { useEditor } from "@/modules/editor";
import { ICompKeys } from "@/modules/editor/typings";
import { Radio } from "ant-design-vue";
import { defineUI } from "queenjs";
import { Container, Draggable } from "vue-dndrop";
import { css } from "@linaria/core";
import * as basicUI from "../../CompUI/basicUI";
import * as customUI from "../../CompUI/customUI";
import { CompCtrl } from "../../CompUI/CompController";

export default defineUI({
  setup() {
    const editor = useEditor();

    return () => (
      <div class="h-full flex flex-col">
        <div class="p-16px border-bottom !border-2px">资源中心</div>
        <div class="m-16px flex-1 flex flex-col h-0">
          <Radio.Group>
            <Radio.Button>模板</Radio.Button>
            <Radio.Button>组件</Radio.Button>
          </Radio.Group>
          <div class="text-16px font-bold my-16px">基础组件</div>
          <Container
            class={basicStyle}
            orientation="horizontal"
            behaviour="copy"
            group-name="canvas"
            get-child-payload={(index: number) => {
              return Object.keys(basicUI)[index];
            }}
          >
            {Object.entries(basicUI).map(([compKey]) => {

              const ComType = CompCtrl.getCompType(compKey) as any;

      
              return (
                <Draggable key={compKey}>
                  <div
                    class="draggable-item text-center"
                    onClick={() =>
                      editor.actions.addCompToDesign(compKey as ICompKeys)
                    }
                  >
                    <img
                      class="w-full rounded-2px pointer-events-none"
                      src={ComType.thumbnail}
                      alt="封面图"
                    />
                    {ComType.name}
                  </div>
                </Draggable>
              );
            })}
          </Container>
          <div class="text-16px font-bold my-16px">模块组件</div>
          <Container
            class="-mx-16px p-16px space-y-10px flex-1 scrollbar"
            behaviour="copy"
            group-name="canvas"
            get-child-payload={(index: number) => {
              return Object.keys(customUI)[index];
            }}
          >
            {Object.entries(customUI).map(([compKey]) => {
              const ComType = CompCtrl.getCompType(compKey) as any;


              return (
                <Draggable>
                  <div
                    class="text-center leading-50px bg-dark-50 rounded draggable-item"
                    key={compKey}
                    onClick={() =>
                      editor.actions.addCompToDesign(compKey as ICompKeys)
                    }
                  >
                    <img
                      class="w-full rounded pointer-events-none"
                      src={ ComType.thumbnail }
                      alt="封面图"
                    />
                    {/* {ComType.name} */}
                  </div>
                </Draggable>
              );
            })}
          </Container>
        </div>
      </div>
    );
  },
});

const basicStyle = css`
  margin: -10px;
  border-spacing: 10px;
`;