细节优化——1

frontend/src/components/CommentList.vue

@@ -6,31 +6,45 @@
         <el-button v-if="canComment" type="primary" size="small" @click="showInput = !showInput">新增</el-button>
       </div>
     </template>
-    <div v-if="showInput" class="input-area">
-      <el-input v-model="newComment" type="textarea" rows="3" placeholder="输入评论" />
-      <div class="actions">
-        <el-button size="small" @click="showInput = false">取消</el-button>
-        <el-button size="small" type="primary" :loading="loading" @click="submit">提交</el-button>
-      </div>
-    </div>
-    <el-timeline>
-      <el-timeline-item v-for="c in comments" :key="c.id" :timestamp="displayDateTime(c.created_at)">
-        <div class="comment-item">
-          <strong>{{ displayUser(c.created_by, { users: userMap, members: memberMap }) }}</strong>
-          <p>{{ c.content }}</p>
-        </div>
-      </el-timeline-item>
-    </el-timeline>
+    <ThreadComposer
+      v-if="showInput"
+      v-model="newComment"
+      v-model:file-list="fileList"
+      :submitting="loading || uploading"
+      :quote-item="quoteComment"
+      :member-map="memberMap"
+      :user-map="userMap"
+      :allow-attachments="true"
+      show-cancel
+      @submit="submit"
+      @cancel="showInput = false"
+      @clear-quote="clearQuote"
+    />
+    <ThreadList
+      :items="comments"
+      :attachments-map="attachmentsMap"
+      :member-map="memberMap"
+      :user-map="userMap"
+      :can-quote="canComment"
+      :can-delete="canDelete"
+      @quote="setQuote"
+      @delete="remove"
+    />
   </el-card>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { ElMessage } from "element-plus";
-import { fetchComments, createComment } from "../api/comments";
+import { ElMessage, ElMessageBox } from "element-plus";
+import type { UploadUserFile } from "element-plus";
+import { fetchComments, createComment, deleteComment } from "../api/comments";
+import { fetchAttachments, uploadAttachment } from "../api/attachments";
 import { useStudyStore } from "../store/study";
+import { useAuthStore } from "../store/auth";
 import { listMembers } from "../api/members";
-import { displayDateTime, displayUser, getMemberDisplayName } from "../utils/display";
+import { getMemberDisplayName } from "../utils/display";
+import ThreadComposer from "./ThreadComposer.vue";
+import ThreadList from "./ThreadList.vue";
 
 interface Props {
   studyId: string;
@@ -45,7 +59,12 @@ const loading = ref(false);
 const newComment = ref("");
 const showInput = ref(false);
 const study = useStudyStore();
+const auth = useAuthStore();
 const members = ref<any[]>([]);
+const quoteComment = ref<any | null>(null);
+const fileList = ref<UploadUserFile[]>([]);
+const attachmentsMap = ref<Record<string, any[]>>({});
+const uploading = ref(false);
 
 const load = async () => {
   if (!props.studyId) return;
@@ -53,6 +72,7 @@ const load = async () => {
   try {
     const { data } = await fetchComments(props.studyId, props.entityType, props.entityId);
     comments.value = data.items || data || [];
+    await loadAttachments();
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || "评论加载失败");
   } finally {
@@ -77,6 +97,13 @@ const memberMap = computed(() =>
     return acc;
   }, {})
 );
+const userMap = computed(() => {
+  const map: Record<string, string> = {};
+  if (auth.user?.id) {
+    map[auth.user.id] = auth.user.display_name || auth.user.username || auth.user.email || auth.user.id;
+  }
+  return map;
+});
 
 const submit = async () => {
   if (!newComment.value.trim()) {
@@ -86,9 +113,26 @@ const submit = async () => {
   if (!study.currentStudy) return;
   loading.value = true;
   try {
-    await createComment(study.currentStudy.id, props.entityType, props.entityId, { content: newComment.value });
+    const { data } = await createComment(study.currentStudy.id, props.entityType, props.entityId, {
+      content: newComment.value,
+      quote_comment_id: quoteComment.value?.id || null,
+    });
+    const created = data as any;
+    if (fileList.value.length && created?.id) {
+      uploading.value = true;
+      try {
+        for (const file of fileList.value) {
+          if (!file.raw) continue;
+          await uploadAttachment(study.currentStudy.id, "comments", created.id, file.raw as File);
+        }
+      } finally {
+        uploading.value = false;
+      }
+    }
     ElMessage.success("提交成功");
     newComment.value = "";
+    quoteComment.value = null;
+    fileList.value = [];
     showInput.value = false;
     load();
   } catch (e: any) {
@@ -98,6 +142,53 @@ const submit = async () => {
   }
 };
 
+const setQuote = (comment: any) => {
+  quoteComment.value = comment;
+  showInput.value = true;
+};
+
+const clearQuote = () => {
+  quoteComment.value = null;
+};
+
+const canDelete = (comment: any) => auth.user?.role === "ADMIN" || comment?.created_by === auth.user?.id;
+
+const remove = async (comment: any) => {
+  if (!study.currentStudy || !comment?.id) return;
+  const ok = await ElMessageBox.confirm("确认删除该评论？", "提示").catch(() => null);
+  if (!ok) return;
+  try {
+    await deleteComment(study.currentStudy.id, props.entityType, props.entityId, comment.id);
+    ElMessage.success("评论已删除");
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "删除失败");
+  }
+};
+
+const loadAttachments = async () => {
+  if (!props.studyId || comments.value.length === 0) {
+    attachmentsMap.value = {};
+    return;
+  }
+  const entries = await Promise.all(
+    comments.value.map(async (c) => {
+      try {
+        const { data } = await fetchAttachments(props.studyId, "comments", c.id);
+        const items = (data as any).items || data || [];
+        return [c.id, items] as const;
+      } catch {
+        return [c.id, []] as const;
+      }
+    })
+  );
+  const next: Record<string, any[]> = {};
+  entries.forEach(([id, items]) => {
+    next[id] = items;
+  });
+  attachmentsMap.value = next;
+};
+
 onMounted(() => {
   loadMembers();
   load();
@@ -110,16 +201,4 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
 }
-.input-area {
-  margin-bottom: 12px;
-}
-.actions {
-  margin-top: 8px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-.comment-item p {
-  margin: 4px 0 0;
-}
 </style>