xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复跳转刷新问题

Browse Source
This commit is contained in:
橙子
2025-02-04 15:47:59 +08:00
parent f203c53e19
commit e69bbb46b3
2 changed files with 124 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
Yi.Bbs.Vue3/src/views/Article.vue
View File

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

1
Yi.Bbs.Vue3/src/views/home/components/RecommendTheme/index.vue
View File

@@ -57,7 +57,6 @@ const seeNumLength = ref(props.themeData.seeNum.toString().length);
const handleClickTheme = (id) => { const handleClickTheme = (id) => {
router.push(`/article/${id}`); router.push(`/article/${id}`);
router.go(0);
}; };
</script> </script>