前端徽章系统显示页

options/locale/locale_en-US.ini

@@ -525,6 +525,7 @@ datasets = Datasets
 activity = Public Activity
 followers = Followers
 starred = Starred Repositories
+badge = Achievement Badge
 following = Following
 follow = Follow
 unfollow = Unfollow

options/locale/locale_zh-CN.ini

@@ -530,6 +530,7 @@ datasets=数据集
 activity=公开活动
 followers=关注者
 starred=已点赞
+badge=成就徽章
 following=关注中
 follow=关注
 unfollow=取消关注

templates/repo/badge.tmpl

@@ -0,0 +1,25 @@
+<div class="badge-achive">
+	{{range .AllBadges }}
+	<div class="bagde-section">
+		<div class="badge-section-title">{{.CategoryName}} &nbsp; (已点亮{{.LightedNum}}个)</div>
+		<div class="badge-section-children">
+			<div class="badge-honor-badge">
+				<div class="badge-honor-badge-basic">
+					{{range .Badges }}
+					<a class="badge-honor-badge-basic-item {{if not .Badge.Url}} is-not-pointer {{end}}" href="{{.Badge.Url}}">
+                        {{if .IsLighted}}
+						<img  src="{{.Badge.LightedIcon}}" alt=""  class="badge-honor-badge-basic-img" />
+						{{else}}
+						<img src="{{.Badge.GreyedIcon}}" alt="" class="badge-honor-badge-basic-img" />
+						{{ end }}
+						<div class="badge-honor-badge-basic-txt">{{.Badge.Name}}</div>
+					</a>
+					{{ end }}
+				</div>
+			</div>
+		</div>
+	</div>
+	{{ end }}
+	{{ template "base/paginate" . }}
+</div>
+

templates/user/profile.tmpl

@@ -17,6 +17,17 @@
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>
 					</div>
+					
+					<div class="badge-wrap">
+						{{range $k,$v :=.RecentBadges}}
+						{{if le $k 3}}
+						<div class="badge-img-avatar" title="{{.Name}}"><img style="width: 100%;height: 100%;" src="{{.LightedIcon}}" class="ui poping up" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted"></div>
+						{{else}}
+						<a class="badge-more-icon" href="{{$.Owner.HomeLink}}?tab=badge"><i class="ri-more-fill"></i></a>
+						{{end}}
+						{{end}}
+						
+					</div>
 					<div class="extra content wrap">
 						<ul class="text black">
 							{{if .Owner.Location}}
@@ -170,6 +181,11 @@
 						{{svg "octicon-person" 16}}  {{.i18n.Tr "user.followers"}}
 						<div class="ui label">{{.Owner.NumFollowers}}</div>
 					</a>
+					<a class='{{if eq .TabName "badge"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=badge">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 15.245v6.872a.5.5 0 0 1-.757.429L12 20l-4.243 2.546a.5.5 0 0 1-.757-.43v-6.87a8 8 0 1 1 10 0zM12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>  
+						{{.i18n.Tr "user.badge"}}
+					</a>
+					
 				</div>
 
 				{{if eq .TabName "activity"}}
@@ -201,6 +217,8 @@
 					{{template "explore/dataset_search" .}}
 					{{template "explore/dataset_list" .}}
 					{{template "base/paginate" .}}
+				{{else if eq .TabName "badge"}}
+					{{template "repo/badge" .}}
 				{{else}}
 					{{template "explore/repo_search" .}}
 					{{template "explore/repo_list" .}}

web_src/less/_user.less

@@ -9,11 +9,30 @@
             .username {
                 display: block;
             }
-
+            .badge-wrap {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .badge-img-avatar {
+                    width: 32px;
+                    height: 32px;
+                    margin-right: 5px;
+                }
+                .badge-more-icon {
+                    width: 32px;
+                    height: 32px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 50%;
+                    border: 1px #f8f9fa solid;
+                    background: #f8f9fa;
+                }
+            }
             .header {
                 font-weight: 700;
                 font-size: 1.3rem;
-                margin-top: -.2rem;
+                margin-top: -0.2rem;
                 line-height: 1.3rem;
             }
 
@@ -158,3 +177,65 @@
         max-width: 60px;
     }
 }
+.badge-achive {
+    .bagde-section {
+        color: #000;
+        margin-top: 28px;
+        border-bottom: 1px solid #dededf;
+    }
+    .bagde-section:last-child {
+        color: #000;
+        margin-top: 28px;
+        border-bottom: none;
+    }
+    .badge-section-title {
+        position: relative;
+        font-size: 16px;
+        line-height: 24px;
+        padding-left: 8px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+    }
+    .badge-section-children {
+        width: 100%;
+    }
+    .badge-honor-badge {
+        margin-bottom: 25px;
+    }
+    .badge-honor-badge-basic {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+    .badge-honor-badge-basic-item {
+        text-align: center;
+        font-size: 12px;
+        margin-right: 30px;
+        color: #101010;
+    }
+    .is-not-pointer {
+        cursor: pointer;
+        pointer-events: none;
+    }
+    .badge-honor-badge-basic-img {
+        width: 56px;
+        height: 56px;
+        margin-bottom: 5px;
+    }
+    .badge-honor-badge-basic-txt {
+        line-height: 20px;
+        width: 65px;
+        word-break: break-all;
+    }
+    .badge-section-title:before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 1em;
+        background-color: #000;
+    }
+}