feat: add right click keyboard match

src/components/equipments/MechanicalButton.vue

@@ -29,19 +29,44 @@
         <stop stop-color="#4b4b4b" offset="1" />
       </linearGradient>
       <circle class="shadow" r="220" cx="800" cy="800" fill="black" />
-      <circle class="light" @mousedown="btnPressed" @mouseup="btnReleased" :r="btnHeight" cx="800" cy="800"
+      <circle class="light" @mousedown="toggleButtonState(true)" @mouseup="toggleButtonState(false)" 
-        fill-opacity="1" />
+        @contextmenu.prevent="openContextMenu($event)" :r="btnHeight" cx="800" cy="800"
+        fill-opacity="0.9" style="pointer-events: auto;"/>
+      <text 
+        v-if="bindKey"
+        x="800" 
+        y="800"
+        font-size="310"
+        text-anchor="middle"
+        dominant-baseline="central"
+        fill="#ccc"
+        style="font-family: Arial; filter: url(#shadow); user-select: none; pointer-events: none; mix-blend-mode: overlay;"
+      >
+        {{ bindKey.toUpperCase() }}
+      </text>
     </g>
   </svg>
+  <div v-if="showContextMenu"
+       :style="{ top: contextMenuY + 'px', left: contextMenuX + 'px' }"
+       @click.stop
+       class="fixed z-50 border border-base-300 bg-base-100 rounded-md shadow-lg">
+    <div class="px-4 py-2 cursor-pointer whitespace-nowrap text-base-content hover:bg-base-200"
+         @click="startBinding">
+      <span v-if="isBinding">请输入</span>
+      <span v-else>绑定按键: {{ bindKey ? bindKey.toUpperCase() : '未绑定' }}</span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 
 interface Props {
   width?: string | number
   height?: string | number
 }
+const bindKey = ref('');
+let isKeyPressed = false;
 const props = withDefaults(defineProps<Props>(), {
   width: 160,
   height: 160,
@@ -51,16 +76,64 @@ const btnHeight = ref(200)
 
 const colorMatrix = ref("1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 1   0")
 
-function btnPressed() {
+function toggleButtonState(isPressed: boolean) {
-  btnHeight.value = 210;
+  btnHeight.value = isPressed ? 210 : 200;
-  colorMatrix.value = "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 0.7   0"
+  colorMatrix.value = isPressed 
+    ? "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 0.7   0"
+    : "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 1   0";
 }
 
-function btnReleased() {
+const isBinding = ref(false);
-  btnHeight.value = 200;
+const showContextMenu = ref(false);
-  colorMatrix.value = "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 1   0"
+const contextMenuX = ref(0);
+const contextMenuY = ref(0);
+
+function openContextMenu(e: MouseEvent) {
+  contextMenuX.value = e.clientX;
+  contextMenuY.value = e.clientY;
+  showContextMenu.value = true;
 }
 
+function closeContextMenu() {
+  showContextMenu.value = false;
+}
+
+function startBinding() {
+  if (isBinding.value) return;
+  isBinding.value = true;
+  window.addEventListener('keydown', onBindingKeyDown, { once: true });
+}
+
+function onBindingKeyDown(e: KeyboardEvent) {
+  bindKey.value = e.key.toLowerCase();
+  isBinding.value = false;
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key.toLowerCase() === bindKey.value && !isKeyPressed) {
+    isKeyPressed = true;
+    toggleButtonState(true);
+  }
+}
+
+function handleKeyUp(e: KeyboardEvent) {
+  if (e.key.toLowerCase() === bindKey.value) {
+    isKeyPressed = false;
+    toggleButtonState(false);
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keyup', handleKeyUp);
+  window.addEventListener('click', closeContextMenu);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+  window.removeEventListener('keyup', handleKeyUp);
+  window.removeEventListener('click', closeContextMenu);
+});
 </script>
 
 <style scoped lang="postcss">

src/views/TestView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-screen h-screen">
-    <!-- <Switch width="720" height="720" /> -->
+    <Switch width="1400" height="360" />
-    <MechanicalButton width="720" height="720" />
+    <MechanicalButton width="1400" height="360" />
     <PopButton></PopButton>
   </div>
 </template>
@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import PopButton from "@/components/PopButton.vue";
 import MechanicalButton from "@/components/equipments/MechanicalButton.vue";
-// import Switch from "@/components/equipments/Switch.vue";
+import Switch from "@/components/equipments/Switch.vue";
 </script>
 
 <style scoped lang="postcss">