15 简历与面试演示：把真实完成的功能讲清楚

本章你会做出什么

你不会再新增业务功能，而是准备 README 截图、五分钟演示、简历描述和面试回答。写在简历上的每句话都应能在页面或代码中展示。

先理解三个概念

1. 项目描述不是功能堆砌

面试官关心你解决了什么业务问题，以及你能否解释关键实现。描述一套稳定闭环，比声称做过大量未完成功能更可信。

2. 演示路径

演示要围绕一个新建工单流转，账号切换展示角色差异，最后打开关键代码。不要随机点页面让面试官猜项目价值。

3. 回答结构

回答技术问题可按四步：

业务问题 -> 我的设计 -> 关键实现 -> 取舍或改进

本章最终目录变化

servicedesk-practice/
  README.md                  # 加截图和演示步骤
  docs/
    interview-notes.md       # 可选：保存你的问答练习

一步一步操作

第 1 步：准备可复现演示数据

确保默认启动使用内存模式，账号均可用：

账号	身份	本次演示操作
`user`	提单用户	创建、编辑待受理、最终确认关闭
`supervisor`	服务主管	查看看板、分配负责人
`agent`	处理人员	提交处理结果
`admin`	管理员	展示权限和分类配置

统一密码：123456。

第 2 步：截取 README 所需页面

建议保存以下截图：

登录页或看板首页。
工单详情的完整时间线。
管理员角色权限配置页面。
含 SLA 标签的工单列表。

截图前重置演示数据，避免显示无意义测试文字或报错弹窗。

第 3 步：练习五分钟演示

按下面顺序严格操作：

user 登录
-> 创建中优先级工单，说明表单校验和待受理编辑
-> supervisor 登录，说明菜单差异，分配给 agent
-> agent 登录，填写处理结果并提交
-> user 登录，确认关闭，展示完整状态时间线
-> supervisor 登录，打开看板与 SLA 统计
-> admin 登录，展示角色权限配置

随后只打开三处代码：

路由权限与 v-permission：说明前端交互控制。
后端 TicketService：说明数据权限和动作流转。
Axios/Pinia 或图表统计：按面试官兴趣展开。

第 4 步：写简历描述

只写已经完成并验证过的能力。

关键文件完整代码：简历与口述稿

简历项目描述

ServiceDesk 企业服务工单运营平台
Vue 3 / TypeScript / Vite / Pinia / Vue Router / Element Plus / Axios / ECharts / Express / MySQL

面向企业内部服务团队的工单管理后台，支持问题提交、任务分配、处理反馈、用户确认关闭及运营统计。完成登录鉴权、按权限码动态路由和按钮控制、后端工单读取与操作权限校验；实现工单筛选分页、详情时间线、待受理编辑与 SLA 预警，并以 ECharts 展示状态分布、分类排行和处理趋势。默认支持内存演示数据，并提供 MySQL 持久化切换与核心流程/权限边界测试。

如果你还没有完成 MySQL 或测试，请从描述中删掉对应句子。

一分钟项目介绍

我做的是一个企业内部服务工单后台。员工可以提交网络或设备问题，主管分配给处理人员，处理人员提交解决结果后由员工确认关闭。项目用 Vue 3 和 TypeScript 做前端，Express 做接口。技术重点有两处：一是通过权限码生成菜单、路由和按钮，同时后端校验读取范围和状态动作；二是把工单状态时间线、SLA 截止时间和运营看板做成完整闭环。为了先保证可演示，我先用内存数据完成流程，再增加 MySQL 存储切换。

常见面试问题与回答框架

问题	回答要点
为什么做工单系统？	有角色、流程、权限、统计，比单纯 CRUD 更贴近后台业务且规模可控。
隐藏按钮算权限控制吗？	不算；页面和按钮改善体验，后端接口按照权限码及数据归属做最终判断。
刷新后动态路由为什么正常？	路由守卫先用本地 Token 请求 profile，恢复权限码并重新注册可访问子路由，再解析目标地址。
为什么不把列表数据都放 Pinia？	登录、权限属于跨页面共享状态；列表与表单属于局部状态，放全局会增加同步与清理负担。
状态如何避免乱跳？	前端提交业务动作，后端 Service 根据当前状态、角色权限和归属决定新状态，并记录日志。
看板数据为何由后端统计？	前端拿到的是分页数据，不能可靠聚合全量；后端也能复用数据访问范围。
SLA 如何实现？	创建时根据优先级计算 `dueAt`；未结束工单与当前时间比较，展示正常、即将超时、已超时并汇总看板。
还有哪些改进？	可升级刷新令牌安全策略、文件附件和通知，但首版优先保证权限与流程完整可测试。

启动并验证

正式演示前执行：

npm run typecheck
npm run lint
npm run format:check
npm test
npm run build
npm run dev

拿手机计时完整演示一次，要求：

五分钟内走通 创建 -> 分配 -> 处理 -> 确认关闭。
能打开时间线和看板说明数据变化。
能准确说明哪个功能由前端完成、哪个必须由后端保证。
简历文字没有超出真实实现。

常见报错与原因

问题	原因	修正
演示中找不到刚创建的单	切换角色后进入了错误范围列表	记录工单编号，主管使用全部工单筛选
简历被追问时答不清	写了未亲手实现或未测试的内容	删除夸大表述，只保留能展示的代码
演示时间过长	展示页面过多	只围绕一张工单和三处关键代码

本章完成清单

README 含启动步骤、演示账号、功能截图和验收命令。
我的简历描述只包含真实完成的功能。
我能在五分钟内完整演示主流程。
我能回答权限、状态、Store、看板与 SLA 的设计原因。