AI Chat Frontend

AI 聊天前端应用，基于 Vue 3 + TypeScript + Vite 构建，提供流畅的 AI 对话交互界面。

📋 目录

• 项目概述
• 技术栈
• 功能特性
• 项目结构
• 安装步骤
• 使用说明
• API 接口说明
• 开发指南
• 构建部署

项目概述

ai-chat-frontend 是一个 AI 聊天应用的前端界面，与后端服务 monkey 协同工作。提供会话管理、实时对话、Markdown 渲染、代码高亮等功能。

核心功能场景

• 会话管理: 创建、切换、管理多个聊天会话
• 对话交互: 发送消息、接收 AI 响应、消息历史加载
• 内容渲染: 支持 Markdown 格式、代码高亮显示

技术栈

前端框架

• Vue: 3.5.30 (Composition API + <script setup>)
• TypeScript: ~5.9.3

构建工具链

• Vite: 8.0.1
• @vitejs/plugin-vue: 6.0.5
• vue-tsc: 3.2.5 (TypeScript 类型检查)

功能库

• markdown-it: 14.1.1 - Markdown 解析器
• highlight.js: 11.11.1 - 代码语法高亮
• @types/node: 24.12.0 - Node.js 类型定义

功能特性

1. 会话管理

• ✅ 创建新会话
• ✅ 切换不同会话
• ✅ 会话列表展示
• ✅ 自动更新会话标题（基于首条消息）

2. 对话交互

• ✅ 发送文本消息
• ✅ 实时接收 AI 响应
• ✅ 加载历史消息
• ✅ 自动滚动到最新消息
• ✅ 加载状态提示

3. 内容渲染

• ✅ Markdown 格式支持
• ✅ 代码块语法高亮（GitHub 主题）
• ✅ 表格自适应滚动
• ✅ 图片自适应显示
• ✅ 链接自动识别

4. 用户体验

• ✅ 响应式布局
• ✅ 深色/浅色模式自动适配
• ✅ 消息气泡样式区分（用户/AI）
• ✅ 输入框快捷发送（Enter 键）

项目结构

ai-chat-frontend/
├── public/                  # 静态资源
│   ├── favicon.svg         # 网站图标
│   └── icons.svg           # 图标集合
├── src/
│   ├── assets/             # 项目资源
│   │   ├── hero.png        # 英雄图
│   │   ├── vite.svg        # Vite logo
│   │   └── vue.svg         # Vue logo
│   ├── components/         # Vue 组件
│   │   ├── Chat.vue        # 聊天主组件 ⭐
│   │   └── HelloWorld.vue  # 示例组件
│   ├── App.vue             # 根组件
│   ├── main.ts             # 入口文件
│   └── style.css           # 全局样式
├── index.html              # HTML 模板
├── package.json            # 项目配置和依赖
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 构建配置
└── README.md               # 项目文档

核心组件说明

Chat.vue

聊天功能的核心组件，包含：

• 会话管理逻辑: 加载、创建、切换会话
• 消息处理: 发送消息、接收响应、历史记录加载
• Markdown 渲染: 使用 markdown-it 解析 Markdown 内容
• 代码高亮: 集成 highlight.js 进行代码语法高亮
• UI 布局: 左侧会话列表 + 右侧聊天区域

安装步骤

环境要求

• Node.js >= 18.x
• npm >= 9.x

1. 克隆项目

git clone <repository-url>
cd ai-chat-frontend

2. 安装依赖

npm install

3. 配置后端服务

确保后端 monkey 服务运行在 http://localhost:8080

代理配置已在 vite.config.ts 中预设：

server: {
  proxy: {
    '/session': {
      target: 'http://localhost:8080',
      changeOrigin: true
    },
    '/chat': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

使用说明

启动开发服务器

npm run dev

启动后访问：http://localhost:5173（端口可能根据占用情况自动调整）

主要功能操作

1. 新建会话

• 点击左侧「+ 新建会话」按钮
• 系统自动创建新会话并切换到该会话

2. 发送消息

• 在底部输入框输入消息内容
• 按 Enter 键或点击「发送」按钮
• 消息会立即显示在聊天区域

3. 切换会话

• 点击左侧会话列表中的任意会话
• 自动加载该会话的历史消息

4. 查看代码块

• AI 返回的代码会自动高亮显示
• 支持横向滚动查看长代码

API 接口说明

后端接口依赖

所有 API 请求通过 Vite 代理转发到后端服务（默认 http://localhost:8080）

1. 获取会话列表

GET /session/list?userId=1

响应格式:

{
  "data": [
    {
      "id": 1,
      "title": "会话标题",
      "messages": []
    }
  ]
}

2. 创建会话

POST /session/create
Content-Type: application/json

{
  "userId": 1,
  "title": "新会话"
}

3. 获取会话历史

GET /session/history?sessionId=1

响应格式:

{
  "data": [
    {
      "role": "user",
      "content": "用户消息"
    },
    {
      "role": "ai",
      "content": "AI 回复"
    }
  ]
}

4. 发送消息

POST /chat
Content-Type: application/json

{
  "userId": 1,
  "sessionId": 1,
  "msg": "消息内容"
}

响应: 纯文本格式，AI 的回复内容

数据类型定义

interface Message {
  role: 'user' | 'ai';
  content: string;
}

interface Session {
  id: number;
  title: string;
  messages: Message[];
}

开发指南

代码规范

组件开发

使用 Vue 3 Composition API + <script setup> 语法：

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <div>{{ count }}</div>
</template>

TypeScript 类型

所有变量和函数都需要明确的类型定义：

const sessions = ref<Session[]>([]);
const sendMessage = async () => { ... };

Markdown 渲染配置

项目中已配置 markdown-it 实例，支持：

• HTML 标签
• 链接自动识别
• 排版优化
• 代码高亮

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: (str, lang) => {
    // 代码高亮逻辑
  }
});

样式开发

使用 CSS 变量实现主题系统：

:root {
  --text: #6b6375;
  --bg: #fff;
  --accent: #aa3bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 深色模式变量 */
  }
}

添加新功能

1. 新增组件: 在 src/components/ 下创建 .vue 文件
2. 导入依赖: 在 package.json 中添加并安装
3. 类型定义: 在 src/components/Chat.vue 或其他位置定义 TypeScript 接口
4. 样式编写: 使用 scoped 样式或全局 CSS 变量

构建部署

类型检查

npm run build

此命令会先执行 vue-tsc 进行类型检查

生产构建

npm run build

构建产物输出到 dist/ 目录

预览构建结果

npm run preview

部署注意事项

1. 环境变量: 如需修改后端地址，需更新 vite.config.ts 中的代理配置
2. 静态资源: 确保 public/ 目录下的资源正确复制
3. CORS: 生产环境如不使用代理，需在后端配置 CORS

常见问题

Q: 如何修改后端服务地址？

编辑 vite.config.ts 文件，修改 target 字段：

target: 'http://your-backend-url:port'

Q: 代码高亮不生效？

检查代码块的语言标识，确保使用正确的语言标记：

```typescript
// 代码内容
```

Q: 消息发送失败？

1. 确认后端服务是否正常运行
2. 检查浏览器控制台网络请求
3. 验证 userId 参数是否正确

相关项目

• 后端服务: monkey - AI 聊天后端服务
• Vue 3: vuejs/core
• Vite: vitejs/vite

License

MIT