✨ feat(vscode): 代码阅读页面画链式调用卡片：竖轨道、小链、收起的闭包和合成的表

链的各步排在值下面的竖轨道上，方法一列对齐、轨道线是函数色淡到 35%；实参是链的缩进成空心点小链，注释挂在步骤下；收起的闭包是能点的小框，点开那一步才画挂着的子块（折叠 id 记在属性行下面）；跳到定义、查找、高度估算、只看改动都算上链里的字和步骤下的子块

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

@@ -512,28 +512,33 @@ body:is(.vscode-light, .vscode-high-contrast-light) .cr-group[data-colored] { --
 }
 
 /*
- * 收起来的一串类名（「样式 N 个类」）：中性色的小框，是个按钮；点开时换成焦点色的边、在下面弹出全部类名，
- * 弹层盖住后面的字，不挤开它们
+ * 收起来的一串类名（「样式 N 个类」）、链式调用里收起来的闭包（「闭包 |app| · 37 句」）：中性色的小框，是个按钮；
+ * 点开时换成焦点色的边，类名在下面弹出全部类名（弹层盖住后面的字，不挤开它们），闭包在这一步下面展开子块。
+ * 闭包框不在链的某一步里时（删掉的块的旧内容）不能点
  */
-.cr-group[data-style="classes"] {
+.cr-group:is([data-style="classes"], [data-style="fold"]) {
   margin: 0;
   font: inherit;
   color: inherit;
+  text-align: left;
   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 {
+.cr-group:is([data-style="classes"], [data-style="fold"]) .cr-group-head {
   font-weight: 400;
   color: var(--vscode-descriptionForeground);
 }
-.cr-group[data-style="classes"]:hover,
-.cr-group[data-style="classes"][data-open] {
+.cr-group:is([data-style="classes"], [data-style="fold"]):not(:disabled):hover,
+.cr-group:is([data-style="classes"], [data-style="fold"])[data-open] {
   border-color: var(--vscode-focusBorder);
 }
-.cr-group[data-style="classes"][data-open] .cr-group-head {
+.cr-group:is([data-style="classes"], [data-style="fold"])[data-open] .cr-group-head {
   color: var(--vscode-foreground);
 }
+.cr-group[data-style="fold"]:disabled {
+  cursor: default;
+}
 .cr-classes {
   position: relative;
   display: inline-block;
@@ -604,6 +609,99 @@ body:is(.vscode-light, .vscode-high-contrast-light) .cr-group[data-colored] { --
 .cr-slot {
   padding-left: 5px;
 }
+
+/*
+ * 链式调用的竖轨道（见 ChainRail）：一步一行，左边一列是点和上下两截线（函数色淡到 35%，第一步上面、最后一步下面不画），
+ * 方法那一列按最长的那个定宽（--cr-chain-name）、各步对齐；步与步之间的空隙在每一步的下边距里，线才连得上。
+ * 小链用空心的小点、细一点的说明色线，一节一行
+ */
+.cr-chain {
+  --cr-chain-line: color-mix(in srgb, var(--cr-function) 35%, transparent);
+  display: flex;
+  flex-direction: column;
+  margin-top: 3px;
+}
+.cr-chain-step {
+  display: flex;
+  gap: 4px;
+}
+.cr-chain-rail {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  width: 14px;
+}
+.cr-chain-up {
+  flex: none;
+  width: 2px;
+  height: 6px;
+  background: var(--cr-chain-line);
+}
+.cr-chain-down {
+  flex: 1;
+  width: 2px;
+  background: var(--cr-chain-line);
+}
+.cr-chain-rail[data-first] > .cr-chain-up,
+.cr-chain-rail[data-last] > .cr-chain-down {
+  visibility: hidden;
+}
+.cr-chain-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--cr-function);
+}
+.cr-chain-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding-bottom: 6px;
+}
+.cr-chain-step:last-child > .cr-chain-body {
+  padding-bottom: 0;
+}
+.cr-chain-line {
+  display: grid;
+  grid-template-columns: var(--cr-chain-name) minmax(0, 1fr);
+  column-gap: 12px;
+}
+.cr-chain-name {
+  white-space: nowrap;
+}
+.cr-chain-label {
+  font-size: 12.5px;
+  line-height: 20px;
+  color: var(--vscode-descriptionForeground);
+  white-space: nowrap;
+}
+.cr-chain-mini {
+  --cr-chain-line: color-mix(in srgb, var(--vscode-descriptionForeground) 45%, transparent);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.cr-chain-mini .cr-chain-up {
+  width: 1px;
+  height: 7px;
+}
+.cr-chain-mini .cr-chain-down {
+  width: 1px;
+}
+.cr-chain-dot[data-hollow] {
+  box-sizing: border-box;
+  width: 6px;
+  height: 6px;
+  border: 1px solid var(--vscode-descriptionForeground);
+  background: transparent;
+}
+.cr-chain-blocks {
+  padding-top: 2px;
+}
 .cr-table .cr-table-cell {
   padding: 2px 8px;
 }