forked from gzt/A8000
23 changed files with 1094 additions and 225 deletions
-
4components.d.ts
-
1package.json
-
44public/json/mockErrorData.json
-
19src/App.vue
-
8src/assets/empty-stack.svg
-
1src/assets/fatal.svg
-
3src/assets/notify.svg
-
6src/assets/stack-icon.svg
-
345src/components/dialogs/ErrorModal.vue
-
233src/components/dialogs/StackInfoModal.vue
-
2src/components/dialogs/index.ts
-
19src/eventBus.ts
-
6src/main.ts
-
53src/pages/Index/Index.vue
-
2src/pages/Index/Regular.vue
-
131src/pages/Index/Regular/Consumables.vue
-
6src/pages/Index/Regular/Emergency.vue
-
386src/pages/Index/Regular/Running.vue
-
5src/pages/Index/Regular/TestTube.vue
-
6src/pages/Index/components/Running/LittleBufferDisplay.vue
-
6src/pages/Index/components/Running/PlateDisplay.vue
-
3src/pages/Login/Login.vue
-
30src/utils/axios.ts
@ -0,0 +1,44 @@ |
|||||
|
{ |
||||
|
"mockErrorData": { |
||||
|
"ecode": "CODEERROR", |
||||
|
"dataType": "ZAppPromopt", |
||||
|
"data": { |
||||
|
"type": "Error", |
||||
|
"info": "代码错误", |
||||
|
"detailInfos": [ |
||||
|
{ |
||||
|
"name": "错误类型", |
||||
|
"description": "AECodeError" |
||||
|
}, |
||||
|
{ |
||||
|
"name": "错误位置", |
||||
|
"description": "ApiRetTestControler.java:37" |
||||
|
} |
||||
|
], |
||||
|
"stackInfo": { |
||||
|
"stackTraceElements": [ |
||||
|
"java.base/java.lang.Thread.getStackTrace(Thread.java:2450)", |
||||
|
"a8k.type.ecode.AECodeError.<init>(AECodeError.java:15)", |
||||
|
"a8k.controler.api.v1.app.assistant.ApiRetTestControler.getAppCodeError(ApiRetTestControler.java:37)", |
||||
|
"java.base/jdk.internal.reflect.DirectMethodHandleAccessor.invoke(DirectMethodHandleAccessor.java:103)", |
||||
|
"java.base/java.lang.reflect.Method.invoke(Method.java:580)", |
||||
|
"org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:255)", |
||||
|
"org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:188)", |
||||
|
"org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:118)", |
||||
|
"org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:926)", |
||||
|
"org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:831)", |
||||
|
"org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)", |
||||
|
"org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1089)", |
||||
|
"org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:979)", |
||||
|
"org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1014)", |
||||
|
"org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:914)", |
||||
|
"jakarta.servlet.http.HttpServlet.service(HttpServlet.java:590)", |
||||
|
"org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:885)", |
||||
|
"jakarta.servlet.http.HttpServlet.service(HttpServlet.java:658)", |
||||
|
"org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:195)", |
||||
|
"org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:140)" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
|
<rect x="20" y="20" width="80" height="80" rx="8" stroke="#E5E7EB" stroke-width="2"/> |
||||
|
<path d="M35 45H85" stroke="#E5E7EB" stroke-width="2" stroke-linecap="round"/> |
||||
|
<path d="M35 60H85" stroke="#E5E7EB" stroke-width="2" stroke-linecap="round"/> |
||||
|
<path d="M35 75H85" stroke="#E5E7EB" stroke-width="2" stroke-linecap="round"/> |
||||
|
<circle cx="60" cy="60" r="35" stroke="#E5E7EB" stroke-width="2" stroke-dasharray="4 4"/> |
||||
|
<path d="M50 60L57 67L70 54" stroke="#E5E7EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
||||
|
</svg> |
||||
@ -0,0 +1 @@ |
|||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="191" height="191" viewBox="0 0 191 191"><defs><clipPath id="master_svg0_2_98"><rect x="0" y="0" width="191" height="191" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_2_98)"><g><ellipse cx="95.5" cy="95.5" rx="94.5" ry="94.5" fill="#C84141" fill-opacity="1"/></g><g><path d="M56.258359999999996,143C54.14496,143,52.03121,142.1935,50.41863,140.5814C47.19379,137.3561,47.19379,132.1274,50.41863,128.9023L128.9022,50.41895C132.12709999999998,47.193684,137.356,47.193684,140.5814,50.41895C143.8062,53.64378,143.8062,58.8729,140.5814,62.098L62.0978,140.5814C60.4852,142.19389999999999,58.371700000000004,143,56.25803,143L56.258359999999996,143Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M134.7421,142.9996C132.6286,142.9996,130.515,142.19310000000002,128.9023,140.58089999999999L50.41863,62.097899999999996C47.193789,58.873,47.193789,53.64371,50.41863,50.41878C53.64336,47.193959,58.8726,47.19352,62.0977,50.41878L140.5814,128.9017C143.8062,132.127,143.8062,137.3557,140.5814,140.5808C138.9691,142.1935,136.85559999999998,143,134.7419,143L134.7421,142.9996Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg> |
||||
@ -0,0 +1,3 @@ |
|||||
|
<svg width="75" height="75" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
|
<path d="M37.5 0C16.7893 0 0 16.7893 0 37.5C0 58.2107 16.7893 75 37.5 75C58.2107 75 75 58.2107 75 37.5C75 16.7893 58.2107 0 37.5 0ZM37.5 62.3078C34.8599 62.3078 32.7196 60.1675 32.7196 57.5274C32.7196 54.8872 34.8599 52.7469 37.5 52.7469C40.1401 52.7469 42.2804 54.8872 42.2804 57.5274C42.2804 60.1675 40.1401 62.3078 37.5 62.3078ZM42.2804 42.0247C42.2804 44.6649 40.1401 46.8051 37.5 46.8051C34.8599 46.8051 32.7196 44.6649 32.7196 42.0247V21.6222C32.7196 18.9821 34.8599 16.8419 37.5 16.8419C40.1401 16.8419 42.2804 18.9821 42.2804 21.6223V42.0247Z" fill="#1890ff"/> |
||||
|
</svg> |
||||
@ -0,0 +1,6 @@ |
|||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
||||
|
<path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z" stroke="#1890ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
||||
|
<path d="M6 8H18" stroke="#1890ff" stroke-width="2" stroke-linecap="round"/> |
||||
|
<path d="M6 12H18" stroke="#1890ff" stroke-width="2" stroke-linecap="round"/> |
||||
|
<path d="M6 16H18" stroke="#1890ff" stroke-width="2" stroke-linecap="round"/> |
||||
|
</svg> |
||||
@ -0,0 +1,345 @@ |
|||||
|
<template> |
||||
|
<teleport to="body"> |
||||
|
<div v-if="showErrorStack" class="error-stack-overlay"> |
||||
|
<div class="error-stack-container" :class="typeClass"> |
||||
|
<div class="error-stack-header"> |
||||
|
<div class="icon-wrapper"> |
||||
|
<img :src="iconMap[type]" alt="icon" /> |
||||
|
</div> |
||||
|
<span class="error-stack-title">{{ typeText }}</span> |
||||
|
</div> |
||||
|
<div class="error-stack-content"> |
||||
|
<p class="error-stack-message">{{ info || "未知错误" }}</p> |
||||
|
<div class="error-stack-details-wrapper"> |
||||
|
<div class="details-header" @click="toggleDetails"> |
||||
|
<span class="details-title">详细信息</span> |
||||
|
<span class="details-arrow" :class="{ 'is-expanded': isShow }"> |
||||
|
<svg viewBox="0 0 24 24" width="24" height="24"> |
||||
|
<path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> |
||||
|
</svg> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="error-stack-details" v-show="isShow"> |
||||
|
<template v-if="detailInfos.length"> |
||||
|
<div v-for="(detail, index) in detailInfos" :key="index" class="detail-item"> |
||||
|
<span class="detail-label">{{ detail.name }}</span> |
||||
|
<span class="detail-value">{{ detail.description }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div v-else class="empty-details"> |
||||
|
<svg class="empty-icon" viewBox="0 0 24 24" width="48" height="48"> |
||||
|
<path |
||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" |
||||
|
fill="currentColor" /> |
||||
|
</svg> |
||||
|
<span>暂无详细信息</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="stackInfo" class="stack-info-trigger" @click="showStackInfo"> |
||||
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
||||
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="none" stroke="currentColor" |
||||
|
stroke-width="2" stroke-linecap="round" /> |
||||
|
</svg> |
||||
|
<span>查看栈错误信息</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<button :class="['error-stack-close', buttonClass]" @click="closeErrorStack">关闭</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</teleport> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.error-stack-overlay { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
backdrop-filter: blur(4px); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 9999; |
||||
|
} |
||||
|
|
||||
|
.error-stack-container { |
||||
|
width: 90%; |
||||
|
max-width: 800px; |
||||
|
background: #fff; |
||||
|
border-radius: 16px; |
||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
||||
|
overflow: hidden; |
||||
|
animation: modalSlide 0.3s ease; |
||||
|
|
||||
|
&.error-fatal { |
||||
|
--theme-color: #ff4d4f; |
||||
|
} |
||||
|
|
||||
|
&.error-error { |
||||
|
--theme-color: #ff7875; |
||||
|
} |
||||
|
|
||||
|
&.error-warn { |
||||
|
--theme-color: #faad14; |
||||
|
} |
||||
|
|
||||
|
&.error-notify { |
||||
|
--theme-color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-stack-header { |
||||
|
padding: 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
|
||||
|
.icon-wrapper { |
||||
|
width: 48px; |
||||
|
height: 48px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-stack-title { |
||||
|
font-size: 32px; |
||||
|
font-weight: 600; |
||||
|
color: var(--theme-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-stack-content { |
||||
|
padding: 24px; |
||||
|
|
||||
|
.error-stack-message { |
||||
|
font-size: 28px; |
||||
|
line-height: 1.5; |
||||
|
margin: 0 0 24px; |
||||
|
color: #1f2937; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-stack-details-wrapper { |
||||
|
background: #f8f9fa; |
||||
|
border-radius: 12px; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: 24px; |
||||
|
|
||||
|
.details-header { |
||||
|
padding: 16px 20px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
transition: background-color 0.3s; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #f0f2f5; |
||||
|
} |
||||
|
|
||||
|
.details-title { |
||||
|
font-size: 26px; |
||||
|
font-weight: 500; |
||||
|
color: #374151; |
||||
|
} |
||||
|
|
||||
|
.details-arrow { |
||||
|
color: #9ca3af; |
||||
|
transition: transform 0.3s; |
||||
|
|
||||
|
&.is-expanded { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-stack-details { |
||||
|
padding: 0 20px 20px; |
||||
|
|
||||
|
.detail-item { |
||||
|
display: flex; |
||||
|
padding: 12px 0; |
||||
|
border-bottom: 1px solid #e5e7eb; |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.detail-label { |
||||
|
flex: 0 0 120px; |
||||
|
font-size: 26px; |
||||
|
color: #6b7280; |
||||
|
} |
||||
|
|
||||
|
.detail-value { |
||||
|
flex: 1; |
||||
|
font-size: 26px; |
||||
|
color: #111827; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.empty-details { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding: 32px 0; |
||||
|
color: #9ca3af; |
||||
|
gap: 12px; |
||||
|
|
||||
|
.empty-icon { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.stack-info-trigger { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
padding: 12px 20px; |
||||
|
background: #f8f9fa; |
||||
|
border-radius: 8px; |
||||
|
cursor: pointer; |
||||
|
color: var(--theme-color); |
||||
|
transition: all 0.3s; |
||||
|
|
||||
|
&:hover { |
||||
|
background: rgba(var(--theme-color), 0.1); |
||||
|
transform: translateX(4px); |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.error-stack-close { |
||||
|
width: calc(100% - 48px); |
||||
|
margin: 0 24px 24px; |
||||
|
height: 80px; |
||||
|
border: none; |
||||
|
border-radius: 12px; |
||||
|
font-size: 26px; |
||||
|
font-weight: 500; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
background: var(--theme-color); |
||||
|
color: white; |
||||
|
|
||||
|
&:hover { |
||||
|
opacity: 0.9; |
||||
|
transform: translateY(-2px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes modalSlide { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(-30px); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { eventBus } from '../../eventBus' |
||||
|
import { onMounted, onUnmounted, ref, computed } from 'vue' |
||||
|
import type { ErrorModalData, ErrorDetail } from '../../eventBus' |
||||
|
|
||||
|
let ErrorIcon = new URL('@/assets/Warn.svg', import.meta.url).href |
||||
|
let WarnIcon = new URL('@/assets/update-pin-icon.svg', import.meta.url).href |
||||
|
let NotifyIcon = new URL('@/assets/notify.svg', import.meta.url).href |
||||
|
let FatalIcon = new URL('@/assets/fatal.svg', import.meta.url).href |
||||
|
const showErrorStack = ref(false) |
||||
|
const info = ref('') |
||||
|
const type = ref<'Fatal' | 'Error' | 'Warn' | 'Notify'>('Notify') |
||||
|
const detailInfos = ref<ErrorDetail[]>([]) |
||||
|
const isShow = ref(true) |
||||
|
const stackInfo = ref('') |
||||
|
|
||||
|
// 类型映射 |
||||
|
const TYPE_MAP = { |
||||
|
Fatal: '严重错误', |
||||
|
Error: '错误', |
||||
|
Warn: '警告', |
||||
|
Notify: '提示', |
||||
|
} as const |
||||
|
|
||||
|
// 计算属性：类型文本 |
||||
|
const typeText = computed(() => { |
||||
|
return TYPE_MAP[type.value as keyof typeof TYPE_MAP] || '未知类型' |
||||
|
}) |
||||
|
|
||||
|
// 计算属性：类型样式 |
||||
|
const typeClass = computed(() => { |
||||
|
return { |
||||
|
'error-fatal': type.value === 'Fatal', |
||||
|
'error-error': type.value === 'Error', |
||||
|
'error-warn': type.value === 'Warn', |
||||
|
'error-notify': type.value === 'Notify' |
||||
|
} |
||||
|
}) |
||||
|
//计算属性 按钮样式 |
||||
|
const buttonClass = computed(() => { |
||||
|
return { |
||||
|
'error-fatal-button': type.value === 'Fatal', |
||||
|
'error-error-button': type.value === 'Error', |
||||
|
'error-warn-button': type.value === 'Warn', |
||||
|
'error-notify-button': type.value === 'Notify' |
||||
|
} |
||||
|
}) |
||||
|
// 计算属性：图标映射 |
||||
|
const iconMap = computed(() => { |
||||
|
return { |
||||
|
'Fatal': FatalIcon, |
||||
|
'Error': ErrorIcon, |
||||
|
'Warn': WarnIcon, |
||||
|
'Notify': NotifyIcon |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const toggleDetails = () => { |
||||
|
isShow.value = !isShow.value |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-error-modal', handleErrorModal) |
||||
|
console.log('onMounted') |
||||
|
}) |
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-error-modal', handleErrorModal) |
||||
|
}) |
||||
|
const handleErrorModal = (data: ErrorModalData) => { |
||||
|
info.value = data.info |
||||
|
type.value = data.type |
||||
|
detailInfos.value = data.detailInfos || [] |
||||
|
stackInfo.value = data.stackInfo || '' |
||||
|
showErrorStack.value = true |
||||
|
} |
||||
|
const closeErrorStack = () => { |
||||
|
showErrorStack.value = false |
||||
|
} |
||||
|
const showStackInfo = () => { |
||||
|
eventBus.emit('show-stack-modal', stackInfo.value as unknown as null | undefined) |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,233 @@ |
|||||
|
<template> |
||||
|
<teleport to="body"> |
||||
|
<div class="stack-info-modal" v-if="showStackInfo"> |
||||
|
<div class="stack-info-modal-content"> |
||||
|
<div class="stack-info-modal-header"> |
||||
|
<div class="header-left"> |
||||
|
<img src="@/assets/stack-icon.svg" alt="stack" class="stack-icon" /> |
||||
|
<h3>完整错误信息</h3> |
||||
|
</div> |
||||
|
<div class="header-right"> |
||||
|
<span class="close-btn" @click="closeStackInfoModal">关闭</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="stack-info-modal-body"> |
||||
|
<div class="stack-trace" |
||||
|
v-if="Array.isArray(stackInfo?.stackTraceElements) && stackInfo.stackTraceElements.length"> |
||||
|
<div v-for="(trace, index) in stackInfo.stackTraceElements" :key="index" class="stack-trace-item"> |
||||
|
<span class="line-number">{{ index + 1 }}</span> |
||||
|
<span class="stack-line">{{ trace }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else class="empty-state"> |
||||
|
<img src="@/assets/empty-stack.svg" alt="empty" class="empty-icon" /> |
||||
|
<p>暂无栈错误信息</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</teleport> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.stack-info-modal { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-color: #fff; |
||||
|
z-index: 10000; |
||||
|
} |
||||
|
|
||||
|
.stack-info-modal-content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.stack-info-modal-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 0 40px; |
||||
|
background: #f8f9fa; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
height: 50px; |
||||
|
|
||||
|
.header-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
|
||||
|
.stack-icon { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
margin: 0; |
||||
|
font-size: 36px; |
||||
|
color: #1f2937; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.header-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 24px; |
||||
|
|
||||
|
.copy-btn, |
||||
|
.close-btn { |
||||
|
cursor: pointer; |
||||
|
font-size: 28px; |
||||
|
padding: 12px 24px; |
||||
|
color: #1890ff; |
||||
|
border-radius: 8px; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
background: rgba(24, 144, 255, 0.1); |
||||
|
color: #096dd9; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.stack-info-modal-body { |
||||
|
flex: 1; |
||||
|
padding: 0; |
||||
|
overflow-y: auto; |
||||
|
background: #f8f9fa; |
||||
|
|
||||
|
&::-webkit-scrollbar { |
||||
|
width: 12px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-track { |
||||
|
background: #f1f1f1; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
background: #ccc; |
||||
|
border-radius: 6px; |
||||
|
border: 3px solid #f1f1f1; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.stack-trace { |
||||
|
padding: 20px 40px; |
||||
|
|
||||
|
.stack-trace-header { |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
h4 { |
||||
|
font-size: 28px; |
||||
|
color: #374151; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.stack-trace-item { |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
border-radius: 8px; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #f0f2f5; |
||||
|
transform: translateX(4px); |
||||
|
} |
||||
|
|
||||
|
.line-number { |
||||
|
flex-shrink: 0; |
||||
|
width: 60px; |
||||
|
color: #6b7280; |
||||
|
font-family: 'Fira Code', monospace; |
||||
|
font-size: 28px; |
||||
|
text-align: right; |
||||
|
margin-right: 24px; |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|
||||
|
.stack-line { |
||||
|
color: #374151; |
||||
|
font-family: 'Fira Code', monospace; |
||||
|
font-size: 24px; |
||||
|
word-break: break-all; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 100%; |
||||
|
color: #6b7280; |
||||
|
|
||||
|
.empty-icon { |
||||
|
width: 160px; |
||||
|
height: 160px; |
||||
|
margin-bottom: 24px; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 32px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted, onUnmounted } from 'vue' |
||||
|
import { eventBus } from '../../eventBus' |
||||
|
|
||||
|
interface StackTrace { |
||||
|
stackTraceElements?: string[] |
||||
|
[key: string]: any |
||||
|
} |
||||
|
|
||||
|
const showStackInfo = ref(false) |
||||
|
const stackInfo = ref<StackTrace | null>(null) |
||||
|
|
||||
|
const closeStackInfoModal = () => { |
||||
|
showStackInfo.value = false |
||||
|
} |
||||
|
|
||||
|
const copyStackInfo = () => { |
||||
|
if (stackInfo.value?.stackTraceElements) { |
||||
|
const text = stackInfo.value.stackTraceElements.join('\n') |
||||
|
navigator.clipboard.writeText(text) |
||||
|
.then(() => { |
||||
|
// 可以添加一个复制成功的提示 |
||||
|
alert('错误信息已复制到剪贴板') |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.error('复制失败:', err) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-stack-modal', handleStackModal) |
||||
|
}) |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-stack-modal', handleStackModal) |
||||
|
}) |
||||
|
|
||||
|
const handleStackModal = (data: any) => { |
||||
|
stackInfo.value = data |
||||
|
showStackInfo.value = true |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,2 @@ |
|||||
|
export { default as ErrorModal } from './ErrorModal.vue' |
||||
|
export { default as StackInfoModal } from './StackInfoModal.vue' |
||||
@ -1,7 +1,24 @@ |
|||||
// src/eventBus.js
|
|
||||
|
// src/eventBus.ts
|
||||
import mitt from 'mitt' |
import mitt from 'mitt' |
||||
|
|
||||
|
export type ErrorDetail = { |
||||
|
name: string |
||||
|
description: string |
||||
|
} |
||||
|
|
||||
|
export type ErrorModalData = { |
||||
|
type: 'Notify' | 'Warn' | 'Error' | 'Fatal' |
||||
|
info: string |
||||
|
detailInfos?: ErrorDetail[] |
||||
|
ecode?: string |
||||
|
stackInfo?: null |
||||
|
} |
||||
|
|
||||
type Events = { |
type Events = { |
||||
confirm: { value: number; index: number } |
confirm: { value: number; index: number } |
||||
|
'show-error-modal': ErrorModalData |
||||
|
'show-stack-modal': ErrorModalData['stackInfo'] | null | undefined |
||||
// 其他事件类型
|
// 其他事件类型
|
||||
} |
} |
||||
|
|
||||
export const eventBus = mitt<Events>() |
export const eventBus = mitt<Events>() |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue