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