🐛 fix(vscode): 代码阅读属性表的属性名一列按这张表里最长的名字放宽,长名字不再压到值上

This commit is contained in:
cruldra committed 2026-09-28 00:44:53 +08:00
1 parent ff2a44f080
commit c577f38bee
1 file changed
+5 -5
@@ -144,7 +144,7 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
onToggleFold: (id: string) => void onToggleFold: (id: string) => void
}): ReactElement { }): ReactElement {
return ( return (
<div className="flex flex-col gap-[3px]"> <div className="grid grid-cols-[minmax(76px,max-content)_minmax(0,1fr)] gap-x-3 gap-y-[3px] *:col-span-full">
{rows.map((row, index) => { {rows.map((row, index) => {
const layout = subRowsLayout(row) const layout = subRowsLayout(row)
const id = propertyRowId(blockId, index) const id = propertyRowId(blockId, index)
@@ -152,12 +152,12 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
const Chevron = folded ? ChevronRight : ChevronDown const Chevron = folded ? ChevronRight : ChevronDown
return ( return (
<Fragment key={index}> <Fragment key={index}>
<div className="cr-prop-row flex gap-3" data-id={id}> <div className="cr-prop-row grid grid-cols-subgrid" data-id={id}>
{layout {layout
? ( ? (
<button <button
type="button" type="button"
className="cr-prop-label group flex h-5 w-[76px] shrink-0 items-center gap-1 rounded-sm" className="cr-prop-label group flex h-5 items-center gap-1 rounded-sm"
aria-label={`${folded ? '展开' : '折叠'}${row.label}`} aria-label={`${folded ? '展开' : '折叠'}${row.label}`}
aria-expanded={!folded} aria-expanded={!folded}
onClick={() => onToggleFold(id)} onClick={() => onToggleFold(id)}
@@ -166,8 +166,8 @@ export function PropertyGrid({ blockId, rows, collapsed, onToggleFold }: {
{row.label} {row.label}
</button> </button>
) )
: <span className="cr-prop-label flex h-5 w-[76px] shrink-0 items-center">{row.label}</span>} : <span className="cr-prop-label flex h-5 items-center">{row.label}</span>}
<TextPreview text={row.value} className="min-w-0 flex-1" /> <TextPreview text={row.value} className="min-w-0" />
</div> </div>
{!folded && layout === 'table' && <PropertyTable parentId={id} columns={row.columns ?? []} items={row.items ?? []} />} {!folded && layout === 'table' && <PropertyTable parentId={id} columns={row.columns ?? []} items={row.items ?? []} />}
{!folded && layout === 'list' && <PropertyItems parentId={id} items={row.items ?? []} folding={{ collapsed, onToggleFold }} />} {!folded && layout === 'list' && <PropertyItems parentId={id} items={row.items ?? []} folding={{ collapsed, onToggleFold }} />}