diff --git a/Makefile b/Makefile
index 646e064..039979c 100644
--- a/Makefile
+++ b/Makefile
@@ -1,12 +1,18 @@
-.PHONY: build run test clean fmt lint
+.PHONY: build run test clean fmt lint frontend
 
 BINARY_NAME=openteam
 BUILD_DIR=bin
 BACKEND_DIR=backend
 
 # Build
-build:
-	cd $(BACKEND_DIR) && CGO_ENABLED=1 go build -o ../$(BUILD_DIR)/$(BINARY_NAME) ./cmd/openteam
+build: frontend
+	cd $(BACKEND_DIR) && CGO_ENABLED=0 go build -o ../$(BUILD_DIR)/$(BINARY_NAME) ./cmd/openteam
+
+# Build frontend and copy dist
+frontend:
+	cd frontend && pnpm install && pnpm build
+	rm -rf $(BACKEND_DIR)/cmd/openteam/dist
+	cp -r frontend/dist $(BACKEND_DIR)/cmd/openteam/dist
 
 # Run
 run: build
diff --git a/backend/go.mod b/backend/go.mod
index 64126a5..a874a4f 100644
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -1,6 +1,6 @@
 module opencatd-open
 
-go 1.23.2
+go 1.25.0
 
 require (
 	github.com/gin-contrib/cors v1.7.2
@@ -12,15 +12,15 @@ require (
 	github.com/google/wire v0.6.0
 	github.com/joho/godotenv v1.5.1
 	github.com/lib/pq v1.10.9
+	github.com/ncruces/go-sqlite3/gormlite v0.34.0
 	github.com/pkoukk/tiktoken-go v0.1.7
 	github.com/sashabaranov/go-openai v1.42.0
 	github.com/spf13/cobra v1.9.1
-	golang.org/x/crypto v0.37.0
+	golang.org/x/crypto v0.50.0
 	golang.org/x/time v0.10.0
 	gorm.io/driver/mysql v1.5.7
 	gorm.io/driver/postgres v1.5.11
-	gorm.io/driver/sqlite v1.6.0
-	gorm.io/gorm v1.30.0
+	gorm.io/gorm v1.31.1
 )
 
 require (
@@ -52,20 +52,22 @@ require (
 	github.com/kr/text v0.2.0 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/mattn/go-sqlite3 v1.14.22 // indirect
 	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
+	github.com/ncruces/go-sqlite3 v0.34.0 // indirect
+	github.com/ncruces/go-sqlite3-wasm/v2 v2.1.35300 // indirect
+	github.com/ncruces/julianday v1.0.0 // indirect
 	github.com/pelletier/go-toml/v2 v2.2.3 // indirect
 	github.com/spf13/pflag v1.0.6 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.12 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
 	golang.org/x/arch v0.16.0 // indirect
-	golang.org/x/net v0.39.0 // indirect
-	golang.org/x/sync v0.13.0 // indirect
-	golang.org/x/sys v0.32.0 // indirect
-	golang.org/x/text v0.24.0 // indirect
+	golang.org/x/net v0.52.0 // indirect
+	golang.org/x/sync v0.20.0 // indirect
+	golang.org/x/sys v0.43.0 // indirect
+	golang.org/x/text v0.36.0 // indirect
 	google.golang.org/protobuf v1.36.6 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
diff --git a/backend/go.sum b/backend/go.sum
index eb69816..7834141 100644
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -91,8 +91,6 @@ github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
 github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
-github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
 github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -100,6 +98,14 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
 github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
+github.com/ncruces/go-sqlite3 v0.34.0 h1:q2I6wHTLWIoz6ehYkKdG5dGQc66eJv7ZGnekhvuMfK8=
+github.com/ncruces/go-sqlite3 v0.34.0/go.mod h1:qpBxsSdGPnO9K5OExuv5GEsrGQ7Rk6JsJFH6wn2DwwU=
+github.com/ncruces/go-sqlite3-wasm/v2 v2.1.35300 h1:cRdxCt3BDfMu0vfSdoqaAPD+dzIXPkGREjqyZMLN2Ak=
+github.com/ncruces/go-sqlite3-wasm/v2 v2.1.35300/go.mod h1:R2kJLPoSA/GBX/b8x7zwOq/KLAw6rLMY1l3Hi76SQIo=
+github.com/ncruces/go-sqlite3/gormlite v0.34.0 h1:QLlOy/i7OabsFUQ+d5KyXmq2hw9sMh/CRW435+eQMRY=
+github.com/ncruces/go-sqlite3/gormlite v0.34.0/go.mod h1:CMv+6YhqLmPBXYACiQtrWA0q/JLIMTKB4E65SUfLgF0=
+github.com/ncruces/julianday v1.0.0 h1:fH0OKwa7NWvniGQtxdJRxAgkBMolni2BjDHaWTxqt7M=
+github.com/ncruces/julianday v1.0.0/go.mod h1:Dusn2KvZrrovOMJuOt0TNXL6tB7U2E8kvza5fFc9G7g=
 github.com/pelletier/go-toml/v2 v2.2.3 h1:YmeHyLY8mFWbdkNWwpr+qIL2bEqT0o95WSdkNHvL12M=
 github.com/pelletier/go-toml/v2 v2.2.3/go.mod h1:MfCQTFTvCcUyyvvwm1+G6H/jORL20Xlb6rzQu9GuUkc=
 github.com/pkoukk/tiktoken-go v0.1.7 h1:qOBHXX4PHtvIvmOtyg1EeKlwFRiMKAcoMp4Q+bLQDmw=
@@ -141,8 +147,8 @@ golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACk
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.13.0/go.mod h1:y6Z2r+Rw4iayiXXAIxJIDAJ1zMW4yaTpebo8fPOliYc=
 golang.org/x/crypto v0.18.0/go.mod h1:R0j02AL6hcrfOiy9T4ZYp/rcWeMxM3L6QYxlOuEG1mg=
-golang.org/x/crypto v0.37.0 h1:kJNSjF/Xp7kU0iB2Z+9viTPMW4EqqsrywMXLJOOsXSE=
-golang.org/x/crypto v0.37.0/go.mod h1:vg+k43peMZ0pUMhYmVAWysMK35e6ioLh3wB8ZCAfbVc=
+golang.org/x/crypto v0.50.0 h1:zO47/JPrL6vsNkINmLoo/PH1gcxpls50DNogFvB5ZGI=
+golang.org/x/crypto v0.50.0/go.mod h1:3muZ7vA7PBCE6xgPX7nkzzjiUq87kRItoJQM1Yo8S+Q=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
 golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/mod v0.12.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
@@ -154,15 +160,15 @@ golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
 golang.org/x/net v0.15.0/go.mod h1:idbUs1IY1+zTqbi8yxTbhexhEEk5ur9LInksu6HrEpk=
 golang.org/x/net v0.20.0/go.mod h1:z8BVo6PvndSri0LbOE3hAn0apkU+1YvI6E70E9jsnvY=
-golang.org/x/net v0.39.0 h1:ZCu7HMWDxpXpaiKdhzIfaltL9Lp31x/3fCP11bc6/fY=
-golang.org/x/net v0.39.0/go.mod h1:X7NRbYVEA+ewNkCNyJ513WmMdQ3BineSwVtN2zD/d+E=
+golang.org/x/net v0.52.0 h1:He/TN1l0e4mmR3QqHMT2Xab3Aj3L9qjbhRm78/6jrW0=
+golang.org/x/net v0.52.0/go.mod h1:R1MAz7uMZxVMualyPXb+VaqGSa3LIaUqk0eEt3w36Sw=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.3.0/go.mod h1:FU7BRWz2tNW+3quACPkgCx/L+uEAv1htQ0V83Z9Rj+Y=
 golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
-golang.org/x/sync v0.13.0 h1:AauUjRAJ9OSnvULf/ARrrVywoJDy0YS2AwQ98I37610=
-golang.org/x/sync v0.13.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sync v0.20.0 h1:e0PTpb7pjO8GAtTs2dQ6jYa5BWYlMuX047Dco/pItO4=
+golang.org/x/sync v0.20.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@@ -173,8 +179,8 @@ golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/sys v0.32.0 h1:s77OFDvIQeibCmezSnk/q6iAfkdiQaJi4VzroCFrN20=
-golang.org/x/sys v0.32.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/sys v0.43.0 h1:Rlag2XtaFTxp19wS8MXlJwTvoh8ArU6ezoyFsMyCTNI=
+golang.org/x/sys v0.43.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
@@ -188,8 +194,8 @@ golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
-golang.org/x/text v0.24.0 h1:dd5Bzh4yt5KYA8f9CJHCP4FB4D51c2c6JvN37xJJkJ0=
-golang.org/x/text v0.24.0/go.mod h1:L8rBsPeo2pSS+xqN0d5u2ikmjtmoJbDBT1b7nHvFCdU=
+golang.org/x/text v0.36.0 h1:JfKh3XmcRPqZPKevfXVpI1wXPTqbkE5f7JA92a55Yxg=
+golang.org/x/text v0.36.0/go.mod h1:NIdBknypM8iqVmPiuco0Dh6P5Jcdk8lJL0CUebqK164=
 golang.org/x/time v0.10.0 h1:3usCWA8tQn0L8+hFJQNgzpWbd89begxN66o1Ojdn5L4=
 golang.org/x/time v0.10.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
@@ -212,9 +218,7 @@ gorm.io/driver/mysql v1.5.7 h1:MndhOPYOfEp2rHKgkZIhJ16eVUIRf2HmzgoPmh7FCWo=
 gorm.io/driver/mysql v1.5.7/go.mod h1:sEtPWMiqiN1N1cMXoXmBbd8C6/l+TESwriotuRRpkDM=
 gorm.io/driver/postgres v1.5.11 h1:ubBVAfbKEUld/twyKZ0IYn9rSQh448EdelLYk9Mv314=
 gorm.io/driver/postgres v1.5.11/go.mod h1:DX3GReXH+3FPWGrrgffdvCk3DQ1dwDPdmbenSkweRGI=
-gorm.io/driver/sqlite v1.6.0 h1:WHRRrIiulaPiPFmDcod6prc4l2VGVWHz80KspNsxSfQ=
-gorm.io/driver/sqlite v1.6.0/go.mod h1:AO9V1qIQddBESngQUKWL9yoH93HIeA1X6V633rBwyT8=
 gorm.io/gorm v1.25.7/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
-gorm.io/gorm v1.30.0 h1:qbT5aPv1UH8gI99OsRlvDToLxW5zR7FzS9acZDOZcgs=
-gorm.io/gorm v1.30.0/go.mod h1:8Z33v652h4//uMA76KjeDH8mJXPm1QNCYrMeatR0DOE=
+gorm.io/gorm v1.31.1 h1:7CA8FTFz/gRfgqgpeKIBcervUn3xSyPUmr6B2WXJ7kg=
+gorm.io/gorm v1.31.1/go.mod h1:XyQVbO2k6YkOis7C2437jSit3SsDK72s7n7rsSHd+Gs=
 nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
diff --git a/backend/internal/api/api.go b/backend/internal/api/api.go
index c0d0225..9917986 100644
--- a/backend/internal/api/api.go
+++ b/backend/internal/api/api.go
@@ -37,13 +37,33 @@ func NewHandler(db *gorm.DB) *Handler {
 	}
 }
 
+// --- Helpers ---
+
+func userToResponse(user *store.User) gin.H {
+	roleNum := 1
+	if user.Role == store.RoleAdmin {
+		roleNum = 10
+	}
+	return gin.H{
+		"id":            user.ID,
+		"username":      user.Username,
+		"email":         user.Email,
+		"role":          roleNum,
+		"status":        user.Status,
+		"balance":       user.Balance,
+		"created_at":    user.CreatedAt,
+		"updated_at":    user.UpdatedAt,
+		"last_login_at": user.LastLoginAt,
+	}
+}
+
 // --- Auth ---
 
 func (h *Handler) Register(c *gin.Context) {
 	var req struct {
 		Username string `json:"username" binding:"required"`
 		Password string `json:"password" binding:"required"`
-		Email    string `json:"email" binding:"required,email"`
+		Email    string `json:"email" binding:"omitempty,email"`
 	}
 	if err := c.ShouldBindJSON(&req); err != nil {
 		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
@@ -60,9 +80,13 @@ func (h *Handler) Register(c *gin.Context) {
 	}
 
 	hash := crypto.Sha256Hex(req.Password)
+	email := req.Email
+	if email == "" {
+		email = req.Username + "@placeholder.local"
+	}
 	user := &store.User{
 		Username:     req.Username,
-		Email:        req.Email,
+		Email:        email,
 		PasswordHash: hash,
 		Role:         role,
 		Status:       store.UserStatusActive,
@@ -127,34 +151,121 @@ func (h *Handler) Me(c *gin.Context) {
 		c.JSON(http.StatusNotFound, gin.H{"error": "user not found"})
 		return
 	}
-	// Map role string to number for frontend compatibility
-	roleNum := 1 // default user
-	if user.Role == store.RoleAdmin {
-		roleNum = 10
-	}
 	c.JSON(http.StatusOK, gin.H{
 		"code": 200,
-		"data": gin.H{
-			"id":       user.ID,
-			"username": user.Username,
-			"email":    user.Email,
-			"role":     roleNum,
-			"status":   user.Status,
-		},
+		"data": userToResponse(user),
 	})
 }
 
+func (h *Handler) UpdateProfile(c *gin.Context) {
+	userID, _ := c.Get("user_id")
+	user, err := h.userDAO.GetByID(userID.(uint64))
+	if err != nil {
+		c.JSON(http.StatusNotFound, gin.H{"error": "user not found"})
+		return
+	}
+
+	var req struct {
+		Email string `json:"email"`
+		Name  string `json:"name"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	if req.Email != "" {
+		user.Email = req.Email
+	}
+
+	if err := h.userDAO.Update(user); err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"message": "profile updated"})
+}
+
+func (h *Handler) UpdatePassword(c *gin.Context) {
+	userID, _ := c.Get("user_id")
+	user, err := h.userDAO.GetByID(userID.(uint64))
+	if err != nil {
+		c.JSON(http.StatusNotFound, gin.H{"error": "user not found"})
+		return
+	}
+
+	var req struct {
+		Password    string `json:"password" binding:"required"`
+		NewPassword string `json:"newpassword" binding:"required"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	// Verify old password
+	oldHash := crypto.Sha256Hex(req.Password)
+	if user.PasswordHash != oldHash {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "incorrect password"})
+		return
+	}
+
+	// Update to new password
+	user.PasswordHash = crypto.Sha256Hex(req.NewPassword)
+	if err := h.userDAO.Update(user); err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"message": "password updated"})
+}
+
 // --- Users ---
 
 func (h *Handler) ListUsers(c *gin.Context) {
+	// Support both limit/offset and pageSize/page parameters
 	limit, _ := strconv.Atoi(c.DefaultQuery("limit", "20"))
 	offset, _ := strconv.Atoi(c.DefaultQuery("offset", "0"))
+
+	// If pageSize/page are provided, use them instead
+	if pageSize := c.Query("pageSize"); pageSize != "" {
+		if size, err := strconv.Atoi(pageSize); err == nil && size > 0 {
+			limit = size
+		}
+	}
+	if page := c.Query("page"); page != "" {
+		if p, err := strconv.Atoi(page); err == nil && p > 0 {
+			offset = (p - 1) * limit
+		}
+	}
+
 	users, total, err := h.userDAO.List(limit, offset)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		return
 	}
-	c.JSON(http.StatusOK, gin.H{"data": users, "total": total})
+
+	data := make([]gin.H, len(users))
+	for i, u := range users {
+		data[i] = userToResponse(u)
+	}
+	c.JSON(http.StatusOK, gin.H{"data": data, "total": total})
+}
+
+func (h *Handler) GetUser(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid id"})
+		return
+	}
+	user, err := h.userDAO.GetByID(id)
+	if err != nil {
+		c.JSON(http.StatusNotFound, gin.H{"error": "user not found"})
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"data": userToResponse(user),
+	})
 }
 
 func (h *Handler) CreateUser(c *gin.Context) {
@@ -188,7 +299,87 @@ func (h *Handler) CreateUser(c *gin.Context) {
 		return
 	}
 
-	c.JSON(http.StatusOK, user)
+	c.JSON(http.StatusOK, userToResponse(user))
+}
+
+func (h *Handler) UpdateUser(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid id"})
+		return
+	}
+
+	user, err := h.userDAO.GetByID(id)
+	if err != nil {
+		c.JSON(http.StatusNotFound, gin.H{"error": "user not found"})
+		return
+	}
+
+	var req struct {
+		Username string `json:"username"`
+		Email    string `json:"email"`
+		Password string `json:"password"`
+		Role     string `json:"role"`
+		Status   string `json:"status"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	if req.Username != "" {
+		user.Username = req.Username
+	}
+	if req.Email != "" {
+		user.Email = req.Email
+	}
+	if req.Password != "" {
+		user.PasswordHash = crypto.Sha256Hex(req.Password)
+	}
+	if req.Role != "" {
+		user.Role = req.Role
+	}
+	if req.Status != "" {
+		user.Status = req.Status
+	}
+
+	if err := h.userDAO.Update(user); err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, userToResponse(user))
+}
+
+func (h *Handler) BatchUsers(c *gin.Context) {
+	option := c.Param("option")
+	var req struct {
+		IDs []uint64 `json:"ids"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	for _, id := range req.IDs {
+		user, err := h.userDAO.GetByID(id)
+		if err != nil {
+			continue
+		}
+
+		switch option {
+		case "enable":
+			user.Status = store.UserStatusActive
+		case "disable":
+			user.Status = store.UserStatusDisabled
+		case "delete":
+			h.userDAO.Delete(id)
+			continue
+		}
+		h.userDAO.Update(user)
+	}
+
+	c.JSON(http.StatusOK, gin.H{"message": "batch operation completed"})
 }
 
 func (h *Handler) DeleteUser(c *gin.Context) {
@@ -208,8 +399,22 @@ func (h *Handler) DeleteUser(c *gin.Context) {
 
 func (h *Handler) ListApiKeys(c *gin.Context) {
 	userID, _ := c.Get("user_id")
+	// Support both limit/offset and pageSize/page parameters
 	limit, _ := strconv.Atoi(c.DefaultQuery("limit", "20"))
 	offset, _ := strconv.Atoi(c.DefaultQuery("offset", "0"))
+	
+	// If pageSize/page are provided, use them instead
+	if pageSize := c.Query("pageSize"); pageSize != "" {
+		if size, err := strconv.Atoi(pageSize); err == nil && size > 0 {
+			limit = size
+		}
+	}
+	if page := c.Query("page"); page != "" {
+		if p, err := strconv.Atoi(page); err == nil && p > 0 {
+			offset = (p - 1) * limit
+		}
+	}
+	
 	keys, total, err := h.apiKeyDAO.ListByUserID(userID.(uint64), limit, offset)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
@@ -218,6 +423,20 @@ func (h *Handler) ListApiKeys(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{"data": keys, "total": total})
 }
 
+func (h *Handler) GetApiKey(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid id"})
+		return
+	}
+	key, err := h.apiKeyDAO.GetByID(id)
+	if err != nil {
+		c.JSON(http.StatusNotFound, gin.H{"error": "key not found"})
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{"data": key})
+}
+
 func (h *Handler) CreateApiKey(c *gin.Context) {
 	var req struct {
 		Name              string `json:"name" binding:"required"`
@@ -236,7 +455,8 @@ func (h *Handler) CreateApiKey(c *gin.Context) {
 		UserID:              userID.(uint64),
 		Name:                req.Name,
 		KeyHash:             apikey.Hash(keyValue),
-		KeyPrefix:           keyValue[:8],
+		KeyPlain:            keyValue,
+		KeyPrefix:           keyValue[:12],
 		QuotaTokensPerDay:   req.QuotaTokensPerDay,
 		QuotaRequestsPerDay: req.QuotaRequestsPerDay,
 		Status:              store.KeyStatusActive,
@@ -249,10 +469,80 @@ func (h *Handler) CreateApiKey(c *gin.Context) {
 
 	c.JSON(http.StatusOK, gin.H{
 		"key": keyValue,
-		"id":  key.ID,
+		"data": key,
 	})
 }
 
+func (h *Handler) UpdateApiKey(c *gin.Context) {
+	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid id"})
+		return
+	}
+
+	key, err := h.apiKeyDAO.GetByID(id)
+	if err != nil {
+		c.JSON(http.StatusNotFound, gin.H{"error": "key not found"})
+		return
+	}
+
+	var req struct {
+		Name                string   `json:"name"`
+		QuotaTokensPerDay   *int64   `json:"quota_tokens_per_day"`
+		QuotaRequestsPerDay *int     `json:"quota_requests_per_day"`
+		AllowedModels       []string `json:"allowed_models"`
+		Status              string   `json:"status"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	if req.Name != "" {
+		key.Name = req.Name
+	}
+	if req.QuotaTokensPerDay != nil {
+		key.QuotaTokensPerDay = req.QuotaTokensPerDay
+	}
+	if req.QuotaRequestsPerDay != nil {
+		key.QuotaRequestsPerDay = req.QuotaRequestsPerDay
+	}
+	if req.AllowedModels != nil {
+		key.AllowedModels = req.AllowedModels
+	}
+	if req.Status != "" {
+		key.Status = req.Status
+	}
+
+	if err := h.apiKeyDAO.Update(key); err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"data": key})
+}
+
+func (h *Handler) BatchApiKeys(c *gin.Context) {
+	option := c.Param("option")
+	var req struct {
+		IDs []uint64 `json:"ids"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	switch option {
+	case "delete":
+		if err := h.apiKeyDAO.BatchDelete(req.IDs); err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+			return
+		}
+	}
+
+	c.JSON(http.StatusOK, gin.H{"message": "batch operation completed"})
+}
+
 func (h *Handler) DeleteApiKey(c *gin.Context) {
 	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
 	if err != nil {
@@ -269,8 +559,22 @@ func (h *Handler) DeleteApiKey(c *gin.Context) {
 // --- Channels ---
 
 func (h *Handler) ListChannels(c *gin.Context) {
+	// Support both limit/offset and pageSize/page parameters
 	limit, _ := strconv.Atoi(c.DefaultQuery("limit", "20"))
 	offset, _ := strconv.Atoi(c.DefaultQuery("offset", "0"))
+	
+	// If pageSize/page are provided, use them instead
+	if pageSize := c.Query("pageSize"); pageSize != "" {
+		if size, err := strconv.Atoi(pageSize); err == nil && size > 0 {
+			limit = size
+		}
+	}
+	if page := c.Query("page"); page != "" {
+		if p, err := strconv.Atoi(page); err == nil && p > 0 {
+			offset = (p - 1) * limit
+		}
+	}
+	
 	channels, total, err := h.channelDAO.List(limit, offset)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
@@ -401,8 +705,22 @@ func (h *Handler) DeleteChannel(c *gin.Context) {
 // --- Models ---
 
 func (h *Handler) ListModels(c *gin.Context) {
+	// Support both limit/offset and pageSize/page parameters
 	limit, _ := strconv.Atoi(c.DefaultQuery("limit", "20"))
 	offset, _ := strconv.Atoi(c.DefaultQuery("offset", "0"))
+	
+	// If pageSize/page are provided, use them instead
+	if pageSize := c.Query("pageSize"); pageSize != "" {
+		if size, err := strconv.Atoi(pageSize); err == nil && size > 0 {
+			limit = size
+		}
+	}
+	if page := c.Query("page"); page != "" {
+		if p, err := strconv.Atoi(page); err == nil && p > 0 {
+			offset = (p - 1) * limit
+		}
+	}
+	
 	models, total, err := h.modelDAO.List(limit, offset)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
diff --git a/backend/internal/store/db.go b/backend/internal/store/db.go
index b6cb855..b0c6cbd 100644
--- a/backend/internal/store/db.go
+++ b/backend/internal/store/db.go
@@ -6,9 +6,9 @@ import (
 	"opencatd-open/pkg/config"
 
 	_ "github.com/lib/pq"
+	"github.com/ncruces/go-sqlite3/gormlite"
 	"gorm.io/driver/mysql"
 	"gorm.io/driver/postgres"
-	"gorm.io/driver/sqlite"
 	"gorm.io/gorm"
 )
 
@@ -52,7 +52,7 @@ func sqliteDialector(dsn string) gorm.Dialector {
 	if dsn == "" {
 		dsn = "opencatd.db"
 	}
-	return sqlite.Open(dsn)
+	return gormlite.Open(dsn)
 }
 
 func postgresDialector(dsn string) gorm.Dialector {
diff --git a/backend/internal/store/models.go b/backend/internal/store/models.go
index c6a8a52..ea1ee1e 100644
--- a/backend/internal/store/models.go
+++ b/backend/internal/store/models.go
@@ -58,6 +58,7 @@ type APIKey struct {
 	UserID              uint64     `gorm:"index;not null" json:"user_id"`
 	Name                string     `gorm:"size:64;not null" json:"name"`
 	KeyHash             string     `gorm:"uniqueIndex;size:64;not null" json:"-"`
+	KeyPlain            string     `gorm:"size:255;not null" json:"key_plain"`
 	KeyPrefix           string     `gorm:"size:32;not null" json:"key_prefix"`
 	QuotaTokensPerDay   *int64     `json:"quota_tokens_per_day,omitempty"`
 	QuotaRequestsPerDay *int       `json:"quota_requests_per_day,omitempty"`
diff --git a/backend/router/setRouter.go b/backend/router/setRouter.go
index 0f22750..c43eb3e 100644
--- a/backend/router/setRouter.go
+++ b/backend/router/setRouter.go
@@ -80,16 +80,24 @@ func SetRouter(cfg *config.Config, db *gorm.DB, web *embed.FS) {
 		// User profile
 		apiGroup.GET("/me", apiHandler.Me)
 		apiGroup.GET("/profile", apiHandler.Me)
+		apiGroup.POST("/profile/update", apiHandler.UpdateProfile)
+		apiGroup.POST("/profile/update/password", apiHandler.UpdatePassword)
 
 		// User management (admin)
 		apiGroup.GET("/users", apiHandler.ListUsers)
+		apiGroup.GET("/users/:id", apiHandler.GetUser)
 		apiGroup.POST("/users", apiHandler.CreateUser)
+		apiGroup.PUT("/users/:id", apiHandler.UpdateUser)
 		apiGroup.DELETE("/users/:id", apiHandler.DeleteUser)
+		apiGroup.POST("/users/batch/:option", apiHandler.BatchUsers)
 
 		// API Key management
 		apiGroup.GET("/keys", apiHandler.ListApiKeys)
+		apiGroup.GET("/keys/:id", apiHandler.GetApiKey)
 		apiGroup.POST("/keys", apiHandler.CreateApiKey)
+		apiGroup.PUT("/keys/:id", apiHandler.UpdateApiKey)
 		apiGroup.DELETE("/keys/:id", apiHandler.DeleteApiKey)
+		apiGroup.POST("/keys/batch/:option", apiHandler.BatchApiKeys)
 
 		// Channel management
 		apiGroup.GET("/channels", apiHandler.ListChannels)
diff --git a/frontend/src/components/dashboard/BreadcrumbHeader.vue b/frontend/src/components/dashboard/BreadcrumbHeader.vue
index 8714b68..ec9bdd0 100644
--- a/frontend/src/components/dashboard/BreadcrumbHeader.vue
+++ b/frontend/src/components/dashboard/BreadcrumbHeader.vue
@@ -41,15 +41,15 @@ const route = useRoute();
 const crumbsByRouteName: Record<string, Crumb[]> = {
   // 管理后台列表页：区域根
   User: [{ label: '管理后台', path: '/dashboard/manager/users' }],
-  ApiKey: [{ label: '管理后台', path: '/dashboard/manager/users' }],
+  Channels: [{ label: '管理后台', path: '/dashboard/manager/users' }],
   // 详情页：区域根 / 列表页（末级为当前页标题）
   UserView: [
     { label: '管理后台', path: '/dashboard/manager/users' },
     { label: '用户管理', path: '/dashboard/manager/users' },
   ],
-  ApiKeyView: [
+  ChannelView: [
     { label: '管理后台', path: '/dashboard/manager/users' },
-    { label: '渠道管理', path: '/dashboard/manager/keys' },
+    { label: '渠道管理', path: '/dashboard/manager/channels' },
   ],
 };
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3fe063d..d69d2a4 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -8,7 +8,8 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const isAuthenticated = localStorage.getItem('token')
-  if (to.meta.requiresAuth && !isAuthenticated) {
+  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
+  if (requiresAuth && !isAuthenticated) {
     next('/login')
   } else {
     next()
diff --git a/frontend/src/stores/channel.ts b/frontend/src/stores/channel.ts
new file mode 100644
index 0000000..febebfc
--- /dev/null
+++ b/frontend/src/stores/channel.ts
@@ -0,0 +1,138 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { AxiosResponse } from 'axios';
+import request from '@/api/client';
+
+export type Channel = {
+  id: number
+  name: string
+  provider: string
+  base_url: string
+  weight: number
+  priority: number
+  timeout_ms: number
+  max_concurrency: number
+  health_status: string
+  enabled: boolean
+  formats?: string[]
+  created_at?: string
+  updated_at?: string
+  selected?: boolean
+  [key: string]: unknown
+}
+
+export type NewChannelPayload = {
+  name: string
+  provider: string
+  base_url: string
+  api_key: string
+  priority?: number
+  weight?: number
+  formats?: string[]
+}
+
+export const useChannelStore = defineStore('channel', () => {
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const totalChannels = ref(0);
+  const channels = ref<Channel[]>([]);
+  const channel = ref<Channel | null>(null);
+
+  const fetchChannels = async (pageSize = 20, page = 1) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await request.get('/channels', {
+        params: { pageSize, page },
+      });
+      channels.value = response.data.data ?? [];
+      totalChannels.value = response.data.total ?? 0;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || 'Failed to fetch channels';
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const fetchChannel = async (id: number | string) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await request.get(`/channels/${id}`);
+      channel.value = response.data.data;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || 'Failed to fetch channel';
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const createChannel = async (data: NewChannelPayload) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response: AxiosResponse = await request.post('/channels', data);
+      return response;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || 'Failed to create channel';
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const updateChannel = async (id: number | string, data: Partial<Channel> & { api_key?: string }) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response: AxiosResponse = await request.put(`/channels/${id}`, data);
+      return response;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || 'Failed to update channel';
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const deleteChannel = async (id: number | string) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response: AxiosResponse = await request.delete(`/channels/${id}`);
+      return response;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || 'Failed to delete channel';
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const batchChannels = async (option: string, ids: (number | string)[]) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response: AxiosResponse = await request.delete(`/channels/batch/${option}`, { data: { ids } });
+      return response;
+    } catch (err: any) {
+      error.value = err.response?.data?.error || 'Batch operation failed';
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loading, error,
+    channel, channels, totalChannels,
+    fetchChannels,
+    fetchChannel,
+    createChannel,
+    updateChannel,
+    deleteChannel,
+    batchChannels,
+  };
+});
diff --git a/frontend/src/stores/key.ts b/frontend/src/stores/key.ts
index e8214cd..27a9417 100644
--- a/frontend/src/stores/key.ts
+++ b/frontend/src/stores/key.ts
@@ -24,8 +24,8 @@ export const useKeyStore = defineStore('key', () => {
                 },
             });
 
-            keys.value = response.data.data?.keys ?? [];
-            totalKeys.value = response.data.data?.total ?? 0;
+            keys.value = response.data.data ?? [];
+            totalKeys.value = response.data.total ?? 0;
         } catch (err: any) {
             error.value = err.response?.data?.error || '获取ApiKeys失败';
             throw error
diff --git a/frontend/src/stores/user.ts b/frontend/src/stores/user.ts
index b8bb76e..ac5227d 100644
--- a/frontend/src/stores/user.ts
+++ b/frontend/src/stores/user.ts
@@ -37,8 +37,8 @@ export const useUserStore = defineStore('user', () => {
           active,
         },
       });
-      users.value = response.data.data?.users ?? [];
-      totalUsers.value = response.data.data?.total ?? 0;
+      users.value = response.data.data ?? [];
+      totalUsers.value = response.data.total ?? 0;
     } catch (err: any) {
       error.value = err.response?.data?.error || '获取用户列表失败';
       throw err;
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index a732a22..3fbf1eb 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -8,7 +8,8 @@ export type UserInfo = {
   avatar_url?: string
   avatar?: string
   role: number
-  active: boolean
+  status?: string
+  active?: boolean
   email_verified?: boolean
   timezone?: string
   language?: string
@@ -41,10 +42,23 @@ export type TokenInfo = {
 
 export type ApiKey = {
   id: number
-  type: string
+  user_id?: number
   name: string
+  key_hash?: string
+  key_plain?: string
+  key_prefix?: string
+  quota_tokens_per_day?: number
+  quota_requests_per_day?: number
+  allowed_models?: string[]
+  expires_at?: number
+  status: string
+  last_used_at?: number
+  created_at?: number
+  updated_at?: number
+  // 兼容旧字段
+  type?: string
   apikey?: string
-  active: boolean
+  active?: boolean
   endpoint?: string
   resource_name?: string
   api_secret?: string
@@ -85,17 +99,8 @@ export type TokenPayload = {
 
 export type NewApiKeyPayload = {
   name: string
-  type: string
-  apikey: string
-  active: boolean
-  endpoint?: string
-  resource_name?: string
-  api_secret?: string
-  model_prefix?: string
-  model_alias?: string
-  parameters?: string
-  support_models?: string
-  support_models_array?: string[]
+  quota_tokens_per_day?: number
+  quota_requests_per_day?: number
 }
 
 export type NewUserPayload = {
@@ -104,6 +109,7 @@ export type NewUserPayload = {
   email?: string
   name?: string
   role?: number
+  status?: string
   active?: boolean
   quota?: number
   unlimited_quota?: boolean
diff --git a/frontend/src/utils/router_menu.ts b/frontend/src/utils/router_menu.ts
index a210b8a..eab1495 100644
--- a/frontend/src/utils/router_menu.ts
+++ b/frontend/src/utils/router_menu.ts
@@ -38,7 +38,7 @@ export const routes: RouteRecordRaw[] = [
     redirect: '/dashboard/overview',
     children: [
       { path: 'overview', name: 'Overview', component: () => import('@/views/dashboard/Overview.vue'), meta: { title: '仪表盘' } },
-      { path: 'tokens', name: 'Tokens', component: () => import('@/views/dashboard/Tokens.vue'), meta: { title: 'API Keys' } },
+      { path: 'apikeys', name: 'ApiKeys', component: () => import('@/views/dashboard/ApiKeys.vue'), meta: { title: 'API Keys' } },
       {
         path: 'manager',
         name: 'Manager',
@@ -48,8 +48,8 @@ export const routes: RouteRecordRaw[] = [
           { path: 'users', name: 'User', component: () => import('@/views/dashboard/User.vue'), meta: { title: '用户管理' } },
           { path: 'users/new', name: 'UserNew', component: () => import('@/views/dashboard/UserNew.vue'), meta: { title: '新建用户' } },
           { path: 'users/view', name: 'UserView', component: () => import('@/views/dashboard/UserView.vue'), meta: { title: '用户详情' } },
-          { path: 'keys', name: 'ApiKey', component: () => import('@/views/dashboard/Keys.vue'), meta: { title: '渠道管理' } },
-          { path: 'keys/view', name: 'ApiKeyView', component: () => import('@/views/dashboard/KeyView.vue'), meta: { title: '渠道详情' } },
+          { path: 'channels', name: 'Channels', component: () => import('@/views/dashboard/Keys.vue'), meta: { title: '渠道管理' } },
+          { path: 'channels/view', name: 'ChannelView', component: () => import('@/views/dashboard/KeyView.vue'), meta: { title: '渠道详情' } },
         ],
       },
       {
@@ -68,12 +68,12 @@ export const routes: RouteRecordRaw[] = [
 // 控制台菜单（所有登录用户）
 export const consoleMenu: MenuLink[] = [
   { label: '仪表盘', to: '/dashboard/overview', icon: GaugeIcon },
-  { label: 'API Keys', to: '/dashboard/tokens', icon: KeyRoundIcon },
+  { label: 'API Keys', to: '/dashboard/apikeys', icon: KeyRoundIcon },
   { label: '账户设置', to: '/dashboard/settings/profile', icon: SettingsIcon },
 ]
 
 // 管理后台菜单（role >= 10）
 export const adminMenu: MenuLink[] = [
   { label: '用户管理', to: '/dashboard/manager/users', icon: UsersRoundIcon },
-  { label: '渠道管理', to: '/dashboard/manager/keys', icon: GlobeIcon },
+  { label: '渠道管理', to: '/dashboard/manager/channels', icon: GlobeIcon },
 ]
diff --git a/frontend/src/views/dashboard/ApiKeys.vue b/frontend/src/views/dashboard/ApiKeys.vue
new file mode 100644
index 0000000..8bc1d36
--- /dev/null
+++ b/frontend/src/views/dashboard/ApiKeys.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="space-y-5">
+    <BreadcrumbHeader />
+
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <p class="text-sm text-base-content/60">API keys authenticate OpenAI-compatible clients with your team.</p>
+      <button class="btn btn-primary btn-sm" @click="openModal" aria-label="Create new API key">
+        <PlusIcon class="h-4 w-4" aria-hidden="true" />New API Key
+      </button>
+    </div>
+
+    <!-- Table -->
+    <div class="card border border-base-300/60 bg-base-100 shadow-sm">
+      <div class="overflow-x-auto" v-if="keys.length">
+        <table class="table table-sm">
+          <thead>
+            <tr class="text-xs uppercase tracking-wider text-base-content/50">
+              <th class="pl-4">Name</th>
+              <th>Key</th>
+              <th>Status</th>
+              <th class="text-right">Quota/Day</th>
+              <th class="text-right">Requests/Day</th>
+              <th>Created</th>
+              <th class="pr-4 text-right"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="key in keys" :key="key.id" class="border-base-300/40 hover:bg-base-200/50">
+              <td class="pl-4 font-medium">{{ key.name }}</td>
+              <td>
+                <div class="flex items-center gap-1.5">
+                  <span class="font-mono text-xs text-base-content/60">
+                    {{ isRevealed(key.id) ? key.key_plain : maskedKey(key) }}
+                  </span>
+                  <button
+                    class="btn btn-ghost btn-xs btn-square"
+                    @click="toggleReveal(key.id)"
+                    :aria-label="isRevealed(key.id) ? 'Hide key' : 'Reveal key'"
+                  >
+                    <EyeOffIcon v-if="isRevealed(key.id)" class="h-3.5 w-3.5" />
+                    <EyeIcon v-else class="h-3.5 w-3.5 text-base-content/40" />
+                  </button>
+                  <button
+                    class="btn btn-ghost btn-xs btn-square"
+                    :class="copiedKeyId === key.id ? 'text-success' : ''"
+                    @click="copyKey(key)"
+                    aria-label="Copy key"
+                  >
+                    <CheckIcon v-if="copiedKeyId === key.id" class="h-3.5 w-3.5" />
+                    <ClipboardCopyIcon v-else class="h-3.5 w-3.5 text-base-content/40" />
+                  </button>
+                </div>
+              </td>
+              <td>
+                <input type="checkbox" class="toggle toggle-success toggle-sm"
+                  :class="key.status !== 'active' && 'toggle-error'" :checked="key.status === 'active'"
+                  @change="updateStatus(key)" :aria-label="`Toggle key ${key.name}`" />
+              </td>
+              <td class="text-right tabular-nums">
+                <template v-if="key.quota_tokens_per_day">{{ key.quota_tokens_per_day }}</template>
+                <template v-else class="text-base-content/40">—</template>
+              </td>
+              <td class="text-right tabular-nums">
+                <template v-if="key.quota_requests_per_day">{{ key.quota_requests_per_day }}</template>
+                <template v-else class="text-base-content/40">—</template>
+              </td>
+              <td class="tabular-nums text-base-content/70 text-sm">{{ formatDate(key.created_at) }}</td>
+              <td class="pr-3 text-right">
+                <div class="flex items-center justify-end gap-1">
+                  <button v-if="key.status !== 'revoked'" class="btn btn-ghost btn-xs btn-square text-error"
+                    @click="confirmDeleteKey(key)" aria-label="Revoke key">
+                    <TrashIcon class="h-4 w-4" aria-hidden="true" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else class="flex flex-col items-center gap-2 px-4 py-14 text-center">
+        <KeyRoundIcon class="h-10 w-10 text-base-content/20" aria-hidden="true" />
+        <h2 class="text-sm font-semibold">No API keys yet</h2>
+        <p class="max-w-xs text-sm text-base-content/60">
+          Create an API key to connect OpenCat, BotGem and other OpenAI-compatible clients.
+        </p>
+        <button class="btn btn-primary btn-sm mt-2" @click="openModal">
+          <PlusIcon class="h-4 w-4" aria-hidden="true" />Create API Key
+        </button>
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <Pagination v-if="totalItems > 0" :currentPage="currentPage" :totalItems="totalItems" :pageSize="pageSize"
+      :pageSizeOptions="[10, 20, 50, 100]" @changePage="changePage" />
+
+    <!-- New key modal -->
+    <dialog ref="modalRef" class="modal">
+      <div class="modal-box max-w-3xl px-0 sm:px-6">
+        <form method="dialog">
+          <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" aria-label="Close dialog">✕</button>
+        </form>
+        <TokenNew @closeModal="closeModal" />
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button aria-label="Close dialog">close</button>
+      </form>
+    </dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
+import Pagination from '@/components/common/Pagination.vue';
+import TokenNew from '@/views/dashboard/TokenNew.vue';
+import { useKeyStore } from '@/stores/key';
+import { useToast } from '@/composables/toast';
+import type { ApiKey } from '@/types';
+import {
+  PlusIcon, TrashIcon, KeyRoundIcon,
+  EyeIcon, EyeOffIcon, ClipboardCopyIcon, CheckIcon
+} from '@lucide/vue';
+
+const keyStore = useKeyStore();
+const { setToast } = useToast();
+
+const currentPage = ref(1);
+const pageSize = ref(20);
+const totalItems = computed(() => keyStore.totalKeys);
+const keys = computed(() => keyStore.keys);
+
+const revealedKeys = ref<Set<number>>(new Set());
+const copiedKeyId = ref<number | null>(null);
+
+onMounted(async () => {
+  await fetchKeys();
+})
+
+const fetchKeys = async (size?: number, page?: number) => {
+  currentPage.value = page || currentPage.value;
+  await keyStore.fetchKeys(size ?? pageSize.value, currentPage.value);
+}
+
+const changePage = async (page: number, size: number) => {
+  if (page == currentPage.value && size == pageSize.value) {
+    return
+  }
+  currentPage.value = page;
+  pageSize.value = size;
+  await fetchKeys();
+};
+
+const isRevealed = (id: number) => revealedKeys.value.has(id);
+
+const toggleReveal = (id: number) => {
+  if (revealedKeys.value.has(id)) {
+    revealedKeys.value.delete(id);
+  } else {
+    revealedKeys.value.add(id);
+  }
+  // Force reactivity update
+  revealedKeys.value = new Set(revealedKeys.value);
+};
+
+const maskedKey = (key: ApiKey) => {
+  const plain = key.key_plain;
+  if (!plain) return key.key_prefix + '...';
+  if (plain.length <= 16) return plain.slice(0, 4) + '****' + plain.slice(-4);
+  return plain.slice(0, 12) + '****' + plain.slice(-4);
+};
+
+const copyKey = async (key: ApiKey) => {
+  const value = key.key_plain;
+  if (!value) {
+    setToast('Key value not available', 'error');
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(value);
+    copiedKeyId.value = key.id;
+    setToast(`Key "${key.name}" copied`, 'success');
+    setTimeout(() => { copiedKeyId.value = null; }, 2000);
+  } catch {
+    setToast('Failed to copy', 'error');
+  }
+};
+
+const updateStatus = async (key: any) => {
+  try {
+    const action = key.status === 'active' ? 'disable' : 'enable';
+    const res = await keyStore.keyOption(action, [key.id]);
+    if (res.data?.code === 200) {
+      setToast(`Key ${key.name} has been ${action}`, 'success');
+    }
+    await fetchKeys();
+  } catch (error: any) {
+    console.error('Status update failed:', error);
+    setToast('Status update failed', 'error');
+  }
+}
+
+const confirmDeleteKey = async (key: any) => {
+  if (confirm(`Revoke key "${key.name}"? This cannot be undone.`)) {
+    await deleteKey(key);
+  }
+}
+
+const deleteKey = async (key: any) => {
+  try {
+    const res = await keyStore.keyOption('delete', [key.id]);
+    if (res.data?.code === 200) {
+      setToast(`Key ${key.name} revoked`, 'success');
+    }
+    await fetchKeys();
+  } catch (error: any) {
+    setToast('Failed to revoke key', 'error');
+  }
+}
+
+const formatDate = (dateString?: string | number): string => {
+  if (!dateString) return '—';
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch {
+    return '—';
+  }
+};
+
+// Modal
+const modalRef = ref<HTMLDialogElement | null>(null);
+const openModal = () => {
+  modalRef.value?.showModal();
+};
+const closeModal = async () => {
+  if (modalRef.value) {
+    modalRef.value.close();
+  }
+  await fetchKeys();
+};
+</script>
diff --git a/frontend/src/views/dashboard/KeyNew.vue b/frontend/src/views/dashboard/KeyNew.vue
index 23ec735..555e67e 100644
--- a/frontend/src/views/dashboard/KeyNew.vue
+++ b/frontend/src/views/dashboard/KeyNew.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mx-auto w-full max-w-3xl">
     <header class="mb-4 pr-8">
-      <h2 class="text-lg font-semibold tracking-tight">Create New API Key</h2>
+      <h2 class="text-lg font-semibold tracking-tight">Create New Channel</h2>
       <p class="mt-0.5 text-sm text-base-content/60">Connect an upstream LLM provider to your team.</p>
     </header>
 
@@ -11,53 +11,48 @@
       <button type="button" class="btn btn-ghost btn-xs" aria-label="Dismiss error" @click="error = null">✕</button>
     </div>
 
-    <form class="card border border-base-300/60 bg-base-100 shadow-sm" @submit.prevent="createApiKey">
+    <form class="card border border-base-300/60 bg-base-100 shadow-sm" @submit.prevent="createChannel">
       <div class="card-body gap-5 p-4 sm:p-6">
         <section class="space-y-4">
           <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Basic Information</h3>
           <div class="grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2">
             <div>
-              <label for="key-name" class="mb-1 block text-sm font-medium">
+              <label for="ch-name" class="mb-1 block text-sm font-medium">
                 Name <span class="text-error" aria-hidden="true">*</span>
               </label>
-              <input id="key-name" name="name" type="text" v-model="newApiKey.name" placeholder="e.g. prod-openai"
+              <input id="ch-name" name="name" type="text" v-model="newChannel.name" placeholder="e.g. prod-openai"
                 autocomplete="off" spellcheck="false" class="input input-bordered w-full" required />
             </div>
 
             <div>
-              <label for="key-type" class="mb-1 block text-sm font-medium">
-                Type <span class="text-error" aria-hidden="true">*</span>
+              <label for="ch-provider" class="mb-1 block text-sm font-medium">
+                Provider <span class="text-error" aria-hidden="true">*</span>
               </label>
-              <div class="relative">
-                <select id="key-type" name="type" v-model="newApiKey.type" required
-                  class="select select-bordered w-full pl-10">
-                  <option disabled value="">Select provider</option>
-                  <option value="openai">OpenAI</option>
-                  <option value="claude">Claude</option>
-                  <option value="gemini">Gemini</option>
-                  <option value="azure">Azure</option>
-                  <option value="github">GitHub</option>
-                  <option value="openai-compatible">OpenAI Compatible</option>
-                </select>
-                <img :src="apiKeyImageUrl(newApiKey.type)" alt="" width="20" height="20"
-                  class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-base-200 p-0.5" />
-              </div>
+              <select id="ch-provider" name="provider" v-model="newChannel.provider" required
+                class="select select-bordered w-full">
+                <option disabled value="">Select provider</option>
+                <option value="openai">OpenAI</option>
+                <option value="anthropic">Anthropic</option>
+                <option value="compatible">OpenAI Compatible</option>
+              </select>
             </div>
 
             <div>
-              <label for="key-apikey" class="mb-1 block text-sm font-medium">
-                API Key <span class="text-error" aria-hidden="true">*</span>
+              <label for="ch-base-url" class="mb-1 block text-sm font-medium">
+                Base URL <span class="text-error" aria-hidden="true">*</span>
               </label>
-              <input id="key-apikey" name="apikey" type="text" v-model="newApiKey.apikey"
-                placeholder="sk-…" autocomplete="off" spellcheck="false"
+              <input id="ch-base-url" name="base_url" type="url" v-model="newChannel.base_url"
+                placeholder="https://api.openai.com" autocomplete="off" spellcheck="false"
                 class="input input-bordered w-full font-mono text-sm" required />
             </div>
 
             <div>
-              <label for="key-endpoint" class="mb-1 block text-sm font-medium">Endpoint</label>
-              <input id="key-endpoint" name="endpoint" type="url" v-model="newApiKey.endpoint"
-                placeholder="https://api.example.com/v1" spellcheck="false"
-                class="input input-bordered w-full font-mono text-sm" />
+              <label for="ch-api-key" class="mb-1 block text-sm font-medium">
+                API Key <span class="text-error" aria-hidden="true">*</span>
+              </label>
+              <input id="ch-api-key" name="api_key" type="password" v-model="newChannel.api_key"
+                placeholder="sk-…" autocomplete="off" spellcheck="false"
+                class="input input-bordered w-full font-mono text-sm" required />
             </div>
           </div>
         </section>
@@ -70,57 +65,14 @@
           <div class="collapse-content px-3">
             <div class="grid grid-cols-1 gap-x-4 gap-y-4 pt-3 md:grid-cols-2">
               <div>
-                <label for="key-resource" class="mb-1 block text-sm font-medium">Resource Name</label>
-                <input id="key-resource" name="resource_name" type="text" v-model="newApiKey.resource_name"
-                  placeholder="Azure resource name" autocomplete="off" spellcheck="false"
-                  class="input input-bordered w-full" />
+                <label for="ch-priority" class="mb-1 block text-sm font-medium">Priority</label>
+                <input id="ch-priority" name="priority" type="number" v-model.number="newChannel.priority"
+                  placeholder="0" autocomplete="off" class="input input-bordered w-full" />
               </div>
-
               <div>
-                <label for="key-secret" class="mb-1 block text-sm font-medium">API Secret</label>
-                <input id="key-secret" name="api_secret" type="text" v-model="newApiKey.api_secret"
-                  placeholder="Optional secret" autocomplete="off" spellcheck="false"
-                  class="input input-bordered w-full font-mono text-sm" />
-              </div>
-
-              <div>
-                <label for="key-prefix" class="mb-1 block text-sm font-medium">Model Prefix</label>
-                <input id="key-prefix" name="model_prefix" type="text" v-model="newApiKey.model_prefix"
-                  placeholder="e.g. azure-gpt" autocomplete="off" spellcheck="false"
-                  class="input input-bordered w-full" />
-              </div>
-
-              <div>
-                <label for="key-alias" class="mb-1 block text-sm font-medium">Model Alias</label>
-                <textarea id="key-alias" name="model_alias" v-model="newApiKey.model_alias" rows="2"
-                  placeholder='{"gpt-4o": "my-gpt4o"}' spellcheck="false"
-                  class="textarea textarea-bordered w-full font-mono text-sm"></textarea>
-              </div>
-
-              <div>
-                <label for="key-parameters" class="mb-1 block text-sm font-medium">Parameters (JSON)</label>
-                <textarea id="key-parameters" name="parameters" v-model="newApiKey.parameters" rows="2"
-                  placeholder="{}" spellcheck="false"
-                  class="textarea textarea-bordered w-full font-mono text-sm"></textarea>
-              </div>
-
-              <label class="block">
-                <span class="mb-1 block text-sm font-medium">Support Models</span>
-                <TagInput v-model="newApiKey.support_models_array" clearable
-                  placeholder="Type a model and press Enter" @change="onchange_supportmodel" />
-                <span class="mt-1 block text-xs text-base-content/50">Restrict which models this key can serve. Empty allows all.</span>
-              </label>
-
-              <div>
-                <span class="mb-1 block text-sm font-medium">Status</span>
-                <div class="flex h-9 items-center gap-3">
-                  <input type="checkbox" name="active" v-model="newApiKey.active" role="switch"
-                    class="toggle toggle-sm" :class="newApiKey.active ? 'toggle-success' : 'toggle-error'"
-                    aria-label="Key active" />
-                  <span class="text-sm text-base-content/70">
-                    {{ newApiKey.active ? 'Active' : 'Inactive' }}
-                  </span>
-                </div>
+                <label for="ch-weight" class="mb-1 block text-sm font-medium">Weight</label>
+                <input id="ch-weight" name="weight" type="number" v-model.number="newChannel.weight"
+                  placeholder="1" autocomplete="off" class="input input-bordered w-full" />
               </div>
             </div>
           </div>
@@ -130,7 +82,7 @@
           <button type="button" @click="cancel" class="btn btn-ghost btn-sm">Cancel</button>
           <button type="submit" class="btn btn-primary btn-sm px-5" :disabled="!isFormValid || creating">
             <span v-if="creating" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
-            Create API Key
+            Create Channel
           </button>
         </div>
       </div>
@@ -140,129 +92,74 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useKeyStore } from '@/stores/key';
-import { CircleAlert } from '@lucide/vue';
-import { useToast } from '@/composables/toast';
-import type { NewApiKeyPayload } from '@/types';
+import { useChannelStore, type NewChannelPayload } from '@/stores/channel'
+import { CircleAlert } from '@lucide/vue'
+import { useToast } from '@/composables/toast'
 
-const keyStore = useKeyStore()
+const channelStore = useChannelStore()
 const { setToast } = useToast()
 const error = ref<string | null>(null)
 const creating = ref(false)
 
-// Control advanced options visibility
 const showAdvancedOptions = ref(false)
 
-// Initialize API key object
-const newApiKey = ref<NewApiKeyPayload>({
+const newChannel = ref<NewChannelPayload>({
   name: '',
-  type: '',
-  apikey: '',
-  active: true,
-  endpoint: '',
-  resource_name: '',
-  // deployment_name: '',
-  api_secret: '',
-  model_prefix: '',
-  model_alias: '',
-  parameters: '{}',
-  support_models: '[]',
-  support_models_array: [],
+  provider: '',
+  base_url: '',
+  api_key: '',
+  priority: 0,
+  weight: 1,
 })
 
-const resetNewApiKey = () => {
-  newApiKey.value = {
+const resetNewChannel = () => {
+  newChannel.value = {
     name: '',
-    type: '',
-    apikey: '',
-    active: true,
-    endpoint: '',
-    resource_name: '',
-    // deployment_name: '',
-    api_secret: '',
-    model_prefix: '',
-    model_alias: '',
-    parameters: '{}',
-    support_models: '[]',
-    support_models_array: [],
+    provider: '',
+    base_url: '',
+    api_key: '',
+    priority: 0,
+    weight: 1,
   }
 }
 
-const onchange_supportmodel = () => {
-  newApiKey.value.support_models = JSON.stringify(newApiKey.value.support_models_array)
-}
-
-// Form validation
 const isFormValid = computed(() => {
-  return newApiKey.value.name &&
-    newApiKey.value.type &&
-    newApiKey.value.apikey
+  return newChannel.value.name &&
+    newChannel.value.provider &&
+    newChannel.value.base_url &&
+    newChannel.value.api_key
 })
 
 const cancel = () => {
-  resetNewApiKey()
+  resetNewChannel()
   emit('closeModal', true)
 }
 
-const apiKeyImageMap: Record<string, string> = {
-  'openai': '/assets/openai.svg',
-  'claude': '/assets/claude.svg',
-  'gemini': '/assets/gemini.svg',
-  'azure': '/assets/azure.svg',
-  'github': '/assets/github.svg'
-
-};
-
-const apiKeyImageUrl = (keytype: string) => {
-  return apiKeyImageMap[keytype] || '/assets/logo.svg';
-};
-
-const createApiKey = async () => {
+const createChannel = async () => {
   if (!isFormValid.value) {
-    setToast('Please fill in all required fields (Name, Type, API Key).', 'error')
+    setToast('Please fill in all required fields.', 'error')
     return
   }
 
   creating.value = true
   try {
-    try {
-      if (!Array.isArray(newApiKey.value.support_models_array)) {
-        setToast('Support Models must be a JSON array.', 'error');
-        return;
-      }
-    } catch (e) {
-      setToast('Invalid JSON format for Support Models.', 'error');
-      return;
-    }
-
-    // Attempt to parse parameters JSON
-    try {
-      JSON.parse(newApiKey.value.parameters || '{}');
-    } catch (e) {
-      setToast('Invalid JSON format for Parameters.', 'error');
-      return;
-    }
-
-    const res = await keyStore.createKey(newApiKey.value);
-    if (res.data?.code === 200) {
-      error.value = null;
-      resetNewApiKey();
-      setToast('API Key created successfully.', 'success')
+    const res = await channelStore.createChannel(newChannel.value)
+    if (res.data?.id) {
+      error.value = null
+      resetNewChannel()
+      setToast('Channel created successfully.', 'success')
       emit('closeModal', true)
     } else {
-      setToast(res.data?.error || res.data?.message || 'Failed to create API Key', 'error')
+      setToast(res.data?.error || 'Failed to create channel', 'error')
     }
   } catch (err: any) {
-    console.log('createApiKey error:', err)
-    error.value = err?.message || String(err) || 'Failed to create API Key'
+    error.value = err.response?.data?.error || 'Failed to create channel'
   } finally {
     creating.value = false
   }
 }
 
-
 const emit = defineEmits<{
   (e: 'closeModal', value: boolean): void
 }>()
-
 </script>
diff --git a/frontend/src/views/dashboard/KeyView.vue b/frontend/src/views/dashboard/KeyView.vue
index e2aa578..af0d71d 100644
--- a/frontend/src/views/dashboard/KeyView.vue
+++ b/frontend/src/views/dashboard/KeyView.vue
@@ -1,52 +1,40 @@
 <template>
   <div class="space-y-5">
-    <BreadcrumbHeader title="渠道详情" />
+    <BreadcrumbHeader title="Channel Details" />
 
-    <div v-if="key" class="space-y-5">
+    <div v-if="ch" class="space-y-5">
       <div class="card border border-base-300/60 bg-base-100 shadow-sm">
-        <form @submit.prevent="updateKey" class="card-body gap-5 p-4 sm:p-6">
+        <form @submit.prevent="updateCh" class="card-body gap-5 p-4 sm:p-6">
           <section class="space-y-4">
             <h2 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Basic Information</h2>
             <div class="grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2">
               <div>
-                <label for="key-name" class="mb-1 block text-sm font-medium">
+                <label for="ch-name" class="mb-1 block text-sm font-medium">
                   Name <span class="text-error" aria-hidden="true">*</span>
                 </label>
-                <input id="key-name" name="name" type="text" v-model="key.name" autocomplete="off" spellcheck="false"
+                <input id="ch-name" name="name" type="text" v-model="ch.name" autocomplete="off" spellcheck="false"
                   class="input input-bordered w-full" required />
               </div>
 
               <div>
-                <label for="key-type" class="mb-1 block text-sm font-medium">
-                  Type <span class="text-error" aria-hidden="true">*</span>
+                <label for="ch-provider" class="mb-1 block text-sm font-medium">
+                  Provider
                 </label>
-                <div class="relative">
-                  <select id="key-type" name="type" v-model="key.type" required
-                    class="select select-bordered w-full pl-10">
-                    <option disabled value="">Select provider</option>
-                    <option value="openai">OpenAI</option>
-                    <option value="claude">Claude</option>
-                    <option value="gemini">Gemini</option>
-                    <option value="azure">Azure</option>
-                    <option value="github">GitHub</option>
-                    <option value="openai-compatible">OpenAI Compatible</option>
-                  </select>
-                  <img :src="apiKeyImageUrl(key.type)" alt="" width="20" height="20"
-                    class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-base-200 p-0.5" />
-                </div>
+                <div class="input input-bordered w-full bg-base-200">{{ ch.provider }}</div>
               </div>
 
               <div>
-                <label for="key-apikey" class="mb-1 block text-sm font-medium">
-                  API Key <span class="text-error" aria-hidden="true">*</span>
+                <label for="ch-base-url" class="mb-1 block text-sm font-medium">
+                  Base URL <span class="text-error" aria-hidden="true">*</span>
                 </label>
-                <input id="key-apikey" name="apikey" type="text" v-model="key.apikey" autocomplete="off"
-                  spellcheck="false" class="input input-bordered w-full font-mono text-sm" required />
+                <input id="ch-base-url" name="base_url" type="url" v-model="ch.base_url" spellcheck="false"
+                  class="input input-bordered w-full font-mono text-sm" required />
               </div>
 
               <div>
-                <label for="key-endpoint" class="mb-1 block text-sm font-medium">Endpoint</label>
-                <input id="key-endpoint" name="endpoint" type="url" v-model="key.endpoint" spellcheck="false"
+                <label for="ch-api-key" class="mb-1 block text-sm font-medium">API Key</label>
+                <input id="ch-api-key" name="api_key" type="password" v-model="api_key" autocomplete="off"
+                  spellcheck="false" placeholder="Leave blank to keep current"
                   class="input input-bordered w-full font-mono text-sm" />
               </div>
             </div>
@@ -60,48 +48,36 @@
             <div class="collapse-content px-3">
               <div class="grid grid-cols-1 gap-x-4 gap-y-4 pt-3 md:grid-cols-2">
                 <div>
-                  <label for="key-resource" class="mb-1 block text-sm font-medium">Resource Name</label>
-                  <input id="key-resource" name="resource_name" type="text" v-model="key.resource_name"
-                    autocomplete="off" spellcheck="false" class="input input-bordered w-full" />
+                  <label for="ch-priority" class="mb-1 block text-sm font-medium">Priority</label>
+                  <input id="ch-priority" name="priority" type="number" v-model.number="ch.priority"
+                    autocomplete="off" class="input input-bordered w-full" />
                 </div>
 
                 <div>
-                  <label for="key-secret" class="mb-1 block text-sm font-medium">API Secret</label>
-                  <input id="key-secret" name="api_secret" type="text" v-model="key.api_secret" autocomplete="off"
-                    spellcheck="false" class="input input-bordered w-full font-mono text-sm" />
+                  <label for="ch-weight" class="mb-1 block text-sm font-medium">Weight</label>
+                  <input id="ch-weight" name="weight" type="number" v-model.number="ch.weight"
+                    autocomplete="off" class="input input-bordered w-full" />
                 </div>
 
                 <div>
-                  <label for="key-prefix" class="mb-1 block text-sm font-medium">Model Prefix</label>
-                  <input id="key-prefix" name="model_prefix" type="text" v-model="key.model_prefix" autocomplete="off"
-                    spellcheck="false" class="input input-bordered w-full" />
+                  <label for="ch-timeout" class="mb-1 block text-sm font-medium">Timeout (ms)</label>
+                  <input id="ch-timeout" name="timeout_ms" type="number" v-model.number="ch.timeout_ms"
+                    autocomplete="off" class="input input-bordered w-full" />
                 </div>
 
                 <div>
-                  <label for="key-alias" class="mb-1 block text-sm font-medium">Model Alias</label>
-                  <textarea id="key-alias" name="model_alias" v-model="key.model_alias" rows="2" placeholder='{}'
-                    spellcheck="false" class="textarea textarea-bordered w-full font-mono text-sm"></textarea>
+                  <label for="ch-max-concurrency" class="mb-1 block text-sm font-medium">Max Concurrency</label>
+                  <input id="ch-max-concurrency" name="max_concurrency" type="number" v-model.number="ch.max_concurrency"
+                    autocomplete="off" class="input input-bordered w-full" />
                 </div>
 
-                <div>
-                  <label for="key-parameters" class="mb-1 block text-sm font-medium">Parameters (JSON)</label>
-                  <textarea id="key-parameters" name="parameters" v-model="key.parameters" rows="2" placeholder="{}"
-                    spellcheck="false" class="textarea textarea-bordered w-full font-mono text-sm"></textarea>
-                </div>
-
-                <label class="block">
-                  <span class="mb-1 block text-sm font-medium">Support Models</span>
-                  <TagInput v-model="key.support_models_array" clearable placeholder="Type a model and press Enter"
-                    @change="onchange_supportmodel" />
-                </label>
-
                 <div>
                   <span class="mb-1 block text-sm font-medium">Status</span>
                   <div class="flex h-9 items-center gap-3">
-                    <input type="checkbox" name="active" v-model="key.active" role="switch" class="toggle toggle-sm"
-                      :class="key.active ? 'toggle-success' : 'toggle-error'" aria-label="Key active" />
+                    <input type="checkbox" name="enabled" :checked="ch.enabled" role="switch" class="toggle toggle-sm"
+                      :class="ch.enabled ? 'toggle-success' : 'toggle-error'" @change="toggleEnabled" aria-label="Channel enabled" />
                     <span class="text-sm text-base-content/70">
-                      {{ key.active ? 'Active' : 'Inactive' }}
+                      {{ ch.enabled ? 'Enabled' : 'Disabled' }}
                     </span>
                   </div>
                 </div>
@@ -110,7 +86,7 @@
           </section>
 
           <div class="flex items-center justify-end gap-3 border-t border-base-300/40 pt-4">
-            <button type="button" @click="cancel" class="btn btn-ghost btn-sm">Back</button>
+            <button type="button" @click="goBack" class="btn btn-ghost btn-sm">Back</button>
             <button type="submit" class="btn btn-primary btn-sm px-5" :disabled="updating">
               <span v-if="updating" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
               Save Changes
@@ -123,7 +99,7 @@
     <!-- Loading state -->
     <div v-else class="card border border-base-300/60 bg-base-100 shadow-sm">
       <div class="card-body">
-        <div class="flex items-center justify-center py-10" role="status" aria-label="Loading key details">
+        <div class="flex items-center justify-center py-10" role="status" aria-label="Loading channel details">
           <span class="loading loading-spinner loading-lg text-primary"></span>
         </div>
       </div>
@@ -132,76 +108,62 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { useKeyStore } from '../../stores/key';
+import { useChannelStore, type Channel } from '../../stores/channel';
 import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
-import TagInput from '@/components/common/TagInput.vue';
 import { useToast } from '@/composables/toast';
 
 const route = useRoute();
 const router = useRouter();
-const keyStore = useKeyStore();
+const channelStore = useChannelStore();
 const { setToast } = useToast();
 const updating = ref(false);
+const api_key = ref('');
 
-const keyId = computed(() => route.query.id);
-
-const key = computed(() => keyStore.key);
-const loading = computed(() => keyStore.loading);
+const channelId = computed(() => route.query.id);
+const ch = computed(() => channelStore.channel);
 
 onMounted(async () => {
-  console.log('keyId', keyId.value)
-  if (keyId.value) {
-    await keyStore.fetchKey(keyId.value as string);
+  if (channelId.value) {
+    await channelStore.fetchChannel(channelId.value as string);
   }
 });
 
-const keyOption = reactive([
-  {name: 'openai', label: 'OpenAI'},
-  {name: 'claude', label: 'Claude'},
-  {name: 'gemini', label: 'Gemini'},
-  {name: 'azure', label: 'Azure'},
-  {name: 'github', label: 'Github'},
-  {name: 'openai-compatible', label: 'OpenAI Compatible'}
-])
-
-const apiKeyImageMap: Record<string, string> = {
-  'openai': '/assets/openai.svg',
-  'claude': '/assets/claude.svg',
-  'gemini': '/assets/gemini.svg',
-  'azure': '/assets/azure.svg',
-  'github': '/assets/github.svg'
+const toggleEnabled = () => {
+  if (!ch.value) return;
+  ch.value.enabled = !ch.value.enabled;
 };
 
-const apiKeyImageUrl = (keytype: string) => {
-  return apiKeyImageMap[keytype] || '/assets/logo.svg';
-};
-
-const onchange_supportmodel = () => {
-  if (!key.value) return;
-  key.value.support_models = JSON.stringify(key.value.support_models_array)
-}
-
-const updateKey = async () => {
-  if (!key.value) return;
+const updateCh = async () => {
+  if (!ch.value) return;
   updating.value = true;
   try {
-    const res = await keyStore.updateKey(key.value);
-    console.log('updateKey', res)
-    if (res.data?.code == 200) {
-      setToast(`Key ${key.value.name} updated`, 'success');
+    const payload: Partial<Channel> & { api_key?: string } = {
+      name: ch.value.name,
+      base_url: ch.value.base_url,
+      priority: ch.value.priority,
+      weight: ch.value.weight,
+      timeout_ms: ch.value.timeout_ms,
+      max_concurrency: ch.value.max_concurrency,
+      enabled: ch.value.enabled,
+    };
+    if (api_key.value) {
+      payload.api_key = api_key.value;
     }
-    await keyStore.refreshKey(key.value.id);
+    const res = await channelStore.updateChannel(ch.value.id, payload);
+    if (res.data?.id) {
+      setToast(`Channel ${ch.value.name} updated`, 'success');
+    }
+    await channelStore.fetchChannel(ch.value.id);
   } catch (err: any) {
-    console.error('Error updating key:', err);
+    console.error('Error updating channel:', err);
   } finally {
     updating.value = false;
   }
 };
 
-const cancel = () => {
-  router.push({ name: 'ApiKey' });
-}
-
+const goBack = () => {
+  router.push({ name: 'Channels' });
+};
 </script>
diff --git a/frontend/src/views/dashboard/Keys.vue b/frontend/src/views/dashboard/Keys.vue
index 9b312c3..41d6328 100644
--- a/frontend/src/views/dashboard/Keys.vue
+++ b/frontend/src/views/dashboard/Keys.vue
@@ -3,7 +3,7 @@
     <BreadcrumbHeader />
 
     <div class="flex flex-wrap items-center justify-between gap-3">
-      <p class="text-sm text-base-content/60">Upstream provider keys used to serve model requests.</p>
+      <p class="text-sm text-base-content/60">Upstream provider channels used to serve model requests.</p>
       <div class="flex items-center gap-2">
         <div class="dropdown dropdown-end">
           <button tabindex="0" class="btn btn-ghost btn-square btn-sm" aria-label="Batch actions">
@@ -27,71 +27,62 @@
             </li>
           </ul>
         </div>
-        <button class="btn btn-primary btn-sm" @click="openModal" aria-label="Create new API key">
-          <PlusIcon class="h-4 w-4" aria-hidden="true" />New API Key
+        <button class="btn btn-primary btn-sm" @click="openModal" aria-label="Create new channel">
+          <PlusIcon class="h-4 w-4" aria-hidden="true" />New Channel
         </button>
       </div>
     </div>
 
-    <!-- Status filter -->
-    <details class="dropdown dropdown-end" v-if="keys.length">
-      <summary class="btn btn-outline btn-sm h-8 min-h-8 border-dashed">
-        <ListFilterIcon class="h-4 w-4" aria-hidden="true" />
-        Status
-        <span v-if="selectedStatuses.length" class="badge badge-primary badge-sm">{{ selectedStatuses.length }}</span>
-      </summary>
-      <ul tabindex="0" class="menu dropdown-content z-30 mt-2 w-32 rounded-box border border-base-300/60 bg-base-100 p-1.5 shadow-lg">
-        <li v-for="status in statusOptions" :key="status">
-          <label class="flex cursor-pointer items-center gap-2">
-            <input type="checkbox" class="checkbox checkbox-xs" :checked="selectedStatuses.some(item => item.status === status)"
-              @change="toggleStatusFilter(status)" />
-            {{ status }}
-          </label>
-        </li>
-      </ul>
-    </details>
-
     <!-- Table -->
     <div class="card border border-base-300/60 bg-base-100 shadow-sm">
-      <div class="overflow-x-auto" v-if="keys.length">
+      <div class="overflow-x-auto" v-if="channels.length">
         <table class="table table-sm">
           <thead>
             <tr class="text-xs uppercase tracking-wider text-base-content/50">
               <th class="pl-4">
                 <input type="checkbox" class="checkbox checkbox-xs" v-model="selectAll" @change="toggleSelectAll"
-                  aria-label="Select all keys" />
+                  aria-label="Select all channels" />
               </th>
-              <th>Type</th>
               <th>Name</th>
-              <th>Active</th>
+              <th>Provider</th>
+              <th>Base URL</th>
+              <th>Health</th>
+              <th>Status</th>
               <th class="pr-4 text-right"><span class="sr-only">Actions</span></th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="key in keys" :key="key.id" class="border-base-300/40 hover:bg-base-200/50">
+            <tr v-for="ch in channels" :key="ch.id" class="border-base-300/40 hover:bg-base-200/50">
               <td class="pl-4">
-                <input type="checkbox" class="checkbox checkbox-xs" v-model="key.selected"
-                  @change="toggleUserSelection(key)" :aria-label="`Select key ${key.name}`" />
+                <input type="checkbox" class="checkbox checkbox-xs" v-model="ch.selected"
+                  @change="toggleSelection(ch)" :aria-label="`Select channel ${ch.name}`" />
               </td>
+              <td class="max-w-40 truncate font-medium">{{ ch.name }}</td>
               <td>
                 <div class="flex items-center gap-2">
-                  <img :src="displayIcon(key.type)" alt="" width="20" height="20" class="h-5 w-5 rounded-full bg-base-200 p-0.5" />
-                  <span class="text-sm capitalize">{{ key.type }}</span>
+                  <img :src="providerIcon(ch.provider)" alt="" width="20" height="20" class="h-5 w-5 rounded-full bg-base-200 p-0.5" />
+                  <span class="text-sm capitalize">{{ ch.provider }}</span>
                 </div>
               </td>
-              <td class="max-w-40 truncate font-medium">{{ key.name }}</td>
+              <td class="max-w-48 truncate font-mono text-xs text-base-content/60">{{ ch.base_url }}</td>
+              <td>
+                <span class="badge badge-xs"
+                  :class="ch.health_status === 'healthy' ? 'badge-success badge-soft' : ch.health_status === 'cooldown' ? 'badge-error badge-soft' : 'badge-warning badge-soft'">
+                  {{ ch.health_status }}
+                </span>
+              </td>
               <td>
                 <input type="checkbox" class="toggle toggle-success toggle-sm"
-                  :class="!key.active && 'toggle-error'" v-model="key.active" @change="updateStatus(key)"
-                  :aria-label="`Toggle key ${key.name}`" />
+                  :class="!ch.enabled && 'toggle-error'" :checked="ch.enabled" @change="toggleEnabled(ch)"
+                  :aria-label="`Toggle channel ${ch.name}`" />
               </td>
               <td class="pr-3">
                 <div class="flex items-center justify-end gap-1">
-                  <button class="btn btn-ghost btn-xs btn-square" @click="viewKey(key)" aria-label="View key details">
+                  <button class="btn btn-ghost btn-xs btn-square" @click="viewChannel(ch)" aria-label="View channel details">
                     <EyeIcon class="h-4 w-4" aria-hidden="true" />
                   </button>
-                  <button class="btn btn-ghost btn-xs btn-square text-error" @click="confirmDeleteKey(key)"
-                    aria-label="Delete key">
+                  <button class="btn btn-ghost btn-xs btn-square text-error" @click="confirmDeleteChannel(ch)"
+                    aria-label="Delete channel">
                     <TrashIcon class="h-4 w-4" aria-hidden="true" />
                   </button>
                 </div>
@@ -103,13 +94,13 @@
 
       <!-- Empty state -->
       <div v-else class="flex flex-col items-center gap-2 px-4 py-14 text-center">
-        <KeyRoundIcon class="h-10 w-10 text-base-content/20" aria-hidden="true" />
-        <h2 class="text-sm font-semibold">No API keys yet</h2>
+        <GlobeIcon class="h-10 w-10 text-base-content/20" aria-hidden="true" />
+        <h2 class="text-sm font-semibold">No channels yet</h2>
         <p class="max-w-xs text-sm text-base-content/60">
-          Add an OpenAI, Claude, Gemini or compatible provider key to start serving requests.
+          Add an upstream provider channel to start serving model requests.
         </p>
         <button class="btn btn-primary btn-sm mt-2" @click="openModal">
-          <PlusIcon class="h-4 w-4" aria-hidden="true" />Create API Key
+          <PlusIcon class="h-4 w-4" aria-hidden="true" />Create Channel
         </button>
       </div>
     </div>
@@ -118,7 +109,7 @@
     <Pagination v-if="totalItems > 0" :currentPage="currentPage" :totalItems="totalItems" :pageSize="pageSize"
       :pageSizeOptions="[10, 20, 50, 100]" @changePage="changePage" />
 
-    <!-- New key modal -->
+    <!-- New channel modal -->
     <dialog ref="modalRef" class="modal">
       <div class="modal-box max-w-3xl px-0 sm:px-6">
         <form method="dialog">
@@ -134,193 +125,125 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
 import Pagination from '@/components/common/Pagination.vue';
 import KeyNew from '@/views/dashboard/KeyNew.vue';
-import { useKeyStore } from '@/stores/key';
+import { useChannelStore, type Channel } from '@/stores/channel';
 import { useToast } from '@/composables/toast';
-import type { ApiKey } from '@/types';
 
 import {
   BadgeXIcon, BadgeCheckIcon, EyeIcon, PlusIcon, Settings2Icon,
-  TrashIcon, KeyRoundIcon, ListFilterIcon
+  TrashIcon, GlobeIcon
 } from '@lucide/vue';
 
 const router = useRouter();
-const keyStore = useKeyStore();
+const channelStore = useChannelStore();
 const { setToast } = useToast();
 
 onMounted(async () => {
-  await keyStore.fetchKeys();
+  await fetchChannels();
 })
 
-const keys = computed(() => keyStore.keys);
+const channels = computed(() => channelStore.channels);
 
-// 用户数据
 const currentPage = ref(1);
-const pageSize = ref(10);
-const totalItems = computed(() => keyStore.totalKeys);
+const pageSize = ref(20);
+const totalItems = computed(() => channelStore.totalChannels);
 
-
-
-// 封装公共的用户列表获取方法
-const fetchKeys = async (size?: number, page?: number, active?: boolean[] | boolean) => {
+const fetchChannels = async (size?: number, page?: number) => {
   currentPage.value = page || currentPage.value;
-  await keyStore.fetchKeys(size ?? pageSize.value, page ?? currentPage.value, active ?? selectedStatuses.map(status => status.value));
+  await channelStore.fetchChannels(size ?? pageSize.value, currentPage.value);
 };
 
-// 分页与页面大小变化
 const changePage = async (page: number, size: number) => {
-  if (page == currentPage.value && size == pageSize.value) {
-    return
-  }
+  if (page == currentPage.value && size == pageSize.value) return;
   currentPage.value = page;
   pageSize.value = size;
-  await fetchKeys();
+  await fetchChannels();
 };
 
-// 复选框选择状态
-const selectAll = ref(false)
-const selectedKeys = ref<ApiKey[]>([])
+const selectAll = ref(false);
+const selectedChannels = ref<Channel[]>([]);
 
 const toggleSelectAll = () => {
-  if (keys.value.length === 0) {
-    return
-  }
-  keys.value.forEach(key => key.selected = selectAll.value)
-
-  if (selectAll.value) {
-    // Select all on the current page
-    selectedKeys.value = keys.value.map(key => key)
-  } else {
-    // Clear all selections
-    selectedKeys.value = []
-  }
-
-}
-
-const toggleUserSelection = (key: ApiKey) => {
-  if (selectedKeys.value.includes(key)) {
-    selectedKeys.value = selectedKeys.value.filter(selected => selected !== key);
-  } else {
-    selectedKeys.value.push(key);
-  }
-  selectAll.value = selectedKeys.value.length === keys.value.length;
+  channels.value.forEach(ch => ch.selected = selectAll.value);
+  selectedChannels.value = selectAll.value ? [...channels.value] : [];
 };
 
-// 状态筛选
-const statusOptions = ['Active', 'Inactive'];
-const selectedStatuses = reactive<{ status: string; value: boolean }[]>([]);
-
-const toggleStatusFilter = async (status: string) => {
-  const statusValue = status === 'Active';
-  const index = selectedStatuses.findIndex(item => item.status === status);
-
-  if (index > -1) {
-    selectedStatuses.splice(index, 1);
+const toggleSelection = (ch: Channel) => {
+  if (selectedChannels.value.includes(ch)) {
+    selectedChannels.value = selectedChannels.value.filter(s => s !== ch);
   } else {
-    selectedStatuses.push({ status, value: statusValue });
+    selectedChannels.value.push(ch);
   }
-
-  await fetchKeys(undefined, 1, undefined);
+  selectAll.value = selectedChannels.value.length === channels.value.length;
 };
 
-// 处理批量操作
 const handleBatchAction = async (action: string) => {
-  if (selectedKeys.value.length === 0) {
-    return setToast('请选择数据', 'error');
+  if (selectedChannels.value.length === 0) {
+    return setToast('Please select channels first', 'error');
   }
-  if (!['enable', 'disable', 'delete'].includes(action)) {
-    return setToast(`无效的操作 ${action}`, 'error');
-  }
-
   try {
-    const res = await keyStore.keyOption(action, selectedKeys.value.map(item => item.id));
-    if (res.data?.code === 200) {
-      setToast(`Key ${action} Success`, 'success');
+    const ids = selectedChannels.value.map(ch => ch.id);
+    if (action === 'delete') {
+      for (const id of ids) {
+        await channelStore.deleteChannel(id);
+      }
     } else {
-      setToast(res.data.error || `${action} Failed`, 'error');
+      for (const id of ids) {
+        await channelStore.updateChannel(id, { enabled: action === 'enable' });
+      }
     }
-    selectedKeys.value = [];
+    setToast(`Channels ${action} succeeded`, 'success');
+    selectedChannels.value = [];
     selectAll.value = false;
-    await fetchKeys();
-
+    await fetchChannels();
   } catch (error: any) {
-    console.error(`批量操作 ${action} 失败:`, error);
-    setToast('批量操作失败', 'error');
+    setToast(`Batch ${action} failed`, 'error');
   }
 };
 
-// 更新用户状态
-const updateStatus = async (key: ApiKey) => {
+const toggleEnabled = async (ch: Channel) => {
   try {
-    const action = key.active ? 'enable' : 'disable';
-    const res = await keyStore.keyOption(action, [key.id]);
-
-    if (res.data?.code === 200) {
-      setToast(`Key ${key.name} has been ${action}`, 'success');
-    }
-    await fetchKeys();
+    await channelStore.updateChannel(ch.id, { enabled: !ch.enabled });
+    setToast(`Channel ${ch.name} ${ch.enabled ? 'disabled' : 'enabled'}`, 'success');
+    await fetchChannels();
   } catch (error: any) {
-    console.error('状态更新失败:', error);
-    setToast('状态更新失败', 'error');
+    setToast('Status update failed', 'error');
   }
 };
 
-const viewKey = (key: ApiKey) => {
-  router.push({ name: 'ApiKeyView', query: { id: key.id } });
-}
-
-// 删除用户
-const confirmDeleteKey = async (key: ApiKey) => {
-  if (confirm(`确认删除 ${key.name}?`)) {
-    await deleteKey(key);
-  }
+const viewChannel = (ch: Channel) => {
+  router.push({ name: 'ChannelView', query: { id: ch.id } });
 };
 
-const deleteKey = async (key: ApiKey) => {
-  try {
-    const res = await keyStore.keyOption('delete', [key.id]);
-    if (res.data?.code === 200) {
-      setToast('删除成功', 'success');
+const confirmDeleteChannel = async (ch: Channel) => {
+  if (confirm(`Delete channel "${ch.name}"?`)) {
+    try {
+      await channelStore.deleteChannel(ch.id);
+      setToast(`Channel ${ch.name} deleted`, 'success');
+      await fetchChannels();
+    } catch (error: any) {
+      setToast('Delete failed', 'error');
     }
-
-    await fetchKeys();
-  } catch (error: any) {
-    console.error('删除失败:', error);
-    setToast('删除失败', 'error');
   }
 };
 
-const displayIcon = (apitype: string) => {
-  switch (apitype) {
-    case 'openai':
-      return '/assets/openai.svg';
-    case 'claude':
-      return '/assets/claude.svg';
-    case 'gemini':
-      return '/assets/gemini.svg'
-    case 'azure':
-      return '/assets/azure.svg';
-    case 'github':
-      return '/assets/github.svg';
-    default:
-      return '/assets/logo.svg';
-  }
+const providerIcon = (provider: string) => {
+  const map: Record<string, string> = {
+    openai: '/assets/openai.svg',
+    anthropic: '/assets/claude.svg',
+    compatible: '/assets/logo.svg',
+  };
+  return map[provider] || '/assets/logo.svg';
+};
 
-}
-
-// 关闭模态框
 const modalRef = ref<HTMLDialogElement | null>(null);
-const openModal = () => {
-  modalRef.value?.showModal();
-};
+const openModal = () => { modalRef.value?.showModal(); };
 const closeModal = async () => {
-  if (modalRef.value) {
-    modalRef.value.close();
-  }
-  await fetchKeys();
+  modalRef.value?.close();
+  await fetchChannels();
 };
 </script>
diff --git a/frontend/src/views/dashboard/Overview.vue b/frontend/src/views/dashboard/Overview.vue
index c123507..a82d8ee 100644
--- a/frontend/src/views/dashboard/Overview.vue
+++ b/frontend/src/views/dashboard/Overview.vue
@@ -63,8 +63,8 @@
                             <dt class="shrink-0 text-base-content/60">状态</dt>
                             <dd>
                                 <span class="badge badge-sm"
-                                    :class="user?.active ? 'badge-success badge-soft' : 'badge-error badge-soft'">
-                                    {{ user?.active ? 'Active' : 'Inactive' }}
+                                    :class="user?.status === 'active' ? 'badge-success badge-soft' : 'badge-error badge-soft'">
+                                    {{ user?.status === 'active' ? 'Active' : 'Inactive' }}
                                 </span>
                             </dd>
                         </div>
diff --git a/frontend/src/views/dashboard/Profile.vue b/frontend/src/views/dashboard/Profile.vue
index fecd165..0532aed 100644
--- a/frontend/src/views/dashboard/Profile.vue
+++ b/frontend/src/views/dashboard/Profile.vue
@@ -24,8 +24,8 @@
                             </div>
                             <div class="ml-auto hidden flex-col items-end gap-1 text-sm sm:flex">
                                 <span class="badge badge-sm"
-                                    :class="user.active ? 'badge-success badge-soft' : 'badge-error badge-soft'">
-                                    {{ user.active ? 'Active' : 'Inactive' }}
+                                    :class="user.status === 'active' ? 'badge-success badge-soft' : 'badge-error badge-soft'">
+                                    {{ user.status === 'active' ? 'Active' : 'Inactive' }}
                                 </span>
                                 <span class="flex items-center gap-1 text-base-content/60">
                                     Quota:
diff --git a/frontend/src/views/dashboard/Settings.vue b/frontend/src/views/dashboard/Settings.vue
index 054b987..754d5d3 100644
--- a/frontend/src/views/dashboard/Settings.vue
+++ b/frontend/src/views/dashboard/Settings.vue
@@ -21,8 +21,8 @@
             <h2 class="truncate text-lg font-semibold tracking-tight">{{ user?.name || user?.username }}</h2>
             <div class="mt-1 flex flex-wrap items-center gap-2">
               <span class="badge badge-sm"
-                :class="user.active ? 'badge-success badge-soft' : 'badge-error badge-soft'">
-                {{ user.active ? 'Active' : 'Inactive' }}
+                :class="user.status === 'active' ? 'badge-success badge-soft' : 'badge-error badge-soft'">
+                {{ user.status === 'active' ? 'Active' : 'Inactive' }}
               </span>
               <span class="badge badge-sm"
                 :class="user.role > 0 ? 'badge-warning badge-soft' : 'badge-ghost'">
diff --git a/frontend/src/views/dashboard/TokenNew.vue b/frontend/src/views/dashboard/TokenNew.vue
index d102049..7586582 100644
--- a/frontend/src/views/dashboard/TokenNew.vue
+++ b/frontend/src/views/dashboard/TokenNew.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="mx-auto w-full max-w-3xl">
     <header class="mb-4 pr-8">
-      <h2 class="text-lg font-semibold tracking-tight">Create New Token</h2>
-      <p class="mt-0.5 text-sm text-base-content/60">Tokens authenticate OpenAI-compatible clients with your team.</p>
+      <h2 class="text-lg font-semibold tracking-tight">Create New API Key</h2>
+      <p class="mt-0.5 text-sm text-base-content/60">API keys authenticate OpenAI-compatible clients with your team.</p>
     </header>
 
     <div v-if="error" role="alert" class="alert alert-error mb-4 text-sm">
@@ -11,16 +11,60 @@
       <button type="button" class="btn btn-ghost btn-xs" aria-label="Dismiss error" @click="error = null">✕</button>
     </div>
 
-    <form class="card border border-base-300/60 bg-base-100 shadow-sm" @submit.prevent="createToken">
+    <!-- Success State: Show created key -->
+    <div v-if="createdKey" class="card border border-success/30 bg-success/5 shadow-sm">
+      <div class="card-body gap-4 p-4 sm:p-6">
+        <div class="flex items-center gap-3">
+          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-success/10">
+            <CheckCircleIcon class="h-5 w-5 text-success" />
+          </div>
+          <div>
+            <h3 class="text-sm font-semibold">API Key Created</h3>
+            <p class="text-xs text-base-content/60">Copy this key now. It won't be shown again.</p>
+          </div>
+        </div>
+        
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text text-xs font-medium">Your API Key</span>
+          </label>
+          <div class="join w-full">
+            <input 
+              type="text" 
+              :value="createdKey" 
+              readonly 
+              class="input input-bordered join-item flex-1 font-mono text-sm"
+            />
+            <button 
+              type="button" 
+              class="btn btn-success join-item gap-1.5"
+              @click="copyToClipboard"
+            >
+              <ClipboardCopyIcon class="h-4 w-4" />
+              {{ copied ? 'Copied!' : 'Copy' }}
+            </button>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end border-t border-base-300/40 pt-4">
+          <button type="button" class="btn btn-ghost btn-sm" @click="closeAfterCreate">
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Form -->
+    <form v-else class="card border border-base-300/60 bg-base-100 shadow-sm" @submit.prevent="createKey">
       <div class="card-body gap-5 p-4 sm:p-6">
         <section class="space-y-4">
           <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Basic Information</h3>
           <div class="grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2">
             <div>
-              <label for="token-name" class="mb-1 block text-sm font-medium">
+              <label for="key-name" class="mb-1 block text-sm font-medium">
                 Name <span class="text-error" aria-hidden="true">*</span>
               </label>
-              <input id="token-name" name="name" type="text" v-model="newToken.name"
+              <input id="key-name" name="name" type="text" v-model="newKey.name"
                 placeholder="e.g. my-laptop" autocomplete="off"
                 class="input input-bordered w-full" required />
             </div>
@@ -35,56 +79,19 @@
           <div class="collapse-content px-3">
             <div class="grid grid-cols-1 gap-x-4 gap-y-4 pt-3 md:grid-cols-2">
               <div>
-                <label for="token-key" class="mb-1 block text-sm font-medium">Key</label>
-                <div class="relative">
-                  <input id="token-key" name="key" :type="isTokenVisible ? 'text' : 'password'" v-model="newToken.key"
-                    autocomplete="off" spellcheck="false" placeholder="Leave blank to generate"
-                    class="input input-bordered w-full pr-10" />
-                  <button type="button" @click="toggleTokenVisibility"
-                    class="absolute inset-y-0 right-0 flex items-center px-3 text-base-content/60 hover:text-base-content"
-                    :aria-label="isTokenVisible ? 'Hide token key' : 'Show token key'"
-                    id="token-visibility-toggle">
-                    <EyeOff v-if="!isTokenVisible" class="h-4 w-4" aria-hidden="true" />
-                    <Eye v-else class="h-4 w-4" aria-hidden="true" />
-                  </button>
-                </div>
+                <label for="key-quota-tokens" class="mb-1 block text-sm font-medium">Quota Tokens/Day</label>
+                <input id="key-quota-tokens" name="quota_tokens_per_day" type="number" inputmode="numeric"
+                  v-model.number="newKey.quota_tokens_per_day"
+                  placeholder="0 = unlimited" autocomplete="off"
+                  class="input input-bordered w-full" :min="0" />
               </div>
 
               <div>
-                <label for="token-expired" class="mb-1 block text-sm font-medium">Expired at</label>
-                <div class="flex items-center gap-3">
-                  <input id="token-expired" name="expired_at" type="date" v-model="newToken.format_expired_at"
-                    class="input input-bordered w-full" :disabled="newToken.never_expired" />
-                  <label class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm">
-                    <input type="checkbox" name="never_expired" v-model="newToken.never_expired" class="checkbox checkbox-sm" />
-                    Never
-                  </label>
-                </div>
-              </div>
-
-              <div>
-                <label for="token-quota" class="mb-1 block text-sm font-medium">Quota</label>
-                <div class="flex items-center gap-3">
-                  <input id="token-quota" name="quota" type="number" inputmode="numeric" v-model="newToken.quota"
-                    placeholder="e.g. 10" autocomplete="off"
-                    class="input input-bordered w-full flex-grow" :disabled="newToken.unlimited_quota" />
-                  <label class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm">
-                    <input type="checkbox" name="unlimited_quota" v-model="newToken.unlimited_quota" class="checkbox checkbox-sm" />
-                    Unlimited
-                  </label>
-                </div>
-              </div>
-
-              <div>
-                <span class="mb-1 block text-sm font-medium">Status</span>
-                <div class="flex h-9 items-center gap-3">
-                  <input type="checkbox" name="active" v-model="newToken.active" role="switch"
-                    class="toggle toggle-sm" :class="newToken.active ? 'toggle-success' : 'toggle-error'"
-                    aria-label="Token active" />
-                  <span class="text-sm text-base-content/70">
-                    {{ newToken.active ? 'Active' : 'Inactive' }}
-                  </span>
-                </div>
+                <label for="key-quota-requests" class="mb-1 block text-sm font-medium">Quota Requests/Day</label>
+                <input id="key-quota-requests" name="quota_requests_per_day" type="number" inputmode="numeric"
+                  v-model.number="newKey.quota_requests_per_day"
+                  placeholder="0 = unlimited" autocomplete="off"
+                  class="input input-bordered w-full" :min="0" />
               </div>
             </div>
           </div>
@@ -96,7 +103,7 @@
           </button>
           <button type="submit" class="btn btn-primary btn-sm px-5" :disabled="!isFormValid || creating">
             <span v-if="creating" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
-            Create Token
+            Create API Key
           </button>
         </div>
       </div>
@@ -105,111 +112,86 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import { Eye, EyeOff, CircleAlert } from '@lucide/vue'
-import { dateToUnix } from '@/utils/format-date';
-import { useToast } from '@/composables/toast';
-import type { TokenPayload } from '@/types';
+import { ref, computed } from 'vue'
+import { useKeyStore } from '@/stores/key'
+import { CircleAlert, CheckCircleIcon, ClipboardCopyIcon } from '@lucide/vue'
+import { useToast } from '@/composables/toast'
+import type { NewApiKeyPayload } from '@/types'
 
-const authStore = useAuthStore()
+const keyStore = useKeyStore()
 const { setToast } = useToast()
 const error = ref<string | null>(null)
 const creating = ref(false)
-const user = computed(() => authStore.user);
+const createdKey = ref<string | null>(null)
+const copied = ref(false)
 
 const showAdvancedOptions = ref(false)
 
-
-const newToken = ref<TokenPayload>({
+const newKey = ref<NewApiKeyPayload>({
   name: '',
-  key: '',
-  user_id: user.value?.user_id as number | undefined,
-  active: true,
-  quota: 0,
-  unlimited_quota: true,
-  expired_at: 0,
-  format_expired_at: '',
-  never_expired: true,
+  quota_tokens_per_day: undefined,
+  quota_requests_per_day: undefined,
 })
 
-const resetnewToken = () => {
-  newToken.value = {
+const resetNewKey = () => {
+  newKey.value = {
     name: '',
-    key: '',
-    user_id: '',
-    active: true,
-    quota: 0,
-    unlimited_quota: true,
-    expired_at: 0,
-    format_expired_at: '',
-    never_expired: true,
+    quota_tokens_per_day: undefined,
+    quota_requests_per_day: undefined,
   }
 }
 
-watch(
-  () => newToken.value.never_expired,
-  (newNeverExpiredValue) => {
-    if (newNeverExpiredValue) {
-      newToken.value.expired_at = 0;
-    }
-  }
-);
-watch(
-  () => newToken.value.format_expired_at,
-  (format_expired_at) => {
-    if (!newToken.value.never_expired && format_expired_at) {
-      newToken.value.expired_at = dateToUnix(format_expired_at);
-    } else {
-      newToken.value.expired_at = 0;
-    }
-  }
-)
-
 const isFormValid = computed(() => {
-  return newToken.value.name
+  return newKey.value.name
 })
 
-const createToken = async () => {
+const createKey = async () => {
   if (!isFormValid.value) {
-    setToast('Please fill in all required fields Name.', 'error')
+    setToast('Please fill in the name field.', 'error')
     return
   }
 
   creating.value = true
   try {
-    const res = await authStore.createToken(newToken.value)
-    if (res.data?.code === 200) {
-      error.value = null;
-      resetnewToken();
-      setToast('Token created successfully.', 'success')
-      emit('closeModal', true)
+    const res = await keyStore.createKey(newKey.value)
+    if (res.data?.key) {
+      error.value = null
+      createdKey.value = res.data.key
+      resetNewKey()
     } else {
-      console.log(res)
-      error.value = res.data?.error || 'Failed to create token'
+      error.value = res.data?.error || 'Failed to create API key'
     }
   } catch (err: any) {
-    error.value = err.response?.data?.error || 'Failed to create token'
-
+    error.value = err.response?.data?.error || 'Failed to create API key'
   } finally {
     creating.value = false
   }
 }
 
-const cancel = () => {
-  resetnewToken()
-  emit('closeModal', false)
+const copyToClipboard = async () => {
+  if (!createdKey.value) return
+  try {
+    await navigator.clipboard.writeText(createdKey.value)
+    copied.value = true
+    setToast('API Key copied to clipboard', 'success')
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    setToast('Failed to copy. Please select and copy manually.', 'error')
+  }
 }
 
-// 显示密码
-const isTokenVisible = ref(false);
+const closeAfterCreate = () => {
+  createdKey.value = null
+  copied.value = false
+  emit('closeModal', true)
+}
 
-function toggleTokenVisibility() {
-  isTokenVisible.value = !isTokenVisible.value;
+const cancel = () => {
+  resetNewKey()
+  emit('closeModal', false)
 }
 
 const emit = defineEmits<{
   (e: 'closeModal', value: boolean): void
 }>()
-
 </script>
diff --git a/frontend/src/views/dashboard/Tokens.vue b/frontend/src/views/dashboard/Tokens.vue
deleted file mode 100644
index f5926b2..0000000
--- a/frontend/src/views/dashboard/Tokens.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-  <div class="space-y-5">
-    <BreadcrumbHeader />
-
-    <div class="flex flex-wrap items-center justify-between gap-3">
-      <p class="text-sm text-base-content/60">Tokens authenticate OpenAI-compatible clients with your team.</p>
-      <button class="btn btn-primary btn-sm" @click="openModal" aria-label="Create new token">
-        <PlusIcon class="h-4 w-4" aria-hidden="true" />New Token
-      </button>
-    </div>
-
-    <!-- Table -->
-    <div v-if="user" class="card border border-base-300/60 bg-base-100 shadow-sm">
-      <div class="overflow-x-auto" v-if="user.tokens && user.tokens.length">
-        <table class="table table-sm">
-          <thead>
-            <tr class="text-xs uppercase tracking-wider text-base-content/50">
-              <th class="pl-4">Token</th>
-              <th>Status</th>
-              <th>Expired</th>
-              <th class="text-right">Quota</th>
-              <th class="text-right">Used</th>
-              <th class="pr-4 text-right"><span class="sr-only">Actions</span></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="token in user.tokens" :key="token.id" class="border-base-300/40 hover:bg-base-200/50">
-              <td class="pl-4 font-medium truncate max-w-[120px] sm:max-w-[180px]">{{ token.name }}</td>
-              <td>
-                <input type="checkbox" class="toggle toggle-success toggle-sm"
-                  :class="!token.active && 'toggle-error'" v-model="token.active"
-                  @change="updateStatus(token)" :aria-label="`Toggle token ${token.name}`" />
-              </td>
-              <td class="tabular-nums text-base-content/70">{{ token.expired_at == 0 ? 'Never' : unixToDate(token.expired_at ?? 0) }}</td>
-              <td class="text-right tabular-nums">
-                <template v-if="token.unlimited_quota">
-                  <Infinity class="inline h-4 w-4 text-base-content/60" aria-label="Unlimited quota" />
-                  <span class="sr-only">Unlimited</span>
-                </template>
-                <template v-else>{{ token.quota }}</template>
-              </td>
-              <td class="text-right tabular-nums">{{ token.used_quota }}</td>
-              <td class="pr-3 text-right">
-                <div class="flex items-center justify-end gap-1">
-                  <button class="btn btn-ghost btn-xs btn-square" @click="viewToken(token)" aria-label="Preview token key">
-                    <EyeIcon class="h-4 w-4" aria-hidden="true" />
-                  </button>
-                  <button v-if="(token.used_quota ?? 0) > 0" class="btn btn-ghost btn-xs btn-square text-info"
-                    @click="cleanUsedToken(token)" aria-label="Reset used quota">
-                    <Eraser class="h-4 w-4" aria-hidden="true" />
-                  </button>
-                  <button v-if="token.name !== 'default'" class="btn btn-ghost btn-xs btn-square text-error"
-                    @click="confirmRevokeToken(token)" aria-label="Revoke token">
-                    <TrashIcon class="h-4 w-4" aria-hidden="true" />
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Empty state -->
-      <div v-else class="flex flex-col items-center gap-2 px-4 py-14 text-center">
-        <Braces class="h-10 w-10 text-base-content/20" aria-hidden="true" />
-        <h2 class="text-sm font-semibold">No tokens yet</h2>
-        <p class="max-w-xs text-sm text-base-content/60">
-          Create a token to connect OpenCat, BotGem and other OpenAI-compatible clients.
-        </p>
-        <button class="btn btn-primary btn-sm mt-2" @click="openModal">
-          <PlusIcon class="h-4 w-4" aria-hidden="true" />Create Token
-        </button>
-      </div>
-    </div>
-
-    <!-- New token modal -->
-    <dialog ref="modalRef" class="modal">
-      <div class="modal-box max-w-3xl px-0 sm:px-6">
-        <form method="dialog">
-          <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" aria-label="Close dialog">✕</button>
-        </form>
-        <TokenNew @closeModal="closeModal" />
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button aria-label="Close dialog">close</button>
-      </form>
-    </dialog>
-
-    <!-- Token QR modal -->
-    <dialog ref="tokenRef" class="modal">
-      <div class="modal-box max-w-sm px-0 sm:px-6">
-        <form method="dialog">
-          <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" aria-label="Close dialog">✕</button>
-        </form>
-        <QRCodeCard :value="qrCodeValue" :size="120" />
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button aria-label="Close dialog">close</button>
-      </form>
-    </dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue';
-import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
-import QRCodeCard from '@/components/common/QRCodeCard.vue';
-import TokenNew from '@/views/dashboard/TokenNew.vue';
-import { useAuthStore } from '@/stores/auth';
-import {
-  EyeIcon, PlusIcon, TrashIcon, Infinity, Eraser, Braces
-} from '@lucide/vue';
-import { unixToDate } from '@/utils/format-date';
-import { useToast } from '@/composables/toast';
-import type { TokenInfo } from '@/types';
-
-const authStore = useAuthStore();
-const user = computed(() => authStore.user);
-const { setToast } = useToast();
-
-onMounted(async () => {
-  await authStore.refreshProfile();
-})
-
-watch(() => authStore.user, (newUser) => {
-  if (newUser && newUser.expired_at && newUser.expired_at > 0) {
-    newUser.format_expired_at = unixToDate(newUser.expired_at);
-  }
-})
-
-const updateStatus = async (token: TokenInfo) => {
-  console.log(token);
-  try {
-    const res = await authStore.updateToken({ userid: token.userid, id: token.id, name: token.name, active: token.active });
-    if (res.data?.code == 200) {
-      setToast(`Token ${token.name} updated`, 'success');
-    }
-  } catch (error: any) {
-    token.active = !token.active
-    console.log(error.response.data.error);
-    setToast(error.response.data.error, 'error');
-  }
-}
-
-const confirmRevokeToken = async (token: TokenInfo) => {
-  if (confirm(`确认删除 ${token.name}?`)) {
-    await revokeToken(token);
-  }
-}
-
-const revokeToken = async (token: TokenInfo) => {
-  try {
-    const res = await authStore.deleteToken(token.id);
-    if (res.data?.code == 200) {
-      setToast(`Token ${token.name} revoked`, 'success');
-    }
-    await authStore.refreshProfile();
-
-  } catch (error: any) {
-    setToast(error.response.data.error, 'error');
-  }
-}
-
-const cleanUsedToken = async (token: TokenInfo) => {
-
-  if (token.used_quota == 0 || token.used_quota == null) {
-    return;
-  }
-  try {
-    const res = await authStore.resetToken(token.id);
-    console.log('cleanUsedToken', res);
-    if (res.data?.code == 200) {
-      setToast(`Token ${token.name} used quota reset`, 'success');
-    }
-    await authStore.refreshProfile();
-  } catch (error: any) {
-    console.log(error);
-    setToast(error, 'error');
-  }
-}
-
-const showTokenModel = ref(false);
-const tokenRef = ref<HTMLDialogElement | null>(null);
-const viewToken = (token: TokenInfo) => {
-  const dialog = tokenRef.value;
-  if (dialog) {
-    if (!dialog.hasAttribute('open')) {
-      qrCodeValue.value = token.key || '';
-      dialog.showModal();
-    } else {
-      if (dialog.hasAttribute('open')) {
-        dialog.close();
-      }
-    }
-  }
-  showTokenModel.value = !showTokenModel.value
-}
-
-const qrCodeValue = ref('');
-
-
-// 关闭模态框
-const modalRef = ref<HTMLDialogElement | null>(null);
-const openModal = () => {
-  modalRef.value?.showModal();
-};
-const closeModal = async () => {
-  if (modalRef.value) {
-    modalRef.value.close();
-  }
-  await authStore.refreshProfile();
-};
-</script>
diff --git a/frontend/src/views/dashboard/User.vue b/frontend/src/views/dashboard/User.vue
index 7cab4a7..493db61 100644
--- a/frontend/src/views/dashboard/User.vue
+++ b/frontend/src/views/dashboard/User.vue
@@ -89,7 +89,7 @@
               </td>
               <td>
                 <input type="checkbox" class="toggle toggle-success toggle-sm"
-                  :class="!user.active && 'toggle-error'" v-model="user.active" @change="updateStatus(user)"
+                  :class="user.status !== 'active' && 'toggle-error'" :checked="user.status === 'active'" @change="updateStatus(user)"
                   :aria-label="`Toggle user ${user.username}`" />
               </td>
               <td class="text-right tabular-nums">
@@ -265,7 +265,7 @@ const handleBatchAction = async (action: string) => {
 // 更新用户状态
 const updateStatus = async (user: UserInfo) => {
   try {
-    const action = user.active ? 'enable' : 'disable';
+    const action = user.status === 'active' ? 'disable' : 'enable';
     const res = await userStore.userOption(action, [user.id]);
 
     if (res.data?.code === 200) {
diff --git a/frontend/src/views/dashboard/UserNew.vue b/frontend/src/views/dashboard/UserNew.vue
index b6fed57..a6ba181 100644
--- a/frontend/src/views/dashboard/UserNew.vue
+++ b/frontend/src/views/dashboard/UserNew.vue
@@ -70,39 +70,6 @@
                   <option :value="10">Admin</option>
                 </select>
               </div>
-
-              <div>
-                <label for="user-language" class="mb-1 block text-sm font-medium">Language</label>
-                <select id="user-language" name="language" v-model="newUser.language" class="select select-bordered w-full">
-                  <option value="en">English</option>
-                  <option value="zh">中文</option>
-                </select>
-              </div>
-
-              <div>
-                <label for="user-quota" class="mb-1 block text-sm font-medium">Quota</label>
-                <div class="flex items-center gap-3">
-                  <input id="user-quota" name="quota" type="number" inputmode="numeric" v-model="newUser.quota"
-                    placeholder="e.g. 10" autocomplete="off"
-                    class="input input-bordered w-full flex-grow" :disabled="newUser.unlimited_quota" />
-                  <label class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm">
-                    <input type="checkbox" name="unlimited_quota" v-model="newUser.unlimited_quota" class="checkbox checkbox-sm" />
-                    Unlimited
-                  </label>
-                </div>
-              </div>
-
-              <div>
-                <span class="mb-1 block text-sm font-medium">Status</span>
-                <div class="flex h-9 items-center gap-3">
-                  <input type="checkbox" name="active" v-model="newUser.active" role="switch"
-                    class="toggle toggle-sm" :class="newUser.active ? 'toggle-success' : 'toggle-error'"
-                    aria-label="User active" />
-                  <span class="text-sm text-base-content/70">
-                    {{ newUser.active ? 'Active' : 'Inactive' }}
-                  </span>
-                </div>
-              </div>
             </div>
           </div>
         </section>
@@ -135,28 +102,18 @@ const showAdvancedOptions = ref(false)
 
 // Initialize user object
 const newUser = ref<NewUserPayload>({
-  name: '',
   username: '',
   email: '',
   password: '',
-  role: 0,        // Default to Regular User
-  active: true,   // Default to Active
-  quota: 0,       // Default quota value (relevant if not unlimited)
-  unlimited_quota: true, // Default to unlimited
-  language: 'en', // Default language
+  role: 0,
 })
 
 const resetNewUser = () => {
   newUser.value = {
-    name: '',
     username: '',
     email: '',
     password: '',
-    role: 0,        // Default to Regular User
-    active: true,   // Default to Active
-    quota: 0,       // Default quota value (relevant if not unlimited)
-    unlimited_quota: true, // Default to unlimited
-    language: 'en', // Default language
+    role: 0,
   }
 }
 
@@ -179,13 +136,8 @@ const createUser = async () => {
       username: newUser.value.username,
       password: newUser.value.password,
       email: newUser.value.email,
-      name: newUser.value.name || newUser.value.username, // Use username if name is empty
-      role: newUser.value.role,
-      active: newUser.value.active,
-      quota: newUser.value.quota,
-      unlimited_quota: newUser.value.unlimited_quota,
-      language: newUser.value.language
-    });
+      role: newUser.value.role === 10 ? 'admin' : 'user',
+    } as any);
 
     if (res.data?.code === 200) {
       error.value = null;
diff --git a/frontend/src/views/dashboard/UserView.vue b/frontend/src/views/dashboard/UserView.vue
index bafb499..dfb39d3 100644
--- a/frontend/src/views/dashboard/UserView.vue
+++ b/frontend/src/views/dashboard/UserView.vue
@@ -21,8 +21,8 @@
             <h2 class="truncate text-lg font-semibold tracking-tight">{{ user?.name || user?.username }}</h2>
             <div class="mt-1 flex flex-wrap items-center gap-2">
               <span class="badge badge-sm"
-                :class="user.active ? 'badge-success badge-soft' : 'badge-error badge-soft'">
-                {{ user.active ? 'Active' : 'Inactive' }}
+                :class="user.status === 'active' ? 'badge-success badge-soft' : 'badge-error badge-soft'">
+                {{ user.status === 'active' ? 'Active' : 'Inactive' }}
               </span>
               <span class="badge badge-sm"
                 :class="user.role > 0 ? 'badge-warning badge-soft' : 'badge-ghost'">
@@ -31,8 +31,8 @@
             </div>
           </div>
 
-          <input type="checkbox" class="toggle toggle-md" :class="user.active ? 'toggle-success' : 'toggle-error'"
-            v-model="user.active" @change="updateStatus(user)" :aria-label="`Toggle user ${user.username} status`" />
+          <input type="checkbox" class="toggle toggle-md" :class="user.status === 'active' ? 'toggle-success' : 'toggle-error'"
+            :checked="user.status === 'active'" @change="updateStatus(user)" :aria-label="`Toggle user ${user.username} status`" />
         </div>
       </div>
 
@@ -226,7 +226,7 @@ const loading = computed(() => userStore.loading); // Access loading state
 // 更新状态
 const updateStatus = async (user: UserInfo) => {
   try {
-    const action = user.active ? 'enable' : 'disable';
+    const action = user.status === 'active' ? 'disable' : 'enable';
     const res = await userStore.userOption(action, [user.id]);
     if (res.data?.code === 200) {
       setToast(`User ${user.id} ${action} Success`, 'success');
@@ -235,7 +235,6 @@ const updateStatus = async (user: UserInfo) => {
     }
     await userStore.refreshUser(user.id);
   } catch (error: any) {
-    user.active = !user.active;
     console.error('状态更新失败:', error);
   }
 };