update

src/modules/editor/components/Canvas/index.tsx

@@ -1,14 +1,14 @@
 import { defineUI } from "queenjs";
 import { useEditor } from "../..";
-import ErrorComp from "../CompUI/placeHoder";
+import { CompUI } from "../CompUI";
 
 export default defineUI({
   setup() {
-    const { store, config } = useEditor();
+    const { store } = useEditor();
     return () => (
       <div>
         {store.designData.content.map((d) => {
-          const Comp: any = config.compUI[d.compKey]?.Component;
+          const Comp: any = CompUI[d.compKey]?.Component;
           return Comp && <Comp key={d.id} compId={d.id} />;
         })}
       </div>

src/modules/editor/components/CompUI/basicUI/Container/component.tsx

@@ -1,6 +1,7 @@
 import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
+import { CompUI } from "../..";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../defines/DesignTemp/DesignComp";
 import { Transfer } from "../Transfer";
@@ -11,7 +12,7 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const { store, config, helper } = useEditor();
+    const { store, helper } = useEditor();
     const { value, children } = useCompData(props.compId);
     return () => (
       <View
@@ -24,7 +25,7 @@ export const Component = defineComponent({
       >
         {Object.values(children).map((comp) => {
           const compItem = comp as DesignComp;
-          const Comp = config.compUI[compItem.compKey].Component;
+          const Comp = CompUI[compItem.compKey].Component;
           return <Comp key={compItem.id} compId={compItem.id} />;
         })}
         {store.currCompId === props.compId && (

src/modules/editor/components/CompUI/basicUI/Video/component.tsx

@@ -0,0 +1,42 @@
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { View } from "../View";
+import { useEditor } from "@/modules/editor";
+
+export const Component = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { store, controls } = useEditor();
+    const { value } = useCompData(props.compId);
+
+    async function changeVal() {
+      const url = await controls.pickCtrl.pickOneImage();
+      if (!url) return;
+      value.url = url;
+    }
+
+    return () => {
+      const options: any = {};
+      if (value.autoplay) options.autoplay = true;
+      if (value.loop) options.loop = true;
+      if (value.controls) options.controls = true;
+
+      return (
+        <View
+          compId={props.compId}
+          onDblclick={store.isEditMode ? changeVal : undefined}
+        >
+          <video
+            class="w-full object-cover"
+            src={value.url}
+            style={{ aspectRatio: value.ratio }}
+            {...options}
+          />
+        </View>
+      );
+    };
+  },
+});

src/modules/editor/components/CompUI/basicUI/Video/index.ts

@@ -0,0 +1,49 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "视频",
+  thumbnail: Dict_Imgs.Default,
+  value: {
+    url: "//infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/media/shoes.1c5c29ad.webm",
+    ratio: 1,
+    autoplay: true,
+    loop: true,
+    controls: false,
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    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: "自动播放",
+    dataIndex: "value.autoplay",
+    component: "Switch",
+  },
+  {
+    label: "循环播放",
+    dataIndex: "value.loop",
+    component: "Switch",
+  },
+  {
+    label: "显示控制器",
+    dataIndex: "value.controls",
+    component: "Switch",
+  },
+]);

src/modules/editor/components/CompUI/basicUI/Web3D/component.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { View } from "../View";
+
+export const Component = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { value } = useCompData(props.compId);
+
+    return () => {
+      return (
+        <View>
+          <img
+            class="w-full"
+            src={value.poster}
+            style={{ aspectRatio: value.ratio }}
+          />
+        </View>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,38 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+import { ImagePicker } from "../../formItems/ImagePicker";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "3D",
+  thumbnail: Dict_Imgs.Default,
+  value: {
+    url: "//infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/media/shoes.1c5c29ad.webm",
+    ratio: 1,
+    poster: Dict_Imgs.Default,
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    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: "显示控制器",
+    dataIndex: "value.poster",
+    component: ImagePicker,
+  },
+]);

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

@@ -1,3 +1,5 @@
-export * as Text from "./Text";
-export * as Image from "./Image";
 export * as Container from "./Container";
+export * as Image from "./Image";
+export * as Text from "./Text";
+export * as Video from "./Video";
+export * as Web3D from "./Web3D";

src/modules/editor/components/CompUI/customUI/Cards/Card/component.tsx

@@ -1,7 +1,7 @@
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Image, Text } from "../../..";
 import { useEditor } from "../../../../..";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({

src/modules/editor/components/CompUI/customUI/Cards/Card2/component.tsx

@@ -1,9 +1,9 @@
+import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Image, Text } from "../../..";
 import { useEditor } from "../../../../..";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
-import { css } from "@linaria/core";
 
 export const Component = createUIComp({
   props: {

src/modules/editor/components/CompUI/customUI/Cards/Card3/component.tsx

@@ -1,9 +1,8 @@
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Image, Text } from "../../..";
 import { useEditor } from "../../../../..";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
-import { css } from "@linaria/core";
 
 export const Component = createUIComp({
   props: {
@@ -11,7 +10,7 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { value, children } = useCompData(props.compId);
+    const { children } = useCompData(props.compId);
 
     return () => (
       <div class="flex justify-between">
@@ -21,46 +20,42 @@ export const Component = createUIComp({
 
           <div class="flex justify-between mt-0.07rem">
             <Image.Component
-                  class="rounded-1/2 overflow-hidden"
-                  style={{
-                  
-                  width: designToNaturalSize(51),
-                  height: designToNaturalSize(51),
-                  }}
-                  compId={children.item1.id}
-              />
+              class="rounded-1/2 overflow-hidden"
+              style={{
+                width: designToNaturalSize(51),
+                height: designToNaturalSize(51),
+              }}
+              compId={children.item1.id}
+            />
 
             <Image.Component
-                class="rounded-1/2 overflow-hidden"
-                style={{
+              class="rounded-1/2 overflow-hidden"
+              style={{
                 width: designToNaturalSize(51),
                 height: designToNaturalSize(51),
-                }}
-                compId={children.item2.id}
+              }}
+              compId={children.item2.id}
             />
-            
+
             <Image.Component
-                class="rounded-1/2 overflow-hidden"
-                style={{
+              class="rounded-1/2 overflow-hidden"
+              style={{
                 width: designToNaturalSize(51),
                 height: designToNaturalSize(51),
-                }}
-                compId={children.item3.id}
+              }}
+              compId={children.item3.id}
             />
           </div>
         </div>
-        <Image.Component class="overflow-hidden"
-                    style={{
-                    width: designToNaturalSize(317),
-                    height: designToNaturalSize(240),
-                    }}
-                    compId={children.bgImg.id}
-                />
-        </div>
+        <Image.Component
+          class="overflow-hidden"
+          style={{
+            width: designToNaturalSize(317),
+            height: designToNaturalSize(240),
+          }}
+          compId={children.bgImg.id}
+        />
+      </div>
     );
   },
 });
-const upStyle = css`
-  position:relative;
-  
-`

src/modules/editor/components/CompUI/customUI/Cards/CardList/component.tsx

@@ -2,8 +2,8 @@ import { Dict_Imgs } from "@/dict";
 import { watch } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Image, Text } from "../../..";
 import { useEditor } from "../../../../..";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({

src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -3,7 +3,7 @@ import { isPc } from "@queenjs/utils";
 import { onMounted, ref } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../..";
+import { Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({

src/modules/editor/components/CompUI/customUI/Covers/Cover2/component.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Image, Text } from "../../..";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({

src/modules/editor/components/CompUI/customUI/Titles/Title1/component.tsx

@@ -1,8 +1,8 @@
 import { css } from "@linaria/core";
 import { string } from "vue-types";
-import { Text } from "../../..";
-import { createUIComp } from "../../../defines/createUIComp";
 import { useCompData } from ".";
+import { Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({
   props: {

src/modules/editor/components/CompUI/customUI/Titles/Title2/component.tsx

@@ -1,8 +1,8 @@
+import { css, cx } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../..";
+import { Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
-import { css, cx } from "@linaria/core";
 
 export const Component = createUIComp({
   props: {

src/modules/editor/components/CompUI/customUI/Titles/Title3/component.tsx

@@ -1,8 +1,8 @@
+import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../..";
+import { Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
-import { css, cx } from "@linaria/core";
 
 export const Component = createUIComp({
   props: {

src/modules/editor/components/CompUI/customUI/index.ts

@@ -0,0 +1,11 @@
+export * as Card from "./Cards/Card";
+export * as CardList from "./Cards/CardList";
+export * as Card2 from "./Cards/Card2";
+export * as Card3 from "./Cards/Card3";
+
+export * as Cover from "./Covers/Cover";
+export * as Cover2 from "./Covers/Cover2";
+
+export * as Title1 from "./Titles/Title1";
+export * as Title2 from "./Titles/Title2";
+export * as Title3 from "./Titles/Title3";

src/modules/editor/components/CompUI/index.ts

@@ -1,13 +1,7 @@
-export * as Image from "./basicUI/Image";
-export * as Text from "./basicUI/Text";
-export * as Container from "./basicUI/Container";
-export * as Card from "./customUI/Cards/Card";
-export * as CardList from "./customUI/Cards/CardList";
-export * as Cover from "./customUI/Covers/Cover";
-export * as Cover2 from "./customUI/Covers/Cover2";
-export * as Title1 from "./customUI/Titles/Title1";
-export * as Title2 from "./customUI/Titles/Title2";
-export * as Title3 from "./customUI/Titles/Title3";
+import * as basicUI from "./basicUI";
+import * as customUI from "./customUI";
 
-export * as Card2 from "./customUI/Cards/Card2";
-export * as Card3 from "./customUI/Cards/Card3";
+export const CompUI = {
+  ...basicUI,
+  ...customUI,
+};

src/modules/editor/components/Viewport/Content/index.tsx

@@ -6,12 +6,13 @@ import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import Canvas from "../../Canvas";
+import { CompUI } from "../../CompUI";
 import ErrorComp from "../../CompUI/placeHoder";
 
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { store, actions, config } = editor;
+    const { store, actions } = editor;
 
     const hotKeyCtrl = new HotKeyCtrl(editor);
     hotKeyCtrl.init();
@@ -40,7 +41,7 @@ export default defineUI({
       <div class={contentStyle}>
         <div class="relative z-10">
           {compsGroup.value.posArr.map((d) => {
-            const Comp: any = config.compUI[d.compKey]?.Component;
+            const Comp: any = CompUI[d.compKey]?.Component;
             return Comp ? <Comp key={d.id} compId={d.id} /> : undefined;
           })}
         </div>
@@ -60,7 +61,7 @@ export default defineUI({
           >
             {compsGroup.value.normalArr.map((d) => {
               const Comp: any =
-                config.compUI[d.compKey]?.Component || ErrorComp;
+              CompUI[d.compKey]?.Component || ErrorComp;
               return (
                 <Draggable key={d.id}>
                   <Comp compId={d.id} />

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

@@ -3,8 +3,9 @@ import { ICompKeys } from "@/modules/editor/typings";
 import { Radio } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
-import * as basicUI from "../../CompUI/basicUI";
 import { css } from "@linaria/core";
+import * as basicUI from "../../CompUI/basicUI";
+import * as customUI from "../../CompUI/customUI";
 
 export default defineUI({
   setup() {
@@ -38,7 +39,7 @@ export default defineUI({
                     }
                   >
                     <img
-                      class="w-full rounded pointer-events-none"
+                      class="w-full rounded-2px pointer-events-none"
                       src={uiOpt.options.thumbnail}
                       alt="封面图"
                     />
@@ -54,10 +55,10 @@ export default defineUI({
             behaviour="copy"
             group-name="canvas"
             get-child-payload={(index: number) => {
-              return Object.keys(editor.config.compUI)[index];
+              return Object.keys(customUI)[index];
             }}
           >
-            {Object.entries(editor.config.compUI).map(([compKey, uiOpt]) => {
+            {Object.entries(customUI).map(([compKey, uiOpt]) => {
               return (
                 <Draggable>
                   <div

src/modules/editor/components/Viewport/Slider/SliderRight.tsx

@@ -1,12 +1,12 @@
 import { useEditor } from "@/modules/editor";
 import { defineUI } from "queenjs";
 import { h } from "vue";
+import { CompUI } from "../../CompUI";
 import { createAttrsForm } from "../../CompUI/defines/createAttrsForm";
 
 export default defineUI({
   setup() {
-    const editor = useEditor();
-    const { compUI } = editor.config;
+    const editor = useEditor()
 
     return () => {
       const { currComp } = editor.store;
@@ -17,7 +17,7 @@ export default defineUI({
           <div class="flex-1 p-16px scrollbar">
             {h(
               currComp?.compKey
-                ? compUI[currComp.compKey].Form
+                ? CompUI[currComp.compKey].Form
                 : (createAttrsForm([]) as any),
               { component: currComp }
             )}

src/modules/editor/config/index.ts

@@ -1,9 +1,7 @@
 import { Dict_Apis } from "@/dict";
-import * as compUI from "../components/CompUI";
 
 export default {
   httpConfig: {
     baseURL: Dict_Apis.promotion,
   },
-  compUI,
 };

src/modules/editor/stores/index.ts

@@ -1,5 +1,5 @@
-import { nanoid } from "nanoid";
 import { EditorModule } from "..";
+import { CompUI } from "../components/CompUI";
 import { DesignTemp } from "../defines/DesignTemp";
 import { DesignComp } from "../defines/DesignTemp/DesignComp";
 import { ICompKeys } from "../typings";
@@ -42,7 +42,7 @@ export const store = EditorModule.store({
     },
     insertDesignContent(compKey: ICompKeys, index?: number) {
       index === undefined && (index = this.store.designData.content.length);
-      const options = this.config.compUI[compKey].options;
+      const options = CompUI[compKey].options;
       const comp = new DesignComp({
         compKey,
         value: options?.value,
@@ -55,7 +55,7 @@ export const store = EditorModule.store({
       return comp;
     },
     insertCompContainer(compKey: ICompKeys, container: DesignComp) {
-      const options = this.config.compUI[compKey].options;
+      const options = CompUI[compKey].options;
       const comp = new DesignComp({
         compKey,
         value: options?.value,
@@ -74,18 +74,18 @@ export const store = EditorModule.store({
     deleteComp(compId: string) {
       const parentComp = this.helper.findParentComp(compId);
       if (parentComp) {
-        console.log("find parent comp=>", parentComp)
+        console.log("find parent comp=>", parentComp);
         compId = parentComp?.id;
         // delete parentComp.children[compId];
       }
-      
+
       //  else {
-        const index = this.store.designData.content.findIndex(
-          (d) => d.id === compId
-        );
-        if (index !== -1) {
-          this.store.designData.content.splice(index, 1);
-        }
+      const index = this.store.designData.content.findIndex(
+        (d) => d.id === compId
+      );
+      if (index !== -1) {
+        this.store.designData.content.splice(index, 1);
+      }
       // }
     },
     moveComp(selIndex: number, targetIndex: number) {

src/modules/editor/typings.ts

@@ -1,4 +1,4 @@
-import * as CompUI from "./components/CompUI";
+import { CompUI } from "./components/CompUI";
 
 export type ICompKeys = keyof typeof CompUI;