项目地址：https://github.com/LuoYingXueYan/Example

> 本项目仅供学习、体验、交流与非商用使用，禁止用于任何商业用途。

---

引言

今天给大家分享一个我近期完成的前端项目——求职进度可视化看板。这是一个非常实用的工具，能够帮助求职者集中管理投递的岗位、跟踪面试流程、设置提醒并可视化分析求职数据。

最重要的是，这个项目的开发过程深度借助了AI编程助手Codex（这里指广义的AI代码生成工具），从页面结构构思到交互逻辑实现，都获得了高效的辅助。它很好地展示了如何将AI作为“副驾驶”，快速构建出一个结构清晰、功能可用的前端原型。下面，我将详细介绍这个项目。

---

一、 项目简介与定位

这是一个基于原生 HTML、CSS、JavaScript 实现的单页面应用（SPA）。它不依赖于任何后端或数据库，所有数据都存储在浏览器的本地存储（LocalStorage）中，因此下载后直接在浏览器中打开 index.html即可运行，非常适合个人使用或作为学习案例。

项目目标是为求职者提供一个一站式的管理面板，告别用Excel或便签记录的碎片化方式。当前版本已经不是一个简单的概念草案，而是一个具备完整交互功能的前端成品，涵盖了从数据总览到详情编辑的全套流程。

---

二、 核心功能模块展示

项目界面布局清晰，主要分为以下几个功能区域，均已实现可交互：

1. 左侧智能设置侧边栏：可折叠，包含视图切换、动画效果、数据统计与本地存储状态提示。

2. 顶部全局操作区：包含标题、数据最近更新时间以及“恢复示例数据”、“筛选视图”、“新增岗位”等核心操作按钮。

3. 数据统计卡片：实时展示“总投递数”、“推进中”、“面试中”、“Offer数”、“已结束”等关键指标。

4. 可视化图表面板：

   • 流程阶段分布图：可切换查看全部、本周、近30天的岗位阶段分布。

   • 投递/面试趋势图：支持查看本周、本月及近8周的趋势变化。

5. 智能提醒中心：聚合显示“近期面试”、“岗位待跟进”、“Offer待处理”三类提醒，确保重要事项不被遗漏。

6. 核心：岗位列表管理区：

   • 支持按公司/岗位/渠道搜索。

   • 支持按“阶段”和“优先级”筛选。

   • 列表展示岗位关键信息：公司、阶段、投递日期、最近跟进时间、渠道、优先级等。

   • 提供“查看详情”和“编辑”等操作入口。

7. 岗位详情与快捷编辑抽屉：点击任一岗位，右侧会滑出详情抽屉。这里的设计亮点是集成了快捷编辑功能，无需跳转页面即可修改岗位信息和时间线。

8. 双向时间线编辑系统：

   • 快捷节点添加：提供“投递简历”、“收到面试邀约”等常用节点一键添加。

   • 自定义新增：允许用户自由添加任何类型的时间线节点。

   • 所有时间线节点清晰展示在详情区，完整记录求职过程的每一步。

---

三、 技术实现与数据存储

• 技术栈：纯原生三件套（HTML, CSS, JavaScript）。这样做的好处是零依赖、运行速度快、便于理解和学习。

• 数据持久化：所有岗位数据、备注和时间线都保存在 localStorage​ 中，键名为 job-dashboard-jobs。代码中做了兼容处理，如果localStorage不可用，会尝试降级到sessionStorage甚至window.name进行临时存储。你可以在浏览器开发者工具的 Application-> Local Storage下查看和管理这些数据。

---

四、 AI辅助开发（Codex）经验分享

声明：本项目的快速原型构建得益于AI编程助手Codex（此处代表所使用AI工具）的辅助。​ 在实际开发中，我主要将其用于以下几个环节：

1. 页面结构（HTML）生成：向AI描述“需要一个包含侧边栏、统计卡片、图表区和列表的仪表盘布局”，它能快速生成出结构清晰的HTML骨架，我在此基础上进行微调和组件化。

2. 交互逻辑（JavaScript）脑暴与片段生成：例如，在实现“时间线双模式编辑”功能时，向AI描述“需要两种添加时间线节点的方式：一是点击预设按钮，二是填写表单”，它可以提供状态管理逻辑和事件处理函数的代码片段，极大提升了开发效率。

3. CSS样式建议：对于某些复杂的布局或动画效果（如抽屉滑动、卡片悬停反馈），AI能提供可行的CSS实现方案，帮助我快速达成理想的视觉效果。

4. 文档撰写：甚至这篇博客和项目的README.md文件大纲，也是在AI的帮助下完成的构思和初稿。

AI的作用不是替代开发者，而是作为一个强大的“加速器”和“灵感伙伴”。它负责处理那些模式固定、耗时但创造性不高的编码任务，而我则专注于整体架构设计、业务逻辑梳理和用户体验优化。这种“人机协作”模式，让这个功能完整的看板在短时间内从想法变成了现实。

---

五、 如何使用与体验

1. 获取项目：访问项目GitHub仓库 LuoYingXueYan/Example获取代码。

2. 运行：将 index.html, interaction.css, interaction.js三个文件放在同一目录下，然后用浏览器打开 index.html。

3. 开始使用：你可以点击“恢复示例数据”快速预览完整功能，然后尝试新增岗位、更新阶段、添加面试时间线等操作。所有数据都会自动保存在你的浏览器中。

---

六、 总结与展望

这个项目展示了一个利用现代AI工具高效开发前端应用的完整案例。它功能实用，代码清晰，非常适合前端新手学习原生JS的数据操作和DOM交互，也适合所有求职者作为个人管理工具。

未来，我计划在此基础上继续迭代，可能的方向包括：

• 实现简单的账户系统和数据云同步雏形。

• 丰富图表类型，如薪资分布统计等。

• 添加更多个性化的设置。

---

希望这个项目和我的开发经验分享能对你有所启发。无论是想学习前端，还是想提高求职管理效率，都欢迎你使用、学习或贡献改进思路！

---