vue_zhongyou 1.0.1

package//345/212/237/350/203/275/344/273/243/347/240/201//345/211/215/347/253/257/347/233/221/346/216/247/errorMonitor.js

@@ -0,0 +1,324 @@
+/**
+ * 错误监控工具
+ * 用于收集接口错误和前端页面错误，生成日志
+ */
+
+class ErrorMonitor {
+  constructor() {
+    this.logs = []
+    this.maxLogs = 1000 // 最多保存1000条日志
+    this.storageKey = 'error_logs'
+    this.init()
+  }
+
+  /**
+   * 初始化，从localStorage加载历史日志
+   */
+  init() {
+    try {
+      const storedLogs = localStorage.getItem(this.storageKey)
+      if (storedLogs) {
+        this.logs = JSON.parse(storedLogs)
+        // 只保留最近的日志
+        if (this.logs.length > this.maxLogs) {
+          this.logs = this.logs.slice(-this.maxLogs)
+          this.saveLogs()
+        }
+      }
+    } catch (error) {
+      console.error('加载错误日志失败:', error)
+      this.logs = []
+    }
+  }
+
+  /**
+   * 保存日志到localStorage
+   */
+  saveLogs() {
+    try {
+      localStorage.setItem(this.storageKey, JSON.stringify(this.logs))
+    } catch (error) {
+      console.error('保存错误日志失败:', error)
+      // 如果存储失败，可能是存储空间已满，删除一些旧日志
+      if (this.logs.length > 100) {
+        this.logs = this.logs.slice(-100)
+        try {
+          localStorage.setItem(this.storageKey, JSON.stringify(this.logs))
+        } catch (e) {
+          console.error('清理后保存仍然失败:', e)
+        }
+      }
+    }
+  }
+
+  /**
+   * 记录接口错误
+   * @param {Object} errorInfo - 错误信息
+   */
+  logApiError(errorInfo) {
+    const log = {
+      id: this.generateId(),
+      type: 'api', // 错误类型：接口错误
+      timestamp: new Date().toISOString(),
+      time: new Date().toLocaleString('zh-CN'),
+      url: errorInfo.url || '',
+      method: errorInfo.method || 'GET',
+      params: errorInfo.params || {},
+      data: errorInfo.data || {},
+      status: errorInfo.status || 0,
+      statusText: errorInfo.statusText || '',
+      message: errorInfo.message || '',
+      stack: errorInfo.stack || '',
+      userAgent: navigator.userAgent,
+      pageUrl: window.location.href,
+      ...errorInfo
+    }
+    
+    this.addLog(log)
+    this.consoleError('接口错误', log)
+  }
+
+  /**
+   * 记录前端页面错误
+   * @param {Object} errorInfo - 错误信息
+   */
+  logPageError(errorInfo) {
+    const log = {
+      id: this.generateId(),
+      type: 'page', // 错误类型：页面错误
+      timestamp: new Date().toISOString(),
+      time: new Date().toLocaleString('zh-CN'),
+      message: errorInfo.message || '',
+      stack: errorInfo.stack || '',
+      fileName: errorInfo.fileName || '',
+      lineNumber: errorInfo.lineNumber || 0,
+      columnNumber: errorInfo.columnNumber || 0,
+      componentName: errorInfo.componentName || '',
+      props: errorInfo.props || {},
+      userAgent: navigator.userAgent,
+      pageUrl: window.location.href,
+      ...errorInfo
+    }
+    
+    this.addLog(log)
+    this.consoleError('页面错误', log)
+  }
+
+  /**
+   * 记录Promise未捕获错误
+   * @param {Object} errorInfo - 错误信息
+   */
+  logPromiseError(errorInfo) {
+    const log = {
+      id: this.generateId(),
+      type: 'promise', // 错误类型：Promise错误
+      timestamp: new Date().toISOString(),
+      time: new Date().toLocaleString('zh-CN'),
+      message: errorInfo.message || '',
+      stack: errorInfo.stack || '',
+      reason: errorInfo.reason || '',
+      userAgent: navigator.userAgent,
+      pageUrl: window.location.href,
+      ...errorInfo
+    }
+    
+    this.addLog(log)
+    this.consoleError('Promise错误', log)
+  }
+
+  /**
+   * 添加日志
+   * @param {Object} log - 日志对象
+   */
+  addLog(log) {
+    this.logs.push(log)
+    
+    // 限制日志数量
+    if (this.logs.length > this.maxLogs) {
+      this.logs.shift() // 删除最旧的日志
+    }
+    
+    // 保存到localStorage
+    this.saveLogs()
+
+    // 可以在这里发送到服务器（可选）
+    // this.sendToServer(log)
+  }
+
+  /**
+   * 控制台输出错误（开发环境）
+   */
+  consoleError(title, log) {
+    if (import.meta.env.DEV) {
+      console.group(`[错误监控] ${title}`)
+      console.error(log)
+      console.groupEnd()
+    }
+  }
+
+  /**
+   * 生成唯一ID
+   */
+  generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  /**
+   * 获取所有日志
+   */
+  getLogs(type = null) {
+    if (type) {
+      return this.logs.filter(log => log.type === type)
+    }
+    return [...this.logs].reverse() // 最新的在前
+  }
+
+  /**
+   * 获取接口错误日志
+   */
+  getApiLogs() {
+    return this.getLogs('api')
+  }
+
+  /**
+   * 获取页面错误日志
+   */
+  getPageLogs() {
+    return this.getLogs('page')
+  }
+
+  /**
+   * 获取Promise错误日志
+   */
+  getPromiseLogs() {
+    return this.getLogs('promise')
+  }
+
+  /**
+   * 清空日志
+   */
+  clearLogs() {
+    this.logs = []
+    localStorage.removeItem(this.storageKey)
+  }
+
+  /**
+   * 导出日志为JSON
+   */
+  exportLogs() {
+    const dataStr = JSON.stringify(this.logs, null, 2)
+    const dataBlob = new Blob([dataStr], { type: 'application/json' })
+    const url = URL.createObjectURL(dataBlob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `error-logs-${new Date().toISOString().split('T')[0]}.json`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  /**
+   * 导出日志为文本
+   */
+  exportLogsAsText() {
+    let text = '错误日志导出\n'
+    text += `导出时间: ${new Date().toLocaleString('zh-CN')}\n`
+    text += `总计: ${this.logs.length} 条\n\n`
+    text += '='.repeat(80) + '\n\n'
+
+    this.logs.reverse().forEach((log, index) => {
+      text += `[${index + 1}] ${log.type.toUpperCase()} 错误\n`
+      text += `时间: ${log.time}\n`
+      text += `页面: ${log.pageUrl}\n`
+      
+      if (log.type === 'api') {
+        text += `接口: ${log.method} ${log.url}\n`
+        text += `状态: ${log.status} ${log.statusText}\n`
+        if (Object.keys(log.params).length > 0) {
+          text += `参数: ${JSON.stringify(log.params, null, 2)}\n`
+        }
+      } else {
+        if (log.fileName) {
+          text += `文件: ${log.fileName}:${log.lineNumber}:${log.columnNumber}\n`
+        }
+        if (log.componentName) {
+          text += `组件: ${log.componentName}\n`
+        }
+      }
+      
+      text += `错误信息: ${log.message}\n`
+      if (log.stack) {
+        text += `堆栈信息:\n${log.stack}\n`
+      }
+      text += '\n' + '-'.repeat(80) + '\n\n'
+    })
+
+    const dataBlob = new Blob([text], { type: 'text/plain;charset=utf-8' })
+    const url = URL.createObjectURL(dataBlob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `error-logs-${new Date().toISOString().split('T')[0]}.txt`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  /**
+   * 发送日志到服务器（可选实现）
+   * @param {Object} log - 日志对象
+   */
+  async sendToServer(log) {
+    try {
+      // 这里可以调用后端接口发送日志
+      // const response = await fetch('/api/logs', {
+      //   method: 'POST',
+      //   headers: {
+      //     'Content-Type': 'application/json'
+      //   },
+      //   body: JSON.stringify(log)
+      // })
+      // if (!response.ok) {
+      //   console.error('发送日志到服务器失败')
+      // }
+    } catch (error) {
+      console.error('发送日志到服务器出错:', error)
+    }
+  }
+
+  /**
+   * 获取错误统计信息
+   */
+  getStatistics() {
+    const stats = {
+      total: this.logs.length,
+      api: this.logs.filter(log => log.type === 'api').length,
+      page: this.logs.filter(log => log.type === 'page').length,
+      promise: this.logs.filter(log => log.type === 'promise').length,
+      today: 0,
+      thisWeek: 0,
+      thisMonth: 0
+    }
+
+    const now = new Date()
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
+    const monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate())
+
+    this.logs.forEach(log => {
+      const logDate = new Date(log.timestamp)
+      if (logDate >= today) stats.today++
+      if (logDate >= weekAgo) stats.thisWeek++
+      if (logDate >= monthAgo) stats.thisMonth++
+    })
+
+    return stats
+  }
+}
+
+// 创建单例
+const errorMonitor = new ErrorMonitor()
+
+export default errorMonitor
+

package//345/212/237/350/203/275/344/273/243/347/240/201//345/211/215/347/253/257/347/233/221/346/216/247/main.js

@@ -0,0 +1,103 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+// import './style.css'
+import './assets/common.css'
+
+// 引入 Vant 组件库
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+// 引入路由
+import router from './router'
+
+// 引入错误监控
+import errorMonitor from '@/utils/errorMonitor'
+
+const app = createApp(App)
+
+// 使用 Pinia 状态管理
+app.use(createPinia())
+
+// 使用 Vant 组件库
+app.use(Vant)
+
+// 使用路由
+app.use(router)
+
+// 注册全局错误处理
+// Vue错误处理
+app.config.errorHandler = (err, instance, info) => {
+  // 获取组件名称
+  let componentName = 'Unknown'
+  if (instance) {
+    const name = instance.$options?.name || instance.$options?.__name
+    componentName = name || componentName
+  }
+
+  // 记录页面错误
+  errorMonitor.logPageError({
+    message: err.message || String(err),
+    stack: err.stack || '',
+    componentName: componentName,
+    info: info || '',
+    props: instance?.$props || {},
+    url: instance?.$route?.fullPath || window.location.href
+  })
+}
+
+// Promise未捕获错误
+window.addEventListener('unhandledrejection', event => {
+  event.preventDefault()
+  
+  const reason = event.reason
+  const errorInfo = {
+    message: reason?.message || String(reason) || 'Promise未捕获错误',
+    stack: reason?.stack || '',
+    reason: reason
+  }
+
+  // 如果是Error对象，提取更多信息
+  if (reason instanceof Error) {
+    errorInfo.message = reason.message
+    errorInfo.stack = reason.stack
+  }
+
+  errorMonitor.logPromiseError(errorInfo)
+  
+  // 在开发环境输出到控制台
+  if (import.meta.env.DEV) {
+    console.error('未捕获的Promise错误:', reason)
+  }
+})
+
+// 全局JavaScript错误
+window.addEventListener('error', event => {
+  // 过滤掉资源加载错误（会单独处理）
+  if (event.target && event.target !== window) {
+    return
+  }
+
+  errorMonitor.logPageError({
+    message: event.message || '未知错误',
+    stack: event.error?.stack || '',
+    fileName: event.filename || '',
+    lineNumber: event.lineno || 0,
+    columnNumber: event.colno || 0
+  })
+})
+
+// 资源加载错误（图片、脚本等）
+window.addEventListener('error', event => {
+  // 资源加载错误
+  if (event.target && event.target !== window) {
+    const target = event.target
+    errorMonitor.logPageError({
+      message: `资源加载失败: ${target.tagName} ${target.src || target.href || ''}`,
+      fileName: target.src || target.href || '',
+      resourceType: target.tagName
+    })
+  }
+}, true) // 使用捕获阶段
+
+app.mount('#app')

package//345/212/237/350/203/275/344/273/243/347/240/201//345/211/215/347/253/257/347/233/221/346/216/247/request.js

@@ -0,0 +1,89 @@
+import axios from 'axios'
+import errorMonitor from '@/utils/errorMonitor'
+
+// 创建 axios 实例
+const request = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '', // 接口基础地址
+  timeout: 10000, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json;charset=UTF-8'
+  }
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+  config => {
+    // 在发送请求之前做些什么
+    // 例如：添加token
+    // const token = localStorage.getItem('token')
+    // if (token) {
+    //   config.headers.Authorization = `Bearer ${token}`
+    // }
+    return config
+  },
+  error => {
+    // 对请求错误做些什么
+    console.error('请求错误:', error)
+    
+    // 记录接口错误
+    errorMonitor.logApiError({
+      url: error.config?.url || '',
+      method: error.config?.method?.toUpperCase() || 'GET',
+      params: error.config?.params || {},
+      data: error.config?.data || {},
+      message: error.message || '请求错误',
+      stack: error.stack || ''
+    })
+    
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+request.interceptors.response.use(
+  response => {
+    // 对响应数据做点什么
+    const { data } = response
+    
+    // 如果业务代码返回错误，也可以在这里记录
+    // 例如：if (data.code !== 200) { ... }
+    
+    return data
+  },
+  error => {
+    // 对响应错误做点什么
+    console.error('响应错误:', error)
+    
+    // 记录接口错误
+    const errorInfo = {
+      url: error.config?.url || '',
+      method: error.config?.method?.toUpperCase() || 'GET',
+      params: error.config?.params || {},
+      data: error.config?.data || {},
+      message: error.message || '响应错误',
+      stack: error.stack || ''
+    }
+    
+    // 如果是HTTP错误响应
+    if (error.response) {
+      errorInfo.status = error.response.status
+      errorInfo.statusText = error.response.statusText
+      errorInfo.responseData = error.response.data
+    } else if (error.request) {
+      // 请求已发出但没有收到响应
+      errorInfo.status = 0
+      errorInfo.statusText = '网络错误或无响应'
+      errorInfo.message = '网络错误，请检查网络连接'
+    } else {
+      // 其他错误
+      errorInfo.status = 0
+      errorInfo.statusText = '请求配置错误'
+    }
+    
+    errorMonitor.logApiError(errorInfo)
+    
+    return Promise.reject(error)
+  }
+)
+
+export default request