feat(web): add authenticated app shell

2026-05-09 16:00:29 +08:00
parent c12320cb79
commit 5aa46d3311
73 changed files with 2571 additions and 250 deletions
@@ -0,0 +1,33 @@
+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 };
+  notifications: { title: string; welcomeTitle: string; welcomeBody: string; hexagramTitle: string; hexagramBody: string; creditsTitle: string; creditsBody: string };
+}
+
+const MOCK_NOTIFS = [
+  { title: 'welcomeTitle', body: 'welcomeBody', unread: true, time: '1天前', timeEn: '1 day ago' },
+  { title: 'hexagramTitle', body: 'hexagramBody', unread: true, time: '2天前', timeEn: '2 days ago' },
+  { title: 'creditsTitle', body: 'creditsBody', unread: false, time: '3天前', timeEn: '3 days ago' },
+  { title: 'welcomeTitle', body: 'welcomeBody', unread: false, time: '5天前', timeEn: '5 days ago' },
+  { title: 'creditsTitle', body: 'creditsBody', unread: false, time: '7天前', timeEn: '7 days ago' },
+];
+
+export default function NotificationPage({ locale, notifications: n }: Props) {
+  return (
+    <div className="flex flex-col gap-6 min-h-full">
+        <h1 className="text-slate-900 text-2xl font-bold">{n.title}</h1>
+        <div className="flex flex-col gap-3">
+          {MOCK_NOTIFS.map((notif, i) => (
+            <div key={i} className="relative bg-white rounded-xl px-5 py-4 flex items-start gap-4 hover:shadow-sm transition-shadow">
+              {notif.unread && <div className="absolute left-4 top-5 w-2 h-2 rounded-full bg-red-500" />}
+              <div className="flex-1 min-w-0 ml-2">
+                <p className={`text-[15px] ${notif.unread ? 'text-slate-900 font-semibold' : 'text-slate-600'}`}>{(n as any)[notif.title]}</p>
+                <p className="text-slate-400 text-[13px] mt-1">{(n as any)[notif.body]}</p>
+              </div>
+              <span className="text-slate-400 text-xs shrink-0 mt-0.5">{locale === 'en' ? notif.timeEn : notif.time}</span>
+            </div>
+          ))}
+        </div>
+    </div>
+  );
+}