series-card.md
组件 · COMPONENT

系列卡 SeriesCard

课程总览里的一个系列：头图、名称、两行简介、节数与总时长，再加一排每课一格的进度方块——完成的格子是朱色打勾。

来源设计系统源码源screens/v4/course/SeriesCard.jsx机读components/series-card.md
完成 3 / 6总时长由各课 duration_minutes 求和
笔记系统
从收集到输出的流水线：卡片盒方法论、标签与检索、从收集到内化、让笔记长成文章。
6 节课总时长 1 小时 24 分
✓✓✓
已完成 3/6
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'

export function Progress() {
  return (
    <div style={{ width: 300 }}>
      <SeriesCard cat={CAT} hist={HIST} />
    </div>
  )
}
选中态朱色 1px 描边 + 1px 外环
笔记系统
从收集到输出的流水线：卡片盒方法论、标签与检索、从收集到内化、让笔记长成文章。
6 节课总时长 1 小时 24 分
✓✓✓
已完成 3/6
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'

export function Selected() {
  return (
    <div style={{ width: 300 }}>
      <SeriesCard cat={CAT} hist={HIST} selected />
    </div>
  )
}
骨架态热力格下方「已完成 N/M」行也有等高占位，数据到达时不跳
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'

export function Loading() {
  return (
    <div style={{ width: 300 }}>
      <SeriesCard loading />
    </div>
  )
}

属性

属性取值默认说明
cat{ name, sub, cover?, ls: 课节数组[] }—系列数据；头图优先 cover，再回退首个有封面的课节，再回退线稿
hist{ doneIds: Set }—完成的课节 ID 集合
selectedbooleanfalse选中描边
onClick() => void—整卡点击
loadingbooleanfalse骨架态