fix: 修复 web 端手动排序问题

web/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview --port 5050",
     "lint": "eslint . --ext .js,.vue",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "test": "node test/test-agent-messages.js"
+    "test": "node test/test-agent-messages.js && node test/test-host-sort.js"
   },
   "dependencies": {
     "@codemirror/lang-cpp": "^6.0.2",

web/src/utils/host-sort.js

@@ -0,0 +1,22 @@
+const hostNameCollator = new Intl.Collator('zh-CN-u-co-pinyin', {
+  numeric: true,
+  sensitivity: 'base'
+})
+
+const toSortableText = (value) => String(value ?? '')
+
+const compareIds = (left, right) => {
+  const leftId = toSortableText(left)
+  const rightId = toSortableText(right)
+  if (leftId === rightId) return 0
+  return leftId < rightId ? -1 : 1
+}
+
+export const compareHostNames = (left, right) => {
+  const result = hostNameCollator.compare(
+    toSortableText(left?.name),
+    toSortableText(right?.name)
+  )
+  if (result !== 0) return result
+  return compareIds(left?.id, right?.id)
+}

web/src/views/server/components/host-table.vue

@@ -21,7 +21,7 @@
         label="名称"
         property="name"
         sortable
-        :sort-method="(a, b) => a.name - b.name"
+        :sort-method="compareHostNames"
       >
         <template #default="scope">
           <span v-if="scope.row.connectType !== 'rdp'">
@@ -138,6 +138,7 @@ import { ref, computed, getCurrentInstance, nextTick } from 'vue'
 import { ArrowDown } from '@element-plus/icons-vue'
 import useMobileWidth from '@/composables/useMobileWidth'
 import clipboard from '@/utils/clipboard'
+import { compareHostNames } from '@/utils/host-sort'
 
 const { proxy: { $message, $messageBox, $api, $router, $store } } = getCurrentInstance()
 

web/test/test-host-sort.js

@@ -0,0 +1,51 @@
+import assert from 'node:assert/strict'
+import { compareHostNames } from '../src/utils/host-sort.js'
+
+const sortHosts = (hosts) => [...hosts].sort(compareHostNames)
+const sortedNames = (hosts) => sortHosts(hosts).map(({ name }) => name)
+
+assert.deepEqual(
+  sortedNames([
+    { id: '3', name: 't10' },
+    { id: '1', name: 't1' },
+    { id: '2', name: 't2' },
+  ]),
+  ['t1', 't2', 't10']
+)
+
+assert.deepEqual(
+  sortedNames([
+    { id: '4', name: '闲置10' },
+    { id: '2', name: '闲云' },
+    { id: '3', name: '闲置2' },
+    { id: '1', name: '闲鱼' },
+  ]),
+  ['闲鱼', '闲云', '闲置2', '闲置10']
+)
+
+assert.deepEqual(
+  sortHosts([
+    { id: 'b', name: 'T1', index: 100 },
+    { id: 'a', name: 't1', index: 1 },
+  ]).map(({ id }) => id),
+  ['a', 'b']
+)
+
+assert.deepEqual(
+  sortHosts([
+    { id: 'b', name: null },
+    { id: 'a' },
+    { id: 'c', name: 'server' },
+  ]).map(({ id }) => id),
+  ['a', 'b', 'c']
+)
+
+assert.deepEqual(
+  sortHosts([
+    { id: 'later', name: 't10', index: 100 },
+    { id: 'earlier', name: 't2', index: 1 },
+  ]).map(({ id }) => id),
+  ['earlier', 'later']
+)
+
+console.log('✅ 实例名称排序测试全部通过')