fix: 扣分明细改为弹窗展示

This commit is contained in:
renshen 2026-11-05 21:51:08 +08:00
parent 1ba637c983
commit faf1a79a29
2 changed files with 100 additions and 21 deletions

View File

@ -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>

View File

@ -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 分')