fix #288

Author: cppla

web/index.html

@@ -55,6 +55,7 @@
             <label class="select-field">
                 <span>排序</span>
                 <select id="sortSelect">
+                    <option value="config">配置顺序</option>
                     <option value="name">节点</option>
                     <option value="status">在线状态</option>
                     <option value="load">负载</option>
@@ -65,7 +66,7 @@
                     <option value="loss">丢包</option>
                 </select>
             </label>
-            <button id="sortDirection" class="icon-text" title="切换排序方向">降序</button>
+            <button id="sortDirection" class="icon-text" title="切换排序方向">升序</button>
         </section>
 
         <section id="panel-servers" class="panel active" aria-labelledby="主机">
@@ -200,6 +201,6 @@ <h3 id="detailTitle" class="modal-title">节点详情</h3>
         <a href="https://github.com/cppla/ServerStatus" target="_blank" rel="noopener">ServerStatus中文版</a>
     </footer>
 
-    <script src="js/app.js?v=20260710-1" defer></script>
+    <script src="js/app.js?v=20260722-1" defer></script>
 </body>
 </html>

web/js/app.js

@@ -9,7 +9,7 @@ const S = {
   layoutCompact: null,
   osOptionsSignature: '',
   suppressStatsReloadUntil: 0,
-  filters: { query: '', status: 'all', os: 'all', sort: 'name', dir: 'desc' },
+  filters: { query: '', status: 'all', os: 'all', sort: 'config', dir: 'asc' },
   admin: {
     token: localStorage.getItem('serverstatusAdminToken') || '',
     enabled: false,
@@ -197,6 +197,7 @@ async function fetchData(){
       const base = [server.name || '-', server.location || '-', server.type || '-'].join('|');
       const key = `${base}#${index + 1}`;
       server._key = key;
+      server._order = index;
       if(!S.hist[key]) S.hist[key] = { cu: [], ct: [], cm: [] };
       if(!S.loadHist[key]) S.loadHist[key] = { l1: [], l5: [], l15: [] };
       pushHistory(S.hist[key].cu, server.time_10010);
@@ -239,6 +240,7 @@ function visibleServers(){
     const dir = S.filters.dir === 'asc' ? 1 : -1;
     const ma = metrics(a), mb = metrics(b);
     const value = (server, m) => ({
+      config: num(server._order),
       name: String(server.name || ''),
       type: String(server.type || ''),
       location: String(server.location || ''),
@@ -742,7 +744,12 @@ function bindFilters(){
   });
   $('osFilter').addEventListener('change', e => { S.filters.os = e.target.value; renderServersViewNow(); });
   $('osFilter').addEventListener('blur', renderOsOptions);
-  $('sortSelect').addEventListener('change', e => { S.filters.sort = e.target.value; renderServersViewNow(); });
+  $('sortSelect').addEventListener('change', e => {
+    S.filters.sort = e.target.value;
+    if(S.filters.sort === 'config') S.filters.dir = 'asc';
+    $('sortDirection').textContent = S.filters.dir === 'desc' ? '降序' : '升序';
+    renderServersViewNow();
+  });
   $('sortDirection').addEventListener('click', () => {
     S.filters.dir = S.filters.dir === 'desc' ? 'asc' : 'desc';
     $('sortDirection').textContent = S.filters.dir === 'desc' ? '降序' : '升序';