优化了鼠标经过图标的用户体验

src/pages/GamePage.vue

@@ -1,53 +1,59 @@
 <template>
-    <div id="gamePage">
-        <a-button @click="doBack">⬅️ 返回</a-button>
-        <a-row align="center">
-            <!-- 分层选块 -->
-            <div class="level-board">
-                <div
-                    v-for="(block, idx) in levelBlocksVal"
-                    v-show="gameStatus > 0"
-                    :key="idx"
-                    class="block level-block"
-                    :class="{ disabled: block.lowerThanBlocks.length > 0 }"
-                    :data-id="block.id"
-                    :style="{
+  <div id="gamePage">
+    <a-button @click="doBack"> ⬅️ 返回</a-button>
+    <a-row align="center">
+      <!-- 分层选块 -->
+      <div class="level-board">
+        <div
+          v-for="(block, idx) in levelBlocksVal"
+          v-show="gameStatus > 0"
+          :key="idx"
+          class="block level-block"
+          :class="{ disabled: block.lowerThanBlocks.length > 0 }"
+          :data-id="block.id"
+          :style="{
             zIndex: 100 + block.level,
             left: block.x * widthUnit + 'px',
             top: block.y * heightUnit + 'px',
           }"
-                    @click="(e) => doClickBlock(block, e)"
-                >{{ block.type }}</div>
-            </div>
-            <!-- 随机选块 -->
-            <div class="random-board">
-                <div
-                    v-for="(randomBlock, index) in randomBlocksVal"
-                    :key="index"
-                    class="random-area"
-                >
-                    <div
-                        v-if="randomBlock.length > 0"
-                        class="block"
-                        @click="(e) => doClickBlock(randomBlock[0], e, index)"
-                    >{{ randomBlock[0].type }}</div>
-                    <div
-                        v-for="num in Math.max(randomBlock.length - 1, 0)"
-                        :key="num"
-                        class="block disabled"
-                    ></div>
-                </div>
-            </div>
-            <!-- 槽位 -->
-            <div v-if="slotAreaVal.length > 0" class="slot-board">
-                <div
-                    v-for="(slotBlock, index) in slotAreaVal"
-                    :key="index"
-                    class="block"
-                >{{ slotBlock?.type }}</div>
-            </div>
-        </a-row>
-    </div>
+          @click="(e) => doClickBlock(block, e)"
+        >
+          {{ block.type }}
+        </div>
+      </div>
+      <!-- 随机选块 -->
+      <div class="random-board">
+        <div
+          v-for="(randomBlock, index) in randomBlocksVal"
+          :key="index"
+          class="random-area"
+        >
+          <div
+            v-if="randomBlock.length > 0"
+            class="block"
+            @click="(e) => doClickBlock(randomBlock[0], e, index)"
+          >
+            {{ randomBlock[0].type }}
+          </div>
+          <div
+            v-for="num in Math.max(randomBlock.length - 1, 0)"
+            :key="num"
+            class="block disabled"
+          ></div>
+        </div>
+      </div>
+      <!-- 槽位 -->
+      <div v-if="slotAreaVal.length > 0" class="slot-board">
+        <div
+          v-for="(slotBlock, index) in slotAreaVal"
+          :key="index"
+          class="block"
+        >
+          {{ slotBlock?.type }}
+        </div>
+      </div>
+    </a-row>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -58,25 +64,25 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 const {
-    gameStatus,
-    levelBlocksVal,
-    randomBlocksVal,
-    slotAreaVal,
-    widthUnit,
-    heightUnit,
-    doClickBlock,
-    doStart,
+  gameStatus,
+  levelBlocksVal,
+  randomBlocksVal,
+  slotAreaVal,
+  widthUnit,
+  heightUnit,
+  doClickBlock,
+  doStart,
 } = useGame();
 
 /**
  * 回上一页
  */
 const doBack = () => {
-    router.back();
+  router.back();
 };
 
 onMounted(() => {
-    doStart();
+  doStart();
 });
 </script>