Ecosystem/ai-gateway
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: support paging / sorting (#64)

Browse Source 
* ✨ feat: support paging / sorting

* 🔥 del: delete unused files
This commit is contained in:
Buer 2024-02-08 03:41:51 +08:00 committed by GitHub
parent 3789c30154
commit 57cd68e7e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 796 additions and 691 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
common/gin.go
View File

@ -67,3 +67,10 @@ func AbortWithMessage(c *gin.Context, statusCode int, message string) {
c.Abort()
LogError(c.Request.Context(), message)
}
func APIRespondWithError(c *gin.Context, status int, err error) {
c.JSON(status, gin.H{
"success": false,
"message": err.Error(),
})
}

2
controller/channel-billing.go
View File

@ -104,7 +104,7 @@ func UpdateChannelBalance(c *gin.Context) {
}
func updateAllChannelsBalance() error {
channels, err := model.GetAllChannels(0, 0, true)
channels, err := model.GetAllChannels()
if err != nil {
return err
}

2
controller/channel-test.go
View File

@ -167,7 +167,7 @@ func testAllChannels(notify bool) error {
}
testAllChannelsRunning = true
testAllChannelsLock.Unlock()
channels, err := model.GetAllChannels(0, 0, true)
channels, err := model.GetAllChannels()
if err != nil {
return err
}

30
controller/channel.go
View File

@ -10,34 +10,16 @@ import (
"github.com/gin-gonic/gin"
)
func GetAllChannels(c *gin.Context) {
p, _ := strconv.Atoi(c.Query("p"))
if p < 0 {
p = 0
}
channels, err := model.GetAllChannels(p*common.ItemsPerPage, common.ItemsPerPage, false)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
func GetChannelsList(c *gin.Context) {
var params model.GenericParams
if err := c.ShouldBindQuery(&params); err != nil {
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{
"success": true,
"message": "",
"data": channels,
})
}
func SearchChannels(c *gin.Context) {
keyword := c.Query("keyword")
channels, err := model.SearchChannels(keyword)
channels, err := model.GetChannelsList(&params)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{

49
controller/log.go
View File

@ -9,24 +9,16 @@ import (
"github.com/gin-gonic/gin"
)
func GetAllLogs(c *gin.Context) {
p, _ := strconv.Atoi(c.Query("p"))
if p < 0 {
p = 0
func GetLogsList(c *gin.Context) {
var params model.LogsListParams
if err := c.ShouldBindQuery(&params); err != nil {
common.APIRespondWithError(c, http.StatusOK, err)
return
}
logType, _ := strconv.Atoi(c.Query("type"))
startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
username := c.Query("username")
tokenName := c.Query("token_name")
modelName := c.Query("model_name")
channel, _ := strconv.Atoi(c.Query("channel"))
logs, err := model.GetAllLogs(logType, startTimestamp, endTimestamp, modelName, username, tokenName, p*common.ItemsPerPage, common.ItemsPerPage, channel)
logs, err := model.GetLogsList(&params)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{
@ -36,23 +28,18 @@ func GetAllLogs(c *gin.Context) {
})
}
func GetUserLogs(c *gin.Context) {
p, _ := strconv.Atoi(c.Query("p"))
if p < 0 {
p = 0
}
func GetUserLogsList(c *gin.Context) {
userId := c.GetInt("id")
logType, _ := strconv.Atoi(c.Query("type"))
startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
tokenName := c.Query("token_name")
modelName := c.Query("model_name")
logs, err := model.GetUserLogs(userId, logType, startTimestamp, endTimestamp, modelName, tokenName, p*common.ItemsPerPage, common.ItemsPerPage)
var params model.LogsListParams
if err := c.ShouldBindQuery(&params); err != nil {
common.APIRespondWithError(c, http.StatusOK, err)
return
}
logs, err := model.GetUserLogsList(userId, &params)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{

39
controller/redemption.go
View File

@ -1,42 +1,24 @@
package controller
import (
"github.com/gin-gonic/gin"
"net/http"
"one-api/common"
"one-api/model"
"strconv"
"github.com/gin-gonic/gin"
)
func GetAllRedemptions(c *gin.Context) {
p, _ := strconv.Atoi(c.Query("p"))
if p < 0 {
p = 0
}
redemptions, err := model.GetAllRedemptions(p*common.ItemsPerPage, common.ItemsPerPage)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
func GetRedemptionsList(c *gin.Context) {
var params model.GenericParams
if err := c.ShouldBindQuery(&params); err != nil {
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{
"success": true,
"message": "",
"data": redemptions,
})
return
}
func SearchRedemptions(c *gin.Context) {
keyword := c.Query("keyword")
redemptions, err := model.SearchRedemptions(keyword)
redemptions, err := model.GetRedemptionsList(&params)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{
@ -44,7 +26,6 @@ func SearchRedemptions(c *gin.Context) {
"message": "",
"data": redemptions,
})
return
}
func GetRedemption(c *gin.Context) {
@ -69,7 +50,6 @@ func GetRedemption(c *gin.Context) {
"message": "",
"data": redemption,
})
return
}
func AddRedemption(c *gin.Context) {
@ -129,7 +109,6 @@ func AddRedemption(c *gin.Context) {
"message": "",
"data": keys,
})
return
}
func DeleteRedemption(c *gin.Context) {
@ -146,7 +125,6 @@ func DeleteRedemption(c *gin.Context) {
"success": true,
"message": "",
})
return
}
func UpdateRedemption(c *gin.Context) {
@ -188,5 +166,4 @@ func UpdateRedemption(c *gin.Context) {
"message": "",
"data": cleanRedemption,
})
return
}

31
controller/token.go
View File

@ -9,36 +9,17 @@ import (
"github.com/gin-gonic/gin"
)
func GetAllTokens(c *gin.Context) {
func GetUserTokensList(c *gin.Context) {
userId := c.GetInt("id")
p, _ := strconv.Atoi(c.Query("p"))
if p < 0 {
p = 0
}
tokens, err := model.GetAllUserTokens(userId, p*common.ItemsPerPage, common.ItemsPerPage)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
var params model.GenericParams
if err := c.ShouldBindQuery(&params); err != nil {
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{
"success": true,
"message": "",
"data": tokens,
})
}
func SearchTokens(c *gin.Context) {
userId := c.GetInt("id")
keyword := c.Query("keyword")
tokens, err := model.SearchUserTokens(userId, keyword)
tokens, err := model.GetUserTokensList(userId, &params)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{

30
controller/user.go
View File

@ -176,34 +176,16 @@ func Register(c *gin.Context) {
})
}
func GetAllUsers(c *gin.Context) {
p, _ := strconv.Atoi(c.Query("p"))
if p < 0 {
p = 0
}
users, err := model.GetAllUsers(p*common.ItemsPerPage, common.ItemsPerPage)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
func GetUsersList(c *gin.Context) {
var params model.GenericParams
if err := c.ShouldBindQuery(&params); err != nil {
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{
"success": true,
"message": "",
"data": users,
})
}
func SearchUsers(c *gin.Context) {
keyword := c.Query("keyword")
users, err := model.SearchUsers(keyword)
users, err := model.GetUsersList(&params)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": err.Error(),
})
common.APIRespondWithError(c, http.StatusOK, err)
return
}
c.JSON(http.StatusOK, gin.H{

40
model/channel.go
View File

@ -29,23 +29,35 @@ type Channel struct {
TestModel string `json:"test_model" gorm:"type:varchar(50);default:''"`
}
func GetAllChannels(startIdx int, num int, selectAll bool) ([]*Channel, error) {
var channels []*Channel
var err error
if selectAll {
err = DB.Order("id desc").Find(&channels).Error
} else {
err = DB.Order("id desc").Limit(num).Offset(startIdx).Omit("key").Find(&channels).Error
}
return channels, err
var allowedChannelOrderFields = map[string]bool{
"id": true,
"name": true,
"group": true,
"type": true,
"status": true,
"response_time": true,
"balance": true,
"priority": true,
}
func SearchChannels(keyword string) (channels []*Channel, err error) {
keyCol := "`key`"
if common.UsingPostgreSQL {
keyCol = `"key"`
func GetChannelsList(params *GenericParams) (*DataResult, error) {
var channels []*Channel
db := DB.Omit("key")
if params.Keyword != "" {
keyCol := "`key`"
if common.UsingPostgreSQL {
keyCol = `"key"`
}
db = db.Where("id = ? or name LIKE ? or "+keyCol+" = ?", common.String2Int(params.Keyword), params.Keyword+"%", params.Keyword)
}
err = DB.Omit("key").Where("id = ? or name LIKE ? or "+keyCol+" = ?", common.String2Int(keyword), keyword+"%", keyword).Find(&channels).Error
return PaginateAndOrder(db, &params.PaginationParams, &channels, allowedChannelOrderFields)
}
func GetAllChannels() ([]*Channel, error) {
var channels []*Channel
err := DB.Order("id desc").Find(&channels).Error
return channels, err
}

83
model/common.go
View File

@ -3,8 +3,91 @@ package model
import (
"fmt"
"one-api/common"
"strings"
"gorm.io/gorm"
)
type GenericParams struct {
PaginationParams
Keyword string `form:"keyword"`
}
type PaginationParams struct {
Page int `form:"page"`
Size int `form:"size"`
Order string `form:"order"`
}
type DataResult struct {
Data interface{} `json:"data"`
Page int `json:"page"`
Size int `json:"size"`
TotalCount int64 `json:"total_count"`
}
func PaginateAndOrder(db *gorm.DB, params *PaginationParams, result interface{}, allowedOrderFields map[string]bool) (*DataResult, error) {
// 获取总数
var totalCount int64
err := db.Model(result).Count(&totalCount).Error
if err != nil {
return nil, err
}
fmt.Println("totalCount", totalCount)
// 分页
if params.Page < 1 {
params.Page = 1
}
if params.Size < 1 {
params.Size = common.ItemsPerPage
}
if params.Size > common.MaxRecentItems {
return nil, fmt.Errorf("size 参数不能超过 %d", common.MaxRecentItems)
}
offset := (params.Page - 1) * params.Size
db = db.Offset(offset).Limit(params.Size)
// 排序
if params.Order != "" {
orderFields := strings.Split(params.Order, ",")
for _, field := range orderFields {
field = strings.TrimSpace(field)
desc := strings.HasPrefix(field, "-")
if desc {
field = field[1:]
}
if !allowedOrderFields[field] {
return nil, fmt.Errorf("不允许对字段 '%s' 进行排序", field)
}
if desc {
field = field + " DESC"
}
db = db.Order(field)
}
} else {
// 默认排序
db = db.Order("id DESC")
}
// 查询
err = db.Find(result).Error
if err != nil {
return nil, err
}
// 返回结果
return &DataResult{
Data: result,
Page: params.Page,
Size: params.Size,
TotalCount: totalCount,
}, nil
}
func getDateFormat(groupType string) string {
var dateFormat string
if groupType == "day" {

105
model/log.go
View File

@ -74,56 +74,79 @@ func RecordConsumeLog(ctx context.Context, userId int, channelId int, promptToke
}
}
func GetAllLogs(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string, startIdx int, num int, channel int) (logs []*Log, err error) {
var tx *gorm.DB
if logType == LogTypeUnknown {
tx = DB
} else {
tx = DB.Where("type = ?", logType)
}
if modelName != "" {
tx = tx.Where("model_name = ?", modelName)
}
if username != "" {
tx = tx.Where("username = ?", username)
}
if tokenName != "" {
tx = tx.Where("token_name = ?", tokenName)
}
if startTimestamp != 0 {
tx = tx.Where("created_at >= ?", startTimestamp)
}
if endTimestamp != 0 {
tx = tx.Where("created_at <= ?", endTimestamp)
}
if channel != 0 {
tx = tx.Where("channel_id = ?", channel)
}
err = tx.Order("id desc").Limit(num).Offset(startIdx).Find(&logs).Error
return logs, err
type LogsListParams struct {
PaginationParams
LogType int `form:"log_type"`
StartTimestamp int64 `form:"start_timestamp"`
EndTimestamp int64 `form:"end_timestamp"`
ModelName string `form:"model_name"`
Username string `form:"username"`
TokenName string `form:"token_name"`
Channel int `form:"channel"`
}
func GetUserLogs(userId int, logType int, startTimestamp int64, endTimestamp int64, modelName string, tokenName string, startIdx int, num int) (logs []*Log, err error) {
var allowedLogsOrderFields = map[string]bool{
"created_at": true,
"channel_id": true,
"user_id": true,
"token_name": true,
"model_name": true,
"type": true,
}
func GetLogsList(params *LogsListParams) (*DataResult, error) {
var tx *gorm.DB
if logType == LogTypeUnknown {
tx = DB.Where("user_id = ?", userId)
var logs []*Log
if params.LogType == LogTypeUnknown {
tx = DB
} else {
tx = DB.Where("user_id = ? and type = ?", userId, logType)
tx = DB.Where("type = ?", params.LogType)
}
if modelName != "" {
tx = tx.Where("model_name = ?", modelName)
if params.ModelName != "" {
tx = tx.Where("model_name = ?", params.ModelName)
}
if tokenName != "" {
tx = tx.Where("token_name = ?", tokenName)
if params.Username != "" {
tx = tx.Where("username = ?", params.Username)
}
if startTimestamp != 0 {
tx = tx.Where("created_at >= ?", startTimestamp)
if params.TokenName != "" {
tx = tx.Where("token_name = ?", params.TokenName)
}
if endTimestamp != 0 {
tx = tx.Where("created_at <= ?", endTimestamp)
if params.StartTimestamp != 0 {
tx = tx.Where("created_at >= ?", params.StartTimestamp)
}
err = tx.Order("id desc").Limit(num).Offset(startIdx).Omit("id").Find(&logs).Error
return logs, err
if params.EndTimestamp != 0 {
tx = tx.Where("created_at <= ?", params.EndTimestamp)
}
if params.Channel != 0 {
tx = tx.Where("channel_id = ?", params.Channel)
}
return PaginateAndOrder(tx, &params.PaginationParams, &logs, allowedLogsOrderFields)
}
func GetUserLogsList(userId int, params *LogsListParams) (*DataResult, error) {
var logs []*Log
tx := DB.Where("user_id = ?", userId).Omit("id")
if params.LogType != LogTypeUnknown {
tx = DB.Where("type = ?", params.LogType)
}
if params.ModelName != "" {
tx = tx.Where("model_name = ?", params.ModelName)
}
if params.TokenName != "" {
tx = tx.Where("token_name = ?", params.TokenName)
}
if params.StartTimestamp != 0 {
tx = tx.Where("created_at >= ?", params.StartTimestamp)
}
if params.EndTimestamp != 0 {
tx = tx.Where("created_at <= ?", params.EndTimestamp)
}
return PaginateAndOrder(tx, &params.PaginationParams, &logs, allowedLogsOrderFields)
}
func SearchAllLogs(keyword string) (logs []*Log, err error) {

23
model/redemption.go
View File

@ -20,16 +20,23 @@ type Redemption struct {
Count int `json:"count" gorm:"-:all"` // only for api request
}
func GetAllRedemptions(startIdx int, num int) ([]*Redemption, error) {
var redemptions []*Redemption
var err error
err = DB.Order("id desc").Limit(num).Offset(startIdx).Find(&redemptions).Error
return redemptions, err
var allowedRedemptionslOrderFields = map[string]bool{
"id": true,
"name": true,
"status": true,
"quota": true,
"created_time": true,
"redeemed_time": true,
}
func SearchRedemptions(keyword string) (redemptions []*Redemption, err error) {
err = DB.Where("id = ? or name LIKE ?", common.String2Int(keyword), keyword+"%").Find(&redemptions).Error
return redemptions, err
func GetRedemptionsList(params *GenericParams) (*DataResult, error) {
var redemptions []*Redemption
db := DB
if params.Keyword != "" {
db = db.Where("id = ? or name LIKE ?", common.String2Int(params.Keyword), params.Keyword+"%")
}
return PaginateAndOrder(db, &params.PaginationParams, &redemptions, allowedRedemptionslOrderFields)
}
func GetRedemptionById(id int) (*Redemption, error) {

25
model/token.go
View File

@ -22,16 +22,25 @@ type Token struct {
UsedQuota int `json:"used_quota" gorm:"default:0"` // used quota
}
func GetAllUserTokens(userId int, startIdx int, num int) ([]*Token, error) {
var tokens []*Token
var err error
err = DB.Where("user_id = ?", userId).Order("id desc").Limit(num).Offset(startIdx).Find(&tokens).Error
return tokens, err
var allowedTokenOrderFields = map[string]bool{
"id": true,
"name": true,
"status": true,
"expired_time": true,
"created_time": true,
"remain_quota": true,
"used_quota": true,
}
func SearchUserTokens(userId int, keyword string) (tokens []*Token, err error) {
err = DB.Where("user_id = ?", userId).Where("name LIKE ?", keyword+"%").Find(&tokens).Error
return tokens, err
func GetUserTokensList(userId int, params *GenericParams) (*DataResult, error) {
var tokens []*Token
db := DB.Where("user_id = ?", userId)
if params.Keyword != "" {
db = db.Where("name LIKE ?", params.Keyword+"%")
}
return PaginateAndOrder(db, &params.PaginationParams, &tokens, allowedTokenOrderFields)
}
func ValidateUserToken(key string) (token *Token, err error) {

19
model/user.go
View File

@ -38,15 +38,22 @@ func GetMaxUserId() int {
return user.Id
}
func GetAllUsers(startIdx int, num int) (users []*User, err error) {
err = DB.Order("id desc").Limit(num).Offset(startIdx).Omit("password").Find(&users).Error
return users, err
var allowedUserOrderFields = map[string]bool{
"id": true,
"username": true,
"role": true,
"status": true,
"created_time": true,
}
func SearchUsers(keyword string) (users []*User, err error) {
err = DB.Omit("password").Where("id = ? or username LIKE ? or email LIKE ? or display_name LIKE ?", common.String2Int(keyword), keyword+"%", keyword+"%", keyword+"%").Find(&users).Error
func GetUsersList(params *GenericParams) (*DataResult, error) {
var users []*User
db := DB.Omit("password")
if params.Keyword != "" {
db = db.Where("id = ? or username LIKE ? or email LIKE ? or display_name LIKE ?", common.String2Int(params.Keyword), params.Keyword+"%", params.Keyword+"%", params.Keyword+"%")
}
return users, err
return PaginateAndOrder(db, &params.PaginationParams, &users, allowedUserOrderFields)
}
func GetUserById(id int, selectAll bool) (*User, error) {

20
router/api-router.go
View File

@ -48,8 +48,7 @@ func SetApiRouter(router *gin.Engine) {
adminRoute := userRoute.Group("/")
adminRoute.Use(middleware.AdminAuth())
{
adminRoute.GET("/", controller.GetAllUsers)
adminRoute.GET("/search", controller.SearchUsers)
adminRoute.GET("/", controller.GetUsersList)
adminRoute.GET("/:id", controller.GetUser)
adminRoute.POST("/", controller.CreateUser)
adminRoute.POST("/manage", controller.ManageUser)
@ -66,8 +65,7 @@ func SetApiRouter(router *gin.Engine) {
channelRoute := apiRouter.Group("/channel")
channelRoute.Use(middleware.AdminAuth())
{
channelRoute.GET("/", controller.GetAllChannels)
channelRoute.GET("/search", controller.SearchChannels)
channelRoute.GET("/", controller.GetChannelsList)
channelRoute.GET("/models", controller.ListModelsForAdmin)
channelRoute.GET("/:id", controller.GetChannel)
channelRoute.GET("/test", controller.TestAllChannels)
@ -82,8 +80,7 @@ func SetApiRouter(router *gin.Engine) {
tokenRoute := apiRouter.Group("/token")
tokenRoute.Use(middleware.UserAuth())
{
tokenRoute.GET("/", controller.GetAllTokens)
tokenRoute.GET("/search", controller.SearchTokens)
tokenRoute.GET("/", controller.GetUserTokensList)
tokenRoute.GET("/:id", controller.GetToken)
tokenRoute.POST("/", controller.AddToken)
tokenRoute.PUT("/", controller.UpdateToken)
@ -92,21 +89,20 @@ func SetApiRouter(router *gin.Engine) {
redemptionRoute := apiRouter.Group("/redemption")
redemptionRoute.Use(middleware.AdminAuth())
{
redemptionRoute.GET("/", controller.GetAllRedemptions)
redemptionRoute.GET("/search", controller.SearchRedemptions)
redemptionRoute.GET("/", controller.GetRedemptionsList)
redemptionRoute.GET("/:id", controller.GetRedemption)
redemptionRoute.POST("/", controller.AddRedemption)
redemptionRoute.PUT("/", controller.UpdateRedemption)
redemptionRoute.DELETE("/:id", controller.DeleteRedemption)
}
logRoute := apiRouter.Group("/log")
logRoute.GET("/", middleware.AdminAuth(), controller.GetAllLogs)
logRoute.GET("/", middleware.AdminAuth(), controller.GetLogsList)
logRoute.DELETE("/", middleware.AdminAuth(), controller.DeleteHistoryLogs)
logRoute.GET("/stat", middleware.AdminAuth(), controller.GetLogsStat)
logRoute.GET("/self/stat", middleware.UserAuth(), controller.GetLogsSelfStat)
logRoute.GET("/search", middleware.AdminAuth(), controller.SearchAllLogs)
logRoute.GET("/self", middleware.UserAuth(), controller.GetUserLogs)
logRoute.GET("/self/search", middleware.UserAuth(), controller.SearchUserLogs)
// logRoute.GET("/search", middleware.AdminAuth(), controller.SearchAllLogs)
logRoute.GET("/self", middleware.UserAuth(), controller.GetUserLogsList)
// logRoute.GET("/self/search", middleware.UserAuth(), controller.SearchUserLogs)
groupRoute := apiRouter.Group("/group")
groupRoute.Use(middleware.AdminAuth())
{

47
web/src/ui-component/TableHead.js Normal file
View File

@ -0,0 +1,47 @@
import PropTypes from 'prop-types';
import { TableCell, TableHead, TableRow, TableSortLabel } from '@mui/material';
const KeywordTableHead = ({ order, orderBy, headLabel, onRequestSort }) => {
const onSort = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
{headLabel.map((headCell) =>
headCell.hide && headCell.hide === true ? null : (
<TableCell
key={headCell.id}
align={headCell.align || 'left'}
// sortDirection={orderBy === headCell.id ? order : false}
sx={{ width: headCell.width, minWidth: headCell.minWidth }}
>
{headCell.disableSort ? (
headCell.label
) : (
<TableSortLabel
hideSortIcon
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={onSort(headCell.id)}
>
{headCell.label}
</TableSortLabel>
)}
</TableCell>
)
)}
</TableRow>
</TableHead>
);
};
export default KeywordTableHead;
KeywordTableHead.propTypes = {
order: PropTypes.oneOf(['asc', 'desc']),
orderBy: PropTypes.string,
onRequestSort: PropTypes.func,
headLabel: PropTypes.array
};

5
web/src/ui-component/TableToolBar.js
View File

@ -9,7 +9,7 @@ import { IconSearch } from '@tabler/icons-react';
// ----------------------------------------------------------------------
export default function TableToolBar({ filterName, handleFilterName, placeholder }) {
export default function TableToolBar({ placeholder }) {
const theme = useTheme();
const grey500 = theme.palette.grey[500];
@ -24,11 +24,10 @@ export default function TableToolBar({ filterName, handleFilterName, placeholder
>
<OutlinedInput
id="keyword"
name="keyword"
sx={{
minWidth: '100%'
}}
value={filterName}
onChange={handleFilterName}
placeholder={placeholder}
startAdornment={
<InputAdornment position="start">

21
web/src/views/Channel/component/TableHead.js
View File

@ -1,21 +0,0 @@
import { TableCell, TableHead, TableRow } from '@mui/material';
const ChannelTableHead = () => {
return (
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>名称</TableCell>
<TableCell>分组</TableCell>
<TableCell>类型</TableCell>
<TableCell>状态</TableCell>
<TableCell>响应时间</TableCell>
<TableCell>余额</TableCell>
<TableCell>优先级</TableCell>
<TableCell>操作</TableCell>
</TableRow>
</TableHead>
);
};
export default ChannelTableHead;

156
web/src/views/Channel/index.js
View File

@ -15,83 +15,53 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import { Button, IconButton, Card, Box, Stack, Container, Typography, Divider } from '@mui/material';
import ChannelTableRow from './component/TableRow';
import ChannelTableHead from './component/TableHead';
import KeywordTableHead from 'ui-component/TableHead';
import TableToolBar from 'ui-component/TableToolBar';
import { API } from 'utils/api';
import { ITEMS_PER_PAGE } from 'constants';
import { IconRefresh, IconHttpDelete, IconPlus, IconBrandSpeedtest, IconCoinYuan } from '@tabler/icons-react';
import EditeModal from './component/EditModal';
import { ITEMS_PER_PAGE } from 'constants';
// ----------------------------------------------------------------------
// CHANNEL_OPTIONS,
export default function ChannelPage() {
const [channels, setChannels] = useState([]);
const [activePage, setActivePage] = useState(0);
const [searching, setSearching] = useState(false);
const [page, setPage] = useState(0);
const [order, setOrder] = useState('desc');
const [orderBy, setOrderBy] = useState('id');
const [rowsPerPage, setRowsPerPage] = useState(ITEMS_PER_PAGE);
const [listCount, setListCount] = useState(0);
const [searchKeyword, setSearchKeyword] = useState('');
const [searching, setSearching] = useState(false);
const [channels, setChannels] = useState([]);
const [refreshFlag, setRefreshFlag] = useState(false);
const theme = useTheme();
const matchUpMd = useMediaQuery(theme.breakpoints.up('sm'));
const [openModal, setOpenModal] = useState(false);
const [editChannelId, setEditChannelId] = useState(0);
const loadChannels = async (startIdx) => {
setSearching(true);
try {
const res = await API.get(`/api/channel/?p=${startIdx}`);
const { success, message, data } = res.data;
if (success) {
if (startIdx === 0) {
setChannels(data);
} else {
let newChannels = [...channels];
newChannels.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
setChannels(newChannels);
}
} else {
showError(message);
}
} catch (error) {
console.error(error);
const handleSort = (event, id) => {
const isAsc = orderBy === id && order === 'asc';
if (id !== '') {
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(id);
}
setSearching(false);
};
const onPaginationChange = (event, activePage) => {
(async () => {
if (activePage === Math.ceil(channels.length / ITEMS_PER_PAGE)) {
// In this case we have to load more data and then append them.
await loadChannels(activePage);
}
setActivePage(activePage);
})();
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setPage(0);
setRowsPerPage(parseInt(event.target.value, 10));
};
const searchChannels = async (event) => {
event.preventDefault();
if (searchKeyword === '') {
await loadChannels(0);
setActivePage(0);
return;
}
setSearching(true);
try {
const res = await API.get(`/api/channel/search?keyword=${searchKeyword}`);
const { success, message, data } = res.data;
if (success) {
setChannels(data);
setActivePage(0);
} else {
showError(message);
}
} catch (error) {
console.error(error);
}
setSearching(false);
};
const handleSearchKeyword = (event) => {
setSearchKeyword(event.target.value);
const formData = new FormData(event.target);
setPage(0);
setSearchKeyword(formData.get('keyword'));
};
const manageChannel = async (id, action, value) => {
@ -141,7 +111,9 @@ export default function ChannelPage() {
// 处理刷新
const handleRefresh = async () => {
await loadChannels(activePage);
setOrderBy('id');
setOrder('desc');
setRefreshFlag(!refreshFlag);
};
// 处理测试所有启用渠道
@ -210,14 +182,36 @@ export default function ChannelPage() {
}
};
useEffect(() => {
loadChannels(0)
.then()
.catch((reason) => {
showError(reason);
const fetchData = async (page, rowsPerPage, keyword, order, orderBy) => {
setSearching(true);
try {
if (orderBy) {
orderBy = order === 'desc' ? '-' + orderBy : orderBy;
}
const res = await API.get(`/api/channel/`, {
params: {
page: page + 1,
size: rowsPerPage,
keyword: keyword,
order: orderBy
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const { success, message, data } = res.data;
if (success) {
setListCount(data.total_count);
setChannels(data.data);
} else {
showError(message);
}
} catch (error) {
console.error(error);
}
setSearching(false);
};
useEffect(() => {
fetchData(page, rowsPerPage, searchKeyword, order, orderBy);
}, [page, rowsPerPage, searchKeyword, order, orderBy, refreshFlag]);
return (
<>
@ -237,7 +231,7 @@ export default function ChannelPage() {
</Stack>
<Card>
<Box component="form" onSubmit={searchChannels} noValidate>
<TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} placeholder={'搜索渠道的 ID，名称和密钥 ...'} />
<TableToolBar placeholder={'搜索渠道的 ID，名称和密钥 ...'} />
</Box>
<Toolbar
sx={{
@ -292,9 +286,24 @@ export default function ChannelPage() {
<PerfectScrollbar component="div">
<TableContainer sx={{ overflow: 'unset' }}>
<Table sx={{ minWidth: 800 }}>
<ChannelTableHead />
<KeywordTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleSort}
headLabel={[
{ id: 'id', label: 'ID', disableSort: false },
{ id: 'name', label: '名称', disableSort: false },
{ id: 'group', label: '分组', disableSort: true },
{ id: 'type', label: '类型', disableSort: false },
{ id: 'status', label: '状态', disableSort: false },
{ id: 'response_time', label: '响应时间', disableSort: false },
{ id: 'balance', label: '余额', disableSort: false },
{ id: 'priority', label: '优先级', disableSort: false },
{ id: 'action', label: '操作', disableSort: true }
]}
/>
<TableBody>
{channels.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row) => (
{channels.map((row) => (
<ChannelTableRow
item={row}
manageChannel={manageChannel}
@ -308,12 +317,15 @@ export default function ChannelPage() {
</TableContainer>
</PerfectScrollbar>
<TablePagination
page={activePage}
page={page}
component="div"
count={channels.length + (channels.length % ITEMS_PER_PAGE === 0 ? 1 : 0)}
rowsPerPage={ITEMS_PER_PAGE}
onPageChange={onPaginationChange}
rowsPerPageOptions={[ITEMS_PER_PAGE]}
count={listCount}
rowsPerPage={rowsPerPage}
onPageChange={handleChangePage}
rowsPerPageOptions={[10, 25, 30]}
onRowsPerPageChange={handleChangeRowsPerPage}
showFirstButton
showLastButton
/>
</Card>
<EditeModal open={openModal} onCancel={handleCloseModal} onOk={handleOkModal} channelId={editChannelId} />

28
web/src/views/Log/component/TableHead.js
View File

@ -1,28 +0,0 @@
import PropTypes from 'prop-types';
import { TableCell, TableHead, TableRow } from '@mui/material';
const LogTableHead = ({ userIsAdmin }) => {
return (
<TableHead>
<TableRow>
<TableCell>时间</TableCell>
{userIsAdmin && <TableCell>渠道</TableCell>}
{userIsAdmin && <TableCell>用户</TableCell>}
<TableCell>令牌</TableCell>
<TableCell>类型</TableCell>
<TableCell>模型</TableCell>
<TableCell>耗时</TableCell>
<TableCell>提示</TableCell>
<TableCell>补全</TableCell>
<TableCell>额度</TableCell>
<TableCell>详情</TableCell>
</TableRow>
</TableHead>
);
};
export default LogTableHead;
LogTableHead.propTypes = {
userIsAdmin: PropTypes.bool
};

229
web/src/views/Log/index.js
View File

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { showError } from 'utils/common';
import Table from '@mui/material/Table';
@ -12,12 +12,13 @@ import Toolbar from '@mui/material/Toolbar';
import { Button, Card, Stack, Container, Typography, Box } from '@mui/material';
import LogTableRow from './component/TableRow';
import LogTableHead from './component/TableHead';
import KeywordTableHead from 'ui-component/TableHead';
import TableToolBar from './component/TableToolBar';
import { API } from 'utils/api';
import { isAdmin } from 'utils/common';
import { ITEMS_PER_PAGE } from 'constants';
import { IconRefresh, IconSearch } from '@tabler/icons-react';
import dayjs from 'dayjs';
export default function Log() {
const originalKeyword = {
@ -26,86 +27,98 @@ export default function Log() {
token_name: '',
model_name: '',
start_timestamp: 0,
end_timestamp: new Date().getTime() / 1000 + 3600,
end_timestamp: dayjs().unix() + 3600,
type: 0,
channel: ''
};
const [logs, setLogs] = useState([]);
const [activePage, setActivePage] = useState(0);
const [page, setPage] = useState(0);
const [order, setOrder] = useState('desc');
const [orderBy, setOrderBy] = useState('created_at');
const [rowsPerPage, setRowsPerPage] = useState(ITEMS_PER_PAGE);
const [listCount, setListCount] = useState(0);
const [searching, setSearching] = useState(false);
const [toolBarValue, setToolBarValue] = useState(originalKeyword);
const [searchKeyword, setSearchKeyword] = useState(originalKeyword);
const [initPage, setInitPage] = useState(true);
const [refreshFlag, setRefreshFlag] = useState(false);
const [logs, setLogs] = useState([]);
const userIsAdmin = isAdmin();
const loadLogs = async (startIdx) => {
setSearching(true);
const url = userIsAdmin ? '/api/log/' : '/api/log/self/';
const query = searchKeyword;
query.p = startIdx;
if (!userIsAdmin) {
delete query.username;
delete query.channel;
const handleSort = (event, id) => {
const isAsc = orderBy === id && order === 'asc';
if (id !== '') {
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(id);
}
};
try {
const res = await API.get(url, { params: query });
const { success, message, data } = res.data;
if (success) {
if (startIdx === 0) {
setLogs(data);
} else {
let newLogs = [...logs];
newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
setLogs(newLogs);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setPage(0);
setRowsPerPage(parseInt(event.target.value, 10));
};
const searchLogs = async () => {
setPage(0);
setSearchKeyword(toolBarValue);
};
const handleToolBarValue = (event) => {
setToolBarValue({ ...toolBarValue, [event.target.name]: event.target.value });
};
const fetchData = useCallback(
async (page, rowsPerPage, keyword, order, orderBy) => {
setSearching(true);
try {
if (orderBy) {
orderBy = order === 'desc' ? '-' + orderBy : orderBy;
}
} else {
showError(message);
const url = userIsAdmin ? '/api/log/' : '/api/log/self/';
if (!userIsAdmin) {
delete keyword.username;
delete keyword.channel;
}
const res = await API.get(url, {
params: {
page: page + 1,
size: rowsPerPage,
order: orderBy,
...keyword
}
});
const { success, message, data } = res.data;
if (success) {
setListCount(data.total_count);
setLogs(data.data);
} else {
showError(message);
}
} catch (error) {
console.error(error);
}
} catch (error) {
console.log(error);
}
setSearching(false);
};
const onPaginationChange = (event, activePage) => {
(async () => {
if (activePage === Math.ceil(logs.length / ITEMS_PER_PAGE)) {
// In this case we have to load more data and then append them.
await loadLogs(activePage);
}
setActivePage(activePage);
})();
};
const searchLogs = async (event) => {
event.preventDefault();
await loadLogs(0);
setActivePage(0);
return;
};
const handleSearchKeyword = (event) => {
setSearchKeyword({ ...searchKeyword, [event.target.name]: event.target.value });
};
setSearching(false);
},
[userIsAdmin]
);
// 处理刷新
const handleRefresh = () => {
setInitPage(true);
const handleRefresh = async () => {
setOrderBy('created_at');
setOrder('desc');
setToolBarValue(originalKeyword);
setSearchKeyword(originalKeyword);
setRefreshFlag(!refreshFlag);
};
useEffect(() => {
setSearchKeyword(originalKeyword);
setActivePage(0);
loadLogs(0)
.then()
.catch((reason) => {
showError(reason);
});
setInitPage(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initPage]);
fetchData(page, rowsPerPage, searchKeyword, order, orderBy);
}, [page, rowsPerPage, searchKeyword, order, orderBy, fetchData, refreshFlag]);
return (
<>
@ -113,8 +126,8 @@ export default function Log() {
<Typography variant="h4">日志</Typography>
</Stack>
<Card>
<Box component="form" onSubmit={searchLogs} noValidate>
<TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} userIsAdmin={userIsAdmin} />
<Box component="form" noValidate>
<TableToolBar filterName={toolBarValue} handleFilterName={handleToolBarValue} userIsAdmin={userIsAdmin} />
</Box>
<Toolbar
sx={{
@ -141,9 +154,72 @@ export default function Log() {
<PerfectScrollbar component="div">
<TableContainer sx={{ overflow: 'unset' }}>
<Table sx={{ minWidth: 800 }}>
<LogTableHead userIsAdmin={userIsAdmin} />
<KeywordTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleSort}
headLabel={[
{
id: 'created_at',
label: '时间',
disableSort: false
},
{
id: 'channel_id',
label: '渠道',
disableSort: false,
hide: !userIsAdmin
},
{
id: 'user_id',
label: '用户',
disableSort: false,
hide: !userIsAdmin
},
{
id: 'token_name',
label: '令牌',
disableSort: false
},
{
id: 'type',
label: '类型',
disableSort: false
},
{
id: 'model_name',
label: '模型',
disableSort: false
},
{
id: 'duration',
label: '耗时',
disableSort: true
},
{
id: 'message',
label: '提示',
disableSort: true
},
{
id: 'completion',
label: '补全',
disableSort: true
},
{
id: 'quota',
label: '额度',
disableSort: true
},
{
id: 'detail',
label: '详情',
disableSort: true
}
]}
/>
<TableBody>
{logs.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row, index) => (
{logs.map((row, index) => (
<LogTableRow item={row} key={`${row.id}_${index}`} userIsAdmin={userIsAdmin} />
))}
</TableBody>
@ -151,12 +227,15 @@ export default function Log() {
</TableContainer>
</PerfectScrollbar>
<TablePagination
page={activePage}
page={page}
component="div"
count={logs.length + (logs.length % ITEMS_PER_PAGE === 0 ? 1 : 0)}
rowsPerPage={ITEMS_PER_PAGE}
onPageChange={onPaginationChange}
rowsPerPageOptions={[ITEMS_PER_PAGE]}
count={listCount}
rowsPerPage={rowsPerPage}
onPageChange={handleChangePage}
rowsPerPageOptions={[10, 25, 30]}
onRowsPerPageChange={handleChangeRowsPerPage}
showFirstButton
showLastButton
/>
</Card>
</>

19
web/src/views/Redemption/component/TableHead.js
View File

@ -1,19 +0,0 @@
import { TableCell, TableHead, TableRow } from '@mui/material';
const RedemptionTableHead = () => {
return (
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>名称</TableCell>
<TableCell>状态</TableCell>
<TableCell>额度</TableCell>
<TableCell>创建时间</TableCell>
<TableCell>兑换时间</TableCell>
<TableCell>操作</TableCell>
</TableRow>
</TableHead>
);
};
export default RedemptionTableHead;

145
web/src/views/Redemption/index.js
View File

@ -12,7 +12,7 @@ import Toolbar from '@mui/material/Toolbar';
import { Button, Card, Box, Stack, Container, Typography } from '@mui/material';
import RedemptionTableRow from './component/TableRow';
import RedemptionTableHead from './component/TableHead';
import KeywordTableHead from 'ui-component/TableHead';
import TableToolBar from 'ui-component/TableToolBar';
import { API } from 'utils/api';
import { ITEMS_PER_PAGE } from 'constants';
@ -21,74 +21,81 @@ import EditeModal from './component/EditModal';
// ----------------------------------------------------------------------
export default function Redemption() {
const [redemptions, setRedemptions] = useState([]);
const [activePage, setActivePage] = useState(0);
const [searching, setSearching] = useState(false);
const [page, setPage] = useState(0);
const [order, setOrder] = useState('desc');
const [orderBy, setOrderBy] = useState('id');
const [rowsPerPage, setRowsPerPage] = useState(ITEMS_PER_PAGE);
const [listCount, setListCount] = useState(0);
const [searchKeyword, setSearchKeyword] = useState('');
const [searching, setSearching] = useState(false);
const [redemptions, setRedemptions] = useState([]);
const [refreshFlag, setRefreshFlag] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [editRedemptionId, setEditRedemptionId] = useState(0);
const loadRedemptions = async (startIdx) => {
setSearching(true);
try {
const res = await API.get(`/api/redemption/?p=${startIdx}`);
const { success, message, data } = res.data;
if (success) {
if (startIdx === 0) {
setRedemptions(data);
} else {
let newRedemptions = [...redemptions];
newRedemptions.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
setRedemptions(newRedemptions);
}
} else {
showError(message);
}
} catch (error) {
console.log(error);
const handleSort = (event, id) => {
const isAsc = orderBy === id && order === 'asc';
if (id !== '') {
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(id);
}
setSearching(false);
};
const onPaginationChange = (event, activePage) => {
(async () => {
if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE)) {
// In this case we have to load more data and then append them.
await loadRedemptions(activePage);
}
setActivePage(activePage);
})();
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setPage(0);
setRowsPerPage(parseInt(event.target.value, 10));
};
const searchRedemptions = async (event) => {
event.preventDefault();
if (searchKeyword === '') {
await loadRedemptions(0);
setActivePage(0);
return;
}
setSearching(true);
const formData = new FormData(event.target);
setPage(0);
setSearchKeyword(formData.get('keyword'));
};
const fetchData = async (page, rowsPerPage, keyword, order, orderBy) => {
setSearching(true);
try {
const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
if (orderBy) {
orderBy = order === 'desc' ? '-' + orderBy : orderBy;
}
const res = await API.get(`/api/redemption/`, {
params: {
page: page + 1,
size: rowsPerPage,
keyword: keyword,
order: orderBy
}
});
const { success, message, data } = res.data;
if (success) {
setRedemptions(data);
setActivePage(0);
setListCount(data.total_count);
setRedemptions(data.data);
} else {
showError(message);
}
} catch (error) {
console.log(error);
console.error(error);
}
setSearching(false);
};
const handleSearchKeyword = (event) => {
setSearchKeyword(event.target.value);
// 处理刷新
const handleRefresh = async () => {
setOrderBy('id');
setOrder('desc');
setRefreshFlag(!refreshFlag);
};
useEffect(() => {
fetchData(page, rowsPerPage, searchKeyword, order, orderBy);
}, [page, rowsPerPage, searchKeyword, order, orderBy, refreshFlag]);
const manageRedemptions = async (id, action, value) => {
const url = '/api/redemption/';
let data = { id };
@ -110,7 +117,7 @@ export default function Redemption() {
if (success) {
showSuccess('操作成功完成！');
if (action === 'delete') {
await loadRedemptions(0);
await handleRefresh();
}
} else {
showError(message);
@ -122,13 +129,6 @@ export default function Redemption() {
}
};
// 处理刷新
const handleRefresh = async () => {
await loadRedemptions(0);
setActivePage(0);
setSearchKeyword('');
};
const handleOpenModal = (redemptionId) => {
setEditRedemptionId(redemptionId);
setOpenModal(true);
@ -146,15 +146,6 @@ export default function Redemption() {
}
};
useEffect(() => {
loadRedemptions(0)
.then()
.catch((reason) => {
showError(reason);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<>
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
@ -166,7 +157,7 @@ export default function Redemption() {
</Stack>
<Card>
<Box component="form" onSubmit={searchRedemptions} noValidate>
<TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} placeholder={'搜索兑换码的ID和名称...'} />
<TableToolBar placeholder={'搜索兑换码的ID和名称...'} />
</Box>
<Toolbar
sx={{
@ -189,9 +180,22 @@ export default function Redemption() {
<PerfectScrollbar component="div">
<TableContainer sx={{ overflow: 'unset' }}>
<Table sx={{ minWidth: 800 }}>
<RedemptionTableHead />
<KeywordTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleSort}
headLabel={[
{ id: 'id', label: 'ID', disableSort: false },
{ id: 'name', label: '名称', disableSort: false },
{ id: 'status', label: '状态', disableSort: false },
{ id: 'quota', label: '额度', disableSort: false },
{ id: 'created_time', label: '创建时间', disableSort: false },
{ id: 'redeemed_time', label: '兑换时间', disableSort: false },
{ id: 'action', label: '操作', disableSort: true }
]}
/>
<TableBody>
{redemptions.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row) => (
{redemptions.map((row) => (
<RedemptionTableRow
item={row}
manageRedemption={manageRedemptions}
@ -205,12 +209,15 @@ export default function Redemption() {
</TableContainer>
</PerfectScrollbar>
<TablePagination
page={activePage}
page={page}
component="div"
count={redemptions.length + (redemptions.length % ITEMS_PER_PAGE === 0 ? 1 : 0)}
rowsPerPage={ITEMS_PER_PAGE}
onPageChange={onPaginationChange}
rowsPerPageOptions={[ITEMS_PER_PAGE]}
count={listCount}
rowsPerPage={rowsPerPage}
onPageChange={handleChangePage}
rowsPerPageOptions={[10, 25, 30]}
onRowsPerPageChange={handleChangeRowsPerPage}
showFirstButton
showLastButton
/>
</Card>
<EditeModal open={openModal} onCancel={handleCloseModal} onOk={handleOkModal} redemptiondId={editRedemptionId} />

19
web/src/views/Token/component/TableHead.js
View File

@ -1,19 +0,0 @@
import { TableCell, TableHead, TableRow } from '@mui/material';
const TokenTableHead = () => {
return (
<TableHead>
<TableRow>
<TableCell>名称</TableCell>
<TableCell>状态</TableCell>
<TableCell>已用额度</TableCell>
<TableCell>剩余额度</TableCell>
<TableCell>创建时间</TableCell>
<TableCell>过期时间</TableCell>
<TableCell>操作</TableCell>
</TableRow>
</TableHead>
);
};
export default TokenTableHead;

140
web/src/views/Token/index.js
View File

@ -13,94 +13,91 @@ import Toolbar from '@mui/material/Toolbar';
import { Button, Card, Box, Stack, Container, Typography } from '@mui/material';
import TokensTableRow from './component/TableRow';
import TokenTableHead from './component/TableHead';
import KeywordTableHead from 'ui-component/TableHead';
import TableToolBar from 'ui-component/TableToolBar';
import { API } from 'utils/api';
import { ITEMS_PER_PAGE } from 'constants';
import { IconRefresh, IconPlus } from '@tabler/icons-react';
import EditeModal from './component/EditModal';
import { useSelector } from 'react-redux';
import { ITEMS_PER_PAGE } from 'constants';
export default function Token() {
const [tokens, setTokens] = useState([]);
const [activePage, setActivePage] = useState(0);
const [page, setPage] = useState(0);
const [order, setOrder] = useState('desc');
const [orderBy, setOrderBy] = useState('id');
const [rowsPerPage, setRowsPerPage] = useState(ITEMS_PER_PAGE);
const [listCount, setListCount] = useState(0);
const [searching, setSearching] = useState(false);
const [searchKeyword, setSearchKeyword] = useState('');
const [tokens, setTokens] = useState([]);
const [refreshFlag, setRefreshFlag] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [editTokenId, setEditTokenId] = useState(0);
const siteInfo = useSelector((state) => state.siteInfo);
const loadTokens = async (startIdx) => {
setSearching(true);
try {
const res = await API.get(`/api/token/?p=${startIdx}`);
const { success, message, data } = res.data;
if (success) {
if (startIdx === 0) {
setTokens(data);
} else {
let newTokens = [...tokens];
newTokens.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
setTokens(newTokens);
}
} else {
showError(message);
}
} catch (error) {
console.log(error);
const handleSort = (event, id) => {
const isAsc = orderBy === id && order === 'asc';
if (id !== '') {
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(id);
}
setSearching(false);
};
useEffect(() => {
loadTokens(0)
.then()
.catch((reason) => {
showError(reason);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const onPaginationChange = (event, activePage) => {
(async () => {
if (activePage === Math.ceil(tokens.length / ITEMS_PER_PAGE)) {
// In this case we have to load more data and then append them.
await loadTokens(activePage);
}
setActivePage(activePage);
})();
const handleChangeRowsPerPage = (event) => {
setPage(0);
setRowsPerPage(parseInt(event.target.value, 10));
};
const searchTokens = async (event) => {
event.preventDefault();
if (searchKeyword === '') {
await loadTokens(0);
setActivePage(0);
return;
}
setSearching(true);
const formData = new FormData(event.target);
setPage(0);
setSearchKeyword(formData.get('keyword'));
};
const fetchData = async (page, rowsPerPage, keyword, order, orderBy) => {
setSearching(true);
try {
const res = await API.get(`/api/token/search?keyword=${searchKeyword}`);
if (orderBy) {
orderBy = order === 'desc' ? '-' + orderBy : orderBy;
}
const res = await API.get(`/api/token/`, {
params: {
page: page + 1,
size: rowsPerPage,
keyword: keyword,
order: orderBy
}
});
const { success, message, data } = res.data;
if (success) {
setTokens(data);
setActivePage(0);
setListCount(data.total_count);
setTokens(data.data);
} else {
showError(message);
}
} catch (error) {
return;
console.error(error);
}
setSearching(false);
};
const handleSearchKeyword = (event) => {
setSearchKeyword(event.target.value);
// 处理刷新
const handleRefresh = async () => {
setOrderBy('id');
setOrder('desc');
setRefreshFlag(!refreshFlag);
};
useEffect(() => {
fetchData(page, rowsPerPage, searchKeyword, order, orderBy);
}, [page, rowsPerPage, searchKeyword, order, orderBy, refreshFlag]);
const manageToken = async (id, action, value) => {
const url = '/api/token/';
let data = { id };
@ -133,11 +130,6 @@ export default function Token() {
}
};
// 处理刷新
const handleRefresh = async () => {
await loadTokens(activePage);
};
const handleOpenModal = (tokenId) => {
setEditTokenId(tokenId);
setOpenModal(true);
@ -178,7 +170,7 @@ export default function Token() {
</Stack>
<Card>
<Box component="form" onSubmit={searchTokens} noValidate>
<TableToolBar filterName={searchKeyword} handleFilterName={handleSearchKeyword} placeholder={'搜索令牌的名称...'} />
<TableToolBar placeholder={'搜索令牌的名称...'} />
</Box>
<Toolbar
sx={{
@ -201,9 +193,22 @@ export default function Token() {
<PerfectScrollbar component="div">
<TableContainer sx={{ overflow: 'unset' }}>
<Table sx={{ minWidth: 800 }}>
<TokenTableHead />
<KeywordTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleSort}
headLabel={[
{ id: 'name', label: '名称', disableSort: false },
{ id: 'status', label: '状态', disableSort: false },
{ id: 'used_quota', label: '已用额度', disableSort: false },
{ id: 'remain_quota', label: '剩余额度', disableSort: false },
{ id: 'created_time', label: '创建时间', disableSort: false },
{ id: 'expired_time', label: '过期时间', disableSort: false },
{ id: 'action', label: '操作', disableSort: true }
]}
/>
<TableBody>
{tokens.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row) => (
{tokens.map((row) => (
<TokensTableRow
item={row}
manageToken={manageToken}
@ -217,12 +222,15 @@ export default function Token() {
</TableContainer>
</PerfectScrollbar>
<TablePagination
page={activePage}
page={page}
component="div"
count={tokens.length + (tokens.length % ITEMS_PER_PAGE === 0 ? 1 : 0)}
rowsPerPage={ITEMS_PER_PAGE}
onPageChange={onPaginationChange}
rowsPerPageOptions={[ITEMS_PER_PAGE]}
count={listCount}
rowsPerPage={rowsPerPage}
onPageChange={handleChangePage}
rowsPerPageOptions={[10, 25, 30]}
onRowsPerPageChange={handleChangeRowsPerPage}
showFirstButton
showLastButton
/>
</Card>
<EditeModal open={openModal} onCancel={handleCloseModal} onOk={handleOkModal} tokenId={editTokenId} />

20
web/src/views/User/component/TableHead.js
View File

@ -1,20 +0,0 @@
import { TableCell, TableHead, TableRow } from '@mui/material';
const UsersTableHead = () => {
return (
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>用户名</TableCell>
<TableCell>分组</TableCell>
<TableCell>统计信息</TableCell>
<TableCell>用户角色</TableCell>
<TableCell>绑定</TableCell>
<TableCell>状态</TableCell>
<TableCell>操作</TableCell>
</TableRow>
</TableHead>
);
};
export default UsersTableHead;

4
web/src/views/User/component/TableRow.js
View File

@ -19,7 +19,7 @@ import {
import Label from 'ui-component/Label';
import TableSwitch from 'ui-component/Switch';
import { renderQuota, renderNumber } from 'utils/common';
import { renderQuota, renderNumber, timestamp2string } from 'utils/common';
import { IconDotsVertical, IconEdit, IconTrash, IconUser, IconBrandWechat, IconBrandGithub, IconMail } from '@tabler/icons-react';
import { useTheme } from '@mui/material/styles';
@ -119,7 +119,7 @@ export default function UsersTableRow({ item, manageUser, handleOpenModal, setMo
</Tooltip>
</Stack>
</TableCell>
<TableCell>{item.created_time === 0 ? '未知' : timestamp2string(item.created_time)}</TableCell>
<TableCell>
{' '}
<TableSwitch id={`switch-${item.id}`} checked={statusSwitch === 1} onChange={handleStatus} />

149
web/src/views/User/index.js
View File

@ -12,7 +12,7 @@ import Toolbar from '@mui/material/Toolbar';
import { Button, Card, Box, Stack, Container, Typography } from '@mui/material';
import UsersTableRow from './component/TableRow';
import UsersTableHead from './component/TableHead';
import KeywordTableHead from 'ui-component/TableHead';
import TableToolBar from 'ui-component/TableToolBar';
import { API } from 'utils/api';
import { ITEMS_PER_PAGE } from 'constants';
@ -21,74 +21,81 @@ import EditeModal from './component/EditModal';
// ----------------------------------------------------------------------
export default function Users() {
const [users, setUsers] = useState([]);
const [activePage, setActivePage] = useState(0);
const [page, setPage] = useState(0);
const [order, setOrder] = useState('desc');
const [orderBy, setOrderBy] = useState('id');
const [rowsPerPage, setRowsPerPage] = useState(ITEMS_PER_PAGE);
const [listCount, setListCount] = useState(0);
const [searching, setSearching] = useState(false);
const [searchKeyword, setSearchKeyword] = useState('');
const [users, setUsers] = useState([]);
const [refreshFlag, setRefreshFlag] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [editUserId, setEditUserId] = useState(0);
const loadUsers = async (startIdx) => {
setSearching(true);
try {
const res = await API.get(`/api/user/?p=${startIdx}`);
const { success, message, data } = res.data;
if (success) {
if (startIdx === 0) {
setUsers(data);
} else {
let newUsers = [...users];
newUsers.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
setUsers(newUsers);
}
} else {
showError(message);
}
setSearching(false);
} catch (error) {
setSearching(false);
return;
const handleSort = (event, id) => {
const isAsc = orderBy === id && order === 'asc';
if (id !== '') {
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(id);
}
};
const onPaginationChange = (event, activePage) => {
(async () => {
if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE)) {
// In this case we have to load more data and then append them.
await loadUsers(activePage);
}
setActivePage(activePage);
})();
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setPage(0);
setRowsPerPage(parseInt(event.target.value, 10));
};
const searchUsers = async (event) => {
event.preventDefault();
if (searchKeyword === '') {
await loadUsers(0);
setActivePage(0);
return;
}
const formData = new FormData(event.target);
setPage(0);
setSearchKeyword(formData.get('keyword'));
};
const fetchData = async (page, rowsPerPage, keyword, order, orderBy) => {
setSearching(true);
try {
const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
if (orderBy) {
orderBy = order === 'desc' ? '-' + orderBy : orderBy;
}
const res = await API.get(`/api/user/`, {
params: {
page: page + 1,
size: rowsPerPage,
keyword: keyword,
order: orderBy
}
});
const { success, message, data } = res.data;
if (success) {
setUsers(data);
setActivePage(0);
setListCount(data.total_count);
setUsers(data.data);
} else {
showError(message);
}
setSearching(false);
} catch (error) {
setSearching(false);
return;
console.error(error);
}
setSearching(false);
};
const handleSearchKeyword = (event) => {
setSearchKeyword(event.target.value);
// 处理刷新
const handleRefresh = async () => {
setOrderBy('id');
setOrder('desc');
setRefreshFlag(!refreshFlag);
};
useEffect(() => {
fetchData(page, rowsPerPage, searchKeyword, order, orderBy);
}, [page, rowsPerPage, searchKeyword, order, orderBy, refreshFlag]);
const manageUser = async (username, action, value) => {
const url = '/api/user/manage';
let data = { username: username, action: '' };
@ -110,7 +117,7 @@ export default function Users() {
const { success, message } = res.data;
if (success) {
showSuccess('操作成功完成！');
await loadUsers(activePage);
await handleRefresh();
} else {
showError(message);
}
@ -121,11 +128,6 @@ export default function Users() {
}
};
// 处理刷新
const handleRefresh = async () => {
await loadUsers(activePage);
};
const handleOpenModal = (userId) => {
setEditUserId(userId);
setOpenModal(true);
@ -143,15 +145,6 @@ export default function Users() {
}
};
useEffect(() => {
loadUsers(0)
.then()
.catch((reason) => {
showError(reason);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<>
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
@ -163,11 +156,7 @@ export default function Users() {
</Stack>
<Card>
<Box component="form" onSubmit={searchUsers} noValidate>
<TableToolBar
filterName={searchKeyword}
handleFilterName={handleSearchKeyword}
placeholder={'搜索用户的ID，用户名，显示名称，以及邮箱地址...'}
/>
<TableToolBar placeholder={'搜索用户的ID，用户名，显示名称，以及邮箱地址...'} />
</Box>
<Toolbar
sx={{
@ -190,9 +179,24 @@ export default function Users() {
<PerfectScrollbar component="div">
<TableContainer sx={{ overflow: 'unset' }}>
<Table sx={{ minWidth: 800 }}>
<UsersTableHead />
<KeywordTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleSort}
headLabel={[
{ id: 'id', label: 'ID', disableSort: false },
{ id: 'username', label: '用户名', disableSort: false },
{ id: 'group', label: '分组', disableSort: true },
{ id: 'stats', label: '统计信息', disableSort: true },
{ id: 'role', label: '用户角色', disableSort: false },
{ id: 'bind', label: '绑定', disableSort: true },
{ id: 'created_time', label: '创建时间', disableSort: false },
{ id: 'status', label: '状态', disableSort: false },
{ id: 'action', label: '操作', disableSort: true }
]}
/>
<TableBody>
{users.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row) => (
{users.map((row) => (
<UsersTableRow
item={row}
manageUser={manageUser}
@ -206,12 +210,15 @@ export default function Users() {
</TableContainer>
</PerfectScrollbar>
<TablePagination
page={activePage}
page={page}
component="div"
count={users.length + (users.length % ITEMS_PER_PAGE === 0 ? 1 : 0)}
rowsPerPage={ITEMS_PER_PAGE}
onPageChange={onPaginationChange}
rowsPerPageOptions={[ITEMS_PER_PAGE]}
count={listCount}
rowsPerPage={rowsPerPage}
onPageChange={handleChangePage}
rowsPerPageOptions={[10, 25, 30]}
onRowsPerPageChange={handleChangeRowsPerPage}
showFirstButton
showLastButton
/>
</Card>
<EditeModal open={openModal} onCancel={handleCloseModal} onOk={handleOkModal} userId={editUserId} />