Refactor code structure and remove redundant changes

pages/channel/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <!-- 导航 -->
+  <KlNavTab active="交流频道" />
+  <div class="ma-auto mt-30px w-1440px flex">
+    <LeftContent v-model="pageReq.channelId"></LeftContent>
+    <RightContent v-model="pageRes" v-model:lun-tan-res="lunTanRes" v-model:page-no="pageReq.pageNo" @update-page-no="handleUpdatePageNo"></RightContent>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import KlNavTab from '@/components/kl-nav-tab/index.vue'
+  import LeftContent from './components/LeftContent.vue'
+  import RightContent from './components/RightContent.vue'
+  import { page, getChannelLunTanDetail } from '@/api/channel/index.ts'
+  import { reactive, watch, ref } from 'vue'
+  import { TpageRes, ChannelRespVO } from '@/api/channel/types'
+
+  const pageReq = reactive({
+    pageNo: 1,
+    pageSize: 10,
+    channelId: '', //  频道ID
+  })
+  const pageRes = reactive<TpageRes>({
+    list: [],
+    total: 0,
+  })
+  // 获得频道帖子分页
+  const getPage = () => {
+    page(pageReq).then((res) => {
+      pageRes.list = res.data.list
+      pageRes.total = res.data.total
+    })
+  }
+  getPage()
+
+  const handleUpdatePageNo = (pageNo: number) => {
+    pageReq.pageNo = pageNo
+    getPage()
+  }
+
+  // 获取论坛详情
+  const lunTanRes = ref({} as ChannelRespVO)
+  const getLunTanDetaiil = (val: string) => {
+    getChannelLunTanDetail({
+      id: val,
+    }).then((res) => {
+      lunTanRes.value = res.data
+    })
+  }
+
+  watch(
+    () => pageReq.channelId,
+    (val) => {
+      if (val) {
+        getPage()
+        getLunTanDetaiil(val)
+      }
+    }
+  )
+</script>
+
+<style lang="scss" scoped></style>