【代码优化 11608】 refactor: 重构相关组件内容

src/components/common/Comment/index.vue

@@ -6,66 +6,18 @@
         <span class="text-lg font-semibold text-gray-800">评论 ({{ total }})</span>
         <div class="flex items-center gap-2">
           <button
+            v-for="sortOption in commentSortOptions"
+            :key="sortOption.value"
             class="cursor-pointer px-3 py-1.5 text-sm transition-all relative"
-            @click="((searchParams.sortType = CommentSortTypeEnum.MOST_LIKE), refresh())"
+            @click="handleChangeSort(sortOption.value)"
             :class="{
-              'text-indigo-600 font-medium':
-                searchParams.sortType === CommentSortTypeEnum.MOST_LIKE,
-              'text-gray-600 hover:text-gray-900':
-                searchParams.sortType !== CommentSortTypeEnum.MOST_LIKE,
+              'text-indigo-600 font-medium': searchParams.sortType === sortOption.value,
+              'text-gray-600 hover:text-gray-900': searchParams.sortType !== sortOption.value,
             }"
           >
-            最高点赞
+            {{ sortOption.label }}
             <span
-              v-if="searchParams.sortType === CommentSortTypeEnum.MOST_LIKE"
-              class="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
-            ></span>
-          </button>
-          <button
-            class="cursor-pointer px-3 py-1.5 text-sm transition-all relative"
-            @click="((searchParams.sortType = CommentSortTypeEnum.MOST_COMMENT), refresh())"
-            :class="{
-              'text-indigo-600 font-medium':
-                searchParams.sortType === CommentSortTypeEnum.MOST_COMMENT,
-              'text-gray-600 hover:text-gray-900':
-                searchParams.sortType !== CommentSortTypeEnum.MOST_COMMENT,
-            }"
-          >
-            最多评论
-            <span
-              v-if="searchParams.sortType === CommentSortTypeEnum.MOST_COMMENT"
-              class="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
-            ></span>
-          </button>
-          <button
-            class="cursor-pointer px-3 py-1.5 text-sm transition-all relative"
-            @click="((searchParams.sortType = CommentSortTypeEnum.EARLIEST_PUBLISH), refresh())"
-            :class="{
-              'text-indigo-600 font-medium':
-                searchParams.sortType === CommentSortTypeEnum.EARLIEST_PUBLISH,
-              'text-gray-600 hover:text-gray-900':
-                searchParams.sortType !== CommentSortTypeEnum.EARLIEST_PUBLISH,
-            }"
-          >
-            最早发布
-            <span
-              v-if="searchParams.sortType === CommentSortTypeEnum.EARLIEST_PUBLISH"
-              class="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
-            ></span>
-          </button>
-          <button
-            class="cursor-pointer px-3 py-1.5 text-sm transition-all relative"
-            @click="((searchParams.sortType = CommentSortTypeEnum.NEWEST_PUBLISH), refresh())"
-            :class="{
-              'text-indigo-600 font-medium':
-                searchParams.sortType === CommentSortTypeEnum.NEWEST_PUBLISH,
-              'text-gray-600 hover:text-gray-900':
-                searchParams.sortType !== CommentSortTypeEnum.NEWEST_PUBLISH,
-            }"
-          >
-            最新发布
-            <span
-              v-if="searchParams.sortType === CommentSortTypeEnum.NEWEST_PUBLISH"
+              v-if="searchParams.sortType === sortOption.value"
               class="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
             ></span>
           </button>
@@ -554,6 +506,19 @@ const {
   },
   immediate,
 })
+
+const commentSortOptions = [
+  { label: '最高点赞', value: CommentSortTypeEnum.MOST_LIKE },
+  { label: '最多评论', value: CommentSortTypeEnum.MOST_COMMENT },
+  { label: '最早发布', value: CommentSortTypeEnum.EARLIEST_PUBLISH },
+  { label: '最新发布', value: CommentSortTypeEnum.NEWEST_PUBLISH },
+]
+
+const handleChangeSort = async (sortType: CommentSortTypeEnum) => {
+  searchParams.value.sortType = sortType
+  refresh()
+}
+
 const handleCurrentChange = async (e: number) => {
   await goToPage(e)
   handleBackTop()

src/views/questionDetail/index.vue

@@ -237,13 +237,15 @@
           <el-radio-group
             size="small"
             v-model="searchParams.sortType"
-            @change="(val) => changeSortType(val as number)"
+            @change="(val) => changeSortType(val as CommentSortTypeEnum)"
             fill="#3b82f6"
           >
-            <el-radio-button label="最多点赞" :value="CommentSortTypeEnum.MOST_LIKE" />
-            <el-radio-button label="最多评论" :value="CommentSortTypeEnum.MOST_COMMENT" />
-            <el-radio-button label="最早发布" :value="CommentSortTypeEnum.EARLIEST_PUBLISH" />
-            <el-radio-button label="最新发布" :value="CommentSortTypeEnum.NEWEST_PUBLISH" />
+            <el-radio-button
+              v-for="sortOption in answerSortOptions"
+              :key="sortOption.value"
+              :label="sortOption.label"
+              :value="sortOption.value"
+            />
           </el-radio-group>
           <!-- <span
             @click="changeSortType(2)"
@@ -525,7 +527,14 @@ const {
     })),
 })
 
-const changeSortType = (type: number) => {
+const answerSortOptions = [
+  { label: '最多点赞', value: CommentSortTypeEnum.MOST_LIKE },
+  { label: '最多评论', value: CommentSortTypeEnum.MOST_COMMENT },
+  { label: '最早发布', value: CommentSortTypeEnum.EARLIEST_PUBLISH },
+  { label: '最新发布', value: CommentSortTypeEnum.NEWEST_PUBLISH },
+]
+
+const changeSortType = (type: CommentSortTypeEnum) => {
   searchParams.value.sortType = type
   refresh()
 }