docs: add company jobs three-panel layout design spec

docs/superpowers/specs/2026-03-25-company-jobs-three-panel-design.md

@@ -0,0 +1,98 @@
+# 公司列表三栏布局设计文档
+
+**日期：** 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`）不变