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

• 🎨 深色模式支持 - 自动记住用户的主题偏好
• 📱 响应式设计 - 完美适配桌面端和移动端
• 💭 思考过程展示 - 支持 AI 思考过程的展开/折叠，实时显示思考时长
• 🚀 流式响应 - 实时展示 AI 回复内容，支持打字机效果
• 🎯 Markdown 支持 - 完美渲染代码块、粗体、斜体等格式
• 🔐 用户认证 - 支持用户注册、登录、JWT 认证
• 💾 会话管理 - 支持多会话管理、历史记录保存
• 🤖 多模型支持 - 支持切换不同的 AI 模型，兼容 OpenAI 格式 API
• 📊 管理后台 - 完整的仪表盘、用户管理、模型配置、数据分析
• 🤖 AI 智能报告 - 基于 AI 的数据分析报告生成
• 📢 通告系统 - 支持首页通告轮播展示
• ⚙️ 系统配置 - 可配置匿名访问、用户注册开关
• 🏷️ 词云分析 - 高频提问关键词可视化展示
• ⚡ 高性能 - 基于 Vue 3 和 Flask，轻量高效
• 🐳 Docker 支持 - 一键 Docker 部署

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

适用于本地环境：

git clone https://cnb.cool/xwsir/CNB-Chat.git
cd CNB-Chat
chmod +x start.sh
./start.sh

脚本会自动创建虚拟环境、安装依赖并同时启动前后端服务。

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 依赖
│   ├── core/              # 核心模块
│   │   ├── config.py      # 配置管理
│   │   ├── database.py    # 数据库操作
│   │   ├── response.py    # 响应封装
│   │   └── __init__.py    # 模块导出
│   ├── routes/            # 路由模块
│   │   ├── auth.py        # 认证相关
│   │   ├── chat.py        # 聊天相关
│   │   ├── sessions.py    # 会话管理
│   │   ├── admin.py       # 管理后台
│   │   ├── ai_report.py   # AI 报告生成
│   │   ├── notices.py     # 通告管理
│   │   └── public.py      # 公共接口
│   └── data/              # 数据目录
│       └── .encryption_key # 加密密钥（自动生成）
├── frontend/              # Vue 3 前端
│   ├── src/
│   │   ├── views/         # 页面组件
│   │   │   ├── Chat.vue          # 聊天页面
│   │   │   ├── Login.vue         # 登录页面
│   │   │   ├── Register.vue      # 注册页面
│   │   │   ├── Admin.vue         # 管理后台框架
│   │   │   └── admin/            # 管理后台子页面
│   │   │       ├── Home.vue      # 仪表盘
│   │   │       ├── Users.vue     # 用户管理
│   │   │       ├── Chats.vue     # 对话管理
│   │   │       ├── Config.vue    # 系统配置
│   │   │       └── Notice.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 数据库（自动生成）
├── start.sh               # 一键启动脚本（本地环境）
└── README.md

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

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

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

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

支持以下 Markdown 语法：

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

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

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

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

管理员可访问 /admin 进入管理后台：

• 仪表盘 - 实时数据统计、趋势图表、高频提问分析
• 用户管理 - 查看和管理所有用户
• 对话管理 - 查看和管理所有对话记录
• 系统配置 - 配置 AI 模型、开关匿名访问和注册
• 通告管理 - 设置首页展示的通告内容

• 基于 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、云服务器等多种方式

使用 Docker Compose 快速部署：

services:
  chat:
    image: docker.cnb.cool/xwsir/cnb-chat:latest
    container_name: chat
    restart: always
    user: root
    ports:
      - "5000:5000"
    volumes:
      - ./data:/app/data

将上述内容保存为 docker-compose.yml，然后运行：

docker-compose up -d

应用将在 http://localhost:5000 运行。

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

MIT License

欢迎提交 Issue 和 Pull Request!