diff --git a/docs/superpowers/specs/2026-03-25-company-jobs-three-panel-design.md b/docs/superpowers/specs/2026-03-25-company-jobs-three-panel-design.md new file mode 100644 index 0000000..717b4b1 --- /dev/null +++ b/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` | 所有公司列表 | +| `selectedOrg` | `Ref` | 当前选中公司 | +| `jobs` | `Ref` | 当前公司的岗位列表 | +| `selectedJob` | `Ref` | 当前选中岗位详情 | +| `jobsLoading` | `Ref` | 中栏加载状态 | +| `detailLoading` | `Ref` | 右栏加载状态 | + +--- + +## 交互流程 + +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`)不变