From ca468edd592d74bace7cfe8b2e9fcccd40758c7c Mon Sep 17 00:00:00 2001
From: Litrix2 <wbpstn@163.com>
Date: Sun, 15 Dec 2024 21:37:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20=E5=BE=AE=E8=B0=83?=
 =?UTF-8?q?=E4=BA=94=E5=AD=90=E6=A3=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/gobang/GobangHeaderContent.vue | 11 ++++++-----
 src/router/index.ts                           | 10 +++++++++-
 src/views/GobangListPage.vue                  |  4 ++--
 src/views/GobangPlayPage.vue                  |  8 +++++---
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/gobang/GobangHeaderContent.vue b/src/components/gobang/GobangHeaderContent.vue
index f744123..464efbf 100644
--- a/src/components/gobang/GobangHeaderContent.vue
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index fbbd5c9..6473294 100644
--- a/src/router/index.ts
+++ b/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,
diff --git a/src/views/GobangListPage.vue b/src/views/GobangListPage.vue
index ae5e390..e820fe0 100644
--- a/src/views/GobangListPage.vue
+++ b/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 },
   });
 }
diff --git a/src/views/GobangPlayPage.vue b/src/views/GobangPlayPage.vue
index 79ee93e..5faaaef 100644
--- a/src/views/GobangPlayPage.vue
+++ b/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>