完善帖子内部展示样式，完善页面跳转，添加返回顶部按钮
This commit is contained in:
parent
5a28eaf90a
commit
fce060dc82
9
my-project-frontend/package-lock.json
generated
9
my-project-frontend/package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"axios": "^1.4.0",
|
||||
"element-plus": "^2.3.9",
|
||||
"pinia": "^2.1.6",
|
||||
"quill-delta-to-html": "^0.12.1",
|
||||
"quill-image-resize-vue": "^1.0.4",
|
||||
"quill-image-super-solution-module": "^2.0.1",
|
||||
"vue": "^3.3.4",
|
||||
@ -1827,6 +1828,14 @@
|
||||
"lodash.isequal": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/quill-delta-to-html": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmmirror.com/quill-delta-to-html/-/quill-delta-to-html-0.12.1.tgz",
|
||||
"integrity": "sha512-QhpeMk9+5ge3HYbL5A0Ewz3pXCsbemqGvIF/kw5D6D4V68AtcUp7yt9xNUkzOk/0IQz43hKy3IkzBzRhLIE+oA==",
|
||||
"dependencies": {
|
||||
"lodash.isequal": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/quill-image-resize-vue": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmmirror.com/quill-image-resize-vue/-/quill-image-resize-vue-1.0.4.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"axios": "^1.4.0",
|
||||
"element-plus": "^2.3.9",
|
||||
"pinia": "^2.1.6",
|
||||
"quill-delta-to-html": "^0.12.1",
|
||||
"quill-image-resize-vue": "^1.0.4",
|
||||
"quill-image-super-solution-module": "^2.0.1",
|
||||
"vue": "^3.3.4",
|
||||
|
||||
@ -31,11 +31,18 @@ const router = createRouter({
|
||||
{
|
||||
path: '',
|
||||
name: 'topics',
|
||||
component: () => import('@/views/forum/TopicList.vue')
|
||||
}, {
|
||||
path: 'post-detail/:tid',
|
||||
name: 'post-detail',
|
||||
component: () => import('@/views/forum/TopicDetail.vue')
|
||||
component: () => import('@/views/forum/Forum.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'topics',
|
||||
component: () => import('@/views/forum/TopicList.vue')
|
||||
}, {
|
||||
path: 'post-detail/:tid',
|
||||
name: 'post-detail',
|
||||
component: () => import('@/views/forum/TopicDetail.vue')
|
||||
}
|
||||
]
|
||||
}, {
|
||||
path: 'user-setting',
|
||||
name: 'user-setting',
|
||||
|
||||
37
my-project-frontend/src/views/forum/Forum.vue
Normal file
37
my-project-frontend/src/views/forum/Forum.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
import {get} from "@/net";
|
||||
import {useStore} from "@/store";
|
||||
|
||||
const store = useStore()
|
||||
|
||||
get('/api/forum/types', data => {
|
||||
const array = []
|
||||
array.push({name: '全部', id: 0, color: 'linear-gradient(45deg, white, red, orange, gold, green, blue)'})
|
||||
data.forEach(d => array.push(d))
|
||||
store.forum.types = array
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="el-fade-in-linear" mode="out-in">
|
||||
<keep-alive include="TopicList">
|
||||
<component :is="Component" style="height: 100%"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
<el-backtop target=".main-content-page .el-scrollbar__wrap" :right="20" :bottom="20"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.topic-type {
|
||||
display: inline-block;
|
||||
border: solid 0.5px grey;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,16 @@
|
||||
<script setup>
|
||||
import {useRoute} from "vue-router";
|
||||
import {get} from "@/net";
|
||||
import {reactive} from "vue";
|
||||
import {computed, reactive} from "vue";
|
||||
import axios from "axios";
|
||||
import {ArrowLeft, Female, Male} from "@element-plus/icons-vue";
|
||||
import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
|
||||
import {useStore} from "@/store";
|
||||
import Card from "@/components/Card.vue";
|
||||
import router from "@/router";
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
const tid = route.params.tid
|
||||
|
||||
@ -11,13 +19,63 @@ const topic = reactive({
|
||||
comments: []
|
||||
})
|
||||
|
||||
get(`/api/forum/topic?tid=${tid}`, data => topic.value = data)
|
||||
get(`/api/forum/topic?tid=${tid}`, data => topic.data = data)
|
||||
|
||||
const content = computed(() => {
|
||||
const ops = JSON.parse(topic.data.content).ops
|
||||
const converter = new QuillDeltaToHtmlConverter(ops, { inlineStyles: true });
|
||||
return converter.convert();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="topic-page">
|
||||
<div class="topic-page" v-if="topic.data">
|
||||
<div class="topic-main" style="position: sticky;top: 0;z-index: 10">
|
||||
<card style="display: flex;width: 100%">
|
||||
<el-button type="info" :icon="ArrowLeft" size="small"
|
||||
round plain @click="router.push('/index')">返回列表</el-button>
|
||||
<div style="text-align: center;flex: 1;height: 25px;transform: translateY(-8px)">
|
||||
<div class="topic-type"
|
||||
:style="{color: store.findTypeById(topic.data.type)?.color+'DD',
|
||||
'border-color': store.findTypeById(topic.data.type)?.color+'EE',
|
||||
'background-color': store.findTypeById(topic.data.type)?.color+'22'}">
|
||||
{{ store.findTypeById(topic.data.type)?.name }}
|
||||
</div>
|
||||
<span style="margin-left: 5px;font-weight: bold">{{topic.data.title}}</span>
|
||||
<div style="font-size: 12px;color: grey">
|
||||
{{new Date(topic.data.time).toLocaleString()}}
|
||||
</div>
|
||||
</div>
|
||||
</card>
|
||||
</div>
|
||||
<div class="topic-main">
|
||||
|
||||
<div class="topic-main-left">
|
||||
<el-avatar :src="axios.defaults.baseURL + '/images' + topic.data.user.avatar"
|
||||
:size="60"></el-avatar>
|
||||
<div style="margin-left: 10px">
|
||||
<div style="font-weight: bold;font-size: 18px">
|
||||
{{topic.data.user.username}}
|
||||
<span style="color: hotpink" v-if="topic.data.user.gender">
|
||||
<el-icon><Female/></el-icon>
|
||||
</span>
|
||||
<span style="color: dodgerblue" v-if="topic.data.user.gender === false">
|
||||
<el-icon><Male/></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="desc">{{topic.data.user.email || '已隐藏电子邮件'}}</div>
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0"></el-divider>
|
||||
<div style="text-align: left;margin: 0 5px">
|
||||
<div class="desc">微信号: {{topic.data.user.wx}}</div>
|
||||
<div class="desc">QQ号: {{topic.data.user.qq}}</div>
|
||||
<div class="desc">手机号: {{topic.data.user.phone}}</div>
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0"></el-divider>
|
||||
<div class="desc" style="margin: 0 5px">{{topic.data.user.desc}}</div>
|
||||
</div>
|
||||
<div class="topic-main-right">
|
||||
<div class="topic-content" v-html="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -27,10 +85,37 @@ get(`/api/forum/topic?tid=${tid}`, data => topic.value = data)
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.topic-main {
|
||||
display: flex;
|
||||
border-radius: 7px;
|
||||
margin: 0 auto;
|
||||
background-color: var(--el-bg-color);
|
||||
width: 800px;
|
||||
|
||||
.topic-main-left {
|
||||
width: 200px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color);
|
||||
|
||||
.desc {
|
||||
font-size: 13px;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-main-right {
|
||||
width: 600px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.topic-content {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -61,12 +61,6 @@ function updateList() {
|
||||
topics.end = true
|
||||
})
|
||||
}
|
||||
get('/api/forum/types', data => {
|
||||
const array = []
|
||||
array.push({name: '全部', id: 0, color: 'linear-gradient(45deg, white, red, orange, gold, green, blue)'})
|
||||
data.forEach(d => array.push(d))
|
||||
store.forum.types = array
|
||||
})
|
||||
get('/api/forum/top-topic', data => topics.top = data)
|
||||
|
||||
function onTopicCreate() {
|
||||
@ -298,15 +292,6 @@ navigator.geolocation.getCurrentPosition(position => {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.topic-type {
|
||||
display: inline-block;
|
||||
border: solid 0.5px grey;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.topic-preview-content {
|
||||
font-size: 13px;
|
||||
color: grey;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user