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/errorLogPage.vue

@@ -0,0 +1,410 @@
+<template>
+  <div class="error-log-page">
+    <!-- 顶部统计卡片 -->
+    <div class="stats-section">
+      <div class="stat-card" v-for="(value, key) in statistics" :key="key">
+        <div class="stat-label">{{ getStatLabel(key) }}</div>
+        <div class="stat-value">{{ value }}</div>
+      </div>
+    </div>
+
+    <!-- 筛选和操作栏 -->
+    <div class="toolbar">
+      <van-radio-group v-model="filterType" direction="horizontal" @change="handleFilterChange">
+        <van-radio name="">全部</van-radio>
+        <van-radio name="api">接口</van-radio>
+        <van-radio name="page">页面</van-radio>
+        <van-radio name="promise">Promise</van-radio>
+      </van-radio-group>
+      <div class="actions">
+        <van-button size="small" type="danger" plain @click="handleClear">清空</van-button>
+        <van-button size="small" type="primary" @click="handleExportJSON">导出JSON</van-button>
+        <van-button size="small" type="primary" @click="handleExportText">导出TXT</van-button>
+      </div>
+    </div>
+
+    <!-- 日志列表 -->
+    <div class="logs-container">
+      <van-empty v-if="filteredLogs.length === 0" description="暂无错误日志" />
+      <div v-else class="logs-list">
+        <div
+          v-for="log in filteredLogs"
+          :key="log.id"
+          class="log-item"
+          :class="`log-${log.type}`"
+          @click="toggleLogDetail(log)"
+        >
+          <div class="log-header">
+            <div class="log-type-badge" :class="`badge-${log.type}`">
+              {{ getTypeLabel(log.type) }}
+            </div>
+            <div class="log-time">{{ log.time }}</div>
+          </div>
+          <div class="log-message">{{ log.message || '无错误信息' }}</div>
+          <div v-if="log.type === 'api'" class="log-api-info">
+            <span class="method">{{ log.method }}</span>
+            <span class="url">{{ log.url }}</span>
+            <span v-if="log.status" class="status" :class="getStatusClass(log.status)">
+              {{ log.status }} {{ log.statusText }}
+            </span>
+          </div>
+          <div v-if="expandedLogs[log.id]" class="log-detail">
+            <div class="detail-row">
+              <span class="detail-label">页面URL:</span>
+              <span class="detail-value">{{ log.pageUrl }}</span>
+            </div>
+            <div v-if="log.type === 'api'" class="detail-row">
+              <span class="detail-label">请求方法:</span>
+              <span class="detail-value">{{ log.method }}</span>
+            </div>
+            <div v-if="log.type === 'api'" class="detail-row">
+              <span class="detail-label">请求URL:</span>
+              <span class="detail-value">{{ log.url }}</span>
+            </div>
+            <div v-if="log.type === 'api' && Object.keys(log.params || {}).length > 0" class="detail-row">
+              <span class="detail-label">请求参数:</span>
+              <pre class="detail-value">{{ JSON.stringify(log.params, null, 2) }}</pre>
+            </div>
+            <div v-if="log.fileName" class="detail-row">
+              <span class="detail-label">文件:</span>
+              <span class="detail-value">{{ log.fileName }}:{{ log.lineNumber }}:{{ log.columnNumber }}</span>
+            </div>
+            <div v-if="log.componentName" class="detail-row">
+              <span class="detail-label">组件:</span>
+              <span class="detail-value">{{ log.componentName }}</span>
+            </div>
+            <div v-if="log.stack" class="detail-row">
+              <span class="detail-label">堆栈信息:</span>
+              <pre class="detail-value stack">{{ log.stack }}</pre>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">用户代理:</span>
+              <span class="detail-value small">{{ log.userAgent }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { showConfirmDialog, showToast } from 'vant'
+import errorMonitor from '@/utils/errorMonitor'
+
+const filterType = ref('')
+const expandedLogs = ref({})
+const statistics = ref({
+  total: 0,
+  api: 0,
+  page: 0,
+  promise: 0,
+  today: 0,
+  thisWeek: 0,
+  thisMonth: 0
+})
+
+const allLogs = ref([])
+const filteredLogs = computed(() => {
+  if (!filterType.value) {
+    return allLogs.value
+  }
+  return allLogs.value.filter(log => log.type === filterType.value)
+})
+
+// 获取统计标签
+const getStatLabel = (key) => {
+  const labels = {
+    total: '总计',
+    api: '接口错误',
+    page: '页面错误',
+    promise: 'Promise错误',
+    today: '今日',
+    thisWeek: '本周',
+    thisMonth: '本月'
+  }
+  return labels[key] || key
+}
+
+// 获取类型标签
+const getTypeLabel = (type) => {
+  const labels = {
+    api: '接口',
+    page: '页面',
+    promise: 'Promise'
+  }
+  return labels[type] || type
+}
+
+// 获取状态样式类
+const getStatusClass = (status) => {
+  if (status >= 200 && status < 300) return 'status-success'
+  if (status >= 400 && status < 500) return 'status-client-error'
+  if (status >= 500) return 'status-server-error'
+  return 'status-unknown'
+}
+
+// 切换日志详情
+const toggleLogDetail = (log) => {
+  expandedLogs.value[log.id] = !expandedLogs.value[log.id]
+}
+
+// 筛选改变
+const handleFilterChange = () => {
+  expandedLogs.value = {}
+}
+
+// 加载日志
+const loadLogs = () => {
+  allLogs.value = errorMonitor.getLogs()
+  statistics.value = errorMonitor.getStatistics()
+}
+
+// 清空日志
+const handleClear = async () => {
+  try {
+    await showConfirmDialog({
+      title: '确认清空',
+      message: '确定要清空所有错误日志吗？此操作不可恢复。'
+    })
+    errorMonitor.clearLogs()
+    loadLogs()
+    showToast('日志已清空')
+  } catch {
+    // 用户取消
+  }
+}
+
+// 导出JSON
+const handleExportJSON = () => {
+  try {
+    errorMonitor.exportLogs()
+    showToast('导出成功')
+  } catch (error) {
+    showToast('导出失败')
+    console.error('导出失败:', error)
+  }
+}
+
+// 导出TXT
+const handleExportText = () => {
+  try {
+    errorMonitor.exportLogsAsText()
+    showToast('导出成功')
+  } catch (error) {
+    showToast('导出失败')
+    console.error('导出失败:', error)
+  }
+}
+
+onMounted(() => {
+  loadLogs()
+})
+</script>
+
+<style lang="scss" scoped>
+.error-log-page {
+  padding: 16px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+
+  .stat-card {
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+    .stat-label {
+      font-size: 12px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    .stat-value {
+      font-size: 24px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+}
+
+.toolbar {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+}
+
+.logs-container {
+  .logs-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .log-item {
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    .log-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .log-type-badge {
+        display: inline-block;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+
+        &.badge-api {
+          background-color: #ff6b6b;
+        }
+
+        &.badge-page {
+          background-color: #4ecdc4;
+        }
+
+        &.badge-promise {
+          background-color: #95e1d3;
+        }
+      }
+
+      .log-time {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+
+    .log-message {
+      font-size: 14px;
+      color: #333;
+      margin-bottom: 8px;
+      word-break: break-all;
+    }
+
+    .log-api-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      font-size: 12px;
+
+      .method {
+        padding: 2px 6px;
+        background-color: #f0f0f0;
+        border-radius: 3px;
+        font-weight: 500;
+      }
+
+      .url {
+        color: #666;
+        flex: 1;
+        word-break: break-all;
+      }
+
+      .status {
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-weight: 500;
+
+        &.status-success {
+          background-color: #d4edda;
+          color: #155724;
+        }
+
+        &.status-client-error {
+          background-color: #f8d7da;
+          color: #721c24;
+        }
+
+        &.status-server-error {
+          background-color: #f5c6cb;
+          color: #721c24;
+        }
+
+        &.status-unknown {
+          background-color: #fff3cd;
+          color: #856404;
+        }
+      }
+    }
+
+    .log-detail {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #f0f0f0;
+
+      .detail-row {
+        margin-bottom: 8px;
+
+        .detail-label {
+          font-size: 12px;
+          color: #999;
+          margin-right: 8px;
+        }
+
+        .detail-value {
+          font-size: 12px;
+          color: #666;
+          word-break: break-all;
+
+          &.small {
+            font-size: 11px;
+          }
+
+          &.stack {
+            background-color: #f5f5f5;
+            padding: 8px;
+            border-radius: 4px;
+            white-space: pre-wrap;
+            font-family: monospace;
+            max-height: 200px;
+            overflow-y: auto;
+          }
+        }
+
+        pre {
+          margin: 4px 0;
+          white-space: pre-wrap;
+          font-size: 12px;
+          background-color: #f5f5f5;
+          padding: 8px;
+          border-radius: 4px;
+          overflow-x: auto;
+        }
+      }
+    }
+  }
+}
+</style>
+