feat: 价值区符号改荧光笔标记文字——Mark 组件（mustard 骑字背、微斜、无描边），Bar 撤出散落与规格；E2E 加标记契约（底色/无描边/微斜）

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

@@ -184,6 +184,25 @@ test.describe('散落形状摆放契约', () => {
   })
 })
 
+test.describe('价值区荧光标记契约', () => {
+  test.beforeEach(async ({ page }) => await page.goto('/symbols.html'))
+
+  test('荧光笔标记文字：mustard 底、无描边、微斜——是标记不是形状', async ({ page }) => {
+    const s = await page.evaluate(() => {
+      const m = document.querySelector('mark')
+      if (!m) return null
+      const cs = getComputedStyle(m)
+      const r = m.getBoundingClientRect()
+      return { bg: cs.backgroundColor, bw: cs.borderTopWidth, rot: cs.rotate, h: r.height }
+    })
+    expect(s).not.toBeNull()
+    expect(s!.bg).toBe('rgb(255, 217, 61)') // clash2a mustard——荧光笔
+    expect(s!.bw).toBe('0px') // 标记无描边：2px ink 是形状的规则，标记划在文字上
+    expect(s!.rot).toContain('deg') // 微斜（rotate 属性生效，手划手感）
+    expect(s!.h).toBeGreaterThan(14) // 骑在文字上，有字高
+  })
+})
+
 test.describe('票券规格契约', () => {
   test.beforeEach(async ({ page }) => await page.goto('/symbols.html'))
 

apps/design-lab/src/components/shapes.tsx

@@ -1,5 +1,5 @@
 /** 七个语义形状——装饰即语义（取自 ai-era-tutorial 词汇表） */
-import type { CSSProperties } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 
 interface ShapeProps {
   size?: number
@@ -36,11 +36,14 @@ export const Wave = ({ size = 40, className, style }: ShapeProps) => (
   </svg>
 )
 
-/** ▬ 价值区：实心条，过程就地写清 */
-export const Bar = ({ size = 34, className, style }: ShapeProps) => (
-  <svg width={size} height={size * 0.58} viewBox="0 0 34 20" className={className} style={style} aria-hidden>
-    <rect x="2" y="6" width="30" height="9" fill="var(--color-clash3a)" stroke="var(--color-ink)" strokeWidth="2" />
-  </svg>
+/** 荧光标记 价值区：色块骑在文字背后——是标记不是形状，
+ * 无描边、微斜、两端比字宽（荧光笔划过的手感），过程就地写清 */
+export const Mark = ({ children, className }: { children: ReactNode; className?: string }) => (
+  <mark
+    className={`-rotate-1 rounded-[3px] bg-clash2a px-[4px] py-[1px] font-bold text-ink [box-decoration-break:clone] ${className ?? ''}`}
+  >
+    {children}
+  </mark>
 )
 
 /** ⌇ 脱靶：竖立颤抖——图形入口，读者追随图形进入阅读 */

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

@@ -7,7 +7,7 @@ import { RouteLine } from '../../components/RouteLine'
 import { AssignBlock, Ticket } from '../../components/Ticket'
 import { EntryGuide } from '../../components/EntryGuide'
 import { Scatter } from '../../components/Scatter'
-import { Bar, Cross, Ring, Tremble, Tri, Wave } from '../../components/shapes'
+import { Cross, Ring, Tremble, Tri, Wave } from '../../components/shapes'
 
 /* 场景坐标（节点＝卡描边真实边缘）：卡1(40,110,250) 卡2(380,44,250,rot) 卡3(700,44,140) */
 const nodes = {
@@ -32,7 +32,6 @@ export function App() {
             <Cross size={20} key="cross1" />,
             <Cross size={18} key="cross2" />,
             <Wave size={44} key="wave" />,
-            <Bar size={30} key="bar" />,
             <Tremble size={20} key="tremble" />,
           ]}
         />

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

@@ -1,21 +1,22 @@
 import { Page, Section } from '../../lib/ui'
-import { Bar, BrickDot, Cross, Ring, Tremble, Tri, Wave } from '../../components/shapes'
+import { BrickDot, Cross, Mark, Ring, Tremble, Tri, Wave } from '../../components/shapes'
 import { CHAPTERS } from '../../lib/chapters'
 import { Ticket } from '../../components/Ticket'
+import type { ReactNode } from 'react'
 
 const SHAPES = [
   { el: <Tri size={28} />, n: '▲ 靶子', m: '目标，卡头打头', s: '靶子先行' },
   { el: <span className="flex"><BrickDot on /><BrickDot /></span>, n: '● 积木', m: '清单点列，实=已学', s: '积木清单' },
   { el: <Ring size={28} />, n: '○ 预期', m: '可核对的结果', s: '预期结果' },
   { el: <Wave size={36} />, n: '～ 代理区', m: '交给 agent', s: '每步先分类' },
-  { el: <Bar size={30} />, n: '▬ 价值区', m: '就地写过程', s: '每步先分类' },
+  { el: <Mark>过程</Mark>, n: '荧光标记 价值区', m: '划在文字上，不是散落图形', s: '每步先分类' },
   { el: <Tremble size={22} />, n: '⌇ 脱靶', m: '图形入口：追随图形进入阅读', s: '脱靶提醒' },
   { el: <Cross size={22} />, n: '＋ 指派', m: '位置/预期/场景', s: '指派学习' },
 ]
 
-const VOCAB: { p: string; rows: [string, string][] }[] = [
+const VOCAB: { p: string; rows: [ReactNode, string][] }[] = [
   { p: '靶子', rows: [['▲ 目标', '做什么'], ['○ 预期结果', '做成长什么样、怎么核对'], ['● 积木清单', '要用到的零件——只列用到的；说零件不说知识']] },
-  { p: '步骤分类', rows: [['～ 代理区', '无学习价值——交给 agent'], ['▬ 价值区', '有学习价值——就地写清']] },
+  { p: '步骤分类', rows: [['～ 代理区', '无学习价值——交给 agent'], [<Mark key="v">价值区</Mark>, '有学习价值——就地写清']] },
   { p: '指派学习', rows: [['＋ 三样（图形入口）', '教材只留三样，讲解交给 agent'], ['└ 位置', '知识体系中的坐标'], ['└ 预期', '实践结果应长什么样——当尺子'], ['└ 场景', '带回 agent 再做的练习——管巩固']] },
   { p: '脱靶提醒', rows: [['⌇ 图形标记', '不人为挖坑；跟在指派后'], ['└ 可能性 / 长相', '怎么脱靶＋脱靶什么样——撞上认出缺哪块']] },
   { p: '认知基础', rows: [['底座纹·真机验收章', 'env/库/运行环境——脚下的地，不是积木']] },