queenshow/src/modules/editor/components/CompUI/basicUI/Web3D/index.ts

import { Dict_Imgs } from "@/dict";
import { createAttrsForm } from "../../defines/createAttrsForm";
import { ImagePicker } from "../../formItems/ImagePicker";
import { DesignCompObj } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { RxValue } from "@/modules/editor/controllers/ReactCtrl/rxValue";

export { Component } from "./component";

export const options = {
  name: "3D",
  thumbnail: require("@/modules/editor/assets/icons/3d.svg"),
};

const Web3dValue = {
  url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
    inline: true,
    poster: Dict_Imgs.Default,
    ratio: 1,
}

export function createComp() {
  return new CompWeb3DObj();
}

export class CompWeb3DObj extends DesignCompObj<typeof Web3dValue> {
  value = RxValue.create({...Web3dValue})
  onCreated() {
    this.compKey = "Web3D";
    this.layout.size = [750, 750];
  }
}


export const Form = createAttrsForm([
  {
    label: "3D链接",
    dataIndex: "value.url",
    component: "Input",
  },
  {
    label: "封面",
    dataIndex: "value.poster",
    component: ImagePicker,
  },
  {
    label: "场景比例",
    dataIndex: "value.ratio",
    component: "Select",
    props: {
      options: [
        { label: "1:1", value: 1 },
        { label: "4:3", value: 4 / 3 },
        { label: "3:4", value: 3 / 4 },
        { label: "16:9", value: 16 / 9 },
        { label: "9:16", value: 9 / 16 },
      ],
    },
  },
  {
    label: "内嵌3D",
    dataIndex: "value.inline",
    component: "Switch",
  },
]);