update

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

@@ -0,0 +1,63 @@
+import { useEditor } from "@/modules/editor";
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { View } from "../View";
+
+export const Component = defineComponent({
+  props: {
+    compId: string()
+  },
+  emits: ["update:compId"],
+  setup(props, { emit }) {
+    const compConf =  useCompData(props.compId || "") ;
+    
+    const { store, controls } = useEditor();
+    async function changeVal() {
+      const url = await controls.pickCtrl.pickOneImage();
+      if (!url) return;
+
+      compConf.value.url = url;
+      compConf.value.x = 0;
+      compConf.value.y = 0;
+      compConf.value.s = 1;
+    }
+
+    //hello
+    console.log("compConf", compConf)
+
+    if (!props.compId) {
+        emit("update:compId", compConf.id)
+    } 
+
+
+    return () => {
+      const value = compConf.value;
+      const scale = value?.s || 1;
+      const ox = value?.x || 0;
+      const oy = value?.y || 0;
+      const objectFit =
+        scale + "" == "1" && ox + "" == "0" && oy + "" == "0"
+          ? "cover"
+          : "contain";
+
+      console.log("Scalexxxxxxxxxxxxxxxxxx=>", compConf);
+
+      return (
+        <View
+          compId={compConf.id}
+          onDblclick={store.isEditMode ? changeVal : undefined}
+        >
+          <img
+            class={"w-1/1 h-1/1 object-cover pointer-events-none"}
+            style={{
+              transform: `scale(${scale}) translate(${ox}%,${oy}%)`,
+              objectFit,
+            }}
+            src={value?.url}
+          />
+        </View>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,34 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions2 } from "../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions2({
+  name: "图片",
+  compKey: "Image2",
+  thumbnail: Dict_Imgs.Default,
+  value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "图片",
+    dataIndex: "value.url",
+    component: "Input",
+  },
+  {
+    label: "x偏移",
+    dataIndex: "value.x",
+    component: "Input",
+  },
+  {
+    label: "y偏移",
+    dataIndex: "value.y",
+    component: "Input",
+  },{
+    label: "缩放",
+    dataIndex: "value.s",
+    component: "Input",
+  },
+]);

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

@@ -9,7 +9,7 @@ export const { options, useCompData } = createOptions({
   name: "卡片",
   thumbnail: Dict_Imgs.Default,
   value: {
-    img: Dict_Imgs.Default,
+    img: {url: Dict_Imgs.Default},
     imgSize: [240, 240],
     desc: "描述",
   },

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

@@ -1,4 +1,4 @@
-export * as Card from "./Cards/Card";
+// export * as Card from "./Cards/Card";
 export * as CardList from "./Cards/CardList";
 export * as Card2 from "./Cards/Card2";
 export * as Card3 from "./Cards/Card3";

src/modules/editor/components/CompUI/defines/createOptions.ts

@@ -1,9 +1,11 @@
 import { useEditor } from "@/modules/editor";
 import { Background, Layout } from "../../../typings";
 import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { reactive } from "vue";
 
 type IOptions<T, C> = {
   name: string;
+  compKey?: string;
   thumbnail: string;
   value: T;
   layout?: Layout;
@@ -21,3 +23,20 @@ export function createOptions<T, C>(options: IOptions<T, C>) {
   }
   return { options, useCompData };
 }
+
+export function createOptions2<T, C>(defaults: IOptions<T, C>) {
+  function useCompData(compId: string): {
+    id:  string,
+    value: T;
+    children: Record<keyof C, DesignComp>;
+  } {
+    const editor = useEditor();
+    let data = editor.store.designCompMap.get(compId);
+    if (!data || !compId ) {//为空,则创建一个
+        data = reactive(new DesignComp(defaults as any));
+        editor.store.setCompData(data.id, data);
+    }
+    return data as any;
+  }
+  return { options: defaults, useCompData };
+}

src/modules/editor/stores/index.ts

@@ -20,6 +20,10 @@ export const store = EditorModule.store({
     },
   },
   actions: {
+    setCompData(id: string, data:any) {
+      this.store.designCompMap.set(id, data)
+    },
+
     setMode(v: string) {
       this.store.mode = v;
     },