feat(components): 添加 ErrorDialog 组件并用于展示业务异常

- 新增 ErrorDialog 组件，用于在对话框中展示错误信息
- 在 config.ts 中集成 ErrorDialog，用于处理业务异常
- 优化了异常处理逻辑，增加了错误详情的展示功能

src/components/ErrorDialog.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ElIcon, ElSwitch } from "element-plus";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+
+defineOptions({
+    name: 'ErrorDialog',
+});
+
+// 定义 Props 类型
+interface ErrorDialogProps {
+    err: AxiosInterceptorError;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<ErrorDialogProps>(), {});
+
+// 定义 State 类型
+interface ErrorDialogState {
+    show: boolean;
+}
+
+// state 属性
+const state = reactive<ErrorDialogState>({
+    show: false,
+});
+
+// 定义 Data 类型
+interface ErrorDialogData {
+}
+
+// 内部数据
+const data: ErrorDialogData = {};
+
+interface ErrorDialogExpose {
+    state: ErrorDialogState;
+    data: ErrorDialogData;
+}
+
+const expose: ErrorDialogExpose = {
+    state,
+    data,
+};
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    ErrorDialogProps,
+    ErrorDialogState,
+}
+</script>
+
+<template>
+    <div class="error-dialog flex-column-container">
+        <div class="flex-row-container">
+            <ElIcon :size="20" style="color: #ff4d4f;">
+                <CircleCloseFilled/>
+            </ElIcon>
+            <div class="flex-item-fill">
+                {{ props.err?.message }}
+            </div>
+            <div v-if="props.err?.data?.error">
+                <ElSwitch size="small" v-model="state.show"/>
+                查看详情
+            </div>
+        </div>
+        <div v-if="props.err?.data?.error && state.show" class="show-details flex-item-fill">
+            <pre class="show-details-pre">{{ props.err?.data?.error }}</pre>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.show-details-pre {
+    width: 790px;
+    height: 470px;
+    overflow: auto;
+    padding: 0;
+}
+</style>
+
+<style>
+.el-dialog:has(> .el-dialog__body > .error-dialog) {
+    min-height: 160px;
+}
+
+.el-dialog:has(> .el-dialog__body > .error-dialog > .show-details) {
+    height: 600px !important;
+}
+</style>

src/config.ts

@@ -2,6 +2,8 @@ import type { InternalAxiosRequestConfig } from "axios";
 import { Constant, initGlobalConfig } from "@ease-forge/shared";
 import { initGlobalConfigWithRuntime } from "@ease-forge/runtime";
 import router from "@/router";
+import { createVNode } from "vue";
+import ErrorDialog from "@/components/ErrorDialog.vue";
 
 function globalConfig() {
     window.globalConfig.customAxios = axiosInstance => {
@@ -30,6 +32,7 @@ function globalConfig() {
                     status: response?.status ?? -1,
                     title: "系统错误",
                     message: "",
+                    data: response?.data,
                 };
                 if (!error || !response) {
                     err.message = "请求服务端异常";
@@ -46,7 +49,18 @@ function globalConfig() {
                         err.message = message ?? Constant.defHttpErrorMsg[response.status] ?? "服务器异常";
                     }
                 }
-                system.msg(err.message);
+                system.showDialog(createVNode(ErrorDialog, {
+                    err,
+                }), {
+                    title: '业务异常',
+                    width: 800,
+                    height: 120,
+                    showClose: true,
+                    showMax: false,
+                    showCancelButton: false,
+                    showOkButton: true,
+                    okButtonText: "关闭",
+                }).finally();
                 return Promise.reject(err);
             },
         );