feat(KeyObservation): add observation setting button

src/components/keyboard/KeyObservation.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useGlobalStore } from "../../store/global";
-import { NIcon } from "naive-ui";
-import { Eye } from "@vicons/ionicons5";
+import { NIcon, NButton, NFormItem, NInput, NH4, NInputNumber } from "naive-ui";
+import { Eye, CloseCircle, Settings } from "@vicons/ionicons5";
+import { KeyObservation } from "../../keyMappingConfig";
 
 const emit = defineEmits<{
   edit: [];
@@ -13,14 +14,23 @@ const props = defineProps<{
 }>();
 
 const activeIndex = defineModel("activeIndex", { required: true });
+const showButtonSettingFlag = defineModel("showButtonSettingFlag", {
+  required: true,
+});
 
 const store = useGlobalStore();
 const elementRef = ref<HTMLElement | null>(null);
 
+const isActive = computed(() => props.index === activeIndex.value);
+const keyMapping = computed(
+  () => store.editKeyMappingList[props.index] as KeyObservation
+);
+
 function dragHandler(downEvent: MouseEvent) {
   activeIndex.value = props.index;
-  const oldX = store.editKeyMappingList[props.index].posX;
-  const oldY = store.editKeyMappingList[props.index].posY;
+  showButtonSettingFlag.value = false;
+  const oldX = keyMapping.value.posX;
+  const oldY = keyMapping.value.posY;
   const element = elementRef.value;
   if (element) {
     const keyboardElement = document.getElementById(
@@ -36,42 +46,106 @@ function dragHandler(downEvent: MouseEvent) {
       let newY = oldY + moveEvent.clientY - y;
       newX = Math.max(0, Math.min(newX, maxX));
       newY = Math.max(0, Math.min(newY, maxY));
-      store.editKeyMappingList[props.index].posX = newX;
-      store.editKeyMappingList[props.index].posY = newY;
+      keyMapping.value.posX = newX;
+      keyMapping.value.posY = newY;
     };
     window.addEventListener("mousemove", moveHandler);
     const upHandler = () => {
       window.removeEventListener("mousemove", moveHandler);
       window.removeEventListener("mouseup", upHandler);
-      if (
-        oldX !== store.editKeyMappingList[props.index].posX ||
-        oldY !== store.editKeyMappingList[props.index].posY
-      ) {
+      if (oldX !== keyMapping.value.posX || oldY !== keyMapping.value.posY) {
         emit("edit");
       }
     };
     window.addEventListener("mouseup", upHandler);
   }
 }
+
+function delCurKeyMapping() {
+  emit("edit");
+  activeIndex.value = -1;
+  store.editKeyMappingList.splice(props.index, 1);
+}
 </script>
 
 <template>
   <div
-    :class="{ active: props.index === activeIndex }"
+    :class="{ active: isActive }"
     :style="{
-      left: `${store.editKeyMappingList[props.index].posX - 30}px`,
-      top: `${store.editKeyMappingList[props.index].posY - 30}px`,
+      left: `${keyMapping.posX - 30}px`,
+      top: `${keyMapping.posY - 30}px`,
     }"
     @mousedown="dragHandler"
     class="key-observation"
     ref="elementRef"
   >
-    <NIcon size="25"><Eye style="color: var(--blue-color)" /></NIcon>
-    <span>{{ store.editKeyMappingList[props.index].key }}</span>
+    <NIcon size="25"><Eye /></NIcon>
+    <span>{{ keyMapping.key }}</span>
+    <NButton
+      class="key-close-btn"
+      text
+      @click="delCurKeyMapping"
+      :type="isActive ? 'primary' : 'info'"
+    >
+      <template #icon>
+        <NIcon size="15">
+          <CloseCircle />
+        </NIcon>
+      </template>
+    </NButton>
+    <NButton
+      class="key-setting-btn"
+      text
+      @click="showButtonSettingFlag = true"
+      :type="isActive ? 'primary' : 'info'"
+    >
+      <template #icon>
+        <NIcon size="15">
+          <Settings />
+        </NIcon>
+      </template>
+    </NButton>
+  </div>
+  <div
+    class="key-setting"
+    v-if="isActive && showButtonSettingFlag"
+    :style="{
+      left: `${keyMapping.posX + 25}px`,
+      top: `${keyMapping.posY - 45}px`,
+    }"
+  >
+    <NH4 prefix="bar">观察视角</NH4>
+    <NFormItem label="灵敏度">
+      <NInputNumber
+        v-model:value="keyMapping.scale"
+        placeholder="请输入灵敏度"
+        :step="0.1"
+        @update:value="emit('edit')"
+      />
+    </NFormItem>
+    <NFormItem label="备注">
+      <NInput
+        v-model:value="keyMapping.note"
+        placeholder="请输入备注"
+        @update:value="emit('edit')"
+      />
+    </NFormItem>
   </div>
 </template>
 
 <style scoped lang="scss">
+.key-setting {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 20px;
+  width: 100px;
+  border-radius: 5px;
+  border: 2px solid var(--light-color);
+  background-color: var(--bg-color);
+  z-index: 3;
+}
+
 .key-observation {
   position: absolute;
   height: 60px;
@@ -86,13 +160,39 @@ function dragHandler(downEvent: MouseEvent) {
   font-weight: bold;
   cursor: pointer;
 
+  .n-icon {
+    color: var(--blue-color);
+  }
+
   &:not(.active):hover {
     border: 2px solid var(--light-color);
+    color: var(--light-color);
+
+    .n-icon {
+      color: var(--light-color);
     }
   }
+
+  .key-close-btn {
+    position: absolute;
+    left: 65px;
+    bottom: 45px;
+  }
+
+  .key-setting-btn {
+    position: absolute;
+    left: 65px;
+    top: 45px;
+  }
+}
+
 .active {
   border: 2px solid var(--primary-color);
   color: var(--primary-color);
   z-index: 2;
+
+  .n-icon {
+    color: var(--primary-color);
+  }
 }
 </style>