组件 · 任务
TaskRow
列表视图里的一行任务,配合 TaskList 容器使用。
调用方提供:title、id(如 #42)、done、priority(1–5)、selected、labels: [{ name, tone }]、due 与 dueTone(today | overdue)、assignees: [{ initial, tone, name }],以及可选的元信息 timer、checklist(如 2/4)、repeat(如「每周」)、reminder、comments、attachments。
布局:左边是勾选框;中间是标题、编号和元信息图标;右边依次是标签、优先级(3 及以上)、截止日期、指派人。窄于约 600px 时右侧整组换到第二行。
三种风格下的差异
- 青藤:整组放在一个带细边框的圆角容器里,行之间用细分隔线,行高 46。
- 萌虎:每一行都是一张独立的贴纸卡片,墨线加硬阴影,行间距 10px,行高 58;今天到期和逾期用胶囊标出。
- 像素:通栏、直角,行高 32;选中行左侧有 3px 品牌色条。
规则:标题单行省略,悬停或聚焦时显示全文;完成的任务标题加删除线并换成 text-muted;逾期必须写出「逾期 N 天」,不能只靠红色。