# 银龄岗详情页实现说明

## 项目概述
基于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. 数据结构
```typescript
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

## 使用方法

### 路由访问
```bash
# 直接访问
http://localhost:5173/silver-jobs/1

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

### API调用
```typescript
// 获取岗位详情
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调用
- 响应式设计适配各种设备