| @@ -622,20 +622,12 @@ function displayRepo(json){ | |||||
| for (var i = 0, iLen = repos.length; i < iLen; i++) { | for (var i = 0, iLen = repos.length; i < iLen; i++) { | ||||
| if (i >= 4) break; | if (i >= 4) break; | ||||
| var repo = repos[i]; | var repo = repos[i]; | ||||
| // <i class="ri-star-line"></i>${repo["NumStars"]}<i class="ri-git-branch-line am-ml-10"></i>${repo["NumForks"]}</span> <div class="ui tags nowrap am-mt-10"></div> | |||||
| html += `<div class="ui fluid card" style="border-radius:6px;"> | html += `<div class="ui fluid card" style="border-radius:6px;"> | ||||
| <div class="content"> | |||||
| ${repo["Avatar"] ? `<img class="left floated mini ui image" src="${repo["Avatar"]}">` : `<img class="left floated mini ui image" avatar="${repo["OwnerName"]}">`} | |||||
| <div class="content" style="position:relative;"> | |||||
| ${repo["Avatar"] ? `<img style="border-radius:100%;" class="left floated mini ui image" src="${repo["Avatar"]}">` : `<img style="border-radius:100%;" class="left floated mini ui image" avatar="${repo["OwnerName"]}">`} | |||||
| <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}" title="${repo["Alias"]}">${repo["Alias"]}</a> | <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}" title="${repo["Alias"]}">${repo["Alias"]}</a> | ||||
| <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div> | <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div> | ||||
| `; | |||||
| // if (repo["Topics"] != null) { | |||||
| // for(var j = 0; j < repo["Topics"].length; j++){ | |||||
| // var topic = repo["Topics"][j]; | |||||
| // var url = "/explore/repos?q=" + (topic) + "&topic=" | |||||
| // html += `<a class="ui small label topic" href=" ${url}">${topic}</a>`; | |||||
| // } | |||||
| // } | |||||
| <a href="/${repo["OwnerName"]}/${repo["Name"]}" style="height:100%;width:100%;position:absolute;left:0;top:0"></a>`; | |||||
| html += ` | html += ` | ||||
| </div> | </div> | ||||
| </div>`; | </div>`; | ||||
| @@ -315,8 +315,8 @@ const zh = { | |||||
| mostAiTasks: 'AI任务最多', | mostAiTasks: 'AI任务最多', | ||||
| mostModels: '模型最多', | mostModels: '模型最多', | ||||
| dataset: '数据集', | dataset: '数据集', | ||||
| model: '模型:', | |||||
| aiTask: 'AI任务:', | |||||
| model: '模型', | |||||
| aiTask: 'AI任务', | |||||
| updated: '最后更新于', | updated: '最后更新于', | ||||
| contributors: '贡献者', | contributors: '贡献者', | ||||
| searchRepositories: '搜项目', | searchRepositories: '搜项目', | ||||
| @@ -44,12 +44,13 @@ export default { | |||||
| for (var i = 0, iLen = repos.length; i < iLen; i++) { | for (var i = 0, iLen = repos.length; i < iLen; i++) { | ||||
| if (i >= 4) break; | if (i >= 4) break; | ||||
| var repo = repos[i]; | var repo = repos[i]; | ||||
| html += `<div class="ui fluid card"> | |||||
| <div class="content"> | |||||
| ${repo["Avatar"] ? `<img class="left floated mini ui image" src="${repo["Avatar"]}">` : `<img class="left floated mini ui image" avatar="${repo["OwnerName"]}">`} | |||||
| <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}" title="${repo["Alias"]}">${repo["Alias"]}</a> | |||||
| <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div> | |||||
| </div> | |||||
| html += `<div class="ui fluid card"> | |||||
| <div class="content"> | |||||
| ${repo["Avatar"] ? `<img style="border-radius: 100%;" class="left floated mini ui image" src="${repo["Avatar"]}">` : `<img style="border-radius: 100%;" class="left floated mini ui image" avatar="${repo["OwnerName"]}">`} | |||||
| <span class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="javascript:;" title="${repo["Alias"]}">${repo["Alias"]}</span> | |||||
| <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div> | |||||
| </div> | |||||
| <a style="position:absolute;height:100%;width:100%;" href="/${repo["OwnerName"]}/${repo["Name"]}"></a> | |||||
| </div>`; | </div>`; | ||||
| } | } | ||||
| html += '</div>' | html += '</div>' | ||||
| @@ -12,6 +12,16 @@ | |||||
| <span class="title-1"> / </span> | <span class="title-1"> / </span> | ||||
| <span class="title-2" v-html="data.NameShow"></span> | <span class="title-2" v-html="data.NameShow"></span> | ||||
| </a> | </a> | ||||
| <svg v-if="(data.IsPrivate || data.IsOwnerPrivate)" class="svg octicon-lock" width="15" height="15" | |||||
| aria-hidden="true"> | |||||
| <use xlink:href="#octicon-lock"></use> | |||||
| </svg> | |||||
| <svg v-if="data.IsFork" class="svg octicon-repo-forked" width="15" height="15" aria-hidden="true"> | |||||
| <use xlink:href="#octicon-repo-forked"></use> | |||||
| </svg> | |||||
| <svg v-if="data.IsMirror" class="svg octicon-repo-clone" width="15" height="15" aria-hidden="true"> | |||||
| <use xlink:href="#octicon-repo-clone"></use> | |||||
| </svg> | |||||
| </div> | </div> | ||||
| <span class="title-r"> | <span class="title-r"> | ||||
| <span class="t-item" :title="$t('repos.watch')"> | <span class="t-item" :title="$t('repos.watch')"> | ||||
| @@ -23,19 +33,19 @@ | |||||
| <span>{{ data.NumStars }}</span> | <span>{{ data.NumStars }}</span> | ||||
| </span> | </span> | ||||
| <span class="t-item" :title="$t('repos.fork')"> | <span class="t-item" :title="$t('repos.fork')"> | ||||
| <svg class="svg octicon-repo-forked" width="12" height="12" aria-hidden="true"> | |||||
| <svg class="svg octicon-repo-forked" width="13" height="13" aria-hidden="true"> | |||||
| <use xlink:href="#octicon-repo-forked"></use> | <use xlink:href="#octicon-repo-forked"></use> | ||||
| </svg> | </svg> | ||||
| <span>{{ data.NumForks }}</span></span> | <span>{{ data.NumForks }}</span></span> | ||||
| </span> | </span> | ||||
| </div> | </div> | ||||
| <div class="descr" v-html="data.DescriptionShow"></div> | |||||
| <div class="tags" v-if="data.Topics"> | |||||
| <div class="descr" v-show="data.DescriptionShow" v-html="data.DescriptionShow"></div> | |||||
| <div class="tags" v-show="data.Topics"> | |||||
| <a v-for="(item, index) in data.TopicsShow" :key="index" class="tag" | <a v-for="(item, index) in data.TopicsShow" :key="index" class="tag" | ||||
| :class="(item.topic.toLocaleLowerCase() == topic.toLocaleLowerCase() ? 'tag-focus' : '')" | :class="(item.topic.toLocaleLowerCase() == topic.toLocaleLowerCase() ? 'tag-focus' : '')" | ||||
| :href="`/explore/repos?q=&topic=${item.topic}&sort=hot`" v-html="item.topicShow"></a> | :href="`/explore/repos?q=&topic=${item.topic}&sort=hot`" v-html="item.topicShow"></a> | ||||
| </div> | </div> | ||||
| <div class="repo-datas"> | |||||
| <div class="repo-datas" v-show="(data.DatasetCnt > 0) || (data.ModelCnt > 0) || (data.AiTaskCnt > 0)"> | |||||
| <span class="repo-datas-item" v-show="(data.DatasetCnt > 0)"> | <span class="repo-datas-item" v-show="(data.DatasetCnt > 0)"> | ||||
| <i class="ri-stack-line"></i> | <i class="ri-stack-line"></i> | ||||
| <span class="label">{{ $t('repos.dataset') }}:</span> | <span class="label">{{ $t('repos.dataset') }}:</span> | ||||
| @@ -64,8 +74,9 @@ | |||||
| :style="{ backgroundColor: data.PrimaryLanguage.Color }"></i>{{ data.PrimaryLanguage.Language }}</span> | :style="{ backgroundColor: data.PrimaryLanguage.Color }"></i>{{ data.PrimaryLanguage.Language }}</span> | ||||
| </div> | </div> | ||||
| <div class="contributors"> | <div class="contributors"> | ||||
| <span class="contributors-count">{{ $t('repos.contributors') }} </span> | |||||
| <span> {{ data.TotalContributorCountShow }}</span> | |||||
| <span class="contributors-count" v-show="data.Contributors && data.Contributors.length"> | |||||
| {{ $t('repos.contributors') }} | |||||
| </span> | |||||
| <span class="contributors-avatar"> | <span class="contributors-avatar"> | ||||
| <a :href="item.UserName ? `/${item.UserName}` : `mailto:${item.Email}`" class="avatar-c" | <a :href="item.UserName ? `/${item.UserName}` : `mailto:${item.Email}`" class="avatar-c" | ||||
| v-for="(item, index) in data.Contributors" :key="index"> | v-for="(item, index) in data.Contributors" :key="index"> | ||||
| @@ -138,6 +149,7 @@ export default { | |||||
| width: 38px; | width: 38px; | ||||
| height: 38px; | height: 38px; | ||||
| margin-right: 10px; | margin-right: 10px; | ||||
| border-radius: 100%; | |||||
| } | } | ||||
| .content { | .content { | ||||
| @@ -169,13 +181,13 @@ export default { | |||||
| font-size: 18px; | font-size: 18px; | ||||
| color: rgba(16, 16, 16, 1); | color: rgba(16, 16, 16, 1); | ||||
| font-weight: bold; | font-weight: bold; | ||||
| margin-right: 3px; | |||||
| } | } | ||||
| .content .title-r { | .content .title-r { | ||||
| width: 240px; | |||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| font-size: 12px; | |||||
| font-size: 13px; | |||||
| font-weight: bold; | font-weight: bold; | ||||
| color: rgb(26, 40, 51, 0.9); | color: rgb(26, 40, 51, 0.9); | ||||
| justify-content: flex-end; | justify-content: flex-end; | ||||
| @@ -192,9 +204,10 @@ export default { | |||||
| } | } | ||||
| .content .descr { | .content .descr { | ||||
| font-weight: 300; | |||||
| font-size: 14px; | font-size: 14px; | ||||
| color: rgba(16, 16, 16, 0.8); | color: rgba(16, 16, 16, 0.8); | ||||
| margin-bottom: 12px; | |||||
| margin-bottom: 16px; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
| word-break: break-all; | word-break: break-all; | ||||
| @@ -228,7 +241,8 @@ export default { | |||||
| .content .repo-datas { | .content .repo-datas { | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| margin: 24px 0; | |||||
| margin-top: 20px; | |||||
| margin-bottom: 10px; | |||||
| } | } | ||||
| .content .repo-datas-item { | .content .repo-datas-item { | ||||
| @@ -257,6 +271,7 @@ export default { | |||||
| align-items: center; | align-items: center; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| border-top: 1px solid rgba(157, 197, 226, 0.2); | border-top: 1px solid rgba(157, 197, 226, 0.2); | ||||
| margin-top: 10px; | |||||
| padding-top: 10px; | padding-top: 10px; | ||||
| font-size: 12px; | font-size: 12px; | ||||
| color: rgba(16, 16, 16, 0.6); | color: rgba(16, 16, 16, 0.6); | ||||
| @@ -57,7 +57,6 @@ export default { | |||||
| } | } | ||||
| }); | }); | ||||
| const contributors = item.Contributors || []; | const contributors = item.Contributors || []; | ||||
| const contributorsCnt = item.TotalContributorCount <= 6 ? Math.min(contributors.length, item.TotalContributorCount) : item.TotalContributorCount; | |||||
| return { | return { | ||||
| ...item, | ...item, | ||||
| NameShow: this.handlerSearchStr(item.Alias, this.q), | NameShow: this.handlerSearchStr(item.Alias, this.q), | ||||
| @@ -68,7 +67,6 @@ export default { | |||||
| topicShow: this.handlerSearchStr(_item, this.q) | topicShow: this.handlerSearchStr(_item, this.q) | ||||
| } | } | ||||
| }), | }), | ||||
| TotalContributorCountShow: contributorsCnt <= 10 ? contributorsCnt.toString() : '10+', | |||||
| } | } | ||||
| }); | }); | ||||
| this.total = res.Data.Total; | this.total = res.Data.Total; | ||||
| @@ -34,11 +34,12 @@ | |||||
| :style="{ backgroundColor: topicColors[index % topicColors.length] }" v-for="(item, index) in topics" | :style="{ backgroundColor: topicColors[index % topicColors.length] }" v-for="(item, index) in topics" | ||||
| :key="index">{{ item.v }}</a> | :key="index">{{ item.v }}</a> | ||||
| <a v-if="type == 'search'" href="javascript:;" @click="changeTopic({ k: '', v: '' })" | <a v-if="type == 'search'" href="javascript:;" @click="changeTopic({ k: '', v: '' })" | ||||
| style="color:#40485b;font-weight:bold;" | |||||
| :style="{ backgroundColor: selectTopic == '' ? selectedColor : defaultColor }">{{ $t('repos.allFields') | |||||
| style="font-weight:bold;" | |||||
| :style="{ backgroundColor: selectTopic == '' ? selectedColor : defaultColor, color: selectTopic == '' ? 'white' : '#40485b' }">{{ | |||||
| $t('repos.allFields') | |||||
| }}</a> | }}</a> | ||||
| <a v-if="type == 'search'" href="javascript:;" @click="changeTopic(item)" style="color:#40485b;" | |||||
| :style="{ backgroundColor: selectTopic.toLocaleLowerCase() == item.k ? selectedColor : defaultColor }" | |||||
| <a v-if="type == 'search'" href="javascript:;" @click="changeTopic(item)" | |||||
| :style="{ backgroundColor: selectTopic.toLocaleLowerCase() == item.k ? selectedColor : defaultColor, color: selectTopic.toLocaleLowerCase() == item.k ? 'white' : '#40485b' }" | |||||
| v-for="(item, index) in topics" :key="index">{{ item.v }}</a> | v-for="(item, index) in topics" :key="index">{{ item.v }}</a> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -105,6 +105,7 @@ export default { | |||||
| html += `<span><a href="/explore/repos?q=&topic=${topics[k]}&sort=hot">${topics[k]}</a></span>` | html += `<span><a href="/explore/repos?q=&topic=${topics[k]}&sort=hot">${topics[k]}</a></span>` | ||||
| } | } | ||||
| html += `</div> | html += `</div> | ||||
| <a href="/${dataJ.OwnerName}/${dataJ.Name}" style="position:absolute;width:100%;height:100%;top:0;left:0;"></a> | |||||
| </div>`; | </div>`; | ||||
| } | } | ||||
| html += `</div>`; | html += `</div>`; | ||||
| @@ -276,6 +277,7 @@ img:not([src]) { | |||||
| background: rgba(255, 255, 255, 0.6); | background: rgba(255, 255, 255, 0.6); | ||||
| margin-bottom: 20px; | margin-bottom: 20px; | ||||
| box-sizing: border-box; | box-sizing: border-box; | ||||
| position: relative; | |||||
| } | } | ||||
| /deep/._repo_nowrap { | /deep/._repo_nowrap { | ||||
| @@ -303,13 +305,13 @@ img:not([src]) { | |||||
| /deep/._repo_sw_card_title { | /deep/._repo_sw_card_title { | ||||
| font-weight: 700; | font-weight: 700; | ||||
| font-size: 16px; | |||||
| font-size: 14px; | |||||
| color: rgba(26, 40, 51, 1); | color: rgba(26, 40, 51, 1); | ||||
| margin-bottom: 10px; | margin-bottom: 10px; | ||||
| } | } | ||||
| /deep/._repo_sw_card_descr { | /deep/._repo_sw_card_descr { | ||||
| font-size: 14px; | |||||
| font-size: 12px; | |||||
| color: rgba(80, 85, 89, 1); | color: rgba(80, 85, 89, 1); | ||||
| margin-bottom: 10px; | margin-bottom: 10px; | ||||
| min-height: 42px; | min-height: 42px; | ||||