From 4980b84da63cd48f97fbc26198fcefd7b5d5d966 Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Mon, 17 Mar 2025 20:21:24 +0800
Subject: [PATCH] add mechanical button

---
 .../equipments/MechanicalButton.vue           | 82 +++++++++++++++++++
 src/components/equipments/Switch.vue          | 20 +++--
 src/views/TestSVG.vue                         |  4 +-
 3 files changed, 96 insertions(+), 10 deletions(-)
 create mode 100644 src/components/equipments/MechanicalButton.vue

diff --git a/src/components/equipments/MechanicalButton.vue b/src/components/equipments/MechanicalButton.vue
new file mode 100644
index 0000000..f6550f0
--- /dev/null
+++ b/src/components/equipments/MechanicalButton.vue
@@ -0,0 +1,82 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 1600 1600">
+    <def>
+      <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur" />
+        <feColorMatrix result="bluralpha" type="matrix" :values="colorMatrix" />
+        <feOffset in="bluralpha" dx="20" dy="20" result="offsetBlur" />
+        <feMerge>
+          <feMergeNode in="offsetBlur" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </def>
+    <g>
+      <rect width="800" height="800" x="400" y="400" fill="#464646" rx="20" />
+      <rect width="700" height="700" x="450" y="450" fill="#eaeaea" rx="20" />
+      <circle r="20" cx="1075" cy="1075" fill="#171717" />
+      <circle r="20" cx="1075" cy="525" fill="#171717" />
+      <circle r="20" cx="525" cy="525" fill="#171717" />
+      <circle r="20" cx="525" cy="1075" fill="#171717" />
+    </g>
+    <g>
+      <linearGradient id="normal" gradientTransform="rotate(45 0 0)">
+        <stop stop-color="#4b4b4b" offset="0" />
+        <stop stop-color="#171717" offset="1" />
+      </linearGradient>
+      <linearGradient id="pressed" gradientTransform="rotate(45 0 0)">
+        <stop stop-color="#171717" offset="0" />
+        <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"
+        fill-opacity="1" />
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+interface Props {
+  width?: string | number
+  height?: string | number
+}
+const props = withDefaults(defineProps<Props>(), {
+  width: 160,
+  height: 160,
+})
+
+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() {
+  btnHeight.value = 210;
+  colorMatrix.value = "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 0.7   0"
+}
+
+function btnReleased() {
+  btnHeight.value = 200;
+  colorMatrix.value = "1 0 0 0   0  0 1 0 0   0  0 0 1 0   0  0 0 0 1   0"
+}
+
+</script>
+
+<style scoped lang="postcss">
+circle {
+  transition: all 20ms ease-in-out;
+}
+
+.shadow {
+  filter: url(#shadow);
+}
+
+.light:active {
+  fill: url(#pressed);
+}
+
+.light {
+  fill: url(#normal);
+}
+</style>
diff --git a/src/components/equipments/Switch.vue b/src/components/equipments/Switch.vue
index ea10cdf..94b2585 100644
--- a/src/components/equipments/Switch.vue
+++ b/src/components/equipments/Switch.vue
@@ -1,7 +1,7 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 16 16">
     <def>
-      <filter id="glow">
+      <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
         <feFlood result="flood" flood-color="#f08a5d" flood-opacity="1"></feFlood>
         <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
         <feMorphology in="mask" result="dilated" operator="dilate" radius="0.02"></feMorphology>
@@ -20,12 +20,12 @@
       <rect width="8" height="4" x="4" y="6" fill="#c01401" rx="0.1" />
       <text fill="white" font-size="0.7" x="4.25" y="6.75">ON</text>
       <g>
-        <rect @click="toggleBtnStatus(0)" width="0.7" height="2" fill="#68716f" x="5.15" y="7" rx="0.1" />
-        <rect @click="toggleBtnStatus(1)" width="0.7" height="2" fill="#68716f" x="6.15" y="7" rx="0.1" />
-        <rect @click="toggleBtnStatus(2)" width="0.7" height="2" fill="#68716f" x="7.15" y="7" rx="0.1" />
-        <rect @click="toggleBtnStatus(3)" width="0.7" height="2" fill="#68716f" x="8.15" y="7" rx="0.1" />
-        <rect @click="toggleBtnStatus(4)" width="0.7" height="2" fill="#68716f" x="9.15" y="7" rx="0.1" />
-        <rect @click="toggleBtnStatus(5)" width="0.7" height="2" fill="#68716f" x="10.15" y="7" rx="0.1" />
+        <rect class="glow" @click="toggleBtnStatus(0)" width="0.7" height="2" fill="#68716f" x="5.15" y="7" rx="0.1" />
+        <rect class="glow" @click="toggleBtnStatus(1)" width="0.7" height="2" fill="#68716f" x="6.15" y="7" rx="0.1" />
+        <rect class="glow" @click="toggleBtnStatus(2)" width="0.7" height="2" fill="#68716f" x="7.15" y="7" rx="0.1" />
+        <rect class="glow" @click="toggleBtnStatus(3)" width="0.7" height="2" fill="#68716f" x="8.15" y="7" rx="0.1" />
+        <rect class="glow" @click="toggleBtnStatus(4)" width="0.7" height="2" fill="#68716f" x="9.15" y="7" rx="0.1" />
+        <rect class="glow" @click="toggleBtnStatus(5)" width="0.7" height="2" fill="#68716f" x="10.15" y="7" rx="0.1" />
       </g>
       <g>
         <rect @click="toggleBtnStatus(0)" width="0.65" height="0.65" fill="white" x="5.175" :y="btnLocation[0]" rx="0.1"
@@ -73,9 +73,11 @@ function toggleBtnStatus(btnNum: number): void {
 </script>
 
 <style scoped lang="postcss">
-@import "@/assets/main.css";
-
 rect {
   transition: all 100ms ease-in-out;
 }
+
+.glow:hover {
+  filter: url(#glow);
+}
 </style>
diff --git a/src/views/TestSVG.vue b/src/views/TestSVG.vue
index 4a83fb2..3188155 100644
--- a/src/views/TestSVG.vue
+++ b/src/views/TestSVG.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="w-screen h-screen">
-    <Switch width="720" height="720" />
+    <!-- <Switch width="720" height="720" /> -->
+    <MechanicalButton width="720" height="720" />
   </div>
 </template>
 
 <script setup lang="ts">
+import MechanicalButton from '@/components/equipments/MechanicalButton.vue';
 import Switch from '@/components/equipments/Switch.vue';