# 日志管理说明

## 问题说明

当前代码中存在大量的 `console.log` 语句（VideoIPAgent.vue 中有 865 个），这会导致：
- 控制台日志过多，影响性能
- 生产环境中暴露过多调试信息
- 浏览器开发者工具可能卡死

## 解决方案

已创建日志管理工具 `src/utils/logger.ts`，提供以下功能：

### 1. 自动环境检测
- **开发环境**：默认显示所有日志
- **生产环境**：默认只显示错误日志

### 2. 日志级别控制
```typescript
enum LogLevel {
    DEBUG = 0,  // 调试信息
    INFO = 1,   // 一般信息
    WARN = 2,   // 警告
    ERROR = 3,  // 错误
    NONE = 4    // 不显示任何日志
}
```

### 3. 使用方法

#### 在代码中使用
```typescript
// 导入日志工具
import { logger, log, debug, info, warn, error } from '@/utils/logger';

// 替换 console.log
log('用户点击了按钮');

// 替换 console.debug
debug('详细调试信息', { data: someData });

// 替换 console.info
info('任务开始执行');

// 替换 console.warn
warn('配置项缺失，使用默认值');

// 替换 console.error
error('请求失败', error);

// 分组日志
group('任务执行详情');
log('步骤1: 初始化');
log('步骤2: 处理数据');
groupEnd();
```

#### 在控制台中动态控制
打开浏览器控制台，输入以下命令：

```javascript
// 关闭所有日志
__disableLog()

// 开启所有日志
__enableLog()

// 设置日志级别（只显示错误）
__setLogLevel(3)

// 设置日志级别（显示所有）
__setLogLevel(0)

// 查看当前设置
__logger.getLevel()
__logger.isEnabled()
```

### 4. 迁移计划

为避免一次性修改过多代码导致问题，建议分步骤迁移：

#### 第一步：关键文件优先（已完成创建工具）
- ✅ 创建日志工具 `logger.ts`

#### 第二步：高频文件迁移（建议优先处理）
- [ ] VideoIPAgent.vue (865个console)
- [ ] SubtitleStyleSelector.vue (107个console)

#### 第三步：其他文件逐步迁移
- [ ] 其他Vue组件
- [ ] Service层
- [ ] Store层

### 5. 性能优化建议

#### 立即可用的优化
即使不修改代码，也可以在生产环境的启动脚本中添加：

```javascript
// 在 main.ts 或 App.vue 的最前面添加
if (import.meta.env.MODE === 'production') {
    // 生产环境禁用所有console
    console.log = () => {};
    console.debug = () => {};
    console.info = () => {};
    // 保留 warn 和 error
}
```

#### 使用日志工具后的优化
```typescript
// 在 main.ts 中配置
import { logger, LogLevel } from '@/utils/logger';

// 生产环境只显示错误
if (import.meta.env.MODE === 'production') {
    logger.setLevel(LogLevel.ERROR);
}
```

### 6. 日志缓存功能

日志工具内置了缓存功能，最多保留1000条最近的日志：

```javascript
// 查看缓存的日志
__logger.getCache()

// 清空日志缓存
__logger.clearCache()
```

## 使用示例

### 替换前
```typescript
console.log('[VideoGen.onTaskSubmitted] 📥 任务已提交');
console.log('[VideoGen.onTaskSubmitted] 📥 开始刷新任务列表...');
console.log('[VideoGen.onTaskSubmitted] ✓ 任务列表刷新完成');
```

### 替换后
```typescript
import { log } from '@/utils/logger';

log('[VideoGen.onTaskSubmitted] 📥 任务已提交');
log('[VideoGen.onTaskSubmitted] 📥 开始刷新任务列表...');
log('[VideoGen.onTaskSubmitted] ✓ 任务列表刷新完成');
```

## 注意事项

1. **保持原有功能**：日志工具的API与console保持一致，迁移后不影响现有功能
2. **逐步迁移**：不要一次性替换所有console，建议按文件逐步迁移
3. **性能优先**：优先迁移日志最多的文件（如VideoIPAgent.vue）
4. **保留错误日志**：即使在生产环境，也应保留error级别的日志用于问题排查

## 快速禁用日志（临时方案）

如果当前日志已经影响性能，可以临时在浏览器控制台执行：

```javascript
// 方案1：使用日志工具（推荐）
__disableLog()

// 方案2：直接禁用console（适用于紧急情况）
console.log = () => {};
console.debug = () => {};
console.info = () => {};
```

重新刷新页面后，日志工具的设置会自动保存并生效。