修复前后端显示异常问题（受试者、中心、负责人、日期等）

frontend/src/components/CommentList.vue

@@ -14,9 +14,9 @@
       </div>
     </div>
     <el-timeline>
-      <el-timeline-item v-for="c in comments" :key="c.id" :timestamp="c.created_at">
+      <el-timeline-item v-for="c in comments" :key="c.id" :timestamp="displayDateTime(c.created_at)">
         <div class="comment-item">
-          <strong>{{ c.created_by }}</strong>
+          <strong>{{ displayUser(c.created_by, { users: userMap, members: memberMap }) }}</strong>
           <p>{{ c.content }}</p>
         </div>
       </el-timeline-item>
@@ -25,10 +25,12 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { fetchComments, createComment } from "../api/comments";
 import { useStudyStore } from "../store/study";
+import { listMembers } from "../api/members";
+import { displayDateTime, displayUser } from "../utils/display";
 
 interface Props {
   studyId: string;
@@ -43,6 +45,7 @@ const loading = ref(false);
 const newComment = ref("");
 const showInput = ref(false);
 const study = useStudyStore();
+const members = ref<any[]>([]);
 
 const load = async () => {
   if (!props.studyId) return;
@@ -57,6 +60,24 @@ const load = async () => {
   }
 };
 
+const loadMembers = async () => {
+  if (!props.studyId) return;
+  try {
+    const { data } = await listMembers(props.studyId, { limit: 500 });
+    members.value = Array.isArray(data) ? data : data.items || [];
+  } catch {
+    members.value = [];
+  }
+};
+
+const memberMap = computed(() =>
+  members.value.reduce<Record<string, string>>((acc, cur) => {
+    const username = cur?.user?.display_name || cur?.user?.username || cur?.username;
+    if (cur?.user_id) acc[cur.user_id] = username || cur.user_id;
+    return acc;
+  }, {})
+);
+
 const submit = async () => {
   if (!newComment.value.trim()) {
     ElMessage.warning("请输入评论");
@@ -77,7 +98,10 @@ const submit = async () => {
   }
 };
 
-onMounted(() => load());
+onMounted(() => {
+  loadMembers();
+  load();
+});
 </script>
 
 <style scoped>