257257 </el-descriptions >
258258 </div >
259259
260- <!-- 错误时显示小按钮 -->
261- <div v-if =" errorButtonVisible" style =" text-align : center ; margin-top : 10px ;" >
262- <el-button type =" text" @click =" errorDialogVisible = true" > 反馈错误详情>> </el-button >
263- </div >
260+ <!-- 错误徽章,解析失败时显示,可手动关闭,解析成功自动关闭 -->
261+ <transition name =" el-fade-in" >
262+ <div v-if =" errorBadgeVisible"
263+ style =" position :fixed ;z-index :9999 ;top :80px ;right :24px ;display :flex ;align-items :center ;background :#fff1f0 ;border :1px solid #ffccc7 ;border-radius :16px ;padding :6px 8px 6px 14px ;box-shadow :0 2px 10px rgba (217 ,48 ,38 ,.12 );cursor :pointer ;"
264+ @click.self =" errorDialogVisible=true" >
265+ <i class =" fas fa-exclamation-circle" style =" color :#d93026 ;font-size :15px ;margin-right :7px ;pointer-events :none ;" ></i >
266+ <span style =" font-size :14px ;color :#d93026 ;margin-right :8px ;pointer-events :none ;" @click =" errorDialogVisible=true" >解析出错</span >
267+ <el-button
268+ size =" small" circle
269+ style =" width :20px ;height :20px ;min-height :20px ;padding :0 ;background :transparent ;border :none ;color :#d93026 ;"
270+ @click.stop =" errorBadgeVisible=false" >
271+ <i class =" el-icon-close" style =" font-size :12px ;" ></i >
272+ </el-button >
273+ </div >
274+ </transition >
264275
265- <!-- 错误 JSON 弹窗 -->
266- <el-dialog
267- v-model =" errorDialogVisible"
268- width =" 60%" >
276+ <!-- 错误弹窗 -->
277+ <el-dialog v-model =" errorDialogVisible" width =" 500px" :show-close =" true" @close =" errorMsgExpanded=false" >
269278 <template #title >
270- 错误详情
271- <el-link
272- @click.prevent =" copyErrorDetails"
273- target =" _blank"
274- style =" margin-left :8px "
275- type =" primary" >
276- 复制当前错误信息,提交Issue
277- </el-link >
279+ <i class =" fas fa-exclamation-circle" style =" color :#d93026 ;margin-right :8px ;" ></i >
280+ <span style =" color :#d93026 ;font-weight :600 ;" >解析出错</span >
278281 </template >
279- <json-viewer :value =" errorDetail" :expand-depth =" 5" copyable boxed sort />
282+ <div style =" font-size :13px ;color :#606266 ;margin-bottom :12px ;word-break :break-all ;line-height :1.6 ;" >
283+ <template v-if =" errorDetail " >
284+ <span >{{ errorMsgExpanded ? (errorDetail.msg || errorDetail.message) : truncateMsg(errorDetail.msg || errorDetail.message) }}</span >
285+ <a v-if =" !errorMsgExpanded && (errorDetail.msg || errorDetail.message || '').length > 150"
286+ href =" #" style =" color :#1677ff ;margin-left :4px ;"
287+ @click.prevent =" errorMsgExpanded=true" >展开</a >
288+ <a v-if =" errorMsgExpanded"
289+ href =" #" style =" color :#1677ff ;margin-left :4px ;"
290+ @click.prevent =" errorMsgExpanded=false" >收起</a >
291+ </template >
292+ </div >
280293 <template #footer >
281294 <el-button @click =" errorDialogVisible = false" >关闭</el-button >
295+ <el-button type =" danger" plain @click =" copyErrorDetails" >
296+ <i class =" fab fa-github" style =" margin-right :6px ;" ></i >复制信息并前往 GitHub Issues
297+ </el-button >
282298 </template >
283299 </el-dialog >
284300
@@ -607,7 +623,9 @@ export default {
607623 autoReadClipboard: true ,
608624 isDarkMode: false ,
609625 isLoading: false ,
610-
626+ errorBadgeVisible: false ,
627+ errorMsgExpanded: false ,
628+
611629 // 输入数据
612630 link: " " ,
613631 password: " " ,
@@ -1149,6 +1167,7 @@ export default {
11491167 // 统一API调用(自动添加认证参数)
11501168 async callAPI (endpoint , params = {}) {
11511169 this .errorButtonVisible = false
1170+ this .errorBadgeVisible = false
11521171 try {
11531172 this .isLoading = true
11541173 // 添加认证参数(异步获取)
@@ -1160,21 +1179,28 @@ export default {
11601179
11611180 if (response .data .code === 200 ) {
11621181 // this.$message.success(response.data.msg || '操作成功')
1182+ this .errorBadgeVisible = false
11631183 return response .data
11641184 } else {
1165- // 在页面右下角显示一个”查看详情”按钮 可以查看原json
1185+ // 解析失败,显示徽章和弹窗
11661186 this .errorDetail = response? .data
11671187 this .errorButtonVisible = true
1188+ this .errorBadgeVisible = true
1189+ this .errorDialogVisible = true
11681190 throw new Error (response .data .msg || ' 操作失败' )
11691191 }
11701192 } catch (error) {
11711193 // HTTP 非2xx时,从响应体中提取后端返回的错误信息
11721194 if (error .response ? .data ? .msg ) {
11731195 this .errorDetail = error .response .data
11741196 this .errorButtonVisible = true
1197+ this .errorBadgeVisible = true
1198+ this .errorDialogVisible = true
11751199 this .$message .error (error .response .data .msg )
11761200 throw new Error (error .response .data .msg )
11771201 }
1202+ this .errorBadgeVisible = true
1203+ this .errorDialogVisible = true
11781204 this .$message .error (error .message || ' 网络错误' )
11791205 throw error
11801206 } finally {
@@ -1472,6 +1498,11 @@ export default {
14721498 })
14731499 },
14741500
1501+ truncateMsg (msg ) {
1502+ if (! msg) return ' '
1503+ return msg .length > 150 ? msg .slice (0 , 150 ) + ' ...' : msg
1504+ },
1505+
14751506 copyErrorDetails () {
14761507 const text = ` 分享链接:${ this .link }
14771508分享密码:${ this .password || ' ' }
0 commit comments