|
|
@@ -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>
|