From d01af629f20a62ce1efb9af6a1bd4b7ab021df3f Mon Sep 17 00:00:00 2001
From: Pine <wwork.wss@icloud.com>
Date: Tue, 8 Sep 2026 23:43:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=EF=BC=9A=E4=BA=BA?=
 =?UTF-8?q?=E6=89=8D=E5=88=97=E8=A1=A8=E7=9C=9F=E5=AE=9E=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=20+=20OPC/=E6=B1=82=E8=81=8C=E8=80=85=E5=BE=BD=E7=AB=A0?=
 =?UTF-8?q?=E8=8A=AF=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 头像：人才档案 avatar 字段加载真实头像（圆形裁剪），
  加载失败/无头像时回退渐变首字母，不白屏
- OPC 徽章：昵称右侧小巧胶囊徽章（品牌渐变 + 前导光点 + 微光投影），
  求职者用中性浅灰徽章，替代原纯文本标识
---
 miniprogram/src/pages/hall/index.jsx | 20 +++++++++++++++++---
 miniprogram/src/styles/hall.scss     | 16 +++++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/miniprogram/src/pages/hall/index.jsx b/miniprogram/src/pages/hall/index.jsx
index f22a594..e613013 100644
--- a/miniprogram/src/pages/hall/index.jsx
+++ b/miniprogram/src/pages/hall/index.jsx
@@ -1,4 +1,4 @@
-import { View, Text, Button, ScrollView } from '@tarojs/components';
+import { View, Text, Button, ScrollView, Image } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { useState, useEffect, useCallback } from 'react';
 import { hallOverview, hallTasks, hallTalents, hallJobs, hallServices } from '@/utils/hall';
@@ -150,6 +150,8 @@ function TasksPane({ mode, onMode }) {
 function TalentsPane({ ttype, onTtype }) {
   const [items, setItems] = useState(null);
   const [err, setErr] = useState('');
+  // 头像加载失败的头像集合：回退首字母
+  const [broken, setBroken] = useState({});
   useEffect(() => {
     hallTalents({ type: ttype }).then((d) => setItems(d.items || [])).catch((e) => setErr(e.message));
   }, [ttype]);
@@ -162,9 +164,21 @@ function TalentsPane({ ttype, onTtype }) {
         {(items || []).map((t) => (
           <View key={t.userId} className="hl-card" onClick={() => Taro.navigateTo({ url: `/pages-extra/hall-talent-detail/index?id=${t.userId}` })}>
             <View className="hl-talent">
-              <View className="hl-avatar"><Text>{(t.displayName || '·').slice(0, 1)}</Text></View>
+              <View className="hl-avatar">
+                {t.avatar && !broken[t.userId] ? (
+                  <Image className="hl-avatar-img" src={t.avatar} mode="aspectFill"
+                    onError={() => setBroken((b) => ({ ...b, [t.userId]: true }))} />
+                ) : (
+                  <Text className="hl-avatar-letter">{(t.displayName || '·').slice(0, 1)}</Text>
+                )}
+              </View>
               <View style={{ flex: 1, minWidth: 0 }}>
-                <Text className="hl-name" style={{ marginTop: 0 }}>{t.displayName} · {t.talentType === 'seeker' ? '求职者' : 'OPC'}</Text>
+                <View className="hl-tname">
+                  <Text className="hl-name" style={{ marginTop: 0 }}>{t.displayName}</Text>
+                  <Text className={`hl-badge${t.talentType === 'seeker' ? ' hl-badge--seeker' : ' hl-badge--opc'}`}>
+                    {t.talentType === 'seeker' ? '求职者' : 'OPC'}
+                  </Text>
+                </View>
                 <Text className="hl-desc">{t.headline}</Text>
                 <View className="hl-tags" style={{ marginTop: 10 }}>
                   {(t.fields || []).map((x) => <Text className="hl-tag" key={x}>{x}</Text>)}
diff --git a/miniprogram/src/styles/hall.scss b/miniprogram/src/styles/hall.scss
index 4ca4126..1eeb175 100644
--- a/miniprogram/src/styles/hall.scss
+++ b/miniprogram/src/styles/hall.scss
@@ -78,7 +78,21 @@
 /* 人才 */
 .hl-talent { display: flex; gap: 20rpx; align-items: center; }
 .hl-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: linear-gradient(135deg, #4d7cfe, #7a5ff0);
-  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; flex: none; }
+  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 700; flex: none; overflow: hidden; }
+.hl-avatar-img { width: 88rpx; height: 88rpx; border-radius: 50%; background: #eef1f8; }
+.hl-avatar-letter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
+
+/* 昵称行：姓名 + 身份徽章芯片 */
+.hl-tname { display: flex; align-items: center; }
+.hl-badge { display: inline-flex; align-items: center; height: 32rpx; padding: 0 14rpx; margin-left: 12rpx;
+  border-radius: 999rpx; font-size: 20rpx; font-weight: 600; line-height: 1; flex: none; }
+/* OPC 徽章：品牌渐变 + 前导光点 */
+.hl-badge--opc { background: linear-gradient(135deg, #6b8cff 0%, #9b6bff 100%); color: #fff;
+  box-shadow: 0 4rpx 14rpx rgba(107, 140, 255, .35); }
+.hl-badge--opc::before { content: ''; width: 8rpx; height: 8rpx; border-radius: 50%; margin-right: 8rpx;
+  background: rgba(255, 255, 255, .9); box-shadow: 0 0 6rpx rgba(255, 255, 255, .8); }
+/* 求职者徽章：中性浅灰 */
+.hl-badge--seeker { background: #f0f2f7; color: #8a93a6; border: 1rpx solid #e3e7ef; }
 
 /* 帖子 */
 .hl-post { background: #fff; border-radius: 24rpx; padding: 26rpx 28rpx; margin: 0 0 20rpx;