repos square

web_src/vuepages/langs/config/zh-CN.js

@@ -304,7 +304,7 @@ const zh = {
     activeUsers: '活跃用户',
     follow: '关注',
     unFollow: '取消关注',
-    selectedFields: '精选领域',
+    selectedFields: '领域精选',
     mostPopular: '近期热门',
     mostActive: '近期活跃',
     newest: '最近创建',

web_src/vuepages/pages/repos/components/ReposItem.vue

@@ -65,13 +65,14 @@
         </div>
         <div class="contributors">
           <span class="contributors-count">{{ $t('repos.contributors') }}&nbsp;</span>
-          <span> 17+ </span>
+          <span> {{ data.TotalContributorCountShow }}</span>
           <span class="contributors-avatar">
-            <img class="avatar" src="/user/avatar/Itx003/-1">
-            <img class="avatar" src="/user/avatar/Itx003/-1">
-            <img class="avatar" src="/user/avatar/Itx003/-1">
-            <img class="avatar" src="/user/avatar/Itx003/-1">
-            <img class="avatar" src="/user/avatar/Itx003/-1">
+            <a :href="item.UserName ? `/${item.UserName}` : `mailto:${item.Email}`" class="avatar-c"
+              v-for="(item, index) in data.Contributors" :key="index">
+              <img class="avatar" v-show="item.UserName" :src="item.RelAvatarLink">
+              <span class="avatar" v-show="!item.UserName" :style="{ backgroundColor: item.bgColor }">
+                {{ item.Email[0].toLocaleUpperCase() }}</span>
+            </a>
           </span>
         </div>
       </div>
@@ -270,13 +271,28 @@ export default {
   display: flex;
   align-items: center;
   margin-left: 16px;
+
+  .avatar-c {
+
+    img[src=""],
+    img:not([src]) {
+      // opacity: 0;
+    }
+  }
 }
 
 .item-bottom .avatar {
+  display: block;
   width: 25px;
   height: 25px;
   margin-left: -6px;
   border-radius: 100%;
   border: 1px solid white;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  color: white;
+  background-color: white;
+  font-weight: bold;
 }
 </style>

web_src/vuepages/pages/repos/components/ReposList.vue

@@ -50,6 +50,14 @@ export default {
         if (res.Code == 0) {
           const list = res.Data.Repos || [];
           this.list = list.map((item) => {
+            item.Contributors = (item.Contributors || []).map((_item) => {
+              return {
+                ..._item,
+                bgColor: this.randomColor(_item.Email[0].toLocaleUpperCase()),
+              }
+            });
+            const contributors = item.Contributors || [];
+            const contributorsCnt = item.TotalContributorCount <= 6 ? Math.min(contributors.length, item.TotalContributorCount) : item.TotalContributorCount;
             return {
               ...item,
               NameShow: this.handlerSearchStr(item.Name, this.q),
@@ -60,6 +68,7 @@ export default {
                   topicShow: this.handlerSearchStr(_item, this.q)
                 }
               }),
+              TotalContributorCountShow: contributorsCnt <= 10 ? contributorsCnt.toString() : '10+',
             }
           });
           this.total = res.Data.Total;
@@ -89,6 +98,12 @@ export default {
     handlerSearchStr(oStr, searchKey) {
       if (!searchKey) return oStr;
       return oStr.replace(new RegExp(`(${searchKey})`, 'ig'), `<font color="red">$1</font>`);
+    },
+    randomColor(t) {
+      const tIndex = t.charCodeAt(0);
+      const colorList = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad",
+        "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
+      return colorList[tIndex % colorList.length];
     }
   },
   watch: {},