skeleton.md
组件 · COMPONENT

骨架屏 Skeleton

纸灰底块，一道微光 1.4 秒扫过。取代「LOADING…」文字。卡片不另写骨架——同一个组件传 loading，骨架与真实态共用同一段布局。

来源设计系统源码源components/v4/Skeleton.jsx源styles/v4/base.css机读components/skeleton.md
基础骨架块
import { Skel } from './components/v4/Skeleton.jsx'

export function Lines() {
  return (
    <div style={{ width: 420, maxWidth: '100%', display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Skel w="62%" h={14} />
      <Skel w="92%" h={11} />
      <Skel w="78%" h={11} />
    </div>
  )
}
属性取值默认说明
wnumber · string'100%'宽：数字为 px，也可写百分比
hnumber · string12高
rnumber8圆角（取圆角梯）
styleobject—并入，常用于 marginTop

卡片自带骨架

课程卡、系列卡、课节卡都接受 loading：在同一段 JSX 里把数据位换成 Skel。改真卡的内距或字号，骨架自动跟着变——能消失的分支比能写对的分支好。

CourseCard · SeriesCard · LessonCard
import { CourseCard } from './components/v4/CourseCard.jsx'
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'
import { LessonCard } from './screens/v4/course/LessonCard.jsx'

export function CardSkeletons() {
  return (
    <>
      <CourseCard loading />
      <SeriesCard loading />
      <LessonCard loading />
    </>
  )
}

铁律

✓ 要骨架与真实态同源（loading prop）
✗ 不要单独手写一份「看起来差不多」的骨架组件
✗ 不要用「加载中…」文字或转圈占位整块内容