🎈 perf: 微调五子棋

src/components/gobang/GobangHeaderContent.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="gobang-header__content size-stretch flex align-center">
-    <div class="flex align-center">
-      <el-icon :size="30"><icon-cs-gobang /></el-icon>
-      <h2 v-show="!smLess" class="gobang-header__title">五子棋</h2>
-    </div>
+    <router-link custom :to="{ name: 'GobangList' }" v-slot="{ navigate }">
+      <div class="flex align-center" @click="navigate">
+        <el-icon :size="30"><icon-cs-gobang /></el-icon>
+        <h2 v-show="!smLess" class="gobang-header__title">五子棋</h2>
+      </div>
+    </router-link>
     <slot></slot>
   </div>
 </template>
 <script setup lang="ts">
 import { useMediaStore } from '@/stores/media';
 import { storeToRefs } from 'pinia';
-
 const { smLess } = storeToRefs(useMediaStore());
 </script>

src/router/index.ts

@@ -39,9 +39,17 @@ const routes: RouteRecordRaw[] = [
       shouldLogin: true,
     },
   },
+  {
+    path: '/gobang/single',
+    name: 'GobangPlaySingle',
+    component: () => import('@/views/GobangPlayPage.vue'),
+    meta: {
+      shouldLogin: true,
+    },
+  },
   {
     path: '/gobang/:id',
-    name: 'GobangPlay',
+    name: 'GobangPlayMulti',
     component: () => import('@/views/GobangPlayPage.vue'),
     meta: {
       shouldLogin: true,

src/views/GobangListPage.vue

@@ -146,7 +146,7 @@ const { send } = useGobangSocket({
     loading.value = false;
   },
   RoomCreated(p) {
-    // play(p.roomId);
+    play(p.roomId);
   },
 });
 function refresh() {
@@ -172,7 +172,7 @@ function onJoinButtonClick(room: RoomRender) {
 }
 function play(roomId: RoomId) {
   router.push({
-    name: 'GobangPlay',
+    name: 'GobangPlayMulti',
     params: { id: roomId },
   });
 }

src/views/GobangPlayPage.vue

@@ -8,6 +8,7 @@
               <h2 v-show="!smLess">蓝色基因对战平台</h2>
               <h3 class="gobang-play-page__brief-id flex center">#{{ roomId.slice(0, 8) }}</h3>
             </template>
+            <h2 v-else>单人游戏</h2>
           </div>
         </gobang-header-content>
       </el-header>
@@ -27,9 +28,9 @@
                         ? 'gobang-chessboard__cell--white'
                         : 'gobang-chessboard__cell--black'
                       : undefined,
-                    ]"
+                  ]"
                   :style="getCellStyle(cell, x, y)"
-                  ></div>
+                ></div>
               </template>
             </template>
           </div>
@@ -153,7 +154,6 @@ watchEffect(() => {
     );
     ctx.stroke();
   }
-  console.log('rerender');
 });
 interface Chess {
   isWhite: boolean;
@@ -195,6 +195,8 @@ function playerJoin(roomId: RoomId) {
 onMounted(() => {
   if (roomId) {
     playerJoin(roomId);
+  } else {
+    state.value = 'idle';
   }
 });
 </script>