139 lines
2.9 KiB
Markdown
139 lines
2.9 KiB
Markdown
# AI Chat Interview - Vue 3 + Nuxt 3 面试题
|
||
|
||
## 项目背景
|
||
|
||
这是一个简单的 AI 聊天应用。前任开发者为了赶进度，将所有逻辑都写在了一个文件中，虽然能运行，但存在交互问题和代码维护性问题。
|
||
|
||
你的任务是完成功能实现、修复 Bug，并对代码进行重构。
|
||
|
||
**建议时间**: 60 分钟
|
||
|
||
---
|
||
|
||
## 启动项目
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问: http://localhost:3000
|
||
|
||
---
|
||
|
||
## 你的任务
|
||
|
||
请按顺序完成以下 3 个任务，每完成一个任务后提交一次 Git Commit。
|
||
|
||
### 任务 1: 实现 Loading 加载状态
|
||
|
||
**需求**:
|
||
|
||
- 点击 "发送" 按钮后，按钮文字应该变为 "思考中..." 并且处于禁用状态
|
||
- AI 回复完成后，按钮恢复为 "发送" 并可点击
|
||
- 加载中时，用户不能重复发送消息
|
||
|
||
**要求**:
|
||
|
||
1. 创建一个响应式的 loading 状态变量
|
||
2. 在发送消息时设置 loading 为 true
|
||
3. 在 AI 回复完成后设置 loading 为 false
|
||
4. 按钮的文字和禁用状态根据 loading 变量动态变化
|
||
|
||
- 模板中使用三元表达式显示不同文字
|
||
|
||
**完成后**:
|
||
|
||
```bash
|
||
git 提交代码
|
||
```
|
||
|
||
---
|
||
|
||
### 任务 2: 修复聊天框滚动异常 Bug
|
||
|
||
**现象**:
|
||
|
||
- 当发送消息或收到 AI 回复时，聊天框应该自动滚动到最底部
|
||
- 目前的 `scrollToBottom` 函数时灵时不灵，经常卡在倒数第二条消息
|
||
|
||
**要求**:
|
||
|
||
- 修复滚动逻辑，确保新消息出现后视图都能自动滚到底部
|
||
|
||
**完成后**:
|
||
|
||
```bash
|
||
git 提交代码
|
||
```
|
||
|
||
---
|
||
|
||
### 任务 3: 组件化重构
|
||
|
||
**现象**:
|
||
|
||
- `app.vue` 文件中，消息列表的渲染逻辑和主界面耦合太紧，代码结构混乱
|
||
|
||
**要求**:
|
||
|
||
1. 将单条消息的渲染逻辑提取为独立组件: `components/ChatMessage.vue`
|
||
2. 通过 `props` 传递消息数据
|
||
3. 加分项: 为组件 Props 添加 TypeScript 类型定义
|
||
|
||
|
||
**完成后**:
|
||
|
||
```bash
|
||
git 提交代码
|
||
```
|
||
|
||
---
|
||
|
||
## 提交代码
|
||
|
||
完成所有任务后:
|
||
|
||
1. 创建一个新分支用于你的修改
|
||
|
||
```bash
|
||
git 提交 PR
|
||
```
|
||
|
||
2. 确保所有任务的 commit 都已提交
|
||
|
||
3. 推送分支到远程仓库
|
||
|
||
|
||
4. 在 gitea 上创建 Pull Request (PR)
|
||
- PR 标题: `完成 AI Chat 面试任务`
|
||
- PR 描述中简要说明你完成的 3 个任务
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
- 本项目不依赖真实后端，所有接口均为模拟 (Mock)
|
||
- 不需要关注 UI 美观度，重点考察 Vue 3 响应式原理、DOM 更新机制和代码组织能力
|
||
- 可以参考 [Nuxt 3 官方文档](https://nuxt.com/docs) 和 [Vue 3 官方文档](https://vuejs.org/)
|
||
- 每个任务完成后必须提交一次 commit，commit message 需要清晰描述改动内容
|
||
|
||
---
|
||
|
||
## 验收标准
|
||
|
||
完成所有任务后，请确保:
|
||
|
||
1. 项目能正常运行 (`npm run dev`)
|
||
2. 所有功能正常工作
|
||
3. 代码结构清晰，易于维护
|
||
4. Git 提交历史清晰，至少包含 3 个独立的 commit（每个任务一个）
|
||
5. 成功创建 Pull Request
|