Refactor code structure and remove redundant changes

pages/chat-detail/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <KlNavTab />
+  <div class="ml-auto mr-auto mt-20px w1440 flex">
+    <div class="left box-border w-1019px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-42px py-30px">
+      <div class="title text-24px text-[#333333] font-bold">{{ channelDetail?.postsTitle }}</div>
+      <div class="mt-20px flex items-center justify-between border-b-1px border-b-[#eee] border-b-solid pb-14px">
+        <div class="flex items-center">
+          <img :src="channelDetail?.creatorAvatar" alt="" srcset="" class="h-50px w-49px rounded-full" />
+          <div class="ml-10px">
+            <div class="text-16px text-[#333333] font-normal">{{ channelDetail?.creatorName }}</div>
+            <div class="text-12px text-[#999999] font-normal">发表时间：{{ dayjs(channelDetail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+          </div>
+        </div>
+        <div class="mt-19px flex items-center justify-between">
+          <div class="flex items-center">
+            <img src="@/assets/images/look.png" alt="" srcset="" class="mr-4px h-17px" />
+            <span class="text-[#666666]">{{ channelDetail?.likeNum || 0 }}人赞过</span>
+            <div class="ml-16px flex items-center">
+              <img src="@/assets/images/add.png" alt="" class="mr-4px h-23px" />
+              <span class="text-[#666666]">{{ channelDetail?.commentNum || 0 }}评论</span>
+            </div>
+          </div>
+          <div class="ml-16px flex items-center">
+            <img src="@/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px" />
+            <span class="text-[#666666]">{{ channelDetail?.browseNum || 0 }}人看过</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <img :src="channelDetail?.postsCover" alt="" srcset="" class="h-396px w-auto" />
+        <div class="mt-20px text-14px text-[#333333] font-normal" v-html="channelDetail?.postsContent"></div>
+      </div>
+      <div class="mt-30px">
+        <div class="h-48px w-938px rounded-1px bg-[#F8F8F8] pl-10px text-16px text-[#333333] font-normal line-height-50px"
+          >共有{{ commentList.total || 0 }}条评论</div
+        >
+        <div v-for="item in commentList.list" :key="item.commentId" class="mt-10px border-b-1px border-b-[#eee] border-b-solid pb-14px">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <img :src="item.creatorAvatar" alt="" srcset="" class="relative top-12px h-50px w-49px rounded-full" />
+              <div class="ml-10px">
+                <span>{{ item.creatorName }}</span>
+              </div>
+            </div>
+            <div class="text-12px text-[#999999] font-normal">发表时间：{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+          </div>
+          <div class="ml-60px mt--10px box-border rd-4px bg-[#F8F8F8] pa-6px px-8px text-14px text-[#999999] font-normal">{{ item.content }}</div>
+        </div>
+        <!-- 添加element-plus分页 -->
+        <el-pagination
+          v-model:current-page="query.pageNo"
+          :page-size="query.pageSize"
+          layout="prev, pager, next"
+          :total="commentList.total"
+          class="mt-10px"
+          @current-change="handleCurrentChange"
+        />
+        <el-input v-model="commentContent" type="textarea" :rows="6" placeholder="请输入内容" class="mt-20px w-100%"></el-input>
+      </div>
+
+      <div>
+        <el-button type="primary" class="mt-10px h-40px w-101px rounded-4px text-16px text-[#FFFFFF] font-bold" @click="handleCreateComment"
+          >发表评论</el-button
+        >
+      </div>
+    </div>
+    <div class="right ml-23px w-100%">
+      <div class="mt-20px w-398px border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]">
+        <img src="@/assets/images/sign.png" alt="" srcset="" class="h-206px w-100%" />
+        <div class="box-border border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid border-t-none bg-[#FFFFFF] pa-18px">
+          <div class="mt-10px flex items-center">
+            <div class="text-18px text-[#333333] font-bold">王琦</div>
+            <div class="ml-10px box-border border border-[#1A65FF] rounded-13px border-solid px-8px py-3px color-#1a65ff">五金工具</div>
+            <div class="ml-10px box-border border border-[#1A65FF] rounded-13px border-solid px-8px py-3px color-#1a65ff">电子产品</div>
+          </div>
+          <div class="mt-10px text-14px text-[#333333] font-normal"
+            >你好！我是专注于工业设计和机械设计领域的专业设计师， 擅长进行外观设计、结构设计、钣金设计等各类工程设计 工作。我拥有丰富的经</div
+          >
+          <div class="mt-20px h-1px w-336px rounded-1px bg-[#EEEEEE]"></div>
+          <div class="mt-20px flex items-center">
+            <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
+            <span class="ml-10px text-16px">相关内容</span>
+          </div>
+          <div class="mt-10px">
+            <div v-for="item in 10" :key="item" class="flex items-center justify-between py-10px">
+              <div class="text-16px text-[#333333] font-normal">Microsoft .NET Framework</div>
+              <span class="color-##999999 ml-10px">11-12</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import dayjs from 'dayjs'
+  import { watch, ref, reactive } from 'vue'
+  import KlNavTab from '@/components/kl-nav-tab/index.vue'
+  import { useRoute } from 'vue-router'
+  import { getChannelDetail, postscommentpage, createPostsComment } from '@/api/channel'
+  import type { TGetChannelPostsRes, PageResultPostsCommentRespVO } from '@/api/channel/types'
+  const route = useRoute()
+  const channelId = route.query.channelId as string
+
+  const channelDetail = ref<TGetChannelPostsRes>()
+  const commentList = reactive<PageResultPostsCommentRespVO>({
+    list: [],
+    total: 0,
+  })
+  const getChannel = () => {
+    getChannelDetail({
+      id: channelId,
+    }).then((res) => {
+      if (res.code === 0) {
+        channelDetail.value = res.data
+      }
+    })
+  }
+  const query = reactive({
+    pageNo: 1,
+    pageSize: 4,
+  })
+  const getComment = () => {
+    postscommentpage({
+      postsId: channelId,
+      pageNo: query.pageNo,
+      pageSize: query.pageSize,
+    }).then((res) => {
+      if (res.code === 0) {
+        commentList.list = res.data.list
+        commentList.total = res.data.total
+      }
+    })
+  }
+  watch(
+    () => channelId,
+    (val) => {
+      if (val) {
+        getChannel()
+        getComment()
+      }
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  const commentContent = ref('')
+  const handleCreateComment = () => {
+    if (!commentContent.value) {
+      ElMessage.error('请输入评论内容')
+      return
+    }
+    createPostsComment({
+      postsId: channelId,
+      content: commentContent.value,
+    }).then((res) => {
+      if (res.code === 0) {
+        getComment()
+        commentContent.value = ''
+      }
+    })
+  }
+  const handleCurrentChange = (pageNo: number) => {
+    query.pageNo = pageNo
+    getComment()
+  }
+</script>