refactor(V0.2): 看板 ⋯ 沉到左下角; 列表负责人右下角, 去掉状态文字
Docker Build and Push / build-image (push) Successful in 59s
Docker Build and Push / build-image (push) Successful in 59s
- 看板卡片左列改为上下撑满: 状态点在上, ⋯ 落到卡片左下角 - 列表行右列改为上下撑满: ⋯ 在右上, 负责人落到右下角 - 列表行第二行不再显示未开始/执行中/完成小字, 只留状态点与成员
This commit is contained in:
@@ -50,21 +50,20 @@ export default function TaskRow({
|
|||||||
<div className="task-title">{task.title}</div>
|
<div className="task-title">{task.title}</div>
|
||||||
<div className="task-meta">
|
<div className="task-meta">
|
||||||
<StatusDot status={task.status} />
|
<StatusDot status={task.status} />
|
||||||
<span>{statusLabel(task.status)}</span>
|
|
||||||
{task.members?.length > 0 && (
|
{task.members?.length > 0 && (
|
||||||
<span className="members">+ {task.members.map((m) => m.name).join('、')}</span>
|
<span className="members">+ {task.members.map((m) => m.name).join('、')}</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="task-right">
|
<div className="task-right">
|
||||||
<span className={`assignee${task.assignee ? '' : ' none'}`}>
|
|
||||||
{task.assignee?.name || '未指派'}
|
|
||||||
</span>
|
|
||||||
<span
|
<span
|
||||||
className="more"
|
className="more"
|
||||||
onClick={(e) => { e.stopPropagation(); onMore?.(task) }}
|
onClick={(e) => { e.stopPropagation(); onMore?.(task) }}
|
||||||
onPointerDown={(e) => e.stopPropagation()}
|
onPointerDown={(e) => e.stopPropagation()}
|
||||||
>⋯</span>
|
>⋯</span>
|
||||||
|
<span className={`assignee${task.assignee ? '' : ' none'}`}>
|
||||||
|
{task.assignee?.name || '未指派'}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1002,7 +1002,10 @@ body.me-safe-top .app-safe-top { height: 0; }
|
|||||||
.task-meta .assignee { font-size: 12px; font-weight: 600; color: var(--color-text); }
|
.task-meta .assignee { font-size: 12px; font-weight: 600; color: var(--color-text); }
|
||||||
.task-meta .assignee.none { color: #b8bcc4; font-weight: 400; }
|
.task-meta .assignee.none { color: #b8bcc4; font-weight: 400; }
|
||||||
.task-meta .members { font-size: 10.5px; color: #a7adb6; }
|
.task-meta .members { font-size: 10.5px; color: #a7adb6; }
|
||||||
.task-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
.task-right {
|
||||||
|
display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
|
||||||
|
align-self: stretch; flex-shrink: 0;
|
||||||
|
}
|
||||||
.task-right .assignee { font-size: 12px; font-weight: 600; color: var(--color-text); }
|
.task-right .assignee { font-size: 12px; font-weight: 600; color: var(--color-text); }
|
||||||
.task-right .assignee.none { color: #b8bcc4; font-weight: 400; }
|
.task-right .assignee.none { color: #b8bcc4; font-weight: 400; }
|
||||||
.more { color: #c2c7cf; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
|
.more { color: #c2c7cf; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
|
||||||
@@ -1049,8 +1052,11 @@ body.me-safe-top .app-safe-top { height: 0; }
|
|||||||
box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; flex-shrink: 0;
|
box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; flex-shrink: 0;
|
||||||
display: flex; gap: 7px; align-items: flex-start;
|
display: flex; gap: 7px; align-items: flex-start;
|
||||||
}
|
}
|
||||||
/* 左侧竖排操作列: 状态点 + ⋯ */
|
/* 左侧竖排操作列: 状态点在上, ⋯ 沉到左下角 */
|
||||||
.bcard-left { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; padding-top: 1px; }
|
.bcard-left {
|
||||||
|
display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
|
||||||
|
align-self: stretch; justify-content: space-between; padding: 1px 0 2px;
|
||||||
|
}
|
||||||
.bcard-body { flex: 1; min-width: 0; }
|
.bcard-body { flex: 1; min-width: 0; }
|
||||||
.bcard.hl { outline: 2px solid var(--color-primary); outline-offset: 1px; }
|
.bcard.hl { outline: 2px solid var(--color-primary); outline-offset: 1px; }
|
||||||
.brow1 { display: flex; align-items: flex-start; gap: 6px; }
|
.brow1 { display: flex; align-items: flex-start; gap: 6px; }
|
||||||
|
|||||||
Reference in New Issue
Block a user