✨ feat(vscode): 代码阅读的输入参数排成带表头和边框的表格

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

@@ -119,6 +119,22 @@ body.vscode-high-contrast-light {
 :is(.cr-block, .cr-prop-row, .cr-prop-item)[data-flash] {
   animation: cr-flash 500ms ease-in-out 3;
 }
+/* 表格里的一行（参数）：边框是和相邻行共用的分隔线，改用画在行里面的一圈聚焦色 */
+@keyframes cr-flash-row {
+  50% {
+    background: color-mix(in srgb, var(--vscode-focusBorder) 25%, transparent);
+    box-shadow: inset 0 0 0 1px var(--vscode-focusBorder);
+  }
+}
+@keyframes cr-flash-row-still {
+  from, to {
+    background: color-mix(in srgb, var(--vscode-focusBorder) 25%, transparent);
+    box-shadow: inset 0 0 0 1px var(--vscode-focusBorder);
+  }
+}
+.cr-table-row[data-flash] {
+  animation: cr-flash-row 500ms ease-in-out 3;
+}
 
 @media (prefers-reduced-motion: reduce) {
   .cr-block,
@@ -128,6 +144,9 @@ body.vscode-high-contrast-light {
   :is(.cr-block, .cr-prop-row, .cr-prop-item)[data-flash] {
     animation: cr-flash-still 1500ms;
   }
+  .cr-table-row[data-flash] {
+    animation: cr-flash-row-still 1500ms;
+  }
 }
 
 .cr-badge {
@@ -310,6 +329,37 @@ body.vscode-high-contrast-light {
   white-space: nowrap;
 }
 
+/*
+ * 属性表里带列名的子行（输入参数）排成的表格：外框圆角，格子之间、行之间一条主题的表格分隔线；
+ * 表头垫主题的表头底色（比编辑区深一档或浅一档）、列名用说明色
+ */
+.cr-table {
+  --cr-table-border: var(--vscode-tree-tableColumnsBorder, var(--vscode-editorWidget-border, var(--vscode-contrastBorder)));
+  border: 1px solid var(--cr-table-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.cr-table-head {
+  background: var(--vscode-keybindingTable-headerBackground, color-mix(in srgb, var(--vscode-foreground) 5%, transparent));
+}
+.cr-table-row {
+  border-top: 1px solid var(--cr-table-border);
+}
+.cr-table .cr-table-cell {
+  padding: 2px 8px;
+}
+.cr-table .cr-table-cell + .cr-table-cell {
+  border-left: 1px solid var(--cr-table-border);
+}
+.cr-table-head .cr-table-cell {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--vscode-descriptionForeground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* 编辑：透明输入框垫在底下接收输入和选区，着色层盖在上面只负责显示，高度由着色层撑开 */
 .cr-editor {
   position: relative;