优化子网样式

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;
 }

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;
+}

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>