feat: 添加交互效果

src/components/baseLayouts/GameList.vue

@@ -129,7 +129,8 @@ function selectGame(id: string) {
   flex-shrink: 0;
   padding: 8px 4px;
   overflow-y: auto;
-  border-right: 1px solid var(--border-light);
+  /* 加粗分隔线，图标区与详情区边界分明 */
+  border-right: 2px solid var(--border-default);
 }
 
 .game-list__icon-item {
@@ -138,16 +139,34 @@ function selectGame(id: string) {
   justify-content: center;
   width: 48px;
   height: 48px;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.15s ease, transform 0.15s ease;
 
   &:hover {
     background-color: var(--bg-surface-hover);
+    transform: scale(1.08);
+  }
+
+  &:active {
+    transform: scale(0.95);
   }
 
   &--active {
     background-color: var(--color-primary-light);
+    /* 选中态加左侧色条，视觉更突出 */
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 25%;
+      height: 50%;
+      width: 3px;
+      border-radius: 0 3px 3px 0;
+      background-color: var(--color-primary);
+    }
   }
 }
 
@@ -160,7 +179,7 @@ function selectGame(id: string) {
 /* ===== 右侧详情面板 ===== */
 .game-list__detail {
   flex: 1;
-  padding: 16px;
+  padding: 20px 16px;
   overflow-y: auto;
 }
 
@@ -179,9 +198,15 @@ function selectGame(id: string) {
 }
 
 .game-list__detail-gameplay {
+  /* 玩法介绍卡片 — 浅底圆角，从详情区中独立出来 */
+  background-color: var(--bg-body);
+  border-radius: var(--radius-md);
+  padding: 14px 16px;
+  border: 1px solid var(--border-light);
+
   h4 {
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 600;
     margin-bottom: 8px;
     color: var(--text-primary);
   }
@@ -195,10 +220,19 @@ function selectGame(id: string) {
 
 .game-list__detail-empty {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
+  gap: 8px;
   color: var(--text-tertiary);
   font-size: 14px;
+
+  /* 空状态图标 */
+  &::before {
+    content: '🎮';
+    font-size: 40px;
+    opacity: 0.4;
+  }
 }
 </style>