luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 顶部通知铃铛与站内通知中心
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m7s
Details

Browse Source
This commit is contained in:
luo
2026-07-24 17:12:29 +08:00
parent 4c6d871c35
commit d1ff4d5f6c
18 changed files with 1101 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
src/components/core/layouts/art-notification/style.scss
View File

@@ -1,262 +1,179 @@
@use '@styles/variables.scss' as *;
@use '@styles/mixin.scss' as *;
.notice-overlay {
position: fixed;
inset: 0;
z-index: 2000;
}
.notice {
position: absolute;
top: 60px;
right: 20px;
width: 360px;
height: 500px;
overflow: hidden;
right: 18px;
width: 390px;
max-width: calc(100vw - 24px);
background: var(--art-main-bg-color);
border: 1px solid var(--art-border-color);
border-radius: calc(var(--custom-radius) / 2 + 6px) !important;
box-shadow:
0 8px 26px -4px hsl(0deg 0% 8% / 15%),
0 8px 9px -5px hsl(0deg 0% 8% / 6%);
transition: all 0.2s;
transform-origin: center top 0;
will-change: top, left;
border-radius: calc(var(--custom-radius) / 2 + 6px);
box-shadow: 0 8px 26px -4px hsl(0deg 0% 8% / 15%);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
margin-top: 15px;
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--art-border-color);
span {
font-size: 12px;
}
.text {
font-size: 16px;
font-weight: 500;
color: var(--art-gray-800);
}
.btn {
padding: 4px 6px;
cursor: pointer;
user-select: none;
border-radius: 6px;
&:hover {
background-color: var(--art-gray-200);
}
}
.text {
font-size: 16px;
font-weight: 600;
}
.bar {
box-sizing: border-box;
display: flex;
width: 100%;
height: 50px;
padding: 0 15px;
line-height: 50px;
border-bottom: 1px solid var(--art-border-color);
li {
height: 48px;
margin-right: 20px;
overflow: hidden;
font-size: 13px;
color: var(--art-gray-700);
cursor: pointer;
transition: color 0.3s;
@include userSelect;
&:last-of-type {
margin-right: 0;
}
&:hover {
color: var(--art-gray-900);
}
&.active {
color: var(--main-color) !important;
border-bottom: 2px solid var(--main-color);
}
}
.read-all {
padding: 4px 8px;
color: var(--el-color-primary);
cursor: pointer;
background: transparent;
border: 0;
}
}
.content {
width: 100%;
height: calc(100% - 95px);
.bar {
display: flex;
padding: 0 12px;
overflow-x: auto;
border-bottom: 1px solid var(--art-border-color);
.scroll {
height: calc(100% - 60px);
overflow-y: scroll;
button {
flex: 0 0 auto;
padding: 13px 8px 11px;
margin-right: 12px;
color: var(--art-gray-700);
cursor: pointer;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
&::-webkit-scrollbar {
width: 5px !important;
}
.notice-list {
li {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 15px;
cursor: pointer;
&:hover {
background-color: var(--art-gray-100);
}
&:last-of-type {
border-bottom: 0;
}
.icon {
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 8px;
i {
font-size: 18px;
background: transparent !important;
}
}
.text {
width: calc(100% - 45px);
margin-left: 15px;
h4 {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: var(--art-gray-900);
}
p {
margin-top: 5px;
font-size: 12px;
color: var(--art-gray-500);
}
}
}
}
.user-list {
li {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 15px;
cursor: pointer;
&:hover {
background-color: var(--art-gray-100);
}
&:last-of-type {
border-bottom: 0;
}
.avatar {
width: 36px;
height: 36px;
img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
.text {
width: calc(100% - 45px);
margin-left: 15px;
h4 {
font-size: 13px;
font-weight: 400;
line-height: 22px;
color: var(--art-gray-900);
}
p {
margin-top: 5px;
font-size: 12px;
color: var(--art-gray-500);
}
}
}
}
.base {
li {
box-sizing: border-box;
padding: 15px 20px;
&:last-of-type {
border-bottom: 0;
}
p {
font-size: 12px;
color: var(--art-gray-500);
}
}
}
.empty-tips {
position: relative;
top: 100px;
height: 100%;
color: var(--art-gray-500);
text-align: center;
background: transparent !important;
i {
font-size: 60px;
}
p {
margin-top: 15px;
font-size: 12px;
background: transparent !important;
}
}
}
.btn-wrapper {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0 15px;
.view-all {
width: 100%;
margin-top: 12px;
}
&.active {
color: var(--el-color-primary);
border-bottom-color: var(--el-color-primary);
}
}
}
.dark {
.notice {
::-webkit-scrollbar-track {
background-color: var(--art-main-bg-color);
.content {
.scroll {
height: 390px;
overflow-y: auto;
}
.notification-item {
display: flex;
gap: 10px;
align-items: flex-start;
width: 100%;
padding: 14px 16px;
text-align: left;
cursor: pointer;
background: transparent;
border: 0;
&:hover {
background: var(--el-fill-color-light);
}
::-webkit-scrollbar-thumb {
background-color: #222 !important;
&.unread {
background: color-mix(in srgb, var(--el-color-primary) 5%, transparent);
}
.icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--el-color-info);
background: var(--el-color-info-light-9);
border-radius: 8px;
&.severity-warning {
color: var(--el-color-warning);
background: var(--el-color-warning-light-9);
}
&.severity-error {
color: var(--el-color-danger);
background: var(--el-color-danger-light-9);
}
&.severity-success {
color: var(--el-color-success);
background: var(--el-color-success-light-9);
}
}
.text {
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
min-width: 0;
strong,
small,
time {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
strong {
color: var(--el-text-color-primary);
}
small,
time {
color: var(--el-text-color-secondary);
}
}
.unread-dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
margin-top: 5px;
background: var(--el-color-danger);
border-radius: 50%;
}
}
.empty-tips {
padding: 70px 20px;
color: var(--el-text-color-secondary);
text-align: center;
i {
font-size: 42px;
}
}
.btn-wrapper {
padding: 12px 16px 16px;
border-top: 1px solid var(--art-border-color);
.view-all {
width: 100%;
}
}
}
@media only screen and (max-width: $device-phone) {
.notice {
top: 65px;
right: 0;
width: 100%;
height: 80vh;
top: 62px;
right: 12px;
left: 12px;
width: auto;
}
}