update

src/hooks/initAuthDef.ts

@@ -0,0 +1,21 @@
+import { Dict_Apis } from "@/dict";
+import { initAuth } from "@queenjs-modules/auth";
+
+export function initAuthDef() {
+  const auth = initAuth({
+    config: {
+      httpConfig: {
+        baseURL: Dict_Apis.auth,
+      },
+      key: "queentreesku3d",
+      loginPath: "/login",
+      loginJumpPath: "/",
+      logoutJumpPath: "/login",
+
+      needCompanyLogin: false,
+      needRegister: true,
+      needResetPwd: true,
+    },
+  });
+  auth.actions.initUser();
+}

src/modules/design/actions/init.ts

@@ -0,0 +1,8 @@
+import { DesignModule } from "..";
+import { DesignTemp } from "../objects/DesignTemp";
+
+export const initActions = DesignModule.action({
+  initTemp(tempData: DesignTemp["data"]) {
+    this.store.designTemp.initData(tempData);
+  },
+});

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

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

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

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

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

@@ -1,7 +1,20 @@
 import { defineUI } from "queenjs";
+import { useDesign } from "../..";
 
 export default defineUI({
   setup() {
-    return () => <div>home</div>;
+    const { components, store } = useDesign();
+    return () => (
+      <div>
+        {store.designTemp.data.content.map((d) => {
+          const Comp = components.UI[d.compKey];
+          if (Comp) {
+            return <Comp key={d.id} {...d.props} />;
+          }
+          return null;
+        })}
+        <div>123</div>
+      </div>
+    );
   },
 });

src/modules/design/components/index.ts

@@ -1,3 +1,4 @@
+import UI from "./UI";
 import Viewport from "./Viewport";
 
-export default { Viewport };
+export default { Viewport, UI };

src/modules/design/index.ts

@@ -1,8 +1,12 @@
 import { ModuleRoot } from "queenjs";
+import { initActions } from "./actions/init";
 import components from "./components";
+import { store } from "./store";
 
 export class DesignModule extends ModuleRoot {
+  store = this.createStore(store);
   components = this.useComponents(components);
+  actions = this.createActions([initActions]);
 }
 
 export const { useDesign, initDesign } = DesignModule.hook("Design");

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

@@ -0,0 +1,14 @@
+import { nanoid } from "nanoid";
+import components from "../../components";
+
+export class DesignComp {
+  id = nanoid();
+  compKey: keyof typeof components.UI;
+  props: any = {};
+  constructor(
+    data: Partial<Omit<DesignComp, "id">> & Pick<DesignComp, "compKey">
+  ) {
+    this.compKey = data.compKey;
+    Object.assign(this, data);
+  }
+}

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

@@ -0,0 +1,12 @@
+import { DesignComp } from "./DesignComp";
+
+export class DesignTemp {
+  data = {
+    title: "",
+    content: [] as DesignComp[],
+  };
+
+  initData(data: DesignTemp["data"]) {
+    this.data = data;
+  }
+}

src/modules/design/store.ts

@@ -0,0 +1,8 @@
+import { DesignModule } from ".";
+import { DesignTemp } from "./objects/DesignTemp";
+
+export const store = DesignModule.store({
+  state: () => ({
+    designTemp: new DesignTemp(),
+  }),
+});

src/pages/editor/EditPage/index.tsx

@@ -0,0 +1,21 @@
+import { initDesign } from "@/modules/design";
+import { defineComponent } from "vue";
+
+export default defineComponent(() => {
+  const design = initDesign();
+
+  design.actions.initTemp({
+    title: "123",
+    content: [
+      {
+        id: "12310",
+        compKey: "Text",
+        props: {
+          value: "xxdx",
+        },
+      },
+    ],
+  });
+
+  return () => <design.components.Viewport />;
+});

src/pages/editor/index.ts

@@ -0,0 +1,5 @@
+import { startApp } from "@/App";
+import { initAuthDef } from "@/hooks/initAuthDef";
+import router from "./router";
+
+startApp(router, [initAuthDef]);

src/pages/editor/router.ts

@@ -0,0 +1,34 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "editPage",
+    meta: {
+      needAuth: true,
+    },
+    component: () => import("./EditPage"),
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: () => import("@queenjs-modules/auth/components/Login"),
+  },
+  {
+    path: "/forget",
+    name: "forget",
+    component: () => import("@queenjs-modules/auth/components/Forget"),
+  },
+  {
+    path: "/register",
+    name: "register",
+    component: () => import("@queenjs-modules/auth/components/Register"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

src/pages/website/Home/index.tsx

@@ -1,7 +1,5 @@
-import { initDesign } from "@/modules/design";
 import { defineComponent } from "vue";
 
 export default defineComponent(() => {
-  const design = initDesign();
-  return () => <design.components.Viewport />;
+  return () => <div>home</div>;
 });

src/pages/website/index.ts

@@ -1,25 +1,5 @@
 import { startApp } from "@/App";
-import { Dict_Apis } from "@/dict";
-import { initAuth } from "@queenjs-modules/auth";
+import { initAuthDef } from "@/hooks/initAuthDef";
 import router from "./router";
 
-function initLocalAuth() {
-  const auth = initAuth({
-    config: {
-      httpConfig: {
-        baseURL: Dict_Apis.auth,
-      },
-      key: "queentreesku3d",
-      loginPath: "/login",
-      loginJumpPath: "/",
-      logoutJumpPath: "/login",
-
-      needCompanyLogin: false,
-      needRegister: true,
-      needResetPwd: true,
-    },
-  });
-  auth.actions.initUser();
-}
-
-startApp(router, [initLocalAuth]);
+startApp(router, [initAuthDef]);

vue.config.js

@@ -12,6 +12,7 @@ const publicPath = "./";
 module.exports = defineConfig({
   pages: {
     index: "src/pages/website/index.ts",
+    editor: "src/pages/editor/index.ts",
   },
   publicPath: publicPath,
   transpileDependencies: true,