# 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