feat(ux): 交互元素悬浮/聚焦/按压状态增强
表格行悬浮高亮、StyleSelector 药丸按钮键盘焦点环。
This commit is contained in:
@@ -50,6 +50,11 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pill:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
/* compact 模式 */
|
/* compact 模式 */
|
||||||
.compact .category {
|
.compact .category {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ export default function ProjectPage() {
|
|||||||
{tasks.map(task => {
|
{tasks.map(task => {
|
||||||
const statusInfo = STATUS_LABELS[task.status] ?? STATUS_LABELS.pending
|
const statusInfo = STATUS_LABELS[task.status] ?? STATUS_LABELS.pending
|
||||||
return (
|
return (
|
||||||
<tr key={task.id} style={{ borderBottom: '1px solid var(--border)' }}>
|
<tr key={task.id} className="table-row-hover" style={{ borderBottom: '1px solid var(--border)' }}>
|
||||||
<td style={tdStyle}>{task.prompt}</td>
|
<td style={tdStyle}>{task.prompt}</td>
|
||||||
<td style={tdStyle}>{task.assetType}</td>
|
<td style={tdStyle}>{task.assetType}</td>
|
||||||
<td style={{ ...tdStyle, color: statusInfo.color }}>{statusInfo.label}</td>
|
<td style={{ ...tdStyle, color: statusInfo.color }}>{statusInfo.label}</td>
|
||||||
|
|||||||
Reference in New Issue
Block a user