对战页面添加用户指示标签

web/src/components/UserIndicator.vue

@@ -0,0 +1,59 @@
+// 用户指示标签
+<template>
+    <div class="playground">
+        <div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">
+            <div style="color: #4876ec; ">
+                左下角: {{ $store.state.user.username }}
+                &ensp;
+                <img :src="$store.state.user.photo" alt="" class="pk_photo">
+            </div>
+            <div style="color: #f94848;">
+                右上角:{{ $store.state.pk.opponent_username }}
+                &ensp;
+                <img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
+            </div>
+        </div>
+
+        <div class="user_state_config" v-if="parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">
+            <div style="color: #4876ec;">
+                左下角: {{ $store.state.pk.opponent_username }}
+                &ensp;
+                <img :src="$store.state.pk.opponent_photo" alt="" class="pk_photo">
+            </div>
+            <div style="color: #f94848;">
+                右上角:{{ $store.state.user.username }}
+                &ensp;
+                <img :src="$store.state.user.photo" alt="" class="pk_photo">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+.playground {
+    /* 60% 浏览器宽度, 70% 浏览器高度 */
+    width: 40vw;
+    /* 背景色 */
+    /* background: lightblue; */
+    /* 距上边距40px,左右居中 */
+    margin: 10px auto;
+}
+
+.user_state_config {
+    text-align: center;
+    color: white;
+    font-size: 30;
+    font-weight: 600;
+    margin-top: auto;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.pk_photo {
+    border-radius: 50%;
+    width: 3vw;
+}
+</style>

web/src/views/pk/PkIndexView.vue

@@ -1,5 +1,6 @@
 <template>
   <PlayGround v-if="$store.state.pk.status === 'playing'" />
+  <UserIndicator v-if="$store.state.pk.status === 'playing'" />
   <MatchGround v-else-if="$store.state.pk.status === 'matching'" />
   <ResultBoard v-if="$store.state.pk.loser !== 'none'" />
 </template>
@@ -8,6 +9,7 @@
 import PlayGround from "../../components/PlayGround.vue";
 import MatchGround from "../../components/MatchGround.vue";
 import ResultBoard from "../../components/ResultBoard.vue";
+import UserIndicator from "../../components/UserIndicator.vue"
 
 // onMounted 用于组件被挂载时, onUnmounted 用于组件被解除挂载时
 import { onMounted, onUnmounted } from "vue";
@@ -18,7 +20,8 @@ export default {
   components: {
     PlayGround,
     MatchGround,
-    ResultBoard
+    ResultBoard,
+    UserIndicator
   },
   // 创建前后端连接:当当前页面组件被加载时,建立连接,故使用 onMounted 函数
   setup() {