fix: 1

src/layout/bottom-pano.vue

@@ -0,0 +1,18 @@
+<template>
+  {{ custom.showBottomBar }}
+  <ui-editor-toolbar toolbar class="animation-toolbar" v-if="custom.showBottomBar">
+    <slot />
+  </ui-editor-toolbar>
+</template>
+
+<script setup lang="ts">
+import { custom } from "@/env";
+</script>
+
+<style>
+.animation-toolbar {
+  height: var(--bottom-height);
+  width: 100vw;
+  display: block;
+}
+</style>

src/sdk/sdk.ts

@@ -381,6 +381,7 @@ export type AnimationGroup = {
 export type AnimationModel3D = {
   // 销毁动画模型
   destroy: () => void;
+  changeShow: (focus: boolean) => void
   // 更改动画模型可见性
   changeSelect: (show: boolean) => void;
   // 更改动画可见范围  不传为全局可见
@@ -423,6 +424,7 @@ export type AnimationModel3D = {
   // 动画帧姿态修改数据
   bus: Emitter<{
     loadDone: void
+    changeSelect: boolean;
     transformChanged: {
       position?: SceneLocalPos;
       scale?: number;

src/utils/full.ts

@@ -1,4 +1,4 @@
-import { showLeftPanoStack, showPathsStack, showPathStack, viewModeStack } from "@/env";
+import { showBottomBarStack, showLeftPanoStack, showPathsStack, showPathStack, viewModeStack } from "@/env";
 import { togetherCallback } from ".";
 import { ref, watch } from "vue";
 import { isEdit, sysBus } from "@/store";
@@ -8,6 +8,7 @@ export const fullView = async (fn: () => void) => {
   const popViewMode = togetherCallback([
     viewModeStack.push(ref("full")),
     showLeftPanoStack.push(ref(false)),
+    showBottomBarStack.push(ref(false))
   ]);
   let isFull = false;
   currentIsFullView.value = false

src/views/animation/bottom.vue

@@ -1,5 +1,4 @@
 <template>
-  <ui-editor-toolbar toolbar class="animation-toolbar">
     <div class="top-bar">
       <div class="play-bar">
         <ui-icon
@@ -80,7 +79,6 @@
         </v-group>
       </Renderer>
     </div>
-  </ui-editor-toolbar>
 </template>
 
 <script lang="ts" setup>

src/views/animation/index.vue

@@ -20,13 +20,14 @@
       @add-action="(preset) => add('actions', preset)"
       @apply-global="k => ams.forEach((am: any) => (am[k] = focusAM![k]))"
     />
-    <Bottom
-      :am="focusAM"
-      v-model:follow="follow"
-      v-model:current-time="currentTime"
-      class="animation-toolbar"
-      v-model:active="activeAttrib"
-    />
+    <BottomPano>
+      <Bottom
+        :am="focusAM"
+        v-model:follow="follow"
+        v-model:current-time="currentTime"
+        v-model:active="activeAttrib"
+      />
+    </BottomPano>
   </div>
 </template>
 
@@ -34,6 +35,7 @@
 import Left from "./left.vue";
 import Right from "./right/index.vue";
 import Bottom from "./bottom.vue";
+import BottomPano from "@/layout/bottom-pano.vue";
 import router from "@/router";
 import { enterEdit } from "@/store";
 import { useViewStack } from "@/hook";
@@ -52,11 +54,13 @@ import { mergeFuns, uuid } from "@/components/drawing/hook";
 import { title } from "./type";
 import { amMap, getAMKey, currentTime } from "@/sdk/association/animation";
 import { AnimationModel3D } from "@/sdk";
+import { bottomBarHeightStack, showBottomBarStack } from "@/env";
 
 enterEdit(() => router.back());
 initialAnimationModels();
 initAnimationActions();
 useViewStack(autoSaveAnimationModel);
+useViewStack(() => showBottomBarStack.push(ref(true)));
 
 const focusAM = ref<AnimationModel>();
 const activeAttrib = ref<Active>();
@@ -66,6 +70,21 @@ const frameAction = ref<string>();
 
 const amM = computed(() => focusAM.value && amMap[getAMKey(focusAM.value)]);
 
+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;
+};
+
 watchEffect((onCleanup) => {
   if (!amM.value || activeAttrib.value?.key !== "frames") return;
   const frame = focusAM.value!.frames[activeAttrib.value.ndx];
@@ -91,10 +110,34 @@ watchEffect((onCleanup) => {
 });
 
 const updateFocus = (am?: AnimationModel) => {
+  if (focusAM.value) {
+    asyncOper(focusAM.value, (item) => {
+      item.changeSelect(false);
+    });
+  }
   activeAttrib.value = undefined;
   focusAM.value = am;
+  am && asyncOper(am, (item) => item.changeSelect(true));
 };
 
+watchEffect((onCleanup) => {
+  onCleanup(
+    mergeFuns(
+      ams.value.map((item) => {
+        return asyncOper(item, (s) =>
+          s.bus.on("changeSelect", (f) => {
+            if (f) {
+              focusAM.value = item;
+            } else if (focusAM.value === item) {
+              focusAM.value = undefined;
+            }
+          })
+        );
+      })
+    )
+  );
+});
+
 watch(activeAttrib, (_a, _b, onCleanup) => {
   if (!activeAttrib.value) return;
   const cur = focusAM.value![activeAttrib.value.key][activeAttrib.value.ndx];
@@ -139,27 +182,19 @@ 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[]>) => {
   cleanSelect && cleanSelect();
   cleanSelect = mergeFuns(
-    ...select.map((item) => asyncOper(item, (am) => am.changeSelect(true))),
-    ...unSelect.map((item) => asyncOper(item, (am) => am.changeSelect(false)))
+    ...select.map((item) => asyncOper(item, (am) => am.changeShow(true))),
+    ...unSelect.map((item) =>
+      asyncOper(item, (am) => {
+        if (item === focusAM.value) {
+          focusAM.value = undefined;
+        }
+        am.changeShow(false);
+      })
+    )
   );
 };
 
@@ -194,10 +229,9 @@ const deleteAm = (am: AnimationModel) => {
   right: 0;
   top: 0;
 }
-
-.animation-toolbar {
-  height: var(--bottom-height);
-  width: 100vw;
-  display: block;
+</style>
+<style>
+.animation-left .left-pano {
+  bottom: 0 !important;
 }
 </style>