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.
107 lines
2.2 KiB
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) 获取更多信息。
|
|
|
|
## 图片测试
|
|
|
|
|
|
`,
|
|
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> |