99 lines
3.3 KiB
Markdown
99 lines
3.3 KiB
Markdown
# 公司列表三栏布局设计文档
|
||
|
||
**日期：** 2026-03-25
|
||
**状态：** 已批准
|
||
**影响页面：** `/companies` → `CompanyListView.vue`
|
||
|
||
---
|
||
|
||
## 目标
|
||
|
||
将现有 `/companies` 页面从网格卡片布局改造为三栏联动布局，用户可在同一页面浏览公司、查看岗位列表、阅读岗位详情，无需跳转。
|
||
|
||
---
|
||
|
||
## 布局结构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 左栏 220px │ 中栏 260px │ 右栏 flex:1 │
|
||
│ 公司列表 │ 岗位列表 │ 岗位详情 │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
整体高度撑满视口（`height: calc(100vh - navbar高度)`），各栏独立滚动。
|
||
|
||
---
|
||
|
||
## 各栏设计
|
||
|
||
### 左栏 — 公司列表
|
||
|
||
- 顶部标题「全部企业」+ 公司总数 badge
|
||
- 每个公司卡片包含：
|
||
- 首字 Logo（无图片时用公司名首字 + 蓝色背景）
|
||
- 公司名称、行业、城市
|
||
- 在招岗位数
|
||
- 选中状态：左边框 `3px solid #409EFF`，背景白色
|
||
- 未选中：左边框透明，背景 `#f5f7fa`
|
||
- 数据来源：`getOrganizations()` API
|
||
|
||
### 中栏 — 岗位列表
|
||
|
||
- 标题显示「{公司名} · 职位列表」
|
||
- 每条岗位显示：岗位名称 + 城市/薪资/类别标签
|
||
- 选中状态：左边框 `3px solid #409EFF`，背景 `#ecf5ff`
|
||
- 数据来源：`getJobs({ organization: org.id })` API（已有 organization 过滤器）
|
||
- 加载中显示 skeleton
|
||
|
||
### 右栏 — 岗位详情
|
||
|
||
- 顶部：公司 Logo + 岗位名称 + 城市副标题 + 「立即申请」按钮
|
||
- 标签行：城市、薪资、类别、经验要求
|
||
- 正文：职位描述、任职要求（`job.description` 字段）
|
||
- 未选中岗位时显示空状态提示
|
||
- 数据来源：`getJob(job.id)` API
|
||
|
||
---
|
||
|
||
## 状态管理
|
||
|
||
组件内使用三个 ref：
|
||
|
||
| 变量 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| `orgs` | `Ref<Organization[]>` | 所有公司列表 |
|
||
| `selectedOrg` | `Ref<Organization \| null>` | 当前选中公司 |
|
||
| `jobs` | `Ref<Job[]>` | 当前公司的岗位列表 |
|
||
| `selectedJob` | `Ref<JobDetail \| null>` | 当前选中岗位详情 |
|
||
| `jobsLoading` | `Ref<boolean>` | 中栏加载状态 |
|
||
| `detailLoading` | `Ref<boolean>` | 右栏加载状态 |
|
||
|
||
---
|
||
|
||
## 交互流程
|
||
|
||
1. `onMounted` → 调用 `getOrganizations()`，加载公司列表，自动选中第一个
|
||
2. 自动选中第一个公司 → 触发 `selectOrg(org)` → 调用 `getJobs({ organization: org.id })`
|
||
3. 点击公司 → `selectOrg(org)` → 更新岗位列表，清空 `selectedJob`
|
||
4. 点击岗位 → `selectJob(job)` → 调用 `getJob(job.id)` → 更新右栏详情
|
||
5. 点击「立即申请」→ 跳转到 `/jobs/:id`（保留现有申请流程）
|
||
|
||
---
|
||
|
||
## 文件变更范围
|
||
|
||
| 文件 | 变更类型 |
|
||
|------|---------|
|
||
| `offer_frontend/src/views/portal/CompanyListView.vue` | 完全重写 |
|
||
|
||
无需改动后端（organization 过滤已支持）、无需新增路由、无需新增组件。
|
||
|
||
---
|
||
|
||
## 不在范围内
|
||
|
||
- 搜索/筛选公司
|
||
- 分页（公司数量有限，一次性加载）
|
||
- CompanyDetailView（`/companies/:id`）不变
|