feat: 用户头像（自传>QQ>RainID 优先级 + author_avatar 全接口）+ profile QQ 管理 + RainID 个人中心跳转

2026-08-13 00:09:12 +08:00
parent 299ac3c027
commit 914ad4239b
12 changed files with 224 additions and 17 deletions
@@ -0,0 +1,33 @@
+import React from 'react';
+
+/** 名称哈希 → 0..11 色调组（复用 style.css 的 --fi-* 12 色 MD3 变量，深浅色自适应） */
+function hashTone(name) {
+  let h = 0;
+  const k = String(name || '');
+  for (let i = 0; i < k.length; i += 1) h = (h * 31 + k.charCodeAt(i)) >>> 0;
+  return h % 12;
+}
+
+/**
+ * 圆形用户头像（MD3）：
+ * - src 非空 → 圆形 <img>（object-fit: cover）
+ * - src 空 → 首字兜底（name[0] 大写 + 名称哈希底色）
+ * props: { src, name, size=36, className }
+ */
+export default function Avatar({ src = '', name = '', size = 36, className = '' }) {
+  const style = { width: size, height: size, fontSize: Math.round(size * 0.42) };
+  const base = 'avatar' + (className ? ' ' + className : '');
+  const alt = name ? `${name} 的头像` : '头像';
+  if (src) {
+    return (
+      <span className={base} style={style}>
+        <img src={src} alt={alt} />
+      </span>
+    );
+  }
+  return (
+    <span className={`${base} avatar-fallback tone-${hashTone(name)}`} style={style} role="img" aria-label={alt}>
+      {String(name || '?').charAt(0).toUpperCase()}
+    </span>
+  );
+}