增加开发模式

src/main.js

@@ -11,7 +11,7 @@ import 'lib-flexible/flexible.js'
 // import '@/styles/element-theme-colors.css';
 import '@/styles/index.scss';
 import moment from 'moment'
-import VConsole from 'vconsole';
+// import VConsole from 'vconsole'; // 注释掉，使用 devMode.js 统一管理
 // import 'bi-element-ui/lib/bi-element-ui.css'
 import Element from 'bi-eleme'
 // import 'bi-eleme/lib/theme-chalk/index.css'
@@ -19,16 +19,8 @@ import BiElementUi from 'bi-element-ui'
 // import 'bi-element-ui/lib/bi-element-ui.css'
 import uploading from '@/utils/cos-upload'
 import 'element-ui/lib/theme-chalk/index.css';
-import { getParams } from '@/utils/index'
-
-if(process.env.NODE_ENV !== 'production'){
-  new VConsole();
-}
-const urlParams = getParams();
-if(urlParams.corp_id ==='wwfd5c6c0e0db795b4' ||  Cookies.get('corp_id') ==='wwfd5c6c0e0db795b4'){
-  console.log(urlParams,'urlParams')
-  new VConsole();
-}
+// 导入 VConsole 清理工具
+import '@/utils/vconsoleCleanup'
 
 // 测试一下
 Vue.use(uploading)

src/utils/devMode.js

+import VConsole from 'vconsole'
+
+class DevModeManager {
+  constructor() {
+    this.vConsole = null
+    this.clickCount = 0
+    this.clickTimer = null
+    this.maxClicks = 7 // 连续点击7次开启
+    this.resetTime = 3000 // 3秒内无点击则重置
+    this.isDevMode = this.getDevModeFromStorage()
+    
+    // 自动初始化逻辑
+    this.autoInit()
+  }
+
+  // 自动初始化逻辑
+  autoInit() {
+    const isDevEnv = process.env.NODE_ENV !== 'production'
+    
+    // 如果是开发环境或特定公司ID，或者之前开启过开发模式，则自动启用
+    if (isDevEnv || this.isDevMode) {
+      this.enableDevMode()
+    }
+  }
+
+  // 从 localStorage 获取开发模式状态
+  getDevModeFromStorage() {
+    try {
+      return localStorage.getItem('dev_mode_enabled') === 'true'
+    } catch (error) {
+      console.warn('无法读取开发模式状态:', error)
+      return false
+    }
+  }
+
+  // 保存开发模式状态到 localStorage
+  saveDevModeToStorage(enabled) {
+    try {
+      localStorage.setItem('dev_mode_enabled', enabled.toString())
+    } catch (error) {
+      console.warn('无法保存开发模式状态:', error)
+    }
+  }
+
+  // 处理点击事件
+  handleClick() {
+    this.clickCount++
+    console.log(`开发模式激活进度: ${this.clickCount}/${this.maxClicks}`)
+
+    // 清除之前的定时器
+    if (this.clickTimer) {
+      clearTimeout(this.clickTimer)
+    }
+
+    // 如果达到指定次数，切换开发模式
+    if (this.clickCount >= this.maxClicks) {
+      this.toggleDevMode()
+      this.resetClickCount()
+      return
+    }
+
+    // 设置重置定时器
+    this.clickTimer = setTimeout(() => {
+      if (this.clickCount > 0) {
+        console.log('开发模式激活超时，重置计数')
+        this.resetClickCount()
+      }
+    }, this.resetTime)
+  }
+
+  // 重置点击计数
+  resetClickCount() {
+    this.clickCount = 0
+    if (this.clickTimer) {
+      clearTimeout(this.clickTimer)
+      this.clickTimer = null
+    }
+  }
+
+  // 切换开发模式
+  toggleDevMode() {
+    if (this.isDevMode) {
+      this.disableDevMode()
+    } else {
+      this.enableDevMode()
+    }
+  }
+
+  // 开启开发模式
+  enableDevMode() {
+    try {
+      // 防止重复初始化
+      if (!this.vConsole) {
+        this.vConsole = new VConsole()
+        console.log('🎉 开发模式已开启！')
+        console.log('💡 提示：再次连续点击7次可关闭开发模式')
+      } else {
+        console.log('📱 开发模式已经处于开启状态')
+      }
+      this.isDevMode = true
+      this.saveDevModeToStorage(true)
+    } catch (error) {
+      console.error('开启开发模式失败:', error)
+      this.vConsole = null
+      this.isDevMode = false
+    }
+  }
+
+  // 关闭开发模式
+  disableDevMode() {
+    try {
+      if (this.vConsole) {
+        this.vConsole.destroy()
+        this.vConsole = null
+        console.log('👋 开发模式已关闭！')
+      }
+      this.isDevMode = false
+      this.saveDevModeToStorage(false)
+    } catch (error) {
+      console.error('关闭开发模式失败:', error)
+      // 强制重置状态
+      this.vConsole = null
+      this.isDevMode = false
+    }
+  }
+
+  // 检查是否为开发环境
+  isDevEnvironment() {
+    return process.env.NODE_ENV === 'development'
+  }
+
+  // 获取当前开发模式状态
+  getDevModeStatus() {
+    return {
+      enabled: this.isDevMode,
+      environment: process.env.NODE_ENV,
+      clickCount: this.clickCount,
+      maxClicks: this.maxClicks,
+      hasVConsole: !!this.vConsole
+    }
+  }
+
+  // 安全销毁方法
+  destroy() {
+    this.resetClickCount()
+    this.disableDevMode()
+  }
+}
+
+// 创建全局实例
+const devModeManager = new DevModeManager()
+
+// 添加到 window 对象，方便控制台操作
+if (typeof window !== 'undefined') {
+  window.devMode = {
+    toggle: () => devModeManager.toggleDevMode(),
+    enable: () => devModeManager.enableDevMode(),
+    disable: () => devModeManager.disableDevMode(),
+    status: () => devModeManager.getDevModeStatus(),
+    reset: () => devModeManager.resetClickCount(),
+    destroy: () => devModeManager.destroy()
+  }
+
+  // 监听页面卸载，清理资源
+  window.addEventListener('beforeunload', () => {
+    try {
+      devModeManager.destroy()
+    } catch (error) {
+      console.warn('清理开发模式资源时出错:', error)
+    }
+  })
+}
+
+export default devModeManager 
\ No newline at end of file

src/utils/vconsoleCleanup.js

+// VConsole 清理工具
+// 用于清理可能存在的重复实例和状态问题
+
+const VConsoleCleanup = {
+  // 清理所有可能的 VConsole 实例
+  cleanup() {
+    try {
+      // 清理全局 VConsole 引用
+      if (window.VConsole) {
+        delete window.VConsole
+      }
+      
+      // 清理可能存在的 vConsole 实例
+      if (window.vConsole && typeof window.vConsole.destroy === 'function') {
+        window.vConsole.destroy()
+        delete window.vConsole
+      }
+      
+      // 清理 DOM 中的 VConsole 元素
+      const vcElements = document.querySelectorAll('[class*="vc-"], [id*="__vconsole"]')
+      vcElements.forEach(el => {
+        try {
+          el.remove()
+        } catch (e) {
+          console.warn('移除 VConsole 元素失败:', e)
+        }
+      })
+      
+      // 清理可能的事件监听器
+      this.removeEventListeners()
+      
+      // 清理 localStorage 中的 VConsole 相关数据
+      this.cleanupStorage()
+      
+      console.log('✅ VConsole 清理完成')
+      
+    } catch (error) {
+      console.error('❌ VConsole 清理过程中出错:', error)
+    }
+  },
+  
+  // 移除可能的事件监听器
+  removeEventListeners() {
+    try {
+      // VConsole 常用的事件类型
+      const eventTypes = ['resize', 'orientationchange', 'scroll', 'touchstart', 'touchmove', 'touchend']
+      
+      // 移除可能由 VConsole 添加的事件监听器（这里只能尝试移除一些通用的）
+      eventTypes.forEach(type => {
+        // 注意：这里无法准确移除所有 VConsole 的监听器，只是一个清理尝试
+        document.removeEventListener(type, this.dummyHandler, true)
+        window.removeEventListener(type, this.dummyHandler, true)
+      })
+    } catch (error) {
+      console.warn('清理事件监听器时出错:', error)
+    }
+  },
+  
+  // 空的事件处理器
+  dummyHandler() {},
+  
+  // 清理存储
+  cleanupStorage() {
+    try {
+      const keysToRemove = []
+      
+      // 检查 localStorage 中是否有 VConsole 相关的键
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i)
+        if (key && (key.includes('vconsole') || key.includes('vConsole'))) {
+          keysToRemove.push(key)
+        }
+      }
+      
+      // 移除找到的键（保留我们自定义的 dev_mode_enabled）
+      keysToRemove.forEach(key => {
+        if (key !== 'dev_mode_enabled') {
+          localStorage.removeItem(key)
+        }
+      })
+      
+    } catch (error) {
+      console.warn('清理存储时出错:', error)
+    }
+  },
+  
+  // 检查当前状态
+  checkStatus() {
+    const status = {
+      hasWindowVConsole: !!window.VConsole,
+      hasWindowVconsole: !!window.vConsole,
+      vcElements: document.querySelectorAll('[class*="vc-"], [id*="__vconsole"]').length,
+      devModeStatus: window.devMode ? window.devMode.status() : null
+    }
+    
+    console.table(status)
+    return status
+  },
+  
+  // 强制重启开发模式
+  forceRestart() {
+    try {
+      this.cleanup()
+      
+      // 等待清理完成后重新启动
+      setTimeout(() => {
+        if (window.devMode) {
+          window.devMode.enable()
+          console.log('🔄 开发模式已重新启动')
+        }
+      }, 500)
+      
+    } catch (error) {
+      console.error('强制重启失败:', error)
+    }
+  }
+}
+
+// 添加到全局，方便控制台调用
+if (typeof window !== 'undefined') {
+  window.VConsoleCleanup = VConsoleCleanup
+  
+  // 在控制台提供快捷命令
+  window.cleanVConsole = () => VConsoleCleanup.cleanup()
+  window.checkVConsole = () => VConsoleCleanup.checkStatus()
+  window.restartVConsole = () => VConsoleCleanup.forceRestart()
+}
+
+export default VConsoleCleanup 
\ No newline at end of file