From ebf0f51f942dbd71208694952118abbbe4c71d87 Mon Sep 17 00:00:00 2001
From: Poker Design Developer <developer@poker-design.local>
Date: Thu, 4 Jun 2026 22:15:48 +0800
Subject: [PATCH] refactor: image offset controls from sliders to number inputs

---
 frontend/src/components/DesignPanel.vue | 42 ++++++++++++-------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/DesignPanel.vue b/frontend/src/components/DesignPanel.vue
index 0784acb..e946137 100644
--- a/frontend/src/components/DesignPanel.vue
+++ b/frontend/src/components/DesignPanel.vue
@@ -45,17 +45,17 @@
 
       <section v-if="backDesign.image">
         <h4>图片位置微调</h4>
-        <p class="hint">拖动滑块微调素材图片的位置与缩放（0 = 默认）</p>
+        <p class="hint">输入数值微调素材图片的位置与缩放（0 = 默认）</p>
         <div class="pip-row">
           <label class="mini-label">dx</label>
-          <input type="range" min="-0.05" max="0.05" step="0.005"
-                 :value="backImageOffsetVal('image_dx')" @input="setBackImageOffset('image_dx', $event.target.value)" />
+          <input type="number" step="0.005" min="-0.05" max="0.05"
+                 :value="backImageOffsetVal('image_dx')" @change="setBackImageOffset('image_dx', $event.target.value)" />
           <label class="mini-label">dy</label>
-          <input type="range" min="-0.05" max="0.05" step="0.005"
-                 :value="backImageOffsetVal('image_dy')" @input="setBackImageOffset('image_dy', $event.target.value)" />
+          <input type="number" step="0.005" min="-0.05" max="0.05"
+                 :value="backImageOffsetVal('image_dy')" @change="setBackImageOffset('image_dy', $event.target.value)" />
           <label class="mini-label">缩放</label>
-          <input type="range" min="0.6" max="1.4" step="0.05"
-                 :value="backImageOffsetVal('image_scale')" @input="setBackImageOffset('image_scale', $event.target.value)" />
+          <input type="number" step="0.05" min="0.6" max="1.4"
+                 :value="backImageOffsetVal('image_scale')" @change="setBackImageOffset('image_scale', $event.target.value)" />
         </div>
         <button @click="resetBackImageOffset" class="mini ghost">重置图片位置</button>
       </section>
@@ -157,17 +157,17 @@
       <!-- 图片位置微调（大小王） -->
       <section v-if="showImageOffset">
         <h4>图片位置微调</h4>
-        <p class="hint">拖动滑块微调素材图片的位置与缩放（0 = 默认）</p>
+        <p class="hint">输入数值微调素材图片的位置与缩放（0 = 默认）</p>
         <div class="pip-row">
           <label class="mini-label">dx</label>
-          <input type="range" min="-0.05" max="0.05" step="0.005"
-                 :value="imageOffsetVal('image_dx')" @input="setImageOffset('image_dx', $event.target.value)" />
+          <input type="number" step="0.005" min="-0.05" max="0.05"
+                 :value="imageOffsetVal('image_dx')" @change="setImageOffset('image_dx', $event.target.value)" />
           <label class="mini-label">dy</label>
-          <input type="range" min="-0.05" max="0.05" step="0.005"
-                 :value="imageOffsetVal('image_dy')" @input="setImageOffset('image_dy', $event.target.value)" />
+          <input type="number" step="0.005" min="-0.05" max="0.05"
+                 :value="imageOffsetVal('image_dy')" @change="setImageOffset('image_dy', $event.target.value)" />
           <label class="mini-label">缩放</label>
-          <input type="range" min="0.6" max="1.4" step="0.05"
-                 :value="imageOffsetVal('image_scale')" @input="setImageOffset('image_scale', $event.target.value)" />
+          <input type="number" step="0.05" min="0.6" max="1.4"
+                 :value="imageOffsetVal('image_scale')" @change="setImageOffset('image_scale', $event.target.value)" />
         </div>
         <button @click="resetImageOffset" class="mini ghost">重置图片位置</button>
       </section>
@@ -175,7 +175,7 @@
       <!-- 数字牌花色位置微调 -->
       <section v-if="isNumberCard">
         <h4>数字牌花色位置微调</h4>
-        <p class="hint">拖动滑块微调每个花色的位置（占整张牌的比例，0 = 默认）</p>
+        <p class="hint">输入数值微调每个花色的位置（占整张牌的比例，0 = 默认）</p>
         <div class="rank-tabs">
           <button v-for="r in [1,2,3,4,5,6,7,8,9,10]" :key="r"
                   :class="{ active: selectedRank === r }"
@@ -184,14 +184,14 @@
         <div v-for="(pos, i) in positions" :key="i" class="pip-row">
           <div class="pip-label">#{{ i + 1 }}</div>
           <label class="mini-label">dx</label>
-          <input type="range" min="-0.05" max="0.05" step="0.005"
-                 :value="overrideFor(i).dx" @input="setOffset(i, 'dx', $event.target.value)" />
+          <input type="number" step="0.005" min="-0.05" max="0.05"
+                 :value="overrideFor(i).dx" @change="setOffset(i, 'dx', $event.target.value)" />
           <label class="mini-label">dy</label>
-          <input type="range" min="-0.05" max="0.05" step="0.005"
-                 :value="overrideFor(i).dy" @input="setOffset(i, 'dy', $event.target.value)" />
+          <input type="number" step="0.005" min="-0.05" max="0.05"
+                 :value="overrideFor(i).dy" @change="setOffset(i, 'dy', $event.target.value)" />
           <label class="mini-label">缩放</label>
-          <input type="range" min="0.6" max="1.4" step="0.05"
-                 :value="overrideFor(i).scale" @input="setOffset(i, 'scale', $event.target.value)" />
+          <input type="number" step="0.05" min="0.6" max="1.4"
+                 :value="overrideFor(i).scale" @change="setOffset(i, 'scale', $event.target.value)" />
         </div>
         <button @click="resetLayout" class="mini ghost">重置本点数布局</button>
       </section>