项目名称：Job Subscription - 岗位信息表格系统升级 当前状态：使用飞书 iframe 嵌入，存在安全和样式问题 目标：基于 pxcharts 开源项目，构建自定义的岗位信息表格组件 技术栈：Next.js 16 + Supabase + pxcharts (参考实现)
- 安全性提升：完全控制数据访问，消除飞书链接泄露风险
- 样式自主：实现飞书风格的表格界面，完全可控
- 性能优化：支持大数据量渲染（10,000+ 岗位数据）
- 功能完整：支持筛选、排序、分页、搜索等核心功能
- 替换飞书 iframe：使用自定义 React 组件
- 保持现有功能：认证、订阅验证、API 体系
- 优化用户体验：流畅的交互、响应式设计
- 代码可维护：清晰的组件结构、类型安全
- 列表视图：以表格形式展示岗位信息
- 字段显示：
- 行业 (type)
- 公司 (company)
- 岗位名称 (title)
- 部门 (department)
- 地点 (location)
- 更新日期 (updated_date)
- 申请链接 (link) - 可点击跳转
- 行业筛选：下拉选择，支持多选
- 公司筛选：下拉选择，支持搜索
- 部门筛选：下拉选择
- 地点筛选：下拉选择
- 关键词搜索：实时搜索岗位名称
- 点击列标题排序
- 支持升序/降序切换
- 默认按更新日期降序
- 每页 20 条记录
- 页码跳转
- 上一页/下一页
- 显示总数和当前页信息
- 列宽调整：拖拽调整列宽
- 列排序：拖拽调整列顺序
- 行选择：单选/多选行
- 悬停高亮：鼠标悬停行高亮
- 导出为 CSV
- 导出为 Excel
- 导出筛选后的数据
- 保存筛选条件
- 快速筛选预设
- 多条件组合筛选
- 自定义显示列
- 保存列宽和顺序
- 保存排序偏好
┌─────────────────────────────────────────────┐
│ Next.js 16 (App Router) │
├─────────────────────────────────────────────┤
│ Dashboard Page │
│ ├── JobFilters (筛选组件) │
│ └── JobTable (表格组件) ← 核心组件 │
│ ├── TableHeader (表头) │
│ ├── TableBody (表体) │
│ ├── TableRow (行) │
│ └── TableCell (单元格) │
├─────────────────────────────────────────────┤
│ State Management (Zustand) │
│ ├── useJobStore (状态管理) │
│ ├── 过滤器状态 │
│ ├── 排序状态 │
│ └── UI 状态 (列宽、展开等) │
├─────────────────────────────────────────────┤
│ Data Layer │
│ ├── /api/jobs (API 路由) │
│ ├── Supabase (数据库) │
│ └── 飞书 API (数据同步) │
└─────────────────────────────────────────────┘
| 组件名称 | 文件路径 | 职责 | 来源 |
|---|---|---|---|
| JobTable | src/components/job-table/index.tsx |
主表格组件 | 参考 pxcharts TaskManagementTable |
| JobFilters | src/components/job-filters/index.tsx |
筛选器组件 | 新建 |
| TableHeader | src/components/job-table/table-header.tsx |
表头组件 | 参考 pxcharts |
| TableBody | src/components/job-table/table-body.tsx |
表体组件 | 新建 |
| TableRow | src/components/job-table/table-row.tsx |
行组件 | 参考 pxcharts |
| TableCell | src/components/job-table/table-cell.tsx |
单元格组件 | 参考 pxcharts EditableCell |
| LinkCell | src/components/job-table/link-cell.tsx |
链接单元格 | 新建 |
| useJobStore | src/lib/stores/job-store.ts |
状态管理 | 参考 pxcharts task-store |
用户操作 → 组件事件 → Zustand Store → API 调用 → 数据更新 → UI 重新渲染
使用 Zustand 管理以下状态：
interface JobStore {
// 数据状态
jobs: Job[]
filteredJobs: Job[]
total: number
// 筛选状态
filters: JobFilters
activeFilters: boolean
// 排序状态
sortBy: string
sortDir: 'asc' | 'desc'
// 分页状态
page: number
pageSize: number
// UI 状态
columnWidths: Record<string, number>
columnOrder: string[]
selectedRows: string[]
// 操作方法
setJobs: (jobs: Job[]) => void
setFilters: (filters: JobFilters) => void
setSort: (sortBy: string, sortDir: 'asc' | 'desc') => void
setPage: (page: number) => void
updateColumnWidth: (columnId: string, width: number) => void
}/* 表头背景 */
--header-bg: #f5f6f7;
/* 表头边框 */
--header-border: #dee2e6;
/* 表头文字 */
--header-text: #1f2329;
--header-text-secondary: #8f959e;
/* 数据单元格 */
--cell-bg: #ffffff;
--cell-text: #1f2329;
--cell-border: #dee2e6;
/* 悬停状态 */
--hover-bg: #e8f3ff;
--hover-text: #0066ff;
/* 滚动条 */
--scrollbar-thumb: #c9cdd4;
--scrollbar-track: #f5f6f7;- 行高：40px（紧凑模式）、48px（舒适模式）
- 列间距：16px
- 内边距：12px 水平、8px 垂直
- 字体大小：14px
- 表头字体：500 (medium)
- 悬停效果：背景色变化 + 文字颜色变化
- 点击效果：短暂的背景色闪烁
- 拖拽反馈：虚线边框 + 半透明遮罩
- 加载状态：骨架屏或加载动画
- 水平滚动支持
- 固定左侧列（可选）
- 显示所有字段
- 隐藏次要字段
- 卡片式布局
- 侧滑筛选面板
-
飞书多维表格（主数据源）
- 定时同步（每 6 小时）
- 手动触发同步
- API:
/api/cron/sync-feishu
-
Supabase（缓存数据库）
- 存储同步后的数据
- API:
/api/jobs - 快速查询和筛选
飞书表格 → 飞书 API → 数据转换 → Supabase → 应用读取
↑ ↓
└──────────── 定时同步 (Cron) ───────┘
目标：实现基本的表格展示功能
任务列表：
- ✅ 创建 JobTable 组件基础结构
- ✅ 实现 TableHeader 组件
- ✅ 实现 TableBody 组件
- ✅ 实现 TableRow 组件
- ✅ 实现 TableCell 组件
- ✅ 实现数据获取和渲染
- ✅ 应用飞书风格样式
- ✅ 测试和调试
验收标准：
- 能够展示 Supabase 中的岗位数据
- 样式接近飞书表格
- 支持分页
目标：实现数据筛选和排序功能
任务列表：
- ✅ 创建 JobFilters 组件
- ✅ 实现行业筛选器
- ✅ 实现公司筛选器
- ✅ 实现地点筛选器
- ✅ 实现关键词搜索
- ✅ 实现列排序
- ✅ 实现 Zustand store
- ✅ 连接筛选器和表格
验收标准：
- 所有筛选器正常工作
- 筛选结果实时更新
- 排序功能正常
目标：实现列宽调整、拖拽等高级功能
任务列表：
- ✅ 实现列宽拖拽调整
- ✅ 实现列排序拖拽
- ✅ 实现行选择功能
- ✅ 实现悬停高亮
- ✅ 优化性能
- ✅ 测试大数据量
验收标准：
- 列宽可拖拽调整
- 列顺序可拖拽调整
- 支持多行选择
- 性能良好（1000+ 数据流畅）
目标：优化用户体验，完善细节
任务列表：
- ✅ 优化移动端显示
- ✅ 添加加载动画
- ✅ 添加空状态
- ✅ 添加错误提示
- ✅ 性能优化
- ✅ 测试和修复 bug
验收标准：
- 移动端可用
- 交互流畅
- 无明显 bug
{
"dependencies": {
"zustand": "^4.5.0",
"@dnd-kit/core": "^7.0.0",
"@dnd-kit/sortable": "^7.0.0",
"@dnd-kit/utilities": "^3.2.1"
}
}| pxcharts 文件 | 用途 | 改造程度 |
|---|---|---|
components/task-management-table.tsx |
主表格组件 | 高度改造 |
components/editable-cell.tsx |
可编辑单元格 | 中度改造 |
lib/task-store.ts |
状态管理 | 重新设计 |
components/ui/*.tsx |
UI 基础组件 | 直接使用或参考 |
- 简洁的表头：灰色背景，清晰的分隔线
- 合适的行高：既不拥挤也不稀疏
- 清晰的层次：通过字体粗细和颜色区分信息
- 微妙的交互：悬停、点击有反馈但不突兀
- 成熟的多维表格实现：经过验证的架构
- 性能优秀：支持百万数据渲染
- 可扩展性强：模块化设计，易于定制
- 代码质量高：TypeScript，清晰的注释
- 组件渲染测试
- 状态管理测试
- 筛选逻辑测试
- 排序逻辑测试
- API 集成测试
- 数据流测试
- 用户交互测试
- 1000 条数据渲染性能
- 10000 条数据渲染性能
- 筛选响应时间
- 排序响应时间
- Chrome 最新版
- Safari 最新版
- Firefox 最新版
- 移动端浏览器
- 首次渲染：< 1 秒
- 交互响应：< 100ms
- 大数据渲染（1000 条）：< 2 秒
- 筛选响应：< 300ms
- 易用性：用户无需学习即可使用
- 满意度：比飞书 iframe 更好的体验
- 功能完整性：涵盖所有核心功能
- 代码质量：TypeScript 严格模式
- 测试覆盖率：> 80%
- 性能评分：Lighthouse > 90
- 可维护性：清晰的代码结构
| 风险 | 影响 | 缓解措施 |
|---|---|---|
| pxcharts 组件复杂度高 | 开发周期延长 | 分阶段实施，先实现核心功能 |
| 性能问题 | 用户体验差 | 使用虚拟滚动、优化渲染 |
| 移动端适配困难 | 移动端体验差 | 响应式设计，测试多种设备 |
| 风险 | 影响 | 缓解措施 |
|---|---|---|
| 飞书 API 变更 | 数据同步失败 | 版本锁定、监控 API 变化 |
| 用户不适应新界面 | 用户投诉 | 保留飞书风格、平滑过渡 |
| 阶段 | 时间 | 交付物 |
|---|---|---|
| Phase 1 | 2-3 天 | 基础表格组件 |
| Phase 2 | 2-3 天 | 筛选和排序 |
| Phase 3 | 2-3 天 | 高级交互 |
| Phase 4 | 1-2 天 | 优化完善 |
| 测试部署 | 1-2 天 | 生产环境上线 |
- pxcharts GitHub: https://github.com/MrXujiang/pxcharts
- pxcharts 官网: http://pxcharts.com
- 技术文章: https://juejin.cn/post/7527477655345774638
- Next.js 16 文档
- Zustand 文档
- DnD Kit 文档
- Supabase 文档
- 飞书多维表格界面
- pxcharts 在线演示
- 类似产品界面
- 能够展示所有岗位数据
- 筛选功能正常工作
- 排序功能正常工作
- 分页功能正常工作
- 链接可点击跳转
- 移动端可用
- 首屏加载 < 2 秒
- 交互响应 < 200ms
- 大数据量（1000+）流畅
- 无内存泄漏
- 飞书风格还原度 > 80%
- 视觉一致性良好
- 交互反馈清晰
- 响应式适配良好
- 评审 PRD：与团队/用户确认需求
- 技术调研：深入研究 pxcharts 代码
- 原型设计：设计 UI 原型
- 开发环境准备：安装依赖、配置项目
- 开始开发：按 Phase 1 开始实施
文档版本：v1.0 创建日期：2026-01-12 作者：Claude + 用户协作 最后更新：2026-01-12