update

src/modules/design/components/UI/Image.tsx

@@ -0,0 +1,11 @@
+import { defineUI } from "queenjs";
+import { string } from "vue-types";
+
+export default defineUI({
+  props: {
+    value: string(),
+  },
+  setup(props) {
+    return () => <img src={props.value} />;
+  },
+});

src/modules/design/components/UI/Text.tsx

@@ -1,3 +1,4 @@
+import { useEditor } from "@/modules/editor";
 import { defineUI } from "queenjs";
 import { string } from "vue-types";
 
@@ -6,6 +7,9 @@ export default defineUI({
     value: string(),
   },
   setup(props) {
-    return () => <div>{props.value}</div>;
+    const { store } = useEditor();
+    return () => (
+      <div contenteditable={store.editMode === "edit"}>{props.value}</div>
+    );
   },
 });

src/modules/design/components/UI/index.ts

@@ -1,5 +1,7 @@
 import Text from "./Text";
+import Image from "./Image";
 
 export default {
   Text,
+  Image,
 };

src/modules/design/components/Viewport/index.tsx

@@ -5,7 +5,7 @@ export default defineUI({
   setup() {
     const { components, store } = useDesign();
     return () => (
-      <div>
+      <div style={store.designTemp.data.pageStyle}>
         {store.designTemp.data.content.map((d) => {
           const Comp = components.UI[d.compKey];
           if (Comp) {
@@ -13,7 +13,6 @@ export default defineUI({
           }
           return null;
         })}
-        <div>123</div>
       </div>
     );
   },

src/modules/design/objects/DesignTemp/index.ts

@@ -3,6 +3,7 @@ import { DesignComp } from "./DesignComp";
 export class DesignTemp {
   data = {
     title: "",
+    pageStyle: {} as any,
     content: [] as DesignComp[],
   };
 

src/modules/editor/actions.ts

@@ -0,0 +1,7 @@
+import { EditorModule } from ".";
+
+export const actions = EditorModule.action({
+  switchEditMode(v: string) {
+    this.store.setEditMode(v);
+  },
+});

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

@@ -0,0 +1,21 @@
+import { css } from "@linaria/core";
+import { defineComponent } from "vue";
+import { useEditor } from "../..";
+
+export default defineComponent({
+  setup(props, { slots }) {
+    const { store } = useEditor();
+    return () => (
+      <div
+        class={[store.editMode === "edit" && editStyle]}
+        onClick={(e) => console.log(e)}
+      >
+        {slots.default?.()}
+      </div>
+    );
+  },
+});
+
+const editStyle = css`
+  outline: 1px dashed @inf-primary-color;
+`;

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

@@ -0,0 +1,13 @@
+import { useEditor } from "@/modules/editor";
+import { defineUI } from "queenjs";
+
+export default defineUI({
+  setup() {
+    const { design } = useEditor().modules;
+    return () => (
+      <div class="h-1/1 text-center overflow-y-auto scrollbar">
+        <design.components.Viewport class="inline-block w-375px min-h-750px" />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,20 @@
+import { useEditor } from "@/modules/editor";
+import { Radio } from "ant-design-vue";
+import { defineUI } from "queenjs";
+
+export default defineUI({
+  setup() {
+    const { store, actions } = useEditor();
+    return () => (
+      <div class="text-center">
+        <Radio.Group
+          value={store.editMode}
+          onChange={(e) => actions.switchEditMode(e.target.value)}
+        >
+          <Radio.Button value="edit">编辑</Radio.Button>
+          <Radio.Button value="preview">预览</Radio.Button>
+        </Radio.Group>
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,7 @@
+import { defineUI } from "queenjs";
+
+export default defineUI({
+  setup() {
+    return () => <div>slider</div>;
+  },
+});

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

@@ -0,0 +1,38 @@
+import { mapValues } from "lodash";
+import { defineUI } from "queenjs";
+import { useEditor } from "../..";
+import Canvas from "./Canvas";
+import Header from "./Header";
+import Slider from "./Slider";
+
+export default defineUI({
+  slots: {
+    Header,
+    SliderLeft: Slider,
+    SliderRight: Slider,
+    Canvas,
+  },
+  setup(props, { slots }) {
+    const { modules, components } = useEditor();
+    const { design } = modules;
+
+    design.components.UI = mapValues(design.components.UI, (Comp) => {
+      return (props: any) => (
+        <components.EditItem>
+          <Comp {...props} />
+        </components.EditItem>
+      );
+    }) as any;
+
+    return () => (
+      <div class="flex flex-col h-1/1">
+        <slots.Header class="p-16px border-bottom bg-component" />
+        <div class="flex flex-1 h-0">
+          <slots.SliderLeft class="w-300px bg-component border-right" />
+          <slots.Canvas class="flex-1 p-30px" />
+          <slots.SliderRight class="w-300px bg-component border-left" />
+        </div>
+      </div>
+    );
+  },
+});

src/modules/editor/components/index.ts

@@ -0,0 +1,7 @@
+import EditItem from "./EditItem";
+import Viewport from "./Viewport";
+
+export default {
+  Viewport,
+  EditItem
+};

src/modules/editor/index.ts

@@ -0,0 +1,17 @@
+import { ModuleRoot } from "queenjs";
+import { initDesign } from "../design";
+import components from "./components";
+import { store } from "./store";
+import { actions } from "./actions";
+
+export class EditorModule extends ModuleRoot {
+  actions = this.createActions(actions)
+  store = this.createStore(store);
+
+  components = this.useComponents(components);
+  modules = this.useModules({
+    design: initDesign,
+  });
+}
+
+export const { useEditor, initEditor } = EditorModule.hook("Editor");

src/modules/editor/store.ts

@@ -0,0 +1,12 @@
+import { EditorModule } from ".";
+
+export const store = EditorModule.store({
+  state: () => ({
+    editMode: "edit",
+  }),
+  actions: {
+    setEditMode(v: string) {
+      this.store.editMode = v;
+    },
+  },
+});

src/pages/editor/EditPage/index.tsx

@@ -1,21 +1,23 @@
-import { initDesign } from "@/modules/design";
+import { initEditor } from "@/modules/editor";
 import { defineComponent } from "vue";
 
 export default defineComponent(() => {
-  const design = initDesign();
-
-  design.actions.initTemp({
+  const editor = initEditor();
+  editor.modules.design.actions.initTemp({
     title: "123",
-    content: [
-      {
-        id: "12310",
-        compKey: "Text",
-        props: {
-          value: "xxdx",
-        },
+    pageStyle: {
+      backgroundColor: "#fff",
+    },
+    content: Array.from({ length: 5 }, (d, i) => ({
+      id: Math.random().toString(),
+      compKey: i % 2 === 0 ? "Text" : "Image",
+      props: {
+        value: "xxdx",
       },
-    ],
+    })),
   });
 
-  return () => <design.components.Viewport />;
+  console.log(editor.modules.design.store.designTemp.data.content);
+
+  return () => <editor.components.Viewport class="!h-100vh" />;
 });

src/styles/global.less

@@ -23,6 +23,12 @@ body {
 .primary-color {
   color: @inf-primary-color;
 }
+.bg-layout {
+  background-color: @inf-layout-bg;
+}
+.bg-component {
+  background-color: @inf-component-bg;
+}
 
 @direction: top, bottom, left, right;
 each(@direction, {