cqh963852
65df0ef1d7
- 组件参数化适配双端：MemphisCard href/morph，EntryGuide 数据注入+linkChapter - RouteLine hover 跟随（站点 translateY(-3)、连线 CSS d 平滑插值、直线变斜线）随包回到 design-lab，shelf 场景接线演示 - tokens.css 显式 @source 包内源码——经 node_modules 解析时自动扫描漏类（text-mute 等静默丢失致 4% 画面偏差，已修复并验证） - E2E 新增 hover 跟随契约（静置 L 水平、hover 变斜线、双站点 -3px、卡片同步），28/28 全绿
41 lines
1.9 KiB
TypeScript
41 lines
1.9 KiB
TypeScript
import { Page, Section } from '../../lib/ui'
|
||
import { ASSIGNMENT, CHAPTERS, PROFILES } from '../../lib/chapters'
|
||
import { MemphisCard } from '@stack/design-system'
|
||
import { AssignBlock, Ticket } from '@stack/design-system'
|
||
import { EntryGuide } from '@stack/design-system'
|
||
import { Mark } from '@stack/design-system'
|
||
|
||
export function App() {
|
||
return (
|
||
<Page
|
||
tag="<Components />"
|
||
title="组件 · 入口载体与状态"
|
||
desc="CourseCard（入口）· 票券（状态）· 指派块＋脱靶标记（任务与警示）· 入口画像。线条的形式规格见 02 符号形状，与卡片的实际组合见 04 样例。"
|
||
>
|
||
<Section label="CourseCard" note="卡头三件套＝靶子；hover 拿起播放 GIF，8000ms 翻转；末张＝价值区标记用法">
|
||
<div className="flex flex-wrap items-start gap-8">
|
||
<div className="w-[280px]"><MemphisCard chapter={CHAPTERS[1]} entry={1} /></div>
|
||
<div className="w-[280px]"><MemphisCard chapter={CHAPTERS[2]} entry={2} /></div>
|
||
<div className="w-[160px]"><MemphisCard chapter={CHAPTERS[5]} compact /></div>
|
||
<div className="w-[280px]">
|
||
<MemphisCard
|
||
chapter={CHAPTERS[4]}
|
||
zoneText={<>这一步过程就地写清：<Mark>环境与依赖如何咬合</Mark></>}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
<Section label="票券 ＆ 指派学习块" note="票=完成状态；块=位置/预期/场景＋脱靶标记">
|
||
<div className="flex flex-wrap items-start gap-8">
|
||
<Ticket chapter={CHAPTERS[1]} done />
|
||
<Ticket chapter={CHAPTERS[5]} done={false} />
|
||
<AssignBlock {...ASSIGNMENT} />
|
||
</div>
|
||
</Section>
|
||
<Section label="入口梳理" note="推荐不是强制——无锁">
|
||
<EntryGuide chapters={CHAPTERS} profiles={PROFILES} />
|
||
</Section>
|
||
</Page>
|
||
)
|
||
}
|