3.3 KiB

Raw Blame History

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

日期： 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>`	右栏加载状态

交互流程

onMounted → 调用 getOrganizations()，加载公司列表，自动选中第一个
自动选中第一个公司 → 触发 selectOrg(org) → 调用 getJobs({ organization: org.id })
点击公司 → selectOrg(org) → 更新岗位列表，清空 selectedJob
点击岗位 → selectJob(job) → 调用 getJob(job.id) → 更新右栏详情
点击「立即申请」→ 跳转到 /jobs/:id（保留现有申请流程）

文件变更范围

文件	变更类型
`offer_frontend/src/views/portal/CompanyListView.vue`	完全重写

无需改动后端（organization 过滤已支持）、无需新增路由、无需新增组件。

不在范围内

搜索/筛选公司
分页（公司数量有限，一次性加载）
CompanyDetailView（/companies/:id）不变

3.3 KiB Raw Blame History Unescape Escape