对接mode

src/layout/model-list/index.vue

@@ -89,6 +89,9 @@ watchEffect(() => {
   }
 });
 const modelDelete = (model: FuseModel) => {
+  if (custom.currentModel === model) {
+    activeModel({ showMode: "fuse" });
+  }
   const index = fuseModels.value.indexOf(model);
   if (~index) {
     fuseModels.value.splice(index, 1);

src/layout/right-fill-pano.vue

@@ -1,10 +1,11 @@
 <template>
   <div id="right-pano">
-    <span 
+    <span
       class="ctrl-pano-c fun-ctrl strengthen-left strengthen-top strengthen-bottom"
-      v-if="custom.shwoRightCtrlPano && custom.viewMode !== 'full'" 
+      v-if="custom.shwoRightCtrlPano && custom.viewMode !== 'full'"
       @click="custom.showRightPano = !custom.showRightPano"
-      :class="{ active: custom.showRightPano }">
+      :class="{ active: custom.showRightPano }"
+    >
       <ui-icon type="extend" class="icon"></ui-icon>
     </span>
     <ui-editor-toolbox :toolbox="true" disabledAnimation :class="{ flex: $slots.header }">
@@ -22,8 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { custom } from '@/env'
-
+import { custom } from "@/env";
 </script>
 
 <style lang="scss" scoped>
@@ -43,7 +43,7 @@ import { custom } from '@/env'
   color: rgba(255, 255, 255, 0.6);
   font-size: 14px;
   cursor: pointer;
-  transition: inset .3s ease, color .3s ease;
+  transition: inset 0.3s ease, color 0.3s ease;
 
   &:hover {
     color: rgba(255, 255, 255, 1);
@@ -55,12 +55,13 @@ import { custom } from '@/env'
 
   .icon {
     display: inline-block;
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     transform: rotate(180deg);
   }
+
   &.active {
     .icon {
-      transform: rotate(0)
+      transform: rotate(0);
     }
   }
 }
@@ -81,4 +82,4 @@ import { custom } from '@/env'
     padding: 0 20px;
   }
 }
-</style>
+</style>

src/model/app.vue

@@ -164,7 +164,6 @@ export default Model;
   .scene-canvas {
     width: 100%;
     height: 100%;
-    background-color: #ccc;
   }
 }
 

src/sdk/association/fuseMode.ts

@@ -33,6 +33,14 @@ export const modelRange: ModelAttrRange = {
 export const sceneModelMap = reactive(new Map<FuseModel, SceneModel>());
 export const getSceneModel = (model?: FuseModel | null) =>
   model && sceneModelMap.get(toRaw(model));
+export const getFuseModel = (model?: SceneModel | null) => {
+  if (!model) return null;
+  for (const [k, v] of sceneModelMap.entries()) {
+    if (toRaw(v) === toRaw(model)) {
+      return k;
+    }
+  }
+};
 
 const setModels = (sdk: SDK, models: FuseModels, oldModels: FuseModels) => {
   const { added, deleted } = diffArrayChange(models, oldModels);
@@ -162,10 +170,6 @@ export const activeModel = (status: {
   const model = status.active && getSceneModel(status.active)!;
   const oldModel = oldStatus.active && getSceneModel(oldStatus.active)!;
 
-  if (status.showMode !== "pano" && model) {
-    model && model.changeSelect(true);
-  }
-
   if (model && status.active === oldStatus.active) {
     if (status.showMode === "pano") {
       model && model.flyInPano();
@@ -185,14 +189,26 @@ export const activeModel = (status: {
     }
   }
 
+  setTimeout(() => {
+    if (status.showMode !== "pano" && model) {
+      model && model.changeSelect(true);
+    }
+  }, 35);
+
   custom.currentModel = status.active!;
   custom.showMode = status.showMode;
 };
 
 export const associationModels = (sdk: SDK) => {
-  sdk.sceneBus.on("modeChange", (mode) => {
-    console.log("scene出发modeChange", mode);
-    custom.showMode = mode;
+  sdk.sceneBus.on("modeChange", (data) => {
+    custom.showMode = data.mode;
+    if (data.active) {
+      custom.currentModel = getFuseModel(data.active)!;
+    }
+  });
+  sdk.sceneBus.on("panoModelChange", (data) => {
+    custom.showMode = "pano";
+    custom.currentModel = getFuseModel(data)!;
   });
 
   const getModels = () =>

src/sdk/association/index.ts

@@ -1,6 +1,11 @@
 import { nextTick, ref, toRaw, watchEffect } from "vue";
 import { Pose, SceneModel, sdk, SDK } from "../sdk";
-import { activeModel, associationModels, sceneModelMap } from "./fuseMode";
+import {
+  activeModel,
+  associationModels,
+  getFuseModel,
+  sceneModelMap,
+} from "./fuseMode";
 import { FuseModel, fuseModelsLoaded, GuidePath, setting } from "@/store";
 import { associationTaggings } from "./tagging";
 import { associationSetting } from "./setting";
@@ -17,14 +22,10 @@ export const getSupperPanoModel = () => {
     sdk.sceneBus.on("cameraChange", () => {
       const data = sdk.canTurnToPanoMode();
       if (data?.model) {
-        for (const [f, s] of sceneModelMap.entries()) {
-          if (toRaw(data.model) === toRaw(s)) {
-            supperModel.value = f;
-            return;
-          }
-        }
+        supperModel.value = getFuseModel(data.model)!;
+      } else {
+        supperModel.value = null;
       }
-      supperModel.value = null;
     });
   }, 16);
 
@@ -34,12 +35,7 @@ export const getSupperPanoModel = () => {
 export const analysisPose = (pose: Pose) => {
   if ("model" in pose && pose.model) {
     let info: GuidePath["panoInfo"] | undefined = undefined;
-    let fuseMode: FuseModel;
-    for (const [k, v] of Array.from(sceneModelMap.entries())) {
-      if (toRaw(v) === toRaw(pose.model)) {
-        fuseMode = toRaw(k);
-      }
-    }
+    let fuseMode = getFuseModel(pose.model);
     if (fuseMode!) {
       info = {
         panoId: pose.panoId,

src/sdk/sdk.ts

@@ -148,7 +148,8 @@ export interface SDK {
   layout: HTMLDivElement;
   sceneBus: Emitter<{
     cameraChange: SceneLocalPos;
-    modeChange: "pano" | "fuse";
+    panoModelChange: SceneModel;
+    modeChange: { mode: "pano" | "fuse"; active: SceneModel };
   }>;
   setBackdrop: (
     drop: string,

src/store/fuse-model.ts

@@ -1,179 +1,211 @@
-import { computed, reactive, ref, watch, watchEffect, watchPostEffect } from 'vue'
-import { autoSetModeCallback, unSetModelUpdate, createTemploraryID } from './sys'
-import { custom } from '@/env'
-import { 
-  fetchFuseModels, 
-  postAddFuseModel, 
+import {
+  computed,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+  watchPostEffect,
+} from "vue";
+import {
+  autoSetModeCallback,
+  unSetModelUpdate,
+  createTemploraryID,
+} from "./sys";
+import { custom } from "@/env";
+import {
+  fetchFuseModels,
+  postAddFuseModel,
   postDeleteFuseModel,
   postUpdateFuseModels,
   SceneType,
-  SceneStatus
-} from '@/api'
-import { 
-  deleteStoreItem, 
-  updateStoreItem, 
+  SceneStatus,
+} from "@/api";
+import {
+  deleteStoreItem,
+  updateStoreItem,
   fetchStoreItems,
   saveStoreItems,
-  deepIsRevise
-} from '@/utils'
-import { initialTaggings } from './tagging'
-import { initialMeasures } from './measure'
+  deepIsRevise,
+} from "@/utils";
+import { initialTaggings } from "./tagging";
+import { initialMeasures } from "./measure";
 
-import type { FuseModel as SModel, FuseModelAttrs } from '@/api'
+import type { FuseModel as SModel, FuseModelAttrs } from "@/api";
 
-export type FuseModel = SModel & { loaded: boolean, error: boolean, progress: number }
-export type FuseModels = FuseModel[]
-export type { FuseModelAttrs } from '@/api'
+export type FuseModel = SModel & {
+  loaded: boolean;
+  error: boolean;
+  progress: number;
+};
+export type FuseModels = FuseModel[];
+export type { FuseModelAttrs } from "@/api";
 
-export const fuseModels = ref<FuseModels>([])
-export const dynamicAddedModelIds = ref<FuseModel['id'][]>([])
+export const fuseModels = ref<FuseModels>([]);
+export const dynamicAddedModelIds = ref<FuseModel["id"][]>([]);
 
 export const defaultFuseModelAttrs: FuseModelAttrs = {
   show: true,
   scale: 100,
   opacity: 100,
   bottom: 0,
-  position: {x: 0, y: 0, z: 0},
-  rotation: {x: 0, y: 0, z: 0}
-}
-export const createFuseModels = (model: Partial<FuseModel> = {}): FuseModel => serviceToLocal({
-  id: createTemploraryID(),
-  modelId: 0,
-  fusionNumId: 0,
-  url: '',
-  fusionId: 0,
-  title: '',
-  modelType: 'glb',
-  type: SceneType.SWMX,
-  status: SceneStatus.SUCCESS,
-  size: 0,
-  time: new Date().toString(),
-  ...defaultFuseModelAttrs,
-  ...model
-})
-
-export const getFuseModel = (modelId: FuseModel['id']) => fuseModels.value.find(model => model.id === modelId)
-let setModel: FuseModel
-export const getFuseModelShowVariable = (model: FuseModel) => 
+  position: { x: 0, y: 0, z: 0 },
+  rotation: { x: 0, y: 0, z: 0 },
+};
+export const createFuseModels = (model: Partial<FuseModel> = {}): FuseModel =>
+  serviceToLocal({
+    id: createTemploraryID(),
+    modelId: 0,
+    fusionNumId: 0,
+    url: "",
+    fusionId: 0,
+    title: "",
+    modelType: "glb",
+    type: SceneType.SWMX,
+    status: SceneStatus.SUCCESS,
+    size: 0,
+    time: new Date().toString(),
+    ...defaultFuseModelAttrs,
+    ...model,
+  });
+
+export const getFuseModel = (modelId: FuseModel["id"]) =>
+  fuseModels.value.find((model) => model.id === modelId);
+let setModel: FuseModel;
+export const getFuseModelShowVariable = (model: FuseModel) =>
   computed({
     get: () => {
-      return false && custom.modelsChangeStore 
-      ? model.show 
-      : custom.showModelsMap.get(model) || false
+      return false && custom.modelsChangeStore
+        ? model.show
+        : custom.showModelsMap.get(model) || false;
     },
     set: (show: boolean) => {
       if (false && custom.modelsChangeStore) {
-        model.show = show
+        model.show = show;
       } else {
-        setModel = model
-        custom.showModelsMap.set(model, show)
+        setModel = model;
+        custom.showModelsMap.set(model, show);
       }
-    }
-  })
-  
+    },
+  });
 
-watchEffect(() => {
-  fuseModels.value.forEach(item => custom.showModelsMap.get(item))
-}, { flush: 'sync' })
+watchEffect(
+  () => {
+    fuseModels.value.forEach((item) => custom.showModelsMap.get(item));
+  },
+  { flush: "sync" }
+);
 
-export const fuseModelsLoaded = ref(false)
+export const fuseModelsLoaded = ref(false);
 watchPostEffect(() => {
   const loaded = fuseModels.value
-    .filter(model => getFuseModelShowVariable(model).value)
-    .every(model => model.loaded || model.error)
-  fuseModelsLoaded.value = loaded
-})
+    .filter((model) => getFuseModelShowVariable(model).value)
+    .every((model) => model.loaded || model.error);
+  fuseModelsLoaded.value = loaded;
+});
 
-let bcModels: FuseModels = []
-export const getBackupFuseModels = () => bcModels
+let bcModels: FuseModels = [];
+export const getBackupFuseModels = () => bcModels;
 export const backupFuseModels = () => {
-  bcModels = fuseModels.value.map(model => ({
+  bcModels = fuseModels.value.map((model) => ({
     ...model,
-    rotation: {...model.rotation},
-    position: {...model.position},
-  }))
+    rotation: { ...model.rotation },
+    position: { ...model.position },
+  }));
   for (const model of fuseModels.value) {
-    initFuseModel(model)
+    initFuseModel(model);
   }
-}
-watch(fuseModels, () => {
-  for (const model of bcModels) {
-    const newModel = getFuseModel(model.id)
-    if (newModel) {
-      model.progress = newModel.progress
-      model.error = newModel.error
-      model.loaded = newModel.loaded
+};
+watch(
+  fuseModels,
+  () => {
+    for (const model of bcModels) {
+      const newModel = getFuseModel(model.id);
+      if (newModel) {
+        model.progress = newModel.progress;
+        model.error = newModel.error;
+        model.loaded = newModel.loaded;
+      }
     }
-  }
-}, { deep: true })
+  },
+  { deep: true }
+);
 
 const serviceToLocal = (model: SModel): FuseModel => ({
-  ...model, 
+  ...model,
   error: false,
-  loaded: false, 
+  loaded: false,
   progress: 0,
-})
+});
 
 const initFuseModel = (model: FuseModel) => {
-  custom.showModelsMap.has(model) || custom.showModelsMap.set(model, model.show)
-}
+  custom.showModelsMap.has(model) ||
+    custom.showModelsMap.set(model, model.show);
+};
 
 export const recoverFuseModels = () => {
-  const backupItems = getBackupFuseModels()
-  fuseModels.value = backupItems.map(oldItem => {
-    const model = fuseModels.value.find(item => item.id === oldItem.id)
-    return model ? Object.assign(model, oldItem) : serviceToLocal(oldItem)
-  })
-  console.log(backupItems)
-}
-
-export const updateFuseModel = updateStoreItem(fuseModels, postUpdateFuseModels)
+  const backupItems = getBackupFuseModels();
+  fuseModels.value = backupItems.map((oldItem) => {
+    const model = fuseModels.value.find((item) => item.id === oldItem.id);
+    return model ? Object.assign(model, oldItem) : serviceToLocal(oldItem);
+  });
+  console.log(backupItems);
+};
+
+export const updateFuseModel = updateStoreItem(
+  fuseModels,
+  postUpdateFuseModels
+);
 export const deleteFuseModel = deleteStoreItem(fuseModels, async (model) => {
-  await postDeleteFuseModel(model)
-  const index = dynamicAddedModelIds.value.indexOf(model.id)
-  ~index && dynamicAddedModelIds.value.splice(index, 1)
-})
+  await postDeleteFuseModel(model);
+  const index = dynamicAddedModelIds.value.indexOf(model.id);
+  ~index && dynamicAddedModelIds.value.splice(index, 1);
+});
 
 export const addFuseModel = async (model: FuseModel) => {
-  const addModel = reactive(serviceToLocal(await postAddFuseModel(model)))
-  initFuseModel(addModel)
+  const addModel = reactive(serviceToLocal(await postAddFuseModel(model)));
+  initFuseModel(addModel);
   unSetModelUpdate(() => {
-    fuseModels.value.push(addModel)
-    dynamicAddedModelIds.value.push(addModel.id)
-  })
-}
+    fuseModels.value.push(addModel);
+    dynamicAddedModelIds.value.push(addModel.id);
+  });
+};
 
 export const initialFuseModels = fetchStoreItems(
-  fuseModels, 
-  fetchFuseModels, 
+  fuseModels,
+  fetchFuseModels,
   () => {
     for (const model of fuseModels.value) {
-      initFuseModel(model)
+      initFuseModel(model);
     }
-    backupFuseModels()
-  }, 
-  smodels => smodels.map(serviceToLocal),
-)
-export const saveFuseModels = saveStoreItems(
-  fuseModels,
-  getBackupFuseModels,
-  {
-    update: updateFuseModel,
-    delete: deleteFuseModel
-  }
-)
-
+    backupFuseModels();
+  },
+  (smodels) => smodels.map(serviceToLocal)
+);
+export const saveFuseModels = saveStoreItems(fuseModels, getBackupFuseModels, {
+  update: updateFuseModel,
+  delete: deleteFuseModel,
+});
 
 export const autoSaveFuseModels = autoSetModeCallback(fuseModels, {
-  isUpdate: (fuseModels) => 
+  isUpdate: (fuseModels) =>
     deepIsRevise(
-      fuseModels.map(item => ({...item, loaded: true, error: true, progress: 0})), 
-      getBackupFuseModels().map(item => ({...item, loaded: true, error: true, progress: 0}))
+      fuseModels.map((item) => ({
+        ...item,
+        loaded: true,
+        error: true,
+        progress: 0,
+      })),
+      getBackupFuseModels().map((item) => ({
+        ...item,
+        loaded: true,
+        error: true,
+        progress: 0,
+      }))
     ),
   backup: backupFuseModels,
   recovery: recoverFuseModels,
   save: async () => {
-    await saveFuseModels()
+    await saveFuseModels();
 
     // for (const model of bcModels) {
     //   const currentModel = getFuseModel(model.id)
@@ -181,10 +213,7 @@ export const autoSaveFuseModels = autoSetModeCallback(fuseModels, {
     //     custom.showModelsMap.set(currentModel, currentModel.show)
     //   }
     // }
-    
-    await Promise.all([
-      initialTaggings(),
-      initialMeasures()
-    ])
+
+    await Promise.all([initialTaggings(), initialMeasures()]);
   },
-})
+});

src/utils/store-help.ts

@@ -1,216 +1,249 @@
-import { Ref, toRaw } from 'vue'
-import { deepIsRevise } from './diff'
+import { Ref, toRaw } from "vue";
+import { deepIsRevise } from "./diff";
 
 export const storeSecurityPush = <T extends any>(items: T[], pushItem: T) => {
-  const index = items.indexOf(pushItem)
+  const index = items.indexOf(pushItem);
   if (!~index) {
-    items.push(pushItem)
-    return true
+    items.push(pushItem);
+    return true;
   } else {
-    return false
+    return false;
   }
-} 
+};
 export const storeSecurityDelete = <T extends any>(items: T[], pushItem: T) => {
-  const index = items.indexOf(pushItem)
+  const index = items.indexOf(pushItem);
   if (~index) {
-    items.splice(index, 1)
-    return true
+    items.splice(index, 1);
+    return true;
   } else {
-    return false
+    return false;
   }
-} 
+};
 
-export function addStoreItem <T extends {id: any}>(
-  items: Ref<T[]>, 
-  addAction: (item: T) => Promise<T>,
-): (item: T) => Promise<T>
-export function addStoreItem <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
+export function addStoreItem<T extends { id: any }>(
+  items: Ref<T[]>,
+  addAction: (item: T) => Promise<T>
+): (item: T) => Promise<T>;
+export function addStoreItem<T extends { id: any }, K extends { id: any } = T>(
+  items: Ref<T[]>,
   addAction: (item: K) => Promise<K>,
   transform: (item: T) => Promise<K> | K
-): (item: T) => Promise<K>
-export function addStoreItem <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
+): (item: T) => Promise<K>;
+export function addStoreItem<T extends { id: any }, K extends { id: any } = T>(
+  items: Ref<T[]>,
   addAction: (item: K) => Promise<K>,
   transform?: (item: T) => Promise<K> | K
 ) {
   return async (item: T) => {
-    let actionData: K
+    let actionData: K;
     if (transform) {
-      actionData = await transform(item)
+      actionData = await transform(item);
     } else {
-      actionData = item as unknown as K
+      actionData = item as unknown as K;
     }
-    const newItem = await addAction(actionData)
-    const self = items.value.find(findItem => findItem.id === item.id)
+    const newItem = await addAction(actionData);
+    const self = items.value.find((findItem) => findItem.id === item.id);
     if (self) {
-      Object.assign(self, newItem)
+      Object.assign(self, newItem);
     } else {
-      storeSecurityPush(items.value, item)
+      storeSecurityPush(items.value, item);
     }
-    return newItem
-  }
+    return newItem;
+  };
 }
 
-export function updateStoreItem <T extends {id: any}>(
-  items: Ref<T[]>, 
-  updateAction: (item: T, oldItem: T) => Promise<any>,
-): (item: T, oldItem: T) => Promise<void>
-export function updateStoreItem <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
+export function updateStoreItem<T extends { id: any }>(
+  items: Ref<T[]>,
+  updateAction: (item: T, oldItem: T) => Promise<any>
+): (item: T, oldItem: T) => Promise<void>;
+export function updateStoreItem<
+  T extends { id: any },
+  K extends { id: any } = T
+>(
+  items: Ref<T[]>,
   updateAction: (item: K, oldItem: T) => Promise<any>,
   transform: (item: T) => Promise<K> | K
-): (item: T, oldItem: T) => Promise<void>
-export function updateStoreItem <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
+): (item: T, oldItem: T) => Promise<void>;
+export function updateStoreItem<
+  T extends { id: any },
+  K extends { id: any } = T
+>(
+  items: Ref<T[]>,
   updateAction: (item: K, oldItem: T) => Promise<any>,
   transform?: (item: T) => Promise<K> | K
 ) {
   return async (item: T, oldItem: T) => {
-    let actionData: K
+    let actionData: K;
     if (transform) {
-      actionData = await transform(item)
+      actionData = await transform(item);
     } else {
-      actionData = item as unknown as K
+      actionData = item as unknown as K;
     }
-    await updateAction(actionData, oldItem)
-    const storeItem = items.value.find(atom => atom.id === item.id)
+    await updateAction(actionData, oldItem);
+    const storeItem = items.value.find((atom) => atom.id === item.id);
     if (storeItem) {
-      Object.assign(storeItem, item)
+      Object.assign(storeItem, item);
     }
-  }
+  };
 }
 
-export function deleteStoreItem <T extends {id: any}>(
-  items: Ref<T[]>, 
-  deleteAction: (item: T) => Promise<any>,
-): (item: T) => Promise<void>
-export function deleteStoreItem <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
+export function deleteStoreItem<T extends { id: any }>(
+  items: Ref<T[]>,
+  deleteAction: (item: T) => Promise<any>
+): (item: T) => Promise<void>;
+export function deleteStoreItem<
+  T extends { id: any },
+  K extends { id: any } = T
+>(
+  items: Ref<T[]>,
   deleteAction: (item: K) => Promise<any>,
   transform: (item: T) => Promise<K> | K
-): (item: T) => Promise<void>
-export function deleteStoreItem <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
+): (item: T) => Promise<void>;
+export function deleteStoreItem<
+  T extends { id: any },
+  K extends { id: any } = T
+>(
+  items: Ref<T[]>,
   deleteAction: (item: K) => Promise<any>,
   transform?: (item: T) => Promise<K> | K
 ) {
   return async (item: T) => {
-    let actionData: K
+    let actionData: K;
     if (transform) {
-      actionData = await transform(item)
+      actionData = await transform(item);
     } else {
-      actionData = item as unknown as K
+      actionData = item as unknown as K;
     }
-    await deleteAction(actionData)
-    storeSecurityDelete(items.value, item)
-  }
+    await deleteAction(actionData);
+    storeSecurityDelete(items.value, item);
+  };
 }
 
-export function fetchStoreItems <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
-  fetchAction: () => Promise<T[]>, 
-): () => Promise<void>
-export function fetchStoreItems <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
-  fetchAction: () => Promise<T[]>, 
-  callback: (() => void) | null,
-): () => Promise<void>
-export function fetchStoreItems <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
-  fetchAction: () => Promise<K[]>, 
+export function fetchStoreItems<
+  T extends { id: any },
+  K extends { id: any } = T
+>(items: Ref<T[]>, fetchAction: () => Promise<T[]>): () => Promise<void>;
+export function fetchStoreItems<
+  T extends { id: any },
+  K extends { id: any } = T
+>(
+  items: Ref<T[]>,
+  fetchAction: () => Promise<T[]>,
+  callback: (() => void) | null
+): () => Promise<void>;
+export function fetchStoreItems<
+  T extends { id: any },
+  K extends { id: any } = T
+>(
+  items: Ref<T[]>,
+  fetchAction: () => Promise<K[]>,
   callback: (() => void) | null,
-  transform: (items: K[]) => Promise<T[]> | T[],
-): () => Promise<void>
-export function fetchStoreItems <T extends {id: any}, K extends {id: any} = T>(
-  items: Ref<T[]>, 
-  fetchAction: () => Promise<K[]>, 
+  transform: (items: K[]) => Promise<T[]> | T[]
+): () => Promise<void>;
+export function fetchStoreItems<
+  T extends { id: any },
+  K extends { id: any } = T
+>(
+  items: Ref<T[]>,
+  fetchAction: () => Promise<K[]>,
   callback?: (() => void) | null,
-  transform?: (items: K[]) => Promise<T[]> | T[],
+  transform?: (items: K[]) => Promise<T[]> | T[]
 ) {
   return async () => {
-    const fetchItems = await fetchAction()
+    const fetchItems = await fetchAction();
 
-    let actionData: T[]
+    let actionData: T[];
     if (transform) {
-      actionData = await transform(fetchItems)
+      actionData = await transform(fetchItems);
     } else {
-      actionData = fetchItems as unknown as T[]
+      actionData = fetchItems as unknown as T[];
     }
-    items.value = actionData
-    callback && callback()
-  }
+    items.value = actionData;
+    callback && callback();
+  };
 }
 
-export const saveStoreItems = <T extends {id: any}>(
-  newItems: Ref<T[]>,
-  getOldItem: () => T[],
-  actions: {
-    add?: ReturnType<typeof addStoreItem<T>>,
-    update?: ReturnType<typeof updateStoreItem<T>>,
-    delete?: ReturnType<typeof deleteStoreItem<T>>,
-  }
-) => () => {
-  const oldItems = getOldItem()
-  const {
-    deleted,
-    updated,
-    added
-  } = diffStoreItemsChange(newItems.value, oldItems)
+export const saveStoreItems =
+  <T extends { id: any }>(
+    newItems: Ref<T[]>,
+    getOldItem: () => T[],
+    actions: {
+      add?: ReturnType<typeof addStoreItem<T>>;
+      update?: ReturnType<typeof updateStoreItem<T>>;
+      delete?: ReturnType<typeof deleteStoreItem<T>>;
+    }
+  ) =>
+  () => {
+    const oldItems = getOldItem();
+    const { deleted, updated, added } = diffStoreItemsChange(
+      newItems.value,
+      oldItems
+    );
 
-  console.log(deleted, updated, added, newItems.value.length, oldItems.length)
-  const promiseAll: Promise<any>[] = []
-  
-  if (actions.delete) {
-    for (const delItem of deleted) {
-      promiseAll.push(actions.delete(delItem))
+    console.log(
+      deleted,
+      updated,
+      added,
+      newItems.value.length,
+      oldItems.length
+    );
+    const promiseAll: Promise<any>[] = [];
+
+    if (actions.delete) {
+      for (const delItem of deleted) {
+        promiseAll.push(actions.delete(delItem));
+      }
     }
-  }
-  if (actions.update) {
-    for (const [newItem, oldItem] of updated) {
-      promiseAll.push(actions.update(newItem, oldItem))
+    if (actions.update) {
+      for (const [newItem, oldItem] of updated) {
+        promiseAll.push(actions.update(newItem, oldItem));
+      }
     }
-  }
-  if (actions.add) {
-    for (const addItem of added) {
-      promiseAll.push(actions.add(addItem))
+    if (actions.add) {
+      for (const addItem of added) {
+        promiseAll.push(actions.add(addItem));
+      }
     }
-  }
-  return Promise.all(promiseAll)
-}
+    return Promise.all(promiseAll);
+  };
 
-export const diffStoreItemsChange = <T extends Array<{ id: any }>>(newItems: T, oldItems: T) => {
-  const addedItems = [] as unknown as T
-  const deletedItems = [] as unknown as T
-  const updateItems = [] as unknown as [T[number], T[number]][]
-  newItems = toRaw(newItems)
+export const diffStoreItemsChange = <T extends Array<{ id: any }>>(
+  newItems: T,
+  oldItems: T
+) => {
+  const addedItems = [] as unknown as T;
+  const deletedItems = [] as unknown as T;
+  const updateItems = [] as unknown as [T[number], T[number]][];
+  newItems = toRaw(newItems);
   for (const newItem of newItems) {
-    const oldItem = oldItems.find(oldItem => newItem.id === oldItem.id)
+    const oldItem = oldItems.find((oldItem) => newItem.id === oldItem.id);
     if (!oldItem) {
-      storeSecurityPush(addedItems, newItem)
+      storeSecurityPush(addedItems, newItem);
     } else if (deepIsRevise(oldItem, newItem)) {
-      storeSecurityPush(updateItems, [newItem, oldItem] as any)
+      storeSecurityPush(updateItems, [newItem, oldItem] as any);
     }
   }
 
   for (const oldItem of oldItems) {
-    const newItem = newItems.find(newItem => newItem.id === oldItem.id)
+    const newItem = newItems.find((newItem) => newItem.id === oldItem.id);
     if (!newItem) {
-      storeSecurityPush(deletedItems, oldItem)
+      storeSecurityPush(deletedItems, oldItem);
     }
   }
 
   return {
     added: addedItems,
     deleted: deletedItems,
-    updated: updateItems
-  }
-}
+    updated: updateItems,
+  };
+};
 
-export const recoverStoreItems = <T extends Array<{ id: any }>>(items: Ref<T>, getBackupItems: () => T) => () => {
-  const backupItems = getBackupItems()
-  items.value = backupItems.map(oldItem => {
-    const model = items.value.find(item => item.id === oldItem.id)
-    return model ? Object.assign(model, oldItem) : oldItem
-  }) as T
-}
+export const recoverStoreItems =
+  <T extends Array<{ id: any }>>(items: Ref<T>, getBackupItems: () => T) =>
+  () => {
+    const backupItems = getBackupItems();
+    items.value = backupItems.map((oldItem) => {
+      const model = items.value.find((item) => item.id === oldItem.id);
+      return model ? Object.assign(model, oldItem) : oldItem;
+    }) as T;
+  };

src/views/setting/index.vue

@@ -9,7 +9,7 @@
       </ui-group-option>
     </ui-group>
 
-    <ui-group title="设置天空">
+    <!-- <ui-group title="设置天空">
       <ui-group-option>
         <div class="back-layout">
           <div
@@ -26,7 +26,7 @@
           </div>
         </div>
       </ui-group-option>
-    </ui-group>
+    </ui-group> -->
   </RightFillPano>
 </template>
 
@@ -174,6 +174,7 @@ const changeBack = (back: string) => {
     transition: all 0.3s;
     border-radius: 4px;
   }
+
   .iconfont {
     display: flex;
     align-items: center;

src/views/tagging-position/index.vue

@@ -1,9 +1,9 @@
 <template>
   <RightFillPano>
     <ui-group :title="`${tagging?.title}放置位置`" class="position-group">
-      <PositionSign 
-        v-for="(position, i) in positions" 
-        :key="position.id" 
+      <PositionSign
+        v-for="(position, i) in positions"
+        :key="position.id"
         :position="position"
         :title="`位置${i + 1}`"
         @delete="deletePosition(position)"
@@ -13,104 +13,102 @@
   </RightFillPano>
 </template>
 
-
 <script lang="ts" setup>
-import PositionSign from './sign.vue'
-import { router } from '@/router'
-import { Message } from 'bill/index'
-import { RightFillPano } from '@/layout'
-import { asyncTimeout } from '@/utils'
-import { useViewStack } from '@/hook'
-import { computed, nextTick, ref, watchEffect } from 'vue';
-import { sdk } from '@/sdk'
-import { showTaggingPositionsStack } from '@/env'
-import { 
-  autoSaveTaggings, 
+import PositionSign from "./sign.vue";
+import { router } from "@/router";
+import { Message } from "bill/index";
+import { RightFillPano } from "@/layout";
+import { asyncTimeout } from "@/utils";
+import { useViewStack } from "@/hook";
+import { computed, nextTick, ref, watchEffect } from "vue";
+import { sdk } from "@/sdk";
+import { showTaggingPositionsStack } from "@/env";
+import {
+  autoSaveTaggings,
   getFuseModel,
   getFuseModelShowVariable,
   getTaggingPositions,
   taggingPositions,
   createTaggingPosition,
   getTagging,
-  enterEdit
-} from '@/store'
+  enterEdit,
+} from "@/store";
 
-import type { TaggingPosition } from '@/store'
-import { distance } from '@/utils/math'
+import type { TaggingPosition } from "@/store";
+import { distance } from "@/utils/math";
 
-const tagging = computed(() => getTagging(router.currentRoute.value.params.id as string))
-const positions = computed(() => tagging.value && getTaggingPositions(tagging.value))
+const tagging = computed(() => getTagging(router.currentRoute.value.params.id as string));
+const positions = computed(() => tagging.value && getTaggingPositions(tagging.value));
 
 const flyTaggingPosition = (position: TaggingPosition) => {
-  const model = getFuseModel(position.modelId)
+  const model = getFuseModel(position.modelId);
   if (!model || !getFuseModelShowVariable(model).value) {
     return;
   }
-  
-  const pop = showTaggingPositionsStack.push(ref(new WeakSet([position])))
-  sdk.comeTo({ 
-    position: position.localPos, 
+
+  const pop = showTaggingPositionsStack.push(ref(new WeakSet([position])));
+  sdk.comeTo({
+    position: position.localPos,
     modelId: position.modelId,
     dur: 300,
-    distance: 3
-  })
-  
-  setTimeout(pop, 2000)
-}
+    distance: 3,
+  });
+
+  setTimeout(pop, 2000);
+};
 
 const deletePosition = (position: TaggingPosition) => {
-  const index = taggingPositions.value.indexOf(position)
+  const index = taggingPositions.value.indexOf(position);
   if (~index) {
-    taggingPositions.value.splice(index, 1)
+    taggingPositions.value.splice(index, 1);
   }
-}
+};
 
-const cameraPos = ref<SceneLocalPos>()
-sdk.sceneBus.on('cameraChange', pos => cameraPos.value = pos)
+const cameraPos = ref<SceneLocalPos>();
+sdk.sceneBus.on("cameraChange", (pos) => (cameraPos.value = pos));
 
 watchEffect((onCleanup) => {
   if (tagging.value) {
     const clickHandler = async (ev: MouseEvent) => {
-      await nextTick()
-      await asyncTimeout()
+      await nextTick();
+      await asyncTimeout();
       const position = sdk.getPositionByScreen({
         x: ev.clientX,
-        y: ev.clientY
-      })
+        y: ev.clientY,
+      });
 
       if (!position) {
-        Message.error('当前位置无法添加')
+        Message.error("当前位置无法添加");
       } else {
         const storePosition = createTaggingPosition({
           ...position,
-          taggingId: tagging.value!.id
-        })
-        taggingPositions.value.push(storePosition)
-        
-        
+          taggingId: tagging.value!.id,
+        });
+        taggingPositions.value.push(storePosition);
+
         if (cameraPos.value && distance(cameraPos.value, position.worldPos) > 8) {
-          flyTaggingPosition(storePosition)
+          flyTaggingPosition(storePosition);
         }
       }
-    }
-    sdk.layout.addEventListener('click', clickHandler, false)
+    };
+    sdk.layout.addEventListener("click", clickHandler, false);
 
     onCleanup(() => {
-      sdk.layout.removeEventListener('click', clickHandler, false);
-    })
+      sdk.layout.removeEventListener("click", clickHandler, false);
+    });
   }
-})
-useViewStack(autoSaveTaggings)
+});
+useViewStack(autoSaveTaggings);
 useViewStack(() => {
-  const hide = Message.show({ msg: '请在模型上单击选择标注位置', type: 'warning' })
-  enterEdit(() => router.back())
-  return hide
-})
+  const hide = Message.show({ msg: "请在模型上单击选择标注位置", type: "warning" });
+  enterEdit(() => router.back());
+  return hide;
+});
 </script>
 
 <style lang="scss" scoped src="./style.scss"></style>
 <style lang="scss">
-.position-group .group-title{
+.position-group .group-title {
   margin-bottom: 0;
 }
-</style>
+</style>