feat: 添加修改评论功能

apps/web-antd/src/api/license/comment/index.ts

@@ -45,7 +45,7 @@ export function createComment(data: CommentApi.Comment) {
 
 /** 修改评论 */
 export function updateComment(data: CommentApi.Comment) {
-  return requestClient.post('/license/comment/update', data);
+  return requestClient.put('/license/comment/update', data);
 }
 
 /** 删除客户 */

apps/web-antd/src/locales/langs/en-US/comment.json

@@ -7,5 +7,8 @@
   "delete": "Delete",
   "comment": "Comment",
   "deleteCommentTitle": "Are you sure you want to delete this comment?",
-  "sortByTime": "Sort by Time"
+  "sortByTime": "Sort by Time",
+  "edit": "Edit",
+  "editComment": "Edit Comment",
+  "cancelEdit": "Cancel Edit"
 }

apps/web-antd/src/locales/langs/zh-CN/comment.json

@@ -7,5 +7,8 @@
   "delete": "删除",
   "comment": "评论",
   "deleteCommentTitle": "确定删除该条评论吗？",
-  "sortByTime": "按时间排序"
+  "sortByTime": "按时间排序",
+  "edit": "修改",
+  "editComment": "修改评论",
+  "cancelEdit": "取消修改"
 }

apps/web-antd/src/views/license/project/comment/child-comment.vue

@@ -39,16 +39,30 @@ const emit = defineEmits(['getCommentByProjectId']);
 const userStore = useUserStore();
 
 const isShowReply = ref<boolean>();
+const isShowEdit = ref<boolean>();
 const parentId = ref<number>();
+const commentType = ref<number>();
 const reply = (id: number) => {
   isShowReply.value = !isShowReply.value;
   parentId.value = id;
+  isShowEdit.value = false;
+};
+
+const edit = (id: number) => {
+  isShowEdit.value = !isShowEdit.value;
+  parentId.value = id;
+  commentType.value = 1;
+  isShowReply.value = false;
 };
 
 const showReply = (flag: boolean) => {
   isShowReply.value = flag;
 };
 
+const showEdit = (flag: boolean) => {
+  isShowEdit.value = flag;
+};
+
 const onDelete = async (id: number) => {
   try {
     await deleteComment(id);
@@ -112,6 +126,27 @@ const formatContent = computed(() => {
           </a-tooltip>
         </template>
       </span>
+      <span
+        v-if="userStore.userInfo?.id === data.userId"
+        key="comment-basic-edit-to"
+      >
+        <template v-if="!isShowEdit">
+          <a-tooltip :title="$t('comment.edit')">
+            <span
+              class="icon-[clarity--edit-line] size-3.5"
+              @click="edit(data.id)"
+            ></span>
+          </a-tooltip>
+        </template>
+        <template v-else>
+          <a-tooltip :title="$t('comment.cancelEdit')">
+            <span
+              class="icon-[clarity--edit-solid] size-3.5"
+              @click="edit(data.id)"
+            ></span>
+          </a-tooltip>
+        </template>
+      </span>
       <span
         v-if="userStore.userInfo?.id === data.userId"
         key="comment-basic-delete"
@@ -129,12 +164,21 @@ const formatContent = computed(() => {
     <div v-show="isShowReply">
       <CreateComment
         :project-id="projectId"
-        :comments="comments"
         :parent-id="parentId"
         @show-reply="showReply"
         @get-comment-by-project-id="emit('getCommentByProjectId', projectId)"
       />
     </div>
+    <div v-if="isShowEdit">
+      <CreateComment
+        :project-id="projectId"
+        :comment-content="data?.content || ''"
+        :parent-id="parentId"
+        :comment-type="commentType"
+        @show-reply="showEdit"
+        @get-comment-by-project-id="emit('getCommentByProjectId', projectId)"
+      />
+    </div>
     <template v-if="(data?.depth ?? 0) < 2">
       <child-comment
         v-for="(item, index) of data.children"
@@ -148,3 +192,8 @@ const formatContent = computed(() => {
     </template>
   </a-comment>
 </template>
+<style>
+:where(.css-dev-only-do-not-override-14589v).ant-comment .ant-comment-actions {
+  margin-top: 16px;
+}
+</style>

apps/web-antd/src/views/license/project/comment/create-comment.vue

@@ -5,20 +5,21 @@ import { ref } from 'vue';
 
 import { message } from 'ant-design-vue';
 
-import { createComment } from '#/api/license/comment';
+import { createComment, updateComment } from '#/api/license/comment';
 import { Tinymce as RichTextarea } from '#/components/tinymce';
 import { $t } from '#/locales';
 
 const props = defineProps<{
-  comments?: CommentApi.Comment[];
+  commentContent?: string;
+  commentType?: number;
   parentId?: number;
   projectId?: number;
 }>();
 
-const emit = defineEmits(['getCommentByProjectId', 'showReply']);
+const emit = defineEmits(['getCommentByProjectId', 'showReply', 'showEdit']);
 
 const submitting = ref<boolean>(false);
-const value = ref<string>('');
+const value = ref<string>(props.commentContent || '');
 
 const handleSubmit = async () => {
   if (!value.value) {
@@ -27,15 +28,17 @@ const handleSubmit = async () => {
 
   // 提交表单
   const data = {
-    parentId: props.parentId,
+    id: props.commentType === 1 ? props.parentId : undefined,
+    parentId: props.commentType === 1 ? undefined : props.parentId,
     projectId: props.projectId,
     content: value.value,
   } as CommentApi.Comment;
   try {
     submitting.value = true;
-    await createComment(data);
+    await (props.commentType === 1 ? updateComment(data) : createComment(data));
     submitting.value = false;
     emit('showReply', false);
+    emit('showEdit', false);
     message.success($t('ui.actionMessage.operationSuccess'));
     emit('getCommentByProjectId', props.projectId);
   } finally {
@@ -57,6 +60,8 @@ const handleSubmit = async () => {
       {{
         (props.parentId ?? 0) === 0
           ? $t('comment.postComment')
+          : props.commentType === 1
+            ? $t('comment.editComment')
             : $t('comment.replyComment')
       }}
     </a-button>

apps/web-antd/src/views/license/project/comment/index.vue

@@ -92,6 +92,7 @@ function getCommentCount(comments?: CommentApi.Comment[]) {
       :comments="comments"
       @get-comment-by-project-id="emit('getCommentByProjectId', projectId)"
     />
+    <a-divider style="margin-bottom: 0" />
     <a-comment>
       <template #avatar>
         <a-avatar