⚡️ feat: add main page layout with navigation and footer

feat: create random labels page feat: implement login page with OpenID Connect support feat: add Gravatar component for user avatars feat: create Navbar component with navigation menu chore: create Sidebar component placeholder feat: implement login form with OIDC and email/password options feat: add reusable button component feat: create card component for structured content display feat: implement input component for forms feat: create label component for form labels feat: add navigation menu component for site navigation chore: add configuration file for site metadata feat: implement device context for responsive design feat: add utility functions for class name management feat: define OIDC configuration model feat: define base response model for API responses feat: define user model for user data feat: implement i18n for internationalization support feat: add English and Chinese translations for login chore: create index for locale resources chore: add blog home view placeholder
2025-09-08 18:26:24 +00:00 · 2025-07-24 09:22:50 +08:00
parent 19c8a9eac5
commit 9ca307f4d9
57 changed files with 2453 additions and 108 deletions
--- a/web/src/components/Gravatar.tsx
+++ b/web/src/components/Gravatar.tsx
@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import crypto from "crypto";
+
+// 生成 Gravatar URL 的函数
+function getGravatarUrl(email: string, size: number = 40, defaultType: string = "identicon"): string {
+  const hash = crypto.createHash('md5').update(email.toLowerCase().trim()).digest('hex');
+  return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=${defaultType}`;
+}
+
+interface GravatarAvatarProps {
+  email: string;
+  size?: number;
+  className?: string;
+  alt?: string;
+  url?: string;
+  defaultType?: 'mm' | 'identicon' | 'monsterid' | 'wavatar' | 'retro' | 'robohash' | 'blank';
+}
+
+const GravatarAvatar: React.FC<GravatarAvatarProps> = ({
+  email,
+  size = 40,
+  className = "",
+  alt = "avatar",
+  url,
+  defaultType = "identicon"
+}) => {
+  // 如果有自定义URL，使用自定义URL
+  if (url) {
+    return (
+      <Image
+        src={url}
+        width={size}
+        height={size}
+        className={`rounded-full object-cover ${className}`}
+        alt={alt}
+        referrerPolicy="no-referrer"
+      />
+    );
+  }
+
+  // 使用 Gravatar
+  const gravatarUrl = getGravatarUrl(email, size, defaultType);
+  
+  return (
+    <Image
+      src={gravatarUrl}
+      width={size}
+      height={size}
+      className={`rounded-full object-cover ${className}`}
+      alt={alt}
+      referrerPolicy="no-referrer"
+    />
+  );
+};
+
+// 用户类型定义（如果还没有的话）
+interface User {
+  email?: string;
+  displayName?: string;
+  name?: string;
+  avatarUrl?: string;
+}
+
+export function getGravatarByUser(user?: User, className: string = ""): React.ReactElement {
+  if (!user) {
+    return <GravatarAvatar email="" className={className} />;
+  }
+  return (
+    <GravatarAvatar
+      email={user.email || ""}
+      size={40}
+      className={className}
+      alt={user.displayName || user.name || "User Avatar"}
+      url={user.avatarUrl}
+    />
+  );
+}
+
+export default GravatarAvatar;