From 9f6b860f5f5b786763b2026a729a2705c3cfca22 Mon Sep 17 00:00:00 2001
From: limil <limil.top@qq.com>
Date: Tue, 17 Feb 2026 22:11:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SettingsEditor.css | 38 +++++++++++++++++++++++++++++--
 src/components/SettingsEditor.tsx |  7 ++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

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 (
           <div className="subnet-node-item" key={nodeInfo.nodeId}>
-            <label className="subnet-node-label">{`${node.data.label}: ${nodeInfo.cidr?.toString()}`}</label>
+            <label className="subnet-node-label">
+              <span className="node-name" title={node.data.label}>{node.data.label}</span>
+              <span className="cidr-tag">{nodeInfo.cidr?.toString() || ''}</span>
+            </label>
             <button className="btn-node-remove" onClick={_ => handleRemoveNodeSubnet(nodeInfo.nodeId)}>删除</button>
           </div>
         )
@@ -248,7 +251,7 @@ export default function SettingsEditor({
           </div>
 
           <div className="subnet-list">
-            <label>已添加的子网：</label>
+            {subnets.length > 0 && (<label>已添加的子网：</label>)}
             {subnets.map((_, idx) => 
               <SubnetItem 
                 key={idx}