feat: 导入主控时支持拖拽修改导入的顺序；

update: 更新负载均衡placeHolder文案

Author: Mecozea

web/src/components/services/service-create-modal.tsx

@@ -790,7 +790,7 @@ export default function ScenarioCreateModal({
                 </Tooltip>
               </div>
             }
-            placeholder="192.168.1.1&#10;192.168.1.2"
+            placeholder="192.168.1.1:80&#10;192.168.1.2:80"
             minRows={2}
             value={formData.extendTargetAddresses}
             onValueChange={(v) => handleField("extendTargetAddresses", v)}
@@ -979,7 +979,7 @@ export default function ScenarioCreateModal({
                 </Tooltip>
               </div>
             }
-            placeholder="192.168.1.1&#10;192.168.1.2"
+            placeholder="192.168.1.1:80&#10;192.168.1.2:80"
             minRows={2}
             value={formData.extendTargetAddressesSingle}
             onValueChange={(v) => handleField("extendTargetAddressesSingle", v)}
@@ -1244,7 +1244,7 @@ export default function ScenarioCreateModal({
                 </Tooltip>
               </div>
             }
-            placeholder="192.168.1.1&#10;192.168.1.2"
+            placeholder="192.168.1.1:80&#10;192.168.1.2:80"
             minRows={2}
             value={formData.extendTargetAddresses2}
             onValueChange={(v) => handleField("extendTargetAddresses2", v)}

web/src/components/tunnels/simple-create-tunnel-modal.tsx

@@ -1028,7 +1028,7 @@ export default function SimpleCreateTunnelModal({
                                     </Tooltip>
                                   </div>
                                 }
-                                placeholder="192.168.1.1&#10;192.168.1.2"
+                                placeholder="192.168.1.1:80&#10;192.168.1.2:80"
                                 minRows={2}
                                 value={formData.extendTargetAddresses}
                                 onValueChange={(v) => handleField("extendTargetAddresses", v)}

web/src/pages/endpoints/index.tsx

@@ -31,6 +31,23 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { Icon } from "@iconify/react";
 import { addToast } from "@heroui/toast";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faPlus,
@@ -102,6 +119,86 @@ interface EndpointFormData {
   apiKey: string;
 }
 
+// 可排序的表格行组件
+function SortableTableRow({
+  id,
+  result,
+  index,
+}: {
+  id: string;
+  result: any;
+  index: number;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <tr
+      ref={setNodeRef}
+      style={style}
+      className="border-b border-divider hover:bg-default-50"
+    >
+      <td className="px-3 py-3">
+        <div className="flex items-center gap-2">
+          <button
+            {...attributes}
+            {...listeners}
+            className="cursor-grab active:cursor-grabbing text-default-400 hover:text-default-600"
+          >
+            <FontAwesomeIcon icon={faGrip} />
+          </button>
+          <span className="text-small">{result.name}</span>
+        </div>
+      </td>
+      <td className="px-3 py-3 text-small font-mono text-xs">
+        {result.url}
+        {result.apiPath}
+      </td>
+      <td className="px-3 py-3 text-small">
+        <span
+          className={`font-mono ${
+            result.status === "success"
+              ? "text-success"
+              : result.status === "low_version"
+                ? "text-warning"
+                : "text-danger"
+          }`}
+        >
+          {result.version}
+        </span>
+      </td>
+      <td className="px-3 py-3">
+        <div className="flex flex-col gap-1">
+          <span
+            className={`text-xs ${
+              result.status === "success"
+                ? "text-success"
+                : result.status === "low_version"
+                  ? "text-warning"
+                  : "text-danger"
+            }`}
+          >
+            {result.canImport ? "✓ 可导入" : "✗ 不可导入"}
+          </span>
+          <span className="text-xs text-default-400">{result.message}</span>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
 export default function EndpointsPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -138,8 +235,17 @@ export default function EndpointsPage() {
   } = useDisclosure();
 
   const [importValidateResults, setImportValidateResults] = useState<any[]>([]);
+  const [sortedValidateResults, setSortedValidateResults] = useState<any[]>([]);
   const [importFileData, setImportFileData] = useState<any>(null);
 
+  // 拖拽传感器配置
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
   const {
     isOpen: isAddOpen,
     onOpen: onAddOpen,
@@ -559,7 +665,9 @@ export default function EndpointsPage() {
       }
 
       // 关闭导入窗口，显示验证结果窗口
-      setImportValidateResults(validateResult.results || []);
+      const results = validateResult.results || [];
+      setImportValidateResults(results);
+      setSortedValidateResults(results); // 初始化排序结果
       onImportOpenChange();
       onImportValidateOpen();
     } catch (error) {
@@ -575,10 +683,24 @@ export default function EndpointsPage() {
     }
   };
 
+  // 处理拖拽结束事件
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setSortedValidateResults((items) => {
+        const oldIndex = items.findIndex((item, idx) => `item-${idx}` === active.id);
+        const newIndex = items.findIndex((item, idx) => `item-${idx}` === over.id);
+
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  };
+
   // 确认导入 - 只导入可导入的主控
   const handleConfirmImport = async () => {
-    // 筛选出可导入的主控
-    const importableEndpoints = importValidateResults
+    // 筛选出可导入的主控，使用排序后的结果
+    const importableEndpoints = sortedValidateResults
       .filter((result) => result.canImport)
       .map((result) => ({
         name: result.name,
@@ -621,6 +743,7 @@ export default function EndpointsPage() {
         setSelectedFile(null);
         setImportFileData(null);
         setImportValidateResults([]);
+        setSortedValidateResults([]);
         if (fileInputRef.current) {
           fileInputRef.current.value = "";
         }
@@ -1885,78 +2008,52 @@ export default function EndpointsPage() {
               <ModalBody>
                 <div className="flex flex-col gap-4">
                   <p className="text-small text-default-500">
-                    共检测到 {importValidateResults.length} 个主控，请查看验证结果：
+                    共检测到 {importValidateResults.length} 个主控，请查看验证结果（可拖动排序）：
                   </p>
                   <div className="max-h-[400px] overflow-y-auto">
-                    <table className="w-full">
-                      <thead className="sticky top-0 bg-default-100 z-10">
-                        <tr>
-                          <th className="text-left px-3 py-2 text-small font-semibold">
-                            名称
-                          </th>
-                          <th className="text-left px-3 py-2 text-small font-semibold">
-                            URL
-                          </th>
-                          <th className="text-left px-3 py-2 text-small font-semibold">
-                            版本
-                          </th>
-                          <th className="text-left px-3 py-2 text-small font-semibold">
-                            状态
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {importValidateResults.map((result, index) => (
-                          <tr
-                            key={index}
-                            className="border-b border-divider hover:bg-default-50"
-                          >
-                            <td className="px-3 py-3 text-small">
-                              {result.name}
-                            </td>
-                            <td className="px-3 py-3 text-small font-mono text-xs">
-                              {result.url}
-                              {result.apiPath}
-                            </td>
-                            <td className="px-3 py-3 text-small">
-                              <span
-                                className={`font-mono ${
-                                  result.status === "success"
-                                    ? "text-success"
-                                    : result.status === "low_version"
-                                      ? "text-warning"
-                                      : "text-danger"
-                                }`}
-                              >
-                                {result.version}
-                              </span>
-                            </td>
-                            <td className="px-3 py-3">
-                              <div className="flex flex-col gap-1">
-                                <span
-                                  className={`text-xs ${
-                                    result.status === "success"
-                                      ? "text-success"
-                                      : result.status === "low_version"
-                                        ? "text-warning"
-                                        : "text-danger"
-                                  }`}
-                                >
-                                  {result.canImport ? "✓ 可导入" : "✗ 不可导入"}
-                                </span>
-                                <span className="text-xs text-default-400">
-                                  {result.message}
-                                </span>
-                              </div>
-                            </td>
+                    <DndContext
+                      sensors={sensors}
+                      collisionDetection={closestCenter}
+                      onDragEnd={handleDragEnd}
+                    >
+                      <table className="w-full">
+                        <thead className="sticky top-0 bg-default-100 z-10">
+                          <tr>
+                            <th className="text-left px-3 py-2 text-small font-semibold">
+                              名称
+                            </th>
+                            <th className="text-left px-3 py-2 text-small font-semibold">
+                              URL
+                            </th>
+                            <th className="text-left px-3 py-2 text-small font-semibold">
+                              版本
+                            </th>
+                            <th className="text-left px-3 py-2 text-small font-semibold">
+                              状态
+                            </th>
                           </tr>
-                        ))}
-                      </tbody>
-                    </table>
+                        </thead>
+                        <tbody>
+                          <SortableContext
+                            items={sortedValidateResults.map((_, idx) => `item-${idx}`)}
+                            strategy={verticalListSortingStrategy}
+                          >
+                            {sortedValidateResults.map((result, index) => (
+                              <SortableTableRow
+                                key={`item-${index}`}
+                                id={`item-${index}`}
+                                result={result}
+                                index={index}
+                              />
+                            ))}
+                          </SortableContext>
+                        </tbody>
+                      </table>
+                    </DndContext>
                   </div>
                   <div className="rounded-lg bg-default-100 p-3">
                     <p className="text-xs text-default-600">
-                      注意：只有版本 ≥ 1.10.0 的主控才会被导入，低版本或连接失败的主控将被自动跳过。
+                      注意：只有版本 ≥ 1.10.0 的主控才会被导入，低版本或连接失败的主控将被自动跳过。拖动行可调整导入顺序。
                     </p>
                   </div>
                 </div>
@@ -1969,6 +2066,7 @@ export default function EndpointsPage() {
                   onPress={() => {
                     onClose();
                     setImportValidateResults([]);
+                    setSortedValidateResults([]);
                     setImportFileData(null);
                   }}
                 >