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>

src/components/baseLayouts/UserBar.vue

@@ -4,8 +4,12 @@
       <el-popover trigger="click" :width="260">
         <template #reference>
           <div class="user-info">
-            <el-badge is-dot :offset="[-7, 29]" class="user-badge">
-              <el-avatar shape="circle" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
+            <el-badge is-dot :offset="[-4, 20]" class="user-badge">
+              <el-avatar
+                :size="28"
+                shape="circle"
+                src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+              />
             </el-badge>
             <div class="user-name">
               <div class="user-title">MarchGlow</div>
@@ -36,6 +40,9 @@ import { Setting } from '@element-plus/icons-vue'
   align-items: center;
 }
 
+.user-badge {
+  display: flex;
+}
 .user-badge :deep(.el-badge__content) {
   width: 12px;
   height: 12px;
@@ -58,35 +65,43 @@ import { Setting } from '@element-plus/icons-vue'
   align-items: center;
   height: 100%;
   gap: 8px;
-  padding: 4px;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  min-width: 0;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--bg-surface-hover);
+  }
 }
 
 .user-name {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  height: 34px;
-  width: 120px;
+  gap: 2px;
+  /* 默认内容宽度，超长时上限 160px 触发省略 */
+  max-width: 160px;
+  min-width: 0;
 }
 
 .user-title {
-  line-height: 18px;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 16px;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 600;
   text-align: left;
 }
 
 .user-state {
-  line-height: 12px;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: 11px;
+  color: var(--text-tertiary);
   text-align: left;
 }
 
@@ -94,5 +109,29 @@ import { Setting } from '@element-plus/icons-vue'
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    background-color: var(--bg-surface-hover);
+    color: var(--text-primary);
+
+    /* 移入时缓动旋转 180°，完成后保持 */
+    :deep(.el-icon) {
+      transition: transform 0.6s cubic-bezier(0.6, 0, 1, 1);
+      transform: rotate(180deg);
+    }
+  }
+
+  /* 移出时无过渡，瞬间复位 */
+  :deep(.el-icon) {
+    transition: none;
+  }
 }
 </style>