Просмотр исходного кода

✨ feat(silver-talent): 优化银龄人才页面设计与交互

- 重构页面视觉风格为水墨风格,增强传统文化氛围
- 优化颜色系统,新增淡墨色、极淡文字色等配色方案
- 改进人才卡片设计,使用圆角、半透明背景和边框效果
- 优化加载状态动画,提升用户体验
- 调整搜索过滤逻辑,支持按机构名称搜索

♻️ refactor(silver-talent): 优化人才数据结构与查询逻辑

- 精简模拟数据,移除冗余字段(phone, email, createdAt等)
- 重构useQuery查询逻辑,简化分页处理
- 优化技能标签显示逻辑,限制最多显示3个标签
- 移除演示数据/真实数据切换功能

💄 style(silver-talent): 优化排版与视觉细节

- 使用衬线字体(font-serif)增强传统文化感
- 调整文本颜色和大小,提升可读性
- 优化统计卡片样式,增强视觉层次感
- 改进技能标签样式,使用彩色边框和背景
- 优化提示信息样式,使用半透明背景和边框效果
yourname 10 месяцев назад
Родитель
Сommit
faf50f378c
1 измененных файлов с 230 добавлено и 164 удалено
  1. 230 164
      src/client/mobile/pages/SilverTalentsPage.tsx

+ 230 - 164
src/client/mobile/pages/SilverTalentsPage.tsx

@@ -19,18 +19,29 @@ const COLORS = {
   },
   text: {
     primary: '#2f1f0f',    // 墨色文字
+    secondary: '#5d4e3b',  // 淡墨文字
+    light: '#8b7355',      // 极淡文字
+  }
+};
+
+// 6组模拟数据 - 银龄人才
+const mockTalents = [
+  {
+    id: 1,
+    realName: '张老先生',
+    nickname: '张老师',
+    organization: '退休中学教师',
+    age: 65,
+    gender: 'MALE',
+    avatarUrl: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=face',
+    personalIntro: '退休中学语文教师,40年教学经验,擅长书法和传统文化教育',
+    personalSkills: '书法,国画,古典文学,诗词创作,毛笔字教学',
     certificationStatus: 'CERTIFIED',
-    certificationInfo: '高级教师职称证书、书法协会高级会员证',
     jobSeekingStatus: 'ACTIVELY_SEEKING',
-    jobSeekingRequirements: '希望寻找文化教育类兼职工作,时间灵活,可在家指导',
-    totalPoints: 1250,
     knowledgeShareCount: 8,
     knowledgeReadCount: 356,
     knowledgeRankingScore: 92.5,
-    knowledgeLikeCount: 45,
-    knowledgeCommentCount: 12,
-    createdAt: '2024-01-15T10:30:00Z',
-    updatedAt: '2024-01-20T14:45:00Z'
+    totalPoints: 1250,
   },
   {
     id: 2,
@@ -39,24 +50,15 @@ const COLORS = {
     organization: '退休护士长',
     age: 62,
     gender: 'FEMALE',
-    phone: '13800138002',
-    email: 'linainai@email.com',
     avatarUrl: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=400&h=400&fit=crop&crop=face',
     personalIntro: '退休护士长,35年临床护理经验,擅长老年护理和健康咨询',
     personalSkills: '老年护理,健康咨询,营养指导,基础医疗,心理辅导',
-    personalExperience: '三甲医院护士长,专注老年护理35年,具有丰富的老年照护经验',
     certificationStatus: 'CERTIFIED',
-    certificationInfo: '主管护师证书、高级营养师证书',
     jobSeekingStatus: 'OPEN_TO_OPPORTUNITIES',
-    jobSeekingRequirements: '愿意提供上门健康咨询和护理指导服务',
-    totalPoints: 980,
     knowledgeShareCount: 6,
     knowledgeReadCount: 289,
     knowledgeRankingScore: 88.3,
-    knowledgeLikeCount: 38,
-    knowledgeCommentCount: 15,
-    createdAt: '2024-01-18T09:15:00Z',
-    updatedAt: '2024-01-22T11:30:00Z'
+    totalPoints: 980,
   },
   {
     id: 3,
@@ -65,24 +67,15 @@ const COLORS = {
     organization: '退休工程师',
     age: 68,
     gender: 'MALE',
-    phone: '13800138003',
-    email: 'wangdaye@email.com',
     avatarUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face',
     personalIntro: '退休高级工程师,42年机械制造经验,擅长技术指导和工艺改进',
     personalSkills: '机械设计,工艺改进,技术指导,质量管理,项目管理',
-    personalExperience: '大型国企高级工程师,参与多项国家重点项目建设,具有丰富的技术管理经验',
     certificationStatus: 'CERTIFIED',
-    certificationInfo: '高级工程师职称证书、注册机械工程师证书',
     jobSeekingStatus: 'ACTIVELY_SEEKING',
-    jobSeekingRequirements: '希望为中小企业提供技术咨询和工艺改进服务',
-    totalPoints: 1560,
     knowledgeShareCount: 12,
     knowledgeReadCount: 445,
     knowledgeRankingScore: 95.2,
-    knowledgeLikeCount: 67,
-    knowledgeCommentCount: 23,
-    createdAt: '2024-01-12T08:45:00Z',
-    updatedAt: '2024-01-25T16:20:00Z'
+    totalPoints: 1560,
   },
   {
     id: 4,
@@ -91,24 +84,15 @@ const COLORS = {
     organization: '退休音乐教师',
     age: 60,
     gender: 'FEMALE',
-    phone: '13800138004',
-    email: 'chenayi@email.com',
     avatarUrl: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop&crop=face',
     personalIntro: '退休音乐教师,38年音乐教育经验,擅长钢琴教学和声乐指导',
     personalSkills: '钢琴教学,声乐指导,音乐理论,合唱指挥,乐器调律',
-    personalExperience: '音乐学院毕业,曾任重点中学音乐教师,组建过多个学生合唱团',
     certificationStatus: 'CERTIFIED',
-    certificationInfo: '高级音乐教师资格证、钢琴十级证书',
     jobSeekingStatus: 'OPEN_TO_OPPORTUNITIES',
-    jobSeekingRequirements: '希望提供钢琴教学和声乐指导服务,可上门教学',
-    totalPoints: 1100,
     knowledgeShareCount: 7,
     knowledgeReadCount: 312,
     knowledgeRankingScore: 89.7,
-    knowledgeLikeCount: 52,
-    knowledgeCommentCount: 18,
-    createdAt: '2024-01-20T14:30:00Z',
-    updatedAt: '2024-01-26T10:15:00Z'
+    totalPoints: 1100,
   },
   {
     id: 5,
@@ -117,24 +101,15 @@ const COLORS = {
     organization: '退休特级厨师',
     age: 66,
     gender: 'MALE',
-    phone: '13800138005',
-    email: 'liuyeye@email.com',
     avatarUrl: 'https://images.unsplash.com/photo-1557862921-37829c790f19?w=400&h=400&fit=crop&crop=face',
     personalIntro: '退休特级厨师,45年烹饪经验,擅长川菜和家常菜制作',
     personalSkills: '川菜制作,家常菜,面点制作,营养搭配,厨艺培训',
-    personalExperience: '五星级酒店主厨,曾获全国烹饪大赛金奖,擅长川菜和创新菜品',
     certificationStatus: 'CERTIFIED',
-    certificationInfo: '中式烹调高级技师证书、营养师证书',
     jobSeekingStatus: 'ACTIVELY_SEEKING',
-    jobSeekingRequirements: '希望提供私厨服务和烹饪培训,可承接家庭聚餐',
-    totalPoints: 1340,
     knowledgeShareCount: 9,
     knowledgeReadCount: 378,
     knowledgeRankingScore: 91.8,
-    knowledgeLikeCount: 58,
-    knowledgeCommentCount: 21,
-    createdAt: '2024-01-10T11:20:00Z',
-    updatedAt: '2024-01-24T15:45:00Z'
+    totalPoints: 1340,
   },
   {
     id: 6,
@@ -143,65 +118,39 @@ const COLORS = {
     organization: '退休园艺师',
     age: 63,
     gender: 'FEMALE',
-    phone: '13800138006',
-    email: 'zhaonainai@email.com',
     avatarUrl: 'https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?w=400&h=400&fit=crop&crop=face',
     personalIntro: '退休园艺师,40年园艺经验,擅长花卉养护和园林设计',
     personalSkills: '花卉养护,园林设计,盆景制作,植物医生,园艺培训',
-    personalExperience: '园林局退休,曾为多个公园和小区设计园林景观,具有丰富的植物养护经验',
     certificationStatus: 'CERTIFIED',
-    certificationInfo: '高级园艺师证书、园林设计师证书',
     jobSeekingStatus: 'OPEN_TO_OPPORTUNITIES',
-    jobSeekingRequirements: '提供家庭园艺指导和阳台花园设计服务',
-    totalPoints: 1050,
     knowledgeShareCount: 5,
     knowledgeReadCount: 267,
     knowledgeRankingScore: 87.4,
-    knowledgeLikeCount: 41,
-    knowledgeCommentCount: 14,
-    createdAt: '2024-01-22T13:25:00Z',
-    updatedAt: '2024-01-27T09:30:00Z'
+    totalPoints: 1050,
   }
 ];
 
-// 水墨风格组件实现
 const SilverTalentsPage: React.FC = () => {
   const navigate = useNavigate();
   const [searchQuery, setSearchQuery] = useState('');
-  const [page, setPage] = useState(1);
-  const [showMockData, setShowMockData] = useState(true);
-
-  const COLORS = {
-    ink: { light: '#f5f3f0', medium: '#d4c4a8', dark: '#8b7355' },
-    accent: { red: '#a85c5c', blue: '#4a6b7c', green: '#5c7c5c' }
-  };
 
   // 使用模拟数据
   const { data, isLoading } = useQuery({
-    queryKey: ['silver-talents', searchQuery, page],
+    queryKey: ['silver-talents', searchQuery],
     queryFn: async () => {
-      // 模拟API响应
       await new Promise(resolve => setTimeout(resolve, 800));
       
-      // 搜索过滤
       let filteredTalents = mockTalents;
       if (searchQuery) {
         filteredTalents = mockTalents.filter(talent => 
           talent.realName.includes(searchQuery) || 
           talent.personalSkills.includes(searchQuery) ||
-          talent.personalIntro.includes(searchQuery)
+          talent.personalIntro.includes(searchQuery) ||
+          talent.organization.includes(searchQuery)
         );
       }
       
-      return {
-        data: filteredTalents,
-        pagination: {
-          total: filteredTalents.length,
-          current: page,
-          pageSize: 20,
-          totalPages: Math.ceil(filteredTalents.length / 20)
-        }
-      };
+      return { data: filteredTalents };
     }
   });
 
@@ -209,83 +158,141 @@ const SilverTalentsPage: React.FC = () => {
 
   // 技能标签颜色映射
   const skillColors = [
-    'bg-blue-100 text-blue-800',
-    'bg-green-100 text-green-800',
-    'bg-purple-100 text-purple-800',
-    'bg-yellow-100 text-yellow-800',
-    'bg-pink-100 text-pink-800',
-    'bg-indigo-100 text-indigo-800'
+    { bg: 'bg-green-50', text: 'text-green-800', border: 'border-green-200' },
+    { bg: 'bg-blue-50', text: 'text-blue-800', border: 'border-blue-200' },
+    { bg: 'bg-purple-50', text: 'text-purple-800', border: 'border-purple-200' },
+    { bg: 'bg-orange-50', text: 'text-orange-800', border: 'border-orange-200' },
+    { bg: 'bg-pink-50', text: 'text-pink-800', border: 'border-pink-200' },
+    { bg: 'bg-indigo-50', text: 'text-indigo-800', border: 'border-indigo-200' },
   ];
 
-  const getSkillColor = (index: number) => skillColors[index % skillColors.length];
-
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* 头部导航 */}
-      <header className="sticky top-0 bg-white shadow-sm border-b border-gray-200 px-4 py-4">
+    <div className="min-h-screen" style={{ backgroundColor: COLORS.ink.light }}>
+      {/* 头部导航 - 水墨风格 */}
+      <header 
+        className="shadow-sm sticky top-0 z-10 border-b border-opacity-20 px-4 py-4"
+        style={{ 
+          backgroundColor: COLORS.ink.light, 
+          borderColor: COLORS.ink.medium 
+        }}
+      >
         <div className="flex items-center justify-between">
-          <h1 className="text-xl font-bold text-gray-800">银龄人才库</h1>
-          <div className="flex items-center space-x-3">
-            <button
-              onClick={() => setShowMockData(!showMockData)}
-              className="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded-full"
-            >
-              {showMockData ? '演示数据' : '真实数据'}
-            </button>
-            <UserIcon className="w-6 h-6 text-gray-600 cursor-pointer" onClick={() => navigate('/profile')} />
-          </div>
+          <h1 
+            className="font-serif text-2xl font-bold tracking-wide"
+            style={{ color: COLORS.text.primary }}
+          >
+            银龄人才库
+          </h1>
+          <UserIcon 
+            className="w-6 h-6 cursor-pointer transition-colors duration-300 hover:text-orange-600"
+            style={{ color: COLORS.ink.dark }}
+            onClick={() => navigate('/profile')} 
+          />
         </div>
       </header>
 
-      {/* 搜索栏 */}
-      <div className="p-4">
-        <div className="relative">
-          <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+      {/* 搜索栏 - 水墨风格 */}
+      <div className="px-4 py-4">
+        <div 
+          className="flex items-center rounded-full px-4 py-3 shadow-sm border transition-all duration-300 focus-within:shadow-md"
+          style={{ 
+            backgroundColor: 'rgba(255,255,255,0.7)',
+            borderColor: COLORS.ink.medium 
+          }}
+        >
+          <MagnifyingGlassIcon 
+            className="w-5 h-5 mr-3"
+            style={{ color: COLORS.ink.dark }} 
+          />
           <input
             type="text"
             placeholder="搜索银龄人才..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            className="flex-1 bg-transparent outline-none font-sans"
+            style={{ color: COLORS.text.primary }}
           />
         </div>
       </div>
 
-      {/* 统计卡片 */}
+      {/* 统计卡片 - 水墨风格 */}
       <div className="px-4 mb-4">
         <div className="grid grid-cols-3 gap-3">
-          <div className="bg-white rounded-lg p-3 text-center shadow-sm">
-            <div className="text-2xl font-bold text-blue-600">{talents.length}</div>
-            <div className="text-xs text-gray-600">认证人才</div>
+          <div 
+            className="rounded-xl p-3 text-center shadow-sm backdrop-blur-sm"
+            style={{ 
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              border: `1px solid ${COLORS.ink.medium}`
+            }}
+          >
+            <div className="font-serif text-xl font-bold" style={{ color: COLORS.accent.green }}>
+              {talents.length}
+            </div>
+            <div className="font-sans text-xs" style={{ color: COLORS.text.secondary }}>
+              认证人才
+            </div>
           </div>
-          <div className="bg-white rounded-lg p-3 text-center shadow-sm">
-            <div className="text-2xl font-bold text-green-600">
+          <div 
+            className="rounded-xl p-3 text-center shadow-sm backdrop-blur-sm"
+            style={{ 
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              border: `1px solid ${COLORS.ink.medium}`
+            }}
+          >
+            <div className="font-serif text-xl font-bold" style={{ color: COLORS.accent.blue }}>
               {talents.reduce((sum, t) => sum + t.totalPoints, 0)}
             </div>
-            <div className="text-xs text-gray-600">总积分</div>
+            <div className="font-sans text-xs" style={{ color: COLORS.text.secondary }}>
+              总积分
+            </div>
           </div>
-          <div className="bg-white rounded-lg p-3 text-center shadow-sm">
-            <div className="text-2xl font-bold text-purple-600">
+          <div 
+            className="rounded-xl p-3 text-center shadow-sm backdrop-blur-sm"
+            style={{ 
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              border: `1px solid ${COLORS.ink.medium}`
+            }}
+          >
+            <div className="font-serif text-xl font-bold" style={{ color: COLORS.accent.red }}>
               {talents.reduce((sum, t) => sum + t.knowledgeShareCount, 0)}
             </div>
-            <div className="text-xs text-gray-600">知识分享</div>
+            <div className="font-sans text-xs" style={{ color: COLORS.text.secondary }}>
+              知识分享
+            </div>
           </div>
         </div>
       </div>
 
-      {/* 人才列表 */}
+      {/* 人才列表 - 水墨风格 */}
       <div className="px-4 pb-20">
         {isLoading ? (
           <div className="space-y-4">
             {[...Array(6)].map((_, i) => (
-              <div key={i} className="bg-white rounded-lg shadow-sm p-4">
-                <div className="flex items-center space-x-4">
-                  <div className="w-16 h-16 bg-gray-200 rounded-full animate-pulse"></div>
-                  <div className="space-y-2 flex-1">
-                    <div className="h-4 bg-gray-200 rounded w-1/2 animate-pulse"></div>
-                    <div className="h-3 bg-gray-200 rounded w-3/4 animate-pulse"></div>
-                    <div className="h-3 bg-gray-200 rounded w-1/3 animate-pulse"></div>
-                  </div>
+              <div 
+                key={i} 
+                className="flex items-center p-4 rounded-xl shadow-sm backdrop-blur-sm"
+                style={{ 
+                  backgroundColor: 'rgba(255,255,255,0.8)',
+                  border: `1px solid ${COLORS.ink.medium}`
+                }}
+              >
+                <div 
+                  className="w-16 h-16 rounded-full mr-4"
+                  style={{ backgroundColor: COLORS.ink.medium }}
+                />
+                <div className="flex-1 space-y-2">
+                  <div 
+                    className="h-4 rounded"
+                    style={{ backgroundColor: COLORS.ink.medium, width: '60%' }}
+                  />
+                  <div 
+                    className="h-3 rounded"
+                    style={{ backgroundColor: COLORS.ink.light, width: '80%' }}
+                  />
+                  <div 
+                    className="h-3 rounded"
+                    style={{ backgroundColor: COLORS.ink.light, width: '40%' }}
+                  />
                 </div>
               </div>
             ))}
@@ -295,7 +302,11 @@ const SilverTalentsPage: React.FC = () => {
             {talents.map((talent: any) => (
               <div
                 key={talent.id}
-                className="bg-white rounded-lg shadow-sm p-4 cursor-pointer hover:shadow-md transition-shadow border-l-4 border-blue-500"
+                className="p-4 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer backdrop-blur-sm"
+                style={{ 
+                  backgroundColor: 'rgba(255,255,255,0.8)',
+                  border: `1px solid ${COLORS.ink.medium}`
+                }}
                 onClick={() => navigate(`/silver-talents/${talent.id}`)}
               >
                 <div className="flex items-start space-x-4">
@@ -304,106 +315,161 @@ const SilverTalentsPage: React.FC = () => {
                     <img
                       src={talent.avatarUrl || '/images/placeholder.jpg'}
                       alt={talent.realName}
-                      className="w-20 h-20 rounded-full object-cover border-2 border-gray-200"
+                      className="w-20 h-20 rounded-full object-cover border-2"
+                      style={{ borderColor: COLORS.ink.medium }}
                       onError={(e) => {
                         (e.target as HTMLImageElement).src = '/images/placeholder.jpg';
                       }}
                     />
                     {talent.certificationStatus === 'CERTIFIED' && (
-                      <div className="absolute -top-1 -right-1 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs shadow-lg">
+                      <div 
+                        className="absolute -top-1 -right-1 w-6 h-6 rounded-full flex items-center justify-center text-white text-xs shadow-lg"
+                        style={{ backgroundColor: COLORS.accent.green }}
+                      >
                       </div>
                     )}
                   </div>
-                  
-                  {/* 信息区域 */}
+
+                  {/* 内容区域 */}
                   <div className="flex-1 min-w-0">
-                    {/* 姓名和基础信息 */}
                     <div className="flex items-center justify-between mb-2">
-                      <h3 className="font-bold text-lg text-gray-800">{talent.realName}</h3>
-                      <span className="text-sm text-gray-500">{talent.nickname}</span>
+                      <h3 
+                        className="font-serif text-lg font-bold"
+                        style={{ color: COLORS.text.primary }}
+                      >
+                        {talent.realName}
+                      </h3>
+                      <span 
+                        className="font-sans text-sm"
+                        style={{ color: COLORS.text.light }}
+                      >
+                        {talent.nickname}
+                      </span>
                     </div>
-                    
-                    <p className="text-sm text-gray-600 mb-2">
+
+                    <p className="font-sans text-sm mb-2" style={{ color: COLORS.text.secondary }}>
                       <span className="font-semibold">{talent.age}岁</span>
                       {talent.organization && (
-                        <span className="ml-2 text-gray-500">· {talent.organization}</span>
+                        <span className="ml-2" style={{ color: COLORS.text.light }}>
+                          · {talent.organization}
+                        </span>
                       )}
                     </p>
 
                     {/* 个人简介 */}
-                    <p className="text-sm text-gray-700 mb-3 line-clamp-2">
+                    <p 
+                      className="font-sans text-sm mb-3 line-clamp-2"
+                      style={{ color: COLORS.text.secondary }}
+                    >
                       {talent.personalIntro}
                     </p>
 
                     {/* 技能标签 */}
                     <div className="flex flex-wrap gap-1 mb-3">
-                      {talent.personalSkills?.split(',').slice(0, 4).map((skill: string, i: number) => (
+                      {talent.personalSkills?.split(',').slice(0, 3).map((skill: string, i: number) => (
                         <span 
                           key={i} 
-                          className={`px-2 py-1 text-xs rounded-full ${getSkillColor(i)}`}
+                          className={`px-2 py-1 text-xs rounded-full border ${skillColors[i % skillColors.length].bg} ${skillColors[i % skillColors.length].text} ${skillColors[i % skillColors.length].border}`}
                         >
                           {skill.trim()}
                         </span>
                       ))}
-                      {talent.personalSkills?.split(',').length > 4 && (
-                        <span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
-                          +{talent.personalSkills.split(',').length - 4}
+                      {talent.personalSkills?.split(',').length > 3 && (
+                        <span 
+                          className="px-2 py-1 text-xs rounded-full border"
+                          style={{ 
+                            backgroundColor: COLORS.ink.light,
+                            color: COLORS.text.secondary,
+                            borderColor: COLORS.ink.medium
+                          }}
+                        >
+                          +{talent.personalSkills.split(',').length - 3}
                         </span>
                       )}
                     </div>
 
                     {/* 统计信息 */}
-                    <div className="flex items-center justify-between text-xs text-gray-500">
-                      <div className="flex items-center space-x-3">
-                        <span>📖 {talent.knowledgeReadCount || 0} 阅读</span>
-                        <span>👍 {talent.knowledgeLikeCount || 0} 点赞</span>
-                        <span>⭐ {talent.knowledgeRankingScore || 0} 评分</span>
-                        <span>💰 {talent.totalPoints || 0} 积分</span>
+                    <div className="flex items-center justify-between text-xs">
+                      <div className="flex items-center space-x-4">
+                        <span style={{ color: COLORS.text.light }}>
+                          📖 {talent.knowledgeReadCount}
+                        </span>
+                        <span style={{ color: COLORS.text.light }}>
+                          👍 {talent.knowledgeLikeCount}
+                        </span>
+                        <span style={{ color: COLORS.text.light }}>
+                          ⭐ {talent.knowledgeRankingScore}
+                        </span>
+                        <span style={{ color: COLORS.text.light }}>
+                          💰 {talent.totalPoints}
+                        </span>
                       </div>
                       <div className="flex items-center space-x-2">
                         {talent.jobSeekingStatus === 'ACTIVELY_SEEKING' && (
-                          <span className="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">
+                          <span 
+                            className="px-2 py-1 rounded-full text-xs font-sans"
+                            style={{ 
+                              backgroundColor: 'rgba(92, 124, 92, 0.1)',
+                              color: COLORS.accent.green,
+                              border: `1px solid ${COLORS.accent.green}`
+                            }}
+                          >
                             求职中
                           </span>
                         )}
                         {talent.jobSeekingStatus === 'OPEN_TO_OPPORTUNITIES' && (
-                          <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">
+                          <span 
+                            className="px-2 py-1 rounded-full text-xs font-sans"
+                            style={{ 
+                              backgroundColor: 'rgba(74, 107, 124, 0.1)',
+                              color: COLORS.accent.blue,
+                              border: `1px solid ${COLORS.accent.blue}`
+                            }}
+                          >
                             开放机会
                           </span>
                         )}
-                        <HeartIcon className="w-4 h-4 text-red-400" />
+                        <HeartIcon className="w-4 h-4" style={{ color: COLORS.accent.red }} />
                       </div>
                     </div>
                   </div>
                 </div>
-
-                {/* 求职需求 */}
-                {talent.jobSeekingRequirements && (
-                  <div className="mt-3 pt-3 border-t border-gray-100">
-                    <p className="text-xs text-gray-600 italic">
-                      💼 {talent.jobSeekingRequirements}
-                    </p>
-                  </div>
-                )}
               </div>
             ))}
           </div>
         ) : (
-          <div className="text-center py-12">
-            <div className="text-gray-400 mb-4">
+          <div className="text-center py-16">
+            <div className="mb-6" style={{ color: COLORS.ink.medium }}>
               <UserIcon className="w-16 h-16 mx-auto mb-4" />
             </div>
-            <p className="text-gray-500 text-lg mb-2">暂无银龄人才信息</p>
-            <p className="text-gray-400 text-sm">尝试调整搜索条件或清除搜索关键词</p>
+            <h3 
+              className="font-serif text-lg font-semibold mb-2"
+              style={{ color: COLORS.text.secondary }}
+            >
+              暂无银龄人才
+            </h3>
+            <p 
+              className="font-sans text-sm"
+              style={{ color: COLORS.text.light }}
+            >
+              尝试调整搜索条件或清除搜索关键词
+            </p>
           </div>
         )}
       </div>
 
       {/* 底部提示 */}
       <div className="fixed bottom-20 left-0 right-0 px-4">
-        <div className="bg-blue-500 text-white rounded-lg p-3 text-center text-sm">
-          💡 提示:点击卡片查看人才详情,支持收藏和联系功能
+        <div 
+          className="rounded-lg p-3 text-center text-sm font-sans"
+          style={{ 
+            backgroundColor: 'rgba(74, 107, 124, 0.1)',
+            color: COLORS.accent.blue,
+            border: `1px solid ${COLORS.accent.blue}`
+          }}
+        >
+          💡 点击卡片查看人才详情,支持收藏和联系功能
         </div>
       </div>
     </div>