fix: 1

src/app.vue

@@ -1,9 +1,9 @@
 <template>
-  <ui-editor-layout 
-    @click.stop 
-    id="layout-app" 
-    class="editor-layout" 
-    :style="layoutStyles" 
+  <ui-editor-layout
+    @click.stop
+    id="layout-app"
+    class="editor-layout"
+    :style="layoutStyles"
     :class="layoutClassNames"
   >
     <div :ref="el => appEl = (el as HTMLDivElement)" v-if="loaded">
@@ -15,74 +15,76 @@
     </div>
   </ui-editor-layout>
 
-
   <PwdModel v-if="inputPwd" @close="inputPwd = false" />
 </template>
 
 <script lang="ts" setup>
-import { custom, params } from '@/env'
-import { computed, ref, watch, watchEffect, nextTick } from 'vue'
-import { isEdit, prefix, appEl, initialSetting, caseProject, refreshCase } from '@/store'
-import router, { currentLayout, RoutesName } from './router';
-import { loadPack } from '@/utils'
-import PwdModel from '@/layout/pwd.vue'
-
-const loaded = ref(false)
-const inputPwd = ref(false)
-const stopWatch = watch(currentLayout, async (layout) => {
-  if (!layout) {
-    return;
-  } else if (layout === RoutesName.signModel || layout === RoutesName.error) {
+import { custom, params } from "@/env";
+import { computed, ref, watch, watchEffect, nextTick } from "vue";
+import { isEdit, prefix, appEl, initialSetting, caseProject, refreshCase } from "@/store";
+import router, { currentLayout, RoutesName } from "./router";
+import { loadPack } from "@/utils";
+import PwdModel from "@/layout/pwd.vue";
+
+const loaded = ref(false);
+const inputPwd = ref(false);
+const stopWatch = watch(
+  currentLayout,
+  async (layout) => {
+    if (!layout) {
+      return;
+    } else if (layout === RoutesName.signModel || layout === RoutesName.error) {
+      loaded.value = true;
+      return;
+    }
+
+    // 单页面 非自己查看需要密码校验
+    if (currentLayout.value === RoutesName.show && !params.share) {
+      inputPwd.value = true;
+      await new Promise<void>((resolve) => {
+        const stopInputWatch = watchEffect(() => {
+          if (!inputPwd.value) {
+            stopInputWatch();
+            resolve();
+          }
+        });
+      });
+    }
+
+    params.share = true;
+    await refreshCase();
+    if (caseProject.value) {
+      await loadPack(initialSetting);
+      prefix.value = caseProject.value!.caseTitle;
+    } else {
+      await router.replace({ name: RoutesName.error });
+    }
+    stopWatch();
     loaded.value = true;
-    return;
-  }
-
-  // 单页面 非自己查看需要密码校验
-  if (currentLayout.value === RoutesName.show && !params.share) {
-    inputPwd.value = true
-    await new Promise<void>(resolve => {
-      const stopInputWatch = watchEffect(() => {
-        if (!inputPwd.value) {
-          stopInputWatch()
-          resolve()
-        }
-      })
-    })
-  }
-
-  params.share = true
-  await refreshCase()
-  if (caseProject.value) {
-    await loadPack(initialSetting)
-    prefix.value = caseProject.value!.caseTitle
-  } else {
-    await router.replace({name: RoutesName.error})
-  }
-  stopWatch()
-  loaded.value = true
-  console.log(loaded.value)
-}, { immediate: true })
+    console.log(loaded.value);
+  },
+  { immediate: true }
+);
 
 const layoutClassNames = computed(() => {
   return {
     [`sys-view-${custom.viewMode}`]: true,
-    'edit-mode': isEdit.value || custom.showToolbar,
-    'setting-mode': custom.showToolbar,
-    'hide-right-box-mode': !custom.showRightPano,
-    'hide-left-box-mode': !custom.showLeftPano,
-    'show-bottom-box-mode': custom.showBottomBar,
-    'hide-top-bar-mode': !custom.showHeadBar
-  }
-})
+    "edit-mode": isEdit.value || custom.showToolbar,
+    "setting-mode": custom.showToolbar,
+    "hide-right-box-mode": !custom.showRightPano,
+    "hide-left-box-mode": !custom.showLeftPano,
+    "show-bottom-box-mode": custom.showBottomBar,
+    "hide-top-bar-mode": !custom.showHeadBar,
+  };
+});
 
 const layoutStyles = computed(() => {
-  const styles: {[key in string]: string} = {}
+  const styles: { [key in string]: string } = {};
   if (custom.showBottomBar) {
-    styles['--editor-menu-bottom'] = custom.bottomBarHeight
+    styles["--editor-menu-bottom"] = custom.bottomBarHeight;
   }
-
-  return styles
-})
+  return styles;
+});
 </script>
 
 <style scoped lang="scss">
@@ -98,13 +100,11 @@ const layoutStyles = computed(() => {
   --search-left: 52px;
 }
 
-
 .sys-view-auto {
   --header-top: var(--show-header-top);
   --search-left: 0px;
 }
 
-
 .hide-top-bar-mode {
   --header-top: var(--hide-header-top);
 }
@@ -114,7 +114,9 @@ const layoutStyles = computed(() => {
 }
 
 .hide-left-box-mode {
-  --left-pano-left: calc(var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)) !important;
+  --left-pano-left: calc(
+    var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)
+  ) !important;
 }
 .edit-mode {
   --editor-menu-left: calc(-1 * var(--editor-menu-width));

src/views/guide/edit-paths.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="video">
+  <div class="video" ref="videoRef">
     <div class="overflow">
       <ui-icon
         ctrl
@@ -100,13 +100,15 @@ import {
 } from "@/store";
 import { Dialog, Message } from "bill/index";
 import { useViewStack } from "@/hook";
-import { nextTick, ref, toRaw, watchEffect } from "vue";
+import { nextTick, onUnmounted, ref, toRaw, watch, watchEffect } from "vue";
 import {
   showRightPanoStack,
   showLeftCtrlPanoStack,
+  bottomBarHeightStack,
   showLeftPanoStack,
   showRightCtrlPanoStack,
   getResource,
+  custom,
 } from "@/env";
 
 import type { Guide, GuidePaths, GuidePath } from "@/store";
@@ -229,6 +231,24 @@ watchEffect(async () => {
     });
   }
 });
+
+const videoRef = ref<HTMLDivElement>();
+watch(
+  () => ({ dom: videoRef.value, len: paths.value.length }),
+  ({ dom }, _, onCleanup) => {
+    if (dom) {
+      const timeout = setTimeout(() => {
+        custom.showBottomBar = true;
+        custom.bottomBarHeight = dom.offsetHeight + "px";
+      }, 100);
+      onCleanup(() => clearTimeout(timeout));
+    }
+  },
+  { flush: "post", immediate: true }
+);
+onUnmounted(() => {
+  custom.bottomBarHeight = "0px";
+});
 </script>
 
 <style lang="scss" scoped>