style:优化界面布局

Author: YueZheng-Sea-angle

src/App.css

@@ -7,30 +7,32 @@
   line-height: 1.6;
   font-weight: 400;
 
-  /* 马卡龙色系调色板 - 和谐柔和的色彩搭配 */
-  --primary-pink: #FFD6E0;           /* 马卡龙粉：主色调 - 更柔和的粉色 */
-  --secondary-pink: #FFEEE6;         /* 马卡龙浅粉：辅助色1 */
-  --accent-pink: #FFECD2;            /* 马卡龙橘粉：辅助色2 */
+  /* 马卡龙色系调色板 - 优化对比度的和谐色彩搭配 */
+  --primary-pink: #F8A5C2;           /* 马卡龙粉：主色调 - 增强对比度 */
+  --secondary-pink: #F4CBA4;         /* 马卡龙浅粉：辅助色1 - 增强饱和度 */
+  --accent-pink: #F0B27A;            /* 马卡龙橘粉：辅助色2 - 增强可见度 */
   --light-pink: #FFF8F5;             /* 接近白色：中性色 */
   --light-pink-1: #FFF8F5;           /* 接近白色：中性色 - 与light-pink一致 */
-  --light-pink-2: #FFEEE6;           /* 浅粉色：与secondary-pink一致 */
-  --mint-green: #D6F5E2;             /* 马卡龙薄荷绿：点缀色1 */
-  --soft-blue: #DDEBF7;              /* 马卡龙蓝：点缀色2 */
-  --lavender: #E4D9FF;               /* 马卡龙薰衣草紫：点缀色3 */
-  --cream-yellow: #FFF2D8;           /* 马卡龙奶油黄：点缀色4 */
-  --text-primary: #5D5B6A;           /* 深灰紫色：主要文字色 - 提高可读性 */
-  --text-secondary: #8D8A97;         /* 中灰紫色：次要文字色 */
-  --text-light: #B5B0BD;             /* 浅灰紫色：提示文字色 */
-  --text-color: #5D5B6A;             /* 文字颜色 - 与text-primary一致 */
+  --light-pink-2: #F9E6D8;           /* 浅粉色：增强对比度 */
+  --mint-green: #A8E6CF;             /* 马卡龙薄荷绿：点缀色1 - 增强饱和度 */
+  --soft-blue: #AED6F1;              /* 马卡龙蓝：点缀色2 - 增强可见度 */
+  --lavender: #C8A8E9;               /* 马卡龙薰衣草紫：点缀色3 - 增强对比度 */
+  --cream-yellow: #F7DC6F;           /* 马卡龙奶油黄：点缀色4 - 增强饱和度 */
+  --text-primary: #4A4458;           /* 深灰紫色：主要文字色 - 进一步增强对比度 */
+  --text-secondary: #6B5B73;         /* 中灰紫色：次要文字色 - 增强可读性 */
+  --text-light: #8B7E8F;             /* 浅灰紫色：提示文字色 - 保持可读性 */
+  --text-color: #4A4458;             /* 文字颜色 - 与text-primary一致 */
   --background-main: #FFFDFA;        /* 极浅粉色：页面背景 */
   --background-secondary: #FFEEE6;   /* 浅粉色：次级背景 */
   --card-background: #FFFFFF;        /* 白色：卡片背景 */
   --neutral-color: #FFFFFF;          /* 中性色 - 与card-background一致 */
   --shadow-pink: rgba(255, 214, 224, 0.2); /* 粉色阴影 */
   --border-color: rgba(255, 214, 224, 0.3);  /* 边框颜色 */
-  --accent-green: #D6F5E2;           /* 马卡龙薄荷绿：替代原来的绿色 */
-  --accent-yellow: #FFF2D8;          /* 马卡龙奶油黄：替代原来的黄色 */
-  --rarity-color: #E4D9FF;           /* 马卡龙薰衣草紫：用于稀有物品边框 */
+  --accent-green: #A8E6CF;           /* 马卡龙薄荷绿：替代原来的绿色 - 增强饱和度 */
+  --accent-yellow: #F7DC6F;          /* 马卡龙奶油黄：替代原来的黄色 - 增强可见度 */
+  --rarity-color: #C8A8E9;           /* 马卡龙薰衣草紫：用于稀有物品边框 - 增强对比度 */
+  --button-text: #FFFFFF;            /* 按钮文字颜色：纯白色确保可读性 */
+  --button-text-dark: #4A4458;      /* 深色按钮文字：深色背景使用 */
 
   color: var(--text-primary);
   background-color: var(--background-main);

src/components/MainMenu/GameActionButtons.tsx

@@ -46,7 +46,7 @@ export const GameActionButtons: React.FC<GameActionButtonsProps> = ({
       <div className="grid grid-cols-2 gap-2">
         <Button
           onClick={onOpenAchievements}
-          variant="secondary"
+          variant="primary"
           size="medium"
           className="w-full py-3 text-sm font-medium"
         >
@@ -55,7 +55,7 @@ export const GameActionButtons: React.FC<GameActionButtonsProps> = ({
 
         <Button
           onClick={onOpenDailyChallenge}
-          variant="secondary"
+          variant="primary"
           size="medium"
           className="w-full py-3 text-sm font-medium"
         >
@@ -64,7 +64,7 @@ export const GameActionButtons: React.FC<GameActionButtonsProps> = ({
 
         <Button
           onClick={onOpenLeaderboard}
-          variant="secondary"
+          variant="success"
           size="medium"
           className="w-full py-3 text-sm font-medium col-span-2"
         >

src/components/auth/Auth.css

@@ -12,12 +12,13 @@
 }
 
 .auth-modal {
-  background: white;
+  background: var(--card-background);
+  border: 2px solid var(--primary-pink);
   border-radius: 16px;
   padding: 2rem;
   width: 100%;
   max-width: 400px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 60px rgba(248, 165, 194, 0.3);
   position: relative;
   animation: authModalSlideIn 0.3s ease-out;
 }
@@ -41,12 +42,13 @@
 .auth-title {
   font-size: 2rem;
   font-weight: bold;
-  color: #333;
+  color: var(--text-primary);
   margin-bottom: 0.5rem;
+  text-shadow: 0 1px 3px rgba(248, 165, 194, 0.2);
 }
 
 .auth-subtitle {
-  color: #666;
+  color: var(--text-secondary);
   font-size: 1rem;
 }
 
@@ -63,25 +65,27 @@
 }
 
 .form-label {
-  font-weight: 500;
-  color: #333;
+  font-weight: 600;
+  color: var(--text-primary);
   font-size: 0.9rem;
 }
 
 .form-input {
   padding: 0.75rem;
-  border: 2px solid #e1e5e9;
+  border: 2px solid var(--border-color);
   border-radius: 8px;
   font-size: 1rem;
-  color: #333;
-  background-color: #fff;
-  transition: border-color 0.2s ease;
+  color: var(--text-primary);
+  background-color: var(--card-background);
+  transition: all 0.2s ease;
   outline: none;
+  font-weight: 500;
 }
 
 .form-input:focus {
   border-color: var(--primary-pink);
-  box-shadow: 0 0 0 3px rgba(248, 181, 215, 0.1);
+  box-shadow: 0 0 0 3px rgba(248, 165, 194, 0.2);
+  background-color: var(--light-pink);
 }
 
 .form-input::placeholder {
@@ -133,21 +137,23 @@
 }
 
 .auth-button {
-  background: linear-gradient(135deg, var(--primary-pink) 0%, var(--secondary-pink) 100%);
-  color: white;
+  background: linear-gradient(135deg, var(--primary-pink) 0%, var(--accent-pink) 100%);
+  color: var(--button-text);
   border: none;
   padding: 0.875rem;
   border-radius: 8px;
   font-size: 1rem;
-  font-weight: 500;
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: all 0.2s ease;
   margin-top: 0.5rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .auth-button:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(248, 181, 215, 0.3);
+  box-shadow: 0 8px 25px rgba(248, 165, 194, 0.4);
+  background: linear-gradient(135deg, var(--accent-pink) 0%, var(--primary-pink) 100%);
 }
 
 .auth-button:disabled {
@@ -181,8 +187,9 @@
 }
 
 .auth-switch-text {
-  color: #666;
+  color: var(--text-secondary);
   margin-bottom: 0.5rem;
+  font-weight: 500;
 }
 
 .auth-switch-button {
@@ -201,8 +208,9 @@
 
 .password-requirements {
   font-size: 0.8rem;
-  color: #666;
+  color: var(--text-secondary);
   margin-top: 0.25rem;
+  font-weight: 500;
 }
 
 .app-logo {

src/components/auth/UserProfile.css

@@ -13,18 +13,24 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.9);  /* 增强背景不透明度 */
+  border: 2px solid var(--primary-pink);  /* 使用主题色边框 */
   border-radius: 50px;
   padding: 0.5rem 1rem;
-  color: white;
+  color: var(--text-primary);  /* 使用主题文字色 */
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: all 0.2s ease;
   font-size: 0.9rem;
+  font-weight: 600;  /* 增强文字重量 */
+  box-shadow: 0 4px 12px rgba(248, 165, 194, 0.3);  /* 添加主题色阴影 */
+  backdrop-filter: blur(8px);  /* 添加模糊效果 */
 }
 
 .user-profile-button:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--light-pink);  /* 悬停时使用主题浅色 */
+  border-color: var(--accent-pink);  /* 悬停时边框颜色加深 */
+  transform: translateY(-1px);  /* 轻微上移效果 */
+  box-shadow: 0 6px 20px rgba(248, 165, 194, 0.4);  /* 增强阴影 */
 }
 
 .user-avatar {
@@ -33,19 +39,24 @@
   height: 32px;
   border-radius: 50%;
   background: var(--primary-pink);
+  border: 2px solid var(--accent-pink);  /* 添加边框增强对比 */
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  font-weight: bold;
-  color: white;
+  font-weight: 700;  /* 增强文字重量 */
+  color: var(--button-text);  /* 使用按钮文字色确保可见 */
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(248, 165, 194, 0.3);  /* 添加阴影 */
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  /* 添加文字阴影 */
 }
 
 .user-avatar:hover {
-  transform: scale(1.05);
+  transform: scale(1.08);  /* 轻微增大缩放效果 */
+  border-color: var(--secondary-pink);
+  box-shadow: 0 4px 15px rgba(248, 165, 194, 0.5);  /* 增强悬停阴影 */
 }
 
 .user-avatar.with-frame {
@@ -75,16 +86,19 @@
 }
 
 .user-name {
-  font-weight: 500;
+  font-weight: 600;  /* 增强文字重量 */
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--text-primary);  /* 确保使用主题文字色 */
 }
 
 .dropdown-arrow {
   font-size: 0.7rem;
   transition: transform 0.2s ease;
+  color: var(--text-primary);  /* 确保箭头颜色可见 */
+  font-weight: 700;
 }
 
 .user-profile-button[aria-expanded="true"] .dropdown-arrow {
@@ -96,13 +110,14 @@
   top: 100%;
   right: 0;
   margin-top: 0.5rem;
-  background: white;
+  background: rgba(255, 255, 255, 0.98);  /* 轻微透明的背景 */
   border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 20px 60px rgba(248, 165, 194, 0.4);  /* 使用主题色阴影 */
   min-width: 220px;
   z-index: 1000;
   animation: dropdownSlideIn 0.2s ease-out;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--primary-pink);  /* 使用主题色边框 */
+  backdrop-filter: blur(10px);  /* 添加模糊效果 */
 }
 
 @keyframes dropdownSlideIn {
@@ -132,13 +147,14 @@
 }
 
 .user-info .label {
-  color: #666;
+  color: var(--text-secondary);  /* 使用主题次要文字色 */
   font-size: 0.9rem;
+  font-weight: 500;
 }
 
 .user-info .value {
-  color: #333;
-  font-weight: 500;
+  color: var(--text-primary);  /* 使用主题主要文字色 */
+  font-weight: 600;  /* 增强文字重量 */
   font-size: 0.9rem;
 }
 
@@ -210,12 +226,15 @@
   text-align: left;
   cursor: pointer;
   font-size: 0.9rem;
-  transition: background-color 0.2s ease;
+  font-weight: 500;
+  color: var(--text-primary);  /* 使用主题文字色 */
+  transition: all 0.2s ease;
   border-radius: 0 0 12px 12px;
 }
 
 .dropdown-item:hover {
-  background: #f8f9fa;
+  background: var(--light-pink-2);  /* 使用主题浅色背景 */
+  color: var(--text-primary);
 }
 
 .logout-button {
@@ -235,6 +254,30 @@
   z-index: 999;
 }
 
+/* 针对不同页面背景的额外优化 */
+.puzzle-game .user-profile-button,
+.main-menu .user-profile-button,
+.settings-page .user-profile-button {
+  background: rgba(255, 255, 255, 0.95);  /* 在游戏页面增强背景不透明度 */
+  border: 2px solid var(--primary-pink);
+  box-shadow: 0 6px 20px rgba(248, 165, 194, 0.4);  /* 增强阴影效果 */
+}
+
+.puzzle-game .user-profile-button:hover,
+.main-menu .user-profile-button:hover,
+.settings-page .user-profile-button:hover {
+  background: var(--light-pink);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(248, 165, 194, 0.5);
+}
+
+/* 确保在夜间模式下也清晰可见 */
+.night-mode .user-profile-button {
+  background: rgba(255, 255, 255, 0.98);
+  border-color: var(--accent-pink);
+  box-shadow: 0 6px 20px rgba(200, 168, 233, 0.4);
+}
+
 @media (max-width: 768px) {
   .user-name {
     display: none;
@@ -243,6 +286,10 @@
   .user-dropdown {
     right: -10px;
   }
+  
+  .user-profile-button {
+    padding: 0.4rem 0.8rem;  /* 移动设备上稍微减小内边距 */
+  }
 }
 
 /* 个人资料按钮样式 */