# 公司列表三栏布局设计文档

**日期：** 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`）不变