feat: 겹친 담당자 아바타 스택을 최대 3개 + N 형태로 통일
가로로 겹쳐 표시되는 프로필 스택이 3개를 넘으면 마지막에 +N 으로 표기한다. - 업무 목록(ProjectDetailPage): 담당자 스택 3개 초과 시 +N - 내 업무(MyTasksPage): 미니 담당자 스택 3개 초과 시 +N(.mini-more 추가) - 프로젝트 멤버 스택(목록/헤더)은 이미 백엔드 AVATAR_LIMIT=3 으로 동일 처리됨 - 담당자 세로 목록(상세)·칩(지시 작성)은 겹침 스택이 아니라 제외 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -256,13 +256,17 @@ function loadMore() {
|
||||
>
|
||||
<span class="mini-stack">
|
||||
<span
|
||||
v-for="a in row.assignees"
|
||||
v-for="a in (row.assignees ?? []).slice(0, 3)"
|
||||
:key="a.id"
|
||||
class="mini-av"
|
||||
><UserAvatar
|
||||
:url="a.avatarUrl"
|
||||
:name="a.name"
|
||||
/></span>
|
||||
<span
|
||||
v-if="(row.assignees?.length ?? 0) > 3"
|
||||
class="mini-av mini-more"
|
||||
>+{{ (row.assignees?.length ?? 0) - 3 }}</span>
|
||||
</span>
|
||||
{{ row.metaText }}
|
||||
</span>
|
||||
@@ -271,13 +275,17 @@ function loadMore() {
|
||||
<span class="mi">
|
||||
<span class="mini-stack">
|
||||
<span
|
||||
v-for="a in row.assignees"
|
||||
v-for="a in (row.assignees ?? []).slice(0, 3)"
|
||||
:key="a.id"
|
||||
class="mini-av"
|
||||
><UserAvatar
|
||||
:url="a.avatarUrl"
|
||||
:name="a.name"
|
||||
/></span>
|
||||
<span
|
||||
v-if="(row.assignees?.length ?? 0) > 3"
|
||||
class="mini-av mini-more"
|
||||
>+{{ (row.assignees?.length ?? 0) - 3 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="meta-sep" />
|
||||
@@ -684,6 +692,11 @@ function loadMore() {
|
||||
.mini-stack .mini-av + .mini-av {
|
||||
margin-left: -0.3125rem;
|
||||
}
|
||||
/* 초과 인원 표기(+N) */
|
||||
.mini-av.mini-more {
|
||||
background: #eceef1;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.task-right {
|
||||
display: flex;
|
||||
|
||||
@@ -369,13 +369,17 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
|
||||
<span class="task-right">
|
||||
<span class="avstack">
|
||||
<span
|
||||
v-for="a in task.assignees"
|
||||
v-for="a in task.assignees.slice(0, 3)"
|
||||
:key="a.id"
|
||||
class="avatar"
|
||||
><UserAvatar
|
||||
:url="a.avatarUrl"
|
||||
:name="a.name"
|
||||
/></span>
|
||||
<span
|
||||
v-if="task.assignees.length > 3"
|
||||
class="avatar av-more"
|
||||
>+{{ task.assignees.length - 3 }}</span>
|
||||
</span>
|
||||
<span
|
||||
class="st-badge"
|
||||
|
||||
Reference in New Issue
Block a user