Kanban/src/components/TaskCard.vue

<script setup lang="ts">
import { computed } from 'vue'

import { PRIORITY_LABELS, type MoveDirection, type Task } from '@/types/task'
import { formatCompactDate, formatDateTime, formatDueDateForTask, isOverdue } from '@/utils/date'

const MAX_VISIBLE_TAGS = 3

const props = defineProps<{
  task: Task
  /** 多选模式：卡片改为可勾选，点击是「选中」而不是「打开详情」 */
  selectable?: boolean
  selected?: boolean
}>()

const emit = defineEmits<{
  toggle: [id: string]
  open: [id: string]
  keymove: [payload: { id: string; direction: MoveDirection }]
  select: [id: string]
}>()

/** 方向键映射；左右换列，上下调顺序 */
const MOVE_KEYS: Readonly<Record<string, MoveDirection>> = {
  ArrowLeft: 'left',
  ArrowRight: 'right',
  ArrowUp: 'up',
  ArrowDown: 'down',
}

/** 多选态下点击/回车都是「切换选中」；平时是「打开详情」 */
function activate(): void {
  if (props.selectable) {
    emit('select', props.task.id)
    return
  }
  emit('open', props.task.id)
}

/**
 * 卡片获得焦点后的键盘操作。
 * 注意：方向键必须 preventDefault，否则会连带滚动整个看板。
 */
function onKeydown(event: KeyboardEvent): void {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault()
    activate()
    return
  }

  // 多选态不做方向键移动：此时拖拽与排序都已停用，避免误操作打乱顺序
  if (props.selectable) return

  const direction = MOVE_KEYS[event.key]
  if (!direction) return

  event.preventDefault()
  emit('keymove', { id: props.task.id, direction })
}

const isDone = computed(() => props.task.status === 'done')
const overdue = computed(() => isOverdue(props.task.dueDate, props.task.status))

/**
 * 截止日期文案：已完成的任务以「完成日」为基准，未完成的以「今天」为基准。
 * 这样 19 号截止、19 号完成的任务第二天不会再被说成「逾期 1 天」。
 */
const dueLabel = computed(() =>
  props.task.dueDate
    ? formatDueDateForTask(props.task.dueDate, props.task.status, props.task.completedAt)
    : null,
)
const visibleTags = computed(() => props.task.tags.slice(0, MAX_VISIBLE_TAGS))
const hiddenTagCount = computed(() => Math.max(0, props.task.tags.length - MAX_VISIBLE_TAGS))

/**
 * 完成时间：已完成卡片上显示一行短日期，精确到分钟的时间留给 `title` 与详情抽屉。
 * 未完成时 completedAt 为 null，这一行整体不渲染，避免给待办卡片增加噪音。
 */
const completedAtFull = computed(() => formatDateTime(props.task.completedAt))
const completedAtShort = computed(() => formatCompactDate(props.task.completedAt))

/** 悬停卡片即可看到完整时间，不必先打开详情抽屉 */
const timeTitle = computed(() => {
  const lines = [`创建于 ${formatDateTime(props.task.createdAt) ?? '—'}`]
  if (completedAtFull.value) lines.push(`完成于 ${completedAtFull.value}`)
  if (props.task.archivedAt) lines.push(`归档于 ${formatDateTime(props.task.archivedAt) ?? '—'}`)
  return lines.join('\n')
})

/**
 * 卡片外观。选中态与「已完成」都要覆盖边框/背景，
 * 因此这些颜色放在条件分支里，而不是和基础类各写一份靠优先级取胜。
 */
const cardClass = computed(() => {
  if (props.selected) {
    return 'border-sky-400 bg-sky-50 dark:border-sky-600 dark:bg-sky-950/40'
  }
  return isDone.value
    ? 'border-slate-200 bg-white opacity-60 dark:border-zinc-800 dark:bg-zinc-900'
    : 'border-slate-200 bg-white hover:-translate-y-px hover:border-slate-300 hover:shadow-card-hover dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/25'
})

/**
 * 优先级用左侧色条表达，而不是一枚彩色胶囊。
 * 色条几乎不占空间，扫视一列卡片时却比文字更快分辨出轻重。
 */
const priorityBarClass = computed(() => {
  switch (props.task.priority) {
    case 3:
      return 'bg-rose-400'
    case 2:
      return 'bg-amber-400'
    default:
      return 'bg-slate-300 dark:bg-zinc-600'
  }
})

const priorityTextClass = computed(() => {
  switch (props.task.priority) {
    case 3:
      return 'text-rose-600 dark:text-rose-400'
    case 2:
      return 'text-amber-700 dark:text-amber-400'
    default:
      return 'text-slate-400 dark:text-zinc-500'
  }
})
</script>

<template>
  <article
    class="relative shrink-0 cursor-pointer overflow-hidden rounded-lg border shadow-card transition duration-200 ease-out"
    :class="cardClass"
    :data-task-id="task.id"
    :role="selectable ? 'checkbox' : undefined"
    :aria-checked="selectable ? selected === true : undefined"
    :aria-label="selectable ? `选择任务「${task.title}」` : undefined"
    :title="timeTitle"
    tabindex="0"
    @click="activate"
    @keydown="onKeydown"
  >
    <span class="absolute inset-y-0 left-0 w-[3px]" :class="priorityBarClass" aria-hidden="true" />

    <div class="relative py-2 pr-2.5 pl-3.5">
      <div class="flex items-start gap-2">
        <!--
          多选态下用一枚纯装饰的勾选框：真正的可交互元素是整张卡片，
          这样读屏与键盘只有「一个」可聚焦控件，不会出现嵌套按钮。
        -->
        <span
          v-if="selectable"
          class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border transition"
          :class="
            selected
              ? 'border-sky-500 bg-sky-500 text-white'
              : 'border-slate-300 bg-white dark:border-zinc-600 dark:bg-zinc-800'
          "
          aria-hidden="true"
        >
          <svg v-if="selected" viewBox="0 0 12 12" class="size-2.5" fill="none">
            <path
              d="m2.5 6.2 2.2 2.2 4.8-4.8"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </span>

        <button
          v-else
          type="button"
          class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition"
          :class="
            isDone
              ? 'border-emerald-500 bg-emerald-500 text-white'
              : 'border-slate-300 hover:border-emerald-500 hover:bg-emerald-50 dark:border-zinc-600 dark:hover:border-emerald-500 dark:hover:bg-emerald-950'
          "
          :aria-label="isDone ? '标记为未完成' : '标记为已完成'"
          :aria-pressed="isDone"
          @click.stop="emit('toggle', task.id)"
        >
          <svg v-if="isDone" viewBox="0 0 12 12" class="size-2.5" fill="none" aria-hidden="true">
            <path
              d="m2.5 6.2 2.2 2.2 4.8-4.8"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>

        <h3
          class="min-w-0 flex-1 text-sm leading-snug wrap-break-word"
          :class="
            isDone
              ? 'text-slate-400 line-through dark:text-zinc-500'
              : 'text-slate-800 dark:text-zinc-100'
          "
        >
          {{ task.title }}
        </h3>
      </div>

      <div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 pl-6 text-xs">
        <span class="font-medium" :class="priorityTextClass">
          {{ PRIORITY_LABELS[task.priority] }}
        </span>

        <span
          v-if="dueLabel"
          :class="
            overdue
              ? 'font-medium text-rose-600 dark:text-rose-400'
              : 'text-slate-500 dark:text-zinc-400'
          "
        >
          {{ dueLabel }}
        </span>

        <span v-for="tag in visibleTags" :key="tag" class="text-slate-400 dark:text-zinc-500">
          #{{ tag }}
        </span>
        <span v-if="hiddenTagCount > 0" class="text-slate-400 dark:text-zinc-500">
          +{{ hiddenTagCount }}
        </span>

        <span
          v-if="completedAtShort"
          data-role="completed-at"
          :title="`完成于 ${completedAtFull}`"
          class="ml-auto text-emerald-700/80 dark:text-emerald-400/80"
        >
          完成于 {{ completedAtShort }}
        </span>
      </div>
    </div>
  </article>
</template>