|
@@ -1,5 +1,9 @@
|
|
|
<template>
|
|
|
- <ui-group-option class="sign-guide">
|
|
|
+ <ui-group-option
|
|
|
+ :class="`sign-guide ${focus ? 'active' : ''}`"
|
|
|
+ @mouseleave="leaveHandler"
|
|
|
+ @mouseenter="enterHandler"
|
|
|
+ >
|
|
|
<div class="info">
|
|
|
<div class="guide-cover">
|
|
|
<span class="img">
|
|
@@ -30,8 +34,8 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { Path } from "@/store";
|
|
|
-import { playSceneGuide } from "@/sdk";
|
|
|
-import { playScenePath } from "@/sdk/association/path";
|
|
|
+import { getPathNode, playScenePath } from "@/sdk/association/path";
|
|
|
+import { computed, ref, watchEffect } from "vue";
|
|
|
|
|
|
const props = withDefaults(defineProps<{ path: Path; edit?: boolean }>(), {
|
|
|
edit: true,
|
|
@@ -50,6 +54,24 @@ const actions = {
|
|
|
edit: () => emit("edit"),
|
|
|
delete: () => emit("delete"),
|
|
|
};
|
|
|
+
|
|
|
+const focus = ref(false);
|
|
|
+const node = computed(() => getPathNode(props.path.id));
|
|
|
+watchEffect((onCleanup) => {
|
|
|
+ if (!node.value) return;
|
|
|
+ const $node = node.value;
|
|
|
+ const focusHandler = (f: boolean) => (focus.value = f);
|
|
|
+ $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);
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -58,11 +80,21 @@ const actions = {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 20px 0;
|
|
|
+ margin-bottom: 0;
|
|
|
border-bottom: 1px solid var(--colors-border-color);
|
|
|
+ position: relative;
|
|
|
&:first-child {
|
|
|
border-top: 1px solid var(--colors-border-color);
|
|
|
}
|
|
|
|
|
|
+ &.active::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ pointer-events: none;
|
|
|
+ inset: 0 -20px;
|
|
|
+ background-color: rgba(0, 200, 175, 0.16);
|
|
|
+ }
|
|
|
+
|
|
|
.info {
|
|
|
flex: 1;
|
|
|
|