parent
8bf952c8ad
commit
fffaecb0a3
@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div class="author-box">
|
||||||
|
<img class="avatar" :src="author.avatar" @click="toProfile" />
|
||||||
|
<div class="nickname">{{ author.name }}</div>
|
||||||
|
<div class="stats">
|
||||||
|
<span>xx 关注</span>
|
||||||
|
<span>xx 粉丝</span>
|
||||||
|
<span>xx 帖子</span>
|
||||||
|
</div>
|
||||||
|
<div class="other-posts">
|
||||||
|
<h4>这是帖主的其他帖子</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
author: {
|
||||||
|
id: number,
|
||||||
|
name: string,
|
||||||
|
avatar: string,
|
||||||
|
bio: string,
|
||||||
|
},
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function toProfile() {
|
||||||
|
window.location.href = '/not-found'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.author-box {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nickname {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.other-posts {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
<template>
|
||||||
|
<div class="post-content">
|
||||||
|
<!-- 顶部信息 -->
|
||||||
|
<div class="post-header">
|
||||||
|
<img class="avatar" :src="post.author.avatar" @click="toProfile" />
|
||||||
|
<div class="info">
|
||||||
|
<div class="nickname">{{ post.author.name }}</div>
|
||||||
|
<div class="meta">发布日期 | IP 属地</div>
|
||||||
|
</div>
|
||||||
|
<button class="follow-btn btn-primary" @click="toProfile">+关注</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-divider />
|
||||||
|
|
||||||
|
<!-- markdown内容 -->
|
||||||
|
<MarkdownContent :content="post.content" />
|
||||||
|
|
||||||
|
<!-- 评论区 -->
|
||||||
|
<CommentInput />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { string } from 'yup';
|
||||||
|
import MarkdownContent from './PostContent/MarkdownContent.vue'
|
||||||
|
import CommentInput from './PostContent/CommentInput.vue'
|
||||||
|
import CommentList from './PostContent/CommentList.vue'
|
||||||
|
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
post: {
|
||||||
|
id:number,
|
||||||
|
title:string,
|
||||||
|
content:string,
|
||||||
|
author: {
|
||||||
|
id: number,
|
||||||
|
name: string,
|
||||||
|
avatar: string,
|
||||||
|
bio: string,
|
||||||
|
},
|
||||||
|
tags:string[],
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function toProfile() {
|
||||||
|
window.location.href = '/not-found'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.post-content{
|
||||||
|
.post-header {
|
||||||
|
display:flex;
|
||||||
|
min-height:70px;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-left: 15px;
|
||||||
|
|
||||||
|
.nickname {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
width:100px;
|
||||||
|
height:50px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right:50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<div class="comment-section">
|
||||||
|
<!-- 评论输入框 -->
|
||||||
|
<div class="comment-input">
|
||||||
|
<img class="avatar" src="@/assets/images/默认头像.jpg" @click="goToProfile" />
|
||||||
|
<input v-model="newComment" placeholder="发布友善的评论" />
|
||||||
|
<button @click="submitComment">
|
||||||
|
<i class="icon-send">📨</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评论操作栏 -->
|
||||||
|
<div class="action-bar">
|
||||||
|
<i class="icon">👍</i>
|
||||||
|
<i class="icon">📤</i>
|
||||||
|
<i class="icon">⭐</i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评论列表 -->
|
||||||
|
<div class="comment-list">
|
||||||
|
<CommentList
|
||||||
|
v-for="comment in comments"
|
||||||
|
:key="comment.id"
|
||||||
|
:comment="comment"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import CommentList from './CommentList.vue'
|
||||||
|
import Avatar from '@/assets/images/默认头像.jpg';
|
||||||
|
|
||||||
|
interface Comment {
|
||||||
|
id: number
|
||||||
|
user: string
|
||||||
|
avatar: string
|
||||||
|
content: string
|
||||||
|
date: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const newComment = ref('')
|
||||||
|
const comments = ref<Comment[]>([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
user: '其他用户昵称',
|
||||||
|
avatar: Avatar,
|
||||||
|
content: '这是一条评论……',
|
||||||
|
date: '日期时间 IP',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
user: '用户B',
|
||||||
|
avatar: Avatar,
|
||||||
|
content: '第二条评论',
|
||||||
|
date: '日期时间 IP',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
function goToProfile() {
|
||||||
|
window.location.href = '/not-found'
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitComment() {
|
||||||
|
if (!newComment.value.trim()) return
|
||||||
|
comments.value.push({
|
||||||
|
id: Date.now(),
|
||||||
|
user: '你',
|
||||||
|
avatar: Avatar,
|
||||||
|
content: newComment.value,
|
||||||
|
date: '刚刚',
|
||||||
|
})
|
||||||
|
newComment.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.comment-section {
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div class="comment-item">
|
||||||
|
<img class="avatar" :src="comment.avatar" @click="toProfile" />
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="user">{{ comment.user }}</div>
|
||||||
|
<div class="content">{{ comment.content }}</div>
|
||||||
|
<div class="meta">
|
||||||
|
<span class="date">{{ comment.date }}</span>
|
||||||
|
<span class="actions">
|
||||||
|
<i class="icon" title="点赞">👍</i>
|
||||||
|
<i class="icon" title="回复">💬</i>
|
||||||
|
<i class="icon" title="举报">🚩</i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
comment: {
|
||||||
|
id: number
|
||||||
|
user: string
|
||||||
|
avatar: string
|
||||||
|
content: string
|
||||||
|
date: string
|
||||||
|
}
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function toProfile() {
|
||||||
|
window.location.href = '/not-found'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
.comment-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-box {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.user {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<div class="post-sidebar">
|
||||||
|
<h2>分类</h2>
|
||||||
|
<ul class="top-tags">
|
||||||
|
<li v-for="tag in tags" :key="tag" @click="goTo(tag)">
|
||||||
|
{{ tag }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<el-divider />
|
||||||
|
|
||||||
|
<div class="sub-menu">
|
||||||
|
<div v-for="item in subs" :key="item" @click="goTo(item)">{{ item }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const tags = ['计算机学院', '遥感学院', '电子信息学院']
|
||||||
|
const subs = ['综合', '最新', '热度最高', '用户']
|
||||||
|
|
||||||
|
//临时跳转函数
|
||||||
|
function goTo(tag: string) {
|
||||||
|
// 临时跳转 NotFound
|
||||||
|
window.location.href = '/not-found'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.post-sidebar {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
.top-tags {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 0;
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 6px 0;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
&:hover {
|
||||||
|
font-size:20px;
|
||||||
|
color:#8a63d2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
margin-top: 24px;
|
||||||
|
div {
|
||||||
|
margin: 6px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
font-size:20px;
|
||||||
|
color:#8a63d2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue