面试题3道
This commit is contained in:
182
README.md
182
README.md
@@ -1,75 +1,151 @@
|
||||
# Nuxt Minimal Starter
|
||||
# AI Chat Interview - Vue 3 + Nuxt 3 面试题
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
## 项目背景
|
||||
|
||||
## Setup
|
||||
这是一个简单的 AI 聊天应用。前任开发者为了赶进度，将所有逻辑都写在了一个文件中，虽然能运行，但存在交互问题和代码维护性问题。
|
||||
|
||||
Make sure to install dependencies:
|
||||
你的任务是完成功能实现、修复 Bug，并对代码进行重构。
|
||||
|
||||
**建议时间**: 60 分钟
|
||||
|
||||
---
|
||||
|
||||
## 启动项目
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
### 启动开发服务器
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
访问: http://localhost:3000
|
||||
|
||||
Build the application for production:
|
||||
---
|
||||
|
||||
## 你的任务
|
||||
|
||||
请按顺序完成以下 3 个任务，每完成一个任务后提交一次 Git Commit。
|
||||
|
||||
### 任务 1: 实现 Loading 加载状态
|
||||
|
||||
**需求**:
|
||||
|
||||
- 点击 "发送" 按钮后，按钮文字应该变为 "思考中..." 并且处于禁用状态
|
||||
- AI 回复完成后，按钮恢复为 "发送" 并可点击
|
||||
- 加载中时，用户不能重复发送消息
|
||||
|
||||
**要求**:
|
||||
|
||||
1. 创建一个响应式的 loading 状态变量
|
||||
2. 在发送消息时设置 loading 为 true
|
||||
3. 在 AI 回复完成后设置 loading 为 false
|
||||
4. 按钮的文字和禁用状态根据 loading 变量动态变化
|
||||
|
||||
**提示**:
|
||||
|
||||
- 查看 `app.vue` 中的 TODO 注释
|
||||
- 使用 Vue 3 的 `ref()` 创建响应式变量
|
||||
- 模板中使用三元表达式显示不同文字
|
||||
|
||||
**完成后**:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
git 提交代码
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
---
|
||||
|
||||
### 任务 2: 修复聊天框滚动异常 Bug
|
||||
|
||||
**现象**:
|
||||
|
||||
- 当发送消息或收到 AI 回复时，聊天框应该自动滚动到最底部
|
||||
- 目前的 `scrollToBottom` 函数时灵时不灵，经常卡在倒数第二条消息
|
||||
|
||||
**要求**:
|
||||
|
||||
- 修复滚动逻辑，确保新消息出现后视图都能自动滚到底部
|
||||
|
||||
**提示**:
|
||||
|
||||
- Vue 的 DOM 更新不是同步的，考虑使用 `nextTick`
|
||||
- 可以使用 `watch` 监听 `messages` 的变化
|
||||
|
||||
**完成后**:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
git 提交代码
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
---
|
||||
|
||||
### 任务 3: 组件化重构
|
||||
|
||||
**现象**:
|
||||
|
||||
- `app.vue` 文件中，消息列表的渲染逻辑和主界面耦合太紧，代码结构混乱
|
||||
|
||||
**要求**:
|
||||
|
||||
1. 将单条消息的渲染逻辑提取为独立组件: `components/ChatMessage.vue`
|
||||
2. 通过 `props` 传递消息数据
|
||||
3. 加分项: 为组件 Props 添加 TypeScript 类型定义
|
||||
|
||||
**提示**:
|
||||
|
||||
- 参考 `app.vue:89-101` 的消息渲染部分
|
||||
- 组件样式也需要一并迁移
|
||||
|
||||
**完成后**:
|
||||
|
||||
```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
|
||||
|
||||
Reference in New Issue
Block a user