💬 可爱 Chatbot 应用

一个小巧可爱的聊天机器人应用，基于 React + Vite 构建，集成智谱 GLM-4.7 API。

✨ 特性

• 🎨 柔和可爱的界面设计
• 💬 流畅的对话体验
• 🎭 精美的动画效果
• 📱 响应式设计，支持移动端
• ⚡ 基于 Vite 的快速开发体验

🚀 快速开始

安装依赖

npm install

配置环境变量

复制 .env.example 为 .env 并填入你的 GLM API Key：

cp .env.example .env

编辑 .env 文件：

VITE_GLM_API_KEY=your-api-key-here

本地开发

npm run dev

应用将在 http://localhost:5173 启动。

构建生产版本

npm run build

构建产物将输出到 dist 目录。

📦 部署

Vercel 部署（推荐）

1. 访问 Vercel
2. 点击 "New Project"
3. 导入你的 GitHub 仓库 Noahmlng/TestBot
4. 在环境变量中添加 VITE_GLM_API_KEY，值为你的 API Key
5. 点击 "Deploy"

Vercel 会自动检测 Vite 项目并完成部署。

Netlify 部署

1. 访问 Netlify
2. 点击 "Add new site" -> "Import an existing project"
3. 连接你的 GitHub 仓库
4. 构建设置：
   • Build command: npm run build
   • Publish directory: dist
5. 在 "Site settings" -> "Environment variables" 中添加 VITE_GLM_API_KEY
6. 点击 "Deploy site"

GitHub Pages 部署

1. 安装 gh-pages：

npm install --save-dev gh-pages

2. 在 package.json 中添加：

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

3. 运行部署：

npm run deploy

🛠️ 技术栈

• React 18 - UI 框架
• Vite - 构建工具
• GLM-4.7 API - AI 对话服务
• CSS3 - 样式和动画

📝 项目结构

TestBot/
├── src/
│   ├── components/      # React 组件
│   │   ├── ChatWindow.jsx
│   │   └── Message.jsx
│   ├── services/        # API 服务
│   │   └── glmApi.js
│   ├── App.jsx          # 主应用组件
│   └── main.jsx         # 入口文件
├── .env                 # 环境变量（不提交到 Git）
└── package.json

🔒 安全提示

• ⚠️ 重要：.env 文件已添加到 .gitignore，不会提交到仓库
• 部署时请确保在平台的环境变量中正确配置 VITE_GLM_API_KEY
• 不要将 API Key 提交到公开仓库

📄 许可证

MIT