From 1d23bf1773bcea1d23f1a3c15217e712a7119132 Mon Sep 17 00:00:00 2001
From: jocayn <1579649885@qq.com>
Date: Sat, 13 Jun 2026 19:17:15 +0800
Subject: [PATCH] feat: restrict table height to prevent scrolling and add
 drag-and-drop sorting

---
 public/index.html | 47 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3f41258..85cdedf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
   <title>CatMata Sub2Proxy 控制面板</title>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/lucide@latest"></script>
+  <script src="https://unpkg.com/sortablejs@1.15.2/Sortable.min.js"></script>
   <style>
     :root {
       --bg-main: #0b0f19;
@@ -330,11 +331,24 @@
 
     /* Proxy Nodes view */
     .table-container {
-      max-height: 480px;
+      max-height: 380px;
       overflow-y: auto;
       overflow-x: auto;
     }
 
+    /* Sortable Dragging Styling */
+    .sortable-ghost {
+      background: rgba(139, 92, 246, 0.1) !important;
+      border-left: 2px solid var(--accent-purple) !important;
+      opacity: 0.85;
+    }
+    .drag-handle {
+      cursor: grab;
+    }
+    .drag-handle:active {
+      cursor: grabbing;
+    }
+
     table {
       width: 100%;
       border-collapse: collapse;
@@ -756,6 +770,7 @@
             <table>
               <thead>
                 <tr>
+                  <th style="width: 50px; text-align: center;">排序</th>
                   <th>解析名 (Tag)</th>
                   <th>代理名</th>
                   <th>协议 (Type)</th>
@@ -766,7 +781,7 @@
               </thead>
               <tbody id="proxies-list">
                 <tr>
-                  <td colspan="6" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
+                  <td colspan="7" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
                     请先点击右上角 “一键拉取” 按钮解析节点
                   </td>
                 </tr>
@@ -938,6 +953,29 @@
       updateLatestUrls();
       loadSubscriptions();
       loadDnsTemplates();
+
+      // Initialize Sortable on proxies list
+      const el = document.getElementById('proxies-list');
+      new Sortable(el, {
+        handle: '.drag-handle',
+        animation: 150,
+        ghostClass: 'sortable-ghost',
+        onEnd: function (evt) {
+          const oldIndex = evt.oldIndex;
+          const newIndex = evt.newIndex;
+          
+          if (oldIndex === newIndex) return;
+          if (proxies.length === 0) return;
+          
+          // Update memory proxies array order
+          const movedItem = proxies.splice(oldIndex, 1)[0];
+          proxies.splice(newIndex, 0, movedItem);
+          
+          // Rerender table to update button dataset index
+          renderProxiesTable();
+          log(`调整代理节点顺序：从位置 ${oldIndex + 1} 移动到 ${newIndex + 1}`);
+        }
+      });
     });
 
     async function loadAppConfig() {
@@ -1209,7 +1247,7 @@
       if (proxies.length === 0) {
         list.innerHTML = `
           <tr>
-            <td colspan="6" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
+            <td colspan="7" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
               未提取到任何代理节点
             </td>
           </tr>
@@ -1225,6 +1263,9 @@
         const server = node.server || '';
         const port = node.port || node.server_port || '';
         tr.innerHTML = `
+          <td class="drag-handle" style="text-align: center; color: var(--text-secondary);">
+            <i data-lucide="grip-vertical" style="width: 16px; height: 16px;"></i>
+          </td>
           <td style="font-weight: 500;" title="${escapeHtml(parsedName)}">${escapeHtml(parsedName)}</td>
           <td title="${escapeHtml(proxyName)}">${escapeHtml(proxyName)}</td>
           <td><span class="node-proto proto-${escapeHtml(nodeType.toLowerCase())}">${escapeHtml(nodeType)}</span></td>