feat: 添加交互效果

src/assets/style/variables.scss

@@ -22,7 +22,7 @@
   // 从底层到顶层依次变亮，形成自然层级
   --bg-body: #f1f5f9; /* 页面底色：最底层背景 */
   --bg-surface: #ffffff; /* 卡片/面板背景：浮于页面之上的容器 */
-  --bg-surface-hover: #f8fafc; /* 卡片悬停：鼠标经过时的微变反馈 */
+  --bg-surface-hover: #eef2ff; /* 卡片/列表项悬停：鼠标经过时带品牌色微调，明显但不刺眼 */
   --bg-sidebar: #f8fafc; /* 侧边栏背景：导航区域的专用底色 */
   --bg-topbar: #ffffff; /* 顶部栏背景：顶部导航条的底色 */
   --bg-elevated: #ffffff; /* 浮层背景：弹出菜单、下拉面板等最高层 */

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-badge is-dot :offset="[-4, 20]" class="user-badge">
-              <el-avatar shape="circle" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
+              <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;
+  padding: 4px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
-  transition: background-color 0.2s ease;
+  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;
+  gap: 2px;
-  height: 34px;
+  /* 默认内容宽度，超长时上限 160px 触发省略 */
-  width: 120px;
+  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-size: 14px;
-  font-weight: 500;
+  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>

src/layouts/AuthPageLayout.vue

@@ -42,17 +42,16 @@
 
 .auth-layout__bg {
   position: absolute;
-  top: 0;
+  top: -20%;
-  left: 0;
+  left: -20%;
-  width: 100%;
+  width: 140%;
-  height: 100%;
+  height: 140%;
-  background: linear-gradient(
+  background:
-    154deg,
+    radial-gradient(ellipse at 30% 20%, rgba(79, 70, 229, 0.12) 0%, transparent 50%),
-    #07070915 30%,
+    radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
-    color-mix(in srgb, var(--el-color-primary) 30%, transparent) 48%,
+    radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 40%);
-    #07070915 64%
+  filter: blur(80px);
-  );
+  pointer-events: none;
-  filter: blur(100px);
 }
 
 .auth-layout__card {
@@ -65,6 +64,11 @@
   border-radius: var(--radius-lg);
   padding: 40px 24px 40px 24px;
   width: 100%;
+  /* 卡片浮起效果 */
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.06),
+    0 1px 4px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--border-light);
 }
 
 /* 平板端宽度 */

src/layouts/BaseLayout.vue

@@ -56,10 +56,14 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 30px;
+  height: 36px;
   padding: 0 12px;
   background-color: var(--bg-topbar);
   border-bottom: 1px solid var(--border-default);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  /* 置顶，确保阴影覆盖下方内容 */
+  position: relative;
+  z-index: 10;
 }
 
 .base-layout__topbar-title {
@@ -72,7 +76,7 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
 .base-layout__topbar-game-icon {
   display: flex;
   align-items: center;
-  font-size: 16px;
+  font-size: 18px;
   line-height: 1;
   height: 100%;
 }
@@ -80,8 +84,8 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
 .base-layout__topbar-game-name {
   display: flex;
   align-items: center;
-  font-size: 13px;
+  font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1;
   height: 100%;
   color: var(--text-primary);
@@ -102,7 +106,9 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
   height: 100%;
   padding: var(--space-sm);
   background-color: var(--bg-sidebar);
-  border-right: 1px solid var(--border-default);
+  /* 右边框加粗 + 阴影，与内容区形成清晰分界 */
+  border-right: 2px solid var(--border-default);
+  z-index: 5;
 }
 
 .base-layout__sidebar-content {
@@ -111,6 +117,10 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
   height: 100%;
   width: 100%;
   padding-bottom: 72px;
+  /* 内容区用白色卡片承载，与侧边栏底色拉开层次 */
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }
 
 .base-layout__sidebar-bottom {
@@ -131,21 +141,41 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
   height: 100%;
   border-radius: var(--radius-md);
   background-color: var(--bg-surface);
-  box-shadow: var(--shadow-sm);
+  /* 加重的阴影 + 微妙的品牌色顶边，让用户栏从侧边栏中"浮起" */
-  border: 1px solid var(--border-light);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border-top: 2px solid var(--color-primary-light);
+  border-left: 1px solid var(--border-light);
+  border-right: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
 }
 
 .base-layout__resize-handle {
   position: absolute;
-  width: 4px;
+  width: 6px;
   height: 100%;
   top: 0;
   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%
+  );
   transition: background-color 0.2s ease;
 
   &:hover {
-    background-color: var(--border-default);
+    background-color: var(--color-primary-light);
+    background: none;
+  }
+
+  &:active {
+    background-color: var(--color-primary);
   }
 }