fix: 扣分明细改为弹窗展示
This commit is contained in:
parent
1ba637c983
commit
faf1a79a29
@ -154,7 +154,10 @@
|
||||
}
|
||||
|
||||
.log-statistics-card.is-link {
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
transition: border-color 150ms ease, background 150ms ease;
|
||||
}
|
||||
@ -188,6 +191,66 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-statistics-dialog {
|
||||
width: min(72rem, calc(100vw - 2rem));
|
||||
max-height: calc(100vh - 4rem);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--vip-border, #D8D2C7);
|
||||
border-radius: 12px;
|
||||
background: var(--vip-surface, #fff);
|
||||
color: var(--vip-content-ink, #171717);
|
||||
box-shadow: 0 16px 40px rgba(23, 23, 23, 0.2);
|
||||
}
|
||||
|
||||
.log-statistics-dialog:not([open]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.log-statistics-dialog::backdrop {
|
||||
background: rgba(23, 23, 23, 0.42);
|
||||
}
|
||||
|
||||
.log-statistics-dialog__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border-bottom: 1px solid var(--vip-border, #D8D2C7);
|
||||
background: var(--vip-content-accent-soft, #F7F0DE);
|
||||
}
|
||||
|
||||
.log-statistics-dialog__head strong {
|
||||
display: block;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-statistics-dialog__head span {
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
color: var(--vip-content-muted, #595959);
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.log-statistics-dialog__close {
|
||||
min-height: 1.8rem;
|
||||
padding: 0 0.65rem;
|
||||
border: 1px solid var(--vip-border, #D8D2C7);
|
||||
border-radius: 5px;
|
||||
background: var(--vip-surface, #fff);
|
||||
color: var(--vip-content-accent-dark, #856632);
|
||||
font: inherit;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.log-statistics-dialog .log-statistics-table-wrap {
|
||||
max-height: min(60vh, 32rem);
|
||||
}
|
||||
|
||||
.log-statistics-panel {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--vip-border, #D8D2C7);
|
||||
@ -380,11 +443,12 @@
|
||||
@endphp
|
||||
<div class="log-statistics-cards">
|
||||
@if ($hasWorklogPenalty)
|
||||
<a class="log-statistics-card is-link" href="#worklog-penalty" title="点击查看扣分明细" data-worklog-jump="worklog-penalty">
|
||||
<button class="log-statistics-card is-link" type="button" title="点击查看扣分明细"
|
||||
data-worklog-penalty-open aria-haspopup="dialog" aria-controls="worklog-penalty-dialog">
|
||||
<span>{{ $worklogPenalty['start_date'] ?: '2026-11-04' }} 起扣分合计</span>
|
||||
<strong>{{ $worklogPenalty['total_points_formatted'] }}</strong>
|
||||
<span class="log-statistics-card__hint">点击查看扣分明细</span>
|
||||
</a>
|
||||
</button>
|
||||
@else
|
||||
<div class="log-statistics-card">
|
||||
<span>{{ $worklogPenalty['start_date'] ?: '2026-11-04' }} 起扣分合计</span>
|
||||
@ -514,16 +578,20 @@
|
||||
@endif
|
||||
|
||||
@if ($hasWorklogPenalty)
|
||||
<section id="worklog-penalty" class="log-statistics-panel" aria-label="日志漏写扣分统计" data-worklog-penalty>
|
||||
<div class="log-statistics-panel__head">
|
||||
<strong>日志漏写扣分统计</strong>
|
||||
<span>
|
||||
<dialog id="worklog-penalty-dialog" class="log-statistics-dialog" aria-labelledby="worklog-penalty-title"
|
||||
aria-modal="true" data-worklog-penalty>
|
||||
<div class="log-statistics-dialog__head">
|
||||
<div>
|
||||
<strong id="worklog-penalty-title">日志漏写扣分统计</strong>
|
||||
<span>
|
||||
@if ($worklogPenalty['start_date'])
|
||||
{{ $worklogPenalty['start_date'] }} 至 {{ $worklogPenalty['end_date'] }} · 合计 {{ $worklogPenalty['total_points_formatted'] }} 分
|
||||
@else
|
||||
暂无已截止统计日
|
||||
@endif
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" class="log-statistics-dialog__close" data-worklog-dialog-close>关闭</button>
|
||||
</div>
|
||||
@if ($worklogPenaltyError)
|
||||
<div class="log-statistics-empty">{{ $worklogPenaltyError }}</div>
|
||||
@ -553,26 +621,36 @@
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</section>
|
||||
</dialog>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var link = document.querySelector('[data-worklog-jump="worklog-penalty"]');
|
||||
var target = document.getElementById('worklog-penalty');
|
||||
if (!link || !target) { return; }
|
||||
var trigger = document.querySelector('[data-worklog-penalty-open]');
|
||||
var dialog = document.getElementById('worklog-penalty-dialog');
|
||||
if (!trigger || !dialog) { return; }
|
||||
|
||||
target.setAttribute('tabindex', '-1');
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
if (window.history && typeof window.history.replaceState === 'function') {
|
||||
window.history.replaceState(null, '', '#worklog-penalty');
|
||||
trigger.addEventListener('click', function () {
|
||||
if (dialog.open) { return; }
|
||||
if (typeof dialog.showModal === 'function') {
|
||||
dialog.showModal();
|
||||
} else {
|
||||
window.location.hash = 'worklog-penalty';
|
||||
dialog.setAttribute('open', '');
|
||||
}
|
||||
});
|
||||
dialog.querySelectorAll('[data-worklog-dialog-close]').forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
if (typeof dialog.close === 'function') {
|
||||
dialog.close();
|
||||
} else {
|
||||
dialog.removeAttribute('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
dialog.addEventListener('click', function (event) {
|
||||
if (event.target === dialog && typeof dialog.close === 'function') {
|
||||
dialog.close();
|
||||
}
|
||||
var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
target.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' });
|
||||
target.focus({ preventScroll: true });
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@ -179,7 +179,8 @@ class PagesTest extends FeatureTestCase
|
||||
->assertSeeText('点击查看提交人')
|
||||
->assertSeeText('点击查看日志明细')
|
||||
->assertDontSeeText('点击查看每日统计')
|
||||
->assertSee('data-worklog-jump="worklog-penalty"', false)
|
||||
->assertSee('data-worklog-penalty-open', false)
|
||||
->assertSee('id="worklog-penalty-dialog"', false)
|
||||
->assertSee('data-worklog-penalty', false)
|
||||
->assertSeeText('2026-11-04 起扣分合计')
|
||||
->assertSeeText('第 1 次漏写扣 10 分')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user