@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/CommentTimeline/index.tsx

@@ -0,0 +1,330 @@
+
+import React from 'react';
+import { Timeline, Avatar, Button, Dropdown, DatePicker } from 'antd';
+import { formatDatetime } from '../../utils/formatters';
+import { Modal, Form, Input } from 'antd';
+import { EllipsisOutlined, EditOutlined, DeleteOutlined, CommentOutlined } from '@ant-design/icons';
+import { htmlNoData, useEffectResize } from '../../utils/htmlUtils';
+import uiToast from '../UIToast';
+import dayjs from 'dayjs';
+import { CacheUserInfo, UserInfo } from '../../utils/CacheUserInfo';
+
+export interface CommentItem {
+  id: string;
+  commentCount: number;
+  descs: string;
+  progressTime: Date; // 评论的title时间.
+  createTime: Date;
+  updateTime: Date;
+  createBy: string;
+  updateBy: string;
+}
+
+export interface CommentSubItem {
+  id: string;
+  parentId: string;
+  comment: string;
+  createTime: Date;
+  updateTime: Date;
+  createBy: string;
+  updateBy: string;
+}
+
+export interface CommentTimelineProps {
+  // 评论列表
+  commentList: CommentItem[];
+  // 评论以及子评论
+  commentListMap: Record<string, { comments: CommentSubItem[], expanded: boolean }>;
+
+  // 是否在左侧显示瀑布流title（仅桌面端显示）
+  showTitle?: boolean;
+  // 新增评论时，是否显示时间的选择.
+  showTimePicker?: boolean;
+
+  onDeleteComment?: (commentId: string) => void;
+  // 加载子评论
+  onLoadSubComments?: (commentId: string) => void;
+  // 保存评论
+  onSaveSubComment?: (params: { commentId: string, comment: string }) => Promise<boolean>;
+  onSaveComment?: (params: { commentItem: CommentItem | null, comment: string, time: Date }) => Promise<boolean>;
+}
+
+/**
+* @desc 评论组件.
+*/
+export const CommentTimeline: React.FC<CommentTimelineProps> = ({
+  commentList, showTitle, showTimePicker, onDeleteComment, onLoadSubComments, commentListMap, onSaveComment, onSaveSubComment
+}) => {
+  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
+  const [userMap, setUserMap] = React.useState<Map<string, UserInfo>>(new Map());
+
+  const [commentModalVisible, setCommentModalVisible] = React.useState(false);
+  const [commentingProgress, setCommentingProgress] = React.useState<CommentItem | null>(null);
+  const [commentForm] = Form.useForm();
+
+  const [progressModalVisible, setProgressModalVisible] = React.useState(false);
+  const [editingProgress, setEditingProgress] = React.useState<CommentItem | null>(null);
+  const [progressForm] = Form.useForm();
+
+  const commentUserIds = React.useMemo(() => {
+    const userIds = new Set<string>();
+    commentList.forEach((item) => {
+      if (item.createBy) {
+        userIds.add(item.createBy);
+      }
+      commentListMap[item.id]?.comments.forEach((comment) => {
+        if (comment.createBy) {
+          userIds.add(comment.createBy);
+        }
+      });
+    });
+    return Array.from(userIds);
+  }, [commentList, commentListMap]);
+
+  React.useEffect(() => {
+    if (commentUserIds.length === 0) {
+      return;
+    }
+
+    let isMounted = true;
+    CacheUserInfo.getUserInfos({ userIds: commentUserIds }).then((users) => {
+      if (!isMounted) {
+        return;
+      }
+      setUserMap((prev) => new Map([...prev, ...users]));
+    }).catch((error) => {
+      console.error('加载评论用户信息失败:', error);
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [commentUserIds]);
+
+  // 添加响应式布局，小屏幕默认使用卡片视图
+  useEffectResize(() => {
+    setIsMobile(true);
+  }, () => {
+    setIsMobile(false);
+  }, 768);
+
+  const openSubCommentModal = async (comment: CommentItem) => {
+    setCommentingProgress(comment);
+    commentForm.resetFields();
+    setCommentModalVisible(true);
+  };
+
+  const openCommentModal = (comment?: CommentItem) => {
+    if (comment) {
+      setEditingProgress(comment);
+      progressForm.setFieldsValue({
+        descs: comment.descs,
+        progressTime2: dayjs(comment.progressTime),
+      });
+    } else {
+      setEditingProgress(null);
+      progressForm.resetFields();
+      progressForm.setFieldsValue({ progressTime2: dayjs() });
+    }
+    setProgressModalVisible(true);
+  };
+
+  const handleSaveComment = async () => {
+    try {
+      if (!commentingProgress) {
+        return;
+      }
+      const values = await commentForm.validateFields();
+      if (!values) {
+        return;
+      }
+      if (await onSaveSubComment?.({ commentId: commentingProgress.id, comment: values.comment })) {
+        uiToast.success('回复已提交');
+        setCommentModalVisible(false);
+        onLoadSubComments?.(commentingProgress.id);
+      }
+    } catch (error) {
+      console.error(error);
+      uiToast.error('提交回复失败');
+    }
+  };
+
+  const handleSaveProgress = async () => {
+    try {
+      const values = await progressForm.validateFields();
+      if (editingProgress) {
+        await onSaveComment?.({ commentItem: editingProgress, comment: values.descs, time: values.progressTime2.toDate() });
+        uiToast.success('更新成功');
+      } else {
+        await onSaveComment?.({ commentItem: null, comment: values.descs, time: values.progressTime2.toDate() });
+        uiToast.success('新增成功');
+      }
+      setProgressModalVisible(false);
+      setEditingProgress(null);
+
+    } catch (error) {
+      console.error(error);
+      uiToast.error('保存失败');
+    }
+  };
+
+  return (<>
+    <div className="flex justify-end items-center mb-5 ml-4">
+      <Button
+        type="primary"
+        onClick={() => openCommentModal()}
+        className="px-4 py-2 btn-primary flex items-center"
+      >新增</Button>
+    </div>
+    {
+      commentList.length ?
+        (<Timeline
+          mode="left"
+          className="ml-5 md:pr-[200px]"
+          items={commentList.map((item) => ({
+            key: item.id,
+            color: 'blue',
+            label: (isMobile && showTitle) ? null : formatDatetime(new Date(item.progressTime)),
+            style: { paddingBottom: '5px' },
+            children: (
+              <>
+                {(isMobile && showTitle) && <div className="mt-2 mb-1 font-bold">{formatDatetime(new Date(item.progressTime))}</div>}
+                <div className="rounded border border-gray-100 bg-gray-50 p-2">
+                  <div className="flex justify-between items-start mb-2 ">
+                    <div className="flex items-center space-x-2">
+                      <Avatar
+                        src={userMap.get(item.createBy)?.avatar?.avatar_small || null}
+                        size={40}
+                      >
+                        {userMap.get(item.createBy)?.nickname?.[0]}
+                      </Avatar>
+                      <div>
+                        <div className="">{userMap.get(item.createBy)?.nickname}</div>
+                        <div className="text-xs font-thin">{formatDatetime(new Date(item.updateTime))}</div>
+                      </div>
+                    </div>
+                    <div className="mt-4 flex justify-end absolute right-1 top-1">
+                      <Dropdown
+                        menu={{
+                          items: [
+                            {
+                              key: 'edit',
+                              icon: <EditOutlined />,
+                              label: '编辑',
+                              onClick: (e: any) => { openCommentModal?.(item); e.domEvent.stopPropagation(); },
+                            },
+                            {
+                              key: 'delete',
+                              icon: <DeleteOutlined />,
+                              label: '删除',
+                              danger: true,
+                              onClick: (e: any) => { onDeleteComment?.(item.id); e.domEvent.stopPropagation(); },
+                            },
+                          ]
+                        }}
+                        trigger={['click']}
+                      >
+                        <Button type="text" icon={<EllipsisOutlined />} onClick={e=>e.stopPropagation()} />
+                      </Dropdown>
+                    </div>
+                  </div>
+                  <div className="whitespace-pre-wrap ml-2" style={{ whiteSpace: 'pre-wrap' }}>{item.descs}</div>
+                  <div className="flex items-center space-x-1 mt-1">
+                    <Button type="text" icon={<CommentOutlined />} className="font-thin text-xs" size="small" style={{ color: '#666' }} onClick={() => openSubCommentModal(item)}>
+                      回复
+                    </Button>
+                    <Button type="text" size="small" style={{ color: '#666' }} className="font-thin text-xs" onClick={() => onLoadSubComments?.(item.id)}>
+                      {commentListMap[item.id] && commentListMap[item.id].expanded ? '收起' : '展开' + item.commentCount + '条'}回复
+                    </Button>
+                  </div>
+                </div>
+                <div className="border-l border-gray-200 pl-3">
+                  {commentListMap[item.id] && commentListMap[item.id].expanded && commentListMap[item.id].comments.length > 0 ? (
+                    commentListMap[item.id].comments.map((comment) => (
+                      <div key={comment.id} className="p-1 text-sm">
+                        <div className="flex items-center space-y-2 mb-1 mt-1">
+                          <div className="flex items-center space-x-2">
+                            <Avatar
+                              src={userMap.get(comment.createBy)?.avatar?.avatar_small || null}
+                              size={40}
+                              className="self-start"
+                            >
+                              {userMap.get(comment.createBy)?.nickname?.[0]}
+                            </Avatar>
+                            <div>
+                              <div className="text-gray-600 text-xs">{userMap.get(comment.createBy)?.nickname}</div>
+                              {/* <div className="text-xs text-gray-400">{formatDatetime(new Date(comment.createTime))}</div> */}
+                              <div className="text-gray-700">{comment.comment}</div>
+                              <div className="text-xs mt-1 font-thin">{formatDatetime(new Date(comment.createTime))}</div>
+
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    <></>
+                  )}
+                </div>
+              </>
+            ),
+          }))}
+        />) : (
+          htmlNoData())
+    }
+
+    <Modal
+      open={commentModalVisible}
+      onCancel={() => {
+        setCommentingProgress(null);
+        setCommentModalVisible(false);
+      }}
+      className="ant-modal-nofull"
+      onOk={handleSaveComment}
+      okText="提交"
+      cancelText="取消"
+    >
+      <Form form={commentForm} layout="horizontal" className="mt-6">
+        <Form.Item
+          name="comment"
+          rules={[{ required: true, message: '请输入回复内容' }]}
+        >
+          <Input.TextArea rows={4} placeholder="请输入你的回复" />
+        </Form.Item>
+      </Form>
+    </Modal>
+
+    {/* 编辑项目模态框 */}
+    <Modal
+      title={editingProgress ? '编辑' : '新增'}
+      open={progressModalVisible}
+      className="ant-modal-nofull"
+      onCancel={() => {
+        setProgressModalVisible(false);
+        setEditingProgress(null);
+      }}
+      onOk={handleSaveProgress}
+      okText="保存"
+      cancelText="取消"
+    >
+      <Form form={progressForm} layout="horizontal" >
+        {showTimePicker && (
+          <Form.Item
+            name="progressTime2"
+            label="时间"
+            rules={[{ required: true, message: '请选择时间' }]}
+          >
+            <DatePicker showTime style={{ width: '100%' }} />
+          </Form.Item>
+        )}
+        <Form.Item
+          name="descs"
+          label="内容"
+          rules={[{ required: true, message: '请输入内容' }]}
+        >
+          <Input.TextArea rows={4} placeholder="请输入内容" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  </>);
+};