错误卡片重设计:居中布局+去技术详情(读者无需看),图标放大、重试改胶囊按钮
Deploy to Production / pre-check (push) Successful in 54s
Deploy to Production / build (push) Canceled after 5s
Deploy to Production / deploy-edgeone (push) Canceled after 0s
Deploy to Production / finalize (push) Canceled after 0s
Deploy to Production / notify-failure (push) Canceled after 0s
Deploy to Production / pre-check (push) Successful in 54s
Deploy to Production / build (push) Canceled after 5s
Deploy to Production / deploy-edgeone (push) Canceled after 0s
Deploy to Production / finalize (push) Canceled after 0s
Deploy to Production / notify-failure (push) Canceled after 0s
This commit is contained in:
1 parent
afa1346a0f
commit
8535f759f4
1 file changed
+14
-25
@@ -64,27 +64,21 @@
|
|||||||
st.id = 'atk-err-css';
|
st.id = 'atk-err-css';
|
||||||
st.textContent =
|
st.textContent =
|
||||||
'.atk-error-layer{padding:0!important;background:transparent!important}' +
|
'.atk-error-layer{padding:0!important;background:transparent!important}' +
|
||||||
'.atk-err-card{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;box-sizing:border-box;' +
|
'.atk-err-card{display:block;text-align:center;padding:30px 22px;box-sizing:border-box;' +
|
||||||
'border:1px solid var(--border-main,#eee);border-radius:10px;background:var(--bg-card,#fff);' +
|
|
||||||
'animation:atkErrIn .35s cubic-bezier(.22,1,.36,1)}' +
|
'animation:atkErrIn .35s cubic-bezier(.22,1,.36,1)}' +
|
||||||
'@keyframes atkErrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}' +
|
'@keyframes atkErrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}' +
|
||||||
'.atk-err-ic{flex:none;font-size:22px;line-height:1.2}' +
|
'.atk-err-ic{display:block;font-size:30px;line-height:1;margin-bottom:12px}' +
|
||||||
'.atk-err-body{flex:1;min-width:0}' +
|
'.atk-err-t{font-size:15px;font-weight:600;color:var(--text-main,#333);margin-bottom:6px}' +
|
||||||
'.atk-err-t{font-size:14px;font-weight:600;color:var(--text-main,#333);margin-bottom:4px}' +
|
'.atk-err-d{font-size:13px;line-height:1.8;color:var(--text-muted,#999);' +
|
||||||
'.atk-err-d{font-size:13px;line-height:1.7;color:var(--text-desc,#777);word-break:break-word}' +
|
'max-width:420px;margin:0 auto 16px;word-break:break-word}' +
|
||||||
'.atk-err-acts{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px}' +
|
'.atk-err-acts{display:flex;justify-content:center;align-items:center;gap:10px}' +
|
||||||
'.atk-err-retry{display:inline-flex;align-items:center;padding:5px 14px;border-radius:5px;' +
|
'.atk-err-retry{display:inline-flex;align-items:center;padding:6px 20px;border-radius:999px;' +
|
||||||
'background:var(--theme-main-20,rgba(7,193,96,.2));color:var(--theme-main,#07c160);' +
|
'background:var(--theme-main-20,rgba(7,193,96,.12));color:var(--theme-main,#07c160);' +
|
||||||
'font-weight:600;cursor:pointer;transition:background .2s,transform .2s;user-select:none}' +
|
'font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,transform .2s;user-select:none}' +
|
||||||
'.atk-err-retry:hover{background:var(--theme-main-30,rgba(7,193,96,.3))}' +
|
'.atk-err-retry:hover{background:var(--theme-main,#07c160);color:#fff}' +
|
||||||
'.atk-err-retry:active{transform:scale(.97)}' +
|
'.atk-err-retry:active{transform:scale(.96)}' +
|
||||||
'.atk-err-det{margin-top:10px;font-size:12px;color:var(--text-muted,#999)}' +
|
'@media (max-width:640px){.atk-err-card{padding:24px 16px}.atk-err-ic{font-size:26px}' +
|
||||||
'.atk-err-det>summary{cursor:pointer;outline:none;user-select:none}' +
|
'.atk-err-t{font-size:14px}.atk-err-d{font-size:12.5px}}';
|
||||||
'.atk-err-det pre{margin:8px 0 0;padding:8px 10px;border-radius:6px;background:rgba(127,127,127,.08);' +
|
|
||||||
'white-space:pre-wrap;word-break:break-all;font-size:11px;line-height:1.6;max-height:150px;overflow:auto}' +
|
|
||||||
'[data-theme="dark"] .atk-err-card{border-color:rgba(255,255,255,.14)}' +
|
|
||||||
'@media (max-width:640px){.atk-err-card{padding:13px 14px;gap:8px}.atk-err-ic{font-size:18px}' +
|
|
||||||
'.atk-err-t{font-size:13.5px}.atk-err-d{font-size:12.5px}}';
|
|
||||||
document.head.appendChild(st);
|
document.head.appendChild(st);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -107,7 +101,6 @@
|
|||||||
var desc = fresh && fresh.msg
|
var desc = fresh && fresh.msg
|
||||||
? fresh.msg.replace(/^评论服务暂时不可用(?:[((][^))]*[))])?[::]\s*/, '')
|
? fresh.msg.replace(/^评论服务暂时不可用(?:[((][^))]*[))])?[::]\s*/, '')
|
||||||
: info.desc;
|
: info.desc;
|
||||||
var detail = (fresh && fresh.detail) || raw;
|
|
||||||
|
|
||||||
// 原始「重试」节点:Vue 会整层重建,所以每次重新找;
|
// 原始「重试」节点:Vue 会整层重建,所以每次重新找;
|
||||||
// 若本层已重写过,就从我们自己卡片里把它取回来(移动 DOM 保留已绑事件)
|
// 若本层已重写过,就从我们自己卡片里把它取回来(移动 DOM 保留已绑事件)
|
||||||
@@ -128,13 +121,9 @@
|
|||||||
card.setAttribute('data-raw', raw);
|
card.setAttribute('data-raw', raw);
|
||||||
card.innerHTML =
|
card.innerHTML =
|
||||||
'<span class="atk-err-ic">' + info.ic + '</span>' +
|
'<span class="atk-err-ic">' + info.ic + '</span>' +
|
||||||
'<div class="atk-err-body">' +
|
|
||||||
'<div class="atk-err-t">' + esc(info.title) + '</div>' +
|
'<div class="atk-err-t">' + esc(info.title) + '</div>' +
|
||||||
'<div class="atk-err-d">' + esc(desc) + '</div>' +
|
'<div class="atk-err-d">' + esc(desc) + '</div>' +
|
||||||
'<div class="atk-err-acts"></div>' +
|
'<div class="atk-err-acts"></div>';
|
||||||
(detail ? '<details class="atk-err-det"><summary>技术详情(给站长排查用)</summary><pre>' +
|
|
||||||
esc((code ? '[' + code + '] ' : '') + detail) + '</pre></details>' : '') +
|
|
||||||
'</div>';
|
|
||||||
|
|
||||||
layer.textContent = '';
|
layer.textContent = '';
|
||||||
layer.appendChild(card);
|
layer.appendChild(card);
|
||||||
|
|||||||
Reference in new issue
Block a user