✨ feat(vscode): 代码阅读支持库规则，内置 SQLAlchemy 模型类显示成数据表卡片

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

@@ -4,11 +4,11 @@ import { ChevronDown, ChevronRight } from 'lucide-react'
 import { Fragment } from 'react'
 import { inlineText } from './segments'
 import { SegmentText } from './SegmentText'
-import { subRowsLayout, tableCells } from './subRows'
+import { subRowsLayout, tableCells, tableTemplate } from './subRows'
 import { TextPreview } from './TextPreview'
 import { propertyItemId, propertyRowId } from './viewState'
 
-/** 子行里除最后一列以外各列的宽度（参数表格的名称、类型列，字典的键），最后一列占满剩下的；编辑区窄时按比例收，不把最后一列挤没 */
+/** 列表子行里除最后一列以外各列的宽度（字典的键），最后一列占满剩下的；编辑区窄时按比例收，不把最后一列挤没 */
 const CELL_WIDTHS = ['min(150px, 28%)', 'min(220px, 38%)']
 
 function gridTemplate(count: number): string {
@@ -95,19 +95,18 @@ function PropertyItems({ parentId, items, folding }: { parentId: string, items:
 }
 
 /**
- * 给了列名的子行（输入参数）排成表格：第一行是表头（列名），下面每个子行一行；外框圆角，格子之间、行之间一条分隔线。
- * 列宽同列表的子行，最后一列占满剩下的，长了在格子里换行。
+ * 给了列名的子行（输入参数、数据表的字段）排成表格：第一行是表头（列名），下面每个子行一行；外框圆角，格子之间、行之间一条分隔线。
+ * 列宽按整列的内容定（见 tableTemplate），最后一列分剩下的，长了在格子里换行。
  */
 function PropertyTable({ parentId, columns, items }: { parentId: string, columns: string[], items: PropertyItem[] }): ReactElement {
-  const template = { gridTemplateColumns: gridTemplate(columns.length) }
   return (
     <div className="pl-[5px]">
-      <div className="cr-table" role="table">
-        <div className="cr-table-head grid" role="row" style={template}>
+      <div className="cr-table" role="table" style={{ gridTemplateColumns: tableTemplate(columns.length) }}>
+        <div className="cr-table-head" role="row">
           {columns.map((name, i) => <span key={i} className="cr-table-cell" role="columnheader">{name}</span>)}
         </div>
         {items.map((item, index) => (
-          <div key={index} className="cr-table-row grid" role="row" data-id={propertyItemId(parentId, index)} style={template}>
+          <div key={index} className="cr-table-row" role="row" data-id={propertyItemId(parentId, index)}>
             {tableCells(item, columns).map((cell, i) => (
               <p key={i} className="cr-table-cell cr-code min-w-0" role="cell">
                 <SegmentText segments={cell} />
@@ -121,8 +120,8 @@ function PropertyTable({ parentId, columns, items }: { parentId: string, columns
 }
 
 /**
- * 函数、类、导入、常量、变量块的预览：属性名一列对齐，值按词性着色；输入参数、导入项、字典 / 对象的值下面展开子行，
- * 翻译插件给了列名的（输入参数）排成表格，没给的排成列表。
+ * 函数、类、导入、常量、变量块和库规则认领的块的预览：属性名一列对齐，值按词性着色；输入参数、导入项、字典 / 对象的值下面展开子行，
+ * 给了列名的（输入参数、数据表的字段）排成表格，没给的排成列表。
  */
 export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
   blockId: string