增加实时环数计算

src/components/BowTargetEdit.vue

@@ -25,7 +25,12 @@ const onClick = async (e) => {
     x: e.detail.x - (rect.value.width * 0.1) / 2,
     y: e.detail.y - rect.value.top - 10,
   };
-  newArrow.ring = calcRing(newArrow.x, newArrow.y);
+  newArrow.ring = calcRing(
+    newArrow.x,
+    newArrow.y,
+    rect.value.width * 0.9,
+    rect.value.width * 0.9
+  );
   arrow.value = newArrow;
 };
 
@@ -66,7 +71,12 @@ const onDrag = async (e) => {
   // 更新坐标
   arrow.value.x = Math.max(0, Math.min(length, arrow.value.x + deltaX));
   arrow.value.y = Math.max(0, Math.min(length, arrow.value.y + deltaY));
-  arrow.value.ring = calcRing(arrow.value.x, arrow.value.y);
+  arrow.value.ring = calcRing(
+    arrow.value.x,
+    arrow.value.y,
+    rect.value.width * 0.9,
+    rect.value.width * 0.9
+  );
 
   // 更新拖拽起始位置
   dragStartPos.value = { x: clientX, y: clientY };
@@ -119,10 +129,14 @@ onMounted(async () => {
       <!-- 编辑按钮组（只在编辑状态下显示） -->
       <view class="edit-buttons" @click.stop>
         <text
-          ><text :style="{ fontSize: '24px', marginRight: '5px' }">{{
-            arrow.ring
-          }}</text
-          >{{ arrow.ring ? "环" : "" }}</text
+          >{{ arrow.ring === 0 ? "未上靶" : arrow.ring
+          }}<text
+            :style="{
+              fontSize: '20px',
+              marginLeft: arrow.ring > 0 ? '5px' : 0,
+            }"
+            >{{ arrow.ring > 0 ? "环" : "" }}</text
+          ></text
         >
         <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
           <image src="../static/arrow-edit-save.png" mode="widthFix" />
@@ -198,7 +212,7 @@ onMounted(async () => {
   display: block;
   line-height: 50px;
   text-align: center;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: bold;
   color: #fff;
 }