refactor: 设计系统完整提取为 @stack/design-system 共享包(组件/tokens/类型唯一定义处,双端引用不再拷贝)
- 组件参数化适配双端: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 全绿
This commit is contained in:
1 parent
c943a9e94d
commit
65df0ef1d7
40 files changed
+191
-736
No files matched your search
@@ -1,13 +1,15 @@
|
||||
/** 组合场景=大部分组件拿出来的真实使用,不做解释性标注:
|
||||
* 入口画像 → 课程卡与关系线 → 进度票券 → 指派块;形状散落于卡片附近空当。 */
|
||||
import { Page } from '../../lib/ui'
|
||||
import { ASSIGNMENT, CHAPTERS, EDGES } from '../../lib/chapters'
|
||||
import { MemphisCard } from '../../components/MemphisCard'
|
||||
import { RouteLine } from '../../components/RouteLine'
|
||||
import { AssignBlock, Ticket } from '../../components/Ticket'
|
||||
import { EntryGuide } from '../../components/EntryGuide'
|
||||
import { Scatter } from '../../components/Scatter'
|
||||
import { Cross, Ring, Tremble, Tri, Wave } from '../../components/shapes'
|
||||
import { ASSIGNMENT, CHAPTERS, EDGES, PROFILES } from '../../lib/chapters'
|
||||
import { useState } from 'react'
|
||||
import type { ChapterId } from '@stack/design-system'
|
||||
import { MemphisCard } from '@stack/design-system'
|
||||
import { RouteLine } from '@stack/design-system'
|
||||
import { AssignBlock, Ticket } from '@stack/design-system'
|
||||
import { EntryGuide } from '@stack/design-system'
|
||||
import { Scatter } from '@stack/design-system'
|
||||
import { Cross, Ring, Tremble, Tri, Wave } from '@stack/design-system'
|
||||
|
||||
/* 场景坐标(节点=卡描边真实边缘):卡1(40,110,250) 卡2(380,44,250,rot) 卡3(700,44,140) */
|
||||
const nodes = {
|
||||
@@ -17,13 +19,14 @@ const nodes = {
|
||||
} as const
|
||||
|
||||
export function App() {
|
||||
const [hovered, setHovered] = useState<ChapterId | null>(null)
|
||||
return (
|
||||
<Page
|
||||
tag="<Examples />"
|
||||
title="样例 · 组合场景"
|
||||
desc="大部分组件同台真实使用:入口画像 → 课程卡与关系线 → 进度票券 → 指派块;形状散落于卡片附近空当。"
|
||||
desc="大部分组件同台真实使用:入口画像 → 课程卡与关系线 → 进度票券 → 指派块;hover 卡片,线与站点跟随浮起;形状散落于卡片附近空当。"
|
||||
>
|
||||
<EntryGuide />
|
||||
<EntryGuide chapters={CHAPTERS} profiles={PROFILES} />
|
||||
<div className="relative mt-8 h-[600px] overflow-hidden rounded-2xl bg-paper">
|
||||
<Scatter
|
||||
shapes={[
|
||||
@@ -35,10 +38,28 @@ export function App() {
|
||||
<Tremble size={20} key="tremble" />,
|
||||
]}
|
||||
/>
|
||||
<RouteLine edges={EDGES} nodes={nodes} width={1160} height={600} />
|
||||
<div className="absolute left-[40px] top-[110px] w-[250px]"><MemphisCard chapter={CHAPTERS[1]} entry={1} /></div>
|
||||
<div className="absolute left-[380px] top-[44px] w-[250px] -rotate-1"><MemphisCard chapter={CHAPTERS[2]} entry={2} /></div>
|
||||
<div className="absolute left-[700px] top-[44px] w-[140px]"><MemphisCard chapter={CHAPTERS[5]} compact /></div>
|
||||
<RouteLine edges={EDGES} nodes={nodes} width={1160} height={600} hovered={hovered} />
|
||||
<div
|
||||
className="absolute left-[40px] top-[110px] w-[250px]"
|
||||
onMouseEnter={() => setHovered(1)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
>
|
||||
<MemphisCard chapter={CHAPTERS[1]} entry={1} />
|
||||
</div>
|
||||
<div
|
||||
className="absolute left-[380px] top-[44px] w-[250px] -rotate-1"
|
||||
onMouseEnter={() => setHovered(2)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
>
|
||||
<MemphisCard chapter={CHAPTERS[2]} entry={2} />
|
||||
</div>
|
||||
<div
|
||||
className="absolute left-[700px] top-[44px] w-[140px]"
|
||||
onMouseEnter={() => setHovered(5)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
>
|
||||
<MemphisCard chapter={CHAPTERS[5]} compact />
|
||||
</div>
|
||||
<div className="absolute left-[860px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
|
||||
<div className="absolute left-[60px] top-[440px] flex gap-4">
|
||||
<Ticket chapter={CHAPTERS[2]} done />
|
||||
|
||||
Reference in new issue
Block a user