开发工具与调试技巧专题

// 组件调试工具
export class ComponentDebugger {
  private static instance: ComponentDebugger
  private components: Map<string, any> = new Map()

  static getInstance(): ComponentDebugger {
    if (!ComponentDebugger.instance) {
      ComponentDebugger.instance = new ComponentDebugger()
    }
    return ComponentDebugger.instance
  }

  // 注册组件用于调试
  registerComponent(name: string, component: any) {
    this.components.set(name, component)
    
    // 在开发环境下暴露到全局
    if (process.env.NODE_ENV === 'development') {
      ;(window as any).__VUE_COMPONENTS__ = this.components
    }
  }

  // 获取组件状态快照
  getComponentSnapshot(componentName: string) {
    const component = this.components.get(componentName)
    if (component) {
      return {
        props: component.$props,
        data: component.$data,
        computed: component.$options.computed,
        methods: Object.keys(component.$options.methods || {}),
        watchers: component.$options.watch || {}
      }
    }
    return null
  }

  // 监听组件状态变化
  watchComponent(componentName: string, callback: (snapshot: any) => void) {
    const component = this.components.get(componentName)
    if (component) {
      const originalData = component.$data
      
      // 使用 Proxy 监听数据变化
      const proxy = new Proxy(originalData, {
        set(target, property, value) {
          target[property] = value
          callback(ComponentDebugger.getInstance().getComponentSnapshot(componentName))
          return true
        }
      })
      
      component.$data = proxy
    }
  }
}

// 在组件中使用
export default defineComponent({
  name: 'MyComponent',
  setup() {
    const debugger = ComponentDebugger.getInstance()
    
    onMounted(() => {
      debugger.registerComponent('MyComponent', getCurrentInstance())
    })
    
    return {}
  }
})

// Pinia 调试工具
export class PiniaDebugger {
  private store: any
  private history: any[] = []
  private maxHistorySize = 100

  constructor(store: any) {
    this.store = store
    this.setupDebugging()
  }

  private setupDebugging() {
    if (process.env.NODE_ENV === 'development') {
      // 监听状态变化
      this.store.$subscribe((mutation: any, state: any) => {
        this.history.push({
          timestamp: new Date(),
          mutation,
          state: JSON.parse(JSON.stringify(state))
        })
        
        // 限制历史记录大小
        if (this.history.length > this.maxHistorySize) {
          this.history.shift()
        }
      })
    }
  }

  // 获取状态历史
  getHistory() {
    return this.history
  }

  // 回滚到指定状态
  rollbackTo(index: number) {
    if (index >= 0 && index < this.history.length) {
      const targetState = this.history[index].state
      Object.assign(this.store.$state, targetState)
    }
  }

  // 导出状态
  exportState() {
    return {
      state: this.store.$state,
      history: this.history
    }
  }

  // 导入状态
  importState(data: any) {
    if (data.state) {
      Object.assign(this.store.$state, data.state)
    }
    if (data.history) {
      this.history = data.history
    }
  }
}

// 使用示例
const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    email: '',
    preferences: {}
  }),
  
  actions: {
    updateUser(userData: any) {
      this.name = userData.name
      this.email = userData.email
    }
  }
})

// 在开发环境下启用调试
if (process.env.NODE_ENV === 'development') {
  const userStore = useUserStore()
  const debugger = new PiniaDebugger(userStore)
  
  // 暴露到全局
  ;(window as any).__PINIA_DEBUGGER__ = debugger
}

// 性能监控工具
export class PerformanceMonitor {
  private static instance: PerformanceMonitor
  private marks: Map<string, number> = new Map()
  private measures: Map<string, number> = new Map()

  static getInstance(): PerformanceMonitor {
    if (!PerformanceMonitor.instance) {
      PerformanceMonitor.instance = new PerformanceMonitor()
    }
    return PerformanceMonitor.instance
  }

  // 开始性能标记
  startMark(name: string) {
    if (performance.mark) {
      performance.mark(`${name}-start`)
      this.marks.set(name, performance.now())
    }
  }

  // 结束性能标记
  endMark(name: string) {
    if (performance.mark) {
      performance.mark(`${name}-end`)
      performance.measure(name, `${name}-start`, `${name}-end`)
      
      const startTime = this.marks.get(name)
      if (startTime) {
        const duration = performance.now() - startTime
        this.measures.set(name, duration)
        console.log(`Performance: ${name} took ${duration.toFixed(2)}ms`)
      }
    }
  }

  // 测量函数执行时间
  measureFunction<T>(name: string, fn: () => T): T {
    this.startMark(name)
    const result = fn()
    this.endMark(name)
    return result
  }

  // 异步函数测量
  async measureAsyncFunction<T>(name: string, fn: () => Promise<T>): Promise<T> {
    this.startMark(name)
    const result = await fn()
    this.endMark(name)
    return result
  }

  // 获取性能报告
  getPerformanceReport() {
    return {
      marks: Object.fromEntries(this.marks),
      measures: Object.fromEntries(this.measures)
    }
  }

  // 清除性能数据
  clear() {
    this.marks.clear()
    this.measures.clear()
    if (performance.clearMarks) {
      performance.clearMarks()
    }
    if (performance.clearMeasures) {
      performance.clearMeasures()
    }
  }
}

// 使用示例
const monitor = PerformanceMonitor.getInstance()

// 测量组件渲染时间
export default defineComponent({
  setup() {
    onMounted(() => {
      monitor.startMark('component-mount')
    })
    
    onUpdated(() => {
      monitor.endMark('component-mount')
    })
    
    return {}
  }
})

// 测量 API 调用时间
const fetchData = async () => {
  return monitor.measureAsyncFunction('api-call', async () => {
    const response = await fetch('/api/data')
    return response.json()
  })
}

// 内存泄漏检测工具
export class MemoryLeakDetector {
  private static instance: MemoryLeakDetector
  private components: Set<any> = new Set()
  private timers: Set<number> = new Set()
  private eventListeners: Map<Element, Array<{ event: string; handler: Function }>> = new Map()

  static getInstance(): MemoryLeakDetector {
    if (!MemoryLeakDetector.instance) {
      MemoryLeakDetector.instance = new MemoryLeakDetector()
    }
    return MemoryLeakDetector.instance
  }

  // 注册组件
  registerComponent(component: any) {
    this.components.add(component)
  }

  // 注销组件
  unregisterComponent(component: any) {
    this.components.delete(component)
  }

  // 注册定时器
  registerTimer(timerId: number) {
    this.timers.add(timerId)
  }

  // 注销定时器
  unregisterTimer(timerId: number) {
    this.timers.delete(timerId)
  }

  // 注册事件监听器
  registerEventListener(element: Element, event: string, handler: Function) {
    if (!this.eventListeners.has(element)) {
      this.eventListeners.set(element, [])
    }
    this.eventListeners.get(element)!.push({ event, handler })
  }

  // 注销事件监听器
  unregisterEventListener(element: Element, event: string, handler: Function) {
    const listeners = this.eventListeners.get(element)
    if (listeners) {
      const index = listeners.findIndex(l => l.event === event && l.handler === handler)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }

  // 检测内存泄漏
  detectLeaks() {
    const leaks = {
      components: this.components.size,
      timers: this.timers.size,
      eventListeners: Array.from(this.eventListeners.values()).reduce((total, listeners) => total + listeners.length, 0)
    }

    if (process.env.NODE_ENV === 'development') {
      console.group('Memory Leak Detection')
      console.log('Active components:', leaks.components)
      console.log('Active timers:', leaks.timers)
      console.log('Active event listeners:', leaks.eventListeners)
      console.groupEnd()
    }

    return leaks
  }

  // 清理所有资源
  cleanup() {
    // 清理定时器
    this.timers.forEach(timerId => {
      clearTimeout(timerId)
      clearInterval(timerId)
    })
    this.timers.clear()

    // 清理事件监听器
    this.eventListeners.forEach((listeners, element) => {
      listeners.forEach(({ event, handler }) => {
        element.removeEventListener(event, handler as EventListener)
      })
    })
    this.eventListeners.clear()

    // 清理组件
    this.components.clear()
  }
}

// 在组件中使用
export default defineComponent({
  setup() {
    const detector = MemoryLeakDetector.getInstance()
    const timerId = ref<number>()

    onMounted(() => {
      detector.registerComponent(getCurrentInstance())
      
      // 注册定时器
      const id = setInterval(() => {
        console.log('Timer running...')
      }, 1000)
      timerId.value = id
      detector.registerTimer(id)
    })

    onUnmounted(() => {
      // 清理定时器
      if (timerId.value) {
        clearInterval(timerId.value)
        detector.unregisterTimer(timerId.value)
      }
      
      detector.unregisterComponent(getCurrentInstance())
    })

    return {}
  }
})

// 自定义 ESLint 规则
export const customRules = {
  'vue/no-unused-vars': 'error',
  'vue/no-multiple-template-root': 'off',
  'vue/multi-word-component-names': 'off',
  
  // 自定义规则
  'vue/require-component-name': {
    create(context) {
      return {
        Program(node) {
          const sourceCode = context.getSourceCode()
          const text = sourceCode.getText()
          
          // 检查组件是否有 name 属性
          if (text.includes('defineComponent') && !text.includes('name:')) {
            context.report({
              node,
              message: 'Component should have a name property'
            })
          }
        }
      }
    }
  },
  
  'vue/no-console-in-production': {
    create(context) {
      return {
        CallExpression(node) {
          if (process.env.NODE_ENV === 'production') {
            if (node.callee.type === 'MemberExpression' && 
                node.callee.object.name === 'console') {
              context.report({
                node,
                message: 'Console statements should not be used in production'
              })
            }
          }
        }
      }
    }
  }
}

// ESLint 配置
export const eslintConfig = {
  extends: [
    '@vue/typescript/recommended',
    'plugin:vue/vue3-recommended'
  ],
  rules: {
    ...customRules,
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/explicit-function-return-type': 'warn',
    'vue/component-definition-name-casing': ['error', 'PascalCase'],
    'vue/component-name-in-template-casing': ['error', 'PascalCase']
  }
}

// 代码质量分析工具
export class CodeQualityAnalyzer {
  private static instance: CodeQualityAnalyzer
  private metrics: Map<string, any> = new Map()

  static getInstance(): CodeQualityAnalyzer {
    if (!CodeQualityAnalyzer.instance) {
      CodeQualityAnalyzer.instance = new CodeQualityAnalyzer()
    }
    return CodeQualityAnalyzer.instance
  }

  // 分析组件复杂度
  analyzeComponentComplexity(component: any) {
    const complexity = {
      props: Object.keys(component.$props || {}).length,
      data: Object.keys(component.$data || {}).length,
      computed: Object.keys(component.$options.computed || {}).length,
      methods: Object.keys(component.$options.methods || {}).length,
      watchers: Object.keys(component.$options.watch || {}).length
    }

    const totalComplexity = Object.values(complexity).reduce((sum, val) => sum + val, 0)
    
    return {
      ...complexity,
      totalComplexity,
      complexityLevel: this.getComplexityLevel(totalComplexity)
    }
  }

  private getComplexityLevel(complexity: number): string {
    if (complexity <= 10) return 'low'
    if (complexity <= 20) return 'medium'
    if (complexity <= 30) return 'high'
    return 'very-high'
  }

  // 分析依赖关系
  analyzeDependencies(component: any) {
    const dependencies = {
      imports: [],
      components: [],
      stores: [],
      composables: []
    }

    // 分析导入
    if (component.$options.setup) {
      const setupCode = component.$options.setup.toString()
      
      // 提取 import 语句
      const importMatches = setupCode.match(/import\s+.*?from\s+['"](.*?)['"]/g)
      if (importMatches) {
        dependencies.imports = importMatches.map(imp => imp.match(/from\s+['"](.*?)['"]/)?.[1]).filter(Boolean)
      }
    }

    return dependencies
  }

  // 生成质量报告
  generateQualityReport(components: any[]) {
    const report = {
      totalComponents: components.length,
      complexityDistribution: {
        low: 0,
        medium: 0,
        high: 0,
        'very-high': 0
      },
      averageComplexity: 0,
      recommendations: []
    }

    let totalComplexity = 0

    components.forEach(component => {
      const analysis = this.analyzeComponentComplexity(component)
      report.complexityDistribution[analysis.complexityLevel]++
      totalComplexity += analysis.totalComplexity
    })

    report.averageComplexity = totalComplexity / components.length

    // 生成建议
    if (report.complexityDistribution['very-high'] > 0) {
      report.recommendations.push('Consider breaking down high-complexity components')
    }

    if (report.averageComplexity > 20) {
      report.recommendations.push('Overall complexity is high, consider refactoring')
    }

    return report
  }
}

// 使用示例
const analyzer = CodeQualityAnalyzer.getInstance()

// 在开发环境下分析组件
if (process.env.NODE_ENV === 'development') {
  const components = document.querySelectorAll('[data-vue-component]')
  const report = analyzer.generateQualityReport(Array.from(components))
  console.log('Code Quality Report:', report)
}

// 代码生成器
export class CodeGenerator {
  private static instance: CodeGenerator
  private templates: Map<string, string> = new Map()

  static getInstance(): CodeGenerator {
    if (!CodeGenerator.instance) {
      CodeGenerator.instance = new CodeGenerator()
      CodeGenerator.instance.loadTemplates()
    }
    return CodeGenerator.instance
  }

  private loadTemplates() {
    this.templates.set('vue-component', `
<template>
  <div class="{{componentName}}">
    <!-- {{componentName}} content -->
  </div>
</template>

<script setup lang="ts">
interface Props {
  // Define props here
}

const props = defineProps<Props>()

// Component logic here
</script>

<style scoped>
.{{componentName}} {
  /* Component styles */
}
</style>
`)

    this.templates.set('composable', `
import { ref, computed } from 'vue'

export function use{{composableName}}() {
  // State
  const state = ref()
  
  // Computed
  const computedValue = computed(() => {
    // Computed logic
  })
  
  // Methods
  const method = () => {
    // Method logic
  }
  
  return {
    state,
    computedValue,
    method
  }
}
`)

    this.templates.set('store', `
import { defineStore } from 'pinia'

export const use{{storeName}}Store = defineStore('{{storeName}}', {
  state: () => ({
    // State properties
  }),
  
  getters: {
    // Getters
  },
  
  actions: {
    // Actions
  }
})
`)
  }

  // 生成组件代码
  generateComponent(name: string, options: any = {}) {
    const template = this.templates.get('vue-component')
    if (!template) return ''

    return template
      .replace(/\{\{componentName\}\}/g, name)
      .replace(/\{\{composableName\}\}/g, options.composableName || name)
  }

  // 生成 Composable 代码
  generateComposable(name: string, options: any = {}) {
    const template = this.templates.get('composable')
    if (!template) return ''

    return template
      .replace(/\{\{composableName\}\}/g, name)
  }

  // 生成 Store 代码
  generateStore(name: string, options: any = {}) {
    const template = this.templates.get('store')
    if (!template) return ''

    return template
      .replace(/\{\{storeName\}\}/g, name)
  }

  // 生成完整文件
  generateFile(type: string, name: string, options: any = {}) {
    let content = ''
    
    switch (type) {
      case 'component':
        content = this.generateComponent(name, options)
        break
      case 'composable':
        content = this.generateComposable(name, options)
        break
      case 'store':
        content = this.generateStore(name, options)
        break
    }
    
    return {
      content,
      filename: this.getFilename(type, name),
      path: this.getPath(type, name)
    }
  }

  private getFilename(type: string, name: string): string {
    switch (type) {
      case 'component':
        return `${name}.vue`
      case 'composable':
        return `use${name}.ts`
      case 'store':
        return `use${name}Store.ts`
      default:
        return `${name}.ts`
    }
  }

  private getPath(type: string, name: string): string {
    switch (type) {
      case 'component':
        return `src/components/${name}.vue`
      case 'composable':
        return `src/composables/use${name}.ts`
      case 'store':
        return `src/stores/use${name}Store.ts`
      default:
        return `src/${name}.ts`
    }
  }
}

// 使用示例
const generator = CodeGenerator.getInstance()

// 生成组件
const component = generator.generateFile('component', 'UserCard', {
  props: ['name', 'email'],
  methods: ['handleClick']
})

console.log(component.content)

// 测试代码生成器
export class TestGenerator {
  private static instance: TestGenerator
  private templates: Map<string, string> = new Map()

  static getInstance(): TestGenerator {
    if (!TestGenerator.instance) {
      TestGenerator.instance = new TestGenerator()
      TestGenerator.instance.loadTemplates()
    }
    return TestGenerator.instance
  }

  private loadTemplates() {
    this.templates.set('component-test', `
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import {{componentName}} from './{{componentName}}.vue'

describe('{{componentName}}', () => {
  it('renders correctly', () => {
    const wrapper = mount({{componentName}}, {
      props: {
        // Test props
      }
    })
    
    expect(wrapper.exists()).toBe(true)
  })
  
  it('handles user interaction', async () => {
    const wrapper = mount({{componentName}}, {
      props: {
        // Test props
      }
    })
    
    // Test user interaction
    await wrapper.find('button').trigger('click')
    
    // Assert expected behavior
    expect(wrapper.emitted('click')).toBeTruthy()
  })
})
`)

    this.templates.set('composable-test', `
import { describe, it, expect } from 'vitest'
import { use{{composableName}} } from './use{{composableName}}'

describe('use{{composableName}}', () => {
  it('returns expected values', () => {
    const { state, computedValue, method } = use{{composableName}}()
    
    expect(state.value).toBeDefined()
    expect(computedValue.value).toBeDefined()
    expect(typeof method).toBe('function')
  })
  
  it('handles state changes', () => {
    const { state, method } = use{{composableName}}()
    
    // Test state changes
    method()
    
    // Assert expected state
    expect(state.value).toBe(/* expected value */)
  })
})
`)
  }

  // 生成组件测试
  generateComponentTest(componentName: string, options: any = {}) {
    const template = this.templates.get('component-test')
    if (!template) return ''

    return template
      .replace(/\{\{componentName\}\}/g, componentName)
  }

  // 生成 Composable 测试
  generateComposableTest(composableName: string, options: any = {}) {
    const template = this.templates.get('composable-test')
    if (!template) return ''

    return template
      .replace(/\{\{composableName\}\}/g, composableName)
  }

  // 生成完整测试文件
  generateTestFile(type: string, name: string, options: any = {}) {
    let content = ''
    
    switch (type) {
      case 'component':
        content = this.generateComponentTest(name, options)
        break
      case 'composable':
        content = this.generateComposableTest(name, options)
        break
    }
    
    return {
      content,
      filename: `${name}.test.ts`,
      path: `tests/${type}s/${name}.test.ts`
    }
  }
}

// 使用示例
const testGenerator = TestGenerator.getInstance()

// 生成组件测试
const componentTest = testGenerator.generateTestFile('component', 'UserCard', {
  props: ['name', 'email'],
  events: ['click', 'change']
})

console.log(componentTest.content)