d8d-vite-starter/docs/silver-job-publish-mobile-plan.md

银龄岗移动端发布页面实现方案

项目概述

基于银龄岗(Job)实体，创建符合水墨风格的移动端岗位发布功能，实现企业用户发布招聘岗位的完整流程。

实体分析

银龄岗(Job)实体核心字段：

• title: 岗位名称 (必填, 最长100字符)
• salary: 薪资范围 (必填, 最长50字符)
• educationRequired: 学历要求 (必填, 最长50字符)
• experienceRequired: 工作年限要求 (必填, 最长50字符)
• workTime: 工作时间 (必填, 最长100字符)
• workLocation: 工作地点 (必填, 最长200字符)
• description: 岗位介绍 (必填, 长文本)
• details: 岗位详情 (必填, 长文本)
• publishTime: 发布时间 (日期时间)
• endTime: 岗位结束时间 (日期时间)
• companyId: 企业ID (外键关联)

组件架构

1. PublishJobForm 组件结构

// 路径: src/client/mobile/components/PublishJobForm.tsx
interface PublishJobFormProps {
  onSuccess?: () => void;
  onCancel?: () => void;
}

// 表单数据结构
interface JobFormData {
  companyId: number;
  title: string;
  salary: string;
  educationRequired: string;
  experienceRequired: string;
  workTime: string;
  workLocation: string;
  description: string;
  details: string;
  publishTime: string;
  endTime: string;
}

2. 页面组件结构

// 路径: src/client/mobile/pages/PublishPage.tsx
// 重构现有页面，集成银龄岗发布功能

UI设计规范（水墨风格）

色彩系统

• 背景色: var(--ink-light) (#f5f3f0)
• 主文本: var(--text-primary) (#2f1f0f)
• 边框色: var(--ink-medium) (#d4c4a8)
• 强调色: var(--ink-dark) (#8b7355)
• 按钮色: var(--accent-blue) (#4a6b7c)

字体层级

• 表单标题: font-serif text-2xl font-bold tracking-wide
• 标签文字: font-sans text-base font-medium
• 输入文字: font-sans text-base
• 辅助文字: font-sans text-sm

布局规范

• 容器内边距: p-4
• 组件间距: space-y-4
• 输入框高度: 48px
• 圆角: rounded-xl

表单字段设计

企业选择器

• 组件: 下拉选择框
• 数据来源: 当前用户关联的企业列表
• 验证: 必须选择有效企业

基础信息组

1. 岗位名称

   • 类型: 文本输入框
   • 限制: 最多100字符
   • 占位符: "请输入岗位名称"

2. 薪资范围

   • 类型: 文本输入框
   • 格式: "8000-12000元/月"
   • 占位符: "如: 5000-8000元/月"

3. 学历要求

   • 类型: 下拉选择
   • 选项: ["不限", "初中", "高中", "大专", "本科", "硕士", "博士"]

4. 工作年限

   • 类型: 下拉选择
   • 选项: ["不限", "1年以下", "1-3年", "3-5年", "5-10年", "10年以上"]

工作信息组

1. 工作时间

   • 类型: 文本输入框
   • 占位符: "如: 朝九晚五，周末双休"

2. 工作地点

   • 类型: 文本输入框
   • 占位符: "请输入详细工作地点"

3. 发布日期

   • 类型: 日期选择器
   • 默认值: 当前日期

4. 截止日期

   • 类型: 日期选择器
   • 验证: 必须晚于发布日期

详细描述组

1. 岗位介绍

   • 类型: 多行文本框
   • 行数: 3
   • 占位符: "简要介绍岗位主要内容"

2. 岗位详情

   • 类型: 多行文本框
   • 行数: 6
   • 占位符: "详细描述岗位职责、要求、福利等"

交互流程

表单验证规则

const validationRules = {
  companyId: { required: true, message: "请选择企业" },
  title: { required: true, maxLength: 100, message: "岗位名称不能为空且不超过100字符" },
  salary: { required: true, maxLength: 50, message: "薪资范围不能为空且不超过50字符" },
  educationRequired: { required: true, message: "请选择学历要求" },
  experienceRequired: { required: true, message: "请选择工作年限要求" },
  workTime: { required: true, maxLength: 100, message: "工作时间不能为空且不超过100字符" },
  workLocation: { required: true, maxLength: 200, message: "工作地点不能为空且不超过200字符" },
  description: { required: true, minLength: 10, message: "岗位介绍不能为空且不少于10字符" },
  details: { required: true, minLength: 20, message: "岗位详情不能为空且不少于20字符" },
  endTime: { required: true, validator: (value, form) => value > form.publishTime }
};

提交流程

1. 表单验证
2. 显示加载状态
3. 调用API: POST /api/v1/silver-jobs/jobs
4. 处理响应
5. 显示成功/失败提示

状态管理

// 组件状态
const [formData, setFormData] = useState<JobFormData>(initialData);
const [loading, setLoading] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const [companies, setCompanies] = useState<Company[]>([]);

API集成

获取企业列表

GET /api/v1/silver-jobs/companies
参数: { userId: currentUser.id }

创建岗位

POST /api/v1/silver-jobs/jobs
请求体: CreateJobDto

响应式设计

移动端适配

• 最小宽度: 320px
• 最大宽度: 414px (居中显示)
• 触摸目标: 最小44×44px
• 字体大小: 支持系统缩放

不同屏幕适配

/* 小屏手机 */
@media (max-width: 375px) {
  .form-container { padding: 12px; }
  .input-field { font-size: 16px; }
}

/* 标准手机 */
@media (min-width: 375px) {
  .form-container { padding: 16px; }
}

/* 大屏手机 */
@media (min-width: 414px) {
  .form-container { padding: 20px; }
}

无障碍设计

键盘导航

• Tab键顺序合理
• 回车键提交表单
• Esc键取消

屏幕阅读器支持

• 所有表单元素添加aria-label
• 错误信息使用aria-live="polite"
• 必填字段标记aria-required="true"

颜色无障碍

• 重要信息不仅通过颜色传达
• 错误状态使用图标+文字
• 对比度符合WCAG 2.1标准

错误处理

表单验证错误

• 实时显示错误信息
• 滚动到第一个错误字段
• 错误边框使用var(--accent-red)

API错误处理

• 网络错误: 显示重试按钮
• 验证错误: 显示具体错误字段
• 权限错误: 引导用户认证

成功反馈

提交成功

1. 显示成功提示
2. 清空表单
3. 可选：跳转到岗位详情页
4. 可选：继续发布新岗位

成功提示样式

message.success({
  content: '岗位发布成功！',
  duration: 3,
  style: { color: 'var(--accent-green)' }
});

性能优化

懒加载

• 企业列表分页加载
• 图片懒加载

缓存策略

• 企业列表缓存5分钟
• 表单草稿自动保存

防抖处理

• 输入验证防抖500ms
• 搜索企业名称防抖300ms

测试计划

功能测试

1. 表单字段验证
2. 企业选择功能
3. 日期选择器
4. 提交流程
5. 错误处理

设备测试

1. iPhone SE - 15 Pro Max
2. Android 主流机型
3. 平板适配

网络测试

1. 3G网络
2. 弱网环境
3. 断网重试