style(message): 统一 Message toast 视觉风格并清理 emoji
CI / Backend tests (push) Canceled after 0s
CI / Frontend build (push) Canceled after 0s

- 登录成功/设置保存/清理完成等 toast 去掉 emoji,保持文字简洁
- 全局 .el-message 增加 14px 圆角、统一 padding,字体与设计系统对齐
- success 类型定制橙色圆形图标底 + 白色对勾,匹配暗色暖色主题
This commit is contained in:
DuMate
2026-09-21 23:41:22 +08:00
parent 3e68a9d8df
commit d228ee5923
4 changed files with 34 additions and 6 deletions
+31 -3
View File
@@ -241,9 +241,37 @@ html[data-theme="dark"] .ambient::after {
} }
/* —— Element Plus Message 全局覆盖:使用设计系统变量,双主题均可读 —— */ /* —— Element Plus Message 全局覆盖:使用设计系统变量,双主题均可读 —— */
.el-message { background: var(--card) !important; border-color: var(--line) !important; box-shadow: var(--shadow) !important; } .el-message {
.el-message__content { color: var(--ink) !important; } background: var(--card) !important;
.el-message .el-message__icon { color: var(--orange) !important; } border-color: var(--line) !important;
box-shadow: var(--shadow) !important;
border-radius: 14px !important;
padding: 12px 22px 12px 16px !important;
min-width: unset !important;
}
.el-message__content { color: var(--ink) !important; font-weight: 500; font-size: 13.5px; }
/* Success 定制:圆形橙色图标底 + 白色对勾,匹配暗色暖色风格 */
.el-message.el-message--success .el-message__icon {
position: relative !important;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
margin-right: 10px;
color: #fff !important;
font-size: 13px;
z-index: 1;
}
.el-message.el-message--success .el-message__icon::before {
content: '';
position: absolute; inset: 0;
background: var(--orange);
border-radius: 50%;
z-index: -1;
}
/* 按类型还原图标颜色(success 已覆盖为白色) */
.el-message.el-message--warning .el-message__icon { color: var(--orange) !important; }
.el-message.el-message--error .el-message__icon { color: var(--red) !important; }
.el-message.el-message--info .el-message__icon { color: var(--blue) !important; }
/* —— 响应式断点(桌面 ≥1024 / 平板 768~1023 / 手机 <768) —— */ /* —— 响应式断点(桌面 ≥1024 / 平板 768~1023 / 手机 <768) —— */
@media (max-width: 1023px) { @media (max-width: 1023px) {
+1 -1
View File
@@ -26,7 +26,7 @@ async function login() {
ElMessage.error(res.message || '用户名或密码错误') ElMessage.error(res.message || '用户名或密码错误')
return return
} }
ElMessage.success('欢迎回来 👋') ElMessage.success('欢迎回来')
router.push(route.query.redirect || '/') router.push(route.query.redirect || '/')
} }
</script> </script>
+1 -1
View File
@@ -77,7 +77,7 @@ async function onCleanConfirmed(res) {
function quickClean() { function quickClean() {
const warnPkg = state.packages.find(p => p.status === 'warn') const warnPkg = state.packages.find(p => p.status === 'warn')
if (warnPkg) openClean(warnPkg) if (warnPkg) openClean(warnPkg)
else ElMessage.info('暂无预警包需要清理 🎉') else ElMessage.info('暂无预警包需要清理')
} }
</script> </script>
+1 -1
View File
@@ -80,7 +80,7 @@ async function doSave() {
exceptions: form.exceptions, exceptions: form.exceptions,
}) })
saved.value = true saved.value = true
ElMessage.success('设置已保存,包列表状态已重新计算 ✅') ElMessage.success('设置已保存,包列表状态已重新计算')
setTimeout(() => (saved.value = false), 3000) setTimeout(() => (saved.value = false), 3000)
} finally { } finally {
saving.value = false saving.value = false