添加移除玩家UI

src/components/PlayerSeats.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  removePlayer: {
+    type: Function,
+    default: () => {},
+  },
 });
 const seats = new Array(props.total).fill(1);
 </script>
@@ -36,11 +40,19 @@ const seats = new Array(props.total).fill(1);
       }}</text>
       <text v-else :style="{ color: '#fff9' }">虚位以待</text>
       <view v-if="index === 0" class="founder">管理员</view>
-      <image
+      <!-- <image
         :src="`../static/player-${index + 1}.png`"
         mode="widthFix"
         class="player-bg"
-      />
+      /> -->
+      <button
+        v-if="index > 0 && players[index]"
+        hover-class="none"
+        class="remove-player"
+        @click="() => removePlayer(players[index])"
+      >
+        <image src="../static/close-white.png" mode="widthFix" />
+      </button>
     </view>
   </view>
 </template>
@@ -106,11 +118,11 @@ const seats = new Array(props.total).fill(1);
   border-top-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
-.player-bg {
+/* .player-bg {
   position: absolute;
   width: 52px;
   right: 0;
-}
+} */
 .player-unknow {
   width: 40px;
   height: 40px;
@@ -125,4 +137,20 @@ const seats = new Array(props.total).fill(1);
 .player-unknow > image {
   width: 40%;
 }
+.remove-player {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 10rpx;
+  right: 0;
+}
+.remove-player > image {
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+}
 </style>