d8d-vite-starter/docs/silver-job-detail-implementation.md

银龄岗详情页实现说明

项目概述

基于SilverJob实体的移动端银龄岗详情页，采用通用CRUD架构和银龄智慧水墨风格设计规范实现。

技术实现

1. 实体结构

• 实体: SilverJob (src/server/modules/silver-jobs/silver-job.entity.ts)
• Schema: SilverJobSchema + CreateSilverJobDto + UpdateSilverJobDto
• API路由: /api/v1/silver-jobs/{id} (通用CRUD自动生成)

2. 页面组件

• 文件: src/client/mobile/pages/JobDetailPage.tsx
• 路由: /silver-jobs/{id}
• 技术栈: React + TypeScript + TanStack Query + Hono Client

3. 数据结构

interface SilverJob {
  id: number;
  title: string;           // 岗位标题
  description: string;     // 岗位描述
  requirements: string;    // 岗位要求
  location: string;        // 工作地点
  salaryRange: string;     // 薪资范围
  workHours: string;       // 工作时间
  company: Company;        // 关联企业信息
  contactPerson: string;   // 联系人
  contactPhone: string;    // 联系电话
  contactEmail: string;    // 联系邮箱
  jobType: string;         // 岗位类型
  requiredSkills: string;  // 所需技能
  benefits: string;        // 福利待遇
  applicationDeadline: Date; // 申请截止日期
  startDate: Date;         // 开始日期
  status: number;          // 岗位状态
  viewCount: number;       // 浏览次数
  applicationCount: number; // 申请人数
}

功能特性

1. 核心信息展示

• ✅ 岗位标题和薪资范围（朱砂红色突出显示）
• ✅ 工作地点、工作时间、截止日期
• ✅ 岗位状态标签（招聘中/已关闭/已招满）

2. 公司信息

• ✅ 企业LOGO和名称展示
• ✅ 行业分类和企业规模
• ✅ 认证状态标识
• ✅ 一键电话联系和邮件联系

3. 详细内容

• ✅ 岗位描述完整展示
• ✅ 岗位要求分点说明
• ✅ 技能要求标签化展示
• ✅ 福利待遇图标化展示

4. 交互功能

• ✅ 收藏岗位（状态切换）
• ✅ 分享岗位（多种方式）
• ✅ 立即申请（根据状态启用/禁用）
• ✅ 电话直拨联系

5. 用户体验

• ✅ 水墨风格骨架屏加载
• ✅ 错误状态友好提示
• ✅ 响应式移动端适配
• ✅ 卡片悬停动效
• ✅ 底部固定操作栏

设计规范

色彩系统

• 背景: 宣纸色(#f5f3f0)
• 边框: 淡墨色(#d4c4a8)
• 文字: 墨色文字(#2f1f0f)
• 强调: 朱砂红(#a85c5c)、花青(#4a6b7c)

字体层级

• 标题: 衬线体 + 28px
• 副标题: 衬线体 + 24px
• 正文: 无衬线体 + 16px
• 辅助: 无衬线体 + 14px

使用方法

路由访问

# 直接访问
http://localhost:5173/silver-jobs/1

# 通过列表页跳转
从银龄岗列表页点击任意岗位卡片

API调用

// 获取岗位详情
const response = await silverJobClient[':id'].$get({
  param: { id: 1 }
});

// 响应格式
{
  data: {
    id: 1,
    title: "社区老年大学书法教师",
    description: "负责社区老年大学书法课程教学...",
    // 其他字段...
    company: {
      name: "智慧养老服务中心",
      industryCategory: "养老服务",
      // 公司信息...
    }
  }
}

开发状态

✅ 页面组件开发完成 ✅ 路由配置完成 ✅ 通用CRUD集成 ✅ 水墨风格UI实现 ✅ 移动端适配 ✅ 交互功能实现

下一步

1. 集成收藏功能API
2. 集成申请功能API
3. 添加分享功能实现
4. 优化图片懒加载
5. 添加统计分析

技术要点

• 使用通用CRUD无需后端修改
• 完全遵循银龄智慧设计规范
• 支持公司关联查询
• 类型安全的API调用
• 响应式设计适配各种设备