refactor: 组件页去 RouteLine 实际使用场景——线形规格归 02 符号形状,卡片组合归 04 样例;页面聚焦卡片/票券/指派块/入口画像
This commit is contained in:
1 parent
dd50a10c62
commit
c853d3c344
2 files changed
+5
-17
No files matched your search
Binary file not shown.
|
Before Width: | Height: | Size: 177 KiB After Width: | Height: | Size: 143 KiB |
@@ -1,20 +1,16 @@
|
||||
import { Page, Section } from '../../lib/ui'
|
||||
import { ASSIGNMENT, CHAPTERS } from '../../lib/chapters'
|
||||
import { MemphisCard } from '../../components/MemphisCard'
|
||||
import { RouteLine } from '../../components/RouteLine'
|
||||
import { AssignBlock, Ticket } from '../../components/Ticket'
|
||||
import { EntryGuide } from '../../components/EntryGuide'
|
||||
|
||||
/* 节点=卡描边真实边缘:卡1(40,72,250) 卡2(380,0,250) 卡3(700,0,150) */
|
||||
const nodes = {
|
||||
1: { id: 1, borderLeft: 40, right: 290, y: 180 },
|
||||
2: { id: 2, borderLeft: 380, right: 630, y: 108 },
|
||||
5: { id: 5, borderLeft: 700, right: 850, y: 108 },
|
||||
} as const
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<Page tag="<Components />" title="组件 · 入口载体与关系" desc="CourseCard(入口)· RouteLine(关系)· 票券(状态)· 指派块+脱靶标记(任务与警示)· 入口画像。">
|
||||
<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>
|
||||
@@ -22,14 +18,6 @@ export function App() {
|
||||
<div className="w-[160px]"><MemphisCard chapter={CHAPTERS[5]} compact /></div>
|
||||
</div>
|
||||
</Section>
|
||||
<Section label="RouteLine" note="实=先后 虚=相关 点=同族;站点半嵌(左贴描边、右骑黑影外缘)">
|
||||
<div className="relative h-[240px] rounded-2xl border-2 border-dashed border-[#cfcfcd] bg-[#fbfbfa] p-0">
|
||||
<RouteLine edges={[{ from: 1, to: 2, kind: 'seq' }, { from: 2, to: 5, kind: 'seq' }, { from: 2, to: 5, kind: 'family' }]} nodes={nodes} width={880} height={240} />
|
||||
<div className="absolute left-[40px] top-[72px] w-[250px]"><MemphisCard chapter={CHAPTERS[1]} /></div>
|
||||
<div className="absolute left-[380px] top-0 w-[250px]"><MemphisCard chapter={CHAPTERS[2]} /></div>
|
||||
<div className="absolute left-[700px] top-0 w-[150px]"><MemphisCard chapter={CHAPTERS[5]} compact /></div>
|
||||
</div>
|
||||
</Section>
|
||||
<Section label="票券 & 指派学习块" note="票=完成状态;块=位置/预期/场景+脱靶标记">
|
||||
<div className="flex flex-wrap items-start gap-8">
|
||||
<Ticket chapter={CHAPTERS[1]} done />
|
||||
|
||||
Reference in new issue
Block a user