init Controllers

src/assets/icons/components/IconInternal.tsx

@@ -0,0 +1,14 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconInternal = createIcon(<svg viewBox="0 0 48 48" fill="none">
+    <path d="M6 18V9C6 7.34315 7.34315 6 9 6H39C40.6569 6 42 7.34315 42 9V18" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M32 24V31" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path d="M24 15V31" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path d="M16 19V31" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path d="M6 30V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V30" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>)

src/assets/icons/index.ts

@@ -31,6 +31,7 @@ export * from "./components/IconFloatOn";
 export * from "./components/IconGroup";
 export * from "./components/IconHeight";
 export * from "./components/IconImage";
+export * from "./components/IconInternal";
 export * from "./components/IconLayerDown";
 export * from "./components/IconLayers";
 export * from "./components/IconLayerUp";

src/assets/icons/svg/internal.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 48 48" fill="none">
+    <path d="M6 18V9C6 7.34315 7.34315 6 9 6H39C40.6569 6 42 7.34315 42 9V18" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M32 24V31" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path d="M24 15V31" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path d="M16 19V31" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path d="M6 30V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V30" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

src/assets/icons/svg/内部数据__internal-data (1).svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 18V9C6 7.34315 7.34315 6 9 6H39C40.6569 6 42 7.34315 42 9V18" stroke="#41969c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 24V31" stroke="#41969c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 15V31" stroke="#41969c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 19V31" stroke="#41969c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 30V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V30" stroke="#41969c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/comm/controllers/ProjectCtrl/index.ts

@@ -3,14 +3,18 @@ import { useCtx } from "../../ctx";
 import { Controller } from "../../core/controller";
 import { PackSource } from "../../objects/packSource";
 import { EditorCtrl } from "./editor";
-import { PackScene, PackGeom, PackProduct , PackSceneProduct} from "@/comm/objects/pack";
-
-
+import {
+  PackScene,
+  PackGeom,
+  PackProduct,
+  PackSceneProduct,
+} from "@/comm/objects/pack";
+import { compMap } from "./tempComp";
 
 async function createDefaultSpu3dConf() {
   const currTime = new Date().toISOString();
   const source = new PackSource();
-  source.state.scenes = [new PackScene() ];
+  source.state.scenes = [new PackScene()];
 
   // 初始化模型资产
 
@@ -18,7 +22,7 @@ async function createDefaultSpu3dConf() {
   geom.file = { url: "assets/box.fbx", size: 0 };
 
   const product = new PackProduct();
-  product.geomId =  geom.id;
+  product.geomId = geom.id;
 
   const sceneProd = new PackSceneProduct();
   sceneProd.state.prodId = product.id;
@@ -39,16 +43,15 @@ async function createDefaultSpu3dConf() {
   return defaultData;
 }
 
-
 export class ProjectController extends Controller {
   RootDir = "";
   DataDir = "";
   HostURL = "";
   _swiftLocal = true;
-  _editor?:EditorCtrl
-  _spu3dFile:any;
+  _editor?: EditorCtrl;
+  _spu3dFile: any;
 
-  get editor () {
+  get editor() {
     return this._editor as EditorCtrl;
   }
 
@@ -58,7 +61,7 @@ export class ProjectController extends Controller {
     this.RootDir = projectPath;
     const deviceCtrl = useCtx().deviceCtrl;
 
-    deviceCtrl.GetAppDataDir().then((dir:any) => {
+    deviceCtrl.GetAppDataDir().then((dir: any) => {
       this.DataDir = dir;
     });
 
@@ -68,11 +71,10 @@ export class ProjectController extends Controller {
     }
     deviceCtrl.SetMainTitle("项目:" + projectPath);
     this.HostURL = await deviceCtrl.StartHttpServer(this.RootDir);
-    
+
     console.log("host url=>", this.HostURL);
 
     await this.loadProject();
-
   }
   async save() {
     const detail = this._spu3dFile;
@@ -91,7 +93,9 @@ export class ProjectController extends Controller {
   async loadProject() {
     const deviceCtrl = useCtx().deviceCtrl;
     try {
-      const { text } = await deviceCtrl.ReadFileText(`${this.RootDir}/project.spu3d`);
+      const { text } = await deviceCtrl.ReadFileText(
+        `${this.RootDir}/project.spu3d`
+      );
       const project = JSON.parse(text);
       this._spu3dFile = project;
       const pack = new PackSource();
@@ -102,8 +106,28 @@ export class ProjectController extends Controller {
       alert("项目加载失败" + error);
     }
   }
+  async loadQueen5() {
+    const deviceCtrl = useCtx().deviceCtrl;
+    try {
+      const { text } = await deviceCtrl.ReadFileText(
+        `${this.RootDir}/project.queen5`
+      );
+      let data = {} as any;
+      if (!text) {
+        data = { categories: ["64e4281a12c676099617ffc6"], title: "pc" };
+      } else {
+        data = JSON.parse(text);
+      }
+
+      return data;
+    } catch (error) {
+      alert("项目加载失败" + error);
+    }
+  }
 
-  async getProjectDetail(dir: string): ReturnType<typeof createDefaultSpu3dConf> {
+  async getProjectDetail(
+    dir: string
+  ): ReturnType<typeof createDefaultSpu3dConf> {
     const deviceCtrl = useCtx().deviceCtrl;
     const ret = await deviceCtrl.ReadFileText(`${dir}/project.spu3d`);
     if (ret.text) {
@@ -124,36 +148,35 @@ export class ProjectController extends Controller {
   getDefaultLogo() {
     return this.DataDir + "/static/thumbnail.png";
   }
-  createPath(fpath:string) {
+  createPath(fpath: string) {
     return this.RootDir + "/" + fpath;
   }
-  
 
-  getSwiftUri(assetPath:string) {
-      if (this._swiftLocal) return this.getLocalAbsoluteUri(assetPath);
-      return this.getHttpAbsoluteUri(assetPath);
+  getSwiftUri(assetPath: string) {
+    if (this._swiftLocal) return this.getLocalAbsoluteUri(assetPath);
+    return this.getHttpAbsoluteUri(assetPath);
   }
 
-  getHttpAbsoluteUri(url:string) {
-    if (url.substring(0,2) == "//" ) return "http://" + url;
+  getHttpAbsoluteUri(url: string) {
+    if (url.substring(0, 2) == "//") return "http://" + url;
     if (url.substring(0, 4) == "http") return url;
-    if (url.charAt(0) == '/') return this.HostURL + url.substring(1);
+    if (url.charAt(0) == "/") return this.HostURL + url.substring(1);
     return this.HostURL + url;
   }
 
-  getLocalAbsoluteUri(url:string) {
-    if (url.substring(0,2) == "//" ) return "http://" + url;
+  getLocalAbsoluteUri(url: string) {
+    if (url.substring(0, 2) == "//") return "http://" + url;
     if (url.substring(0, 4) == "http") return url;
-    if (url.charAt(0) == '/') return this.RootDir + url;
+    if (url.charAt(0) == "/") return this.RootDir + url;
     return this.RootDir + "/" + url;
   }
-  
-  getRelativeUri(url:string) {
+
+  getRelativeUri(url: string) {
     let s = this.HostURL.length;
     let pre = url.substring(0, s);
-    if (pre == this.HostURL) return url.substring(s+1);
+    if (pre == this.HostURL) return url.substring(s + 1);
 
-    s = this.RootDir.length
+    s = this.RootDir.length;
     pre = url.substring(0, s);
     if (pre == this.RootDir) return url.substring(s + 1);
 
@@ -161,7 +184,6 @@ export class ProjectController extends Controller {
   }
 
   async createProject(path: string) {
-
     const deviceCtrl = useCtx().deviceCtrl;
     const filePath = `${path}/project.spu3d`;
     const isFileExit = await deviceCtrl.IsFileExit(filePath);
@@ -204,7 +226,6 @@ export class ProjectController extends Controller {
   }
 
   async saveProjectSource() {
-
     const detail = await this.getProjectDetail(this.RootDir);
     detail.source = this.editor.pack.toJson();
     detail.updateTime = new Date().toISOString();

src/comm/controllers/ProjectCtrl/tempComp.ts

@@ -0,0 +1,87 @@
+export const compMap = {
+  NPTFcJBIRnN2cbYuoFgxt: {
+    children: {
+      default: ["e9JBgmPvFvbCODpPmt5Kf"],
+    },
+    compKey: "Container",
+    id: "NPTFcJBIRnN2cbYuoFgxt",
+    layout: {
+      anim: "",
+      background: {
+        color: "#ffffff",
+      },
+      border: {
+        color: "",
+        radius: 0,
+        radius2: 0,
+        style: "",
+        width: 0,
+      },
+      locked: false,
+      opacity: 1,
+      size: [2732, 57.39578973439113],
+      transformMatrix: "matrix(1,0,0, 1,0,0)",
+      visible: true,
+    },
+    value: {},
+  },
+  e9JBgmPvFvbCODpPmt5Kf: {
+    children: {
+      default: [],
+    },
+    compKey: "Text",
+    id: "e9JBgmPvFvbCODpPmt5Kf",
+    layout: {
+      anim: "",
+      background: {
+        color: "",
+      },
+      border: {
+        color: "",
+        radius: 0,
+        radius2: 0,
+        style: "",
+        width: 0,
+      },
+      locked: false,
+      opacity: 1,
+      size: [750, 54],
+      transformMatrix: "matrix(1,0,0,1,134.7900826446279,1.697894867195564)",
+      visible: true,
+    },
+    value: {
+      text: '\u003cp style="text-align:center;line-height:1.5;"\u003e\u003cspan style="font-size:18px;"\u003e请输入内容\u003c/span\u003e\u003c/p\u003e',
+    },
+  },
+  root: {
+    children: {
+      default: ["NPTFcJBIRnN2cbYuoFgxt"],
+    },
+    compKey: "Page",
+    id: "root",
+    layout: {
+      anim: "",
+      background: {
+        color: "#ffffff",
+      },
+      border: {
+        color: "",
+        radius: 0,
+        radius2: 0,
+        style: "",
+        width: 0,
+      },
+      locked: false,
+      opacity: 1,
+      size: [2732, 1536],
+      transformMatrix: "matrix(1,0,0, 1,0,0)",
+      visible: true,
+    },
+    value: {
+      music: "",
+      pageMode: "long",
+      pageSizeType: "normal",
+      useFor: "pc",
+    },
+  },
+};

src/comm/controllers/entity/message.ts

@@ -164,7 +164,7 @@ function pushTemporaryLength(bb: ByteBuffer): number {
 
 function skipUnknownField(bb: ByteBuffer, type: number): void {
   switch (type) {
-    case 0: while (readByte(bb) & 0x80) { } break;
+    case 0: while (readByte(bb) & 0x80) ; break;
     case 2: skip(bb, readVarint32(bb)); break;
     case 5: skip(bb, 4); break;
     case 1: skip(bb, 8); break;
@@ -584,15 +584,15 @@ function writeVarint64(bb: ByteBuffer, value: Long): void {
   let bytes = bb.bytes;
 
   switch (size) {
-    case 10: bytes[offset + 9] = (part2 >>> 7) & 0x01;
-    case 9: bytes[offset + 8] = size !== 9 ? part2 | 0x80 : part2 & 0x7F;
-    case 8: bytes[offset + 7] = size !== 8 ? (part1 >>> 21) | 0x80 : (part1 >>> 21) & 0x7F;
-    case 7: bytes[offset + 6] = size !== 7 ? (part1 >>> 14) | 0x80 : (part1 >>> 14) & 0x7F;
-    case 6: bytes[offset + 5] = size !== 6 ? (part1 >>> 7) | 0x80 : (part1 >>> 7) & 0x7F;
-    case 5: bytes[offset + 4] = size !== 5 ? part1 | 0x80 : part1 & 0x7F;
-    case 4: bytes[offset + 3] = size !== 4 ? (part0 >>> 21) | 0x80 : (part0 >>> 21) & 0x7F;
-    case 3: bytes[offset + 2] = size !== 3 ? (part0 >>> 14) | 0x80 : (part0 >>> 14) & 0x7F;
-    case 2: bytes[offset + 1] = size !== 2 ? (part0 >>> 7) | 0x80 : (part0 >>> 7) & 0x7F;
+    case 10: bytes[offset + 9] = (part2 >>> 7) & 0x01; break;
+    case 9: bytes[offset + 8] = size !== 9 ? part2 | 0x80 : part2 & 0x7F;break;
+    case 8: bytes[offset + 7] = size !== 8 ? (part1 >>> 21) | 0x80 : (part1 >>> 21) & 0x7F;break;
+    case 7: bytes[offset + 6] = size !== 7 ? (part1 >>> 14) | 0x80 : (part1 >>> 14) & 0x7F;break;
+    case 6: bytes[offset + 5] = size !== 6 ? (part1 >>> 7) | 0x80 : (part1 >>> 7) & 0x7F;break;
+    case 5: bytes[offset + 4] = size !== 5 ? part1 | 0x80 : part1 & 0x7F;break;
+    case 4: bytes[offset + 3] = size !== 4 ? (part0 >>> 21) | 0x80 : (part0 >>> 21) & 0x7F;break;
+    case 3: bytes[offset + 2] = size !== 3 ? (part0 >>> 14) | 0x80 : (part0 >>> 14) & 0x7F;break;
+    case 2: bytes[offset + 1] = size !== 2 ? (part0 >>> 7) | 0x80 : (part0 >>> 7) & 0x7F;break;
     case 1: bytes[offset] = size !== 1 ? part0 | 0x80 : part0 & 0x7F;
   }
 }

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

@@ -0,0 +1,59 @@
+import { useEditor } from "@/modules/editor";
+import { Button, Dropdown } from "ant-design-vue";
+import { defineUI, queenApi } from "queenjs";
+import { TipIcons } from "../../TipIcons";
+import PreviewDesignModal from "./PreviewDesignModal";
+import { ShareBox } from "./ShareBox";
+
+export default defineUI({
+  setup() {
+    const editor = useEditor();
+    const { store, actions, controls } = editor;
+
+    function showPreviewModal() {
+      controls.screenCtrl.saveScreenPage();
+      const rootPage = controls.pageCtrl.rootPage;
+      rootPage.value.pageMode = controls.screenCtrl.state.screen.pageMode;
+      rootPage.value.pageSizeType =
+        controls.screenCtrl.state.screen.pageSizeType;
+
+      queenApi.dialog(
+        <PreviewDesignModal data={controls.pageCtrl.designData} />,
+        {
+          fullscreen: true,
+          closable: false,
+        }
+      );
+    }
+
+    return () => (
+      <aside class="space-x-16px flex items-center">
+        <TipIcons.Preview
+          class="text-20px text-light-50 bg-dark-50 p-6px transform rotate-90 rounded cursor-pointer transition hover:(!bg-dark-100)"
+          onClick={showPreviewModal}
+        />
+        {store.isEditPage && (
+          <Dropdown
+            overlay={<ShareBox />}
+            trigger="click"
+            placement="bottomRight"
+          >
+            <Button
+              type="default"
+              class="text-12px bg-dark-50 hover:(bg-dark-100 border-transparent text-light-50)"
+            >
+              分享
+            </Button>
+          </Dropdown>
+        )}
+        <Button
+          class="text-12px text-dark-500 hover:text-dark-500"
+          type="primary"
+          onClick={() => actions.saveDesign()}
+        >
+          保存
+        </Button>
+      </aside>
+    );
+  },
+});

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

@@ -1,31 +1,12 @@
 import { useEditor } from "@/modules/editor";
-import { Button, Dropdown } from "ant-design-vue";
-import { defineUI, queenApi } from "queenjs";
-import { TipIcons } from "../../TipIcons";
+import { defineUI } from "queenjs";
 import History from "../Toolbar/History";
-import { ShareBox } from "./ShareBox";
-import PreviewDesignModal from "./PreviewDesignModal";
+import SaveOrShare from "./SaveOrShare";
 
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { store, actions, controls, jumpIndexHtml } = editor;
-
-    function showPreviewModal() {
-      controls.screenCtrl.saveScreenPage();
-      const rootPage = controls.pageCtrl.rootPage;
-      rootPage.value.pageMode = controls.screenCtrl.state.screen.pageMode;
-      rootPage.value.pageSizeType =
-        controls.screenCtrl.state.screen.pageSizeType;
-
-      queenApi.dialog(
-        <PreviewDesignModal data={controls.pageCtrl.designData} />,
-        {
-          fullscreen: true,
-          closable: false,
-        }
-      );
-    }
+    const { controls, jumpIndexHtml } = editor;
 
     return () => (
       <div class="relative flex justify-between items-center">
@@ -54,33 +35,7 @@ export default defineUI({
             {controls.pageCtrl.state.title}
           </div>
         </div>
-        <aside class="space-x-16px flex items-center">
-          <TipIcons.Preview
-            class="text-20px text-light-50 bg-dark-50 p-6px transform rotate-90 rounded cursor-pointer transition hover:(!bg-dark-100)"
-            onClick={showPreviewModal}
-          />
-          {store.isEditPage && (
-            <Dropdown
-              overlay={<ShareBox />}
-              trigger="click"
-              placement="bottomRight"
-            >
-              <Button
-                type="default"
-                class="text-12px bg-dark-50 hover:(bg-dark-100 border-transparent text-light-50)"
-              >
-                分享
-              </Button>
-            </Dropdown>
-          )}
-          <Button
-            class="text-12px text-dark-500 hover:text-dark-500"
-            type="primary"
-            onClick={() => actions.saveDesign()}
-          >
-            保存
-          </Button>
-        </aside>
+        <SaveOrShare />
       </div>
     );
   },

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

@@ -0,0 +1,79 @@
+import { defineComponent, onMounted, provide } from "vue";
+import { Container, Draggable } from "vue-dndrop";
+import { string } from "vue-types";
+
+import Empty from "@/components/Empty";
+import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
+import { Loadmore } from "@queenjs/ui";
+import { Button } from "ant-design-vue";
+import { queenApi } from "queenjs";
+import SourceItem from "./Sources/SourceItem";
+
+export default defineComponent({
+  setup(props) {
+    const editor = useEditor();
+    // const resource = useResource();
+    // provide("sourceFrom", props.sourceFrom);
+
+    function getCurrCtrl() {
+      // sysImageListCtrl sysVideoListCtrl custImageListCtrl custVideoListCtrl
+    }
+
+    function clickToDesign(url: string) {
+      editor.actions.addImageToDesign(url);
+    }
+
+    function getData() {
+      //   const ctrl = getCurrCtrl();
+      //   ctrl.hasLimit = true;
+      //   ctrl.loadPage(1);
+    }
+
+    onMounted(() => getData());
+
+    return () => {
+      //   const control = getCurrCtrl();
+      const dataSource = [] as any;
+
+      return (
+        <div>
+          <Container
+            class="grid grid-cols-2 gap-10px"
+            behaviour="copy"
+            group-name="canvas"
+            animation-duration={0}
+            get-child-payload={(index: number) => {
+              return {
+                type: "image",
+                data: dataSource[index],
+              };
+            }}
+          >
+            {dataSource.map((item: any) => (
+              <Draggable key={item._id}>
+                <SourceItem
+                  class="draggable-item cursor-pointer"
+                  record={item}
+                  isVideo={false}
+                  tagable={true}
+                  onClick={() => clickToDesign(item.file.url)}
+                  onMenu={async (name) => {
+                    console.log(name);
+                    if (name == "delete") {
+                      //   await resource.actions.deleteMaterial(item);
+                      //   control.loadPage(1);
+                      //   queenApi.messageSuccess("删除成功!");
+                      //   return;
+                    }
+                  }}
+                />
+              </Draggable>
+            ))}
+          </Container>
+          {dataSource.length == 0 && <Empty class="pt-150px" />}
+        </div>
+      );
+    };
+  },
+});

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

@@ -14,6 +14,7 @@ import {
   IconShape,
   IconText,
   IconTpl,
+  IconInternal,
   IconVideo,
 } from "@/assets/icons";
 import { defineUI } from "queenjs";
@@ -26,6 +27,7 @@ import CustomComps from "./CustomComps";
 import Shapes from "./Shapes";
 import { Sources } from "./Sources/List";
 import Templates from "./Templates";
+import RenderImage from "./RenderImage";
 import Text from "./Text";
 
 const tabs = [
@@ -34,6 +36,11 @@ const tabs = [
     icon: IconTpl,
     component: Templates,
   },
+  {
+    title: "渲染",
+    icon: IconInternal,
+    component: RenderImage,
+  },
   {
     title: "组合",
     icon: IconCombination,

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

@@ -11,7 +11,8 @@ import { InputNumber } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
 import { IconFit } from "@/assets/icons";
-
+import History from "./History";
+import SaveOrShare from "../Header/SaveOrShare";
 export default defineUI({
   setup() {
     const editor = useEditor();
@@ -65,13 +66,13 @@ export default defineUI({
               </div>
             </div>
           )}
-          <div class="absolute right-20px top-40px space-x-10px z-1000">
-            <TipIcons.Screenshot
-              class={bottomBtnStyles}
-              onClick={() => actions.updateThumbnailByScreenshot(true)}
-            />
+          <div class={"p-10px h-55px  flex items-center justify-between"}>
+            <History class="ml-20px" />
+            <SaveOrShare />
           </div>
+
           <div class="absolute bottom-30px right-20px flex items-center justify-center z-1000 space-x-10px">
+            
             <div
               class={cx(group, "flex items-center p-4px rounded bg-[#262626]")}
             >
@@ -118,6 +119,10 @@ export default defineUI({
                 });
               }}
             />
+            <TipIcons.Screenshot
+              class={bottomBtnStyles}
+              onClick={() => actions.updateThumbnailByScreenshot(true)}
+            />
           </div>
         </div>
       );

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

@@ -17,7 +17,7 @@ export default defineUI({
   setup(props, { slots }) {
     return () => (
       <div class="flex flex-col h-1/1">
-        <slots.Header class="px-20px py-10px bg-component border-bottom !border-2px" />
+        {/* <slots.Header class="px-20px py-10px bg-component border-bottom !border-2px" /> */}
         <div class="flex flex-1 h-0">
           <slots.SliderLeft class="bg-component border-right !border-2px" />
           <div class="flex-1 relative flex flex-col overflow-hidden">

src/modules/editor/module/actions/init.ts

@@ -1,3 +1,4 @@
+import { useCtx } from "@/comm/ctx";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { EditorMode } from "../../typings";
@@ -25,18 +26,20 @@ export const initActions = EditorModule.action({
 
   // 初始化数据
   async initDesign(id: string, isSys = false) {
-    const ret = await this.https.getDesignDetail(id, { isSys });
-    if (!ret.result.compMap) {
+    // const ret = await this.https.getDesignDetail(id, { isSys });
+    const ctx = useCtx();
+    const ret =await ctx.prjCtrl.loadQueen5();
+    if (!ret.compMap) {
       const cate: any = this.store.tplCategory || [];
-      const item = cate.find((d: any) => ret.result.categories?.includes(d.id));
+      const item = cate.find((d: any) => ret.categories?.includes(d.id));
       if (item && item.value == "PC") {
-        ret.result.platform = "pc";
+        ret.platform = "pc";
       } else {
-        ret.result.platform = "mobile";
+        ret.platform = "mobile";
       }
     }
     const page = this.controls.pageCtrl;
-    page.setDesignData(ret.result);
+    page.setDesignData(ret);
   },
 
   async initWkDesign(id: string) {
@@ -60,8 +63,11 @@ export const initActions = EditorModule.action({
   onCompLayoutUpdated(comp: DesignComp) {
     //组件自身延迟加载了，影响了布局
     if (this.helper.isCurrComp(comp.id)) {
-      const  obj= this.controls.selectCtrl.gizmo.selected[0];
-      obj.setSize(this.helper.designSizeToPx(comp.getW()), this.helper.designSizeToPx(comp.getH()));
+      const obj = this.controls.selectCtrl.gizmo.selected[0];
+      obj.setSize(
+        this.helper.designSizeToPx(comp.getW()),
+        this.helper.designSizeToPx(comp.getH())
+      );
     }
   },
 });

src/pages/editor/App.tsx

@@ -0,0 +1,40 @@
+import { queenApi } from "queenjs";
+import { Provider } from "queenjs/adapter/vue";
+import { createApp, defineComponent, reactive } from "vue";
+import { Router } from "vue-router";
+import "../../styles";
+import zh_cn from "ant-design-vue/es/locale/zh_CN";
+import { InitControllers } from "@/comm/ctx";
+let setModuleHooks: any[] = [];
+
+const App = defineComponent(() => {
+  const state = reactive({
+    loading: true,
+  });
+  InitControllers().then(() => {
+    state.loading = false;
+  });
+  setModuleHooks.forEach((hook) => hook());
+  setModuleHooks = [];
+  return () => (
+    <>
+      {!state.loading && (
+        <Provider locale={zh_cn}>
+          <router-view></router-view>
+        </Provider>
+      )}
+    </>
+  );
+});
+
+export function startApp(
+  router: Router,
+  hooks: any[] = [],
+  callback?: (app: ReturnType<typeof createApp>) => void
+) {
+  setModuleHooks = hooks;
+  queenApi.router = router;
+  const app = createApp(App);
+  callback?.(app);
+  app.use(router).mount("#app");
+}

src/pages/editor/index.ts

@@ -1,4 +1,4 @@
-import { startApp } from "@/App";
+import { startApp } from "./App";
 import { initAuthDef } from "@/hooks/initAuthDef";
 import { initLauncher } from "@/modules/launcher";
 import { initResource } from "@/modules/resource";