Merge pull request #751 from atoz03/feature/account-sort-toggle [skip ci]

feat(accounts): 支持账户排序正序/倒序切换

web/admin-spa/package-lock.json

@@ -1157,6 +1157,7 @@
       "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
       "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -1351,6 +1352,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1587,6 +1589,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -3060,13 +3063,15 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash-unified": {
       "version": "1.0.3",
@@ -3618,6 +3623,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3764,6 +3770,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -3789,7 +3796,7 @@
     },
     "node_modules/prettier-plugin-tailwindcss": {
       "version": "0.6.14",
-      "resolved": "https://registry.npmmirror.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz",
       "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==",
       "dev": true,
       "license": "MIT",
@@ -4028,6 +4035,7 @@
       "integrity": "sha512-33xGNBsDJAkzt0PvninskHlWnTIPgDtTwhg0U38CUoNP/7H6wI2Cz6dUeoNPbjdTdsYTGuiFFASuUOWovH0SyQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4525,6 +4533,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4915,6 +4924,7 @@
       "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -5115,6 +5125,7 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.18.tgz",
       "integrity": "sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.18",
         "@vue/compiler-sfc": "3.5.18",

web/admin-spa/src/views/AccountsView.vue

@@ -19,12 +19,12 @@
                 class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
               ></div>
               <CustomDropdown
-                v-model="accountSortBy"
-                icon="fa-sort-amount-down"
+                v-model="accountsSortBy"
+                :icon="accountsSortOrder === 'asc' ? 'fa-sort-amount-up' : 'fa-sort-amount-down'"
                 icon-color="text-indigo-500"
                 :options="sortOptions"
                 placeholder="选择排序"
-                @change="sortAccounts()"
+                @change="handleDropdownSort"
               />
             </div>
 
@@ -1873,8 +1873,7 @@ const { showConfirmModal, confirmOptions, showConfirm, handleConfirm, handleCanc
 // 数据状态
 const accounts = ref([])
 const accountsLoading = ref(false)
-const accountSortBy = ref('name')
-const accountsSortBy = ref('')
+const accountsSortBy = ref('name')
 const accountsSortOrder = ref('asc')
 const apiKeys = ref([]) // 保留用于其他功能（如删除账户时显示绑定信息）
 const bindingCounts = ref({}) // 轻量级绑定计数，用于显示"绑定: X 个API Key"
@@ -2735,7 +2734,10 @@ const loadClaudeUsage = async () => {
   }
 }
 
-// 排序账户
+// 记录上一次的排序字段，用于判断下拉选择是否是同一字段被再次选择
+let lastDropdownSortField = 'name'
+
+// 排序账户（表头点击使用）
 const sortAccounts = (field) => {
   if (field) {
     if (accountsSortBy.value === field) {
@@ -2744,9 +2746,23 @@ const sortAccounts = (field) => {
       accountsSortBy.value = field
       accountsSortOrder.value = 'asc'
     }
+    // 同步下拉选择器的状态记录
+    lastDropdownSortField = field
   }
 }
 
+// 下拉选择器排序处理（支持再次选择同一选项时切换排序方向）
+const handleDropdownSort = (field) => {
+  if (field === lastDropdownSortField) {
+    // 选择同一字段，切换排序方向
+    accountsSortOrder.value = accountsSortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    // 选择不同字段，重置为升序
+    accountsSortOrder.value = 'asc'
+  }
+  lastDropdownSortField = field
+}
+
 // 格式化数字（与原版保持一致）
 const formatNumber = (num) => {
   if (num === null || num === undefined) return '0'
@@ -3993,20 +4009,20 @@ watch(
   }
 )
 
-// 监听排序选择变化
-watch(accountSortBy, (newVal) => {
-  const fieldMap = {
-    name: 'name',
-    dailyTokens: 'dailyTokens',
-    dailyRequests: 'dailyRequests',
-    totalTokens: 'totalTokens',
-    lastUsed: 'lastUsed'
-  }
-
-  if (fieldMap[newVal]) {
-    sortAccounts(fieldMap[newVal])
-  }
-})
+// 监听排序选择变化 - 已重构为 handleDropdownSort，此处注释保留原逻辑参考
+// watch(accountSortBy, (newVal) => {
+//   const fieldMap = {
+//     name: 'name',
+//     dailyTokens: 'dailyTokens',
+//     dailyRequests: 'dailyRequests',
+//     totalTokens: 'totalTokens',
+//     lastUsed: 'lastUsed'
+//   }
+//
+//   if (fieldMap[newVal]) {
+//     sortAccounts(fieldMap[newVal])
+//   }
+// })
 
 watch(currentPage, () => {
   updateSelectAllState()