fix: 1

src/api/material.ts

@@ -54,12 +54,13 @@ export const fetchMaterialPage = async (params: MaterialPageProps) => {
         size: 1024,
       },
       {
-        id: params.pageNum + 200,
+        id: params.pageNum + 300,
         name: "mesh",
         format: "obj",
         url: "icon/h_default_64.png",
         groupId: 2,
         group: "分组2",
+        modelId: 1055,
         size: 254.58 * 1024 * 1024,
       },
     ],

src/components/tagging/sign-new.vue

@@ -67,10 +67,7 @@ const emit = defineEmits<{
 }>();
 
 // const pos = ref();
-const [posStyle, pos] = usePixel(() => ({
-  localPos: props.scenePos.localPos,
-  modelId: props.scenePos.modelId,
-}));
+const [posStyle, pos, pause, recovery] = usePixel(() => undefined);
 
 const queryItems = computed(() =>
   props.tagging.images.map((image) => ({
@@ -99,7 +96,8 @@ watchEffect(() => {
 watch(
   () => props.scenePos.mat,
   (val) => {
-    tag.changeMat(val);
+    console.log(val, tag);
+    // tag.changeMat(val);
   },
   { deep: true }
 );
@@ -159,20 +157,26 @@ tag.bus.on("leave", () => {
 tag.bus.on("click", () => iconClickHandler());
 
 const changePos = () => {
-  const c = tag.getImageCenter();
-  pos.value = { localPos: c };
-  console.error("getImageCenter", c);
+  pos.value = { localPos: tag.getImageCenter() };
+  console.error(pos.value.localPos);
 };
 changePos();
 
+const pullIndex = ref(-1);
 const showContent = computed(() => {
   return (
     !~pullIndex.value &&
     (isHover.value || custom.showTaggingPositions.has(props.scenePos))
   );
 });
+watchEffect(() => {
+  if (showContent.value) {
+    recovery();
+  } else {
+    pause();
+  }
+});
 
-const pullIndex = ref(-1);
 const iconClickHandler = () => {
   if (custom.showTaggingPositions.has(props.scenePos)) {
     custom.showTaggingPositions.delete(props.scenePos);
@@ -200,6 +204,7 @@ const iconClickHandler = () => {
     &.pc {
       width: 400px;
     }
+
     &:not(.pc) {
       width: 80vw;
       --bottom-left: 40vw;
@@ -248,6 +253,7 @@ const iconClickHandler = () => {
 .tag-tip {
   z-index: 8 !important;
 }
+
 .tag-tip p {
   padding: 6px 10px !important;
   margin: 5px 0 !important;

src/hook/use-pixel.ts

@@ -2,90 +2,85 @@ import { sdk } from "@/sdk";
 import { ref, Ref, UnwrapRef, watch, watchEffect } from "vue";
 import { useViewStack } from "./viewStack";
 
-export const useCameraChange = <T>(change: () => T): Ref<UnwrapRef<T>> => {
-  const data = ref(change())
+export const useCameraChange = <T>(change: () => T) => {
+  const data = ref(change());
+  let isPause = false
+  const update = () => {
+    if (isPause) return;
+    data.value = change() as UnwrapRef<T>;
+  };
   useViewStack(() => {
-    const update = () => {
-      data.value = change() as UnwrapRef<T>
-    }
     sdk.sceneBus.on("cameraChange", update);
     return () => {
       sdk.sceneBus.off("cameraChange", update);
     };
   });
-  return data
-}
+  return [data, () => isPause = true, () => {
+    isPause = false
+    update()
+}] as const;
+};
 
 export const usePixel = (
-  getter: () => ({ localPos: SceneLocalPos; modelId?: string } | undefined)
+  getter: () => { localPos: SceneLocalPos; modelId?: string } | undefined
 ) => {
-  const pos = useCameraChange(getter)
-  const pixel = ref<{ left: string; top: string }>();
-  const updatePosStyle = () => {
-    if (!pos.value) {
-      pixel.value = void 0;
-      return;
-    }
+  const pos = ref(getter());
+  const getPosStyle = () => {
+    if (!pos.value) return void 0;
     const screenPos = sdk.getScreenByPosition(
       pos.value.localPos,
       pos.value.modelId
     );
-    if (!screenPos) {
-      pixel.value = void 0;
-      return;
-    }
+    if (!screenPos) return void 0;
 
-    pixel.value = {
+    return {
       left: screenPos.pos.x + "px",
       top: screenPos.pos.y + "px",
     };
   };
-
+  const [pixel, pause, recovery] = useCameraChange(getPosStyle);
 
   useViewStack(() => {
-    watch(getter, val => pos.value = val)
-    const stop = watch(pos, updatePosStyle, {deep: true})
-    return stop
+    watch(getter, (val) => (pos.value = val));
+    return watch(pos, () => {
+      pixel.value = getPosStyle()
+    }, { deep: true });
   });
 
-  return [pixel, pos] as const;
+  return [pixel, pos, pause, recovery] as const;
 };
 
-
 export const usePixels = (
-  getter: () => ({ localPos: SceneLocalPos; modelId: string }[])
+  getter: () => { localPos: SceneLocalPos; modelId: string }[]
 ) => {
-  const positions = ref(getter())
-  watch(getter, val => {
-    positions.value = val
-  })
-  const pixels = ref<({ left: string; top: string } | null)[]>();
-  const updatePosStyle = () => {
-    pixels.value = []
+  const positions = ref(getter());
+  watch(getter, (val) => {
+    positions.value = val;
+  });
+
+  const getPosStyle = () => {
+    const pixels: ({left: string, top: string} | null)[] = [];
     for (let i = 0; i < positions.value.length; i++) {
-      const pos = positions.value[i]
-      const screenPos = sdk.getScreenByPosition(
-        pos.localPos,
-        pos.modelId
-      );
+      const pos = positions.value[i];
+      const screenPos = sdk.getScreenByPosition(pos.localPos, pos.modelId);
       if (screenPos) {
-        pixels.value[i] = {
+        pixels[i] = {
           left: screenPos.pos.x + "px",
           top: screenPos.pos.y + "px",
         };
       } else {
-        pixels.value[i] = screenPos
+        pixels[i] = null;
       }
     }
   };
-  watch(positions, updatePosStyle, {deep: true})
+  const [pixels, pause, recovery] = useCameraChange(getPosStyle)
 
   useViewStack(() => {
-    sdk.sceneBus.on("cameraChange", updatePosStyle);
-    return () => {
-      sdk.sceneBus.off("cameraChange", updatePosStyle);
-    };
+    watch(getter, (val) => (positions.value = val));
+    return watch(positions, () => {
+      pixels.value = getPosStyle()
+    }, { deep: true });
   });
 
-  return [pixels, positions] as const;
+  return [pixels, positions, pause, recovery] as const;
 };

src/layout/edit/fuse-slide-menu.vue

@@ -29,9 +29,13 @@ const items: Items = [
     ...metas[RoutesName.guide]
   },
   {
+    name: RoutesName.view,
+    ...metas[RoutesName.view]
+  },
+  {
     name: RoutesName.setting,
     ...metas[RoutesName.setting]
-  }
+  },
 ]
 
 

src/layout/edit/fuse-switch.vue

@@ -1,6 +1,6 @@
 <template>
   <SlideMenu />
-  <Header></Header>
+  <!-- <Header></Header> -->
   <ModelList />
 
   <router-view v-slot="{ Component }">
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import SlideMenu from './fuse-slide-menu.vue'
-import Header from './header/index.vue'
-import ModelList from './fuse-left-pano.vue'
-</script>
+import SlideMenu from "./fuse-slide-menu.vue";
+import Header from "./header/index.vue";
+import ModelList from "./fuse-left-pano.vue";
+</script>

src/layout/edit/scene-select.vue

@@ -179,6 +179,7 @@ const addModelHandler = createLoadPack(async (modelIds: number[]) => {
 });
 
 const okHandler = createLoadPack(async () => {
+  console.log(selects.value);
   const models = selects.value.filter(
     (modelId) => !fuseModels.value.some((model) => model.modelId === modelId)
   );
@@ -205,8 +206,7 @@ const selectModel = async () => {
     .filter(
       (modelId) => modelId && !fuseModels.value.some((model) => model.modelId === modelId)
     );
-  console.log(modelIds);
-  // await addModelHandler(modelIds);
+  await addModelHandler(modelIds);
 };
 </script>
 

src/router/config.ts

@@ -13,6 +13,11 @@ export const routes = [
         component: () => import('@/layout/edit/fuse-switch.vue'),
         children: [
           {
+            path: paths[RoutesName.view],
+            name: RoutesName.view,
+            component: () => import('@/views/view/index.vue')
+          },
+          {
             path: paths[RoutesName.merge],
             name: RoutesName.merge,
             meta: metas.merge,
@@ -71,11 +76,6 @@ export const routes = [
         name: RoutesName.record,
         component: () => import('@/views/record/index.vue')
       },
-      {
-        path: paths[RoutesName.view],
-        name: RoutesName.view,
-        component: () => import('@/views/view/index.vue')
-      }
     ]
   },
   {

src/router/constant.ts

@@ -94,7 +94,11 @@ export const metas = {
     sysTitle: "多元融合",
   },
 
-  [RoutesName.view]: { sysTitle: "视图提取" },
+  [RoutesName.view]: {
+    sysTitle: "视图提取",
+    icon: "nav-setup",
+    title: "视图提取",
+  },
   [RoutesName.record]: { sysTitle: "屏幕录制" },
   [RoutesName.show]: { sysTitle: "" },
 

src/views/tagging/edit.vue

@@ -238,7 +238,6 @@ const deleteStyle = (style: TaggingStyle) => {
 
 const uploadStyle = (style: TaggingStyle) => {
   style.typeId = type.value;
-  console.log(style.typeId);
   taggingStyles.value.push(style);
   tagging.value.styleId = style.id;
 };