@@@@@@

library/components/VabErrorLog/components/VabErrorLogContent.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-table border :data="errorLogs">
+    <el-table-column label="报错路由">
+      <template #default="{ row }">
+        <el-button :href="row.url" rel="noopener noreferrer" tag="a" target="_blank" text type="success">{{ row.url }}</el-button>
+      </template>
+    </el-table-column>
+    <el-table-column label="错误信息">
+      <template #default="{ row }">
+        <el-tag type="danger">{{ row.err.message }}</el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+      <template #default="{ row }">
+        <el-tooltip :content="row.err.stack" effect="light">
+          <el-button text type="primary">错误详情</el-button>
+        </el-tooltip>
+        <a>
+          <el-button
+            v-for="(item, index) in searchList"
+            :key="index"
+            :href="item.url + row.err.message"
+            rel="noopener noreferrer"
+            tag="a"
+            target="_blank"
+            text
+            type="primary"
+          >
+            {{ item.title }}
+          </el-button>
+        </a>
+      </template>
+    </el-table-column>
+    <template #empty>
+      <el-empty class="vab-data-empty" description="暂无数据" />
+    </template>
+  </el-table>
+</template>
+
+<script lang="ts" setup>
+import { useErrorLogStore } from '/@/store/modules/errorLog'
+
+defineOptions({
+  name: 'VabErrorLogContent',
+})
+
+const errorLogStore = useErrorLogStore()
+const { errorLogs } = storeToRefs(errorLogStore)
+
+const searchList = ref<any>([
+  {
+    title: '百度搜索',
+    url: 'https://www.baidu.com/baidu?wd=',
+    icon: 'baidu-line',
+  },
+  {
+    title: '谷歌搜索',
+    url: 'https://www.google.com/search?q=',
+    icon: 'google-line',
+  },
+])
+</script>

library/components/VabErrorLog/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-if="errorLogs.length > 0">
+    <el-badge type="danger" :value="errorLogs.length" @click="dialogVisible = true">
+      <vab-icon icon="bug-line" />
+    </el-badge>
+
+    <vab-dialog v-model="dialogVisible" append-to-body title="公寓项目异常捕获" width="60%">
+      <vab-error-log-content />
+      <template #footer>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="danger" @click="clearAll">暂不显示</el-button>
+      </template>
+    </vab-dialog>
+  </div>
+</template>
+
+<script setup>
+import { useErrorLogStore } from '/@/store/modules/errorLog'
+
+defineOptions({
+  name: 'VabErrorLog',
+})
+
+const errorLogStore = useErrorLogStore()
+const { errorLogs } = storeToRefs(errorLogStore)
+const { clearErrorLog } = errorLogStore
+const dialogVisible = ref(false)
+
+const clearAll = () => {
+  dialogVisible.value = false
+  clearErrorLog()
+}
+</script>