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

---
 src/components/FormEditor.css     |   5 ++
 src/components/SettingsEditor.css | 120 ++++++++++++++++++++++++++++++
 src/components/SettingsEditor.tsx |  18 +++--
 3 files changed, 136 insertions(+), 7 deletions(-)
 create mode 100644 src/components/SettingsEditor.css

diff --git a/src/components/FormEditor.css b/src/components/FormEditor.css
index ee2486d..ebb8a64 100644
--- a/src/components/FormEditor.css
+++ b/src/components/FormEditor.css
@@ -233,4 +233,9 @@
 .close-btn:focus-visible {
   background-color: #f3f4f6;
   border-radius: 4px;
+}
+
+/* react-select fallback：确保菜单出现在顶层 */
+.react-select__menu {
+  z-index: 9999;
 }
\ No newline at end of file
diff --git a/src/components/SettingsEditor.css b/src/components/SettingsEditor.css
new file mode 100644
index 0000000..8bbbe6e
--- /dev/null
+++ b/src/components/SettingsEditor.css
@@ -0,0 +1,120 @@
+
+/* 子网项布局：一行内显示，按钮靠右 */
+.subnet-add-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.subnet-add-row .subnet-input {
+  flex: 1;
+}
+
+.subnet-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.subnet-node-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  background: #ffffff;
+}
+
+.subnet-node-label {
+  color: #333;
+  font-size: 13px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.subnet-node-item .btn-node-remove {
+  background: #fff;
+  border: 1px solid #ef4444;
+  color: #ef4444;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.subnet-node-item .btn-node-remove:hover {
+  background: #fff5f5;
+}
+
+/* 删除子网行：分割线 + 按钮靠右 */
+.subnet-remove-row {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 10px;
+  margin-top: 8px;
+  border-top: 1px solid #eef2f5; /* 横杠分隔 */
+}
+
+.btn-remove-subnet {
+  background: #fff;
+  border: 1px solid #ef4444;
+  color: #ef4444;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.btn-remove-subnet:hover {
+  background: #fff5f5;
+}
+
+/* 顶部“添加子网”区域优化 */
+.add-subnet {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 6px;
+}
+
+.add-subnet .subnet-input {
+  flex: 1 1 auto;
+  padding: 8px 10px;
+  border: 1px solid #e6e6e6;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.add-subnet .btn-add {
+  flex: 0 0 auto;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid #1677ff;
+  background: #1677ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.add-subnet .btn-add:hover {
+  filter: brightness(1.03);
+}
+
+.subnet-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.subnet-list > label {
+  margin: 0;
+  font-weight: 500;
+}
+
+.subnet-list > *:not(label) {
+  padding-left: 16px;
+}
\ No newline at end of file
diff --git a/src/components/SettingsEditor.tsx b/src/components/SettingsEditor.tsx
index 9ca836d..9217d57 100644
--- a/src/components/SettingsEditor.tsx
+++ b/src/components/SettingsEditor.tsx
@@ -2,6 +2,7 @@ import { useState, ReactNode } from 'react';
 import { Settings, SubnetInfo, AppEdge, AppNode } from '../types/graph';
 import { useReactFlow} from '@xyflow/react';
 import './FormEditor.css';
+import './SettingsEditor.css';
 import Folder from './Folder';
 import toast from 'react-hot-toast';
 import { IPUtils } from '../utils/iputils';
@@ -105,12 +106,15 @@ function SubnetItem({index, subnets, setSubnets} : SubnetProps) : ReactNode {
     setSubnets(subnets.filter((_, idx) => idx != index));
   }
 
-  return (<Folder title={subnetInfo.subnet.toString()}>
-      <div>
+    return (<Folder title={subnetInfo.subnet.toString()}>
+      <div className="subnet-add-row">
         <Select
           onChange={setSelectedOption}
           options={options}
           placeholder="请选择节点..."
+          menuPosition="fixed"
+          menuPortalTarget={typeof document !== 'undefined' ? document.body : undefined}
+          styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
         />
         <input 
           type="text"
@@ -124,15 +128,15 @@ function SubnetItem({index, subnets, setSubnets} : SubnetProps) : ReactNode {
         const node = getNode(nodeInfo.nodeId);
         if(!node) return <></>
         return (
-          <div>
-            <label>- {`${node.data.label}: ${nodeInfo.cidr?.toString()}`}</label>
-            <button onClick={_ => handleRemoveNodeSubnet(nodeInfo.nodeId)}>删除</button>
+          <div className="subnet-node-item" key={nodeInfo.nodeId}>
+            <label className="subnet-node-label">{`${node.data.label}: ${nodeInfo.cidr?.toString()}`}</label>
+            <button className="btn-node-remove" onClick={_ => handleRemoveNodeSubnet(nodeInfo.nodeId)}>删除</button>
           </div>
         )
       })}
 
-      <div>
-        <button onClick={_ => handleRemoveSubnet()}>删除子网</button>
+      <div className="subnet-remove-row">
+        <button className="btn-remove-subnet" onClick={_ => handleRemoveSubnet()}>删除子网</button>
       </div>
 
     </Folder>