From 7d30717cd1af30d2b4e28d9a2aeac98f577a0a1c Mon Sep 17 00:00:00 2001
From: xiezhouwei <xzw@qx002575.com>
Date: Mon, 22 Jun 2026 11:27:28 +0800
Subject: [PATCH] fix: unify homepage hero button styles - rounded login
 button, console-style user avatar with dynamic color

---
 web/src/pages/Home/index.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/Home/index.jsx b/web/src/pages/Home/index.jsx
index ee8eb8a..b1a3c8b 100644
--- a/web/src/pages/Home/index.jsx
+++ b/web/src/pages/Home/index.jsx
@@ -22,6 +22,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Copy, Check, Code, Terminal, FileCode, Box, Grid3X3, Play, Trophy, PieChart, BookOpen, Search, Sun, Moon, Monitor, Languages } from 'lucide-react';
 import { UserContext } from '../../context/User';
+import { stringToColor } from '../../helpers';
 
 
 /* ==================================================================
@@ -174,12 +175,14 @@ function HeroSection() {
             <HomeThemeToggle />
             <HomeLanguageSelector />
             {userState.user ? (
-              <Link to="/console" className="inline-flex items-center gap-2 bg-white/10 text-white px-4 py-1.5 text-sm font-mono font-medium rounded hover:bg-white/20 border border-white/20 transition-colors duration-200 ml-2">
-                <span className="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center text-[11px] font-bold">{userState.user.username?.charAt(0).toUpperCase()}</span>
-                <span className="hidden sm:inline max-w-[100px] truncate">{userState.user.display_name || userState.user.username}</span>
+              <Link to="/console" className="inline-flex items-center gap-2 bg-white/10 text-white px-3 py-1.5 text-sm rounded-full hover:bg-white/20 border border-white/20 transition-colors duration-200 ml-2">
+                <span className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0" style={{ backgroundColor: stringToColor(userState.user.username) }}>
+                  {userState.user.username?.charAt(0).toUpperCase()}
+                </span>
+                <span className="hidden sm:inline max-w-[100px] truncate text-sm font-medium">{userState.user.display_name || userState.user.username}</span>
               </Link>
             ) : (
-              <Link to="/login" className="inline-flex items-center bg-white text-black px-4 py-1.5 text-sm font-mono font-medium uppercase tracking-widest hover:bg-transparent hover:text-white border border-white transition-colors duration-200 ml-2">
+              <Link to="/login" className="inline-flex items-center bg-white text-black px-4 py-1.5 text-sm font-mono font-medium uppercase tracking-widest rounded hover:bg-transparent hover:text-white border border-white transition-colors duration-200 ml-2">
                 {t("登录")}
               </Link>
             )}