# xyc

**Repository Path**: MarsBighead/xyc

## Basic Information

- **Project Name**: xyc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-21
- **Last Updated**: 2025-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端环境配置系统

这是一个基于Vite + TypeScript + React的前端项目，演示了如何通过环境变量配置不同环境下的API地址，避免在代码中硬编码域名。

## 项目特性

- ✅ 支持开发、生产环境的不同配置
- ✅ TypeScript类型安全的环境变量
- ✅ 自动化的WebSocket连接管理
- ✅ 响应式的UI界面
- ✅ 代码对比展示新旧实现方式

## 环境配置说明

### 环境变量文件

项目包含三个环境变量文件：

- `.env` - 基础环境变量（所有环境共享）
- `.env.development` - 开发环境配置
- `.env.production` - 生产环境配置

### 配置示例

**开发环境 (.env.development)**
```env
VITE_API_BASE_URL=http://127.0.0.1:8000
VITE_WS_BASE_URL=ws://127.0.0.1:8000
VITE_ENV=development
```

**生产环境 (.env.production)**
```env
VITE_API_BASE_URL=https://api.example.com
VITE_WS_BASE_URL=wss://api.example.com
VITE_ENV=production
```

## 使用方法

### 1. 安装依赖

```bash
yarn install
```

### 2. 运行开发环境

```bash
yarn dev
# 或指定开发环境
yarn dev --mode development
```

### 3. 构建生产版本

```bash
yarn build:prod
# 或
yarn build --mode production
```

### 4. 构建开发版本

```bash
yarn build:dev
```

## 核心代码对比

### ❌ 旧的硬编码方式

```typescript
// 开发环境
const token = getAuthToken();
ws = new WebSocket(`ws://127.0.0.1:8000/db-agent/ws?token=${token}`);

// 生产环境（需要手动注释/取消注释）
// ws = new WebSocket(`ws://192.168.4.32:8000/db-agent/ws?token=${token}`);
```

### ✅ 新的环境配置方式

```typescript
import { createDbAgentWebSocket } from './utils/websocket';

const token = getAuthToken();
const ws = createDbAgentWebSocket(token, (data) => {
  console.log('收到消息:', data);
});

ws.connect();
```

## API参考

### 环境变量工具函数

```typescript
import { 
  getEnv, 
  getApiBaseUrl, 
  getWsBaseUrl, 
  getCurrentEnv, 
  isDevelopment, 
  isProduction 
} from './utils/env';

// 获取环境变量
const apiUrl = getApiBaseUrl();
const wsUrl = getWsBaseUrl();
const currentEnv = getCurrentEnv();

// 环境检查
if (isDevelopment()) {
  console.log('当前是开发环境');
}
```

### WebSocket连接

```typescript
import { createDbAgentWebSocket, WebSocketConnection } from './utils/websocket';

// 简单用法
const ws = createDbAgentWebSocket(token, onMessageCallback);
ws.connect();

// 高级用法
const ws = new WebSocketConnection({
  path: '/custom-path',
  token: 'your-token',
  reconnectAttempts: 5,
  reconnectInterval: 2000
}, onMessage, onOpen, onClose, onError);

ws.connect();
ws.send({ type: 'message', data: 'Hello' });
ws.close();
```

## 项目结构

```
src/
├── types/
│   └── env.d.ts          # TypeScript环境变量类型定义
├── utils/
│   ├── env.ts            # 环境变量工具函数
│   ├── websocket.ts      # WebSocket连接管理
│   └── auth.ts           # 认证相关工具
├── App.tsx               # 主应用组件
├── App.css               # 应用样式
├── main.tsx              # 应用入口
└── index.css             # 全局样式
```

## 构建配置

项目使用Vite进行构建，配置在`vite.config.ts`中：

- 自动加载环境变量
- 开发环境支持热重载
- 生产环境优化和压缩
- 类型检查集成

## 注意事项

1. **环境变量前缀**: 所有客户端可访问的环境变量必须以`VITE_`开头
2. **安全敏感信息**: 不要在前端代码中暴露敏感信息（如API密钥）
3. **类型安全**: 所有环境变量都有TypeScript类型定义
4. **构建优化**: 生产环境构建时会移除未使用的代码

## 扩展建议

1. 可以添加测试环境配置（`.env.test`）
2. 可以集成CI/CD流水线自动部署不同环境
3. 可以添加环境变量验证机制
4. 可以支持更多的环境特定配置