# ai-trae-chatbot

**Repository Path**: chaimhl/ai-trae-chatbot

## Basic Information

- **Project Name**: ai-trae-chatbot
- **Description**: 使用 Trae 通过 vibe coding 实现的类 chatgpt 聊天网站练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-04
- **Last Updated**: 2026-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



I apologize, but I encountered several issues when trying to access the repository files to get more details about the project. However, based on the code map you provided, I can create a comprehensive README.md file for this AI chatbot project.

# AI Trae Chatbot

## 简介

AI Trae Chatbot 是一个基于 Vue 3、TypeScript 和 Vite 构建的现代化聊天机器人前端应用。该项目采用了最新的前端技术栈，包括组合式 API、Pinia 状态管理、Vue Router 路由系统以及 UnoCSS 原子化 CSS 框架。

## 技术栈

- **框架**: Vue 3
- **语言**: TypeScript
- **构建工具**: Vite
- **状态管理**: Pinia
- **路由**: Vue Router
- **样式**: UnoCSS
- **包管理器**: pnpm

## 主要功能

### 主题切换
项目内置了完整的主题切换功能，支持亮色/暗色模式切换：
- `useTheme` 组合式函数：管理应用主题状态
- `THEME_KEY`：持久化存储主题配置
- 自动适配系统主题设置

### 字体大小调节
提供灵活的字体大小调整功能：
- `useFontSize` 组合式函数：管理字体大小状态
- `FONTSIZE_KEY`：持久化存储字体设置
- 符合无障碍访问标准

### 聊天功能
- `ChatView.vue`：核心聊天界面组件
- 响应式设计，适配各种屏幕尺寸

## 项目结构

```
ai-trae-chatbot/
├── client/                    # 前端应用目录
│   ├── src/
│   │   ├── composables/       # 组合式函数
│   │   │   ├── useFontSize.ts # 字体大小管理
│   │   │   └── useTheme.ts    # 主题管理
│   │   ├── stores/            # Pinia 状态管理
│   │   │   └── settings.ts    # 应用设置存储
│   │   ├── router/            # Vue Router 配置
│   │   │   └── index.ts       # 路由定义
│   │   ├── types/             # TypeScript 类型定义
│   │   │   └── index.ts       # 类型声明
│   │   ├── views/             # 页面组件
│   │   │   └── ChatView.vue   # 聊天页面
│   │   ├── App.vue            # 根组件
│   │   ├── main.ts            # 应用入口
│   │   └── style.css          # 全局样式
│   ├── public/                # 静态资源
│   ├── index.html             # HTML 模板
│   ├── package.json           # 项目依赖
│   ├── vite.config.ts         # Vite 配置
│   └── uno.config.ts          # UnoCSS 配置
```

## 快速开始

### 环境要求

- Node.js 18+
- pnpm 8+

### 安装依赖

```bash
cd client
pnpm install
```

### 启动开发服务器

```bash
cd client
pnpm dev
```

### 构建生产版本

```bash
cd client
pnpm build
```

### 预览生产版本

```bash
cd client
pnpm preview
```

## 开发配置

### IDE 配置

项目推荐使用 VS Code 进行开发，并建议安装以下扩展：
- Vue - Official
- TypeScript Vue Plugin
- UnoCSS

### 类型检查

```bash
cd client
pnpm type-check
```

### 代码格式化

```bash
cd client
pnpm format
```

## 自定义配置

### UnoCSS 配置

UnoCSS 的配置位于 `uno.config.ts`，支持以下功能：
- 原子化 CSS 类
- 自定义规则
- 主题变量
- 快捷方式

### Vite 配置

Vite 配置位于 `vite.config.ts`，支持：
- 环境变量配置
- 插件集成
- 开发服务器设置
- 构建优化

## 浏览器支持

- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

## 许可证

本项目基于 [LICENSE_NAME] 许可证开源。

## 贡献指南

1. Fork 本仓库
2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的改动 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启一个 Pull Request

## 联系方式

- 项目地址: https://gitee.com/chaimhl/ai-trae-chatbot

---

**注意**: 由于无法访问仓库中的实际文件，本 README 中的部分信息（如具体功能描述、许可证类型、联系方式等）是基于代码结构进行的合理推断。建议您根据项目的实际功能和完善 README 中的具体内容。