HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加其他数据/完善其他功能

Browse Source
This commit is contained in:
landaiqing
2023-07-06 21:51:28 +08:00
parent 5d0c1856a4
commit 18c6e28ba7
11 changed files with 90533 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/Project/ProjectDetail.vue
View File

@@ -12,14 +12,14 @@
</div>
<div class="PageContent">
<el-card class="box-card" style="border: none">
<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
<div style="display: flex;flex-direction: row;align-items: center;">
<div style="display: flex;flex-direction: row;justify-content: space-between">
<div style="display: flex;flex-direction: row;">
<el-avatar shape="square" :size="70" :src="projectIco"></el-avatar>
<div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px">
<span v-if="projectName" style="font-size: 30px;color: black;font-weight: bold;display: flex;justify-content: flex-start">
{{ projectName }}
</span>
<span style="font-size: 20px;color: rgb(107 114 128);">
<span style="display: flex;flex-direction:row;justify-content: flex-start;font-size: 20px;color: rgb(107 114 128);">
{{projectTitle}}
</span>
</div>
@@ -30,9 +30,10 @@
<span style="font-size: 14px;color: #6b7280;display: flex;justify-content: flex-start">
HelloGitHub 评分
</span>
<el-rate v-model="starValue" style="display: flex;justify-content: flex-start" disabled show-score></el-rate>
<el-rate v-model="totalStar" style="display: flex;justify-content: flex-start" disabled show-score text-color="#ff9900"
score-template="{value}"></el-rate>
<span style="font-size: 12px;color: #59A3A4;display: flex;justify-content: flex-start">
0 人评分
{{ commentNum }} 个评分
</span>
</div>
</div>
@@ -40,7 +41,7 @@
</div>
<div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between">
<div style="width: 250px;height: 60px;background-color: #59A3A4">
<img :src="'https://starchart.cc/'+projectName+'.svg'" style="width: 250px;height: 60px;">
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<el-dropdown>
@@ -48,8 +49,9 @@
访问<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><el-link :href="projectUrl">源码</el-link></el-dropdown-item>
<el-dropdown-item>下载</el-dropdown-item>
<el-dropdown-item><el-link :underline="false" @click="goTo(projectUrl)">源码</el-link></el-dropdown-item>
<el-dropdown-item> <el-link :underline="false" @click="goTo('https://github.com/'+projectName+'/releases')">官方下载</el-link></el-dropdown-item>
<el-dropdown-item> <el-link :underline="false">快速下载</el-link></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button v-show="isRouterAlive" v-if="Like===0" @click="addStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off" type="success">点 赞 {{startNum}}</el-button>
@@ -60,11 +62,11 @@
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;justify-content: space-between">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center" >
<span>开源</span><div style="width: 8px;height: 8px;background-color: #9ca3af;border-radius: 50px;margin-left: 5px"></div>
<span style="margin-left: 5px">Apache-2.0</span>
<span style="margin-left: 5px;color: #00b2ff">{{github.license}}</span>
</div>
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;">
<el-link icon="el-icon-chat-dot-square">评论</el-link>
<el-link icon="el-icon-share" style="margin-left: 5px">分享 </el-link>
<el-link :underline="false" @click="toComment('#comment')" icon="el-icon-chat-dot-square">评论</el-link>
<el-link :underline="false" @click="copyText" icon="el-icon-share" style="margin-left: 5px">分享 </el-link>
</div>
</div>
@@ -75,17 +77,18 @@
<table>
<tr>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">星数</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">中文</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">名称</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">主语言</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">活跃</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">贡献者</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">订阅者</th>
</tr>
<tr>
<td style="font-size: 20px;color: black;font-weight: bold">512</td>
<td style="font-size: 20px;color: black;font-weight: bold">是</td>
<td style="font-size: 20px;color: black;font-weight: bold">C++</td>
<td style="font-size: 20px;color: black;font-weight: bold">是</td>
<td style="font-size: 20px;color: black;font-weight: bold">28</td>
<td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.starNum)}}</td>
<td style="font-size: 20px;color: black;font-weight: bold;">{{briefName}}</td>
<td style="font-size: 20px;color: black;font-weight: bold">{{brief}}</td>
<td v-if="github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">是</td>
<td v-if="!github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">否</td>
<td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.subscribers_count)}}</td>
</tr>
</table>
</template>
@@ -94,16 +97,16 @@
<tr>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Issues</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">组织</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">最新版本</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">默认分支</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Forks</th>
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">协议</th>
</tr>
<tr>
<td style="font-size: 20px;color: black;font-weight: bold">4</td>
<td style="font-size: 20px;color: black;font-weight: bold">是</td>
<td style="font-size: 20px;color: black;font-weight: bold">1.6.7</td>
<td style="font-size: 20px;color: black;font-weight: bold">92</td>
<td style="font-size: 20px;color: black;font-weight: bold">Apache-2.0</td>
<td style="font-size: 20px;color: black;font-weight: bold">{{github.open_issues_count}}</td>
<td v-if="github.organization==='Organization'" style="font-size: 20px;color: black;font-weight: bold">是</td>
<td style="font-size: 20px;color: black;font-weight: bold">{{github.default_branch}}</td>
<td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.forks_count)}}</td>
<td style="font-size: 20px;color: black;font-weight: bold">{{github.license}}</td>
</tr>
</table>
</div>
@@ -136,7 +139,7 @@
<el-card class="box-card" style="margin-top: 10px;border: none">
<div slot="header" class="clearfix" style="display: flex;justify-content: flex-start">
<span style="font-size: 24px;font-weight: bold">评论</span>
<span id="comment" style="font-size: 24px;font-weight: bold">评论</span>
</div>
<div class="text item">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
@@ -297,7 +300,7 @@ export default {
data(){
return{
starValue:null,
activeNames: ['1'],
activeNames: [],
activeName:'first',
activeCommentName:'last',
loginDialogVisible:false,
@@ -315,6 +318,7 @@ export default {
projectTitle:null,
projectUrl:null,
startNum:null,
num:null,
projectDescription:null,
projectIco:null,
periodicals:null,
@@ -342,13 +346,29 @@ export default {
checked:false,
tabCheckedLast:true,
tabCheckedHot:false,
averageStarNum:0,
github:{
starNum:null,
language:'',
watchers_count:null,
subscribers_count:null,
allow_forking:null,
open_issues_count:null,
forks_count:null,
organization:null,
license:null,
name:'',
default_branch:null,
},
totalStar:3.7,
Content:'',
}
},
mounted() {
this.getProjectDetail();
this.getLastComment();
this.isStart();
},
watch: {
$route () {
@@ -358,6 +378,16 @@ export default {
}
},
methods:{
toComment(id){
document.querySelector(id).scrollIntoView(true)
var auchor=this.$el.querySelector(id)
document.body.scrollTop=auchor.offsetTop
},
goTo(url){
window.open(url);
},
goBack() {
window.history.go(-1);
},
@@ -372,7 +402,6 @@ export default {
id:this.$route.query.id
}
}).then(function (res) {
// console.log(res);
that.CategoryName=res.data.CategoryName;
that.projectName=res.data.project.projectName;
that.projectTitle=res.data.project.projectTitle;
@@ -383,7 +412,8 @@ export default {
that.periodicals=res.data.project.periodicals;
that.userId=res.data.project.userId;
that.projectId=res.data.project.projectId;
that.num=res.data.project.num;
that.getDetailByGitHub();
});
},
reload() {
@@ -405,6 +435,7 @@ export default {
trait:tab.name
}
}).then(function (res) {
console.log(res);
that.commentContent=res.data;
that.commentNum=Object.keys(that.commentContent).length;
if(tab.name==='last'){
@@ -457,10 +488,12 @@ export default {
});
}
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "请先登录！",
offset: 50
});
}
@@ -597,9 +630,73 @@ export default {
})
}
})
}
},
getDetailByGitHub(){
var that=this;
axios({
method: 'get',
// 请求的地址
url: '/api/'+this.projectName,
// URL 中的查询参数
params: {
}
}).then((res)=>{
// console.log(res)
that.github.starNum=res.data.stargazers_count;
that.github.language=res.data.language;
that.github.watchers_count=res.data.watchers_count;
that.github.subscribers_count=res.data.subscribers_count;
that.github.allow_forking=res.data.allow_forking;
that.github.open_issues_count=res.data.open_issues_count;
that.github.forks_count=res.data.forks_count;
that.github.organization=res.data.organization.type;
that.github.license=res.data.license.spdx_id;
that.github.name=res.data.name;
that.github.default_branch=res.data.default_branch;
});
},
copyText(){
this.Content=this.projectName+' : ' +this.projectTitle+', 更多详情尽在 : '+this.projectUrl;
var input = document.createElement("input"); // js创建一个input输入框
input.value = this.Content; // 将需要复制的文本赋值到创建的input输入框中
document.body.appendChild(input); // 将输入框暂时创建到实例里面
input.select(); // 选中输入框中的内容
document.execCommand("Copy"); // 执行复制操作
document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "项目信息已复制，快去分享吧~"),
type: 'success',
offset: 50
});
},
},
computed: {
// 对时间进行格式化
formatTime: function() {
if (this.projectLists) {
const dt = new Date(this.projectLists.submitTime)
const year=dt.getFullYear()
const month = dt.getMonth()
const date = dt.getDate()
return `${year}-${month}-${date}`
}
return '';
},
// 截取文章内容的前 35 个字，并加上省略号
brief: function() {
return this.github.language.substr(0, 7)+'...';
},
briefName: function() {
return this.github.name.substr(0, 7)+'...';
},
}