src/components/equipments/MechanicalButton.vue

@@ -29,44 +29,19 @@
         <stop stop-color="#4b4b4b" offset="1" />
       </linearGradient>
       <circle class="shadow" r="220" cx="800" cy="800" fill="black" />
-      <circle class="light" @mousedown="toggleButtonState(true)" @mouseup="toggleButtonState(false)" 
+      <circle class="light" @mousedown="btnPressed" @mouseup="btnReleased" :r="btnHeight" cx="800" cy="800"
-        @contextmenu.prevent="openContextMenu($event)" :r="btnHeight" cx="800" cy="800"
+        fill-opacity="1" />
-        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 { ref, onMounted, onUnmounted } from 'vue';
+import { computed, ref } 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,
@@ -76,64 +51,16 @@ 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 toggleButtonState(isPressed: boolean) {
+function btnPressed() {
-  btnHeight.value = isPressed ? 210 : 200;
+  btnHeight.value = 210;
-  colorMatrix.value = isPressed 
+  colorMatrix.value = "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 0.7   0"
-    : "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 1   0";
 }
 
-const isBinding = ref(false);
+function btnReleased() {
-const showContextMenu = ref(false);
+  btnHeight.value = 200;
-const contextMenuX = ref(0);
+  colorMatrix.value = "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 1   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="1400" height="360" />
+    <!-- <Switch width="720" height="720" /> -->
-    <MechanicalButton width="1400" height="360" />
+    <MechanicalButton width="720" height="720" />
     <PopButton></PopButton>
   </div>
 </template>
@@ -9,9 +9,9 @@
 <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">
 @import "../assets/main.css";
-</style>
+</style>