YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(documents): move unread notice into bell

Browse Source
This commit is contained in:
caoxiaozhu
2026-06-03 17:05:34 +08:00
parent 8c2f301d85
commit c73178b65d
8 changed files with 342 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/assets/styles/components/document-list-shared.css
View File

@@ -35,27 +35,27 @@
}
.scope-tab-label {
position: relative;
display: inline-flex;
align-items: center;
align-items: flex-start;
gap: 4px;
line-height: 1.2;
}
.scope-tab-badge {
position: absolute;
top: -8px;
right: -15px;
min-width: 15px;
height: 15px;
position: static;
flex: 0 0 auto;
min-width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
margin-top: -5px;
padding: 0 3px;
border: 1px solid #fff;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 10px;
font-size: 9.5px;
font-weight: 850;
line-height: 1;
box-shadow:

50
web/src/assets/styles/components/sidebar-rail.css
View File

@@ -216,14 +216,12 @@
flex: 1;
min-width: 0;
max-width: 128px;
position: relative;
display: inline-flex;
align-items: center;
color: currentColor;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
overflow: visible;
overflow: hidden;
text-overflow: ellipsis;
opacity: 1;
transition:
max-width var(--rail-motion-duration) var(--rail-motion-ease),
@@ -232,16 +230,6 @@
will-change: max-width, opacity, transform;
}
.nav-label-text {
position: relative;
min-width: 0;
max-width: 100%;
display: inline-flex;
align-items: center;
overflow: visible;
line-height: 1.2;
}
.nav-badge {
flex: 0 0 auto;
min-width: 34px;
@@ -263,27 +251,6 @@
will-change: min-width, max-width, padding, opacity;
}
.nav-unread-dot {
width: 9px;
height: 9px;
border: 2px solid #fff;
border-radius: 999px;
background: #ef4444;
box-shadow:
0 0 0 3px rgba(239, 68, 68, 0.12),
0 6px 14px rgba(239, 68, 68, 0.32);
}
.nav-unread-dot-label {
position: absolute;
top: -8px;
right: -10px;
}
.nav-unread-dot-collapsed {
display: none;
}
.rail-user {
position: relative;
min-width: 0;
@@ -493,19 +460,6 @@
transition-delay: 0ms;
}
.rail-collapsed .nav-unread-dot-label {
display: none;
}
.rail-collapsed .nav-unread-dot-collapsed {
position: absolute;
display: block;
top: 10px;
right: 11px;
width: 9px;
height: 9px;
}
.rail-collapsed {
overflow: visible;
}

174
web/src/assets/styles/components/top-bar.css
View File

@@ -408,21 +408,26 @@
display: inline-flex;
}
.notification-btn {
position: relative;
overflow: visible;
}
.notification-badge {
position: absolute;
top: 2px;
right: 1px;
min-width: 13px;
height: 13px;
top: 1px;
right: 0;
min-width: 15px;
height: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 3px;
padding: 0 4px;
border: 2px solid #fff;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 8px;
font-size: 9px;
font-weight: 850;
line-height: 1;
box-shadow: 0 5px 10px rgba(239, 68, 68, .22);
@@ -433,15 +438,15 @@
top: calc(100% + 10px);
right: -8px;
z-index: 60;
width: min(360px, calc(100vw - 32px));
width: min(392px, calc(100vw - 32px));
display: grid;
gap: 10px;
padding: 12px;
gap: 12px;
padding: 14px;
border: 1px solid #e5edf5;
border-radius: 4px;
background: rgba(255, 255, 255, 0.98);
background: #fff;
box-shadow:
0 18px 42px rgba(15, 23, 42, 0.14),
0 18px 46px rgba(15, 23, 42, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
@@ -469,14 +474,27 @@
.notification-head {
justify-content: space-between;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #edf2f7;
}
.notification-head-copy {
display: grid;
gap: 3px;
}
.notification-head strong {
color: #0f172a;
font-size: 14px;
font-size: 15px;
font-weight: 850;
}
.notification-head small {
color: #64748b;
font-size: 12px;
font-weight: 650;
}
.notification-head button {
width: 26px;
height: 26px;
@@ -501,89 +519,175 @@
.notification-tabs button {
flex: 1 1 0;
height: 28px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 3px;
color: #64748b;
font-size: 12px;
font-weight: 800;
}
.notification-tabs button em {
min-width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
font-style: normal;
font-size: 11px;
line-height: 1;
}
.notification-tabs button.active {
background: #fff;
color: var(--theme-primary-active);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.notification-tabs button.active em {
background: var(--theme-primary-light-8);
color: var(--theme-primary-active);
}
.notification-list {
position: relative;
z-index: 1;
display: grid;
gap: 8px;
max-height: 320px;
overflow: auto;
}
.notification-row {
display: grid;
grid-template-columns: 8px minmax(0, 1fr) 16px;
align-items: center;
grid-template-columns: 34px minmax(0, 1fr) 16px;
align-items: start;
gap: 10px;
padding: 10px 4px;
border-top: 1px solid #edf2f7;
min-height: 72px;
padding: 10px;
border: 1px solid #edf2f7;
border-radius: 4px;
background: #fff;
text-align: left;
}
.notification-row:first-child {
border-top: 0;
transition:
border-color 160ms var(--ease),
background 160ms var(--ease),
box-shadow 160ms var(--ease);
}
.notification-row:hover {
background: #f8fafc;
border-color: var(--theme-primary-light-5);
background: #f8fbff;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}
.notification-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--theme-primary);
.notification-type-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--theme-primary-light-6);
border-radius: 4px;
background: var(--theme-primary-light-9);
color: var(--theme-primary-active);
font-size: 18px;
}
.notification-dot.danger { background: #ef4444; }
.notification-dot.warning { background: #f59e0b; }
.notification-dot.success { background: var(--success); }
.notification-dot.info { background: #3b82f6; }
.notification-type-icon.danger {
border-color: #fecaca;
background: #fff5f5;
color: #dc2626;
}
.notification-type-icon.warning {
border-color: #fde68a;
background: #fffbeb;
color: #d97706;
}
.notification-type-icon.success {
border-color: #bbf7d0;
background: #f0fdf4;
color: #16a34a;
}
.notification-type-icon.info {
border-color: #bfdbfe;
background: #eff6ff;
color: #2563eb;
}
.notification-copy {
min-width: 0;
display: grid;
gap: 2px;
gap: 5px;
}
.notification-copy strong,
.notification-copy small,
.notification-copy em {
.notification-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notification-title-line {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.notification-copy strong {
min-width: 0;
color: #0f172a;
font-size: 13px;
font-weight: 850;
}
.notification-title-line b {
flex: 0 0 auto;
min-width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 10px;
line-height: 1;
}
.notification-copy small {
color: #475569;
font-size: 12px;
}
.notification-copy em {
.notification-meta {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.notification-meta em,
.notification-meta time {
color: #94a3b8;
font-size: 11px;
font-style: normal;
}
.notification-row > .mdi {
align-self: center;
color: #94a3b8;
font-size: 16px;
}