You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
unilife/Front/vue-unilife/src/views/PostDetailPage.vue

107 lines
2.2 KiB

<template>
<div class = "flow-container">
<div class = "post-detail-page">
<!-- 左侧分类 包含分类 -->
<SidebarCategory class="sidebar card" />
<!-- 中间内容 帖子的具体内容-->
<PostContent :post="post" class="content card" />
<!-- 右侧作者信息 -->
<AuthorInfo class="author-info card" :author="post.author" />
</div>
</div>
</template>
<script setup lang = "ts">
import SidebarCategory from '@/components/PostDetailPage/SidebarCategory.vue'
import PostContent from '@/components/PostDetailPage/PostContent.vue'
import AuthorInfo from '@/components/PostDetailPage/AuthorInfor.vue'
import { useRoute } from 'vue-router'
import {ref, onMounted} from 'vue'
import Avatar from '@/assets/images/默认头像.jpg'
const route = useRoute()
const postId = ref<number>(parseInt(route.params.id as string))
const post = ref({
id: postId.value,
title: '帖子标题示例',
content: `
# 欢迎来到论坛!
这是一个使用 **Vue3** + **Vite** + **TypeScript** 搭建的论坛系统。
## 功能清单
- 支持 Markdown 渲染
- 高亮代码块
- 响应式布局
- 用户评论系统
## 示例代码
\`\`\`ts
function greet(name: string): string {
return \`Hello, \${name}!\`
}
console.log(greet('Vue'))
\`\`\`
## 引用与链接
> “学习不是人生的全部,但如果连学习都掌握不了,你还能做什么?”
请访问 [Vue 官方文档](https://vuejs.org) 获取更多信息。
## 图片测试
![Vue Logo](https://vuejs.org/images/logo.png)
`,
author: {
id: 1,
name: '张三',
avatar: Avatar,
bio: '一名热爱分享的大学生'
},
tags: ['Vue3', '论坛开发', '学习笔记']
})
// 可选:模拟异步获取
onMounted(() => {
// TODO: fetch(`/api/post/${postId.value}`) 替换为真实接口
})
</script>
<style scoped lang="scss">
.post-detail-page {
display:flex;
gap:16px;
.sidebar{
width:15%;
position:sticky;
height: fit-content;
border-radius: 8px;
padding: 16px;
flex-shrink: 0;
}
.content{
width: 60%;
padding: 16px;
border-radius: 8px;
}
.author-info{
width: 20%;
position:sticky;
flex-shrink:0;
height:fit-content;
border-radius: 8px;
padding: 16px;
}
}
</style>