🐛 fix(vscode): 代码阅读属性表的输入参数、导入项可以折叠

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

@@ -1,8 +1,9 @@
 import type { ReactElement } from 'react'
 import type { PropertyItem, PropertyRow } from './types'
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
 import { Fragment } from 'react'
 import { SegmentText } from './SegmentText'
+import { propertyRowId } from './viewState'
 
 /** 子行里除最后一列以外各列的宽度（参数的名称、类型），最后一列占满剩下的；编辑区窄时按比例收，不把最后一列挤没 */
 const CELL_WIDTHS = ['min(150px, 28%)', 'min(220px, 38%)']
@@ -33,23 +34,41 @@ function PropertyItems({ items }: { items: PropertyItem[] }): ReactElement {
 }
 
 /** 函数、导入、常量、变量块的预览：属性名一列对齐，值按词性着色；输入参数、导入项下面展开子行。 */
-export function PropertyGrid({ rows }: { rows: PropertyRow[] }): ReactElement {
+export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
+  blockId: string
+  rows: PropertyRow[]
+  collapsed: ReadonlySet<string>
+  onToggleFold: (id: string) => void
+}): ReactElement {
   return (
     <div className="flex flex-col gap-[3px]">
       {rows.map((row, index) => {
         const items = row.items ?? []
+        const id = propertyRowId(blockId, index)
+        const folded = collapsed.has(id)
+        const Chevron = folded ? ChevronRight : ChevronDown
         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>
+              {items.length > 0
+                ? (
+                    <button
+                      type="button"
+                      className="cr-prop-label group flex h-5 w-[76px] shrink-0 items-center gap-1 rounded-sm"
+                      aria-label={`${folded ? '展开' : '折叠'}${row.label}`}
+                      aria-expanded={!folded}
+                      onClick={() => onToggleFold(id)}
+                    >
+                      <Chevron size={14} strokeWidth={1.8} className="shrink-0 text-[var(--vscode-descriptionForeground)] group-hover:text-[var(--vscode-foreground)]" />
+                      {row.label}
+                    </button>
+                  )
+                : <span className="cr-prop-label flex h-5 w-[76px] shrink-0 items-center">{row.label}</span>}
               <p className="cr-code min-w-0 flex-1">
                 <SegmentText segments={row.value} />
               </p>
             </div>
-            {items.length > 0 && <PropertyItems items={items} />}
+            {items.length > 0 && !folded && <PropertyItems items={items} />}
           </Fragment>
         )
       })}