feat(theme): 更新主题颜色和布局样式

- 修改主色调为紫色(#8077FF)
- 重构布局组件使用CSS变量
- 添加侧边栏Logo组件
- 更新favicon图标

src/layout/components/Header.vue

@@ -40,11 +40,19 @@ function logout() {
   align-items: center;
   height: 100%;
   padding: 0 20px;
+  color: var(--admin-text-primary);
 
   .title {
     font-size: 20px;
     font-weight: 600;
     margin: 0;
+    color: var(--admin-text-primary);
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
   }
 
   .user-info {
@@ -52,9 +60,10 @@ function logout() {
     align-items: center;
     gap: 8px;
     cursor: pointer;
+    color: var(--admin-text-secondary);
 
     &:hover {
-      color: #fff;
+      color: var(--admin-text-primary);
     }
   }
 }

src/layout/components/Sidebar/SidebarLogo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="sidebar-logo">
+    <div class="logo-icon">
+      <img :src="Logo" alt="游戏盾" />
+    </div>
+    <span class="logo-text">游戏盾SDK</span>
+  </div>
+</template>
+<script setup lang="ts">
+import Logo from '@/assets/logo/logo.png'
+</script>
+
+<style scoped lang="scss">
+.sidebar-logo {
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 12px;
+  padding: 0 20px;
+
+  .logo-icon {
+    width: 34px;
+    height: 34px;
+    flex-shrink: 0;
+  }
+
+  .logo-text {
+    color: var(--admin-text-primary);
+    font-size: 24px;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import SidebarItem from './SidebarItem.vue'
+import SidebarLogo from './SidebarLogo.vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
 const route = useRoute()
@@ -20,18 +21,13 @@ const menuList = computed(() => permissionStore.menuList)
 
 <template>
   <div class="sidebar">
-    <div class="sidebar-logo">
-      <span>Admin</span>
-    </div>
+    <SidebarLogo />
 
     <el-scrollbar class="sidebar-scroll">
       <el-menu
         :default-active="activeMenu"
         :unique-opened="true"
         mode="vertical"
-        background-color="#1a1a24"
-        text-color="rgba(255,255,255,0.65)"
-        active-text-color="#ffffff"
         router
       >
         <SidebarItem
@@ -49,20 +45,7 @@ const menuList = computed(() => permissionStore.menuList)
   height: 100%;
   display: flex;
   flex-direction: column;
-}
-
-.sidebar-logo {
-  height: 88px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-
-  span {
-    color: #fff;
-    font-size: 24px;
-    font-weight: 600;
-  }
+  background-color: var(--admin-sidebar-bg);
 }
 
 .sidebar-scroll {
@@ -72,16 +55,21 @@ const menuList = computed(() => permissionStore.menuList)
 
 :deep(.el-menu) {
   border-right: none;
+  background-color: transparent !important;
 
   .el-menu-item,
   .el-sub-menu__title {
+    color: var(--admin-text-secondary) !important;
+    background-color: transparent !important;
+
     &:hover {
-      background-color: #2d2d3d !important;
+      background-color: var(--admin-border-color) !important;
     }
   }
 
   .el-menu-item.is-active {
-    background-color: #2d2d3d;
+    color: var(--el-color-primary) !important;
+    background-color: var(--admin-border-color) !important;
   }
 }
 </style>

src/layout/index.vue

@@ -29,7 +29,7 @@ import AppMain from './components/AppMain.vue'
 
 .sidebar-container {
   grid-area: sidebar;
-  background-color: #1a1a24;
+  background-color: var(--admin-sidebar-bg);
 }
 
 .main-wrapper {
@@ -38,12 +38,13 @@ import AppMain from './components/AppMain.vue'
 
 .header-container {
   grid-area: header;
-  background-color: #141419;
+  background-color: var(--admin-header-bg);
+  border-bottom: 1px solid var(--admin-border-color);
 }
 
 .main-container {
   grid-area: main;
-  background-color: #0d0d12;
+  background-color: var(--admin-bg);
   overflow: auto;
 }
 </style>

src/styles/element.scss

@@ -16,3 +16,5 @@
     cursor: not-allowed;
   }
 }
+
+

src/styles/theme.scss

@@ -1,7 +1,7 @@
 // ========== 亮色模式（默认） ==========
 :root {
   // 覆盖 Element Plus 主色
-  --el-color-primary: #409eff;
+  --el-color-primary: #8077FF;
   --el-color-primary-light-3: #79bbff;
   --el-color-primary-light-5: #a0cfff;
   --el-color-primary-dark-2: #337ecc;
@@ -24,7 +24,7 @@
 // ========== 暗色模式 ==========
 html.dark {
   // 覆盖 Element Plus 暗色下的主色（可选调整）
-  --el-color-primary: #409eff;
+  --el-color-primary: #8077FF;
   --el-color-primary-light-3: #3375b9;
   --el-color-primary-light-5: #2a598a;
   --el-color-primary-dark-2: #66b1ff;