feat: add token list sorting and pagination enhancements

controller/token.go

@@ -16,7 +16,10 @@ func GetAllTokens(c *gin.Context) {
 	if p < 0 {
 		p = 0
 	}
-	tokens, err := model.GetAllUserTokens(userId, p*config.ItemsPerPage, config.ItemsPerPage)
+
+	order := c.Query("order")
+	tokens, err := model.GetAllUserTokens(userId, p*config.ItemsPerPage, config.ItemsPerPage, order)
+
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,

model/token.go

@@ -25,10 +25,21 @@ type Token struct {
 	UsedQuota      int64  `json:"used_quota" gorm:"default:0"` // used quota
 }
 
-func GetAllUserTokens(userId int, startIdx int, num int) ([]*Token, error) {
+func GetAllUserTokens(userId int, startIdx int, num int, order string) ([]*Token, error) {
 	var tokens []*Token
 	var err error
-	err = DB.Where("user_id = ?", userId).Order("id desc").Limit(num).Offset(startIdx).Find(&tokens).Error
+	query := DB.Where("user_id = ?", userId)
+	
+	switch order {
+	case "remain_quota":
+		query = query.Order("unlimited_quota desc, remain_quota desc")
+	case "used_quota":
+		query = query.Order("used_quota desc")
+	default:
+		query = query.Order("id desc")
+	}
+	
+	err = query.Limit(num).Offset(startIdx).Find(&tokens).Error
 	return tokens, err
 }
 

web/default/src/components/TokensTable.js

@@ -48,9 +48,10 @@ const TokensTable = () => {
   const [searching, setSearching] = useState(false);
   const [showTopUpModal, setShowTopUpModal] = useState(false);
   const [targetTokenIdx, setTargetTokenIdx] = useState(0);
+  const [orderBy, setOrderBy] = useState('');
 
   const loadTokens = async (startIdx) => {
-    const res = await API.get(`/api/token/?p=${startIdx}`);
+    const res = await API.get(`/api/token/?p=${startIdx}&order=${orderBy}`);
     const { success, message, data } = res.data;
     if (success) {
       if (startIdx === 0) {
@@ -70,7 +71,7 @@ const TokensTable = () => {
     (async () => {
       if (activePage === Math.ceil(tokens.length / ITEMS_PER_PAGE) + 1) {
         // In this case we have to load more data and then append them.
-        await loadTokens(activePage - 1);
+        await loadTokens(activePage - 1, orderBy);
       }
       setActivePage(activePage);
     })();
@@ -160,12 +161,12 @@ const TokensTable = () => {
   }
 
   useEffect(() => {
-    loadTokens(0)
+    loadTokens(0, orderBy)
       .then()
       .catch((reason) => {
         showError(reason);
       });
-  }, []);
+  }, [orderBy]);
 
   const manageToken = async (id, action, idx) => {
     let data = { id };
@@ -205,6 +206,7 @@ const TokensTable = () => {
       // if keyword is blank, load files instead.
       await loadTokens(0);
       setActivePage(1);
+      setOrderBy('');
       return;
     }
     setSearching(true);
@@ -243,6 +245,11 @@ const TokensTable = () => {
     setLoading(false);
   };
 
+  const handleOrderByChange = (e, { value }) => {
+    setOrderBy(value);
+    setActivePage(1);
+  };
+
   return (
     <>
       <Form onSubmit={searchTokens}>
@@ -427,6 +434,18 @@ const TokensTable = () => {
                 添加新的令牌
               </Button>
               <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
+              <Dropdown
+                placeholder='排序方式'
+                selection
+                options={[
+                  { key: '', text: '默认排序', value: '' },
+                  { key: 'remain_quota', text: '按剩余额度排序', value: 'remain_quota' },
+                  { key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
+                ]}
+                value={orderBy}
+                onChange={handleOrderByChange}
+                style={{ marginLeft: '10px' }}
+              />
               <Pagination
                 floated='right'
                 activePage={activePage}