完善帖子内部展示样式，完善页面跳转，添加返回顶部按钮

my-project-frontend/package-lock.json

@@ -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",

my-project-frontend/package.json

@@ -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",

my-project-frontend/src/router/index.js

@@ -31,11 +31,18 @@ const router = createRouter({
                 {
                     path: '',
                     name: 'topics',
-                    component: () => import('@/views/forum/TopicList.vue')
+                    component: () => import('@/views/forum/Forum.vue'),
-                }, {
+                    children: [
-                    path: 'post-detail/:tid',
+                        {
-                    name: 'post-detail',
+                            path: '',
-                    component: () => import('@/views/forum/TopicDetail.vue')
+                            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',

my-project-frontend/src/views/forum/Forum.vue

@@ -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>

my-project-frontend/src/views/forum/TopicDetail.vue

@@ -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>

my-project-frontend/src/views/forum/TopicList.vue

@@ -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;