一个基于 Vue 3 + Flask 的全栈 AI 聊天应用，使用 CNB API 提供智能对话服务。

• 🎨 深色模式支持 - 自动记住用户的主题偏好
• 📱 响应式设计 - 完美适配桌面端和移动端
• 💭 思考过程展示 - 支持 AI 思考过程的展开/折叠，实时显示思考时长
• 🚀 流式响应 - 实时展示 AI 回复内容，支持打字机效果
• 🎯 Markdown 支持 - 完美渲染代码块、粗体、斜体等格式
• 🔐 用户认证 - 支持用户注册、登录、JWT 认证
• 💾 会话管理 - 支持多会话管理、历史记录保存
• 🤖 多模型支持 - 支持切换不同的 AI 模型
• ⚡ 高性能 - 基于 Vue 3 和 Flask，轻量高效

• Python 3.12+
• Node.js 18+
• CNB 账号（用于 AI API）

1. 克隆项目

git clone https://cnb.cool/xwsir/CNB-Chat.git
cd CNB-Chat

2. 安装后端依赖

cd backend
pip install -r requirements.txt

3. 安装前端依赖

cd ../frontend
npm install

4. 启动后端服务

cd ../backend
python app.py

后端服务将在 http://127.0.0.1:5000 运行

5. 启动前端开发服务器

cd ../frontend
npm run dev

前端服务将在 http://localhost:3000 运行

6. 访问应用

打开浏览器访问 http://localhost:3000

CNB-Chat/
├── backend/                # Flask 后端
│   ├── app.py             # 主应用入口
│   ├── requirements.txt   # Python 依赖
│   └── data/              # 数据目录
│       └── .encryption_key # 加密密钥（自动生成）
├── frontend/              # Vue 3 前端
│   ├── src/
│   │   ├── views/         # 页面组件
│   │   │   ├── ChatView.vue      # 聊天页面
│   │   │   ├── LoginView.vue     # 登录页面
│   │   │   ├── RegisterView.vue  # 注册页面
│   │   │   ├── ProfileView.vue   # 个人中心
│   │   │   └── AdminView.vue     # 管理后台
│   │   ├── stores/        # Pinia 状态管理
│   │   │   ├── auth.js    # 认证状态
│   │   │   ├── chat.js    # 聊天状态
│   │   │   └── theme.js   # 主题状态
│   │   ├── utils/         # 工具函数
│   │   │   ├── api.js     # API 封装
│   │   │   └── markdown.js # Markdown 渲染
│   │   ├── App.vue        # 根组件
│   │   └── main.js        # 入口文件
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── data/                  # 数据目录
│   └── chat.sqlite        # SQLite 数据库（自动生成）
└── README.md

• 点击右上角的 🌙/☀️ 图标切换主题
• 主题偏好自动保存到浏览器本地存储
• 刷新页面后自动恢复上次选择的主题

• 使用思考模型时，AI 会展示思考过程
• 点击思考过程头部可展开/折叠
• 流式响应时自动展开思考过程
• 显示思考时长估算

• AI 回复实时显示，无需等待完整响应
• 支持打字机效果的逐字显示
• 可随时中断生成

• 桌面端 (>768px): 宽敞布局，侧边栏显示
• 平板端 (≤768px): 紧凑布局
• 移动端 (≤640px): 全屏布局，底部导航

支持以下 Markdown 语法：

• 代码块: language ...
• 行内代码: ...
• 粗体: ** ... **
• 斜体: * ... *
• 链接: text

• 支持用户注册和登录
• JWT Token 认证
• 支持匿名用户使用
• 登录用户数据同步到服务器

• 创建多个聊天会话
• 会话历史记录保存
• 支持会话置顶、删除
• 自动保存对话标题

• 支持多种 AI 模型切换
• 区分思考模型和普通模型
• 思考模式一键切换

编辑 backend/app.py 中的配置：

# JWT 密钥（生产环境请修改）
app.config['JWT_SECRET_KEY'] = os.environ.get(
    'JWT_SECRET_KEY',
    'ai-chat-secret-key-change-in-production-2024'
)

# 数据库路径
DATABASE = os.path.join(os.path.dirname(__file__), 'data', 'chat.sqlite')

编辑 frontend/src/utils/api.js：

const api = axios.create({
  baseURL: 'http://127.0.0.1:5000/api',
  timeout: 30000,
})

后端支持以下环境变量：

变量名	说明	默认值
JWT_SECRET_KEY	JWT 签名密钥	ai-chat-secret-key-change-in-production-2024
ENCRYPTION_KEY	API 密钥加密密钥	自动生成

1. 打开应用后，从下拉菜单选择 AI 模型
2. 点击左下角"思考模式"按钮切换思考模式（可选）
3. 在输入框中输入消息
4. 点击"发送"按钮或按 Enter 键发送（Shift+Enter 换行）
5. 查看 AI 的回复，点击"💭 思考过程"可展开/折叠思考内容
6. 登录后可保存会话历史，跨设备同步

• 前端: Vue 3, Vite, Tailwind CSS, Pinia, Vue Router
• 后端: Flask, Flask-JWT-Extended, Flask-CORS
• 数据库: SQLite
• API: CNB AI API
• 部署: 支持 Docker、云服务器等多种方式

• API 密钥使用 Fernet 对称加密存储
• JWT Token 7 天过期
• 支持 CORS 跨域配置
• 密码使用 bcrypt 加密存储

MIT License

欢迎提交 Issue 和 Pull Request!