refactor: 移除样例页（tutorial design-examples / design-lab shelf）——组件页已含 RouteLine 演示，样例使命完成；导航/目录/视觉基线/散落契约同步清理，25/25 绿（Scatter 组件保留在包中）

apps/design-lab/e2e/pages.spec.ts

@@ -184,44 +184,6 @@ test.describe('RouteLine 规格契约', () => {
   })
 })
 
-test.describe('散落形状摆放契约', () => {
-  test.beforeEach(async ({ page }) => await page.goto('/shelf.html'))
-
-  test('卡片附近空当＋随机：不压卡、都在卡附近、不出容器、旋转各异', async ({ page }) => {
-    const r = await page.evaluate(() => {
-      const layer = document.querySelector('[data-scatter-layer]') as HTMLElement | null
-      if (!layer) return null
-      const host = layer.parentElement as HTMLElement
-      const hb = host.getBoundingClientRect()
-      const shapes = [...layer.querySelectorAll('[data-scatter]')] as HTMLElement[]
-      const comps = [...host.querySelectorAll('[data-comp]')].map((el) => el.getBoundingClientRect())
-      const hit = (a: DOMRect, b: DOMRect) => a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
-      return {
-        n: shapes.length,
-        inHost: shapes.every((s) => {
-          const r = s.getBoundingClientRect()
-          return r.left >= hb.left - 1 && r.right <= hb.right + 1 && r.top >= hb.top - 1 && r.bottom <= hb.bottom + 1
-        }),
-        onComp: shapes.filter((s) => comps.some((c) => hit(s.getBoundingClientRect(), c))).length,
-        nearAll: shapes.every((s) => {
-          const r = s.getBoundingClientRect()
-          const cx = (r.left + r.right) / 2
-          const cy = (r.top + r.bottom) / 2
-          return comps.some((c) => cx >= c.left - 200 && cx <= c.right + 200 && cy >= c.top - 200 && cy <= c.bottom + 200)
-        }),
-        transforms: shapes.map((s) => s.style.transform),
-      }
-    })
-    expect(r).not.toBeNull()
-    expect(r!.n).toBeGreaterThanOrEqual(5)
-    expect(r!.inHost).toBeTruthy() // 不出场景容器
-    expect(r!.onComp).toBe(0) // 空当＝不压任何内容盒
-    expect(r!.nearAll).toBeTruthy() // 只散在卡片附近，不胡乱撒
-    expect(new Set(r!.transforms).size).toBe(r!.n) // 落点/旋转各不相同
-    r!.transforms.forEach((t) => expect(t).toMatch(/^translate\(-50%, -50%\) rotate\(-?\d+deg\)$/))
-  })
-})
-
 test.describe('价值区荧光标记契约', () => {
   test.beforeEach(async ({ page }) => await page.goto('/symbols.html'))
 

apps/design-lab/e2e/visual.spec.ts

@@ -9,7 +9,6 @@ const CASES: [name: string, path: string][] = [
   ['colors', '/colors.html'],
   ['symbols', '/symbols.html'],
   ['components', '/components.html'],
-  ['shelf', '/shelf.html'],
 ]
 
 for (const [name, path] of CASES) {

apps/design-lab/shelf.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>design-lab · shelf</title>
-  </head>
-  <body class="bg-paper text-ink">
-    <div id="root"></div>
-    <script type="module" src="/src/pages/shelf/main.tsx"></script>
-  </body>
-</html>

apps/design-lab/src/pages/index/App.tsx

@@ -2,7 +2,6 @@ const PAGES = [
   { href: '/colors.html', name: '01 颜色', desc: '撞色对 · 中性阶 · 章节色 · 反例' },
   { href: '/symbols.html', name: '02 符号形状', desc: '语义形状 · 词汇表 · 线形 · 票券' },
   { href: '/components.html', name: '03 组件', desc: 'CourseCard · RouteLine · 票券 · 指派块 · 入口' },
-  { href: '/shelf.html', name: '04 样例', desc: '组合场景——实现验收对照图' },
 ]
 
 export function App() {

apps/design-lab/src/pages/shelf/App.tsx

@@ -1,47 +0,0 @@
-/** 组合场景＝大部分组件拿出来的真实使用，不做解释性标注：
- * 入口画像 → 课程卡与关系线 → 进度票券 → 指派块；形状散落于卡片附近空当。 */
-import { Page } 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 { Scatter } from '@stack/design-system'
-import { Cross, Ring, Tremble, Tri, Wave } from '@stack/design-system'
-
-export function App() {
-  return (
-    <Page
-      tag="<Examples />"
-      title="样例 · 组合场景"
-      desc="大部分组件同台真实使用：入口画像 → 课程卡与关系线 → 进度票券 → 指派块；形状散落于卡片附近空当。"
-    >
-      <EntryGuide chapters={CHAPTERS} profiles={PROFILES} />
-      <div className="relative mt-8 h-[600px] overflow-hidden rounded-2xl bg-paper">
-        <Scatter
-          shapes={[
-            <Tri size={26} key="tri" />,
-            <Ring size={22} key="ring" />,
-            <Cross size={20} key="cross1" />,
-            <Cross size={18} key="cross2" />,
-            <Wave size={44} key="wave" />,
-            <Tremble size={20} key="tremble" />,
-          ]}
-        />
-        <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>
-        <div className="absolute left-[820px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
-        <div className="absolute left-[60px] top-[440px] flex gap-4">
-          <Ticket chapter={CHAPTERS[2]} done />
-          <Ticket chapter={CHAPTERS[5]} done={false} />
-        </div>
-      </div>
-    </Page>
-  )
-}

apps/design-lab/src/pages/shelf/main.tsx

@@ -1,5 +0,0 @@
-import '@stack/design-system/styles/tokens.css'
-import { createRoot } from 'react-dom/client'
-import { App } from './App'
-
-createRoot(document.getElementById('root')!).render(<App />)

apps/tutorial/design-examples.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>设计系统 · 样例 · 组合场景</title>
-  </head>
-  <body class="bg-paper text-ink">
-    <div id="root"></div>
-    <script type="module" src="/src/pages/design-examples/main.tsx"></script>
-  </body>
-</html>

apps/tutorial/src/lib/ui.tsx

@@ -7,14 +7,13 @@ import type { ChapterId } from '@stack/design-system'
 import { CHAPTERS } from './chapters'
 
 /** 设计系统四册（自 design-lab 迁入） */
-export type DesignKey = 'design-colors' | 'design-typography' | 'design-symbols' | 'design-components' | 'design-examples'
+export type DesignKey = 'design-colors' | 'design-typography' | 'design-symbols' | 'design-components'
 
 const DESIGN: { href: string; label: string; key: DesignKey }[] = [
   { href: '/design-colors.html', label: '颜色', key: 'design-colors' },
   { href: '/design-typography.html', label: '字体', key: 'design-typography' },
   { href: '/design-symbols.html', label: '符号形状', key: 'design-symbols' },
   { href: '/design-components.html', label: '组件', key: 'design-components' },
-  { href: '/design-examples.html', label: '样例', key: 'design-examples' },
 ]
 
 const NAV: { href: string; label: string; id?: ChapterId }[] = [

apps/tutorial/src/pages/design-examples/App.tsx

@@ -1,34 +0,0 @@
-/** 组合场景＝大部分组件拿出来的真实使用，不做解释性标注：
- * 入口画像 → 课程卡与关系线 → 进度票券 → 指派块；形状散落于卡片附近空当。 */
-import { Page } from '../../lib/ui'
-import { ASSIGNMENT, CHAPTERS, PROFILES } from '../../lib/chapters'
-import { AssignBlock, EntryGuide, MemphisCard, Scatter, Ticket } from '@stack/design-system'
-import { Cross, Ring, Tremble, Tri, Wave } from '@stack/design-system'
-
-export function App() {
-  return (
-    <Page active="design-examples" title="样例 · 组合场景" desc="大部分组件同台真实使用：入口画像 → 课程卡与关系线 → 进度票券 → 指派块；形状散落于卡片附近空当。">
-      <EntryGuide chapters={CHAPTERS} profiles={PROFILES} />
-      <div className="relative mt-8 h-[600px] overflow-hidden rounded-2xl bg-paper">
-        <Scatter
-          shapes={[
-            <Tri size={26} key="tri" />,
-            <Ring size={22} key="ring" />,
-            <Cross size={20} key="cross1" />,
-            <Cross size={18} key="cross2" />,
-            <Wave size={44} key="wave" />,
-            <Tremble size={20} key="tremble" />,
-          ]}
-        />
-        <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>
-        <div className="absolute left-[820px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
-        <div className="absolute left-[60px] top-[440px] flex gap-4">
-          <Ticket chapter={CHAPTERS[2]} done />
-          <Ticket chapter={CHAPTERS[5]} done={false} />
-        </div>
-      </div>
-    </Page>
-  )
-}

apps/tutorial/src/pages/design-examples/main.tsx

@@ -1,4 +0,0 @@
-import { createRoot } from 'react-dom/client'
-import { App } from './App'
-
-createRoot(document.getElementById('root')!).render(<App />)