feat: add error handle

src/views/sys/error-log/DetailModal.vue

@@ -0,0 +1,32 @@
+<template>
+  <BasicModal :width="800" title="错误详情" v-bind="$attrs">
+    <Description :data="info" @register="register" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import { BasicModal } from '/@/components/Modal/index';
+  import { ErrorInfo } from '/@/store/modules/error';
+  import { Description, useDescription } from '/@/components/Description/index';
+  import { getDescSchema } from './data';
+
+  export default defineComponent({
+    name: 'ErrorLogDetailModal',
+    components: { BasicModal, Description },
+    props: {
+      info: {
+        type: Object as PropType<ErrorInfo>,
+        default: null,
+      },
+    },
+    setup() {
+      const [register] = useDescription({
+        column: 2,
+        schema: getDescSchema(),
+      });
+      return {
+        register,
+      };
+    },
+  });
+</script>

src/views/sys/error-log/data.tsx

@@ -0,0 +1,65 @@
+import { Tag } from 'ant-design-vue';
+import { BasicColumn } from '/@/components/Table/index';
+import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+
+export function getColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'type',
+      title: '类型',
+      width: 80,
+      customRender: ({ text }) => {
+        const color =
+          text === ErrorTypeEnum.VUE
+            ? 'green'
+            : text === ErrorTypeEnum.RESOURCE
+            ? 'cyan'
+            : text === ErrorTypeEnum.PROMISE
+            ? 'blue'
+            : ErrorTypeEnum.AJAX
+            ? 'red'
+            : 'purple';
+        return <Tag color={color}>{() => text}</Tag>;
+      },
+    },
+    {
+      dataIndex: 'url',
+      title: '地址',
+      width: 200,
+    },
+    {
+      dataIndex: 'time',
+      title: '时间',
+      width: 160,
+    },
+    {
+      dataIndex: 'file',
+      title: '文件',
+      width: 200,
+    },
+    {
+      dataIndex: 'name',
+      title: 'Name',
+      width: 200,
+    },
+    {
+      dataIndex: 'message',
+      title: '错误信息',
+      width: 300,
+    },
+    {
+      dataIndex: 'stack',
+      title: 'stack信息',
+      width: 300,
+    },
+  ];
+}
+
+export function getDescSchema() {
+  return getColumns().map((column) => {
+    return {
+      field: column.dataIndex!,
+      label: column.title,
+    };
+  });
+}

src/views/sys/error-log/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="p-4">
+    <template v-for="src in imgListRef" :key="src">
+      <img :src="src" v-show="false" />
+    </template>
+    <DetailModal :info="rowInfoRef" @register="registerModal" />
+    <BasicTable @register="register" class="error-handle-table">
+      <template #toolbar>
+        <a-button @click="fireVueError" type="primary"> 点击触发vue错误 </a-button>
+        <a-button @click="fireResourceError" type="primary"> 点击触发resource错误 </a-button>
+        <a-button @click="fireAjaxError" type="primary"> 点击触发ajax错误 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[{ label: '详情', onClick: handleDetail.bind(null, record) }]" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref, nextTick } from 'vue';
+
+  import DetailModal from './DetailModal.vue';
+  import { useModal } from '/@/components/Modal/index';
+
+  import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
+
+  import { errorStore, ErrorInfo } from '/@/store/modules/error';
+
+  import { fireErrorApi } from '/@/api/demo/error';
+
+  import { getColumns } from './data';
+
+  import { cloneDeep } from 'lodash-es';
+
+  export default defineComponent({
+    name: 'ErrorHandler',
+    components: { DetailModal, BasicTable, TableAction },
+    setup() {
+      const rowInfoRef = ref<ErrorInfo>();
+      const imgListRef = ref<string[]>([]);
+      const [register, { setTableData }] = useTable({
+        titleHelpMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效！',
+        title: '错误日志列表',
+        columns: getColumns(),
+        actionColumn: {
+          width: 80,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+
+      const [registerModal, { openModal }] = useModal();
+      watch(
+        () => errorStore.getErrorInfoState,
+        (list) => {
+          nextTick(() => {
+            setTableData(cloneDeep(list));
+          });
+        },
+        {
+          immediate: true,
+        }
+      );
+
+      // 查看详情
+      function handleDetail(row: ErrorInfo) {
+        rowInfoRef.value = row;
+        openModal(true);
+      }
+
+      function fireVueError() {
+        throw new Error('fire vue error!');
+      }
+
+      function fireResourceError() {
+        imgListRef.value.push(`${new Date().getTime()}.png`);
+      }
+
+      async function fireAjaxError() {
+        await fireErrorApi();
+      }
+
+      return {
+        register,
+        registerModal,
+        handleDetail,
+        fireVueError,
+        fireResourceError,
+        fireAjaxError,
+        imgListRef,
+        rowInfoRef,
+      };
+    },
+  });
+</script>

src/views/sys/lock/index.vue

@@ -118,8 +118,8 @@
     &__entry {
       position: relative;
       width: 400px;
-      height: 260px;
-      padding: 80px 50px 0 50px;
+      // height: 260px;
+      padding: 80px 50px 50px 50px;
       margin-right: 50px;
       background: #fff;
       border-radius: 6px;