细节优化

src/components/BowData.vue

@@ -53,6 +53,7 @@ const props = defineProps({
       :total="arrows.length"
       :scores="arrows.map((a) => a.ring)"
     />
+    <text>长按保存本次靶纸</text>
   </view>
 </template>
 
@@ -69,6 +70,11 @@ const props = defineProps({
   align-items: center;
   z-index: 10;
 }
+.container > text:last-child {
+  font-size: 14px;
+  color: #fff9;
+  margin-top: 20px;
+}
 .header {
   display: flex;
   justify-content: space-between;
@@ -79,6 +85,7 @@ const props = defineProps({
 .header > view:first-child {
   display: flex;
   align-items: center;
+  margin-left: 10px;
 }
 .header > view:first-child > view:last-child {
   display: flex;

src/components/BowPower.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <view class="container">
+  <view class="container" :style="{ opacity: power > 0 ? 1 : 0 }">
     <image src="../static/b-power.png" mode="widthFix" />
     <view>电量{{ power }}%</view>
   </view>

src/components/BowTarget.vue

@@ -43,14 +43,16 @@ const props = defineProps({
 const showRoundTips = ref(false);
 const showLatestArrow = ref(false);
 const prevLength = ref(0);
+const timer = ref(null);
 
 watch(
   () => props.scores,
   (newVal) => {
     if (newVal.length - prevLength.value === 1) {
+      if (timer.value) clearTimeout(timer.value);
       showRoundTips.value = true;
       showLatestArrow.value = true;
-      setTimeout(() => {
+      timer.value = setTimeout(() => {
         showRoundTips.value = false;
       }, 1000);
     }
@@ -80,7 +82,7 @@ function calcRealY(num) {
         "/" +
         totalRound
       }}</text>
-      <BowPower v-if="power > 0" :power="power" />
+      <BowPower :power="power" />
     </view>
     <view class="target">
       <view

src/components/PlayerScore.vue

@@ -70,6 +70,7 @@ const rowCount = new Array(6).fill(0);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: 20%;
 }
 .container > view:nth-child(3) {
   display: flex;

src/components/SButton.vue

@@ -50,5 +50,6 @@ const props = defineProps({
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #000;
 }
 </style>

src/components/Signin.vue

@@ -96,6 +96,7 @@ const handleLogin = () => {
         type="nickname"
         class="nickname-input"
         placeholder="请输入昵称"
+        placeholder-style="color: #ccc" 
         @change="onNicknameChange"
         @blur="onNicknameBlur"
       />

src/pages/battle-room.vue

@@ -90,7 +90,6 @@ async function onReceiveMessage(content) {
   messages.forEach((msg) => {
     if (
       msg.roomNumber === roomNumber.value ||
-      (battleId.value && msg.id === battleId.value) ||
       msg.constructor === MESSAGETYPES.WaitForAllReady
     ) {
       console.log("收到消息：", msg);
@@ -187,9 +186,9 @@ onMounted(() => {
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
   if (owner.value) {
-    destroyRoomAPI(room.value.id);
+    destroyRoomAPI(roomNumber.value);
   } else {
-    exitRoomAPI(room.value.id);
+    exitRoomAPI(roomNumber.value);
   }
 });
 </script>

src/pages/first-try.vue

@@ -77,6 +77,9 @@ const nextStep = async () => {
     scores.value = [];
     await createPractise(total);
     step.value = 4;
+    setTimeout(() => {
+      start.value = true;
+    }, 500);
   } else if (step.value === 5) {
     uni.navigateBack({
       delta: 1,

src/pages/index.vue

@@ -11,7 +11,7 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { updateConfig, updateUser, updateDevice } = store;
 // 使用storeToRefs，用于UI里显示，保持响应性
-const { user } = storeToRefs(store);
+const { user, device } = storeToRefs(store);
 const showModal = ref(false);
 
 const toPage = (path) => {
@@ -68,7 +68,9 @@ onMounted(async () => {
             mode="widthFix"
             @click="() => toPage('/pages/my-device')"
           />
-          <text>我的弓箭</text>
+          <text>{{
+            user.id && !device.deviceId ? "请绑定设备" : "我的弓箭"
+          }}</text>
           <image
             src="../static/a2@2x.png"
             mode="widthFix"
@@ -151,7 +153,7 @@ onMounted(async () => {
         </view>
       </view>
     </view>
-    <AppFooter />
+    <AppFooter :signin="() => (showModal = true)" />
     <SModal :show="showModal" :onClose="() => (showModal = false)">
       <Signin :onClose="() => (showModal = false)" />
     </SModal>

src/pages/melee-match.vue

@@ -25,6 +25,7 @@ const totalRounds = ref(0);
 const power = ref(0);
 const scores = ref([]);
 const tips = ref("即将开始...");
+const seq = ref(0);
 const timerSeq = ref(0);
 const players = ref([]);
 const playersScores = ref({});
@@ -83,13 +84,14 @@ async function onReceiveMessage(content) {
     if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
       totalRounds.value = msg.groupUserStatus.config.maxRounds;
       start.value = true;
+      seq.value += 1;
       timerSeq.value = 0;
       tips.value = "请在90秒内射完12支箭";
       scores.value = [];
     }
     if (msg.constructor === MESSAGETYPES.ShootResult) {
       if (msg.userId === user.value.id) {
-        scores.value = [msg.target];
+        scores.value.push(msg.target);
         power.value = msg.target.battery;
       }
       playersScores.value[msg.userId].push(msg.target);
@@ -125,7 +127,7 @@ onUnmounted(() => {
           <BowPower :power="45" />
         </view>
       </Guide>
-      <ShootProgress v-if="start" :start="start" :tips="tips" />
+      <ShootProgress v-if="start" :seq="seq" :start="start" :tips="tips" />
       <BowTarget
         :avatar="user.avatarUrl"
         :power="power"

src/pages/practise-one.vue

@@ -63,7 +63,7 @@ onUnmounted(() => {
     <view>
       <ShootProgress
         :tips="`${
-          scores.length === 12
+          !start || scores.length === 12
             ? ''
             : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 4)]}轮`
         }`"
@@ -76,6 +76,13 @@ onUnmounted(() => {
         :avatar="user.avatarUrl"
         :power="power"
         :scores="scores"
+        :tips="
+          !start && scores.length > 0
+            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
+                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
+              }达到距离要求`
+            : ''
+        "
       />
       <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
       <ScoreResult

src/pages/practise-two.vue

@@ -22,13 +22,15 @@ const power = ref(0);
 const onReady = async () => {
   await createPractiseAPI(total);
   start.value = true;
+  scores.value = [];
 };
 
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
-    if (start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
+      power.value = msg.target.battery;
       if (scores.value.length === total) {
         showScore.value = true;
       }
@@ -59,13 +61,24 @@ onUnmounted(() => {
 <template>
   <Container :bgType="1" title="个人单组练习">
     <view>
-      <ShootProgress :tips="`请连续射箭${total}支`" :total="120" />
+      <ShootProgress
+        :start="start"
+        :tips="`请连续射箭${total}支`"
+        :total="120"
+      />
       <BowTarget
         :totalRound="total"
         :currentRound="scores.length + 1"
         :avatar="user.avatarUrl"
         :power="power"
         :scores="scores"
+        :tips="
+          !start && scores.length > 0
+            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
+                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
+              }达到距离要求`
+            : ''
+        "
       />
       <ScorePanel
         v-if="start"