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

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

@@ -4,6 +4,7 @@ import { ChevronDown, ChevronRight, Eye, Pencil } from 'lucide-react'
 import { Fragment } from 'react'
 import { cn } from '@/lib/utils'
 import { CodeEditor } from './CodeEditor'
+import { PropertyGrid } from './PropertyGrid'
 import { SegmentText } from './SegmentText'
 
 const KIND_LABEL: Record<BlockKind, string> = {
@@ -60,7 +61,18 @@ export function BlockLevel({ blocks, kind, tree }: { blocks: BlockView[], kind?:
   )
 }
 
-/** 一块：折叠箭头、种类标签、译文或源码、右边的「编辑 / 预览」切换。 */
+/** 预览状态的内容：函数、导入、常量、变量块是属性表，其余是一行译文。 */
+function BlockPreview({ block }: { block: BlockView }): ReactElement {
+  if ('properties' in block)
+    return <PropertyGrid rows={block.properties} />
+  return (
+    <p className="cr-code">
+      <SegmentText segments={block.translation} />
+    </p>
+  )
+}
+
+/** 一块：折叠箭头、种类标签、预览内容或源码、右边的「编辑 / 预览」切换。 */
 function BlockCard({ block, tree }: { block: BlockView, tree: BlockTreeState }): ReactElement {
   const editing = tree.editing.has(block.id)
   const collapsed = tree.collapsed.has(block.id)
@@ -100,11 +112,7 @@ function BlockCard({ block, tree }: { block: BlockView, tree: BlockTreeState }):
                 onExit={() => tree.onToggleEdit(block.id)}
               />
             )
-          : (
-              <p className="cr-code">
-                <SegmentText segments={block.translation} />
-              </p>
-            )}
+          : <BlockPreview block={block} />}
       </div>
       <button
         type="button"