d8d-vite-starter/docs/silver-talent-publish-plan.md

银龄库发布人才功能开发计划

项目概述

基于现有银龄平台移动端架构，开发"发布人才"功能，允许银龄用户在移动端发布个人求职信息，展示个人专长、技能和经验。

技术背景

实体结构

• 实体: SilverUserProfile (银龄用户档案)
• 功能: 发布个人求职信息
• 数据范围: 个人基本信息 + 技能展示 + 求职需求

核心字段映射

表单字段	实体字段	类型	必填	说明
真实姓名	realName	string	✅	1-50字符
年龄	age	number	✅	50-100岁
性别	gender	enum	✅	MALE/FEMALE/OTHER
联系电话	phone	string	✅	手机号格式
昵称	nickname	string	❌	1-50字符
所属机构	organization	string	❌	如退休单位、社团等
邮箱	email	string	❌	邮箱格式
个人简介	personalIntro	string	❌	1000字以内
个人技能	personalSkills	string	❌	以逗号分隔的技能列表
个人经历	personalExperience	string	❌	工作经历、教育背景等
求职需求	jobSeekingRequirements	string	❌	期望工作类型、时间安排等
头像	avatarUrl	string	❌	图片URL

开发任务清单

1. 创建发布人才表单组件 (PublishTalentForm.tsx)

位置: src/client/mobile/components/PublishTalentForm.tsx

组件结构

interface PublishTalentFormProps {
  onSuccess?: () => void;
  onCancel?: () => void;
  initialData?: Partial<CreateSilverTalentRequest>;
}

interface FormData {
  realName: string;
  nickname?: string;
  organization?: string;
  age: number;
  gender: 'MALE' | 'FEMALE' | 'OTHER';
  phone: string;
  email?: string;
  personalIntro?: string;
  personalSkills?: string;
  personalExperience?: string;
  jobSeekingRequirements?: string;
  avatarUrl?: string;
}

UI设计规范

• 风格: 水墨风格移动端
• 主色: --ink-light (#f5f3f0)
• 边框: --ink-medium (#d4c4a8)
• 文字: --text-primary (#2f1f0f)
• 按钮: 圆润边角，淡墨色边框

2. 表单字段设计

基本信息区域

• 头像上传（圆形展示，支持从相册选择）
• 真实姓名（必填，输入框）
• 年龄（必填，数字选择器 50-100）
• 性别（必填，三选一按钮组）
• 联系电话（必填，手机号输入）
• 昵称（选填）
• 所属机构（选填）

个人展示区域

• 个人简介（多行文本，最多1000字）
• 个人技能（标签输入，支持多技能）
• 个人经历（多行文本，最多3000字）

求职需求区域

• 求职需求（多行文本，最多1000字）

3. 验证规则

const validationRules = {
  realName: [
    { required: true, message: '请输入真实姓名' },
    { min: 1, max: 50, message: '姓名长度应在1-50字符之间' }
  ],
  age: [
    { required: true, message: '请输入年龄' },
    { type: 'number', min: 50, max: 100, message: '年龄应在50-100岁之间' }
  ],
  gender: [
    { required: true, message: '请选择性别' }
  ],
  phone: [
    { required: true, message: '请输入联系电话' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址' }
  ],
  personalIntro: [
    { max: 1000, message: '个人简介不能超过1000字' }
  ],
  personalSkills: [
    { max: 2000, message: '个人技能描述不能超过2000字' }
  ],
  personalExperience: [
    { max: 3000, message: '个人经历不能超过3000字' }
  ],
  jobSeekingRequirements: [
    { max: 1000, message: '求职需求不能超过1000字' }
  ]
};

4. API集成

使用现有API端点

• POST: /api/v1/silver-users/profiles
• Content-Type: application/json
• 认证: JWT Token (自动附带)

请求数据格式

{
  "realName": "张老先生",
  "age": 65,
  "gender": "MALE",
  "phone": "13800138000",
  "nickname": "张老师",
  "organization": "退休中学教师",
  "email": "zhang@example.com",
  "personalIntro": "退休中学语文教师，擅长书法和传统文化教育...",
  "personalSkills": "书法,国画,古典文学,诗词创作",
  "personalExperience": "从事教育工作40年，曾在重点中学任教...",
  "jobSeekingRequirements": "希望寻找文化教育类兼职工作，时间灵活"
}

5. 图片上传功能

头像上传

• 存储: MinIO对象存储
• 限制: 单张图片，最大2MB
• 格式: JPG, PNG, WebP
• 尺寸: 建议200x200px
• 接口: /api/v1/files/upload-policy 获取上传凭证

上传流程

1. 选择图片 -> 压缩处理 -> 上传到MinIO -> 获取URL -> 保存到表单

6. 状态管理

本地状态

interface FormState {
  loading: boolean;
  submitting: boolean;
  errors: Record<string, string>;
  previewImage: string;
}

提交状态

• idle: 等待输入
• validating: 验证中
• submitting: 提交中
• success: 提交成功
• error: 提交失败

7. 用户体验优化

交互设计

• 实时验证反馈
• 自动保存草稿到localStorage
• 图片预览功能
• 字数实时统计
• 表单进度提示

错误处理

• 网络错误重试机制
• 表单验证错误提示
• 图片上传失败处理
• 敏感信息脱敏显示

8. 移动端适配

响应式设计

• 小屏 (320-375px): 单列布局，大按钮
• 标准 (375-414px): 默认布局
• 大屏 (414px+): 居中显示，两侧留白

触摸优化

• 按钮最小44x44px
• 输入框间距16px以上
• 支持键盘收起自动布局调整

9. 安全性考虑

数据保护

• 手机号部分脱敏显示
• 邮箱隐私保护
• 敏感信息加密传输
• XSS防护（输入内容过滤）

内容审核

• 敏感词检测
• 图片内容审核
• 人工审核流程
• 举报处理机制

开发步骤

Phase 1: 基础表单 (1天)

1. 创建 PublishTalentForm.tsx 组件
2. 实现基础表单字段
3. 添加表单验证
4. 集成到现有 PublishPage

Phase 2: 图片上传 (0.5天)

1. 集成MinIO上传功能
2. 实现头像选择器
3. 添加图片压缩
4. 实现预览功能

Phase 3: API集成 (0.5天)

1. 创建API调用方法
2. 处理提交状态
3. 添加错误处理
4. 成功反馈提示

Phase 4: 优化测试 (1天)

1. 移动端适配测试
2. 性能优化
3. 用户体验测试
4. Bug修复

代码实现要点

关键路径

• src/client/mobile/components/PublishTalentForm.tsx - 主要表单组件
• src/client/mobile/pages/PublishPage.tsx - 集成现有发布页面
• src/client/api.ts - API客户端调用
• src/client/utils/upload.ts - 图片上传工具

技术栈使用

• UI框架: React + TypeScript + Tailwind CSS
• 图标: Heroicons
• 状态管理: React Hooks (useState, useEffect)
• 表单: 受控组件模式
• 图片处理: Canvas API压缩
• 存储: localStorage草稿保存

测试方案

功能测试清单

• 表单字段验证
• 图片上传功能
• API成功提交
• 错误处理机制
• 移动端适配
• 离线草稿保存

边界测试

• 最大字数限制
• 图片大小限制
• 网络异常处理
• 重复提交防护

上线部署

环境配置

• 生产环境MinIO配置
• CDN加速设置
• 图片处理服务

监控指标

• 表单提交成功率
• 图片上传成功率
• 用户停留时间
• 错误日志收集

后续优化

功能扩展

• 技能标签自动补全
• 地理位置选择
• 视频自我介绍
• 多语言支持

性能优化

• 图片懒加载
• 表单预加载
• 缓存策略优化