store

hsyhhssyy · Jun 26, 2024 · 873a44b · 873a44b
1 parent edbc35d
commit 873a44b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,9 @@
     "dependencies": {
         "@icon-park/vue-next": "^1.4.2",
         "@microsoft/signalr": "^8.0.0",
+        "@types/bowser": "^1.1.1",
         "axios": "1.6.0",
+        "bowser": "^2.11.0",
         "marked": "^13.0.0",
         "pinia": "^2.0.36",
         "vue": "^3.3.2",

diff --git a/src/mobile/views/GameBase.vue b/src/mobile/views/GameBase.vue
@@ -9,7 +9,10 @@
                 @on-show-player-list="openPlayerList"
                 ref="chat"
             />
-            <game-info-card class="game-info" :room-data="gameRoomData">
+            <game-info-card :class="{
+                'game-info-android-edge': browserClass === 'android-edge',
+                'game-info': browserClass !== 'android-edge',
+            }" :room-data="gameRoomData">
                 <template #buttons>
                     <icon-button :icon="Sport" type="warning" @click="endGame" v-if="isHost&&!isCompleted">放弃游戏</icon-button>
                     <icon-button :icon="Logout" type="error" @click="leaveRoom" v-if="!isHost||isCompleted">{{ isHost?'关闭':'退出'}}房间</icon-button>
@@ -42,7 +45,7 @@ import type { ChatProps, Message } from '@/mobile/components/ChatBoard.vue'
 import ChatBoard from '@/mobile/components/ChatBoard.vue'
 import GameInfoCard from '@/universal/components/GameInfoCard.vue'
 import IconButton from '@/universal/components/IconButton.vue'
-import { removeData } from '@/utils'
+import Bowser from "bowser";
 
 interface GameProps extends ChatProps {}
 
@@ -66,6 +69,7 @@ const isGameHubLoading = ref(true)
 const isMounting = ref(true) //GameBase的OnMount
 const isGameInfoReceiving = ref(true) // 第一次接收到GameInfo
 const chat = ref()
+const browserClass = ref("")
 
 const isCompleted = ref(false)
 const isHost = computed(() => gameRoomData.value?.creatorId == user.userInfo?.id)
@@ -187,6 +191,18 @@ onMounted(async () => {
 
     isMounting.value = false;
 
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    const browserInfo = browser.getBrowser();
+    const platformInfo = browser.getPlatform();
+    const osInfo = browser.getOS();
+    
+    if (
+    browserInfo.name === "Microsoft Edge" &&
+    platformInfo.type === "mobile" &&
+    osInfo.name === "Android"
+    ) {
+        browserClass.value = "android-edge";
+    }
 })
 
 onUnmounted(() => {
@@ -212,6 +228,10 @@ onUnmounted(() => {
         margin-bottom: 200px;
     }
 
+    .game-info-android-edge {
+        margin-bottom: 300px;
+    }
+
     .player-panel {
         display: flex;
         flex-direction: column;

diff --git a/src/universal/components/GameInfoCard.vue b/src/universal/components/GameInfoCard.vue
@@ -12,12 +12,12 @@
                     </n-button>
                 </div>
             </n-space>
-            <n-space align="center">
+            <div class="buttons">
                 <slot name="tags"></slot>
                 <n-tag type="primary" v-if="props.roomData.isPrivate">私人房间</n-tag>
                 <n-tag type="success" v-else>公开房间</n-tag>
                 <n-tag type="info" @click="ruleClick">查看规则</n-tag>
-            </n-space>
+            </div>
         </n-space>
         <div class="game-actions" style="margin-top: 20px">
             <slot name="buttons"></slot>
@@ -87,6 +87,17 @@ async function ruleClick(){
         border-radius: 4px;
     }
 
+    .buttons{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 5px;
+
+        @media (min-width: 360px) {
+            flex-direction: row;
+        }
+    }
+
     .game-actions {
         display: flex;
 

diff --git a/yarn.lock b/yarn.lock
@@ -261,6 +261,13 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node18/-/node18-2.0.1.tgz#2d2e11333ef2b75a4623203daca264e6697d693b"
   integrity sha512-UqdfvuJK0SArA2CxhKWwwAWfnVSXiYe63bVpMutc27vpngCntGUZQETO24pEJ46zU6XM+7SpqYoMgcO3bM11Ew==
 
+"@types/bowser@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/bowser/-/bowser-1.1.1.tgz#9bbe3c93fef1c787f565d252ce51326ada506611"
+  integrity sha512-JEJrXQI6H+wJsj8Q5gmR2u3v+fsI00cmatVKq9EzXk66xGNueUi8MFOnuHo3S9poNnTxrLiEUMFuiLW7JVVN8g==
+  dependencies:
+    bowser "*"
+
 "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -664,6 +671,11 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bowser@*, bowser@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
+  integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"