# chat

**Repository Path**: aspyong_admin/chat

## Basic Information

- **Project Name**: chat
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-19
- **Last Updated**: 2025-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Serve360 聊天应用

基于 Vue 3 + Vite + Ant Design Vue 的移动端聊天应用。

## 功能特性

- 🔐 手机号登录（自动注册）
- 💬 实时聊天功能
- 📱 移动端优化界面
- 🎨 现代化 UI 设计
- 🔄 状态管理（Pinia）
- 📡 统一接口管理

## 技术栈

- **前端框架**: Vue 3 + Composition API
- **构建工具**: Vite
- **UI 组件库**: Ant Design Vue 4.x
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **HTTP 客户端**: Axios
- **样式**: CSS3 + 响应式设计

## 项目结构

```
src/
├── api/                 # 接口管理
│   └── index.js        # 统一接口配置
├── components/          # 公共组件
├── router/             # 路由配置
│   └── index.js
├── stores/             # 状态管理
│   ├── user.js         # 用户状态
│   └── counter.js
├── utils/              # 工具函数
│   └── request.js      # HTTP 请求封装
├── views/              # 页面组件
│   ├── Login.vue       # 登录页面
│   ├── Home.vue        # 首页
│   ├── Chat.vue        # 聊天页面
│   ├── Demand.vue      # 需求管理
│   ├── Engineer.vue    # 工程师页面
│   └── Profile.vue     # 个人设置
├── App.vue             # 根组件
└── main.js             # 入口文件
```

## 开发环境设置

### 环境要求

- Node.js >= 20.19.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

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

### 构建生产版本

```bash
npm run build
```

### 代码检查

```bash
npm run lint
```

## 接口配置

### 代理配置

项目已配置 Vite 代理，将 `/api` 请求代理到后端服务器：

```javascript
// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
}
```

### 接口管理

所有接口统一在 `src/api/index.js` 中管理：

- `userApi`: 用户相关接口
- `chatApi`: 聊天相关接口
- `demandApi`: 需求相关接口
- `engineerApi`: 工程师相关接口
- `uploadApi`: 文件上传接口

## 登录功能

### 登录流程

1. 用户输入手机号
2. 前端验证手机号格式
3. 调用后端登录接口
4. 后端自动创建用户（如果不存在）
5. 返回 JWT token 和用户信息
6. 前端保存登录状态并跳转

### 登录接口

```javascript
POST /api/auth/login
Content-Type: application/json

{
  "phone": "13800138001"
}
```

### 响应格式

```javascript
{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
    "user": {
      "id": 1,
      "phone": "13800138001",
      "nickname": "用户8001",
      "avatar": null,
      "real_name": null
    }
  },
  "timestamp": 1756952161,
  "success": true
}
```

## 状态管理

使用 Pinia 进行状态管理，主要包含：

- **用户状态** (`stores/user.js`): 登录状态、用户信息
- **其他业务状态**: 可根据需要扩展

## 移动端适配

- 响应式设计，支持各种屏幕尺寸
- 触摸友好的交互设计
- 优化的移动端性能

## 开发说明

### 添加新页面

1. 在 `src/views/` 中创建 Vue 组件
2. 在 `src/router/index.js` 中添加路由配置
3. 如需权限控制，设置 `meta: { requiresAuth: true }`

### 添加新接口

1. 在 `src/api/index.js` 中添加接口方法
2. 在组件中使用 `import { apiName } from '@/api'`
3. 调用接口并处理响应

### 样式规范

- 使用 CSS 变量定义主题色彩
- 移动端优先的响应式设计
- 统一的间距和字体规范

## 部署说明

### 构建

```bash
npm run build
```

构建文件将生成在 `dist/` 目录

### 服务器配置

确保服务器支持 SPA 路由，所有路由都指向 `index.html`

### 环境变量

可通过 `.env` 文件配置环境变量：

```env
VITE_API_BASE_URL=http://localhost:8000
```

## 常见问题

### 1. 登录失败

- 检查后端服务是否启动
- 确认代理配置正确
- 查看浏览器控制台错误信息

### 2. 接口请求失败

- 检查网络连接
- 确认后端接口地址正确
- 查看请求和响应日志

### 3. 样式问题

- 确认 Ant Design Vue 正确引入
- 检查 CSS 导入顺序
- 使用浏览器开发者工具调试

## 更新日志

### v1.0.0 (2024-01-XX)

- ✨ 初始版本发布
- 🔐 手机号登录功能
- 📱 移动端界面设计
- 🎨 Ant Design Vue 集成
- 🔄 状态管理配置