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-05 12:29:40 +08:00
parent 03110a9b1e
commit dce2261a74
12 changed files with 432 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
src/components/Project/ProjectDetail.vue Normal file
View File

@@ -0,0 +1,433 @@
<template>
<div style="display:flex;flex-direction:row;flex-wrap: nowrap">
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
<div class="PageHeader">
<br/>
<el-page-header @back="goBack" style="justify-content: center;">
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
<div slot="content" style="font-size:23px;font-weight: 600;">
项目详情
</div>
</el-page-header>
</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;">
<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);">
{{projectTitle}}
</span>
</div>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between">
<el-divider direction="vertical" ></el-divider>
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-between">
<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>
<span style="font-size: 12px;color: #59A3A4;display: flex;justify-content: flex-start">
0 人评分
</span>
</div>
</div>
</div>
<div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between">
<div style="width: 250px;height: 60px;background-color: #59A3A4">
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<el-dropdown>
<el-button type="primary" style="height: 60px">
访问<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-menu>
</el-dropdown>
<el-button style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off">点 赞 {{startNum}}</el-button>
</div>
</div>
<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>
</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>
</div>
</div>
<div style="display: flex;margin-top: 20px">
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template slot="title">
<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>
</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>
</tr>
</table>
</template>
<div>
<table>
<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">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>
</tr>
</table>
</div>
</el-collapse-item>
</el-collapse>
</div>
<div>
<el-tabs v-model="activeName">
<el-tab-pane label="介绍" name="first">
<el-tiptap v-model="projectDescription" :readonly="true" :showMenubar="false" :extensions="extensions" />
<div style="display:flex;align-items: center;flex-direction: row;">
<span style="font-size: 14px;margin-top: 10px">收录于: </span><el-tag style="margin-left: 10px;margin-top: 10px" size="medium">第 {{periodicals}} 期</el-tag>
<div style="display: flex;flex-direction: row;margin-left: 10px;margin-top: 10px;align-items: center">
<span>标签: </span>
<div style="margin-left: 10px">
<el-tag v-for="(item,index) in CategoryName" :key="index" size="medium" style="margin-left: 10px">{{item}}</el-tag>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="代码" name="second">
<el-tiptap :readonly="true" :showMenubar="false" :extensions="extensions" />
</el-tab-pane>
</el-tabs>
</div>
</el-card>
<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>
</div>
<div class="text item">
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
<div style="width: 50px;height: 50px">
<el-avatar v-if="this.$cookie.get('username')!=null" :size="50">{{this.$cookie.get('username')}}</el-avatar>
<el-avatar v-if="this.$cookie.get('username')==null" :size="50">未登录</el-avatar>
</div>
<el-input
style="margin-left: 10px"
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
</div>
<div style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center;margin-top: 10px;justify-content: space-between">
<div style="display: flex;flex-direction: row">
<el-radio v-model="radio" label="0" style="margin-left: 60px">没用过</el-radio>
<el-radio v-model="radio" label="1" style="margin-left: -10px">用过</el-radio>
</div>
<el-divider direction="vertical"></el-divider>
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;margin-left: -500px">
<span>评 分:</span>
<el-rate
style="margin-left: 10px"
v-model="startValue"
show-text>
</el-rate>
</div>
<el-button type="primary" plain @click="publishComment">发布</el-button>
</div>
<el-divider></el-divider>
<div v-if="isRouterAlive" style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
<span style="font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
<el-button-group>
<el-button type="primary" icon="el-icon-star-on" size="small">最新</el-button>
<el-button type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>
</el-button-group>
</div>
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
<div style="display: flex;flex-direction: row">
<div style="width: 50px;height: 50px;">
<el-avatar :size="50">{{item.username}}</el-avatar>
</div>
<div style="display: flex;flex-direction: column;justify-content: space-between">
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
<span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
<span style="margin-left: 10px">评分: </span>
<el-rate
style="margin-left: 10px"
v-model="item.star" disabled>
</el-rate>
<span style="margin-left: 10px">
<el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
<el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
</span>
</div>
<div style="margin-left: 10px;margin-top: 5px">
<el-card style="border: none;text-align:left;">
<span>{{item.content}}</span>
</el-card>
</div>
<div style="display: flex;justify-content: flex-start;margin-left: 10px;margin-top: 5px">
<span style="font-size: 14px;color: #9ca3af">{{item.time}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
</div>
<RightTools></RightTools>
</div>
</template>
<script>
import axios from "axios";
import Vue from "vue";
import {
// 罗列出需要的功能按钮
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Strike,
ListItem,
BulletList,
OrderedList,
} from 'element-tiptap';
import RightTools from "@/components/Home/RightTools.vue";
export default {
name: "ProjectDetail",
components: {RightTools},
data(){
return{
starValue:null,
activeNames: ['1'],
activeName:'first',
loginDialogVisible:false,
editorOption: {
theme: 'bubble',
modules: {
toolbar: null,
},
},
textarea:'',
radio:'0',
startValue: 0,
CategoryName:null,
projectName:null,
projectTitle:null,
projectUrl:null,
startNum:null,
projectDescription:null,
projectIco:null,
periodicals:null,
userId:null,
projectId:null,
commentContent:[],
commentNum:0,
extensions: [
new Doc(),
new Text(),
new Paragraph(),
new Heading({ level: 5 }), // 支持多级标题，设置为5级
new Bold({ bubble: false }), // 在气泡菜单中渲染菜单按钮
new Underline({ bubble: false, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
new Italic(),
new Strike(),
new ListItem(),
new BulletList(),
new OrderedList(),
],
isRouterAlive:true,
}
},
mounted() {
this.getProjectDetail();
this.getComment();
},
watch: {
$route () {
if(this.$route.query.refresh){
this.getProjectDetail() //重新调用http请求实现页面的重新渲染
}
}
},
methods:{
goBack() {
window.history.go(-1);
},
getProjectDetail(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/selectProById',
// URL 中的查询参数
params: {
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;
that.projectUrl=res.data.project.projectUrl;
that.startNum=res.data.project.startNum;
that.projectDescription=res.data.project.projectDescription;
that.projectIco=res.data.project.projectIco;
that.periodicals=res.data.project.periodicals;
that.userId=res.data.project.userId;
that.projectId=res.data.project.projectId;
});
},
reload() {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
});
},
getComment(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentByPro',
// URL 中的查询参数
params: {
id:this.$route.query.id
}
}).then(function (res) {
that.commentContent=res.data;
that.commentNum=Object.keys(that.commentContent).length;
});
},
publishComment(){
var that=this;
if(this.$cookie.get('username')!=null){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/comment',
// URL 中的查询参数
params: {
id:that.$route.query.id,
star:that.startValue,
content:that.textarea,
isUsed: that.radio,
}
}).then(function (res) {
if (res.data.code === 200) {
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
that.getComment();
that.reload();
} else {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
}
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "你还未登录！",
offset: 50
});
}
},
}
}
</script>
<style scoped>
::v-deep .el-page-header__left{
left:-300px;
}
::v-deep .el-divider--vertical {
display: inline-block;
width: 1px;
height: auto;
margin: 0 8px;
vertical-align: middle;
position: relative;
}
::v-deep .el-collapse-item__header {
display: flex;
align-items: center;
height: 100px;
line-height: 48px;
background-color: #FFFFFF;
color: #303133;
cursor: pointer;
border-bottom: 1px solid #D0E0DB;
font-size: 13px;
font-weight: 500;
transition: border-bottom-color .3s;
outline: none;
}
::v-deep .ql-toolbar.ql-snow {
border: 1px solid #ccc;
box-sizing: border-box;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
padding: 8px;
display: none;
}
</style>