local source

src/comm/controllers/appScreenMsgCtrl.ts

@@ -5,13 +5,10 @@
  *   当前模块，导致nats.ws文件被引用，引发 部分手机 share页面打不开的bug
  */
 
-import { useList } from "@/modules/list";
-import { Controller } from "../core/controller";
-import { useCtx } from "../ctx";
 import { cloneDeep } from "lodash";
-import JSZip from "jszip";
-import FileSaver from "file-saver";
 import { queenApi } from "queenjs";
+import { Controller } from "../core/controller";
+import { useCtx } from "../ctx";
 export class AppScreenMsgController extends Controller {
   screenModule: any;
   constructor() {
@@ -81,7 +78,7 @@ export class AppScreenMsgController extends Controller {
     let name = names[names.length - 1];
 
     const screenDir = deviceCtrl.appDataDir + "/screen";
-    const filepath = screenDir + dir.substring(1) + name;
+    const filepath = screenDir + dir + name;
     deviceCtrl.DownloadFile(url, filepath);
     return {
       file: dir + name,
@@ -102,7 +99,7 @@ export class AppScreenMsgController extends Controller {
     let files: any = [];
     let pack = cloneDeep(asset);
     let source = pack.source;
-    let wk = `./assets/packs/${pack._id}/`;
+    let wk = `/assets/packs/${pack._id}/`;
     let scope = this;
 
     function getFileName(url: string) {
@@ -183,7 +180,7 @@ export class AppScreenMsgController extends Controller {
     const thumb = this.loadfile(wk, thumbnail.url);
     pack.thumbnail.url = thumb?.file;
     //环境球
-    const wkenv3d = "./assets/env3d/";
+    const wkenv3d = "/assets/env3d/";
     source.env3ds.forEach((item: any) => {
       const id = item.userData.assetId || item.id;
 
@@ -226,7 +223,7 @@ export class AppScreenMsgController extends Controller {
         name: pack.name,
         thumbnail: pack.thumbnail.url,
         type: "3D",
-        meshId: `./assets/packs/${pack._id}.json`,
+        meshId: `/assets/packs/${pack._id}.json`,
       };
       assets.push(assetItem);
       await deviceCtrl.WriteFileText(

src/comm/controllers/deviceCtrl.ts

@@ -23,6 +23,7 @@ export class DeviceController extends Controller {
 
   profile = { wsPort: "", appGuid: "" };
   appDataDir = "";
+  httpServer = "";
   isEnvOk = false;
 
   constructor() {
@@ -93,11 +94,7 @@ export class DeviceController extends Controller {
       appGuid: "",
     };
     this.appDataDir = await this.GetAppDataDir();
-    // try {
-    //   this.StartHttpServer(`${this.appDataDir}/screen`);
-    // } catch (e) {
-    //   console.log(e);
-    // }
+    this.httpServer = await this.StartHttpServer(`${this.appDataDir}/screen`);
 
     console.log("current app profile=>", this.profile);
   }

src/modules/list/actions/canvas.ts

@@ -9,6 +9,7 @@ export default ListModule.action({
     const totalLines = this.store.animate.totalLines;
     const scrollType = this.store.animate.scrollType;
     const items = await this.actions.loadData();
+    console.log("items", items);
     if (!items) {
       return;
     }

src/modules/list/actions/list.ts

@@ -24,10 +24,10 @@ export default ListModule.action({
   },
   async getAssetDetail(id: string) {
     const res = await this.https.getAssetDetail(id);
-    if(res.errorNo!=200){
-      queenApi.messageError(res.errorDesc)
-      return
+    if (res.errorNo != 200) {
+      queenApi.messageError(res.errorDesc);
+      return;
     }
-    return res.result
+    return res.result;
   },
 });

src/modules/list/actions/load.ts

@@ -1,12 +1,14 @@
+import { useCtx } from "@/comm/ctx";
 import ListModule from "..";
 import { ItemObject, ShowItem } from "../objects/item";
 
 const defaultImage = require("@/assets/default.png");
 function loadImg(url: string, id: string, name: string): Promise<ShowItem> {
   return new Promise((resolve, reject) => {
+    const { deviceCtrl } = useCtx();
     const m = new Image();
     if (url) {
-      m.src = url;
+      m.src = deviceCtrl.httpServer + url;
     } else {
       m.src = defaultImage;
     }
@@ -51,7 +53,7 @@ export default ListModule.action({
     return arr;
   },
   async loadData() {
-    await this.actions.getAssetList();
+    // await this.actions.getAssetList();
     const ps = this.store.list.map((item: ItemObject, index) =>
       loadImg(item.thumbnail, item._id, item.name)
     );
@@ -76,11 +78,12 @@ export default ListModule.action({
   },
 
   async loadPack3d(item: ItemObject) {
+    const { deviceCtrl } = useCtx();
     const meshId = item.meshId;
     if (!meshId) return;
 
-    const ret = await this.https.loadLocal(meshId);
-    console.log(ret);
+    const ret:any = await this.https.loadLocal(deviceCtrl.httpServer + meshId);
+    console.log("loadPack3d",ret);
 
     return ret;
   },

src/pages/frame3d/main.ts

@@ -2,4 +2,5 @@ import { startApp } from "../App";
 import { initQueditor } from "@queenjs-modules/queditor";
 import router from "./routes";
 import "./style.less";
-startApp(router, [initQueditor]);
+import { initList } from "@/modules/list";
+startApp(router, [initQueditor, initList]);

src/pages/frame3d/routes/frame3d/index.tsx

@@ -9,6 +9,8 @@ import { Spin } from "ant-design-vue";
 
 import { useQueditor } from "@queenjs-modules/queditor";
 
+import { useList } from "@/modules/list";
+
 function getQuery() {
   const search = location.href.split("?")[1];
   const ret: { [name: string]: string } = {};
@@ -33,6 +35,7 @@ const Canvas3d = defineComponent({
     const state = reactive({ loaded: false });
     const { actions, components, controls, store } = useQueditor();
     store.showLoading = false;
+
     const initQueen = async () => {
       actions.initPack(props.pack.source);
       actions.on("initQueen3dScene:success", () => {
@@ -68,22 +71,24 @@ export default defineComponent({
   setup(props) {
     const query = getQuery();
     const dialogId = query.dialogid;
+    const meshId = query.id;
     const packRef = ref();
     const state = reactive({ loaded: false, loading: true });
-    window.addEventListener("message", (e: any) => {
-      try {
-        const msgData = JSON.parse(e.data);
-        if (msgData.type == "data") {
-          packRef.value = msgData.data;
-          state.loaded = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    });
+    // window.addEventListener("message", (e: any) => {
+    //   try {
+    //     const msgData = JSON.parse(e.data);
+    //     if (msgData.type == "data") {
+    //       packRef.value = msgData.data;
+    //       state.loaded = true;
+    //     }
+    //   } catch (e) {
+    //     console.log(e);
+    //   }
+    // });
+    const { actions } = useList();
     onMounted(async () => {
-      // const res = await actions.loadPack3d({ meshId: meshId } as any);
-      // packRef.value = res?.data;
+      const res = await actions.loadPack3d({ meshId: meshId } as any);
+      packRef.value = res?.data;
 
       document.addEventListener("mousedown", () => {
         window.parent.postMessage(JSON.stringify({ type: "start", dialogId }));

src/pages/website/routes/backend/List.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
   setup() {
     const ctx = useList();
     const { store, showModal, actions } = ctx;
-
+    const { deviceCtrl } = useCtx();
     const state = reactive({
       select: "default",
       optsions: [
@@ -27,7 +27,13 @@ export default defineComponent({
         dataIndex: "thumbnail",
         key: "thumbnail",
         customRender: ({ text }: any) => {
-          return <Image class="thumbnail" src={text} size={120} />;
+          return (
+            <Image
+              class="thumbnail"
+              src={deviceCtrl.httpServer + text}
+              size={0}
+            />
+          );
         },
       },
       {
@@ -38,7 +44,6 @@ export default defineComponent({
     ];
     actions.getAssetList();
     const initShowCategory = async () => {
-      const { deviceCtrl } = useCtx();
       const appDataDir = deviceCtrl.appDataDir;
       const category = await deviceCtrl.ReadFileText(
         `${appDataDir}/screen/category.json`

src/pages/website/routes/home/index.tsx

@@ -1,18 +1,19 @@
 import { css } from "@linaria/core";
 import { defineComponent, onMounted, ref } from "vue";
-
-import Dialog from "../list/dialog";
+import { SettingOutlined } from "@ant-design/icons-vue";
 import { useList } from "@/modules/list";
 import { DialogItem } from "@/modules/list/objects/item";
+import Dialog from "../list/dialog";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   setup() {
     const { store, actions } = useList();
-
+    const router = useRouter();
     const canvasRef = ref();
 
     const rootRef = ref<HTMLElement>();
-    actions.getAssetList();
+
     onMounted(() => {
       actions.on("getAssetList:success", async () => {
         const res = await actions.initListCanvasData(
@@ -24,10 +25,18 @@ export default defineComponent({
         }
         actions.startListRunning(canvasRef.value);
       });
+      actions.getAssetList();
     });
 
     return () => (
       <div class={rootStyle} ref={rootRef}>
+        <div class={"backend"}>
+          <SettingOutlined
+            onClick={() => {
+              router.push("/backend/setting");
+            }}
+          />
+        </div>
         <canvas ref={canvasRef} />
 
         {store.dialogs.map((item: DialogItem) => (
@@ -47,6 +56,22 @@ const rootStyle = css`
   overflow: hidden;
   user-select: none;
   flex-flow: row;
+  .backend {
+    position: absolute;
+    top: 0;
+    left: 10px;
+    cursor: pointer;
+    padding: 5px;
+    font-size: 20px;
+    line-height: 1;
+    background-color: @inf-primary-color;
+    color: #fff;
+    border-radius: 0 0 10px 10px;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      padding-top: 10px;
+    }
+  }
   canvas {
     width: 100%;
     height: 100%;