添加评论回复的楼中楼功能，移除过时的评论赏金功能 by wangzh12023 · Pull Request #37 · ShanghaitechGeekPie/coursebench-frontend

wangzh12023 · 2025-07-12T07:57:21Z

新功能

实现评论回复的楼中楼功能
- 支持对评论的评论，实现二级嵌套结构

移除内容

删除了原有的评论赏金功能：
- 移除前端赏金 UI 展示

待确认

评论回复的api接口以及数据传输格式的定义，详见useCommentReply.js，部分mock数据参考/src/composables/global/usePhantomData.js

HeZeBang

所有的在子页面 patch 的 mock 都是没有必要的，太过于侵入了。最佳实践是在各种 use... 获取数据的时候进行 patch，或更不侵入的应该是直接在用 useMuation 或者 useFetcher 这些接口调用的时候，做字符串网址匹配，并且 phantom 或者别的样例返回
常量应该放到统一的地方，例如 environment.js
login 等可以根据你的 Mock 来判断是否应该用真实数据，而不是强制写入
CommentCard 的底部由于新增了按钮，在响应式设计的时候在窄屏幕会有溢出问题，可以修改断点比例
新增的回复 UI 在回复楼中楼的时候有暗黑模式适应问题
评论回复缺少 mock，不能复现期望的结果
TeacherAll 少许粗糙，缺少分页，不过没关系

HeZeBang · 2025-07-12T16:37:08Z

src/views/User.vue

+
+    // 使用 mock 数据
+    if (mockDataManager.isEnabled()) {
+      status.profileLoading = false;
+      status.commentLoading = false;
+    }
+


没有必要

HeZeBang · 2025-07-12T16:37:32Z

src/views/TeacherDetails.vue

+
+    // 使用 mock 数据
+    if (mockDataManager.isEnabled()) {
+      status.loading = false;
+    }
+


Suggested change

// 使用 mock 数据

if (mockDataManager.isEnabled()) {

status.loading = false;

}

HeZeBang · 2025-07-12T16:38:37Z

src/views/Recent.vue

+
+    // 使用mock数据
+    if (mockDataManager.isEnabled()) {
+      commentText.value = mockDataManager.getData('comments');
+      status.commentLoading = false;
+    }
+


没有必要

Suggested change

// 使用mock数据

if (mockDataManager.isEnabled()) {

commentText.value = mockDataManager.getData('comments');

status.commentLoading = false;

}

HeZeBang · 2025-07-12T16:38:53Z

src/views/CourseAll.vue


+    // 使用 mock 数据
+    if (mockDataManager.isEnabled()) {
+      courseText.value = mockDataManager.getData('courses');
+      status.loading = false;
+    }


没有必要

Suggested change

// 使用 mock 数据

if (mockDataManager.isEnabled()) {

courseText.value = mockDataManager.getData('courses');

status.loading = false;

}

HeZeBang · 2025-07-12T16:39:09Z

src/views/Active.vue

+
+    // 使用 mock 数据
+    if (mockDataManager.isEnabled()) {
+      const mockActiveData = mockDataManager.getData('activeData');
+      status.loading = mockActiveData.loading;
+      status.errorMessage = mockActiveData.errorMessage;
+      status.success = mockActiveData.success;
+    }
+


没有必要

HeZeBang · 2025-07-12T16:55:04Z

src/components/courses/CommentReplyList.vue

+      <div v-if="!showAll && replies.length > displayLimit" class="mb-2">
+        <v-btn
+          text
+          small
+          color="primary"
+          @click="showAll = true"
+        >
+          查看全部 {{ replies.length }} 条回复
+          <v-icon small class="ml-1">{{ mdiChevronDown }}</v-icon>
+        </v-btn>
+      </div>


位置有点反直觉，我期望的是这个显示在最下面，否则有点反直觉。并且最下面有个最好渐隐的效果，可以用 css 中的 mask 或者 filter 实现。可以参考 CSDN 那种读到一半然后让你付费解锁那种的设计（x

位置已更新

HeZeBang · 2025-07-12T17:00:00Z

src/composables/courses/comment/useCommentReply.js

+    isError: false,
+  });
+
+  const replyMutation = useMutation('/comment/reply/post', {


缺少 mock，无法验证行为

HeZeBang · 2025-07-12T17:01:36Z

src/composables/global/useFetching.js

+      // mock数据
+      if (mockManager.shouldUseMock()) {
+        if (address.includes('/comment/recent')) {
+          return await mockManager.mockSuccess(mockManager.getMockData('comments'));
+        } else if (address.includes('/course/all')) {
+          return await mockManager.mockSuccess(mockManager.getMockData('courses'));
+        } else if (address.includes('/teacher/')) {
+          return await mockManager.mockSuccess(mockManager.getMockData('teachers')[0]);
+        }
+        // 默认返回空数据
+        return await mockManager.mockSuccess([]);
+      }


尝试把所有的 mock 都写到一个文件里，不要侵入别的文件，并且做好匹配（例如使用字典而不是连环的 if）

已移到mockService.js

HeZeBang · 2025-07-12T17:03:19Z

src/composables/users/useUser.js

+    // mock数据
+    if (mockDataManager.isEnabled()) {
+      const id = parseInt(route.params.id);
+      const mockUser = mockDataManager.getData('users').find(user => user.id === id) || mockDataManager.getData('userProfile');
+      useRefCopy(mockUser, userProfile);
+      userProfile.nickname = useUserName(userProfile);
+      userProfile.grade = gradeItems[userProfile.grade];
+      userProfile.year = userProfile.year === 0 ? '暂不透露' : userProfile.year;
+      status.profileLoading = false;
+      return;
+    }
+
+


用统一的 mock

已移到mockService.js

HeZeBang · 2025-07-12T17:03:51Z

src/views/TeacherAll.vue

@@ -1,7 +1,123 @@
 <template>
-  <v-container></v-container>
+  <div style="min-height: 100%">


少许粗糙，缺少分页，不过没关系

…23/coursebench-frontend into nested-comments-mock-v

wangzh12023

对于mock数据已移动到mockService.js同一管理，全局变量放入environments.js统一管理
修改了展开回复和收起回复的位置
修改了replyList的背景颜色
unresolved: 深色主题背景测试未测试(没看到怎么调深色背景，无法测试)
unresolved: api修改验证行为，目前待商榷如何验证

wangzh12023 added 3 commits July 12, 2025 14:35

feat: add nested comments feature

ea5ffcd

feat: add api for comments reply

b43350b

docs: update README

5d195e8

HeZeBang reviewed Jul 12, 2025

View reviewed changes

wangzh12023 added 11 commits July 13, 2025 10:06

fix: update phantomData

ca75a05

chore: update mock way

9b9f4c4

docs: update README

3106b38

chore: remove unused

7a37c95

chore: remove unused file

f1635ac

fix: import watch to fix comment show

884c870

feat(CommentReplyList.vue): update the position of replyList

68a7fb1

feat: update background color

9727c46

feat: update background color

515c5c6

Merge branch 'nested-comments-mock-v' of https://github.com/wangzh120…

4b18394

…23/coursebench-frontend into nested-comments-mock-v

fix: add remove item in useCouseDetails.js

84e06aa

wangzh12023 requested a review from HeZeBang July 13, 2025 04:14

wangzh12023 commented Jul 13, 2025

View reviewed changes

Conversation

wangzh12023 commented Jul 12, 2025

新功能

移除内容

待确认

Uh oh!

HeZeBang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wangzh12023 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants