wangxiaoji
/
TuringToken
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: unify homepage hero button styles - rounded login button, console-style user avatar with dynamic color

This commit is contained in:
xiezhouwei 2026-06-22 11:27:28 +08:00
parent 4f85cad331
commit 7d30717cd1
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/pages/Home/index.jsx
View File

@ -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>
)}