vue_zhongyou 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "index.js",
   "keywords": [],

package//345/212/237/350/203/275/344/273/243/347/240/201//345/255/230/345/220/216/347/253/257/347/211/210/347/233/221/346/216/247/pcErrorLogPage.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="pc-error-log-page">
+    <!-- 顶部统计卡片 -->
+    <el-row :gutter="20" class="stats-row">
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-label">总计错误</div>
+            <div class="stat-value total">{{ statistics.total }}</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-label">接口错误</div>
+            <div class="stat-value api">{{ statistics.api }}</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-label">页面错误</div>
+            <div class="stat-value page">{{ statistics.page }}</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="stat-card">
+          <div class="stat-content">
+            <div class="stat-label">Promise错误</div>
+            <div class="stat-value promise">{{ statistics.promise }}</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 筛选和操作栏 -->
+    <el-card class="filter-card">
+      <el-form :inline="true" :model="filterForm" class="filter-form">
+        <el-form-item label="错误类型">
+          <el-select v-model="filterForm.type" placeholder="全部" clearable style="width: 150px">
+            <el-option label="全部" value="" />
+            <el-option label="接口错误" value="api" />
+            <el-option label="页面错误" value="page" />
+            <el-option label="Promise错误" value="promise" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 380px"
+          />
+        </el-form-item>
+        <el-form-item label="关键词">
+          <el-input
+            v-model="filterForm.keyword"
+            placeholder="搜索错误信息、URL、组件名等"
+            clearable
+            style="width: 300px"
+            @keyup.enter="handleSearch"
+          >
+            <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
+          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
+          <el-button type="danger" :icon="Delete" @click="handleClear">清空日志</el-button>
+          <el-button type="success" :icon="Download" @click="handleExport">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 日志表格 -->
+    <el-card class="table-card">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        stripe
+        border
+        style="width: 100%"
+        @row-click="handleRowClick"
+      >
+        <el-table-column type="expand">
+          <template #default="{ row }">
+            <div class="log-detail">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="错误ID">{{ row.id }}</el-descriptions-item>
+                <el-descriptions-item label="错误类型">
+                  <el-tag :type="getTypeTagType(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="时间" :span="2">{{ row.time }}</el-descriptions-item>
+                <el-descriptions-item label="页面URL" :span="2">
+                  <el-link :href="row.pageUrl" target="_blank" type="primary">{{ row.pageUrl }}</el-link>
+                </el-descriptions-item>
+                <el-descriptions-item v-if="row.type === 'api'" label="请求方法">
+                  <el-tag>{{ row.method }}</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item v-if="row.type === 'api'" label="请求URL" :span="row.method ? 1 : 2">
+                  {{ row.url }}
+                </el-descriptions-item>
+                <el-descriptions-item v-if="row.type === 'api' && row.status" label="HTTP状态">
+                  <el-tag :type="getStatusTagType(row.status)">
+                    {{ row.status }} {{ row.statusText }}
+                  </el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item v-if="row.type === 'api' && Object.keys(row.params || {}).length > 0" label="请求参数" :span="2">
+                  <pre class="json-content">{{ JSON.stringify(row.params, null, 2) }}</pre>
+                </el-descriptions-item>
+                <el-descriptions-item v-if="row.fileName" label="文件位置" :span="2">
+                  {{ row.fileName }}:{{ row.lineNumber }}:{{ row.columnNumber }}
+                </el-descriptions-item>
+                <el-descriptions-item v-if="row.componentName" label="组件名称" :span="2">
+                  {{ row.componentName }}
+                </el-descriptions-item>
+                <el-descriptions-item label="错误信息" :span="2">
+                  <div class="error-message">{{ row.message }}</div>
+                </el-descriptions-item>
+                <el-descriptions-item v-if="row.stack" label="堆栈信息" :span="2">
+                  <pre class="stack-content">{{ row.stack }}</pre>
+                </el-descriptions-item>
+                <el-descriptions-item label="用户代理" :span="2">
+                  <div class="user-agent">{{ row.userAgent }}</div>
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getTypeTagType(row.type)" size="small">
+              {{ getTypeLabel(row.type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="time" label="时间" width="180" />
+        <el-table-column prop="message" label="错误信息" min-width="300" show-overflow-tooltip />
+        <el-table-column v-if="filterForm.type === 'api' || !filterForm.type" prop="url" label="URL" min-width="200" show-overflow-tooltip />
+        <el-table-column v-if="filterForm.type === 'api' || !filterForm.type" prop="method" label="方法" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="row.method" size="small" :type="getMethodTagType(row.method)">
+              {{ row.method }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="filterForm.type === 'api' || !filterForm.type" prop="status" label="状态码" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="row.status" :type="getStatusTagType(row.status)" size="small">
+              {{ row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="pageUrl" label="页面" min-width="200" show-overflow-tooltip />
+        <el-table-column label="操作" width="100" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" size="small" @click.stop="handleViewDetail(row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 详情对话框 -->
+    <el-dialog
+      v-model="detailVisible"
+      title="错误详情"
+      width="80%"
+      :close-on-click-modal="false"
+    >
+      <div v-if="currentDetail" class="detail-dialog">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="错误ID">{{ currentDetail.id }}</el-descriptions-item>
+          <el-descriptions-item label="错误类型">
+            <el-tag :type="getTypeTagType(currentDetail.type)">
+              {{ getTypeLabel(currentDetail.type) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="发生时间" :span="2">
+            {{ currentDetail.time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="页面URL" :span="2">
+            <el-link :href="currentDetail.pageUrl" target="_blank" type="primary">
+              {{ currentDetail.pageUrl }}
+            </el-link>
+          </el-descriptions-item>
+          <template v-if="currentDetail.type === 'api'">
+            <el-descriptions-item label="请求方法">
+              <el-tag>{{ currentDetail.method }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="请求URL">
+              {{ currentDetail.url }}
+            </el-descriptions-item>
+            <el-descriptions-item v-if="currentDetail.status" label="HTTP状态">
+              <el-tag :type="getStatusTagType(currentDetail.status)">
+                {{ currentDetail.status }} {{ currentDetail.statusText }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item v-if="Object.keys(currentDetail.params || {}).length > 0" label="请求参数" :span="2">
+              <pre class="json-content">{{ JSON.stringify(currentDetail.params, null, 2) }}</pre>
+            </el-descriptions-item>
+            <el-descriptions-item v-if="Object.keys(currentDetail.data || {}).length > 0" label="请求体" :span="2">
+              <pre class="json-content">{{ JSON.stringify(currentDetail.data, null, 2) }}</pre>
+            </el-descriptions-item>
+            <el-descriptions-item v-if="currentDetail.responseData" label="响应数据" :span="2">
+              <pre class="json-content">{{ JSON.stringify(currentDetail.responseData, null, 2) }}</pre>
+            </el-descriptions-item>
+          </template>
+          <template v-else>
+            <el-descriptions-item v-if="currentDetail.fileName" label="文件位置" :span="2">
+              {{ currentDetail.fileName }}:{{ currentDetail.lineNumber }}:{{ currentDetail.columnNumber }}
+            </el-descriptions-item>
+            <el-descriptions-item v-if="currentDetail.componentName" label="组件名称" :span="2">
+              {{ currentDetail.componentName }}
+            </el-descriptions-item>
+            <el-descriptions-item v-if="currentDetail.props && Object.keys(currentDetail.props).length > 0" label="组件Props" :span="2">
+              <pre class="json-content">{{ JSON.stringify(currentDetail.props, null, 2) }}</pre>
+            </el-descriptions-item>
+          </template>
+          <el-descriptions-item label="错误信息" :span="2">
+            <div class="error-message">{{ currentDetail.message }}</div>
+          </el-descriptions-item>
+          <el-descriptions-item v-if="currentDetail.stack" label="堆栈信息" :span="2">
+            <pre class="stack-content">{{ currentDetail.stack }}</pre>
+          </el-descriptions-item>
+          <el-descriptions-item label="用户代理" :span="2">
+            <div class="user-agent">{{ currentDetail.userAgent }}</div>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Refresh, Delete, Download } from '@element-plus/icons-vue'
+import errorMonitor from '@/utils/errorMonitor'
+
+// 响应式数据
+const loading = ref(false)
+const tableData = ref([])
+const detailVisible = ref(false)
+const currentDetail = ref(null)
+const statistics = ref({
+  total: 0,
+  api: 0,
+  page: 0,
+  promise: 0,
+  today: 0,
+  thisWeek: 0,
+  thisMonth: 0
+})
+
+// 筛选表单
+const filterForm = reactive({
+  type: '',
+  dateRange: null,
+  keyword: ''
+})
+
+// 分页
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0
+})
+
+// 获取类型标签
+const getTypeLabel = (type) => {
+  const labels = {
+    api: '接口错误',
+    page: '页面错误',
+    promise: 'Promise错误'
+  }
+  return labels[type] || type
+}
+
+// 获取类型标签类型
+const getTypeTagType = (type) => {
+  const types = {
+    api: 'danger',
+    page: 'warning',
+    promise: 'info'
+  }
+  return types[type] || ''
+}
+
+// 获取状态标签类型
+const getStatusTagType = (status) => {
+  if (status >= 200 && status < 300) return 'success'
+  if (status >= 400 && status < 500) return 'warning'
+  if (status >= 500) return 'danger'
+  return 'info'
+}
+
+// 获取方法标签类型
+const getMethodTagType = (method) => {
+  const types = {
+    GET: 'success',
+    POST: 'primary',
+    PUT: 'warning',
+    DELETE: 'danger'
+  }
+  return types[method] || ''
+}
+
+// 加载数据
+const loadData = async () => {
+  loading.value = true
+  try {
+    // 构建查询参数
+    const params = {
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      type: filterForm.type || undefined,
+      keyword: filterForm.keyword || undefined
+    }
+
+    // 添加时间范围
+    if (filterForm.dateRange && filterForm.dateRange.length === 2) {
+      params.startTime = filterForm.dateRange[0]
+      params.endTime = filterForm.dateRange[1]
+    }
+
+    // 获取日志列表
+    const logs = await errorMonitor.getLogs(params.type, params)
+    
+    // 客户端筛选和分页（如果后端不支持）
+    let filteredLogs = logs
+    if (filterForm.keyword) {
+      const keyword = filterForm.keyword.toLowerCase()
+      filteredLogs = logs.filter(log => {
+        return (
+          log.message?.toLowerCase().includes(keyword) ||
+          log.url?.toLowerCase().includes(keyword) ||
+          log.pageUrl?.toLowerCase().includes(keyword) ||
+          log.componentName?.toLowerCase().includes(keyword)
+        )
+      })
+    }
+
+    if (filterForm.dateRange && filterForm.dateRange.length === 2) {
+      const [start, end] = filterForm.dateRange
+      filteredLogs = filteredLogs.filter(log => {
+        const logTime = new Date(log.timestamp || log.time)
+        return logTime >= new Date(start) && logTime <= new Date(end)
+      })
+    }
+
+    // 分页
+    pagination.total = filteredLogs.length
+    const start = (pagination.page - 1) * pagination.pageSize
+    const end = start + pagination.pageSize
+    tableData.value = filteredLogs.slice(start, end)
+
+    // 获取统计信息
+    statistics.value = await errorMonitor.getStatistics()
+  } catch (error) {
+    console.error('加载数据失败:', error)
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.page = 1
+  loadData()
+}
+
+// 重置
+const handleReset = () => {
+  filterForm.type = ''
+  filterForm.dateRange = null
+  filterForm.keyword = ''
+  pagination.page = 1
+  loadData()
+}
+
+// 清空日志
+const handleClear = async () => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要清空所有错误日志吗？此操作不可恢复。',
+      '确认清空',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+    
+    await errorMonitor.clearLogs()
+    ElMessage.success('日志已清空')
+    await loadData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('清空日志失败:', error)
+      ElMessage.error('清空日志失败')
+    }
+  }
+}
+
+// 导出
+const handleExport = async () => {
+  try {
+    await errorMonitor.exportLogs()
+    ElMessage.success('导出成功')
+  } catch (error) {
+    console.error('导出失败:', error)
+    ElMessage.error('导出失败')
+  }
+}
+
+// 查看详情
+const handleViewDetail = (row) => {
+  currentDetail.value = row
+  detailVisible.value = true
+}
+
+// 行点击
+const handleRowClick = (row) => {
+  // 点击行可以展开/收起详情
+}
+
+// 分页大小改变
+const handleSizeChange = (size) => {
+  pagination.pageSize = size
+  pagination.page = 1
+  loadData()
+}
+
+// 页码改变
+const handlePageChange = (page) => {
+  pagination.page = page
+  loadData()
+}
+
+// 初始化
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<style lang="scss" scoped>
+.pc-error-log-page {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+
+  .stats-row {
+    margin-bottom: 20px;
+
+    .stat-card {
+      .stat-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .stat-label {
+          font-size: 12px;
+          color: #606266;
+          margin-bottom: 10px;
+        }
+
+        .stat-value {
+          font-size: 32px;
+          font-weight: bold;
+
+          &.total {
+            color: #409eff;
+          }
+
+          &.api {
+            color: #f56c6c;
+          }
+
+          &.page {
+            color: #e6a23c;
+          }
+
+          &.promise {
+            color: #909399;
+          }
+        }
+      }
+    }
+  }
+
+  .filter-card {
+    margin-bottom: 20px;
+
+    .filter-form {
+      margin: 0;
+    }
+  }
+
+  .table-card {
+    .log-detail {
+      padding: 10px;
+
+      .json-content,
+      .stack-content {
+        background-color: #f5f7fa;
+        padding: 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        max-height: 300px;
+        overflow-y: auto;
+        margin: 0;
+      }
+
+      .error-message {
+        color: #f56c6c;
+        word-break: break-all;
+      }
+
+      .user-agent {
+        font-size: 12px;
+        color: #909399;
+        word-break: break-all;
+      }
+    }
+
+    .pagination-container {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .detail-dialog {
+    .json-content,
+    .stack-content {
+      background-color: #f5f7fa;
+      padding: 15px;
+      border-radius: 4px;
+      font-size: 13px;
+      max-height: 400px;
+      overflow-y: auto;
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    .error-message {
+      color: #f56c6c;
+      font-weight: 500;
+      word-break: break-all;
+    }
+
+    .user-agent {
+      font-size: 12px;
+      color: #909399;
+      word-break: break-all;
+    }
+  }
+}
+</style>
+