AI智能助手聊天系统

一个基于Vue 3 + Element Plus构建的现代化AI聊天应用，提供完整的用户系统、会员体系和智能对话功能。

功能特性

🚀 核心功能

• 用户系统：完整的注册、登录、个人设置功能

• AI对话：智能对话界面，支持多轮对话历史

• 会员系统：三级会员体系（免费/高级/VIP），不同权益

• 对话管理：对话历史保存、删除、清空功能

• 响应式设计：适配各种设备尺寸

💼 会员权益

• 免费版：每月10次对话，基础AI回复

• 高级版：每月1000次对话，高质量回复，云同步

• VIP版：无限对话，最高质量回复，专属客服

🎨 界面特色

• 现代化渐变背景设计

• 优雅的卡片式布局

• 流畅的动画效果

• 直观的用户体验

技术栈

• 前端框架：Vue 3 (Composition API)

• UI组件库：Element Plus

• 状态管理：Pinia

• 路由管理：Vue Router

• 构建工具：Vite

• HTTP客户端：Axios

项目结构

src/
├── components/          # 公共组件
├── views/              # 页面组件
│   ├── Login.vue       # 登录页面
│   ├── Register.vue    # 注册页面
│   ├── Chat.vue        # 聊天主界面
│   ├── Membership.vue  # 会员购买页面
│   └── Profile.vue     # 个人设置页面
├── stores/             # 状态管理
│   ├── user.js         # 用户状态管理
│   └── chat.js         # 聊天状态管理
├── router/             # 路由配置
│   └── index.js        # 路由定义
├── App.vue             # 根组件
└── main.js             # 应用入口

安装和使用

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

演示账号

为了便于体验，系统提供了演示账号：

• 邮箱：demo@example.com

• 密码：123456

主要页面说明

登录页面 (/login)

• 优雅的登录表单设计

• 表单验证和错误提示

• 演示账号信息提示

注册页面 (/register)

• 完整的注册表单

• 密码确认验证

• 用户协议确认

聊天界面 (/chat)

• 侧边栏对话历史管理

• 实时AI对话功能

• 用户状态和会员信息显示

• 快捷问题按钮

• 对话次数控制

会员页面 (/membership)

• 三种会员套餐展示

• 功能对比表格

• 常见问题解答

• 模拟支付流程

个人设置 (/profile)

• 个人信息编辑

• 头像上传功能

• 密码修改

• 偏好设置

• 账户安全操作

数据存储

项目使用localStorage进行数据持久化：

• token: 用户登录凭证

• user: 用户基本信息

• conversations: 对话历史记录

• userPreferences: 用户偏好设置

模拟功能说明

由于这是一个演示项目，以下功能使用模拟实现：

• AI回复生成（基于规则的简单回复）

• 用户注册和登录验证

• 会员购买支付流程

• 文件上传（头像）

浏览器支持

• Chrome >= 60

• Firefox >= 60

• Safari >= 12

• Edge >= 79

开发说明

路由守卫

项目实现了路由守卫功能：

• 未登录用户访问需要认证的页面会自动跳转到登录页

• 已登录用户访问登录/注册页会跳转到聊天页

状态管理

使用Pinia进行状态管理：

• useUserStore: 管理用户登录状态、个人信息、会员信息

• useChatStore: 管理对话历史、消息记录、AI回复状态

组件设计

• 使用Vue 3 Composition API

• 响应式数据和计算属性

• 生命周期钩子管理

• 事件处理和表单验证

未来可能改进（不一定有时间）

• 集成真实的AI API（如OpenAI、ChatGPT等）
• 实现真实的用户认证系统
• 添加支付网关集成
• 增加多语言支持
• 实现暗色主题
• 添加语音输入功能
• 实现文件上传对话功能

预览