update

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

@@ -1,7 +1,6 @@
 import { defineUI } from "queenjs";
 import components from "..";
 import { useEditor } from "../..";
-import { View } from "../CompUI/basicUI/View";
 
 export default defineUI({
   setup() {
@@ -14,14 +13,13 @@ export default defineUI({
           {content.map((d) => {
             const Comp: any = components.CompUI[d.compKey];
             return (
-              <View
+              <Comp
                 key={d.id}
-                data-id={d.id}
+                compId={d.id}
+                v-model={[d.value, "value"]}
                 background={d.background}
                 layout={d.layout}
-              >
-                <Comp v-model={[d.value, "value"]} />
-              </View>
+              />
             );
           })}
         </div>

src/modules/editor/components/CompUI/basicUI/Image/index.tsx

@@ -1,11 +1,10 @@
 import { css } from "@linaria/core";
 import { queenApi } from "queenjs";
-import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../../..";
-import { View } from "../View";
+import { createUIComp } from "../../defines/createUIComp";
 
-export const Image = defineComponent({
+export const Image = createUIComp({
   props: {
     value: string().def(""),
   },
@@ -17,14 +16,11 @@ export const Image = defineComponent({
       emit("update:value", URL.createObjectURL(files[0]));
     }
     return () => (
-      <View>
-        <img
-          class="w-1/1 h-1/1"
-          src={props.value}
-          onClick={store.isEditMode ? changeVal : undefined}
-        />
-        {store.isEditMode && <div class={btnStyle}>替换</div>}
-      </View>
+      <img
+        class="w-1/1 h-1/1"
+        src={props.value}
+        onClick={store.isEditMode ? changeVal : undefined}
+      />
     );
   },
 });

src/modules/editor/components/CompUI/basicUI/Text/index.tsx

@@ -6,12 +6,12 @@ import { Essentials } from "@ckeditor/ckeditor5-essentials";
 import { FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
-import { defineComponent, reactive } from "vue";
-import { string } from "vue-types";
-import { View } from "../View";
 import { css } from "@linaria/core";
+import { reactive } from "vue";
+import { string } from "vue-types";
+import { createUIComp } from "../../defines/createUIComp";
 
-export const Text = defineComponent({
+export const Text = createUIComp({
   props: {
     value: string().def(""),
   },
@@ -54,7 +54,7 @@ export const Text = defineComponent({
     });
 
     return () => (
-      <View class={[state.focus && "drag-disable"]}>
+      <div class={["w-1/1 h-1/1", state.focus && "drag-disable"]}>
         <ckeditor
           class={textStyle}
           editor={InlineEditor}
@@ -71,7 +71,7 @@ export const Text = defineComponent({
           }}
           config={config}
         />
-      </View>
+      </div>
     );
   },
 });

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -1,25 +1,18 @@
 import { css } from "@linaria/core";
 import { omit } from "lodash";
-import { defineComponent, onMounted, reactive, ref } from "vue";
-import { any } from "vue-types";
+import { defineComponent } from "vue";
+import { any, string } from "vue-types";
 import { useEditor } from "../../..";
 import { Background, Layout } from "../../../typings";
 
 export const View = defineComponent({
   props: {
+    compId: string(),
     background: any<Background>(),
     layout: any<Layout>(),
   },
   setup(props, { slots }) {
     const { store, actions, helper } = useEditor();
-    const viewRef = ref<HTMLElement>();
-    const state = reactive({
-      compId: "",
-    });
-    onMounted(() => {
-      const compEl = viewRef.value;
-      state.compId = compEl?.getAttribute("data-id") || "";
-    });
 
     function createStyle(): any {
       const style: any = {};
@@ -58,34 +51,32 @@ export const View = defineComponent({
     }
 
     return () => {
-      const isComp = state.compId;
-      const isSelected = store.isEditMode && store.currCompId === state.compId;
+      const isComp = !!props.compId;
+      const isSelected = isComp && store.currCompId === props.compId;
 
       const bgOpts = Object.values(omit(props.background, ["image", "color"]));
       const bgClasses = bgOpts.length ? `bg-${bgOpts.join(" bg-")}` : "";
 
-      return (
+      return isComp ? (
         <div
-          ref={viewRef}
           class={[
-            store.isEditMode && isComp ? viewStyle : "view_inside",
+            store.isEditMode && viewStyle,
             store.isEditMode && isSelected && "view_selected",
             bgClasses,
           ]}
           style={createStyle()}
           onClick={
-            state.compId
-              ? () => {
-                  if (state.compId !== store.currCompId)
-                    actions.pickCurrComp(state.compId);
-                }
+            isComp && !isSelected
+              ? () => actions.pickCurrComp(props.compId as string)
               : undefined
           }
         >
-          <div class={viewContainerStyle} style={createContentStyle()}>
+          <div class="view_content" style={createContentStyle()}>
             {slots.default?.()}
           </div>
         </div>
+      ) : (
+        <div class="view_inside">{slots.default?.()}</div>
       );
     };
   },
@@ -93,24 +84,34 @@ export const View = defineComponent({
 
 const viewStyle = css`
   position: relative;
-  &:hover {
-    outline: 1px dashed @inf-primary-color;
-  }
 
   > * {
     pointer-events: none;
   }
 
-  &.view_selected {
-    outline: 1px solid @inf-primary-color;
+  .view_content {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+      outline: 1px dashed @inf-primary-color;
+    }
+  }
 
+  &.view_selected {
     > * {
       pointer-events: auto;
     }
+
     &::after {
       display: none;
     }
 
+    .view_content {
+      outline: 1px solid @inf-primary-color;
+    }
+
     .view_inside:hover {
       outline: 1px dashed @inf-primary-color;
       outline-offset: -1px;
@@ -121,9 +122,3 @@ const viewStyle = css`
     position: relative;
   }
 `;
-
-const viewContainerStyle = css`
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-`;

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

@@ -1,10 +1,9 @@
-import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { Image } from "../../basicUI/Image";
 import { Text } from "../../basicUI/Text";
-import { View } from "../../basicUI/View";
+import { createUIComp } from "../../defines/createUIComp";
 
-export const Card = defineComponent({
+export const Card = createUIComp({
   props: {
     value: any<{
       title1: string;
@@ -16,10 +15,10 @@ export const Card = defineComponent({
   },
   setup(props) {
     return () => (
-      <View>
+      <>
         <Image v-model={[props.value.title1, "value"]} />
         <Text v-model={[props.value.title2, "value"]} />
-      </View>
+      </>
     );
   },
 });

src/modules/editor/components/CompUI/customUI/CardDemo/index.tsx

@@ -1,11 +1,12 @@
 import { Dict_Imgs } from "@/dict";
 import { css } from "@linaria/core";
-import { defineComponent, reactive, watch } from "vue";
+import { reactive, watch } from "vue";
 import { any } from "vue-types";
 import { Image, Text } from "../..";
+import { createUIComp } from "../../defines/createUIComp";
 import { options } from "./options";
 
-export const CardDemo = defineComponent({
+export const CardDemo = createUIComp({
   props: {
     value: any<typeof options.value>().isRequired,
   },

src/modules/editor/components/CompUI/customUI/Cover/index.tsx

@@ -1,9 +1,9 @@
-import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { Text } from "../../basicUI/Text";
+import { createUIComp } from "../../defines/createUIComp";
 import { options } from "./options";
 
-export const Cover = defineComponent({
+export const Cover = createUIComp({
   props: {
     value: any<typeof options.value>().isRequired,
   },

src/modules/editor/components/CompUI/defines/createUIComp.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from "vue";
+import { any, string } from "vue-types";
+import { View } from "../basicUI/View";
+
+export const createUIComp: typeof defineComponent = function (options: any) {
+  const { setup } = options;
+  options.props.layout = any();
+  options.props.background = any();
+  options.props.compId = string();
+
+  options.setup = function (props: any, options: any) {
+    const render = setup(props, options);
+    return () => (
+      <View
+        compId={props.compId}
+        layout={props.layout}
+        background={props.background}
+      >
+        {render()}
+      </View>
+    );
+  };
+
+  return defineComponent(options);
+} as any;

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

@@ -5,7 +5,6 @@ import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import Canvas from "../../Canvas";
-import { View } from "../../CompUI/basicUI/View";
 
 export default defineUI({
   setup() {
@@ -32,14 +31,12 @@ export default defineUI({
               console.log(d);
               return (
                 <Draggable key={d.id}>
-                  <View
-                    data-id={d.id}
-                    class="draggable-item"
+                  <Comp
+                    compId={d.id}
+                    v-model={[d.value, "value"]}
                     background={d.background}
                     layout={d.layout}
-                  >
-                    <Comp v-model={[d.value, "value"]} />
-                  </View>
+                  />
                 </Draggable>
               );
             })}