Upload 45 files

components/Emoji.tsx

@@ -7,6 +7,14 @@ interface EmojiProps {
   size?: number | string;
 }
 
+// 智能检测：是否为旧版 Windows 系统 (Windows 7, Vista, XP)
+// Windows NT 6.1 = Windows 7
+// Windows NT 6.0 = Vista
+// Windows NT 5.x = XP
+// Windows 8 (6.2) 及以上系统原生支持彩色 Emoji，无需替换
+const isLegacyWindows = typeof navigator !== 'undefined' && 
+  /Windows NT (5\.|6\.[0-1])/.test(navigator.userAgent);
+
 // 将 Unicode 转换为 Twemoji 兼容的 Hex 文件名
 const getEmojiHex = (emoji: string) => {
   try {
@@ -19,13 +27,37 @@ const getEmojiHex = (emoji: string) => {
 };
 
 export const Emoji: React.FC<EmojiProps> = memo(({ symbol, className = '', size }) => {
-  // 如果不是 Emoji (比如纯数字或字母)，直接渲染文本
+  // 【性能优化】如果是现代系统，直接使用原生字体渲染
+  // 优点：无网络请求、加载快、与文字对齐更完美
+  if (!isLegacyWindows) {
+    return (
+      <span 
+        className={className} 
+        style={{ 
+          fontSize: size, 
+          // 强制指定 Emoji 字体栈，确保在各平台优先调用彩色字体
+          fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", sans-serif',
+          lineHeight: '1em',
+          verticalAlign: 'middle',
+          display: 'inline-block' 
+        }}
+        role="img"
+        aria-label={symbol}
+      >
+        {symbol}
+      </span>
+    );
+  }
+
+  // --- 以下逻辑仅在 Windows 7 等旧系统执行 ---
+
+  // 1. 简单正则判断是否包含 Emoji 字符 (避免对纯文本进行昂贵的 Hex 转换)
   const isEmoji = /\p{Emoji}/u.test(symbol);
-  
   if (!isEmoji) {
     return <span className={className} style={{ fontSize: size }}>{symbol}</span>;
   }
 
+  // 2. 转换为图片链接
   const hex = getEmojiHex(symbol);
   
   // 备用方案：如果转换失败，回退到原生显示
@@ -43,7 +75,7 @@ export const Emoji: React.FC<EmojiProps> = memo(({ symbol, className = '', size
       style={{ 
         width: size || '1em', 
         height: size || '1em',
-        verticalAlign: '-0.1em' // 微调对齐
+        verticalAlign: '-0.1em' // 微调对齐，尽量模拟文字基线
       }}
       onError={(e) => {
         // 加载失败时隐藏图片，显示原生字符
@@ -51,6 +83,9 @@ export const Emoji: React.FC<EmojiProps> = memo(({ symbol, className = '', size
         const span = document.createElement('span');
         span.innerText = symbol;
         span.className = className || '';
+        span.style.fontSize = typeof size === 'number' ? `${size}px` : (size as string) || '';
+        // 继承字体设置以防万一
+        span.style.fontFamily = '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif';
         e.currentTarget.parentElement?.insertBefore(span, e.currentTarget);
       }}
     />