Initial clean project import

docs/日志管理说明.md

@@ -0,0 +1,173 @@
+# 日志管理说明
+
+## 问题说明
+
+当前代码中存在大量的 `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 = () => {};
+```
+
+重新刷新页面后，日志工具的设置会自动保存并生效。