fix: 添加SDK

.env.sdk

@@ -0,0 +1,4 @@
+VITE_APP_SDK = true
+VITE_DEV_ENV = true
+VITE_API_BASE_URL=dev
+VITE_DEV_PORT = 5178

package.json

@@ -5,8 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",
+    "dev-sdk": "vite --mode sdk --host 0.0.0.0",
     "build": "vite build",
     "build-test": "vite build --mode test",
+    "build-sdk": "vite build --mode sdk",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -44,4 +46,4 @@
     "vite": "^4.2.0",
     "vue-tsc": "^1.2.0"
   }
-}
+}

src/openSDK.ts

@@ -0,0 +1,7 @@
+import { ref } from "vue";
+
+export const loaded = ref(false);
+export const sdkAPI: any = {
+  // getFixPoints
+};
+(window as any).getSDK = (callback: () => {}) => {};

src/router/index.ts

@@ -1,48 +1,52 @@
-import { useEmitLeave } from '@/hook/useEdit'
-import { isEdit } from '@/store'
-import { ref, watch } from 'vue'
-import { Router } from 'vue-router'
+import { useEmitLeave } from "@/hook/useEdit";
+import { isEdit } from "@/store";
+import { ref, watch } from "vue";
+import { Router } from "vue-router";
 import {
   createRouter,
   createWebHashHistory,
-  RouteLocationNormalizedLoaded
-} from 'vue-router'
-import type { RoutesRef, RoutesRaw, RouteAtom } from './info'
+  RouteLocationNormalizedLoaded,
+} from "vue-router";
+import type { RoutesRef, RoutesRaw, RouteAtom } from "./info";
+import { readyRouteName } from "./constant";
 
 export const router = createRouter({
   history: createWebHashHistory(),
-  routes: []
-})
+  routes: [],
+});
 
 router.beforeEach((next, from) => {
+  if (!next.name) {
+    router.replace({ name: readyRouteName.scene });
+  }
   if (next?.meta?.title) {
-    document.title = next?.meta?.title
+    document.title = next?.meta?.title;
   }
   if (!isEdit.value || from.name === next.name) {
-    return true
+    return true;
   }
-  return useEmitLeave(false)
-})
+  return useEmitLeave(false);
+});
 
 const analysisRouter = (
   router: Router,
   newRoutes: RoutesRaw,
   oldRoutes: RoutesRaw = [],
-  parentName: string = ''
+  parentName: string = ""
 ) => {
   for (const oldRoute of oldRoutes) {
     if (newRoutes.every(({ name }) => name !== oldRoute.name)) {
-      router.removeRoute(oldRoute.name)
+      router.removeRoute(oldRoute.name);
     }
   }
 
   for (const newRoute of newRoutes) {
-    const oldRoute = oldRoutes.find(({ name }) => name === newRoute.name)
+    const oldRoute = oldRoutes.find(({ name }) => name === newRoute.name);
     if (!oldRoute) {
       if (parentName) {
-        router.addRoute(parentName, newRoute as any)
+        router.addRoute(parentName, newRoute as any);
       } else {
-        router.addRoute(newRoute as any)
+        router.addRoute(newRoute as any);
       }
     } else if (newRoute.children) {
       analysisRouter(
@@ -50,10 +54,10 @@ const analysisRouter = (
         newRoute.children,
         oldRoute.children,
         newRoute.name
-      )
+      );
     }
   }
-}
+};
 
 const flatRouters = (
   routes: RoutesRaw,
@@ -61,74 +65,74 @@ const flatRouters = (
   parent?: RouteAtom
 ) => {
   for (const route of routes) {
-    let path = route.path
-    if (parent && route.path[0] !== '/') {
-      const ppath = parent.path
-      path = `${ppath}${ppath[ppath.length - 1] === '/' ? '' : '/'}${path}`
+    let path = route.path;
+    if (parent && route.path[0] !== "/") {
+      const ppath = parent.path;
+      path = `${ppath}${ppath[ppath.length - 1] === "/" ? "" : "/"}${path}`;
     }
 
     flat.push({
       ...route,
-      path
-    })
+      path,
+    });
     if (route.children) {
-      flatRouters(route.children, flat, route)
+      flatRouters(route.children, flat, route);
     }
   }
-  return flat
-}
+  return flat;
+};
 
 // 动态更改路由
 export const setupRouter = (routesRef: RoutesRef) => {
-  let routes = ref<RoutesRaw>()
-  let defRouteName
-  let unSetName: string
+  let routes = ref<RoutesRaw>();
+  let defRouteName;
+  let unSetName: string;
   const exists = (routes: RoutesRaw, route: RouteLocationNormalizedLoaded) => {
-    return routes.find(({ path }) => path === route.path)
-  }
+    return routes.find(({ path }) => path === route.path);
+  };
 
   watch(
     routesRef,
     ({ list: newRoutes, default: _defRouteName }, oldRoutesRef) => {
-      const oldRoutes = oldRoutesRef?.list || []
-      analysisRouter(router, newRoutes, oldRoutes)
-      routes.value = flatRouters(newRoutes)
-      defRouteName = _defRouteName
+      const oldRoutes = oldRoutesRef?.list || [];
+      analysisRouter(router, newRoutes, oldRoutes);
+      routes.value = flatRouters(newRoutes);
+      defRouteName = _defRouteName;
 
       if (!exists(routes.value, router.currentRoute.value)) {
         // router.replace({ name: defRouteName })
       }
     },
-    { flush: 'post', immediate: true }
-  )
+    { flush: "post", immediate: true }
+  );
 
-  let enter = 0
+  let enter = 0;
   const stopWatchCurrent = watch([router.currentRoute], () => {
     if (!routes.value?.length) {
-      return
+      return;
     }
     if (!exists(routes.value, router.currentRoute.value)) {
-      unSetName = router.currentRoute.value.fullPath
-      enter++
+      unSetName = router.currentRoute.value.fullPath;
+      enter++;
       // router.replace({ name: defRouteName })
     } else {
-      enter--
+      enter--;
     }
-  })
+  });
 
   const stopWatchRoutes = watch(routes, () => {
     if (!routes.value?.length) {
-      return
+      return;
     }
     if (unSetName && !enter) {
-      const route = exists(routes.value, { path: unSetName } as any)
+      const route = exists(routes.value, { path: unSetName } as any);
       if (route) {
-        router.replace({ name: route.name })
-        stopWatchCurrent()
-        stopWatchRoutes()
+        router.replace({ name: route.name });
+        stopWatchCurrent();
+        stopWatchRoutes();
       }
     }
-  })
-}
-export * from './constant'
-export default router
+  });
+};
+export * from "./constant";
+export default router;

src/router/info.ts

@@ -23,63 +23,73 @@ export type RouteAtom<
 
 export type RoutesRaw<T extends ModeFlag = any> = RouteAtom<T>[];
 
-export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
-  {
-    path: "/graphic/:mode/:action/:id",
-    name: readyRouteName.graphic,
-    meta: readyRouteMeta.graphic,
-    component: () => import("@/views/graphic/index.vue"),
-  },
-  {
-    path: "/scene",
-    name: readyRouteName.scene,
-    meta: readyRouteMeta.scene,
-    component: () => import("@/views/scene/index.vue"),
-  },
+export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> =
+  import.meta.env.VITE_APP_SDK === "true"
+    ? [
+        {
+          path: "/scene",
+          name: readyRouteName.scene,
+          meta: readyRouteMeta.scene,
+          component: () => import("@/views/scene/scene.vue"),
+        },
+      ]
+    : [
+        {
+          path: "/graphic/:mode/:action/:id",
+          name: readyRouteName.graphic,
+          meta: readyRouteMeta.graphic,
+          component: () => import("@/views/graphic/index.vue"),
+        },
+        {
+          path: "/scene",
+          name: readyRouteName.scene,
+          meta: readyRouteMeta.scene,
+          component: () => import("@/views/scene/index.vue"),
+        },
 
-  {
-    path: "/photos",
-    name: readyRouteName.photos,
-    meta: readyRouteMeta.photos,
-    component: () => import("@/views/photos/index.vue"),
-  },
-  {
-    path: "/accidents",
-    name: readyRouteName.accidents,
-    meta: readyRouteMeta.accidents,
-    component: () => import("@/views/accidents/index.vue"),
-  },
-  {
-    path: "/gena4/:id1/:id2",
-    name: readyRouteName.gena4,
-    meta: readyRouteMeta.gena4,
-    component: () => import("@/views/accidents/print.vue"),
-  },
-  {
-    path: "/roads",
-    name: readyRouteName.roads,
-    meta: readyRouteMeta.roads,
-    component: () => import("@/views/roads/index.vue"),
-  },
-  {
-    path: "/tabulation/:id",
-    name: readyRouteName.tabulation,
-    meta: readyRouteMeta.tabulation,
-    component: () => import("@/views/roads/tabulation.vue"),
-  },
-  {
-    path: "/tables/:name",
-    name: readyRouteName.tables,
-    meta: readyRouteMeta.tables,
-    component: () => import("@/views/tables/index.vue"),
-  },
-  {
-    path: "/demo/:id",
-    name: readyRouteName.demo,
-    meta: readyRouteMeta.demo,
-    component: () => import("@/views/tables/demo.vue"),
-  },
-];
+        {
+          path: "/photos",
+          name: readyRouteName.photos,
+          meta: readyRouteMeta.photos,
+          component: () => import("@/views/photos/index.vue"),
+        },
+        {
+          path: "/accidents",
+          name: readyRouteName.accidents,
+          meta: readyRouteMeta.accidents,
+          component: () => import("@/views/accidents/index.vue"),
+        },
+        {
+          path: "/gena4/:id1/:id2",
+          name: readyRouteName.gena4,
+          meta: readyRouteMeta.gena4,
+          component: () => import("@/views/accidents/print.vue"),
+        },
+        {
+          path: "/roads",
+          name: readyRouteName.roads,
+          meta: readyRouteMeta.roads,
+          component: () => import("@/views/roads/index.vue"),
+        },
+        {
+          path: "/tabulation/:id",
+          name: readyRouteName.tabulation,
+          meta: readyRouteMeta.tabulation,
+          component: () => import("@/views/roads/tabulation.vue"),
+        },
+        {
+          path: "/tables/:name",
+          name: readyRouteName.tables,
+          meta: readyRouteMeta.tables,
+          component: () => import("@/views/tables/index.vue"),
+        },
+        {
+          path: "/demo/:id",
+          name: readyRouteName.demo,
+          meta: readyRouteMeta.demo,
+          component: () => import("@/views/tables/demo.vue"),
+        },
+      ];
 
 export type RoutesRef<T extends ModeFlag = any> = ComputedRef<{
   list: RoutesRaw<T>;

src/sdk/types/sdk.ts

@@ -35,10 +35,7 @@ export type Base = Emitter<SceneEventMap> & {
   // 通过DOM坐标获取真实坐标
   getPointByScreen: (screen?: Pos & { inDrag?: boolean }) => PointInfo | null;
   // 通过真实坐标获取DOM坐标
-  getScreenByPoint: (
-    point: Pos,
-    slide?: boolean
-  ) => { pos: Pos; trueSide: boolean };
+  getScreenByPoint: (point: Pos, slide?: boolean) => { pos: Pos; trueSide: boolean };
 
   screenshot: (
     width: number,
@@ -82,8 +79,7 @@ export type Measure = {
 };
 
 export type StartMeasure = Measure & {
-  bus: Emitter<{ end: Measure; quit: Measure; invalidPoint: string }> &
-    Measure["bus"];
+  bus: Emitter<{ end: Measure; quit: Measure; invalidPoint: string }> & Measure["bus"];
   quit: () => void;
   end: () => void;
 };
@@ -249,11 +245,7 @@ export type Scene = Base & {
   quitMeasure(): void;
   changeMode(mode: Mode): void;
   getCurrentMode(): Mode;
-  startMeasure(
-    type: MeasureType,
-    unit: MeasureUnit,
-    color: string
-  ): StartMeasure;
+  startMeasure(type: MeasureType, unit: MeasureUnit, color: string): StartMeasure;
   drawMeasure(
     type: MeasureType,
     unit: MeasureUnit,
@@ -345,9 +337,11 @@ export type FixPoint3D = {
   // 当正在绘制形状时，外面可以确定完成 或者取消， 确定完成时通过这个对象告知
   graphDrawComplete(): void;
 
+  show: () => void;
+  hide: () => void;
   bus: Emitter<{
     // 测量线被选中对象，值为是否选中
-    selected: boolean;
+    selectGraph: boolean;
     // 形状被选中事件，值为是否选中
     selectMeasure: boolean;
     // 这个不用实现
@@ -561,11 +555,7 @@ export type LaserSDK = {
   enterEditClouds: (data: EditCloudsArgs) => EditClouds;
   enterEditCrop: () => EditCrop;
 
-  transformPoint: (
-    point: Pos3D,
-    datasetId: string,
-    dataset_location: Pos3D
-  ) => Pos3D;
+  transformPoint: (point: Pos3D, datasetId: string, dataset_location: Pos3D) => Pos3D;
 
   enterMeasurement: () => void;
   leaveMeasurement: () => void;
@@ -581,11 +571,7 @@ export type LaserSDK = {
 
   enterFireEdit: () => void;
 
-  insertEffect: (
-    type: TypeEmu,
-    prop: InsertEffectProp,
-    edit: boolean
-  ) => Effect;
+  insertEffect: (type: TypeEmu, prop: InsertEffectProp, edit: boolean) => Effect;
 
   debug: boolean;
   // 加载小物体

src/views/scene/covers/cover.vue

@@ -135,7 +135,7 @@ onUnmounted(() => {
 .cover-layout {
   position: absolute;
   z-index: 1;
-  transform: translate(-50%, -100%);
+  transform: translate(-50%, -50%);
   cursor: move;
 }
 

src/views/scene/covers/fixPoint.vue

@@ -43,7 +43,7 @@ setTimeout(() => {
       console.log("selectMeasure", select);
       select ? emit("focusMeasure") : emit("blurMeasure");
     });
-    fix3d.bus.on("selected", (select) => {
+    fix3d.bus.on("selectGraph", (select) => {
       console.log("selected", select);
       select ? emit("focus") : emit("blur");
     });
@@ -52,6 +52,9 @@ setTimeout(() => {
 </script>
 
 <style scoped lang="scss">
+.fix-cover {
+  transform: translate(-50%, -100%);
+}
 .label {
   color: #fff;
   font-size: 12px;

src/views/scene/covers/fixPoints.vue

@@ -16,13 +16,12 @@
     <ActionMenus
       v-if="customMap.activeFixPoint"
       :menus="activeActionMenus"
-      :type="1"
+      :type="activeActionMenus.length === 1 ? 0 : 1"
       :active-key="edit ? 'edit' : null"
       dire="row"
     />
     <ActionMenus
       v-if="ingActionMenus"
-      :type="1"
       :menus="ingActionMenus"
       :active-key="null"
       dire="row"

src/views/scene/covers/measure.vue

@@ -31,7 +31,6 @@ const measure = computed(() => {
 watchEffect(() => {
   if (measure.value) {
     measure.value.bus.on("selected", (focus) => {
-      console.log("===>");
       if (focus) {
         emit("focus");
       } else {

src/views/scene/index-copy.vue

@@ -1,61 +0,0 @@
-<template>
-  <Container @loaded="loaded = true" />
-
-  <template v-if="loaded && !trackMode">
-    <Menus @enter-child="childPage = true" @leave-child="childPage = false" />
-    <BasePoints v-if="currentView" />
-    <FixPoints />
-    <Measures />
-    <Photo />
-    <!-- <ButtonPane class="back fun-ctrl" size="48" @click="back" v-if="!childPage"> -->
-    <ButtonPane class="back fun-ctrl" size="48" @click="router.back" v-if="!childPage">
-      <ui-icon type="return_l" class="icon" />
-    </ButtonPane>
-    <Mode />
-  </template>
-  
-</template>
-
-<script lang="ts" setup>
-import Container from "./container.vue";
-import Mode from "./mode.vue";
-import Menus from "./menus/pane.vue";
-import BasePoints from "@/views/scene/covers/basePoints.vue";
-import FixPoints from "@/views/scene/covers/fixPoints.vue";
-import Measures from "@/views/scene/covers/measures.vue";
-import Photo from "./photo.vue";
-import ButtonPane from "@/components/button-pane";
-import { customMap, disabledMap, useSDK } from "@/hook";
-import customSetup from "../../hook/custom";
-import UiIcon from "@/components/base/components/icon/index.vue";
-import { ref, watchEffect } from "vue";
-import { back } from "@/store/sync";
-import { trackMode } from "@/views/scene/trackMeasureWidth";
-import { currentView } from "./currentScene";
-import { router, writeRouteName } from '@/router';
-const loaded = ref(false);
-const childPage = ref(false);
-const stopReg = watchEffect(() => {
-  if (loaded.value) {
-    const sdk = useSDK();
-    stopReg();
-    customSetup(sdk);
-    disabledMap.measure = false;
-  }
-});
-</script>
-
-<style scoped lang="scss">
-.back {
-  left: var(--boundMargin);
-  top: var(--boundMargin);
-  color: #fff;
-  font-size: 20px;
-  transition: color 0.3s ease;
-
-  .icon {
-    position: absolute;
-    transform: translateX(-50%);
-  }
-}
-</style>

src/views/scene/index.vue

@@ -18,34 +18,18 @@
     <div class="info-layout" ref="layoutRef">
       <div class="info-top">
         <div class="info-top-left" :class="{ full: viewStatus }">
-          <Container @loaded="loaded = true" :viewStatus="viewStatus" />
-          <template v-if="loaded && !trackMode">
-            <Menus
-              v-if="viewStatus"
-              @active="(data) => (activeMenuKeys = data)"
-              @enter-child="childPage = true"
-              @leave-child="childPage = false"
-            />
-            <!-- v-if="currentView" -->
-            <BasePoints />
-            <FixPoints />
-            <Measures />
-            <Photo :size="viewStatus ? 88 : 64" />
-            <Range
-              v-if="activeMenuKeys[0] === 'range'"
-              :rangeKey="activeMenuKeys.slice(1).join(':')"
-            />
-            <!-- <ButtonPane class="back fun-ctrl" size="48" @click="router.push('/scene')" v-if="!childPage"> -->
-            <ButtonPane
-              class="back fun-ctrl"
-              :size="viewStatus ? 64 : 48"
-              @click="onScale"
-              v-if="!childPage"
-            >
-              <ui-icon :type="viewStatus ? 'screen_c' : 'screen_f'" class="icon" />
-            </ButtonPane>
-            <Mode :size="viewStatus ? 64 : 48" />
-          </template>
+          <Scene :view-status="viewStatus">
+            <template v-slot="{ childPage }">
+              <ButtonPane
+                class="back fun-ctrl"
+                :size="viewStatus ? 64 : 48"
+                @click="onScale"
+                v-if="!childPage"
+              >
+                <ui-icon :type="viewStatus ? 'screen_c' : 'screen_f'" class="icon" />
+              </ButtonPane>
+            </template>
+          </Scene>
         </div>
         <div class="info-top-right" :class="{ full: viewStatus }">
           <div class="input-item">
@@ -113,61 +97,29 @@
 </template>
 
 <script lang="ts" setup>
+import Scene from "./scene.vue";
 import MainPanel from "@/components/main-panel/index.vue";
-import Container from "./container.vue";
-import Mode from "./mode.vue";
-import Menus from "./menus/pane.vue";
-import BasePoints from "@/views/scene/covers/basePoints.vue";
-import FixPoints from "@/views/scene/covers/fixPoints.vue";
-import Measures from "@/views/scene/covers/measures.vue";
-import Photo from "./photo.vue";
-import ButtonPane from "@/components/button-pane/index.vue";
-import Range from "./covers/range.vue";
-import { disabledMap, useSDK } from "@/hook";
-import customSetup from "../../hook/custom";
 import UiIcon from "@/components/base/components/icon/index.vue";
-import { ref, watchEffect, computed, onMounted, onActivated, nextTick } from "vue";
+import { ref, computed, onMounted, onActivated, nextTick } from "vue";
 import { back } from "@/store/sync";
-import { trackMode } from "@/views/scene/trackMeasureWidth";
-import { currentView } from "./currentScene";
 import { router, writeRouteName } from "@/router";
 import { roadPhotos } from "@/store/roadPhotos";
+import ButtonPane from "@/components/button-pane/index.vue";
 import { types, accidentPhotos } from "@/store/accidentPhotos";
 import { debounce, getQueryString } from "@/utils";
 import { tables } from "@/store/tables";
-import { goto } from "./menus/data";
+
 const layoutRef = ref(null);
-const activeMenuKeys = ref<string[]>([]);
 const accodentSortPhotos = computed(() => {
   const photos = [...accidentPhotos.value];
   return photos.sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type));
 });
-const sortPhotos = computed(() =>
-  roadPhotos.value
-    // .filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table))
-    .reverse()
-);
-const enum TypeEnum {
-  Draw,
-  Table,
-}
-const currentType = ref(TypeEnum.Draw);
 const sceneSortPhotos = computed(() => roadPhotos.value);
 
 const sceneTitle = ref(
   getQueryString("title") ? decodeURIComponent(getQueryString("title")) : "案件"
 );
 
-const loaded = ref(false);
-const childPage = ref(false);
-const stopReg = watchEffect(() => {
-  if (loaded.value) {
-    const sdk = useSDK();
-    stopReg();
-    customSetup(sdk);
-    disabledMap.measure = false;
-  }
-});
 const sceneInfo = ref({
   accidentTime: "",
   weather: "",

src/views/scene/photo.vue

@@ -1,22 +1,24 @@
 <template>
-  <img :src="tempPhoto" class="face-animation" v-if="tempPhoto" ref="coverRef" />
-  <div class="photo-layout" v-if="disabledMap.photo">
-    <ButtonPane class="photo-btn fun-ctrl" :size="size" @click="photo" box-shadow>
-      <ui-icon type="photo" class="icon" :size="size / 2" />
-    </ButtonPane>
+  <template v-if="!isSDK">
+    <img :src="tempPhoto" class="face-animation" v-if="tempPhoto" ref="coverRef" />
+    <div class="photo-layout" v-if="disabledMap.photo">
+      <ButtonPane class="photo-btn fun-ctrl" :size="size" @click="photo" box-shadow>
+        <ui-icon type="photo" class="icon" :size="size / 2" />
+      </ButtonPane>
 
-    <img
-      v-if="showCoverUrl"
-      :src="showCoverUrl.value"
-      class="cover"
-      :style="{
-        opacity: showCoverUrl ? '1' : 0,
-        width: `${size - 24}px`,
-        height: `${size - 24}px`,
-      }"
-      @click="router.push(writeRouteName.photos)"
-    />
-  </div>
+      <img
+        v-if="showCoverUrl"
+        :src="showCoverUrl.value"
+        class="cover"
+        :style="{
+          opacity: showCoverUrl ? '1' : 0,
+          width: `${size - 24}px`,
+          height: `${size - 24}px`,
+        }"
+        @click="router.push(writeRouteName.photos)"
+      />
+    </div>
+  </template>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +30,6 @@ import { baseLines } from "@/store/baseLine";
 import { basePoints } from "@/store/basePoint";
 import { photos } from "@/store/photos";
 import { useSDK } from "@/hook/useLaser";
-import { genUseLoading } from "@/hook";
 
 import { disabledMap } from "@/hook/custom";
 import { base64ToBlob, formatDate, getId } from "@/utils";
@@ -41,6 +42,7 @@ import { Loading } from "@kankan/components/index";
 import { generateMixMenus, MenuRaw, menus, findMenuByKey } from "./menus/menus";
 
 defineProps<{ size: number }>();
+const isSDK = import.meta.env.VITE_APP_SDK === "true";
 const menusMix = computed(() => menus);
 const store = generateMixMenus("children", (m) => m, menusMix.value);
 const showCoverUrl = computed(() => {
@@ -50,6 +52,7 @@ const showCoverUrl = computed(() => {
 });
 
 import mp3url from "./camera1.mp3";
+import { getFix3d } from "./fixManage";
 const tempPhoto = ref<string>();
 const coverRef = ref<HTMLImageElement>();
 const audio = new Audio(mp3url);
@@ -88,9 +91,11 @@ const screenshot = async (sdk: LaserSDK) => {
   const screenshotRaw = await getScreenshot();
 
   baseLines.value.concat(list.value).forEach((item) => (item.show = false));
+  fixPoints.value.forEach((fix) => getFix3d(fix).hide());
   await nextTick();
   const screenshot = await getScreenshot(true);
   baseLines.value.concat(list.value).forEach((item) => (item.show = true));
+  fixPoints.value.forEach((fix) => getFix3d(fix).show());
   await nextTick();
 
   dom.style.pointerEvents = "all";
@@ -122,9 +127,10 @@ const photo = async () => {
   await nextTick();
   return new Promise((resolve, reject) => {
     const handler = async () => {
-      coverRef.value.removeEventListener("animationend", handler);
+      if (!isSDK) {
+        coverRef.value.removeEventListener("animationend", handler);
+      }
       tempPhoto.value = null;
-
       const fixMeasures = fixPoints.value
         .filter((fix) => fix.measure && fix.lines)
         .map((fix) => {
@@ -170,11 +176,17 @@ const photo = async () => {
       Loading.hide();
       resolve(photoData);
     };
-    coverRef.value.addEventListener("animationend", handler);
+    if (isSDK) {
+      handler();
+    } else {
+      coverRef.value.addEventListener("animationend", handler);
+    }
   });
 };
 
-(window as any).photo = photo;
+if (import.meta.env.VITE_APP_SDK === "true") {
+  (window as any).photo = photo;
+}
 </script>
 
 <style scoped lang="scss">

src/views/scene/scene.vue

@@ -0,0 +1,50 @@
+<template>
+  <Container @loaded="loaded = true" :viewStatus="viewStatus" />
+  <template v-if="loaded && !trackMode">
+    <Menus
+      v-if="viewStatus"
+      @active="(data) => (activeMenuKeys = data)"
+      @enter-child="childPage = true"
+      @leave-child="childPage = false"
+    />
+    <BasePoints />
+    <FixPoints />
+    <Measures />
+    <Photo :size="viewStatus ? 88 : 64" />
+    <Range
+      v-if="activeMenuKeys[0] === 'range'"
+      :rangeKey="activeMenuKeys.slice(1).join(':')"
+    />
+    <slot :childPage="childPage" />
+    <Mode :size="viewStatus ? 64 : 48" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+import Container from "./container.vue";
+import Mode from "./mode.vue";
+import Menus from "./menus/pane.vue";
+import BasePoints from "@/views/scene/covers/basePoints.vue";
+import FixPoints from "@/views/scene/covers/fixPoints.vue";
+import Measures from "@/views/scene/covers/measures.vue";
+import Photo from "./photo.vue";
+import Range from "./covers/range.vue";
+import { disabledMap, useSDK } from "@/hook";
+import customSetup from "../../hook/custom";
+import { ref, watchEffect } from "vue";
+import { trackMode } from "@/views/scene/trackMeasureWidth";
+
+withDefaults(defineProps<{ viewStatus: boolean }>(), { viewStatus: true });
+defineEmits<{ (e: "update:viewStatus", v: boolean): void }>();
+const activeMenuKeys = ref<string[]>([]);
+const loaded = ref(false);
+const childPage = ref(false);
+const stopReg = watchEffect(() => {
+  if (loaded.value) {
+    const sdk = useSDK();
+    stopReg();
+    customSetup(sdk);
+    disabledMap.measure = false;
+  }
+});
+</script>

src/vite-env.d.ts

@@ -1,16 +1,20 @@
 /// <reference types="vite/client" />
 
-type DeepWriteable<T> = { -readonly [P in keyof T]: DeepWriteable<T[P]> }
+type DeepWriteable<T> = { -readonly [P in keyof T]: DeepWriteable<T[P]> };
 
-declare type Recordable<T = any> = Record<string, T>
+declare type Recordable<T = any> = Record<string, T>;
 
 declare type I18nGlobalTranslation = {
-  (key: string): string
-  (key: string, locale: string): string
-  (key: string, locale: string, list: unknown[]): string
-  (key: string, locale: string, named: Record<string, unknown>): string
-  (key: string, list: unknown[]): string
-  (key: string, named: Record<string, unknown>): string
+  (key: string): string;
+  (key: string, locale: string): string;
+  (key: string, locale: string, list: unknown[]): string;
+  (key: string, locale: string, named: Record<string, unknown>): string;
+  (key: string, list: unknown[]): string;
+  (key: string, named: Record<string, unknown>): string;
+};
+
+interface ImportMetaEnv {
+  VITE_APP_SDK: string;
 }
 
-declare const $t: I18nGlobalTranslation
+declare const $t: I18nGlobalTranslation;

vite.config.ts

@@ -7,8 +7,9 @@ import { createServer as createMockServer } from "./server/mock";
 
 export default async ({ mode }) => {
   const env = loadEnv(mode, process.cwd());
-  const isDev = mode === "development";
+  const isDev = mode === "development" || env.VITE_DEV_ENV === "true";
 
+  console.log(isDev);
   let server;
   if (isDev) {
     await createMockServer(Number(env.VITE_DEV_PORT));