feat: 游戏大厅

src/layouts/BaseLayout.vue

@@ -27,7 +27,9 @@
       </div>
 
       <!-- 主内容区域 -->
-      <div class="base-layout__content"></div>
+      <div class="base-layout__content">
+        <Lobby />
+      </div>
     </div>
   </div>
 </template>
@@ -35,6 +37,7 @@
 <script setup lang="ts">
 import UserBar from '@/components/baseLayouts/UserBar.vue'
 import GameList from '@/components/baseLayouts/GameList.vue'
+import Lobby from '@/components/baseLayouts/Lobby.vue'
 import { useBaseLayoutStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 
@@ -95,7 +98,8 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
   display: flex;
   flex: 1;
   width: 100%;
-  height: 100%;
+  min-height: 0; /* flex 子元素必须设置，允许收缩到内容以下 */
+  overflow: hidden;
 }
 
 .base-layout__sidebar {
@@ -157,21 +161,11 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
   right: 0;
   cursor: ew-resize;
   z-index: 10;
-  /* 默认微弱可见，提示可拖拽 */
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    transparent 40%,
-    var(--border-default) 40%,
-    var(--border-default) 60%,
-    transparent 60%,
-    transparent 100%
-  );
+  background: transparent;
   transition: background-color 0.2s ease;
 
   &:hover {
     background-color: var(--color-primary-light);
-    background: none;
   }
 
   &:active {
@@ -183,7 +177,8 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
   display: flex;
   flex: 1;
   width: 100%;
-  height: 100%;
+  min-height: 0; /* flex 子元素必须设置，允许收缩 */
+  overflow: hidden;
   background-color: var(--bg-body);
 }
 </style>