fix: 1

src/hook/ids.ts

@@ -1,7 +1,7 @@
 import { diffArrayChange } from "@/utils";
 import { computed, ref, Ref, watch } from "vue";
 
-export const useSelects = <T extends { id: any }>(items: Ref<T[]>) => {
+export const useSelects = <T extends { id: any }>(items: Ref<T[]>, test = false) => {
   const selects = ref<T[]>([]);
 
   const updateSelect = (item: T, select: boolean) => {

src/sdk/association/animation.ts

@@ -121,12 +121,14 @@ export const addFrame = (
     ([map, exists]) => {
       if (!map.am) return;
       if (exists && !map.frames[data.id]) {
+
         map.frames[data.id] = map.am.addFrame(data);
       } else if (!exists && map.frames[data.id]) {
         map.frames[data.id].destroy();
         delete map.frames[data.id];
       }
-    }
+    },
+    {immediate: true}
   );
 
   const stopAttrib = mergeFuns(() =>
@@ -180,7 +182,9 @@ export const addAction = (
         map.actions[data.id].destroy();
         delete map.actions[data.id];
       }
-    }
+    },
+
+    {immediate: true}
   );
 
   const stopAttrib = mergeFuns(
@@ -242,7 +246,8 @@ export const addPath = (
         map.paths[data.id].destroy();
         delete map.paths[data.id];
       }
-    }
+    },
+    {immediate: true}
   );
 
   const stopAttrib = mergeFuns(
@@ -307,7 +312,9 @@ export const addSubtitle = (data: AnimationModelSubtitle) => {
         map.subtitles[data.id]();
         delete map.subtitles[data.id];
       }
-    }
+    },
+
+    {immediate: true}
   );
 
   const stopAttrib = mergeFuns(

src/sdk/sdk.ts

@@ -382,7 +382,7 @@ export type AnimationModel3D = {
   // 销毁动画模型
   destroy: () => void;
   // 更改动画模型可见性
-  changeShow: (show: boolean) => void;
+  changeSelect: (show: boolean) => void;
   // 更改动画可见范围  不传为全局可见
   changeVisibilityRange: (range?: number) => void;
   // 更改模型名称

src/views/animation/index.vue

@@ -48,9 +48,10 @@ import { computed, nextTick, reactive, ref, watch, watchEffect } from "vue";
 import { Active } from "./type";
 import { getAddTLItemAttr } from "@/components/drawing-time-line/check";
 import { Message } from "bill/expose-common";
-import { uuid } from "@/components/drawing/hook";
+import { mergeFuns, uuid } from "@/components/drawing/hook";
 import { title } from "./type";
 import { amMap, getAMKey, currentTime } from "@/sdk/association/animation";
+import { AnimationModel3D } from "@/sdk";
 
 enterEdit(() => router.back());
 initialAnimationModels();
@@ -138,9 +139,28 @@ const add = <T extends Active["key"]>(
   }
 };
 
+const asyncOper = (item: AnimationModel, oper: (obj: AnimationModel3D) => void) => {
+  let onCleanup = () => {};
+  if (amMap[getAMKey(item)]?.am) {
+    oper(amMap[getAMKey(item)]!.am!);
+  } else {
+    onCleanup = watchEffect(() => {
+      if (amMap[getAMKey(item)]?.am!) {
+        oper(amMap[getAMKey(item)]!.am!);
+        onCleanup && onCleanup();
+      }
+    });
+  }
+  return onCleanup;
+};
+
+let cleanSelect: (() => void) | null = null;
 const changeSelect = ({ select, unSelect }: Record<string, AnimationModel[]>) => {
-  select.forEach((item) => amMap[getAMKey(item)].am?.changeShow(true));
-  unSelect.forEach((item) => amMap[getAMKey(item)].am?.changeShow(false));
+  cleanSelect && cleanSelect();
+  cleanSelect = mergeFuns(
+    ...select.map((item) => asyncOper(item, (am) => am.changeSelect(true))),
+    ...unSelect.map((item) => asyncOper(item, (am) => am.changeSelect(false)))
+  );
 };
 
 const deleteAm = (am: AnimationModel) => {

src/views/animation/left.vue

@@ -45,7 +45,7 @@ import { LeftPano } from "@/layout";
 import { selectMaterials } from "@/components/materials/quisk";
 import { moundLeftPanoStack, showLeftPanoStack } from "@/env";
 import { togetherCallback } from "@/utils";
-import { ref, watch } from "vue";
+import { ref, watch, watchEffect } from "vue";
 import { TabPane, Tabs } from "ant-design-vue";
 import { ams, AnimationModel, createAnimationModel } from "@/store/animation";
 import { useSelects } from "@/hook/ids";
@@ -68,10 +68,12 @@ const emit = defineEmits<{
 }>();
 
 const activeKey = ref("model");
-const { updateSelect, selects: selectAMs, unSelects } = useSelects(ams);
+const { updateSelect, selects: selectAMs, unSelects } = useSelects(ams, true);
+watchEffect(() => {
+  emit("changeSelect", { select: selectAMs.value, unSelect: unSelects.value });
+});
 const updateSelectAm = (item: AnimationModel, select: boolean) => {
   updateSelect(item, select);
-  emit("changeSelect", { select: selectAMs.value, unSelect: unSelects.value });
 };
 
 if (import.meta.env.DEV) {