SourceRef 右侧抽屉源码预览设计
背景
当前文档中的 SourceRef 组件会把“查看源码”渲染为一个直接跳转 GitHub 的链接。目标改为：普通点击时不离开当前站点，而是在页面右侧划入抽屉，加载该链接对应的源码内容并在站内展示。
目标
- 保留
a标签当前的href生成逻辑，不修改链接本身 - 普通点击“查看源码”时，只打开右侧抽屉，不保留默认跳转行为
- 抽屉根据现有
href加载源码文本并展示 - 如果
lines存在，抽屉内展示目标行号并尽量滚动到对应位置 - 支持加载中、失败、关闭、遮罩与移动端适配
非目标
- 不修改文档 MDX 中
SourceRef的调用方式 - 不新增跳回 GitHub 的兜底按钮
- 不引入服务端抓取或构建期预同步源码
- 不扩展到站内其他外链组件
方案
组件边界
SourceRef保留现有卡片结构和href- 新增站内右侧抽屉组件，用于承载源码预览
- 源码预览状态放在 React 组件层，点击某个
SourceRef时打开对应抽屉
数据流
SourceRef继续生成 GitHub 页面链接- 点击链接时阻止默认行为
- 预览逻辑根据
href推导原始源码地址 - 前端请求源码文本
- 请求成功后在抽屉中按代码块渲染，并处理目标行定位
- 请求失败时显示错误提示，不自动外跳
链接转换
- 输入仍为 GitHub 仓库页面链接
- 运行时将其转换为可直接读取文本内容的 raw 地址
- 行号锚点不参与请求地址本身，但用于抽屉内定位和高亮
交互
- 桌面端：抽屉从右侧滑入，保留遮罩
- 移动端：抽屉宽度扩展为接近全屏
- 支持关闭按钮、点击遮罩关闭、
Esc关闭 - 只允许普通点击触发抽屉，不保留默认跳转
展示
- 头部显示文件路径与目标行信息
- 内容区显示等宽字体源码
- 目标行存在时，增加对应行的视觉强调
- 长文件内容区可独立滚动
错误处理
- 请求中显示加载状态
- 网络失败、链接无法转换、内容非文本时显示可读错误消息
- 不在失败时执行任何自动跳转
测试与验证
- 交互测试：点击“查看源码”后打开抽屉而不是跳转
- 逻辑测试：GitHub 页面链接可被正确转换为源码文本地址
- 展示测试：带
lines时可显示目标行信息 - 工程验证：至少通过
pnpm typecheck，如测试框架可用则补跑相关测试
风险
- GitHub 页面链接格式如果后续变化，转换逻辑需要同步调整
- 浏览器跨域或远端限流可能影响加载成功率，需要明确错误态