diff --git a/src/components/SettingsEditor.css b/src/components/SettingsEditor.css index 8bbbe6e..540ecaf 100644 --- a/src/components/SettingsEditor.css +++ b/src/components/SettingsEditor.css @@ -115,6 +115,40 @@ font-weight: 500; } -.subnet-list > *:not(label) { - padding-left: 16px; +/* 节点名称与 CIDR 区分样式 */ +.subnet-node-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 6px 8px; + border-radius: 6px; + background: transparent; +} + +.subnet-node-label { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + flex: 1; +} + +.subnet-node-label .node-name { + font-weight: 600; + color: #0f172a; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + flex: 1 1 auto; +} + +.subnet-node-label .cidr-tag { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; + font-size: 12px; + color: #6b7280; + background: #f3f4f6; + padding: 2px 8px; + border-radius: 999px; } \ No newline at end of file diff --git a/src/components/SettingsEditor.tsx b/src/components/SettingsEditor.tsx index 9217d57..c19f0ce 100644 --- a/src/components/SettingsEditor.tsx +++ b/src/components/SettingsEditor.tsx @@ -129,7 +129,10 @@ function SubnetItem({index, subnets, setSubnets} : SubnetProps) : ReactNode { if(!node) return <>> return (