qzl/eryao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add authenticated app shell

Browse Source
This commit is contained in:
zl-q
2026-05-09 16:00:29 +08:00
parent c12320cb79
commit 5aa46d3311
73 changed files with 2571 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/SettingsPage.tsx
+81
View File
@@ -0,0 +1,81 @@
import { logout } from '../lib/auth';
interface Props {
locale: string;
dashboard: { brandName: string; navHome: string; navStore: string; navDivination: string; navManual: string; navAuto: string; navHistory: string; navLanguage: string; navSettings: string; logout: string };
settings: { title: string; profileTitle: string; emailLabel: string; nameLabel: string; joinedLabel: string; pointsTitle: string; pointsBalance: string; accountTitle: string; changeName: string; changeAvatar: string; changeLanguage: string; legalTitle: string; privacy: string; terms: string; logout: string; logoutConfirm: string };
}
export default function SettingsPage({ locale, settings: s }: Props) {
const handleLogout = () => {
if (confirm(s.logoutConfirm)) {
logout().finally(() => {
window.location.href = `/${locale}/login`;
});
}
};
return (
<div className="flex flex-col gap-6 min-h-full">
<h1 className="text-slate-900 text-xl font-bold">{s.title}</h1>
<div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0">
{/* Left column */}
<div className="w-full lg:w-[360px] flex flex-col gap-4 shrink-0">
{/* Profile summary */}
<div className="bg-white rounded-2xl p-[18px] border border-slate-200 flex flex-col gap-3">
<h3 className="text-slate-900 text-sm font-bold">{s.profileTitle}</h3>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-violet-600 flex items-center justify-center text-white text-sm font-bold">U</div>
<div>
<p className="text-slate-900 text-sm font-medium">User</p>
<p className="text-slate-400 text-xs">user@example.com</p>
</div>
</div>
</div>
{/* Points */}
<div className="bg-white rounded-2xl p-5 border border-slate-200 flex items-center gap-4">
<span className="material-symbols-rounded text-violet-600 text-2xl">account_balance_wallet</span>
<div>
<p className="text-slate-400 text-xs">{s.pointsTitle}</p>
<p className="text-slate-900 text-lg font-bold">210 <span className="text-sm font-normal text-slate-400">{s.pointsBalance}</span></p>
</div>
</div>
</div>
{/* Right column */}
<div className="flex-1 flex flex-col gap-4">
{/* Account settings */}
<div className="bg-white rounded-2xl p-6 border border-slate-200 flex flex-col gap-4">
<h3 className="text-slate-900 text-base font-bold">{s.accountTitle}</h3>
<a href={`/${locale}/profile`} className="flex items-center justify-between py-2 hover:bg-slate-50 rounded-lg px-1 transition-colors">
<span className="text-slate-600 text-sm">{s.changeAvatar}</span>
<span className="material-symbols-rounded text-slate-400 text-lg">chevron_right</span>
</a>
<a href={`/${locale}/profile`} className="flex items-center justify-between py-2 hover:bg-slate-50 rounded-lg px-1 transition-colors">
<span className="text-slate-600 text-sm">{s.changeName}</span>
<span className="material-symbols-rounded text-slate-400 text-lg">chevron_right</span>
</a>
<div className="flex items-center justify-between py-2">
<span className="text-slate-600 text-sm">{s.changeLanguage}</span>
<span className="text-slate-400 text-sm">简体中文</span>
</div>
</div>
{/* Legal */}
<div className="bg-white rounded-2xl p-6 border border-slate-200 flex flex-col gap-4">
<h3 className="text-slate-900 text-base font-bold">{s.legalTitle}</h3>
<a href={`/${locale}/privacy`} className="text-slate-600 text-sm hover:text-violet-600">{s.privacy}</a>
<a href={`/${locale}/terms`} className="text-slate-600 text-sm hover:text-violet-600">{s.terms}</a>
</div>
{/* Logout */}
<button onClick={handleLogout} className="bg-white rounded-2xl px-5 py-3.5 border border-red-200 flex items-center justify-between hover:bg-red-50 transition-colors">
<span className="text-red-500 text-sm font-medium">{s.logout}</span>
<span className="material-symbols-rounded text-red-400 text-lg">logout</span>
</button>
</div>
</div>
</div>
);
}