fix: 1

src/views/guide/path/sign.vue

@@ -1,8 +1,7 @@
 <template>
   <ui-group-option
     :class="`sign-guide ${focus ? 'active' : ''}`"
-    @mouseleave="leaveHandler"
-    @mouseenter="enterHandler"
+    @click.stop="clickHandler"
   >
     <div class="info">
       <div class="guide-cover">
@@ -22,7 +21,7 @@
         <p>{{ path.name }}</p>
       </div>
     </div>
-    <div class="actions" v-if="edit">
+    <div class="actions" v-if="edit" @click.stop>
       <ui-more
         :options="menus"
         style="margin-left: 20px"
@@ -35,7 +34,8 @@
 <script setup lang="ts">
 import { Path } from "@/store";
 import { getPathNode, playScenePath } from "@/sdk/association/path";
-import { computed, ref, watchEffect } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
+import { custom } from "@/env";
 
 const props = withDefaults(defineProps<{ path: Path; edit?: boolean }>(), {
   edit: true,
@@ -55,22 +55,24 @@ const actions = {
   delete: () => emit("delete"),
 };
 
-const focus = ref(false);
+const focus = computed(() => custom.showPath === props.path.id);
 const node = computed(() => getPathNode(props.path.id));
 watchEffect((onCleanup) => {
   if (!node.value) return;
   const $node = node.value;
-  const focusHandler = (f: boolean) => (focus.value = f);
+  const focusHandler = (f: boolean) => {
+    console.log("focus", f);
+    custom.showPath = f ? props.path.id : void 0;
+  };
   $node.bus.on("focus", focusHandler);
   onCleanup(() => $node.bus.off("focus", focusHandler));
 });
-const leaveHandler = () => {
-  focus.value = false;
-  // node.value?.focus(false);
-};
-const enterHandler = () => {
-  focus.value = true;
-  // node.value?.focus(true);
+
+const clickHandler = () => {
+  const focus = !(props.path.id === custom.showPath);
+  custom.showPath = focus ? props.path.id : void 0;
+  console.log(node.value);
+  node.value?.focus(focus);
 };
 </script>
 
@@ -83,6 +85,7 @@ const enterHandler = () => {
   margin-bottom: 0;
   border-bottom: 1px solid var(--colors-border-color);
   position: relative;
+  cursor: pointer;
   &:first-child {
     border-top: 1px solid var(--colors-border-color);
   }