repos square

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

@@ -8,8 +8,10 @@
       <div class="content">
         <div class="item" v-for="(item, index) in list" :key="index">
           <div class="item-l">
-            <img class="avatar" :src="item.RelAvatarLink">
-            <div class="name-c"><a class="name" :href="`/${item.Name}`" :title="item.Name">{{ item.Name }}</a></div>
+            <a class="name" :href="`/${item.Name}`" :title="item.Name">
+              <img class="avatar" :src="item.RelAvatarLink">
+              <div class="name-c"><span>{{ item.Name }}</span></div>
+            </a>
           </div>
           <div class="item-r">
             <i class="ri-user-2-line" style="color:rgb(250, 140, 22);margin-right:4px;"></i>
@@ -84,6 +86,11 @@ export default {
 .item-l {
   flex: 1;
   overflow: hidden;
+  a {    
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
 }
 
 .item-r {

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

@@ -8,12 +8,12 @@
       <div class="content">
         <div class="item" v-for="(item, index) in list" :key="index">
           <div class="item-l">
-            <img class="avatar" :src="item.User.RelAvatarLink">
-            <div class="name-c">
-              <a class="name" :href="`/${item.User.Name}`" :title="(item.User.FullName || item.User.Name)">
+            <a class="name" :href="`/${item.User.Name}`" :title="(item.User.FullName || item.User.Name)">
+              <img class="avatar" :src="item.User.RelAvatarLink">
+              <div class="name-c">
                 {{ item.User.FullName || item.User.Name }}
-              </a>
-            </div>
+              </div>
+            </a>
           </div>
           <div class="item-r">
             <template v-if="item.ShowButton">
@@ -108,6 +108,12 @@ export default {
 .item-l {
   flex: 1;
   overflow: hidden;
+
+  a {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
 }
 
 .item-r {

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

@@ -12,6 +12,7 @@
 
 <script>
 import { getHomePageData } from '~/apis/modules/repos';
+import LetterAvatar from '~/utils/letteravatar';
 
 export default {
   name: "RecommendRepos",
@@ -87,11 +88,7 @@ export default {
         selectedRepoEl.innerHTML = html;
         this.swiperHandler.updateSlides();
         this.swiperHandler.updateProgress();
-        this.$nextTick(() => {
-          if (typeof LetterAvatar != 'undefined') {
-            LetterAvatar && LetterAvatar.transform();
-          }
-        });
+        LetterAvatar.transform();
       }
     }
   },

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

@@ -22,12 +22,12 @@ export default {
       }, {
         key: 'mostactive',
         label: this.$t('repos.mostActive'),
-      }, {
-        key: 'newest',
-        label: this.$t('repos.newest'),
       }, {
         key: 'recentupdate',
         label: this.$t('repos.recentlyUpdated'),
+      }, {
+        key: 'newest',
+        label: this.$t('repos.newest'),
       }, {
         key: 'moststars',
         label: this.$t('repos.mostStars'),

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

@@ -40,7 +40,7 @@
             </span>
           </div>
           <div class="descr" v-show="data.DescriptionShow" v-html="data.DescriptionShow"></div>
-          <div class="tags" v-show="data.Topics">
+          <div class="tags" v-show="data.Topics && data.Topics.length">
             <a v-for="(item, index) in data.TopicsShow" :key="index" class="tag"
               :class="(item.topic.toLocaleLowerCase() == topic.toLocaleLowerCase() ? 'tag-focus' : '')"
               :href="`/explore/repos?q=&topic=${item.topic}&sort=hot`" v-html="item.topicShow"></a>
@@ -187,9 +187,9 @@ export default {
 .content .title-r {
   display: flex;
   align-items: center;
-  font-size: 13px;
-  font-weight: bold;
-  color: rgb(26, 40, 51, 0.9);
+  font-weight: 400;
+  font-size: 12px;
+  color: rgba(26, 40, 51, 1);
   justify-content: flex-end;
 }
 

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

@@ -17,6 +17,7 @@
 <script>
 import ReposItem from '../components/ReposItem.vue';
 import { getReposListData } from '~/apis/modules/repos';
+import LetterAvatar from '~/utils/letteravatar';
 
 export default {
   name: "ReposList",
@@ -71,11 +72,7 @@ export default {
             }
           });
           this.total = res.Data.Total;
-          this.$nextTick(() => {
-            if (typeof LetterAvatar != 'undefined') {
-              LetterAvatar && LetterAvatar.transform();
-            }
-          });
+          LetterAvatar.transform();
         } else {
           this.list = [];
           this.total = 0;

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

@@ -142,6 +142,7 @@ export default {
       }
     },
     search() {
+      this.searchInputValue = this.searchInputValue.trim();
       if (this.type == 'square') {
         window.location.href = `/explore/repos?q=${this.searchInputValue}&sort=${this.sort}&topic=${this.selectTopic}`;
       } else {

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

@@ -37,6 +37,7 @@
 <script>
 import { getPromoteData } from '~/apis/modules/common';
 import { getReposSquareTabData } from '~/apis/modules/repos';
+import LetterAvatar from '~/utils/letteravatar';
 
 export default {
   name: "SquareTop",
@@ -95,21 +96,18 @@ export default {
     renderSwiper(data) {
       const swiperEl = document.getElementById("_repo_top_mid_repo");
       let html = '';
+      const width = swiperEl.parentNode.clientWidth;
       for (let i = 0, iLen = data.length; i < iLen; i++) {
         html += `<div class="swiper-slide">`;
         for (let j = i; j < i + 2; j++) {
           let dataJ = data[j];
           if (dataJ === undefined) break;
-          html += `<div class="_repo_sw_card">
-						<div class="_repo_sw_card_title _repo_nowrap"><a href="/${dataJ.OwnerName}/${dataJ.Name}" title="${dataJ.Alias}">${dataJ.Alias}</a></div>
-						<div class="_repo_sw_card_descr _repo_nowrap_line_2" title="${dataJ.Description}">${dataJ.Description}</div>
-						<div class="_repo_sw_card_label _repo_nowrap">`
-          const topics = dataJ.Topics || [];
-          for (let k = 0, kLen = topics.length; k < kLen; k++) {
-            html += `<span><a href="/explore/repos?q=&topic=${topics[k]}&sort=hot">${topics[k]}</a></span>`
-          }
-          html += `</div>
-          <a href="/${dataJ.OwnerName}/${dataJ.Name}" style="position:absolute;width:100%;height:100%;top:0;left:0;"></a>
+          html += `<div class="_repo_sw_card"><div style="display:flex;">
+            ${dataJ["Avatar"] ? `<img style="border-radius:100%;width:35px;height:35px;margin-bottom:0.6em;" class="left floated mini ui image" src="${dataJ["Avatar"]}">`
+              : `<img style="border-radius:100%;width:35px;height:35px;margin-bottom:0.6em;" class="left floated mini ui image" avatar="${dataJ["OwnerName"]}">`}
+                  <span class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;height:35px;line-height:35px;" href="javascript:;" title="${dataJ["Alias"]}">${dataJ["Alias"]}</span>
+						</div><div class="_repo_sw_card_descr _repo_nowrap_line_3" title="${dataJ.Description}">${dataJ.Description}</div>                   
+          <a href="/${dataJ.OwnerName}/${dataJ.Name}" style="position:absolute;width:100%;height:100%;top:0;left:0;"></a>         
 					</div>`;
         }
         html += `</div>`;
@@ -119,6 +117,7 @@ export default {
       swiperEl.innerHTML = html;
       this.swiperHandler.updateSlides();
       this.swiperHandler.updateProgress();
+      LetterAvatar.transform();
     },
     getBannerData() {
       getPromoteData('/repos/square_banner').then(res => {
@@ -290,7 +289,7 @@ img:not([src]) {
   border-width: 1px;
   border-style: solid;
   font-size: 14px;
-  padding: 10px;
+  padding: 12px;
   background: rgba(255, 255, 255, 0.6);
   margin-bottom: 20px;
   box-sizing: border-box;
@@ -303,7 +302,7 @@ img:not([src]) {
   white-space: nowrap;
 }
 
-/deep/._repo_nowrap_line_2 {
+/deep/._repo_nowrap_line_3 {
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
@@ -311,8 +310,8 @@ img:not([src]) {
   color: rgb(136, 136, 136);
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  max-height: 45px;
+  -webkit-line-clamp: 3;
+  max-height: 65px;
   white-space: break-spaces;
 }
 
@@ -337,6 +336,9 @@ img:not([src]) {
 /deep/._repo_sw_card_label {
   color: rgb(26, 40, 51);
   font-size: 14px;
+  display: flex;
+  width: 100%;
+  position: relative;
 }
 
 /deep/._repo_sw_card_label span {
@@ -344,6 +346,7 @@ img:not([src]) {
   background: rgba(232, 232, 232, 0.6);
   padding: 0px 6px 2px;
   margin-right: 10px;
+  max-width: 50%;
 }
 
 /deep/._repo_top_mid_repo_list .swiper-pagination-bullet {

web_src/vuepages/utils/letteravatar.js

@@ -0,0 +1,75 @@
+
+function LetterAvatar(name, size, color) {
+  name = name || "";
+  size = size || 60;
+  var colours = [
+    "#1abc9c",
+    "#2ecc71",
+    "#3498db",
+    "#9b59b6",
+    "#34495e",
+    "#16a085",
+    "#27ae60",
+    "#2980b9",
+    "#8e44ad",
+    "#2c3e50",
+    "#f1c40f",
+    "#e67e22",
+    "#e74c3c",
+    "#00bcd4",
+    "#95a5a6",
+    "#f39c12",
+    "#d35400",
+    "#c0392b",
+    "#bdc3c7",
+    "#7f8c8d",
+  ],
+    nameSplit = String(name).split(" "),
+    initials,
+    charIndex,
+    colourIndex,
+    canvas,
+    context,
+    dataURI;
+  if (nameSplit.length == 1) {
+    initials = nameSplit[0] ? nameSplit[0].charAt(0) : "?";
+  } else {
+    initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
+  }
+  let initials1 = initials.toUpperCase();
+  if (window.devicePixelRatio) {
+    size = size * window.devicePixelRatio;
+  }
+
+  charIndex = (initials == "?" ? 72 : initials.charCodeAt(0)) - 64;
+  colourIndex = charIndex % 20;
+  canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  context = canvas.getContext("2d");
+
+  context.fillStyle = color ? color : colours[colourIndex - 1];
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.font = Math.round(canvas.width / 2) + "px 'Microsoft Yahei'";
+  context.textAlign = "center";
+  context.fillStyle = "#FFF";
+  context.fillText(initials1, size / 2, size / 1.5);
+  dataURI = canvas.toDataURL();
+  canvas = null;
+  return dataURI;
+}
+
+LetterAvatar.transform = function () {
+  Array.prototype.forEach.call(
+    document.querySelectorAll("img[avatar]"),
+    function (img, name, color) {
+      name = img.getAttribute("avatar");
+      color = img.getAttribute("color");
+      img.src = LetterAvatar(name, img.getAttribute("width"), color);
+      img.removeAttribute("avatar");
+      img.setAttribute("alt", name);
+    }
+  );
+};
+
+export default LetterAvatar;