From c825c5bf6e13524145edca0bc4b4fcbb5a4fd6e0 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Mon, 30 Jun 2025 13:27:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=20ErrorD?=
 =?UTF-8?q?ialog=20=E7=BB=84=E4=BB=B6=E5=B9=B6=E7=94=A8=E4=BA=8E=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=9A=E5=8A=A1=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 ErrorDialog 组件，用于在对话框中展示错误信息
- 在 config.ts 中集成 ErrorDialog，用于处理业务异常
- 优化了异常处理逻辑，增加了错误详情的展示功能
---
 src/components/ErrorDialog.vue | 90 ++++++++++++++++++++++++++++++++++++++++++
 src/config.ts                  | 16 +++++++-
 2 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ErrorDialog.vue

diff --git a/src/components/ErrorDialog.vue b/src/components/ErrorDialog.vue
new file mode 100644
index 0000000..fb0568f
--- /dev/null
+++ b/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>
diff --git a/src/config.ts b/src/config.ts
index 0c8fb1e..6d3d16b 100644
--- a/src/config.ts
+++ b/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);
             },
         );