✨ feat(vscode): 代码阅读的 React 组件卡片：原子图标，名称后面跟具名导出 / 默认导出 / 客户端组件 / 记忆化 / 转发 ref 小标签，属性表按属性一行（类型取字段、默认值、必填、说明，来自 XxxProps 可点，导入的类型经工作区索引查），"use client" 和组件上的 JSDoc 不再单独成块

vscode/webview-ui/src/codeReader/codeReader.css

@@ -381,6 +381,73 @@ body:is(.vscode-light, .vscode-high-contrast-light) .cr-colored { color: var(--c
   color: var(--group);
   white-space: nowrap;
 }
+/* 只有图标的框头（渲染大纲一行前面的「当 … 时」）：图标和后面的字贴近一点；框里没有词时（小标签、类名）框头后面不留空 */
+.cr-group-head[data-bare] {
+  margin-right: 4px;
+}
+.cr-group-head:last-child {
+  margin-right: 0;
+}
+
+/*
+ * 渲染大纲一行前面的小框（React 组件卡片）：按条件、条件的一支同「条件」块的颜色，不渲染同「返回」块；
+ * 小标签（名称后面的「具名导出」、属性名后面的「回调」）用规则给的颜色（暗色、亮色各一个，按主题挑）
+ */
+.cr-group:is([data-style="condition"], [data-style="branch"]) { --group: var(--cr-kind-branch); }
+.cr-group[data-style="skip"] { --group: var(--cr-kind-return); }
+.cr-group[data-colored] { --group: var(--group-dark); }
+body:is(.vscode-light, .vscode-high-contrast-light) .cr-group[data-colored] { --group: var(--group-light); }
+.cr-group[data-style="tag"] {
+  line-height: 16px;
+  margin-top: 1px;
+}
+
+/*
+ * 收起来的一串类名（「样式 N 个类」）：中性色的小框，是个按钮；点开时换成焦点色的边、在下面弹出全部类名，
+ * 弹层盖住后面的字，不挤开它们
+ */
+.cr-group[data-style="classes"] {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: var(--vscode-input-background);
+  border-color: var(--vscode-editorWidget-border, var(--vscode-contrastBorder, transparent));
+}
+.cr-group[data-style="classes"] .cr-group-head {
+  font-weight: 400;
+  color: var(--vscode-descriptionForeground);
+}
+.cr-group[data-style="classes"]:hover,
+.cr-group[data-style="classes"][data-open] {
+  border-color: var(--vscode-focusBorder);
+}
+.cr-group[data-style="classes"][data-open] .cr-group-head {
+  color: var(--vscode-foreground);
+}
+.cr-classes {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+}
+.cr-classes-popup {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: 20;
+  width: max-content;
+  max-width: min(460px, 70vw);
+  padding: 6px 8px;
+  border: 1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border));
+  border-radius: 6px;
+  background: var(--vscode-editorHoverWidget-background, var(--vscode-editorWidget-background));
+  box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgb(0 0 0 / 36%));
+  color: var(--vscode-editorHoverWidget-foreground, var(--vscode-foreground));
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 12px;
+  line-height: 18px;
+  white-space: pre-wrap;
+}
 
 /*
  * 属性表里带列名的子行（输入参数、数据表的字段）排成的表格：外框圆角，格子之间、行之间一条主题的表格分隔线；