【需求 17679】 feat: 完成个人中心 评论回复页面

src/api/user/index.ts

@@ -113,3 +113,14 @@ export const getSelfTaskList = (data: PageSearchParams) => {
     data,
   })
 }
+
+/**
+ * 评论回复
+ */
+export const getSelfCommentList = (data: PageSearchParams) => {
+  return service.request({
+    url: '/api/personalCenter/selfComment',
+    method: 'POST',
+    data,
+  })
+}

src/constants/enums.ts

@@ -71,3 +71,11 @@ export enum TagLevelEnum {
   // 主标签
   MAIN_TAG = 1,
 }
+
+// 回复类型
+export enum CommentTypeEnum {
+  // 我评论别人的
+  COMMNET_TO_OTHER = 1,
+  // 别人评论我的
+  COMMNET_TO_SELF = 2,
+}

src/constants/options.ts

-import { ArticleTypeEnum, TaskTypeEnum } from './enums'
+import { ArticleTypeEnum, CommentTypeEnum, TaskTypeEnum } from './enums'
 
 // 地区列表
 export const regionListOptions = [
@@ -72,6 +72,18 @@ export const taskTypeListOptions = [
   },
 ]
 
+// 评论类型列表
+export const commentTypeListOptions = [
+  {
+    label: '我评论的',
+    value: CommentTypeEnum.COMMNET_TO_OTHER,
+  },
+  {
+    label: '评论我的',
+    value: CommentTypeEnum.COMMNET_TO_SELF,
+  },
+]
+
 // 等级相关内容
 export const levelListOptions: {
   label: string

src/views/userPage/components/selfComment.vue

+<template>
+  <div class="flex-1 flex flex-col" v-loading="loading">
+    <!-- List Container -->
+    <div class="flex-1 p-4 pt-1">
+      <el-tabs v-model="searchParams.messageType" @tab-change="toggleTab">
+        <el-tab-pane
+          v-for="tab in commentTypeListOptions"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        />
+      </el-tabs>
+
+      <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
+        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+          <el-icon class="text-2xl text-gray-300"><Document /></el-icon>
+        </div>
+        <div class="text-gray-500 text-lg mb-2">暂无内容</div>
+        <div class="text-gray-400 text-sm">{{ getEmptyText() }}</div>
+      </div>
+
+      <div v-else class="space-y-4">
+        <div
+          v-for="item in list"
+          :key="item.id"
+          class="flex items-center p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
+        >
+          <!-- Content -->
+          <div class="flex-1 min-w-0">
+            <div class="text-gray-900 font-medium truncate">{{ item.title }}</div>
+            <div class="text-gray-500 text-sm mt-1 truncate">
+              <span class="mr-2">
+                {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+              </span>
+              <span class="mr-2">浏览 {{ item.viewCount }}</span>
+              <span class="mr-2">点赞 {{ item.replyCount }}</span>
+              <span class="mr-2">评论 {{ item.collectionCount }}</span>
+              <span class="mr-2">收藏 {{ item.praiseCount }}</span>
+            </div>
+          </div>
+
+          <!-- Meta Info -->
+          <div class="flex items-center text-gray-400 text-sm ml-4">
+            <el-button type="primary" link>编辑</el-button>
+            <el-button type="danger" link>删除</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="list.length"
+      class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
+    >
+      <div class="pagination-wrapper bg-white rounded-xl shadow-sm border border-gray-100 p-3">
+        <el-pagination
+          v-model:current-page="searchParams.current"
+          v-model:page-size="searchParams.size"
+          @size-change="changePageSize"
+          @current-change="goToPage"
+          :page-sizes="[10, 20, 30, 40]"
+          layout="prev, pager, next, jumper, total"
+          :total="total"
+          class="custom-pagination"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Document } from '@element-plus/icons-vue'
+
+import { getSelfCommentList } from '@/api'
+import { usePageSearch } from '@/hooks'
+import { commentTypeListOptions } from '@/constants/options'
+import dayjs from 'dayjs'
+import { CommentTypeEnum } from '@/constants/enums'
+
+const toggleTab = (key: number) => {
+  searchParams.value.messageType = key
+  refresh()
+}
+
+// State
+const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
+  getSelfCommentList,
+  {
+    defaultParams: {
+      messageType: CommentTypeEnum.COMMNET_TO_OTHER,
+    },
+  },
+)
+
+// Computed
+const paginatedList = computed(() => {
+  const start = (searchParams.value.current - 1) * searchParams.value.size
+  const end = start + searchParams.value.size
+  return list.value.slice(start, end)
+})
+
+const getEmptyText = () => {
+  const emptyTexts: Record<string, string> = {
+    posts: '还没有发布任何帖子',
+    videos: '还没有上传任何视频',
+    questions: '还没有提出任何问题',
+    articles: '还没有发表任何专栏文章',
+    practice: '还没有分享任何实践经验',
+    interviews: '还没有参与任何专访',
+  }
+  return emptyTexts[searchParams.type] || '暂无数据'
+}
+</script>

src/views/userPage/index.vue

@@ -141,6 +141,7 @@ import SelfPublish from './components/selfPublish.vue'
 import SelfDraft from './components/selfDraft.vue'
 import SelfCase from './components/selfCase.vue'
 import SelfTask from './components/selfTask.vue'
+import SelfComment from './components/selfComment.vue'
 import { hasOfficialAccount } from '@/api'
 
 const editUserInfoRef = useTemplateRef<InstanceType<typeof EditUserInfo>>('editUserInfoRef')
@@ -164,6 +165,13 @@ const menuItems = [
   { key: 'praise', label: '我的点赞', icon: Pointer, component: SelfPraise, tab: '点赞' },
   { key: 'case', label: '我的案例库', icon: Collection, component: SelfCase, tab: '案例库' },
   { key: 'task', label: '我的任务', icon: Finished, component: SelfTask, tab: '任务' },
+  {
+    key: 'comment',
+    label: '评论回复',
+    icon: ChatDotRound,
+    component: SelfComment,
+    tab: '评论回复',
+  },
   { key: 'votes', label: '我的投票', icon: Trophy },
   { key: 'articles', label: '我的文章', icon: Document },
   { key: 'comments', label: '评论回复', icon: ChatDotRound },