chore(论坛): 课程论坛查看详情时修改为在当前窗口展示

src/modules/bbs/components/PostItem.vue

@@ -5,6 +5,7 @@ import { useMapStore } from '@/stores/map'
 
 interface Props {
   data: PostItem
+  onClick?: (data: PostItem, e: Event) => boolean
 }
 const props = defineProps<Props>()
 
@@ -20,11 +21,17 @@ const username = $computed(() => {
   const user = props.data.sso_user
   return user.realname || user.nickname || user.username
 })
+
+function handleClick(data: PostItem, event: Event) {
+  if (props.onClick && !props.onClick(data, event)) {
+    event.preventDefault()
+  }
+}
 </script>
 
 <template>
   <section class="post-item">
-    <router-link :to="`/bbs/${data.id}`" target="_blank">
+    <router-link :to="`/bbs/${data.id}`" target="_blank" @click="handleClick(data, $event)">
       <div class="post-item-hd">
         <p class="post-item__type" :class="`type-${data.type}`">{{ typeText }}</p>
         <h2 class="post-item__title">{{ data.title }}<span class="is-hot" v-if="data.is_hot">热</span></h2>

src/modules/bbs/components/PostPinned.vue

@@ -5,6 +5,7 @@ import { getTopPostList } from '../api'
 interface Props {
   courseId?: string
   semesterId?: string
+  onClick?: (data: TopPostItem, e: Event) => boolean
 }
 
 const props = defineProps<Props>()
@@ -16,12 +17,22 @@ function fetchList() {
   })
 }
 onMounted(fetchList)
+
+function handleClick(data: TopPostItem, event: Event) {
+  if (props.onClick && !props.onClick(data, event)) {
+    event.preventDefault()
+  }
+}
 </script>
 
 <template>
   <section class="pined-post" v-if="list.length">
     <section class="pined-post-item" v-for="item in list" :key="item.id">
-      <router-link :to="`/bbs/${item.id}`" target="_blank" class="pined-post-item__inner">
+      <router-link
+        :to="`/bbs/${item.id}`"
+        target="_blank"
+        class="pined-post-item__inner"
+        @click="handleClick(item, $event)">
         <p class="t1">置顶</p>
         <p class="t2">{{ item.title }}</p>
         <p class="t3" v-if="!courseId">

src/modules/bbs/views/Index.vue

@@ -15,6 +15,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const PostForm = defineAsyncComponent(() => import('../components/PostForm.vue'))
+const PostView = defineAsyncComponent(() => import('./View.vue'))
 
 const { courses, courseValue, chapters } = useGetCourseList()
 const courseList = $computed(() => {
@@ -88,22 +89,36 @@ function handleRefetch() {
   appList?.refetch()
 }
 const postFormVisible = $ref(false)
+const clickRow = ref()
+let viewVisible = $ref(false)
+function handleView(data: any) {
+  clickRow.value = data
+  if (props.courseId && props.semesterId) {
+    viewVisible = true
+    return false
+  }
+  return true
+}
+function handleBack() {
+  viewVisible = false
+}
 </script>
 
 <template>
-  <AppList :filters="filters" v-bind="listOptions" ref="appList">
+  <AppList :filters="filters" v-bind="listOptions" ref="appList" v-show="!viewVisible">
     <template #header-prepend>
       <el-button round type="primary" @click="postFormVisible = true" style="margin-right: 30px">我要发帖</el-button>
     </template>
     <template #body="{ data }">
       <!-- 置顶帖子 -->
-      <PostPinned :courseId="courseId" :semesterId="semesterId"></PostPinned>
+      <PostPinned :courseId="courseId" :semesterId="semesterId" :onClick="handleView"></PostPinned>
       <template v-if="data.length">
-        <PostItem :data="item" v-for="item in data" :key="item.id"></PostItem>
+        <PostItem :data="item" v-for="item in data" :key="item.id" :onClick="handleView"></PostItem>
       </template>
       <el-empty description="暂无数据" v-else />
     </template>
   </AppList>
+  <PostView :id="clickRow.id" :onBack="handleBack" v-if="viewVisible && clickRow"></PostView>
   <PostForm
     :courseId="courseId"
     :semesterId="semesterId"

src/modules/bbs/views/View.vue

@@ -11,6 +11,7 @@ const DiscussForm = defineAsyncComponent(() => import('../components/DiscussForm
 
 interface Props {
   id: string
+  onBack?: () => void
 }
 const props = defineProps<Props>()
 const router = useRouter()
@@ -59,7 +60,7 @@ function toggleCollection() {
 
 // 返回列表
 function handleBack() {
-  router.replace('/bbs')
+  props.onBack ? props.onBack() : router.replace('/bbs')
 }
 </script>
 

src/modules/course/components/CourseViewBBS.vue

@@ -6,7 +6,21 @@ const courseId = route.query.course_id as string
 const semesterId = route.query.semester_id as string
 </script>
 <template>
-  <div style="margin: 0 -20px">
+  <div class="course-bbs">
     <BBSIndex :courseId="courseId" :semesterId="semesterId"></BBSIndex>
   </div>
 </template>
+
+<style lang="scss">
+.course-bbs {
+  padding-top: 10px;
+  .table-list-hd {
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  .table-list-bd {
+    padding: 0;
+  }
+}
+</style>

src/modules/course/views/CourseIndex.vue

@@ -74,5 +74,6 @@ log.upload({
 // 右侧
 .course-right {
   flex: 1;
+  overflow: hidden;
 }
 </style>