✨ feat(vscode): 代码阅读 React 组件卡片加渲染大纲:原生标签灰色、组件用组件色能跳到定义,className 收成「样式 N 个类」点开看全部类名,cond && 写「当 … 时」、三元分是 / 否两支、.map 写「对 … 的每一项」标 key、提前 return null 写不渲染、片段和 JSX 注释照写;差异测试覆盖加属性、改副作用依赖

This commit is contained in:
cruldra committed 2026-10-03 03:11:46 +08:00
1 parent ee807ec7a4
commit fd8b03a563
4 files changed
+381 -21

No files matched your search

@@ -73,21 +73,23 @@ function ItemHead({ id, cell, foldable, folding }: { id: string, cell: Inline[],
}
const folded = folding.collapsed.has(id)
const Chevron = folded ? ChevronRight : ChevronDown
const toggle = (): void => folding.onToggleFold(id)
// 只有箭头是按钮:这一列里还可能有别的按钮(渲染大纲的「样式 N 个类」),按钮里不能套按钮;点这一列的字照样切换
return (
<button
type="button"
className="group flex min-w-0 items-start gap-1 rounded-sm text-left"
aria-label={`${folded ? '展开' : '折叠'}${inlineText(cell)}`}
aria-expanded={!folded}
onClick={() => folding.onToggleFold(id)}
>
<span className="flex h-5 w-3.5 shrink-0 items-center">
<div className="group flex min-w-0 items-start gap-1">
<button
type="button"
className="flex h-5 w-3.5 shrink-0 items-center rounded-sm"
aria-label={`${folded ? '展开' : '折叠'}${inlineText(cell)}`}
aria-expanded={!folded}
onClick={toggle}
>
<Chevron size={14} strokeWidth={1.8} className="text-[var(--vscode-descriptionForeground)] group-hover:text-[var(--vscode-foreground)]" />
</span>
<span className="cr-code min-w-0">
</button>
<p className="cr-code min-w-0 cursor-pointer" onClick={toggle}>
<SegmentText segments={cell} />
</span>
</button>
</p>
</div>
)
}
@@ -85,7 +85,8 @@ function GroupBox({ group }: { group: SegmentGroup }): ReactElement {
function ClassesChip({ group }: { group: SegmentGroup }): ReactElement {
const [open, setOpen] = useState(false)
return (
<span className="cr-classes">
// 点小标、点弹层里的字都不往外传:大纲里点这一行的字会折叠它的子行,点小标只开关类名
<span className="cr-classes" onClick={event => event.stopPropagation()}>
<button
type="button"
className="cr-group"