diff --git a/cmd/gopcomm/community_yap.gox b/cmd/gopcomm/community_yap.gox
index 2853f33..16a498a 100644
--- a/cmd/gopcomm/community_yap.gox
+++ b/cmd/gopcomm/community_yap.gox
@@ -39,11 +39,39 @@ get "/success", ctx => {
 }
 
 get "/error", ctx => {
-	ctx.yap "4xx", {}
+	var user *core.User
+	userId := ""
+	token, err := core.GetToken(ctx)
+	if err == nil {
+		user, err = community.GetUser(token.Value)
+		if err != nil {
+			xLog.Error("get user error:", err)
+		} else {
+			userId = user.Id
+		}
+	}
+	ctx.yap "4xx", {
+		"UserId":  userId,
+		"User":    user,
+	}
 }
 
 get "/failed", ctx => {
-	ctx.yap "5xx", {}
+	var user *core.User
+	userId := ""
+	token, err := core.GetToken(ctx)
+	if err == nil {
+		user, err = community.GetUser(token.Value)
+		if err != nil {
+			xLog.Error("get user error:", err)
+		} else {
+			userId = user.Id
+		}
+	}
+	ctx.yap "5xx", {
+		"UserId":  userId,
+		"User":    user,
+	}
 }
 
 get "/demo", ctx => {
@@ -150,18 +178,48 @@ get "/userEdit", ctx => {
 	if err != nil {
 		http.Redirect(ctx.ResponseWriter, ctx.Request, "/error", http.StatusTemporaryRedirect)
 	}
+	fullUser, _ := gac.GetUser()
 	appInfo, _ := community.GetApplicationInfo()
 	appInfoStr, _ := json.Marshal(*appInfo)
 	binds, _ := json.Marshal(gac.GetProviderBindStatus())
+	currentUser, _ := json.Marshal(fullUser)
 	user := gac.GetUserSimple()
 	ctx.yap "user_edit", {
 		"UserId":      user.Id,
 		"User":        user,
+		"CurrentUser": string(currentUser),
 		"Application": string(appInfoStr),
 		"Binds":       string(binds),
 	}
 }
 
+post "/update/user", ctx => {
+	token, err := core.GetToken(ctx)
+	uid, err := community.ParseJwtToken(token.Value)
+	user := &core.UserInfo{
+		Id: uid,
+		Name:     ctx.param("name"),
+		Birthday: ctx.param("birthday"),
+		Gender:   ctx.param("gender"),
+		Phone:    ctx.param("phone"),
+		Email:    ctx.param("email"),
+		Avatar:   ctx.param("avatar"),
+		Owner: ctx.param("owner"),
+		DisplayName: ctx.param("name"),
+	}
+	_, err = community.UpdateUserById(fmt.Sprintf("%s/%s", user.Owner, user.Name), user)
+	if err != nil {
+		xLog.Info(err)
+		ctx.json {
+			"code": 0,
+			"msg":  "update failed",
+		}
+	}
+	ctx.json {
+		"code": 200,
+	}
+}
+
 get "/add", ctx => {
 	var user *core.User
 	userId := ""
@@ -218,17 +276,17 @@ get "/medias", ctx => {
     if err != nil {
         limitInt = limitConst
     }
-    files,count,err := community.ListMediaByUserId(todo, uid, format,pageInt,limitInt)
+    files, count, err := community.ListMediaByUserId(todo, uid, format,pageInt,limitInt)
     if err != nil {
        ctx.json {
           "code": 0,
-          "count": count,
+          "total": count,
           "err":  err.Error(),
        }
     } else {
        ctx.json {
           "code":  200,
-          "count": count,
+          "total": count,
           "items": files,
        }
     }
diff --git a/cmd/gopcomm/gop_autogen.go b/cmd/gopcomm/gop_autogen.go
index b9c72c3..1e143c5 100644
--- a/cmd/gopcomm/gop_autogen.go
+++ b/cmd/gopcomm/gop_autogen.go
@@ -1,34 +1,37 @@
+// Code generated by gop (Go+); DO NOT EDIT.
+
 package main
 
 import (
-	"fmt"
-	"os"
-	"strconv"
-	"github.com/goplus/yap"
 	"context"
 	"encoding/json"
-	"net/http"
-	"net/url"
+	"fmt"
 	"github.com/goplus/community/internal/core"
 	"github.com/goplus/community/translation"
+	"github.com/goplus/yap"
 	_ "github.com/joho/godotenv/autoload"
-	gopaccountsdk "github.com/liuscraft/gop-casdoor-account-sdk"
+	"github.com/liuscraft/gop-casdoor-account-sdk"
 	"github.com/qiniu/x/xlog"
 	"golang.org/x/text/language"
+	"net/http"
+	"net/url"
+	"os"
+	"strconv"
 )
 
+const _ = true
 const (
 	layoutUS   = "January 2, 2006"
 	limitConst = 10
 )
 
-type community_yap struct {
+type community struct {
 	yap.App
 	community *core.Community
 	trans     *translation.Engine
 }
 //line cmd/gopcomm/community_yap.gox:28
-func (this *community_yap) MainEntry() {
+func (this *community) MainEntry() {
 //line cmd/gopcomm/community_yap.gox:28:1
 	todo := context.TODO()
 //line cmd/gopcomm/community_yap.gox:29:1
@@ -48,761 +51,824 @@ func (this *community_yap) MainEntry() {
 //line cmd/gopcomm/community_yap.gox:41:1
 	this.Get("/error", func(ctx *yap.Context) {
 //line cmd/gopcomm/community_yap.gox:42:1
+		var user *core.User
+//line cmd/gopcomm/community_yap.gox:43:1
+		userId := ""
+//line cmd/gopcomm/community_yap.gox:44:1
+		token, err := core.GetToken(ctx)
+//line cmd/gopcomm/community_yap.gox:45:1
+		if err == nil {
+//line cmd/gopcomm/community_yap.gox:46:1
+			user, err = this.community.GetUser(token.Value)
+//line cmd/gopcomm/community_yap.gox:47:1
+			if err != nil {
+//line cmd/gopcomm/community_yap.gox:48:1
+				xLog.Error("get user error:", err)
+			} else {
+//line cmd/gopcomm/community_yap.gox:50:1
+				userId = user.Id
+			}
+		}
+//line cmd/gopcomm/community_yap.gox:53:1
 		ctx.Yap__1("4xx", map[string]interface {
-		}{})
+		}{"UserId": userId, "User": user})
 	})
-//line cmd/gopcomm/community_yap.gox:45:1
+//line cmd/gopcomm/community_yap.gox:59:1
 	this.Get("/failed", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:46:1
+//line cmd/gopcomm/community_yap.gox:60:1
+		var user *core.User
+//line cmd/gopcomm/community_yap.gox:61:1
+		userId := ""
+//line cmd/gopcomm/community_yap.gox:62:1
+		token, err := core.GetToken(ctx)
+//line cmd/gopcomm/community_yap.gox:63:1
+		if err == nil {
+//line cmd/gopcomm/community_yap.gox:64:1
+			user, err = this.community.GetUser(token.Value)
+//line cmd/gopcomm/community_yap.gox:65:1
+			if err != nil {
+//line cmd/gopcomm/community_yap.gox:66:1
+				xLog.Error("get user error:", err)
+			} else {
+//line cmd/gopcomm/community_yap.gox:68:1
+				userId = user.Id
+			}
+		}
+//line cmd/gopcomm/community_yap.gox:71:1
 		ctx.Yap__1("5xx", map[string]interface {
-		}{})
+		}{"UserId": userId, "User": user})
 	})
-//line cmd/gopcomm/community_yap.gox:49:1
+//line cmd/gopcomm/community_yap.gox:77:1
 	this.Get("/demo", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:50:1
+//line cmd/gopcomm/community_yap.gox:78:1
 		ctx.Yap__1("demo", map[string]interface {
 		}{})
 	})
-//line cmd/gopcomm/community_yap.gox:53:1
+//line cmd/gopcomm/community_yap.gox:81:1
 	this.Get("/signin", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:54:1
+//line cmd/gopcomm/community_yap.gox:82:1
 		ctx.Yap__1("signin", map[string]interface {
 		}{})
 	})
-//line cmd/gopcomm/community_yap.gox:57:1
+//line cmd/gopcomm/community_yap.gox:85:1
 	this.Get("/p/:id", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:60:1
+//line cmd/gopcomm/community_yap.gox:86:1
 		// todo middleware
 		// Get User Info
 		var user *core.User
-//line cmd/gopcomm/community_yap.gox:61:1
+//line cmd/gopcomm/community_yap.gox:89:1
 		userId := ""
-//line cmd/gopcomm/community_yap.gox:62:1
+//line cmd/gopcomm/community_yap.gox:90:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:63:1
+//line cmd/gopcomm/community_yap.gox:91:1
 		if err == nil {
-//line cmd/gopcomm/community_yap.gox:64:1
+//line cmd/gopcomm/community_yap.gox:92:1
 			user, err = this.community.GetUser(token.Value)
-//line cmd/gopcomm/community_yap.gox:65:1
+//line cmd/gopcomm/community_yap.gox:93:1
 			if err != nil {
-//line cmd/gopcomm/community_yap.gox:66:1
+//line cmd/gopcomm/community_yap.gox:94:1
 				xLog.Error("get user error:", err)
 			} else {
-//line cmd/gopcomm/community_yap.gox:68:1
+//line cmd/gopcomm/community_yap.gox:96:1
 				userId = user.Id
 			}
 		}
-//line cmd/gopcomm/community_yap.gox:72:1
+//line cmd/gopcomm/community_yap.gox:100:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:73:1
+//line cmd/gopcomm/community_yap.gox:101:1
 		article, _ := this.community.Article(todo, id)
-//line cmd/gopcomm/community_yap.gox:74:1
+//line cmd/gopcomm/community_yap.gox:102:1
 		articleJson, _ := json.Marshal(&article)
-//line cmd/gopcomm/community_yap.gox:75:1
+//line cmd/gopcomm/community_yap.gox:103:1
 		ctx.Yap__1("article", map[string]interface {
 		}{"UserId": userId, "User": user, "Article": string(articleJson)})
 	})
-//line cmd/gopcomm/community_yap.gox:82:1
+//line cmd/gopcomm/community_yap.gox:110:1
 	this.Get("/getArticle/:id", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:83:1
+//line cmd/gopcomm/community_yap.gox:111:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:84:1
+//line cmd/gopcomm/community_yap.gox:112:1
 		article, _ := this.community.Article(todo, id)
-//line cmd/gopcomm/community_yap.gox:85:1
+//line cmd/gopcomm/community_yap.gox:113:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "data": article})
 	})
-//line cmd/gopcomm/community_yap.gox:91:1
+//line cmd/gopcomm/community_yap.gox:119:1
 	this.Get("/user/:id", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:92:1
+//line cmd/gopcomm/community_yap.gox:120:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:94:1
+//line cmd/gopcomm/community_yap.gox:122:1
 		userClaim, err := this.community.GetUserClaim(id)
-//line cmd/gopcomm/community_yap.gox:95:1
+//line cmd/gopcomm/community_yap.gox:123:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:96:1
+//line cmd/gopcomm/community_yap.gox:124:1
 			xLog.Error("get current user error:", err)
 		}
-//line cmd/gopcomm/community_yap.gox:99:1
+//line cmd/gopcomm/community_yap.gox:126:1
 		// get user by token
 		var user *core.User
-//line cmd/gopcomm/community_yap.gox:100:1
+//line cmd/gopcomm/community_yap.gox:128:1
 		userId := ""
-//line cmd/gopcomm/community_yap.gox:101:1
+//line cmd/gopcomm/community_yap.gox:129:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:102:1
+//line cmd/gopcomm/community_yap.gox:130:1
 		if err == nil {
-//line cmd/gopcomm/community_yap.gox:103:1
+//line cmd/gopcomm/community_yap.gox:131:1
 			user, err = this.community.GetUser(token.Value)
-//line cmd/gopcomm/community_yap.gox:104:1
+//line cmd/gopcomm/community_yap.gox:132:1
 			if err != nil {
-//line cmd/gopcomm/community_yap.gox:105:1
+//line cmd/gopcomm/community_yap.gox:133:1
 				xLog.Error("get user error:", err)
 			} else {
-//line cmd/gopcomm/community_yap.gox:107:1
+//line cmd/gopcomm/community_yap.gox:135:1
 				userId = user.Id
 			}
 		}
-//line cmd/gopcomm/community_yap.gox:111:1
+//line cmd/gopcomm/community_yap.gox:139:1
 		items, next, _ := this.community.GetArticlesByUid(todo, id, core.MarkBegin, limitConst)
-//line cmd/gopcomm/community_yap.gox:112:1
+//line cmd/gopcomm/community_yap.gox:140:1
 		userClaimJson, _ := json.Marshal(&userClaim)
-//line cmd/gopcomm/community_yap.gox:113:1
+//line cmd/gopcomm/community_yap.gox:141:1
 		itemsJson, _ := json.Marshal(&items)
-//line cmd/gopcomm/community_yap.gox:114:1
+//line cmd/gopcomm/community_yap.gox:142:1
 		ctx.Yap__1("user", map[string]interface {
 		}{"Id": id, "CurrentUser": string(userClaimJson), "User": user, "Items": string(itemsJson), "UserId": userId, "Next": next})
 	})
-//line cmd/gopcomm/community_yap.gox:123:1
+//line cmd/gopcomm/community_yap.gox:151:1
 	this.Get("/userUnlink", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:124:1
+//line cmd/gopcomm/community_yap.gox:152:1
 		pv := ctx.Param("pv")
-//line cmd/gopcomm/community_yap.gox:125:1
+//line cmd/gopcomm/community_yap.gox:153:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:126:1
+//line cmd/gopcomm/community_yap.gox:154:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:127:1
+//line cmd/gopcomm/community_yap.gox:155:1
 			http.Redirect(ctx.ResponseWriter, ctx.Request, "/login", http.StatusTemporaryRedirect)
-//line cmd/gopcomm/community_yap.gox:128:1
+//line cmd/gopcomm/community_yap.gox:156:1
 			return
 		}
-//line cmd/gopcomm/community_yap.gox:130:1
+//line cmd/gopcomm/community_yap.gox:158:1
 		switch pv {
-//line cmd/gopcomm/community_yap.gox:131:1
+//line cmd/gopcomm/community_yap.gox:159:1
 		case "Twitter":
-//line cmd/gopcomm/community_yap.gox:132:1
+//line cmd/gopcomm/community_yap.gox:160:1
 		case "Facebook":
-//line cmd/gopcomm/community_yap.gox:133:1
+//line cmd/gopcomm/community_yap.gox:161:1
 		case "Github":
-//line cmd/gopcomm/community_yap.gox:134:1
+//line cmd/gopcomm/community_yap.gox:162:1
 		case "WeChat":
-//line cmd/gopcomm/community_yap.gox:135:1
+//line cmd/gopcomm/community_yap.gox:163:1
 		default:
-//line cmd/gopcomm/community_yap.gox:136:1
+//line cmd/gopcomm/community_yap.gox:164:1
 			pv = ""
 		}
-//line cmd/gopcomm/community_yap.gox:138:1
+//line cmd/gopcomm/community_yap.gox:166:1
 		gac, err := gopaccountsdk.GetClient(token.Value)
-//line cmd/gopcomm/community_yap.gox:139:1
+//line cmd/gopcomm/community_yap.gox:167:1
 		if err == nil {
-//line cmd/gopcomm/community_yap.gox:140:1
+//line cmd/gopcomm/community_yap.gox:168:1
 			gac.UnLink(pv)
 		}
-//line cmd/gopcomm/community_yap.gox:142:1
+//line cmd/gopcomm/community_yap.gox:170:1
 		http.Redirect(ctx.ResponseWriter, ctx.Request, "/userEdit", http.StatusTemporaryRedirect)
 	})
-//line cmd/gopcomm/community_yap.gox:144:1
+//line cmd/gopcomm/community_yap.gox:172:1
 	this.Get("/userEdit", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:145:1
+//line cmd/gopcomm/community_yap.gox:173:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:146:1
+//line cmd/gopcomm/community_yap.gox:174:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:147:1
+//line cmd/gopcomm/community_yap.gox:175:1
 			http.Redirect(ctx.ResponseWriter, ctx.Request, "/error", http.StatusTemporaryRedirect)
 		}
-//line cmd/gopcomm/community_yap.gox:149:1
+//line cmd/gopcomm/community_yap.gox:177:1
 		gac, err := gopaccountsdk.GetClient(token.Value)
-//line cmd/gopcomm/community_yap.gox:150:1
+//line cmd/gopcomm/community_yap.gox:178:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:151:1
+//line cmd/gopcomm/community_yap.gox:179:1
 			http.Redirect(ctx.ResponseWriter, ctx.Request, "/error", http.StatusTemporaryRedirect)
 		}
-//line cmd/gopcomm/community_yap.gox:153:1
+//line cmd/gopcomm/community_yap.gox:181:1
+		fullUser, _ := gac.GetUser()
+//line cmd/gopcomm/community_yap.gox:182:1
 		appInfo, _ := this.community.GetApplicationInfo()
-//line cmd/gopcomm/community_yap.gox:154:1
+//line cmd/gopcomm/community_yap.gox:183:1
 		appInfoStr, _ := json.Marshal(*appInfo)
-//line cmd/gopcomm/community_yap.gox:155:1
+//line cmd/gopcomm/community_yap.gox:184:1
 		binds, _ := json.Marshal(gac.GetProviderBindStatus())
-//line cmd/gopcomm/community_yap.gox:156:1
+//line cmd/gopcomm/community_yap.gox:185:1
+		currentUser, _ := json.Marshal(fullUser)
+//line cmd/gopcomm/community_yap.gox:186:1
 		user := gac.GetUserSimple()
-//line cmd/gopcomm/community_yap.gox:157:1
+//line cmd/gopcomm/community_yap.gox:187:1
 		ctx.Yap__1("user_edit", map[string]interface {
-		}{"UserId": user.Id, "User": user, "Application": string(appInfoStr), "Binds": string(binds)})
+		}{"UserId": user.Id, "User": user, "CurrentUser": string(currentUser), "Application": string(appInfoStr), "Binds": string(binds)})
 	})
-//line cmd/gopcomm/community_yap.gox:165:1
+//line cmd/gopcomm/community_yap.gox:196:1
+	this.Post("/update/user", func(ctx *yap.Context) {
+//line cmd/gopcomm/community_yap.gox:197:1
+		token, err := core.GetToken(ctx)
+//line cmd/gopcomm/community_yap.gox:198:1
+		uid, err := this.community.ParseJwtToken(token.Value)
+//line cmd/gopcomm/community_yap.gox:199:1
+		user := &core.UserInfo{Id: uid, Name: ctx.Param("name"), Birthday: ctx.Param("birthday"), Gender: ctx.Param("gender"), Phone: ctx.Param("phone"), Email: ctx.Param("email"), Avatar: ctx.Param("avatar"), Owner: ctx.Param("owner"), DisplayName: ctx.Param("name")}
+//line cmd/gopcomm/community_yap.gox:210:1
+		_, err = this.community.UpdateUserById(fmt.Sprintf("%s/%s", user.Owner, user.Name), user)
+//line cmd/gopcomm/community_yap.gox:211:1
+		if err != nil {
+//line cmd/gopcomm/community_yap.gox:212:1
+			xLog.Info(err)
+//line cmd/gopcomm/community_yap.gox:213:1
+			ctx.Json__1(map[string]interface {
+			}{"code": 0, "msg": "update failed"})
+		}
+//line cmd/gopcomm/community_yap.gox:218:1
+		ctx.Json__1(map[string]int{"code": 200})
+	})
+//line cmd/gopcomm/community_yap.gox:223:1
 	this.Get("/add", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:166:1
+//line cmd/gopcomm/community_yap.gox:224:1
 		var user *core.User
-//line cmd/gopcomm/community_yap.gox:167:1
+//line cmd/gopcomm/community_yap.gox:225:1
 		userId := ""
-//line cmd/gopcomm/community_yap.gox:168:1
+//line cmd/gopcomm/community_yap.gox:226:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:169:1
+//line cmd/gopcomm/community_yap.gox:227:1
 		if err == nil {
-//line cmd/gopcomm/community_yap.gox:170:1
+//line cmd/gopcomm/community_yap.gox:228:1
 			user, err = this.community.GetUser(token.Value)
-//line cmd/gopcomm/community_yap.gox:171:1
+//line cmd/gopcomm/community_yap.gox:229:1
 			if err != nil {
-//line cmd/gopcomm/community_yap.gox:172:1
+//line cmd/gopcomm/community_yap.gox:230:1
 				xLog.Error("get user error:", err)
 			} else {
-//line cmd/gopcomm/community_yap.gox:174:1
+//line cmd/gopcomm/community_yap.gox:232:1
 				userId = user.Id
 			}
 		}
-//line cmd/gopcomm/community_yap.gox:177:1
+//line cmd/gopcomm/community_yap.gox:235:1
 		ctx.Yap__1("edit", map[string]interface {
 		}{"User": user, "UserId": userId})
 	})
-//line cmd/gopcomm/community_yap.gox:183:1
+//line cmd/gopcomm/community_yap.gox:241:1
 	this.Get("/delete", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:184:1
+//line cmd/gopcomm/community_yap.gox:242:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:185:1
+//line cmd/gopcomm/community_yap.gox:243:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:186:1
+//line cmd/gopcomm/community_yap.gox:244:1
 		uid, err := this.community.ParseJwtToken(token.Value)
-//line cmd/gopcomm/community_yap.gox:187:1
+//line cmd/gopcomm/community_yap.gox:245:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:188:1
+//line cmd/gopcomm/community_yap.gox:246:1
 			xLog.Error("token parse error")
-//line cmd/gopcomm/community_yap.gox:189:1
+//line cmd/gopcomm/community_yap.gox:247:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 0, "err": err.Error()})
 		}
-//line cmd/gopcomm/community_yap.gox:194:1
+//line cmd/gopcomm/community_yap.gox:252:1
 		err = this.community.DeleteArticle(todo, uid, id)
-//line cmd/gopcomm/community_yap.gox:195:1
+//line cmd/gopcomm/community_yap.gox:253:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:196:1
+//line cmd/gopcomm/community_yap.gox:254:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 0, "err": "delete failed"})
 		} else {
-//line cmd/gopcomm/community_yap.gox:201:1
+//line cmd/gopcomm/community_yap.gox:259:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 200, "msg": "delete success"})
 		}
 	})
-//line cmd/gopcomm/community_yap.gox:208:1
+//line cmd/gopcomm/community_yap.gox:266:1
 	this.Get("/medias", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:209:1
+//line cmd/gopcomm/community_yap.gox:267:1
 		format := ctx.Param("format")
-//line cmd/gopcomm/community_yap.gox:210:1
+//line cmd/gopcomm/community_yap.gox:268:1
 		uid := ctx.Param("uid")
-//line cmd/gopcomm/community_yap.gox:211:1
+//line cmd/gopcomm/community_yap.gox:269:1
 		page := ctx.Param("page")
-//line cmd/gopcomm/community_yap.gox:212:1
+//line cmd/gopcomm/community_yap.gox:270:1
 		pageInt, err := strconv.Atoi(page)
-//line cmd/gopcomm/community_yap.gox:213:1
+//line cmd/gopcomm/community_yap.gox:271:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:214:1
+//line cmd/gopcomm/community_yap.gox:272:1
 			pageInt = 1
 		}
-//line cmd/gopcomm/community_yap.gox:216:1
+//line cmd/gopcomm/community_yap.gox:274:1
 		limit := ctx.Param("limit")
-//line cmd/gopcomm/community_yap.gox:217:1
+//line cmd/gopcomm/community_yap.gox:275:1
 		limitInt, err := strconv.Atoi(limit)
-//line cmd/gopcomm/community_yap.gox:218:1
+//line cmd/gopcomm/community_yap.gox:276:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:219:1
+//line cmd/gopcomm/community_yap.gox:277:1
 			limitInt = limitConst
 		}
-//line cmd/gopcomm/community_yap.gox:221:1
+//line cmd/gopcomm/community_yap.gox:279:1
 		files, count, err := this.community.ListMediaByUserId(todo, uid, format, pageInt, limitInt)
-//line cmd/gopcomm/community_yap.gox:222:1
+//line cmd/gopcomm/community_yap.gox:280:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:223:1
+//line cmd/gopcomm/community_yap.gox:281:1
 			ctx.Json__1(map[string]interface {
-			}{"code": 0, "count": count, "err": err.Error()})
+			}{"code": 0, "total": count, "err": err.Error()})
 		} else {
-//line cmd/gopcomm/community_yap.gox:229:1
+//line cmd/gopcomm/community_yap.gox:287:1
 			ctx.Json__1(map[string]interface {
-			}{"code": 200, "count": count, "items": files})
+			}{"code": 200, "total": count, "items": files})
 		}
 	})
-//line cmd/gopcomm/community_yap.gox:236:1
+//line cmd/gopcomm/community_yap.gox:294:1
 	this.Get("/delMedia", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:237:1
+//line cmd/gopcomm/community_yap.gox:295:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:238:1
+//line cmd/gopcomm/community_yap.gox:296:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:239:1
+//line cmd/gopcomm/community_yap.gox:297:1
 		uid, err := this.community.ParseJwtToken(token.Value)
-//line cmd/gopcomm/community_yap.gox:240:1
+//line cmd/gopcomm/community_yap.gox:298:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:241:1
+//line cmd/gopcomm/community_yap.gox:299:1
 			xLog.Error("token parse error")
-//line cmd/gopcomm/community_yap.gox:242:1
+//line cmd/gopcomm/community_yap.gox:300:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 0, "err": err.Error()})
 		}
-//line cmd/gopcomm/community_yap.gox:247:1
+//line cmd/gopcomm/community_yap.gox:305:1
 		err = this.community.DelMedia(todo, uid, id)
-//line cmd/gopcomm/community_yap.gox:248:1
+//line cmd/gopcomm/community_yap.gox:306:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:249:1
+//line cmd/gopcomm/community_yap.gox:307:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 0, "err": "delete failed"})
 		} else {
-//line cmd/gopcomm/community_yap.gox:254:1
+//line cmd/gopcomm/community_yap.gox:312:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 200, "msg": "delete success"})
 		}
 	})
-//line cmd/gopcomm/community_yap.gox:261:1
+//line cmd/gopcomm/community_yap.gox:319:1
 	this.Get("/", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:263:1
+//line cmd/gopcomm/community_yap.gox:320:1
 		// Get User Info
 		var user *core.User
-//line cmd/gopcomm/community_yap.gox:264:1
+//line cmd/gopcomm/community_yap.gox:322:1
 		userId := ""
-//line cmd/gopcomm/community_yap.gox:265:1
+//line cmd/gopcomm/community_yap.gox:323:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:266:1
+//line cmd/gopcomm/community_yap.gox:324:1
 		if err == nil {
-//line cmd/gopcomm/community_yap.gox:267:1
+//line cmd/gopcomm/community_yap.gox:325:1
 			user, err = this.community.GetUser(token.Value)
-//line cmd/gopcomm/community_yap.gox:268:1
+//line cmd/gopcomm/community_yap.gox:326:1
 			if err != nil {
-//line cmd/gopcomm/community_yap.gox:269:1
+//line cmd/gopcomm/community_yap.gox:327:1
 				xLog.Error("get user error:", err)
 			} else {
-//line cmd/gopcomm/community_yap.gox:271:1
+//line cmd/gopcomm/community_yap.gox:329:1
 				userId = user.Id
 			}
 		}
-//line cmd/gopcomm/community_yap.gox:275:1
+//line cmd/gopcomm/community_yap.gox:333:1
 		articles, next, _ := this.community.ListArticle(todo, core.MarkBegin, limitConst, "")
-//line cmd/gopcomm/community_yap.gox:276:1
+//line cmd/gopcomm/community_yap.gox:334:1
 		articlesJson, _ := json.Marshal(&articles)
-//line cmd/gopcomm/community_yap.gox:277:1
+//line cmd/gopcomm/community_yap.gox:335:1
 		ctx.Yap__1("home", map[string]interface {
 		}{"UserId": userId, "User": user, "Items": string(articlesJson), "Next": next})
 	})
-//line cmd/gopcomm/community_yap.gox:285:1
+//line cmd/gopcomm/community_yap.gox:343:1
 	this.Get("/get", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:286:1
+//line cmd/gopcomm/community_yap.gox:344:1
 		from := ctx.Param("from")
-//line cmd/gopcomm/community_yap.gox:287:1
+//line cmd/gopcomm/community_yap.gox:345:1
 		limit := ctx.Param("limit")
-//line cmd/gopcomm/community_yap.gox:288:1
+//line cmd/gopcomm/community_yap.gox:346:1
 		searchValue := ctx.Param("value")
-//line cmd/gopcomm/community_yap.gox:290:1
+//line cmd/gopcomm/community_yap.gox:348:1
 		limitInt, err := strconv.Atoi(limit)
-//line cmd/gopcomm/community_yap.gox:291:1
+//line cmd/gopcomm/community_yap.gox:349:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:292:1
+//line cmd/gopcomm/community_yap.gox:350:1
 			limitInt = limitConst
 		}
-//line cmd/gopcomm/community_yap.gox:295:1
+//line cmd/gopcomm/community_yap.gox:353:1
 		articles, next, _ := this.community.ListArticle(todo, from, limitInt, searchValue)
-//line cmd/gopcomm/community_yap.gox:296:1
+//line cmd/gopcomm/community_yap.gox:354:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "items": articles, "next": next, "value": searchValue})
 	})
-//line cmd/gopcomm/community_yap.gox:304:1
+//line cmd/gopcomm/community_yap.gox:362:1
 	this.Get("/userArticles", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:305:1
+//line cmd/gopcomm/community_yap.gox:363:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:306:1
+//line cmd/gopcomm/community_yap.gox:364:1
 		from := ctx.Param("from")
-//line cmd/gopcomm/community_yap.gox:307:1
+//line cmd/gopcomm/community_yap.gox:365:1
 		limit := ctx.Param("limit")
-//line cmd/gopcomm/community_yap.gox:309:1
+//line cmd/gopcomm/community_yap.gox:367:1
 		limitInt, err := strconv.Atoi(limit)
-//line cmd/gopcomm/community_yap.gox:310:1
+//line cmd/gopcomm/community_yap.gox:368:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:311:1
+//line cmd/gopcomm/community_yap.gox:369:1
 			limitInt = limitConst
 		}
-//line cmd/gopcomm/community_yap.gox:313:1
+//line cmd/gopcomm/community_yap.gox:371:1
 		items, next, _ := this.community.GetArticlesByUid(todo, id, from, limitInt)
-//line cmd/gopcomm/community_yap.gox:314:1
+//line cmd/gopcomm/community_yap.gox:372:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "items": items, "next": next})
 	})
-//line cmd/gopcomm/community_yap.gox:321:1
+//line cmd/gopcomm/community_yap.gox:379:1
 	this.Get("/search", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:322:1
+//line cmd/gopcomm/community_yap.gox:380:1
 		searchValue := ctx.Param("value")
-//line cmd/gopcomm/community_yap.gox:331:1
+//line cmd/gopcomm/community_yap.gox:388:1
 		// todo middleware
 		var user *core.User
-//line cmd/gopcomm/community_yap.gox:332:1
+//line cmd/gopcomm/community_yap.gox:390:1
 		userId := ""
-//line cmd/gopcomm/community_yap.gox:333:1
+//line cmd/gopcomm/community_yap.gox:391:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:334:1
+//line cmd/gopcomm/community_yap.gox:392:1
 		if err == nil {
-//line cmd/gopcomm/community_yap.gox:335:1
+//line cmd/gopcomm/community_yap.gox:393:1
 			user, err = this.community.GetUser(token.Value)
-//line cmd/gopcomm/community_yap.gox:336:1
+//line cmd/gopcomm/community_yap.gox:394:1
 			if err != nil {
-//line cmd/gopcomm/community_yap.gox:337:1
+//line cmd/gopcomm/community_yap.gox:395:1
 				xLog.Error("get user error:", err)
 			} else {
-//line cmd/gopcomm/community_yap.gox:339:1
+//line cmd/gopcomm/community_yap.gox:397:1
 				userId = user.Id
 			}
 		}
-//line cmd/gopcomm/community_yap.gox:343:1
+//line cmd/gopcomm/community_yap.gox:401:1
 		articles, next, _ := this.community.ListArticle(todo, core.MarkBegin, limitConst, searchValue)
-//line cmd/gopcomm/community_yap.gox:344:1
+//line cmd/gopcomm/community_yap.gox:402:1
 		articlesJson, _ := json.Marshal(&articles)
-//line cmd/gopcomm/community_yap.gox:345:1
+//line cmd/gopcomm/community_yap.gox:403:1
 		ctx.Yap__1("home", map[string]interface {
 		}{"UserId": userId, "User": user, "Items": string(articlesJson), "Value": searchValue, "Next": next})
 	})
-//line cmd/gopcomm/community_yap.gox:354:1
+//line cmd/gopcomm/community_yap.gox:412:1
 	this.Get("/edit/:id", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:355:1
+//line cmd/gopcomm/community_yap.gox:413:1
 		var user *core.User
-//line cmd/gopcomm/community_yap.gox:356:1
+//line cmd/gopcomm/community_yap.gox:414:1
 		userId := ""
-//line cmd/gopcomm/community_yap.gox:357:1
+//line cmd/gopcomm/community_yap.gox:415:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:358:1
+//line cmd/gopcomm/community_yap.gox:416:1
 		if err == nil {
-//line cmd/gopcomm/community_yap.gox:359:1
+//line cmd/gopcomm/community_yap.gox:417:1
 			user, err = this.community.GetUser(token.Value)
-//line cmd/gopcomm/community_yap.gox:360:1
+//line cmd/gopcomm/community_yap.gox:418:1
 			if err != nil {
-//line cmd/gopcomm/community_yap.gox:361:1
+//line cmd/gopcomm/community_yap.gox:419:1
 				xLog.Error("get user error:", err)
 			} else {
-//line cmd/gopcomm/community_yap.gox:363:1
+//line cmd/gopcomm/community_yap.gox:421:1
 				userId = user.Id
 			}
 		}
-//line cmd/gopcomm/community_yap.gox:367:1
+//line cmd/gopcomm/community_yap.gox:425:1
 		uid := user.Id
-//line cmd/gopcomm/community_yap.gox:368:1
+//line cmd/gopcomm/community_yap.gox:426:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:369:1
+//line cmd/gopcomm/community_yap.gox:427:1
 		if id != "" {
-//line cmd/gopcomm/community_yap.gox:370:1
+//line cmd/gopcomm/community_yap.gox:428:1
 			if
-//line cmd/gopcomm/community_yap.gox:370:1
+//line cmd/gopcomm/community_yap.gox:428:1
 			editable, _ := this.community.CanEditable(todo, uid, id); !editable {
-//line cmd/gopcomm/community_yap.gox:371:1
+//line cmd/gopcomm/community_yap.gox:429:1
 				xLog.Error("no permissions")
-//line cmd/gopcomm/community_yap.gox:372:1
+//line cmd/gopcomm/community_yap.gox:430:1
 				http.Redirect(ctx.ResponseWriter, ctx.Request, "/error", http.StatusTemporaryRedirect)
 			}
-//line cmd/gopcomm/community_yap.gox:374:1
+//line cmd/gopcomm/community_yap.gox:432:1
 			article, _ := this.community.Article(todo, id)
-//line cmd/gopcomm/community_yap.gox:375:1
+//line cmd/gopcomm/community_yap.gox:433:1
 			articleJson, _ := json.Marshal(&article)
-//line cmd/gopcomm/community_yap.gox:376:1
+//line cmd/gopcomm/community_yap.gox:434:1
 			ctx.Yap__1("edit", map[string]interface {
 			}{"UserId": userId, "User": user, "Article": string(articleJson)})
 		}
 	})
-//line cmd/gopcomm/community_yap.gox:384:1
+//line cmd/gopcomm/community_yap.gox:442:1
 	this.Get("/getTrans", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:385:1
+//line cmd/gopcomm/community_yap.gox:443:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:386:1
+//line cmd/gopcomm/community_yap.gox:444:1
 		htmlUrl, err := this.community.TransHtmlUrl(todo, id)
-//line cmd/gopcomm/community_yap.gox:387:1
+//line cmd/gopcomm/community_yap.gox:445:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:388:1
+//line cmd/gopcomm/community_yap.gox:446:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 500, "err": err.Error()})
 		}
-//line cmd/gopcomm/community_yap.gox:393:1
+//line cmd/gopcomm/community_yap.gox:451:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "data": htmlUrl})
 	})
-//line cmd/gopcomm/community_yap.gox:400:1
+//line cmd/gopcomm/community_yap.gox:458:1
 	this.Post("/commit", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:401:1
+//line cmd/gopcomm/community_yap.gox:459:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:402:1
+//line cmd/gopcomm/community_yap.gox:460:1
 		content := ctx.Param("content")
-//line cmd/gopcomm/community_yap.gox:403:1
+//line cmd/gopcomm/community_yap.gox:461:1
 		title := ctx.Param("title")
-//line cmd/gopcomm/community_yap.gox:404:1
+//line cmd/gopcomm/community_yap.gox:462:1
 		tags := ctx.Param("tags")
-//line cmd/gopcomm/community_yap.gox:405:1
+//line cmd/gopcomm/community_yap.gox:463:1
 		abstract := ctx.Param("abstract")
-//line cmd/gopcomm/community_yap.gox:406:1
+//line cmd/gopcomm/community_yap.gox:464:1
 		trans, _ := strconv.ParseBool(ctx.Param("trans"))
-//line cmd/gopcomm/community_yap.gox:408:1
+//line cmd/gopcomm/community_yap.gox:466:1
 		token, err := core.GetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:409:1
+//line cmd/gopcomm/community_yap.gox:467:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:410:1
+//line cmd/gopcomm/community_yap.gox:468:1
 			xLog.Info("token", err)
-//line cmd/gopcomm/community_yap.gox:411:1
+//line cmd/gopcomm/community_yap.gox:469:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 0, "err": "no token"})
 		}
-//line cmd/gopcomm/community_yap.gox:416:1
+//line cmd/gopcomm/community_yap.gox:474:1
 		uid, err := this.community.ParseJwtToken(token.Value)
-//line cmd/gopcomm/community_yap.gox:417:1
+//line cmd/gopcomm/community_yap.gox:475:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:418:1
+//line cmd/gopcomm/community_yap.gox:476:1
 			xLog.Info("uid", err)
-//line cmd/gopcomm/community_yap.gox:419:1
+//line cmd/gopcomm/community_yap.gox:477:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 0, "err": err.Error()})
 		}
-//line cmd/gopcomm/community_yap.gox:424:1
+//line cmd/gopcomm/community_yap.gox:482:1
 		article := &core.Article{ArticleEntry: core.ArticleEntry{ID: id, Title: title, UId: uid, Cover: ctx.Param("cover"), Tags: tags, Abstract: abstract}, Content: content, Trans: trans}
-//line cmd/gopcomm/community_yap.gox:438:1
+//line cmd/gopcomm/community_yap.gox:496:1
 		if trans {
-//line cmd/gopcomm/community_yap.gox:439:1
+//line cmd/gopcomm/community_yap.gox:497:1
 			article, _ = this.community.TranslateArticle(todo, article)
 		}
-//line cmd/gopcomm/community_yap.gox:442:1
+//line cmd/gopcomm/community_yap.gox:500:1
 		id, err = this.community.PutArticle(todo, uid, article)
-//line cmd/gopcomm/community_yap.gox:443:1
+//line cmd/gopcomm/community_yap.gox:501:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:444:1
+//line cmd/gopcomm/community_yap.gox:502:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 0, "err": "add failed"})
 		}
-//line cmd/gopcomm/community_yap.gox:449:1
+//line cmd/gopcomm/community_yap.gox:507:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "data": id})
 	})
-//line cmd/gopcomm/community_yap.gox:455:1
+//line cmd/gopcomm/community_yap.gox:513:1
 	this.Get("/tranArticle", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:456:1
+//line cmd/gopcomm/community_yap.gox:514:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:458:1
+//line cmd/gopcomm/community_yap.gox:516:1
 		article, err := this.community.GetTranslateArticle(todo, id)
-//line cmd/gopcomm/community_yap.gox:459:1
+//line cmd/gopcomm/community_yap.gox:517:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:460:1
+//line cmd/gopcomm/community_yap.gox:518:1
 			ctx.Json__1(map[string]int{"code": 0})
 		}
-//line cmd/gopcomm/community_yap.gox:464:1
+//line cmd/gopcomm/community_yap.gox:522:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "content": article.Content, "tags": article.Tags, "title": article.Title})
 	})
-//line cmd/gopcomm/community_yap.gox:473:1
+//line cmd/gopcomm/community_yap.gox:531:1
 	this.Post("/translate", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:474:1
+//line cmd/gopcomm/community_yap.gox:532:1
 		mdData := ctx.Param("content")
-//line cmd/gopcomm/community_yap.gox:475:1
+//line cmd/gopcomm/community_yap.gox:533:1
 		transData, err := this.community.TranslateMarkdownText(todo, mdData, "auto", language.English)
-//line cmd/gopcomm/community_yap.gox:476:1
+//line cmd/gopcomm/community_yap.gox:534:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:477:1
+//line cmd/gopcomm/community_yap.gox:535:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 500, "err": err.Error()})
 		}
-//line cmd/gopcomm/community_yap.gox:482:1
+//line cmd/gopcomm/community_yap.gox:540:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "data": transData})
 	})
-//line cmd/gopcomm/community_yap.gox:489:1
+//line cmd/gopcomm/community_yap.gox:547:1
 	this.Get("/getMedia/:id", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:490:1
+//line cmd/gopcomm/community_yap.gox:548:1
 		mediaId := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:492:1
+//line cmd/gopcomm/community_yap.gox:550:1
 		fileKey, _ := this.community.GetMediaUrl(context.Background(), mediaId)
-//line cmd/gopcomm/community_yap.gox:494:1
+//line cmd/gopcomm/community_yap.gox:552:1
 		http.Redirect(ctx.ResponseWriter, ctx.Request, domain+fileKey, http.StatusTemporaryRedirect)
 	})
-//line cmd/gopcomm/community_yap.gox:497:1
+//line cmd/gopcomm/community_yap.gox:555:1
 	this.Get("/getMediaUrl/:id", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:498:1
+//line cmd/gopcomm/community_yap.gox:556:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:499:1
+//line cmd/gopcomm/community_yap.gox:557:1
 		fileKey, err := this.community.GetMediaUrl(todo, id)
-//line cmd/gopcomm/community_yap.gox:500:1
+//line cmd/gopcomm/community_yap.gox:558:1
 		htmlUrl := fmt.Sprintf("%s%s", domain, fileKey)
-//line cmd/gopcomm/community_yap.gox:501:1
+//line cmd/gopcomm/community_yap.gox:559:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:502:1
+//line cmd/gopcomm/community_yap.gox:560:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 500, "err": "have no html media"})
 		}
-//line cmd/gopcomm/community_yap.gox:507:1
+//line cmd/gopcomm/community_yap.gox:565:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "url": htmlUrl})
 	})
-//line cmd/gopcomm/community_yap.gox:513:1
+//line cmd/gopcomm/community_yap.gox:571:1
 	this.Get("/getVideoAndSubtitle/:id", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:514:1
+//line cmd/gopcomm/community_yap.gox:572:1
 		id := ctx.Param("id")
-//line cmd/gopcomm/community_yap.gox:515:1
+//line cmd/gopcomm/community_yap.gox:573:1
 		fileKey, err := this.community.GetMediaUrl(todo, id)
-//line cmd/gopcomm/community_yap.gox:516:1
+//line cmd/gopcomm/community_yap.gox:574:1
 		m := make(map[string]string, 2)
-//line cmd/gopcomm/community_yap.gox:517:1
+//line cmd/gopcomm/community_yap.gox:575:1
 		format, err := this.community.GetMediaType(todo, id)
-//line cmd/gopcomm/community_yap.gox:518:1
+//line cmd/gopcomm/community_yap.gox:576:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:519:1
+//line cmd/gopcomm/community_yap.gox:577:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 500, "err": err.Error()})
 		}
-//line cmd/gopcomm/community_yap.gox:524:1
+//line cmd/gopcomm/community_yap.gox:582:1
 		if format == "video/mp4" {
-//line cmd/gopcomm/community_yap.gox:525:1
+//line cmd/gopcomm/community_yap.gox:583:1
 			subtitle, err := this.community.GetVideoSubtitle(todo, id)
-//line cmd/gopcomm/community_yap.gox:526:1
+//line cmd/gopcomm/community_yap.gox:584:1
 			if err != nil {
-//line cmd/gopcomm/community_yap.gox:527:1
+//line cmd/gopcomm/community_yap.gox:585:1
 				if err != nil {
-//line cmd/gopcomm/community_yap.gox:528:1
+//line cmd/gopcomm/community_yap.gox:586:1
 					ctx.Json__1(map[string]interface {
 					}{"code": 500, "err": err.Error()})
 				}
-//line cmd/gopcomm/community_yap.gox:533:1
+//line cmd/gopcomm/community_yap.gox:591:1
 				return
 			}
-//line cmd/gopcomm/community_yap.gox:535:1
+//line cmd/gopcomm/community_yap.gox:593:1
 			m["subtitle"] = domain + subtitle
 		}
-//line cmd/gopcomm/community_yap.gox:537:1
+//line cmd/gopcomm/community_yap.gox:595:1
 		htmlUrl := fmt.Sprintf("%s%s", domain, fileKey)
-//line cmd/gopcomm/community_yap.gox:538:1
+//line cmd/gopcomm/community_yap.gox:596:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:539:1
+//line cmd/gopcomm/community_yap.gox:597:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 500, "err": "have no html media"})
 		}
-//line cmd/gopcomm/community_yap.gox:544:1
+//line cmd/gopcomm/community_yap.gox:602:1
 		m["fileKey"] = htmlUrl
-//line cmd/gopcomm/community_yap.gox:545:1
+//line cmd/gopcomm/community_yap.gox:603:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "url": m})
 	})
-//line cmd/gopcomm/community_yap.gox:551:1
+//line cmd/gopcomm/community_yap.gox:609:1
 	this.Post("/upload", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:552:1
+//line cmd/gopcomm/community_yap.gox:610:1
 		this.community.UploadFile(ctx)
 	})
-//line cmd/gopcomm/community_yap.gox:555:1
+//line cmd/gopcomm/community_yap.gox:613:1
 	this.Post("/caption/task", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:556:1
+//line cmd/gopcomm/community_yap.gox:614:1
 		uid := ctx.Param("uid")
-//line cmd/gopcomm/community_yap.gox:557:1
+//line cmd/gopcomm/community_yap.gox:615:1
 		vid := ctx.Param("vid")
-//line cmd/gopcomm/community_yap.gox:559:1
+//line cmd/gopcomm/community_yap.gox:617:1
 		if uid == "" || vid == "" {
-//line cmd/gopcomm/community_yap.gox:560:1
+//line cmd/gopcomm/community_yap.gox:618:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 200, "msg": "Invalid param"})
 		}
-//line cmd/gopcomm/community_yap.gox:566:1
+//line cmd/gopcomm/community_yap.gox:624:1
 		if
-//line cmd/gopcomm/community_yap.gox:566:1
+//line cmd/gopcomm/community_yap.gox:624:1
 		err := this.community.RetryCaptionGenerate(todo, uid, vid); err != nil {
-//line cmd/gopcomm/community_yap.gox:567:1
+//line cmd/gopcomm/community_yap.gox:625:1
 			ctx.Json__1(map[string]interface {
 			}{"code": 200, "msg": "Request task error"})
 		}
-//line cmd/gopcomm/community_yap.gox:573:1
+//line cmd/gopcomm/community_yap.gox:631:1
 		ctx.Json__1(map[string]interface {
 		}{"code": 200, "msg": "Ok"})
 	})
-//line cmd/gopcomm/community_yap.gox:579:1
+//line cmd/gopcomm/community_yap.gox:637:1
 	this.Get("/login", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:584:1
+//line cmd/gopcomm/community_yap.gox:642:1
 		refererURL, err := url.Parse(ctx.Request.Referer())
-//line cmd/gopcomm/community_yap.gox:585:1
+//line cmd/gopcomm/community_yap.gox:643:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:586:1
+//line cmd/gopcomm/community_yap.gox:644:1
 			xLog.Info("Error parsing Referer: %v", err)
-//line cmd/gopcomm/community_yap.gox:587:1
+//line cmd/gopcomm/community_yap.gox:645:1
 			return
 		}
-//line cmd/gopcomm/community_yap.gox:590:1
+//line cmd/gopcomm/community_yap.gox:648:1
 		refererPath := refererURL.Path
-//line cmd/gopcomm/community_yap.gox:591:1
+//line cmd/gopcomm/community_yap.gox:649:1
 		if refererURL.RawQuery != "" {
-//line cmd/gopcomm/community_yap.gox:592:1
+//line cmd/gopcomm/community_yap.gox:650:1
 			refererPath = fmt.Sprintf("%s?%s", refererURL.Path, refererURL.RawQuery)
 		}
-//line cmd/gopcomm/community_yap.gox:595:1
+//line cmd/gopcomm/community_yap.gox:653:1
 		redirectURL := fmt.Sprintf("%s://%s/%s?origin_path=%s", refererURL.Scheme, refererURL.Host, "callback", url.QueryEscape(refererPath))
-//line cmd/gopcomm/community_yap.gox:597:1
+//line cmd/gopcomm/community_yap.gox:655:1
 		loginURL := this.community.RedirectToCasdoor(redirectURL)
-//line cmd/gopcomm/community_yap.gox:598:1
+//line cmd/gopcomm/community_yap.gox:656:1
 		ctx.Redirect(loginURL, http.StatusFound)
 	})
-//line cmd/gopcomm/community_yap.gox:601:1
+//line cmd/gopcomm/community_yap.gox:659:1
 	this.Get("/logout", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:602:1
+//line cmd/gopcomm/community_yap.gox:660:1
 		err := core.RemoveToken(ctx)
-//line cmd/gopcomm/community_yap.gox:603:1
+//line cmd/gopcomm/community_yap.gox:661:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:604:1
+//line cmd/gopcomm/community_yap.gox:662:1
 			xLog.Error("remove token error:", err)
 		}
-//line cmd/gopcomm/community_yap.gox:607:1
+//line cmd/gopcomm/community_yap.gox:665:1
 		refererURL, err := url.Parse(ctx.Request.Referer())
-//line cmd/gopcomm/community_yap.gox:608:1
+//line cmd/gopcomm/community_yap.gox:666:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:609:1
+//line cmd/gopcomm/community_yap.gox:667:1
 			xLog.Info("Error parsing Referer: %v", err)
-//line cmd/gopcomm/community_yap.gox:610:1
+//line cmd/gopcomm/community_yap.gox:668:1
 			return
 		}
-//line cmd/gopcomm/community_yap.gox:613:1
+//line cmd/gopcomm/community_yap.gox:671:1
 		refererPath := refererURL.Path
-//line cmd/gopcomm/community_yap.gox:614:1
+//line cmd/gopcomm/community_yap.gox:672:1
 		if refererURL.RawQuery != "" {
-//line cmd/gopcomm/community_yap.gox:615:1
+//line cmd/gopcomm/community_yap.gox:673:1
 			refererPath = fmt.Sprintf("%s?%s", refererURL.Path, refererURL.RawQuery)
 		}
-//line cmd/gopcomm/community_yap.gox:618:1
+//line cmd/gopcomm/community_yap.gox:676:1
 		http.Redirect(ctx.ResponseWriter, ctx.Request, refererPath, http.StatusFound)
 	})
-//line cmd/gopcomm/community_yap.gox:621:1
+//line cmd/gopcomm/community_yap.gox:679:1
 	this.Get("/callback", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:622:1
+//line cmd/gopcomm/community_yap.gox:680:1
 		err := core.SetToken(ctx)
-//line cmd/gopcomm/community_yap.gox:623:1
+//line cmd/gopcomm/community_yap.gox:681:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:624:1
+//line cmd/gopcomm/community_yap.gox:682:1
 			xLog.Error("set token error:", err)
 		}
-//line cmd/gopcomm/community_yap.gox:626:1
+//line cmd/gopcomm/community_yap.gox:684:1
 		origin_path := ctx.URL.Query().Get("origin_path")
-//line cmd/gopcomm/community_yap.gox:627:1
+//line cmd/gopcomm/community_yap.gox:685:1
 		unurl, err := url.QueryUnescape(origin_path)
-//line cmd/gopcomm/community_yap.gox:628:1
+//line cmd/gopcomm/community_yap.gox:686:1
 		if err != nil {
-//line cmd/gopcomm/community_yap.gox:629:1
+//line cmd/gopcomm/community_yap.gox:687:1
 			xLog.Info("Unurl error", err)
-//line cmd/gopcomm/community_yap.gox:630:1
+//line cmd/gopcomm/community_yap.gox:688:1
 			unurl = "/"
 		}
-//line cmd/gopcomm/community_yap.gox:633:1
+//line cmd/gopcomm/community_yap.gox:691:1
 		http.Redirect(ctx.ResponseWriter, ctx.Request, unurl, http.StatusFound)
 	})
-//line cmd/gopcomm/community_yap.gox:636:1
+//line cmd/gopcomm/community_yap.gox:694:1
 	conf := &core.Config{}
-//line cmd/gopcomm/community_yap.gox:637:1
+//line cmd/gopcomm/community_yap.gox:695:1
 	this.community, _ = core.New(todo, conf)
-//line cmd/gopcomm/community_yap.gox:638:1
+//line cmd/gopcomm/community_yap.gox:696:1
 	core.CasdoorConfigInit()
-//line cmd/gopcomm/community_yap.gox:641:1
+//line cmd/gopcomm/community_yap.gox:699:1
 	this.Handle("/", func(ctx *yap.Context) {
-//line cmd/gopcomm/community_yap.gox:642:1
+//line cmd/gopcomm/community_yap.gox:700:1
 		ctx.Yap__1("4xx", map[string]interface {
 		}{})
 	})
-//line cmd/gopcomm/community_yap.gox:645:1
+//line cmd/gopcomm/community_yap.gox:703:1
 	xLog.Info("Started in endpoint: ", endpoint)
-//line cmd/gopcomm/community_yap.gox:648:1
+//line cmd/gopcomm/community_yap.gox:706:1
 	this.Run(endpoint, func(h http.Handler) http.Handler {
-//line cmd/gopcomm/community_yap.gox:650:1
+//line cmd/gopcomm/community_yap.gox:708:1
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-//line cmd/gopcomm/community_yap.gox:651:1
+//line cmd/gopcomm/community_yap.gox:709:1
 			defer func() {
-//line cmd/gopcomm/community_yap.gox:652:1
+//line cmd/gopcomm/community_yap.gox:710:1
 				if
-//line cmd/gopcomm/community_yap.gox:652:1
+//line cmd/gopcomm/community_yap.gox:710:1
 				err := recover(); err != nil {
-//line cmd/gopcomm/community_yap.gox:653:1
+//line cmd/gopcomm/community_yap.gox:711:1
 					xLog.Error(err)
-//line cmd/gopcomm/community_yap.gox:654:1
+//line cmd/gopcomm/community_yap.gox:712:1
 					http.Redirect(w, r, "/failed", http.StatusFound)
 				}
 			}()
-//line cmd/gopcomm/community_yap.gox:658:1
+//line cmd/gopcomm/community_yap.gox:716:1
 			h.ServeHTTP(w, r)
 		})
 	})
 }
 func main() {
-	yap.Gopt_App_Main(new(community_yap))
+	yap.Gopt_App_Main(new(community))
 }
diff --git a/cmd/gopcomm/yap/5xx_yap.html b/cmd/gopcomm/yap/5xx_yap.html
index 471bfe6..72f8590 100644
--- a/cmd/gopcomm/yap/5xx_yap.html
+++ b/cmd/gopcomm/yap/5xx_yap.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-{{ template "header"}}
+{{ template "header" .}}
 
     <div class="flex w-full flex-col items-center justify-center rounded-lg p-8">
         <div style="margin-top:200px;">
diff --git a/cmd/gopcomm/yap/layout_yap.html b/cmd/gopcomm/yap/layout_yap.html
index 534b444..f700e6f 100644
--- a/cmd/gopcomm/yap/layout_yap.html
+++ b/cmd/gopcomm/yap/layout_yap.html
@@ -51,8 +51,8 @@
                     <div class="flex justify-between items-center">
                         <!-- LOGO -->
                         <a href="/" style="width: 35%;">
-                            <img src="https://github.com/goplus/community/assets/47499836/19900f7d-ddbb-495b-b45b-8fd2397394be"
-                                class="mb-2 mr-3 h-6 sm:h-9" alt="Go+ Community Logo" />
+                            <img src="static/img/logo-community-white.png" style="height: 3vh;" class="mr-3"
+                                alt="Go+ Community Logo" />
                         </a>
 
                         <!-- Search -->
diff --git a/cmd/gopcomm/yap/user_edit_yap.html b/cmd/gopcomm/yap/user_edit_yap.html
index 0f67766..834bee7 100644
--- a/cmd/gopcomm/yap/user_edit_yap.html
+++ b/cmd/gopcomm/yap/user_edit_yap.html
@@ -1,153 +1,1034 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
+<html>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>user info edit</title>
-  </head>
-  <body>
+    <title>Edit Profile</title>
+</head>
+
+<body>
     {{ template "header" .}}
-    <div id="app" style="width: 80%; margin: 20px auto">
+
+    <div id="app" class="h-full w-full" style="padding: 0 30px;">
         <n-breadcrumb>
-            <n-breadcrumb-item>
-                <a href="/"><i class="ph-duotone ph-house" style="font-size: 18px; margin-right: 5px;"></i>
-                Home</a>
+            <n-breadcrumb-item href="/">
+                Home
             </n-breadcrumb-item>
-            <n-breadcrumb-item>
-                <a href="/user/{{.User.Id}}"><i class="ph ph-user" style="font-size: 18px; margin-right: 5px;"></i>
-                User</a>
+            <n-breadcrumb-item href="/user/{{.User.Id}}">
+                <!-- ${ CurrentUser.name } -->
+                User
             </n-breadcrumb-item>
             <n-breadcrumb-item>
-                <i class="ph ph-article-medium"
-                    style="font-size: 18px; margin-right: -15px; color: transparent;"></i>
-                <span style="font-weight: 600;">Edit</span>
+                <span style="font-weight: 600;">Edit Profile</span>
             </n-breadcrumb-item>
         </n-breadcrumb>
-      <div class="md:flex" style="margin-top: 10px;">
-        <ul
-          class="flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0"
-        >
-          <li>
-            <a
-              href="#"
-              class="inline-flex items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-white hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
-              aria-current="page"
-            >
-              <svg
-                class="w-4 h-4 me-2 text-gray-500 dark:text-gray-400"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
-                />
-              </svg>
-              Profile
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              class="inline-flex items-center px-4 py-3 text-white bg-blue-700 rounded-lg active w-full dark:bg-blue-600"
-            >
-              <svg
-                class="w-4 h-4 me-2 white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 18 18"
-              >
-                <path
-                  d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
-                />
-              </svg>
-              Accounts
-            </a>
-          </li>
-        </ul>
-        <div
-          class="p-6 bg-white text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full"
-        >
-          <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">
-            Accounts Tab
-          </h3>
-          <p class="mb-2">
-            Bind with your mainstream platform account to make login easier
-          </p>
-
-          <ul class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
-            <li class="py-3 sm:py-4" v-for="accountItem in accountList">
-              <div class="flex items-center space-x-4 rtl:space-x-reverse">
-                <div class="flex-shrink-0">
-                  <img
-                    class="w-8 h-8 rounded-full"
-                    :src="accountItem.img"
-                    alt="Neil image"
-                  />
+
+        <n-tabs default-value="profile" animated type="card" placement="left" size="large" style="--n-bar-color: #3182ce; --n-tab-text-color-active: #3182ce; --n-tab-text-color-hover: #3182ce;
+        --n-tab-font-weight-active: 600; --n-tab-color: #f3f4f6; --n-tab-border-radius: 5px; 
+        --n-tab-border-color: #e5e7eb; margin-top: 20px;">
+            <!-- Profile -->
+            <n-tab-pane name="profile">
+                <template #tab>
+                    <i class="ph-duotone ph-identification-card" style="font-size: 22px; margin-right: 8px;"></i>
+                    Profile
+                </template>
+
+                <div class="w-full flex items-center justify-between">
+                    <div class="px-6 py-2 text-medium text-gray-500 w-full">
+                        <h3 class="text-2xl font-bold text-gray-900 mb-1">User Profile</h3>
+                        <p class="mb-2">Complete your profile for display on your personal homepage.</p>
+                    </div>
+                    <n-button @click="editProfile" color="#3182ce" :loading="!canSubmit" :disabled="!canSubmit"
+                        style="--n-border-radius: 7px; background-color: #3182ce;">
+                        <!-- :theme-overrides="buttonThemeOverrides -->
+                        <template #icon>
+                            <i class="ph ph-floppy-disk"></i>
+                        </template>
+                        <span style="font-weight: 600;">Save changes</span>
+                    </n-button>
+                </div>
+
+                <div class="bg-white rounded-lg w-full flex" style="padding: 20px 30px;">
+                    <n-form :model="userProfile" inline ref="formRef" :rules="rules">
+                        <!-- TODO: Avatar -->
+                        <n-form-item path="avatar" show-require-mark require-mark-placement="right-hanging"
+                            style="width: 10%;">
+                            <template #label>
+                                <p class="font-semibold text-gray-900 truncate">Avatar</p>
+                            </template>
+                            <n-upload :max="1" directory-dnd accept="image/png, image/jpg, image/jpeg"
+                                @change="changeCover" :custom-request="customRequest" list-type="image-card"
+                                :default-file-list="fileList" style="width: 80%; height: 80%;">
+                                <n-upload-dragger></n-upload-dragger>
+                            </n-upload>
+                        </n-form-item>
+
+                        <n-grid :cols="2" :x-gap="20" style="width: 60%; margin-left: 40px;">
+                            <!-- Name -->
+                            <n-form-item-gi :span="2" path="name" show-require-mark
+                                require-mark-placement="right-hanging">
+                                <template #label>
+                                    <p class="font-semibold text-gray-900 truncate">Nick Name</p>
+                                </template>
+                                <n-input v-model:value="userProfile.name" placeholder="Input Nick Name" disabled
+                                    style="--n-caret-color: #3182ce; --n-border-hover: 1px solid #ecf5fe; 
+                                    --n-border-focus: 1px solid #2a82e4; --n-box-shadow-focus: 0 0 0 2px #cee1f5;" :rule="{
+                                        required: true,
+                                        message: 'Please input your nick name',
+                                        trigger: ['input', 'blur']
+                                    }">
+                                </n-input>
+                            </n-form-item-gi>
+
+                            <!-- Gender -->
+                            <n-form-item-gi :span="1" path="gender">
+                                <template #label>
+                                    <p class="font-semibold text-gray-900 truncate">Gender</p>
+                                </template>
+                                <n-select v-model:value="userProfile.gender" :options="genderOptions"
+                                    :theme-overrides="selectThemeOverrides">
+                                </n-select>
+                            </n-form-item-gi>
+
+                            <!-- Birthday -->
+                            <n-form-item-gi :span="1" path="birthday">
+                                <template #label>
+                                    <p class="font-semibold text-gray-900 truncate">Birthday</p>
+                                </template>
+                                <n-date-picker v-model:formatted-value="userProfile.birthday"
+                                    type="date">
+                                </n-date-picker>
+                            </n-form-item-gi>
+
+                            <!-- Email -->
+                            <n-form-item-gi :span="2" path="email">
+                                <template #label>
+                                    <p class="font-semibold text-gray-900 truncate">Email</p>
+                                </template>
+                                <n-input v-model:value="userProfile.email" placeholder="Input Email"
+                                    style="--n-caret-color: #3182ce; --n-border-hover: 1px solid #ecf5fe; 
+                                    --n-border-focus: 1px solid #2a82e4; --n-box-shadow-focus: 0 0 0 2px #cee1f5;" :rule="{
+                                        required: true,
+                                        message: 'Please input your email',
+                                        trigger: ['input', 'blur']
+                                    }">
+                                </n-input>
+                            </n-form-item-gi>
+
+                            <!-- Phone -->
+                            <n-form-item-gi :span="2" path="phone">
+                                <template #label>
+                                    <p class="font-semibold text-gray-900 truncate">Phone Number</p>
+                                </template>
+                                <n-input v-model:value="userProfile.phone" placeholder="Input Phone Number"
+                                    :allow-input="onlyAllowNumber"
+                                    style="--n-caret-color: #3182ce; --n-border-hover: 1px solid #ecf5fe; 
+                                    --n-border-focus: 1px solid #2a82e4; --n-box-shadow-focus: 0 0 0 2px #cee1f5;" :rule="{
+                                        required: true,
+                                        message: 'Please input your phone number',
+                                        trigger: ['input', 'blur']
+                                    }">
+                                </n-input>
+                            </n-form-item-gi>
+                        </n-grid>
+                    </n-form>
                 </div>
-                <div class="flex-1 min-w-0">
-                  <p
-                    class="text-sm font-medium text-gray-900 truncate dark:text-white"
-                  >
-                    ${accountItem.platform}
-                  </p>
-                  <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-                    ${accountItem.desc}
-                  </p>
+            </n-tab-pane>
+
+            <!-- Account -->
+            <n-tab-pane name="account">
+                <template #tab>
+                    <i class="ph-duotone ph-users" style="font-size: 22px; margin-right: 8px;"></i>
+                    Account
+                </template>
+
+                <div class="px-6 py-2 text-medium text-gray-500 w-full">
+                    <h3 class="text-2xl font-bold text-gray-900 mb-1">Bind accounts</h3>
+                    <p class="mb-2">Bind with your mainstream platform account to make login easier.</p>
                 </div>
-                <div
-                  class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white"
-                >
-                  <a
-                  :href="accountItem.url"
-                  v-if="!accountItem.bind"
-                    type="button"
-                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                  >
-                    <svg
-                      class="w-3.5 h-3.5 me-2"
-                      t="1707241952090"
-                      class="icon"
-                      viewBox="0 0 1024 1024"
-                      version="1.1"
-                      xmlns="http://www.w3.org/2000/svg"
-                      p-id="1449"
-                    >
-                      <path
-                        d="M748.8 864 275.2 864c-32 0-57.6-25.6-57.6-57.6L217.6 512c0-32 32-57.6 57.6-57.6l467.2 0c38.4 0 57.6 25.6 57.6 57.6l0 294.4C806.4 838.4 780.8 864 748.8 864z"
-                        fill="#ffffff"
-                        p-id="1450"
-                      ></path>
-                      <path
-                        d="M364.8 422.4 364.8 339.2c0-70.4 51.2-121.6 121.6-121.6l51.2 0c64 0 121.6 51.2 121.6 121.6l0 83.2 57.6 0L716.8 339.2c0-102.4-83.2-179.2-179.2-179.2L486.4 160c-102.4 0-179.2 83.2-179.2 179.2l0 83.2L364.8 422.4z"
-                        fill="#ffffff"
-                        p-id="1451"
-                      ></path>
-                    </svg>
-                    Bind 
-                  </a>
-                  <a
-                  :href="`/userUnlink?pv=${accountItem.platform}`"
-                  v-else
-                    type="button"
-                    class="text-white bg-gray-800 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                  ><svg  class="w-3.5 h-3.5 me-2 text-white-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
-                    <path fill-rule="evenodd" d="M15 7a2 2 0 1 1 4 0v4a1 1 0 1 0 2 0V7a4 4 0 0 0-8 0v3H5a2 2 0 0 0-2 2v7c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2V7Zm-5 6c.6 0 1 .4 1 1v3a1 1 0 1 1-2 0v-3c0-.6.4-1 1-1Z" clip-rule="evenodd"/>
-                  </svg>
-                  unLink</a>
+
+                <div class="bg-white rounded-lg w-full" style="padding: 10px 30px;">
+                    <ul class="divide-y divide-gray-200 w-full">
+                        <li class="px-4 py-3 w-full flex items-center justify-between"
+                            v-for="accountItem in accountList">
+                            <div class="flex items-center">
+                                <img class="w-8 h-8 rounded-full" :src="accountItem.img" alt="Platform Logo" />
+                                <div style="margin-left: 30px;">
+                                    <p class="font-semibold text-gray-900 truncate">
+                                        ${ accountItem.platform }
+                                    </p>
+                                    <p class="text-sm text-gray-500 truncate">
+                                        ${ accountItem.desc }
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="text-base font-semibold text-gray-900">
+                                <!-- Bind Button -->
+                                <n-button v-if="!accountItem.bind" @click="openBindPage(accountItem.url)" style="--n-border-radius: 7px; --n-ripple-color: #7ba7d3; 
+                                --n-text-color-hover: #3182ce; --n-text-color-pressed: #3182ce;
+                                --n-text-color-focus: #3182ce; --n-border-hover: 1px solid #3182ce;
+                                --n-border-pressed: 1px solid #3182ce; --n-border-focus: 1px solid #3182ce;">
+                                    <template #icon>
+                                        <i class="ph-bold ph-lock-key"></i>
+                                    </template>
+                                    <span style="font-weight: 600;">Bind</span>
+                                </n-button>
+
+                                <!-- Unbind Button -->
+                                <n-button v-else @click="openUnbindPage(accountItem.platform)" color="#3182ce"
+                                    style="--n-border-radius: 7px; background-color: #3182ce;">
+                                    <template #icon>
+                                        <i class="ph ph-lock-key-open"></i>
+                                    </template>
+                                    <span style="font-weight: 600;">Unbind</span>
+                                </n-button>
+                            </div>
+                        </li>
+                    </ul>
                 </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
+            </n-tab-pane>
+        </n-tabs>
     </div>
-    <script >
-      const application = JSON.parse("{{ .Application }}")
-      const accountBinds = JSON.parse("{{ .Binds }}")
+
+    <script>
+        const { reactive, toRefs, ref, h } = Vue;
+
+        /*======= user =======*/
+        const userProfile = ref(JSON.parse("{{.CurrentUser}}"))
+        if (userProfile.value.birthday === "" || userProfile.value.birthday === "undefined"){
+            userProfile.value.birthday = undefined
+        }
+        console.log(userProfile)
+        const genderOptions = [
+            {
+                label: "Male",
+                value: "male"
+            },
+            {
+                label: "Female",
+                value: "female"
+            }
+        ]
+        const fileList = ref([{
+            id: "avatar",
+            status: "finished",
+            url: userProfile.value.avatar,
+        }])
+        const formRef = ref(null);
+        const rules = {
+            email: [
+                {
+                    validator(rule, value) {
+                        if (value === ""){
+                            return true
+                        }
+                        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return new Error("please input a vaild email");
+                        } 
+                        return true;
+                    },
+                    trigger: ["input", "blur"]
+                }
+            ],
+            phone: [
+                {
+                    validator(rule, value) {
+                        if (value === ""){
+                            return true
+                        }
+                        if (!/^[1][3-9][0-9]{9}$/.test(value)) {
+                            return new Error("please input a vaild phone");
+                        } 
+                        return true;
+                    },
+                    trigger: ["input", "blur"]
+                }
+            ],
+        }
+        let avatarUrl = userProfile.value.avatar
+
+        const canSubmit  = ref(true)
+        function customRequest(option) {
+            canSubmit.value = false
+            console.log("option", option)
+            const file = option.file
+            const avatarData = new FormData();
+            avatarData.append('file', file.file);
+
+            const options = {
+                method: 'POST',
+                body: avatarData,
+            }
+            fetch("/upload", options)
+                .then(res => {
+                    return res.json();
+                })
+                .then(todos => {
+                    fetch('/getMediaUrl/' + todos)
+                        .then(resUrl => {
+                            return resUrl.json();
+                        })
+                        .then(todosUrl => {
+                            if (todosUrl.code === 200) {
+                                avatarUrl = todosUrl.url
+                            }
+                            canSubmit.value = true
+                        });
+
+                });
+        }
+
+
+        function onlyAllowNumber(value) {
+            return !value || /^\d+$/.test(value);
+        }
+
+        function objectToFormData(obj) {
+            const formData = new FormData();
+
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                formData.append(key, obj[key]);
+                }
+            }
+
+            return formData;
+        }
+
+        function editProfile() {
+            this.$refs.formRef?.validate((errors) => {
+                if (!errors) {
+                    console.log(userProfile.value)
+                    userProfile.value.avatar = avatarUrl
+                    const formData = objectToFormData(userProfile.value);
+
+                    const requestOptions = {
+                        method: "POST",
+                        body: formData
+                    };
+
+                    fetch("/update/user", requestOptions)
+                        .then(res => {
+                            return res.json();
+                        })
+                        .then(todos => {
+                            console.log("todos", todos)
+                            if (todos.code === 200) {
+                                window.location.href = "/user/" + userProfile.value.id
+                            }
+                        });
+                }
+            })
+        }
+
+        /*======= account =======*/
+        const application = JSON.parse("{{.Application}}")
+        const accountBinds = JSON.parse("{{.Binds}}")
+
+        const authInfo = {
+            Google: {
+                scope: "profile+email",
+                endpoint: "https://accounts.google.com/signin/oauth",
+            },
+            GitHub: {
+                scope: "user:email+read:user",
+                endpoint: "https://github.com/login/oauth/authorize",
+            },
+            QQ: {
+                scope: "get_user_info",
+                endpoint: "https://graph.qq.com/oauth2.0/authorize",
+            },
+            WeChat: {
+                scope: "snsapi_login",
+                endpoint: "https://open.weixin.qq.com/connect/qrconnect",
+                mpScope: "snsapi_userinfo",
+                mpEndpoint: "https://open.weixin.qq.com/connect/oauth2/authorize",
+            },
+            WeChatMiniProgram: {
+                endpoint: "https://mp.weixin.qq.com/",
+            },
+            Facebook: {
+                scope: "email,public_profile",
+                endpoint: "https://www.facebook.com/dialog/oauth",
+            },
+            DingTalk: {
+                scope: "openid",
+                endpoint: "https://login.dingtalk.com/oauth2/auth",
+            },
+            Weibo: {
+                scope: "email",
+                endpoint: "https://api.weibo.com/oauth2/authorize",
+            },
+            Gitee: {
+                scope: "user_info%20emails",
+                endpoint: "https://gitee.com/oauth/authorize",
+            },
+            LinkedIn: {
+                scope: "r_liteprofile%20r_emailaddress",
+                endpoint: "https://www.linkedin.com/oauth/v2/authorization",
+            },
+            WeCom: {
+                scope: "snsapi_userinfo",
+                endpoint: "https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect",
+                silentEndpoint: "https://open.weixin.qq.com/connect/oauth2/authorize",
+                internalEndpoint: "https://open.work.weixin.qq.com/wwopen/sso/qrConnect",
+            },
+            Lark: {
+                // scope: "email",
+                endpoint: "https://open.feishu.cn/open-apis/authen/v1/index",
+            },
+            GitLab: {
+                scope: "read_user+profile",
+                endpoint: "https://gitlab.com/oauth/authorize",
+            },
+            ADFS: {
+                scope: "openid",
+                endpoint: "http://example.com",
+            },
+            Baidu: {
+                scope: "basic",
+                endpoint: "http://openapi.baidu.com/oauth/2.0/authorize",
+            },
+            Alipay: {
+                scope: "basic",
+                endpoint: "https://openauth.alipay.com/oauth2/publicAppAuthorize.htm",
+            },
+            Casdoor: {
+                scope: "openid%20profile%20email",
+                endpoint: "http://example.com",
+            },
+            Infoflow: {
+                endpoint: "https://xpc.im.baidu.com/oauth2/authorize",
+            },
+            Apple: {
+                scope: "name%20email",
+                endpoint: "https://appleid.apple.com/auth/authorize",
+            },
+            AzureAD: {
+                scope: "user.read",
+                endpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
+            },
+            AzureADB2C: {
+                scope: "openid",
+                endpoint: "https://tenant.b2clogin.com/tenant.onmicrosoft.com/userflow/oauth2/v2.0/authorize",
+            },
+            Slack: {
+                scope: "users:read",
+                endpoint: "https://slack.com/oauth/authorize",
+            },
+            Steam: {
+                endpoint: "https://steamcommunity.com/openid/login",
+            },
+            Okta: {
+                scope: "openid%20profile%20email",
+                endpoint: "http://example.com",
+            },
+            Douyin: {
+                scope: "user_info",
+                endpoint: "https://open.douyin.com/platform/oauth/connect",
+            },
+            Custom: {
+                endpoint: "https://example.com/",
+            },
+            Bilibili: {
+                endpoint: "https://passport.bilibili.com/register/pc_oauth2.html",
+            },
+            Line: {
+                scope: "profile%20openid%20email",
+                endpoint: "https://access.line.me/oauth2/v2.1/authorize",
+            },
+            Amazon: {
+                scope: "profile",
+                endpoint: "https://www.amazon.com/ap/oa",
+            },
+            Auth0: {
+                scope: "openid%20profile%20email",
+                endpoint: "http://auth0.com/authorize",
+            },
+            BattleNet: {
+                scope: "openid",
+                endpoint: "https://oauth.battlenet.com.cn/authorize",
+            },
+            Bitbucket: {
+                scope: "account",
+                endpoint: "https://bitbucket.org/site/oauth2/authorize",
+            },
+            Box: {
+                scope: "root_readwrite",
+                endpoint: "https://account.box.com/api/oauth2/authorize",
+            },
+            CloudFoundry: {
+                scope: "cloud_controller.read",
+                endpoint: "https://login.cloudfoundry.org/oauth/authorize",
+            },
+            Dailymotion: {
+                scope: "userinfo",
+                endpoint: "https://api.dailymotion.com/oauth/authorize",
+            },
+            Deezer: {
+                scope: "basic_access",
+                endpoint: "https://connect.deezer.com/oauth/auth.php",
+            },
+            DigitalOcean: {
+                scope: "read",
+                endpoint: "https://cloud.digitalocean.com/v1/oauth/authorize",
+            },
+            Discord: {
+                scope: "identify%20email",
+                endpoint: "https://discord.com/api/oauth2/authorize",
+            },
+            Dropbox: {
+                scope: "account_info.read",
+                endpoint: "https://www.dropbox.com/oauth2/authorize",
+            },
+            EveOnline: {
+                scope: "publicData",
+                endpoint: "https://login.eveonline.com/oauth/authorize",
+            },
+            Fitbit: {
+                scope: "activity%20heartrate%20location%20nutrition%20profile%20settings%20sleep%20social%20weight",
+                endpoint: "https://www.fitbit.com/oauth2/authorize",
+            },
+            Gitea: {
+                scope: "user:email",
+                endpoint: "https://gitea.com/login/oauth/authorize",
+            },
+            Heroku: {
+                scope: "global",
+                endpoint: "https://id.heroku.com/oauth/authorize",
+            },
+            InfluxCloud: {
+                scope: "read:org",
+                endpoint: "https://cloud2.influxdata.com/oauth/authorize",
+            },
+            Instagram: {
+                scope: "user_profile",
+                endpoint: "https://api.instagram.com/oauth/authorize",
+            },
+            Intercom: {
+                scope: "user.read",
+                endpoint: "https://app.intercom.com/oauth",
+            },
+            Kakao: {
+                scope: "account_email",
+                endpoint: "https://kauth.kakao.com/oauth/authorize",
+            },
+            Lastfm: {
+                scope: "user_read",
+                endpoint: "https://www.last.fm/api/auth",
+            },
+            Mailru: {
+                scope: "userinfo",
+                endpoint: "https://oauth.mail.ru/login",
+            },
+            Meetup: {
+                scope: "basic",
+                endpoint: "https://secure.meetup.com/oauth2/authorize",
+            },
+            MicrosoftOnline: {
+                scope: "openid%20profile%20email",
+                endpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
+            },
+            Naver: {
+                scope: "profile",
+                endpoint: "https://nid.naver.com/oauth2.0/authorize",
+            },
+            Nextcloud: {
+                scope: "openid%20profile%20email",
+                endpoint: "https://cloud.example.org/apps/oauth2/authorize",
+            },
+            OneDrive: {
+                scope: "offline_access%20onedrive.readonly",
+                endpoint: "https://login.live.com/oauth20_authorize.srf",
+            },
+            Oura: {
+                scope: "personal",
+                endpoint: "https://cloud.ouraring.com/oauth/authorize",
+            },
+            Patreon: {
+                scope: "identity",
+                endpoint: "https://www.patreon.com/oauth2/authorize",
+            },
+            PayPal: {
+                scope: "openid%20profile%20email",
+                endpoint: "https://www.sandbox.paypal.com/connect",
+            },
+            SalesForce: {
+                scope: "openid%20profile%20email",
+                endpoint: "https://login.salesforce.com/services/oauth2/authorize",
+            },
+            Shopify: {
+                scope: "read_products",
+                endpoint: "https://myshopify.com/admin/oauth/authorize",
+            },
+            Soundcloud: {
+                scope: "non-expiring",
+                endpoint: "https://api.soundcloud.com/connect",
+            },
+            Spotify: {
+                scope: "user-read-email",
+                endpoint: "https://accounts.spotify.com/authorize",
+            },
+            Strava: {
+                scope: "read",
+                endpoint: "https://www.strava.com/oauth/authorize",
+            },
+            Stripe: {
+                scope: "read_only",
+                endpoint: "https://connect.stripe.com/oauth/authorize",
+            },
+            TikTok: {
+                scope: "user.info.basic",
+                endpoint: "https://www.tiktok.com/auth/authorize/",
+            },
+            Tumblr: {
+                scope: "email",
+                endpoint: "https://www.tumblr.com/oauth2/authorize",
+            },
+            Twitch: {
+                scope: "user_read",
+                endpoint: "https://id.twitch.tv/oauth2/authorize",
+            },
+            Twitter: {
+                scope: "users.read%20tweet.read",
+                endpoint: "https://twitter.com/i/oauth2/authorize",
+            },
+            Typetalk: {
+                scope: "my",
+                endpoint: "https://typetalk.com/oauth2/authorize",
+            },
+            Uber: {
+                scope: "profile",
+                endpoint: "https://login.uber.com/oauth/v2/authorize",
+            },
+            VK: {
+                scope: "email",
+                endpoint: "https://oauth.vk.com/authorize",
+            },
+            Wepay: {
+                scope: "manage_accounts%20view_user",
+                endpoint: "https://www.wepay.com/v2/oauth2/authorize",
+            },
+            Xero: {
+                scope: "openid%20profile%20email",
+                endpoint: "https://login.xero.com/identity/connect/authorize",
+            },
+            Yahoo: {
+                scope: "openid%20profile%20email",
+                endpoint: "https://api.login.yahoo.com/oauth2/request_auth",
+            },
+            Yammer: {
+                scope: "user",
+                endpoint: "https://www.yammer.com/oauth2/authorize",
+            },
+            Yandex: {
+                scope: "login:email",
+                endpoint: "https://oauth.yandex.com/authorize",
+            },
+            Zoom: {
+                scope: "user:read",
+                endpoint: "https://zoom.us/oauth/authorize",
+            },
+            MetaMask: {
+                scope: "",
+                endpoint: "",
+            },
+            Web3Onboard: {
+                scope: "",
+                endpoint: "",
+            },
+        };
+
+        const providers = [
+            {
+                "owner": "admin",
+                "name": "provider_github",
+                "createdTime": "2024-01-22T11:15:22+08:00",
+                "displayName": "New Provider - github",
+                "category": "OAuth",
+                "type": "GitHub",
+                "subType": "",
+                "method": "Normal",
+                "clientId": "Iv1.de7a592b6cc33131",
+                "clientSecret": "***",
+                "clientId2": "",
+                "clientSecret2": "",
+                "cert": "",
+                "customAuthUrl": "",
+                "customTokenUrl": "",
+                "customUserInfoUrl": "",
+                "customLogo": "",
+                "scopes": "",
+                "userMapping": {},
+                "host": "",
+                "port": 0,
+                "disableSsl": false,
+                "title": "",
+                "content": "",
+                "receiver": "",
+                "regionId": "",
+                "signName": "",
+                "templateCode": "",
+                "appId": "",
+                "endpoint": "",
+                "intranetEndpoint": "",
+                "domain": "",
+                "bucket": "",
+                "pathPrefix": "",
+                "metadata": "",
+                "idP": "",
+                "issuerUrl": "",
+                "enableSignAuthnRequest": false,
+                "providerUrl": "https://github.com/organizations/xxx/settings/applications/1234567"
+            },
+            {
+                "owner": "admin",
+                "name": "provider_twitter",
+                "createdTime": "2024-01-22T11:20:19+08:00",
+                "displayName": "New Provider - twitter",
+                "category": "OAuth",
+                "type": "Twitter",
+                "subType": "",
+                "method": "Normal",
+                "clientId": "VmNJS2otVTlZYUVLNEVVZ0ZJc2w6MTpjaQ",
+                "clientSecret": "***",
+                "clientId2": "",
+                "clientSecret2": "",
+                "cert": "",
+                "customAuthUrl": "",
+                "customTokenUrl": "",
+                "customUserInfoUrl": "",
+                "customLogo": "",
+                "scopes": "",
+                "userMapping": {},
+                "host": "",
+                "port": 0,
+                "disableSsl": false,
+                "title": "",
+                "content": "",
+                "receiver": "",
+                "regionId": "",
+                "signName": "",
+                "templateCode": "",
+                "appId": "",
+                "endpoint": "",
+                "intranetEndpoint": "",
+                "domain": "",
+                "bucket": "",
+                "pathPrefix": "",
+                "metadata": "",
+                "idP": "",
+                "issuerUrl": "",
+                "enableSignAuthnRequest": false,
+                "providerUrl": "https://github.com/organizations/xxx/settings/applications/1234567"
+            },
+            {
+                "owner": "admin",
+                "name": "provider_facebook",
+                "createdTime": "2024-01-22T11:19:03+08:00",
+                "displayName": "New Provider - facebook",
+                "category": "OAuth",
+                "type": "Facebook",
+                "subType": "",
+                "method": "Normal",
+                "clientId": "927083362474156",
+                "clientSecret": "***",
+                "clientId2": "",
+                "clientSecret2": "",
+                "cert": "",
+                "customAuthUrl": "",
+                "customTokenUrl": "",
+                "customUserInfoUrl": "",
+                "customLogo": "",
+                "scopes": "",
+                "userMapping": {},
+                "host": "",
+                "port": 0,
+                "disableSsl": false,
+                "title": "",
+                "content": "",
+                "receiver": "",
+                "regionId": "",
+                "signName": "",
+                "templateCode": "",
+                "appId": "",
+                "endpoint": "",
+                "intranetEndpoint": "",
+                "domain": "",
+                "bucket": "",
+                "pathPrefix": "",
+                "metadata": "",
+                "idP": "",
+                "issuerUrl": "",
+                "enableSignAuthnRequest": false,
+                "providerUrl": "https://github.com/organizations/xxx/settings/applications/1234567"
+            },
+            {
+                "owner": "admin",
+                "name": "provider_wechat",
+                "createdTime": "2024-01-25T10:20:42+08:00",
+                "displayName": "wechat",
+                "category": "OAuth",
+                "type": "WeChat",
+                "subType": "",
+                "method": "Normal",
+                "clientId": "wxf6fad0f92d9e8313",
+                "clientSecret": "***",
+                "clientId2": "wxf6fad0f92d9e8313",
+                "clientSecret2": "***",
+                "cert": "",
+                "customAuthUrl": "",
+                "customTokenUrl": "",
+                "customUserInfoUrl": "",
+                "customLogo": "",
+                "scopes": "",
+                "userMapping": {},
+                "host": "",
+                "port": 0,
+                "disableSsl": true,
+                "title": "",
+                "content": "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEX///8AAABVwtN+AAAB+ElEQVR42uyYPfLrIAzE10NByRE4Cjfzx804CkegpGC8byQ8SZyX6l9ZHquK418jI1Yr4YknnvhbLCTZAFbMAMiy9CD/8V4AgKkhsWJiTY5l6iEfL+wAjtxazI5laZrmjJAlW4MA+8i2ezksq4AeDytcA3BHQGsyZlZ5Sh1xx4+ivTqg+hBzD2X2NbkWt18CcnFgRCQUGDfrR1wckJLjULkZgR2Rmma5FwDWtHrS1ShHKDXpmKf3zTIBLK4eNyuyhexaXF3F7rnaApjhC0iuCHQNU9fOBFtAxSK9KBTR6nFgSWzPvQAErohkjVsLlE8i8v7p5WwAeRH/IGlSzJBYOiCulgA4cvcFesEAeK5DH2AKQJDHpJUXCD23tPu3DN4GmD2lD+3aebkjcOJLBm0AfJ2dyIQOQfgUcxPA0rUQs9o3TXNTMX/rgwnA1bSRuYvY6RA0j0u23A7YMfyDDEGjJZ3mbguA6MMoxvmV5rfaXx9wYqjFjeoQJPrgaprOLsgCkIazEcHTJYJAJ8t6A+Bj1hP/wKaScmpJBoBjeZi6/pTxgT3kz+9gAjh2IB3qSDv+S9MEcOyjBBgqt43EbwloTbah4pS7ViwC+chP5m4Efq16rg+MrbtqhKTpxcuJr7YFHMtDnUKrcjJW80tArANPPPHEOf4FAAD//zp6rk3/kINSAAAAAElFTkSuQmCC",
+                "receiver": "",
+                "regionId": "",
+                "signName": "",
+                "templateCode": "",
+                "appId": "",
+                "endpoint": "",
+                "intranetEndpoint": "",
+                "domain": "",
+                "bucket": "",
+                "pathPrefix": "",
+                "metadata": "",
+                "idP": "",
+                "issuerUrl": "",
+                "enableSignAuthnRequest": false,
+                "providerUrl": "https://open.weixin.qq.com/connect/oauth2/authorize"
+            }
+        ]
+
+        function getStateFromQueryParams(applicationName, providerName, method, isShortState) {
+            let query = window.location.search;
+            query = `${query}&application=${encodeURIComponent(applicationName)}&provider=${encodeURIComponent(providerName)}&method=${method}`;
+            if (method === "link") {
+                query = `${query}&from=${window.location.href}`;
+            }
+
+            if (!isShortState) {
+                return btoa(query);
+            } else {
+                const state = providerName;
+                sessionStorage.setItem(state, query);
+                return state;
+            }
+        }
+
+        function getAuthUrl(provider, method, res) {
+            if (provider === null) {
+                return "";
+            }
+            let endpoint = authInfo[provider.type].endpoint;
+            let redirectUri = `https://casdoor-community.qiniu.io/callback`;
+            const scope = authInfo[provider.type].scope;
+
+            // rm (provider.type === "Twitter")
+            const isShortState = (provider.type === "WeChat" && navigator.userAgent.includes("MicroMessenger"));
+            const state = getStateFromQueryParams(application.name, provider.name, method, isShortState);
+            const codeChallenge = "P3S-a7dr8bgM4bF6vOyiKkKETDl16rcAzao9F8UIL1Y"; // SHA256(Base64-URL-encode("casdoor-verifier"))
+
+            if (provider.type === "AzureAD") {
+                if (provider.domain !== "") {
+                    endpoint = endpoint.replace("common", provider.domain);
+                }
+            } else if (provider.type === "Apple") {
+                redirectUri = `https://casdoor-community.qiniu.io/api/callback`;
+            }
+
+            if (provider.type === "Google" || provider.type === "GitHub" || provider.type === "QQ" || provider.type === "Facebook"
+                || provider.type === "Weibo" || provider.type === "Gitee" || provider.type === "LinkedIn" || provider.type === "GitLab" || provider.type === "AzureAD"
+                || provider.type === "Slack" || provider.type === "Line" || provider.type === "Amazon" || provider.type === "Auth0" || provider.type === "BattleNet"
+                || provider.type === "Bitbucket" || provider.type === "Box" || provider.type === "CloudFoundry" || provider.type === "Dailymotion"
+                || provider.type === "DigitalOcean" || provider.type === "Discord" || provider.type === "Dropbox" || provider.type === "EveOnline" || provider.type === "Gitea"
+                || provider.type === "Heroku" || provider.type === "InfluxCloud" || provider.type === "Instagram" || provider.type === "Intercom" || provider.type === "Kakao"
+                || provider.type === "MailRu" || provider.type === "Meetup" || provider.type === "MicrosoftOnline" || provider.type === "Naver" || provider.type === "Nextcloud"
+                || provider.type === "OneDrive" || provider.type === "Oura" || provider.type === "Patreon" || provider.type === "PayPal" || provider.type === "SalesForce"
+                || provider.type === "SoundCloud" || provider.type === "Spotify" || provider.type === "Strava" || provider.type === "Stripe" || provider.type === "Tumblr"
+                || provider.type === "Twitch" || provider.type === "Typetalk" || provider.type === "Uber" || provider.type === "VK" || provider.type === "Wepay"
+                || provider.type === "Xero" || provider.type === "Yahoo" || provider.type === "Yammer" || provider.type === "Yandex" || provider.type === "Zoom") {
+                return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&state=${state}`;
+            } else if (provider.type === "AzureADB2C") {
+                return `https://${provider.domain}.b2clogin.com/${provider.domain}.onmicrosoft.com/${provider.appId}/oauth2/v2.0/authorize?client_id=${provider.clientId}&nonce=defaultNonce&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${scope}&response_type=code&state=${state}&prompt=login`;
+            } else if (provider.type === "DingTalk") {
+                return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&prompt=consent&state=${state}`;
+            } else if (provider.type === "WeChat") {
+                if (provider.clientId !== "") {
+                    return `${endpoint}?appid=${provider.clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&state=${state}#wechat_redirect`;
+                }
+                return `/callback?appid=${provider.clientId2}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code&state=${state}&code=${res?.data2 || ""}`;
+            } else if (provider.type === "WeCom") {
+                if (provider.subType === "Internal") {
+                    if (provider.method === "Silent") {
+                        endpoint = authInfo[provider.type].silentEndpoint;
+                        return `${endpoint}?appid=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&scope=${scope}&response_type=code#wechat_redirect`;
+                    } else if (provider.method === "Normal") {
+                        endpoint = authInfo[provider.type].internalEndpoint;
+                        return `${endpoint}?appid=${provider.clientId}&agentid=${provider.appId}&redirect_uri=${redirectUri}&state=${state}&usertype=member`;
+                    } else {
+                        return `https://error:not-supported-provider-method:${provider.method}`;
+                    }
+                } else if (provider.subType === "Third-party") {
+                    if (provider.method === "Silent") {
+                        endpoint = authInfo[provider.type].silentEndpoint;
+                        return `${endpoint}?appid=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&scope=${scope}&response_type=code#wechat_redirect`;
+                    } else if (provider.method === "Normal") {
+                        return `${endpoint}?appid=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&usertype=member`;
+                    } else {
+                        return `https://error:not-supported-provider-method:${provider.method}`;
+                    }
+                } else {
+                    return `https://error:not-supported-provider-sub-type:${provider.subType}`;
+                }
+            } else if (provider.type === "Lark") {
+                return `${endpoint}?app_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}`;
+            } else if (provider.type === "ADFS") {
+                return `${provider.domain}/adfs/oauth2/authorize?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&nonce=casdoor&scope=openid`;
+            } else if (provider.type === "Baidu") {
+                return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}&display=popup`;
+            } else if (provider.type === "Alipay") {
+                return `${endpoint}?app_id=${provider.clientId}&scope=auth_user&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}&display=popup`;
+            } else if (provider.type === "Casdoor") {
+                return `${provider.domain}/login/oauth/authorize?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}`;
+            } else if (provider.type === "Infoflow") {
+                return `${endpoint}?appid=${provider.clientId}&redirect_uri=${redirectUri}?state=${state}`;
+            } else if (provider.type === "Apple") {
+                return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code%20id_token&scope=${scope}&response_mode=form_post`;
+            } else if (provider.type === "Steam") {
+                return `${endpoint}?openid.claimed_id=http://specs.openid.net/auth/2.0/identifier_select&openid.identity=http://specs.openid.net/auth/2.0/identifier_select&openid.mode=checkid_setup&openid.ns=http://specs.openid.net/auth/2.0&openid.realm=https://casdoor-community.qiniu.io&openid.return_to=${redirectUri}?state=${state}`;
+            } else if (provider.type === "Okta") {
+                return `${provider.domain}/v1/authorize?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}`;
+            } else if (provider.type === "Douyin" || provider.type === "TikTok") {
+                return `${endpoint}?client_key=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}`;
+            } else if (provider.type === "Custom") {
+                return `${provider.customAuthUrl}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${provider.scopes}&response_type=code&state=${state}`;
+            } else if (provider.type === "Bilibili") {
+                return `${endpoint}#/?client_id=${provider.clientId}&return_url=${redirectUri}&state=${state}&response_type=code`;
+            } else if (provider.type === "Deezer") {
+                return `${endpoint}?app_id=${provider.clientId}&redirect_uri=${redirectUri}&perms=${scope}`;
+            } else if (provider.type === "Lastfm") {
+                return `${endpoint}?api_key=${provider.clientId}&cb=${redirectUri}`;
+            } else if (provider.type === "Shopify") {
+                return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&scope=${scope}&state=${state}&grant_options[]=per-user`;
+            } else if (provider.type === "Twitter" || provider.type === "Fitbit") {
+                return `${endpoint}?client_id=${provider.clientId}&redirect_uri=${redirectUri}&state=${state}&response_type=code&scope=${scope}&code_challenge=${codeChallenge}&code_challenge_method=S256`;
+            } else if (provider.type === "MetaMask") {
+                return `${redirectUri}?state=${state}`;
+            } else if (provider.type === "Web3Onboard") {
+                return `${redirectUri}?state=${state}`;
+            }
+        }
+
+        function openBindPage(url) {
+            window.open(url, '_blank');
+        }
+
+        function openUnbindPage(url) {
+            let newUrl = "/userUnlink?pv=" + url;
+            window.open(newUrl, '_blank');
+        }
+
+        /*======= change theme =======*/
+        const themeOverrides = {
+            common: {
+                primaryColor: '#3182ce'
+            },
+            Tab: {
+                backgroundColor: '#3182ce',
+            },
+            Button: {
+                textColor: '#3182ce',
+                color: '#3182ce',
+            },
+            Input: {
+                caretColor: '#3182ce',
+                borderColor: '#3182ce',
+            }
+        }
+        const selectThemeOverrides = {
+            menuBoxShadow:
+                '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)',
+            peers: {
+                InternalSelection: {
+                    textColor: '#FF0000',
+                }
+            }
+        }
+        const buttonThemeOverrides = {
+            heightMedium: '40px',
+            textColor: '#00ff00'
+        }
+
+        /*======= register vue component =======*/
+        const app = Vue.createApp({
+            data() {
+                return {
+                    formRef,
+                    rules,
+                    canSubmit,
+                    selectThemeOverrides,
+                    buttonThemeOverrides,
+                    userProfile,
+                    genderOptions,
+                    fileList,
+                    accountList: [
+                        {
+                            img: "static/img/social_github.png",
+                            platform: "GitHub",
+                            desc: "https://github.com",
+                            bind: accountBinds.Github,
+                            provider: authInfo.GitHub,
+                            url: getAuthUrl(providers[0], "link")
+                        },
+                        {
+                            img: "static/img/social_twitter.png",
+                            platform: "Twitter / X",
+                            desc: "https://twitter.com",
+                            bind: accountBinds.Twitter,
+                            provider: authInfo.Twitter,
+                            url: getAuthUrl(providers[1], "link")
+                        },
+                        {
+                            img: "static/img/social_facebook.png",
+                            platform: "Facebook",
+                            desc: "https://facebook.com",
+                            bind: accountBinds.Facebook,
+                            provider: authInfo.Facebook,
+                            url: getAuthUrl(providers[2], "link")
+                        },
+                        {
+                            img: "static/img/social_wechat.png",
+                            platform: "WeChat",
+                            desc: "https://weixin.qq.com",
+                            bind: accountBinds.WeChat,
+                            provider: authInfo.WeChat,
+                            url: getAuthUrl(providers[3], "link")
+                        }
+                    ]
+                }
+            },
+            methods: {
+                onlyAllowNumber,
+                openBindPage,
+                openUnbindPage,
+                editProfile,
+                customRequest,
+            },
+        });
+
+        app.use(naive)
+        app.config.compilerOptions.delimiters = ['${', '}']
+        app.mount('#app')
     </script>
-    <script src="static/js/user_edit.js"></script>
-  </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmd/gopcomm/yap/user_yap.html b/cmd/gopcomm/yap/user_yap.html
index 7360e51..302255d 100644
--- a/cmd/gopcomm/yap/user_yap.html
+++ b/cmd/gopcomm/yap/user_yap.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Go+ Community</title>
+    <title>User Profile</title>
 
     <!-- UI -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
@@ -30,22 +30,22 @@
 
 <body style="background-color: #f7fafc;">
     {{ template "header" .}}
+
     <n-config-provider>
         <div id="app" class="h-full w-full">
             <n-breadcrumb style="margin: 10px 20px;">
-                <n-breadcrumb-item>
-                    <a href="/"><i class="ph-duotone ph-house" style="font-size: 18px; margin-right: 5px;"></i>
-                        Home</a>
+                <n-breadcrumb-item href="/">
+                    <i class="ph ph-house" style="font-size: 18px; margin-right: 5px;"></i>
+                    Home
                 </n-breadcrumb-item>
                 <n-breadcrumb-item>
-                    <i class="ph ph-user" style="font-size: 18px; margin-right: 5px;"></i>
-                    ${ CurrentUser.name }
+                    <span class="font-semibold">${ CurrentUser.name }</span>
                 </n-breadcrumb-item>
             </n-breadcrumb>
 
             <div style="padding: 40px 40px; margin: 30px auto;" class="container px-5 py-3 mx-auto bg-white rounded-lg">
                 <!-- Personal Profile -->
-                <n-grid :x-gap="12" :cols="7" style="padding: 0 20px;">
+                <n-grid :x-gap="12" :cols="8" style="padding: 0 20px;">
                     <!-- Avatar -->
                     <n-gi :span="1" class="flex justify-center items-center">
                         <n-avatar v-if="CurrentUser.avatar" round :size="110" :src="CurrentUser.avatar"></n-avatar>
@@ -53,62 +53,77 @@
                     </n-gi>
 
                     <!-- Name & Description & Contact Info -->
-                    <n-gi :span="4" class="flex flex-col justify-center">
+                    <n-gi :span="5" class="flex flex-col justify-center">
                         <!-- Name & Description -->
-                        <span class="text-3xl font-semibold">
+                        <span class="text-3xl font-semibold mb-2">
                             ${ CurrentUser.name }
-                            <span class="text-xs text-neutral-700 font-normal ml-3">Description</span>
+                            <!-- TODO: <span class="text-xs text-neutral-700 font-normal ml-3">Description</span> -->
                         </span>
 
                         <!-- Contact Info  -->
-                        <n-grid :x-gap="1" :y-gap="3" :cols="2" class="mt-2">
-                            <!-- Gender & Birthday -->
+                        <n-grid :x-gap="1" :y-gap="3" :cols="2" class="mt-3">
+                            <!-- Created Time -->
                             <n-gi class="flex items-center">
-                                <i class="ph-duotone ph-user-circle" style="color: #ef5028; font-size: 20px;"></i>
-                                <p v-if="CurrentUser.gender" class="ml-3 text-gray-400">
-                                    ${ CurrentUser.gender },
-                                </p>
-                                <p v-if="CurrentUser.birthday" class="text-gray-400"> born on ${ CurrentUser.birthday }
-                                </p>
-                                <p v-if="!CurrentUser.gender && !CurrentUser.birthday" class="ml-3 text-gray-400">
-                                    birthday is empty</p>
+                                <i class="ph ph-calendar-check" style="color: #0284c7; font-size: 20px;"></i>
+                                <div class="flex items-center">
+                                    <p class="ml-3">${ CurrentUser.createdTime.slice(0,10) }</p>
+                                    <p class="ml-1 text-gray-400">Joined Go+ Community</p>
+                                </div>
                             </n-gi>
 
-                            <!-- Created Time -->
+                            <!-- Gender & Birthday -->
                             <n-gi class="flex items-center">
-                                <i class="ph-duotone ph-calendar-check" style="color: #3182ce; font-size: 20px;"></i>
-                                <p class="ml-3 text-gray-400">${ CurrentUser.createdTime.slice(0,10) } Joined GoPlus
-                                    Community</p>
+                                <i class="ph ph-cake" style="color: #0284c7; font-size: 20px;"></i>
+                                <div class="flex items-center">
+                                    <p class="ml-3 text-gray-400">Gender & Birthday:</p>
+                                    <p v-if="CurrentUser.gender" class="ml-1">
+                                        ${ CurrentUser.gender }，
+                                    </p>
+                                    <p v-if="CurrentUser.birthday" class="ml-1"> born on ${ CurrentUser.birthday }
+                                    </p>
+                                    <p v-if="!CurrentUser.gender && !CurrentUser.birthday" class="ml-1">null</p>
+                                </div>
                             </n-gi>
 
                             <!-- Email -->
                             <n-gi class="flex items-center">
-                                <i class="ph-duotone ph-envelope" style="color: #2191ad; font-size: 20px;"></i>
-                                <p v-if="CurrentUser.email === ''" class="ml-3 text-gray-400">email is empty</p>
-                                <p v-else class="ml-3 text-gray-400">${ CurrentUser.email}</p>
+                                <i class="ph ph-envelope-simple" style="color: #0284c7; font-size: 20px;"></i>
+                                <div class="flex items-center">
+                                    <p class="ml-3 text-gray-400">E-mail:</p>
+                                    <p v-if="CurrentUser.email" class="ml-1">
+                                        ${ CurrentUser.email}
+                                    </p>
+                                    <p v-else class="ml-1">null</p>
+                                </div>
                             </n-gi>
 
                             <!-- Phone -->
                             <n-gi class="flex items-center">
-                                <i class="ph-duotone ph-phone-call" style="color: #d88d01; font-size: 20px;"></i>
-
-                                <p v-if="CurrentUser.phone === ''" class="ml-3 text-gray-400">phone is empty</p>
-                                <p v-else class="ml-3 text-gray-400">${ CurrentUser.phone}</p>
+                                <i class="ph ph-phone-call" style="color: #0284c7; font-size: 20px;"></i>
+                                <div class="flex items-center">
+                                    <p class="ml-3 text-gray-400">Phone:</p>
+                                    <p v-if="CurrentUser.phone" class="ml-1">
+                                        ${ CurrentUser.phone}
+                                    </p>
+                                    <p v-else class="ml-1">null</p>
+                                </div>
                             </n-gi>
                         </n-grid>
                     </n-gi>
 
                     <!-- Edit Button & Followers -->
                     <n-gi :span="2" class="flex flex-col justify-center items-end">
+                        <!-- Edit Button -->
                         {{ if .UserId}}
                         <n-button v-if="UserId === CurrentUser.id" text color="#3182ce"
-                            onclick="window.location.href='/userEdit'">
+                            onclick="window.location.href='/userEdit'" class="mb-4">
                             <template #icon>
-                                <i class="ph-duotone ph-pencil-line" style="color: #3182ce;"></i>
+                                <i class="ph-duotone ph-gear" style="color: #3182ce;"></i>
                             </template>
-                            Edit Profile
+                            Settings
                         </n-button>
                         {{ end }}
+
                         <!-- Following & Followers -->
                         <div class="flex items-center mt-3">
                             <div class="flex flex-col items-center">
@@ -158,87 +173,96 @@ <h1 class="text-4xl"> Have no data!</h1>
                         <n-list v-else>
                             <!-- Article List Item -->
                             <n-list-item v-for="(item,i) in articleList">
-                                <!-- left part -->
-                                <div style="width: 30%;padding: 0 20px;">
-                                    <!-- Image -->
-                                    <img class="w-full object-cover rounded" style="height: 15vh;" :src="item.Cover"
-                                        alt="">
-
-                                    <!-- Data -->
-                                    <div class="flex justify-center items-center mt-2" style="height: 2vh;">
-                                        <!-- Views -->
-                                        <div class="flex justify-center items-center" style="width: 40%;">
-                                            <i class="ph-duotone ph-eye"></i>
-                                            <!-- TODO @Bai: 浏览量 -->
-                                            <span class="ml-1 text-sm">368</span>
-                                        </div>
-
-                                        <!-- Likes -->
-                                        <div class="flex justify-center items-center" style="width: 40%;">
-                                            <i class="ph-duotone ph-thumbs-up"></i>
-                                            <!-- TODO @Bai: 点赞数 -->
-                                            <span class="ml-1 text-sm">12</span>
+                                <!-- prefix -->
+                                <template #prefix>
+                                    <div style="height: 20vh; width: 32vh;">
+                                        <!-- Image -->
+                                        <img class="w-full object-cover rounded" :src="item.Cover" alt="">
+
+                                        <!-- Data -->
+                                        <div class="flex justify-center items-center mt-2" style="height: 2vh;">
+                                            <!-- Views -->
+                                            <div class="flex justify-center items-center" style="width: 40%;">
+                                                <i class="ph-duotone ph-eye" style="color: #3182ce;"></i>
+                                                <!-- TODO: 浏览量 -->
+                                                <span class="ml-1 text-sm">368</span>
+                                            </div>
+
+                                            <!-- Likes -->
+                                            <div class="flex justify-center items-center" style="width: 40%;">
+                                                <i class="ph-duotone ph-thumbs-up" style="color: #3182ce;"></i>
+                                                <!-- TODO: 点赞数 -->
+                                                <span class="ml-1 text-sm">12</span>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
+                                </template>
+
+                                <!-- content -->
+                                <div style="width: 70%;" class="flex flex-col items-start">
+                                    <div class="absolute top-4">
+                                        <!-- Title -->
+                                        <div class="text-2xl font-semibold text-gray-900 title-font mb-2">
+                                            <a :href="'/p/' + item.ID">
+                                                <p>${ item.Title }</p>
+                                            </a>
+                                        </div>
 
-                                <!-- left part -->
-                                <div style="width: 50%;">
-                                    <!-- Title -->
-                                    <div class="text-2xl font-semibold text-gray-900 title-font mb-2">
-                                        <a :href="'/p/' + item.ID">
-                                            <p>${ item.Title }</p>
-                                        </a>
-                                    </div>
+                                        <!-- Tags -->
+                                        <div class="flex flex-row items-center">
+                                            <span v-for="(tag, index) in item.Tags.split(';')" class="flex flex-row items-center">
+                                                <i class="ph-duotone ph-hash" style="color: #3182ce; font-size: 17px;"></i>
+                                                <p class="text-sm ml-1 mr-2 hover:text-blue-600">
+                                                    <a :href="'/search?value=' + tag">
+                                                        ${ tag }
+                                                    </a>
+                                                </p>
+                                            </span>
+                                        </div>
 
-                                    <!-- Tags -->
-                                    <div class="flex flex-row items-center">
-                                        <span v-for="(tag, index) in item.Tags.split(';')" class="flex flex-row items-center">
-                                            <i class="ph-duotone ph-hash" style="color: #3182ce; font-size: 17px;"></i>
-                                            <p class="text-sm ml-1 mr-2 hover:text-blue-600">
-                                                <a :href="'/search?value=' + tag">
-                                                    ${ tag }
-                                                </a>
-                                            </p>
-                                        </span>
+                                        <!-- Description -->
+                                        <p class="leading-7 mt-1 text-neutral-700" style="color: #6b7280; line-height: normal;">
+                                            ${ item.Abstract }
+                                        </p>
                                     </div>
-
-                                    <!-- Description -->
-                                    <p class="leading-7 mt-1 text-neutral-700">
-                                        ${ item.Abstract }
-                                    </p>
-
+                                    
                                     <!-- Update Time -->
                                     <span class="text-xs absolute bottom-4" style="color: #A0AEC0;">
                                         ${ item.Ctime.slice(0,10) }
                                     </span>
                                 </div>
 
-                                <!-- right part -->
-                                <div style="width: 20%;">
-                                    <!-- Edit Button & Delete Button -->
-                                    <div v-if="UserId === item.UId"
-                                        class="grid grid-flow-row-dense grid-cols-2 grid-rows-1 items-center mb-5"
-                                        style="height: 2vh;">
-                                        <n-button text class="col-span-1"
-                                            style="--n-text-color-hover: #3182ce; --n-text-color-focus: #3182ce;">
+                                <!-- suffix -->
+                                <template #suffix>
+                                    {{if .User}}
+                                    <div class="flex">
+                                        <!-- Edit Button -->
+                                        <n-button 
+                                            tag="a"
+                                            :href="'/edit/' + item.ID"
+                                            style="--n-border-radius: 7px; --n-ripple-color: #7ba7d3; 
+                                            --n-text-color-hover: #3182ce; --n-text-color-pressed: #3182ce;
+                                            --n-text-color-focus: #3182ce; --n-border-hover: 1px solid #3182ce;
+                                            --n-border-pressed: 1px solid #3182ce; --n-border-focus: 1px solid #3182ce;">
                                             <template #icon>
-                                                <i class="ph-duotone ph-pencil-line" style="color: #3182ce;"></i>
+                                                <i class="ph-bold ph-pencil-line" style="color: #3182ce;"></i>
                                             </template>
-                                            <a :href="'/edit/' + item.ID">Edit</a>
+                                            Edit
                                         </n-button>
 
                                         <!-- Delete Button -->
                                         <n-popconfirm :show="deleteId === item.ID">
                                             <template #icon>
-                                                <i class="ph-fill ph-siren" style="color: #f25858;"></i>
+                                                <i class="ph-duotone ph-warning" style="color: #f25858;"></i>
                                             </template>
                                             <template #trigger>
-                                                <n-button @click="deleteId = item.ID" text class="col-span-1"
-                                                    style="--n-text-color-hover: #f25858; --n-text-color-focus: #f25858;">
+                                                <n-button @click="deleteId = item.ID" class="ml-2"
+                                                    style="--n-border-radius: 7px; --n-ripple-color: #fecaca; 
+                                                --n-text-color-hover: #f06464; --n-text-color-pressed: #f25858;
+                                                --n-text-color-focus: #f25858; --n-border-hover: 1px solid #f06464;
+                                                --n-border-pressed: 1px solid #f25858; --n-border-focus: 1px solid #f25858;">
                                                     <template #icon>
-                                                        <i class="ph-duotone ph-trash-simple"
-                                                            style="color: #f25858;"></i>
+                                                        <i class="ph-bold ph-trash" style="color: #f25858;"></i>
                                                     </template>
                                                     Delete
                                                 </n-button>
@@ -247,12 +271,14 @@ <h1 class="text-4xl"> Have no data!</h1>
                                             <template #action>
                                                 <n-button @click="deleteId = 0" size="tiny" strong
                                                     secondary>Cancel</n-button>
-                                                <n-button @click="deleteArticle(item.ID)" size="tiny" strong secondary
-                                                    type="error">Delete</n-button>
+                                                <n-button @click="deleteArticle(item.ID)" size="tiny" strong
+                                                    secondary type="error">Delete</n-button>
                                             </template>
                                         </n-popconfirm>
                                     </div>
-                                </div>
+                                    {{end}}
+                                </template>
+                                
                             </n-list-item>
                         </n-list>
 
@@ -299,17 +325,16 @@ <h1 class="text-4xl"> Have no data!</h1>
                                 <n-list-item v-for="(item,i) in videoList" :key="index" class="flex">
                                     <!-- prefix -->
                                     <template #prefix>
-                                        <!-- Video Cover -->
-                                        <!-- TODO: @Bai 视频封面src -->
+                                        <!-- TODO: bug Video Cover -->
                                         <img class="w-full object-cover rounded" style="height: 20vh; width: 32vh;"
-                                            src="" alt="">
+                                            :src="item.FileKey+'?vframe/jpg/offset/0'" alt="">
                                     </template>
 
                                     <!-- content -->
                                     <div style="width: 70%;" class="flex flex-col items-start">
                                         <div class="absolute top-4">
                                             <!-- Video Filename -->
-                                            <!-- TODO: @Bai 视频文件名${ item. } -->
+                                            <!-- TODO: 视频文件名${ item. } -->
                                             <p class="text-xl font-semibold mb-3">Video Name</p>
 
                                             <!-- TODO: 视频时长 -->
@@ -436,7 +461,7 @@ <h1 class="text-4xl"> Have no data!</h1>
                             <!-- Image List -->
                             <n-grid x-gap="16" :cols="4">
                                 <n-gi :span="1" v-for="(item,index) in imageList" :key="index">
-                                    <n-card shadow="hover">
+                                    <n-card hoverable>
                                         <div class="image">
                                             <n-image :src="item.FileKey" class="image-item" fit="cover"></n-image>
                                         </div>
@@ -512,10 +537,10 @@ <h1 class="text-4xl"> Have no data!</h1>
             // to change theme
             const themeOverrides = {
                 common: {
-                    primaryColor: '#3f83f8'
+                    primaryColor: '#3182ce'
                 },
                 Tab: {
-                    backgroundColor: '#3f83f8',
+                    backgroundColor: '#3182ce',
                 }
             }
 
@@ -716,15 +741,18 @@ <h1 class="text-4xl"> Have no data!</h1>
 
     <!-- Footer -->
     <p class="fixed bottom-0 left-1/2 transform -translate-x-1/2" style="font-size: xx-small;">
-        ©2024, provided by
-        <a href="https://www.qiniu.com/" target="_blank" style="color: #3182ce;">Qiniu Tech</a>
+        ©2024, powered by
+        <a href="https://www.qiniu.com/" target="_blank" style="color: #3182ce;">Qiniu Cloud</a>
     </p>
-
 </body>
 
 </html>
 
 <style>
+    a:hover {
+        color: #3182ce;
+    }
+
     .n-list .n-list-item .n-list-item__main {
         display: flex;
         flex-direction: row;
@@ -758,13 +786,13 @@ <h1 class="text-4xl"> Have no data!</h1>
             border-radius: 8px;
             overflow: hidden;
 
-            max-height: 300px;
+            max-height: 200px;
 
             .image-item {
                 transition: all 0.5s;
                 background-color: #000000;
                 width: 100%;
-                height: 250px;
+                height: 200px;
             }
 
             .image-item:hover {
@@ -778,12 +806,12 @@ <h1 class="text-4xl"> Have no data!</h1>
             flex-flow: row nowrap;
             justify-content: space-between;
             color: gray;
-            margin: 0 10px 10px 10px;
+            margin: 10px;
             border-radius: 8px;
 
             .image-time {
                 font-size: 14px;
-                color: gray;
+                color: #A0AEC0;
                 margin-top: 4px;
             }
         }
diff --git a/internal/core/community.go b/internal/core/community.go
index ccaed91..34c531a 100644
--- a/internal/core/community.go
+++ b/internal/core/community.go
@@ -347,28 +347,6 @@ func (p *Community) DeleteArticle(ctx context.Context, uid, id string) (err erro
 	return
 }
 
-// // DeleteArticles delete the articles by uid.
-// func (p *Community) DeleteArticles(ctx context.Context, uid string) (err error) {
-// 	// get htmlIds
-// 	var htmlIds []string
-// 	sqlStr := "select html_id from article where user_id=?"
-// 	rows, err := p.db.Query(sqlStr, uid)
-// 	defer rows.Close()
-// 	for rows.Next() {
-// 		var htmlId string
-// 		err = rows.Scan(&htmlId)
-// 		if err != nil {
-// 			return
-// 		}
-// 		htmlIds = append(htmlIds, htmlId)
-// 	}
-// 	sqlStr = "delete from article where user_id=?"
-// 	_, err = p.db.Exec(sqlStr, uid)
-// 	// delete the media
-// 	err = p.DelMedias(ctx, uid, htmlIds)
-// 	return
-// }
-
 const (
 	MarkBegin = ""
 	MarkEnd   = "eof"
diff --git a/internal/core/media.go b/internal/core/media.go
index 0764ae7..b80754e 100644
--- a/internal/core/media.go
+++ b/internal/core/media.go
@@ -314,8 +314,7 @@ func (c *Community) RetryCaptionGenerate(ctx context.Context, userId, videoId st
 	return nil
 }
 
-//	func (c *Community) ListMediaByUserId(ctx context.Context, userId string, format string) ([]File, error) {
-//		sqlStr := "select * from file where user_id = ?"
+// func (c *Community) ListMediaByUserId(ctx context.Context, userId string, format string) ([]File, error) {
 func (c *Community) ListMediaByUserId(ctx context.Context, userId string, format string, page, limitInt int) ([]File, int, error) {
 	sqlStr := "select * from file where user_id = ? "
 	var args []any
diff --git a/internal/core/user.go b/internal/core/user.go
index 12749a4..33d99a9 100644
--- a/internal/core/user.go
+++ b/internal/core/user.go
@@ -64,7 +64,7 @@ func (p *Community) GetUserClaim(uid string) (claim *casdoorsdk.User, err error)
 		p.xLog.Error(err)
 		return &casdoorsdk.User{}, ErrNotExist
 	}
-	claim.Properties["oauth_Wechat_extra"] = ""
+	// claim.Properties["oauth_Wechat_extra"] = ""
 	return
 }
 
@@ -93,8 +93,8 @@ func (p *Community) GetUserById(uid string) (user *User, err error) {
 }
 
 // UpdateUserById update user by uid
-func (p *Community) UpdateUserById(uid string, user *casdoorsdk.User) (res bool, err error) {
-	res, err = casdoorsdk.UpdateUserById(uid, user)
+func (p *Community) UpdateUserById(uid string, user *UserInfo) (res bool, err error) {
+	res, err = casdoorsdk.UpdateUserById(uid, (*casdoorsdk.User)(user))
 	return
 }