# src/extracted/
> L2 | 父级: /CLAUDE.md

本站为源头的提炼层。edu 里这些东西要么只以后台 AdmDesign 的 inline 样张存在、要么绑在 Tailwind/shadcn/路由状态上；这里整理成可独立使用的组件，与 `src/system` 共同构成对外发布的设计系统。数值 1:1 保留 edu 样张原值（包括不在 4pt 梯上的 25、2.5、26、9px 18px），所以不受 8pt 审计。

## 成员清单
- `baseline.css`: 宿主基线——v4 组件依赖的 Tailwind preflight 子集（box-sizing、零外距、块级图片、表单继承字体）+ edu 的减少动效规则，全部 `:where()` 零特异性；zzm.css 的第一段
- `extracted.css`: 提炼层样式——收编样张里散写的阴影（toast、开关滑块）、补伪类（悬停/焦点）、补确认窗定位（替代 Tailwind 工具类）与 `zzmDialogIn`
- `Switch.jsx`: 墨色开关，受控，role=switch
- `Checkbox.jsx`: 16px 方框复选，受控，role=checkbox
- `Tabs.jsx`: 下划线标签页，当前项朱色下划线
- `Pagination.jsx`: 26px 方格分页，自动折叠为「首 · 当前±1 · 末」
- `Feedback.jsx`: Toast（深墨胶囊）+ Progress（4px 朱色进度条）
- `Tag.jsx`: Tag（小方角标签）· StatusPill（状态胶囊）· RoundBadge（墨色圆徽）
- `ConfirmDialog.jsx`: ConfirmPanel / ConfirmDialog / ConfirmProvider + useConfirm()——与 edu useDialog().confirm 同形，去掉 shadcn 与 Tailwind
- `DataTable.jsx`: 浅灰 mono 表头 + 可排序列 + 窄屏横向滚动
- `VerifyShell.jsx`: 第三方人机验证的常驻外壳 + 三种反馈态
- `icons.jsx`: 品牌星座标 ZzmLogo 与自绘 16 网格线性图标（复刻自 edu 各处 inline SVG）
- `SidebarNav.jsx`: 侧栏展示版（复刻 HubSidebar/CourseSidebar，剥离 V4Nav 路由）

## 法则
新提炼组件：inline style 管几何与颜色，`extracted.css` 只放光影与伪类；焦点一律朱色光晕 `0 0 0 3px rgba(166,64,47,.2)`。

[PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md