From e69bbb46b35de4f29bba82f118d89c27f9366b1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Tue, 4 Feb 2025 15:47:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/views/Article.vue             | 236 +++++++++---------
 .../home/components/RecommendTheme/index.vue  |   1 -
 2 files changed, 124 insertions(+), 113 deletions(-)

diff --git a/Yi.Bbs.Vue3/src/views/Article.vue b/Yi.Bbs.Vue3/src/views/Article.vue
index c9aaa756..8c877fd2 100644
--- a/Yi.Bbs.Vue3/src/views/Article.vue
+++ b/Yi.Bbs.Vue3/src/views/Article.vue
@@ -7,27 +7,29 @@
             <InfoCard header="文章信息" text="展开" hideDivider="true">
               <template #content>
                 <el-button
-                  style="width: 100%; margin-bottom: 0.8rem"
-                  @click="loadDiscuss(true)"
-                  >主题首页</el-button
+                    style="width: 100%; margin-bottom: 0.8rem"
+                    @click="loadDiscuss(true)"
+                >主题首页
+                </el-button
                 >
                 <el-button
-                  v-if="isAddArticle && isArticleUser"
-                  @click="addArticle('00000000-0000-0000-0000-000000000000')"
-                  type="primary"
-                  style="width: 100%; margin-bottom: 0.8rem; margin-left: 0"
-                  >添加子文章</el-button
+                    v-if="isAddArticle && isArticleUser"
+                    @click="addArticle('00000000-0000-0000-0000-000000000000')"
+                    type="primary"
+                    style="width: 100%; margin-bottom: 0.8rem; margin-left: 0"
+                >添加子文章
+                </el-button
                 >
                 <!--目录在这里 -->
-                <el-scrollbar  style="min-height: 410px">
+                <el-scrollbar style="min-height: 410px">
                   <TreeArticleInfo
-                    :data="articleData"
-                    @remove="delArticle"
-                    @update="updateArticle"
-                    @create="addNextArticle"
-                    @handleNodeClick="handleNodeClick"
-                    :currentNodeKey="currentNodeKey"
-                    :isArticleUser="isArticleUser"
+                      :data="articleData"
+                      @remove="delArticle"
+                      @update="updateArticle"
+                      @create="addNextArticle"
+                      @handleNodeClick="handleNodeClick"
+                      :currentNodeKey="currentNodeKey"
+                      :isArticleUser="isArticleUser"
                   />
                 </el-scrollbar>
               </template>
@@ -40,46 +42,46 @@
               </template>
             </InfoCard>
           </el-col>
-<!--          <el-col :span="24">-->
-<!--            <InfoCard :items="items" header="内容推荐" text="更多">-->
-<!--              <template #item="temp">-->
-<!--                <AvatarInfo />-->
-<!--              </template>-->
-<!--            </InfoCard>-->
-<!--          </el-col>-->
+          <!--          <el-col :span="24">-->
+          <!--            <InfoCard :items="items" header="内容推荐" text="更多">-->
+          <!--              <template #item="temp">-->
+          <!--                <AvatarInfo />-->
+          <!--              </template>-->
+          <!--            </InfoCard>-->
+          <!--          </el-col>-->
         </el-row>
       </el-col>
 
       <el-col :span="14">
         <el-row class="left-div">
           <el-col :span="24">
-            <Breadcrumb :breadcrumbsList="breadcrumbsList" class="breadcrumb" />
+            <Breadcrumb :breadcrumbsList="breadcrumbsList" class="breadcrumb"/>
             <!-- {{ discuss.user }} -->
             <AvatarInfo
-              :size="50"
-              :showWatching="true"
-              :time="discuss.creationTime"
-              :userInfo="discuss.user"
+                :size="50"
+                :showWatching="true"
+                :time="discuss.creationTime"
+                :userInfo="discuss.user"
             ></AvatarInfo>
             <!-- :userInfo="{nick:'qwe'} -->
-         
+
             <h2>{{ discuss.title }}</h2>
-            <h5 class="subtitle">{{discuss.introduction  }}</h5>
+            <h5 class="subtitle">{{ discuss.introduction }}</h5>
             <el-image
-              :preview-src-list="[getUrl(discuss.cover)]"
-              v-if="discuss.cover"
-              :src="getUrl(discuss.cover)"
-              style="width: 150px; height: 150px"
+                :preview-src-list="[getUrl(discuss.cover)]"
+                v-if="discuss.cover"
+                :src="getUrl(discuss.cover)"
+                style="width: 150px; height: 150px"
             />
-            <el-divider />
+            <el-divider/>
             <ArticleContentInfo
-              :code="discuss.content ?? ''"
+                :code="discuss.content ?? ''"
             ></ArticleContentInfo>
 
-            <el-divider class="tab-divider" />
+            <el-divider class="tab-divider"/>
 
             <el-space :size="10" :spacer="spacer">
-              <AgreeInfo :data="discuss" />
+              <AgreeInfo :data="discuss"/>
               <el-button icon="Star" text> 0</el-button>
               <el-button icon="Share" text> 分享</el-button>
               <el-button icon="Operation" text> 操作</el-button>
@@ -87,38 +89,40 @@
           </el-col>
 
           <el-col :span="24" class="comment">
-            <CommentInfo :isComment="isDisabledCreateComment" />
+            <CommentInfo :isComment="isDisabledCreateComment"/>
           </el-col>
         </el-row>
-        <BottomInfo />
+        <BottomInfo/>
       </el-col>
 
       <el-col :span="5">
         <el-row class="right-div">
           <el-col :span="24">
             <InfoCard
-              class="art-info-right"
-              header="主题信息"
-              text="更多"
-              hideDivider="true"
+                class="art-info-right"
+                header="主题信息"
+                text="更多"
+                hideDivider="true"
             >
               <template #content>
                 <div>
                   <ul class="art-info-ul">
                     <li>
                       <el-button
-                        type="primary"
-                        size="default"
-                        v-if="isEditTheme && isArticleUser"
-                        @click="updateHander(route.params.discussId)"
-                        >编辑</el-button
+                          type="primary"
+                          size="default"
+                          v-if="isEditTheme && isArticleUser"
+                          @click="updateHander(route.params.discussId)"
+                      >编辑
+                      </el-button
                       >
                       <el-button
-                        style="margin-left: 1rem"
-                        type="danger"
-                        v-if="isRemoveTheme && isArticleUser"
-                        @click="delHander(route.params.discussId)"
-                        >删除</el-button
+                          style="margin-left: 1rem"
+                          type="danger"
+                          v-if="isRemoveTheme && isArticleUser"
+                          @click="delHander(route.params.discussId)"
+                      >删除
+                      </el-button
                       >
                     </li>
                     <li>分类： <span>主题</span></li>
@@ -135,18 +139,19 @@
               <template #content>
                 <div>
                   <el-empty
-                    :image-size="100"
-                    style="padding: 20px 0"
-                    v-if="catalogueData.length == 0"
-                    description="无目录"
+                      :image-size="100"
+                      style="padding: 20px 0"
+                      v-if="catalogueData.length == 0"
+                      description="无目录"
                   />
                   <ul v-else class="art-info-ul">
                     <li v-for="(item, i) in catalogueData" :key="i">
                       <el-button
-                        style="width: 100%; justify-content: left"
-                        type="primary"
-                        text
-                        >{{ `${i + 1} ： ${item}` }}</el-button
+                          style="width: 100%; justify-content: left"
+                          type="primary"
+                          text
+                      >{{ `${i + 1} ： ${item}` }}
+                      </el-button
                       >
                     </li>
                   </ul>
@@ -155,62 +160,62 @@
             </InfoCard>
           </el-col>
           <el-col :span="24">
-            <InfoCard :items="themeList"  :isPadding="false" header="推荐主题" text="更多" height="500">
+            <InfoCard :items="themeList" :isPadding="false" header="推荐主题" text="更多" height="500">
               <template #item="temp">
                 <ThemeData :themeData="temp"/>
               </template>
             </InfoCard>
-<!--            <InfoCard :items="items" header="其他" text="更多">-->
-<!--              <template #item="temp">-->
-<!--                <AvatarInfo />-->
-<!--              </template>-->
-<!--            </InfoCard>-->
+            <!--            <InfoCard :items="items" header="其他" text="更多">-->
+            <!--              <template #item="temp">-->
+            <!--                <AvatarInfo />-->
+            <!--              </template>-->
+            <!--            </InfoCard>-->
           </el-col>
-<!--          <el-col :span="24">-->
-<!--            <InfoCard :items="items" header="其他" text="更多">-->
-<!--              <template #item="temp">-->
-<!--                <AvatarInfo />-->
-<!--              </template>-->
-<!--            </InfoCard>-->
-<!--          </el-col>-->
+          <!--          <el-col :span="24">-->
+          <!--            <InfoCard :items="items" header="其他" text="更多">-->
+          <!--              <template #item="temp">-->
+          <!--                <AvatarInfo />-->
+          <!--              </template>-->
+          <!--            </InfoCard>-->
+          <!--          </el-col>-->
         </el-row>
       </el-col>
     </el-row>
   </div>
 </template>
 <script setup>
-import { h, ref, onMounted, watch, computed } from "vue";
+import {h, ref, onMounted, watch, computed} from "vue";
 import AvatarInfo from "@/components/AvatarInfo.vue";
 import InfoCard from "@/components/InfoCard.vue";
 import ArticleContentInfo from "@/components/ArticleContentInfo.vue";
 import CommentInfo from "@/components/CommentInfo.vue";
 import BottomInfo from "@/components/BottomInfo.vue";
 import TreeArticleInfo from "@/components/TreeArticleInfo.vue";
-import { useRoute, useRouter } from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 import AgreeInfo from "@/components/AgreeInfo.vue";
-import { get as discussGet, del as discussDel } from "@/apis/discussApi.js";
+import {get as discussGet, del as discussDel} from "@/apis/discussApi.js";
 import {
   all as articleall,
   del as articleDel,
   get as articleGet,
 } from "@/apis/articleApi.js";
 import Breadcrumb from "@/components/Breadcrumb/index.vue";
-import { getPermission } from "@/utils/auth";
+import {getPermission} from "@/utils/auth";
 import useUserStore from "@/stores/user.js";
 import ThemeData from "@/views/home/components/RecommendTheme/index.vue";
-import {getRecommendedTopic,getAuthorTopic} from "@/apis/analyseApi";
+import {getRecommendedTopic, getAuthorTopic} from "@/apis/analyseApi";
 //数据定义
 const route = useRoute();
 const router = useRouter();
-const spacer = h(ElDivider, { direction: "vertical" });
+const spacer = h(ElDivider, {direction: "vertical"});
 //子文章数据
 const articleData = ref([]);
 //主题内容
 const discuss = ref({});
 //推荐主题
-const themeList=ref([]);
+const themeList = ref([]);
 //作者主题
-const authorList=ref([]);
+const authorList = ref([]);
 //封面url
 const getUrl = (str) => {
   return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`;
@@ -225,10 +230,10 @@ const catalogueData = ref([]);
 const breadcrumbsList = ref([]);
 const resultRouters = ["index", "discuss", "themeCover"];
 breadcrumbsList.value = route.matched[0].children
-  .filter((item) => resultRouters.includes(item.name))
-  .sort((a, b) => {
-    return resultRouters.indexOf(a.name) - resultRouters.indexOf(b.name);
-  });
+    .filter((item) => resultRouters.includes(item.name))
+    .sort((a, b) => {
+      return resultRouters.indexOf(a.name) - resultRouters.indexOf(b.name);
+    });
 
 // 当前文章名称
 const currentArticle = ref("");
@@ -242,9 +247,9 @@ const loadArticleData = async () => {
 //主题初始化
 const isDisabledCreateComment = ref(false);
 const isArticleUser = ref(false);
-const { isHasPermission: isAddArticle } = getPermission("bbs:article:add");
-const { isHasPermission: isEditTheme } = getPermission("bbs:discuss:update");
-const { isHasPermission: isRemoveTheme } = getPermission("bbs:discuss:del");
+const {isHasPermission: isAddArticle} = getPermission("bbs:article:add");
+const {isHasPermission: isEditTheme} = getPermission("bbs:discuss:update");
+const {isHasPermission: isRemoveTheme} = getPermission("bbs:discuss:del");
 const loadDiscuss = async (isRewrite) => {
   if (isRewrite) {
     //跳转路由
@@ -377,11 +382,11 @@ const delArticle = (node, data) => {
     });
   });
 };
-const loadThemeData =async () => {
+const loadThemeData = async () => {
   const {data: themeData} = await getRecommendedTopic();
   themeList.value = themeData;
 }
-const loadAuthorData=async () => {
+const loadAuthorData = async () => {
   const {data: authorData} = await getAuthorTopic(discuss.value.user.id);
   authorList.value = authorData;
 }
@@ -391,42 +396,49 @@ onMounted(async () => {
   await loadAuthorData();
   await loadThemeData();
 });
-
+//路由发送变化，重新加载
+watch(() => route.params, async () => {
+      await loadDiscuss();
+      await loadArticleData();
+      await loadAuthorData();
+      await loadThemeData();
+    }
+)
 
 watch(
-  () => currentArticle.value,
-  (val) => {
-    if (val !== "") {
-      breadcrumbsList.value[3] = {
-        name: "article",
-        path: "/article/:discussId",
-        meta: {
-          title: currentArticle.value,
-        },
-      };
+    () => currentArticle.value,
+    (val) => {
+      if (val !== "") {
+        breadcrumbsList.value[3] = {
+          name: "article",
+          path: "/article/:discussId",
+          meta: {
+            title: currentArticle.value,
+          },
+        };
+      }
     }
-  }
 );
 watch(
-  () => route.params.articleId,
-  async (val) => {
-    if (val === "") {
-      discuss.value = (await discussGet(route.params.discussId)).data;
+    () => route.params.articleId,
+    async (val) => {
+      if (val === "") {
+        discuss.value = (await discussGet(route.params.discussId)).data;
+      }
     }
-  }
 );
 </script>
 <style scoped lang="scss">
 
-.subtitle
-{
-  color:#999AAA;
+.subtitle {
+  color: #999AAA;
   margin: 0;
 }
 
 .article-box {
   width: 1500px;
   height: 100%;
+
   .comment {
     min-height: 40rem;
   }
diff --git a/Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue b/Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue
index eca0b105..120b1b10 100644
--- a/Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue
@@ -57,7 +57,6 @@ const seeNumLength = ref(props.themeData.seeNum.toString().length);
 
 const handleClickTheme = (id) => {
   router.push(`/article/${id}`);
-  router.go(0);
 };
 </script>