106 lines
3.0 KiB
JavaScript
106 lines
3.0 KiB
JavaScript
import { html } from 'htm/preact';
|
|
|
|
const styles = {
|
|
schemaFields: {
|
|
borderTop: '1px solid var(--border-color)',
|
|
position: 'relative',
|
|
transition: 'var(--transition)'
|
|
},
|
|
verticalLine: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
left: '16px',
|
|
top: 0,
|
|
bottom: '14px',
|
|
width: '1px',
|
|
background: 'var(--border-color)',
|
|
zIndex: 2
|
|
},
|
|
fieldItem: {
|
|
zIndex: 1,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
padding: '4px 12px 4px 16px',
|
|
fontSize: '12px',
|
|
transition: 'var(--transition)',
|
|
position: 'relative'
|
|
},
|
|
horizontalLine: {
|
|
width: '8px',
|
|
height: '1px',
|
|
background: 'var(--border-color)'
|
|
},
|
|
fieldIndexIcon: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '12px',
|
|
flexShrink: 0
|
|
},
|
|
fieldName: {
|
|
fontWeight: 500,
|
|
color: 'var(--text-secondary)',
|
|
flex: 1,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '4px'
|
|
},
|
|
fieldType: {
|
|
fontFamily: '"Courier New", monospace',
|
|
fontSize: '11px',
|
|
padding: '2px 6px',
|
|
background: 'var(--primary-bg)',
|
|
color: 'var(--primary)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
fontWeight: 600
|
|
}
|
|
};
|
|
|
|
export function FieldList({ fields }) {
|
|
if (!fields || fields.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return html`
|
|
<div style=${styles.schemaFields}>
|
|
<!-- 垂直连接线 -->
|
|
<div style=${styles.verticalLine}></div>
|
|
|
|
${fields.map((field) => {
|
|
return html`
|
|
<div
|
|
key=${field.name}
|
|
style=${styles.fieldItem}
|
|
onMouseEnter=${(e) => {
|
|
e.currentTarget.style.background = 'var(--bg-hover)';
|
|
}}
|
|
onMouseLeave=${(e) => {
|
|
e.currentTarget.style.background = 'transparent';
|
|
}}
|
|
>
|
|
<!-- 水平连接线 -->
|
|
<div style=${styles.horizontalLine}></div>
|
|
|
|
<!-- 字段名称和索引图标 -->
|
|
<span style=${styles.fieldName}>
|
|
${field.name}
|
|
${field.indexed && html`
|
|
<span
|
|
style=${styles.fieldIndexIcon}
|
|
title="Indexed field"
|
|
>
|
|
🔍
|
|
</span>
|
|
`}
|
|
</span>
|
|
|
|
<!-- 字段类型 -->
|
|
<span style=${styles.fieldType}>${field.type}</span>
|
|
</div>
|
|
`;
|
|
})}
|
|
</div>
|
|
`;
|
|
}
|