✨ feat(vscode): 代码阅读函数、导入、常量、变量块预览改成属性表

vscode/webview-ui/src/codeReader/PropertyGrid.tsx

@@ -0,0 +1,58 @@
+import type { ReactElement } from 'react'
+import type { PropertyItem, PropertyRow } from './types'
+import { ChevronDown } from 'lucide-react'
+import { Fragment } from 'react'
+import { SegmentText } from './SegmentText'
+
+/** 子行里除最后一列以外各列的宽度（参数的名称、类型），最后一列占满剩下的；编辑区窄时按比例收，不把最后一列挤没 */
+const CELL_WIDTHS = ['min(150px, 28%)', 'min(220px, 38%)']
+
+function columns(count: number): string {
+  const fixed = Array.from({ length: count - 1 }, (_, i) => CELL_WIDTHS[i] ?? CELL_WIDTHS[CELL_WIDTHS.length - 1])
+  return [...fixed, 'minmax(0, 1fr)'].join(' ')
+}
+
+/** 展开在一行下面的子行：左边一条竖线，每个子行几列对齐。 */
+function PropertyItems({ items }: { items: PropertyItem[] }): ReactElement {
+  return (
+    <div className="flex gap-2.5 pl-[5px]">
+      <div className="cr-guide w-px shrink-0" />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        {items.map((item, index) => (
+          <div key={index} className="grid gap-x-3" style={{ gridTemplateColumns: columns(item.cells.length) }}>
+            {item.cells.map((cell, i) => (
+              <p key={i} className="cr-code min-w-0">
+                <SegmentText segments={cell} />
+              </p>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** 函数、导入、常量、变量块的预览：属性名一列对齐，值按词性着色；输入参数、导入项下面展开子行。 */
+export function PropertyGrid({ rows }: { rows: PropertyRow[] }): ReactElement {
+  return (
+    <div className="flex flex-col gap-[3px]">
+      {rows.map((row, index) => {
+        const items = row.items ?? []
+        return (
+          <Fragment key={index}>
+            <div className="flex gap-3">
+              <span className="cr-prop-label flex h-5 w-[76px] shrink-0 items-center gap-1">
+                {items.length > 0 && <ChevronDown size={12} strokeWidth={1.8} className="shrink-0" />}
+                {row.label}
+              </span>
+              <p className="cr-code min-w-0 flex-1">
+                <SegmentText segments={row.value} />
+              </p>
+            </div>
+            {items.length > 0 && <PropertyItems items={items} />}
+          </Fragment>
+        )
+      })}
+    </div>
+  )
+}