fix(incident): a11y AI proposal button, move spin keyframe to globals, fix deps

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OG T
2026-04-01 20:03:09 +08:00
parent 823e2b95a3
commit edc3707032
2 changed files with 12 additions and 8 deletions

View File

@@ -279,3 +279,8 @@
display: none;
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

View File

@@ -140,8 +140,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
setButtonState('error')
setErrorMessage(error instanceof Error ? error.message : String(error))
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken])
}, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken, t])
// ── handleReject移植自 DualStateIncidentCard Phase 6.5)────────────────
const handleReject = useCallback(async () => {
@@ -173,8 +172,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
setButtonState('error')
setErrorMessage(error instanceof Error ? error.message : String(error))
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken])
}, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken, t])
// ── 授權按鈕渲染 ───────────────────────────────────────────────────────────
const renderApproveButtons = () => {
@@ -318,7 +316,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
{/* AI 提案行(可展開)*/}
{decisionAction && (
<>
<div
<button
onClick={() => setAiExpanded(v => !v)}
style={{
margin: '0 10px 6px',
@@ -333,12 +331,15 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
gap: 5,
fontSize: 9,
color: '#87867f',
width: '100%',
textAlign: 'left' as const,
fontFamily: 'inherit',
}}
>
<span style={{ color: '#d97757' }}></span>
<span>AI : {decisionAction.slice(0, 50)}{decisionAction.length > 50 ? '...' : ''}</span>
<span style={{ marginLeft: 'auto' }}>{aiExpanded ? '▲' : '▼'}</span>
</div>
</button>
{aiExpanded && (
<div style={{
margin: '0 10px 6px',
@@ -373,8 +374,6 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
</div>
)}
{/* spin keyframe */}
<style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
</div>
)
}