支持diff

dashboard/src/components/corpus/SentHistoryItem.tsx

@@ -1,27 +1,45 @@
-import { Space, Typography } from "antd";
+import { Space, Tooltip, Typography } from "antd";
+import { Change, diffChars } from "diff";
+
 import User from "../auth/User";
 import TimeShow from "../general/TimeShow";
 import { ISentHistoryData } from "./SentHistory";
 
-const { Text } = Typography;
+const { Text, Paragraph } = Typography;
 
 interface IWidget {
   data?: ISentHistoryData;
   oldContent?: string;
 }
 const SentHistoryItemWidget = ({ data, oldContent }: IWidget) => {
+  let content = <Text>{data?.content}</Text>;
+  if (data?.content && oldContent) {
+    const diff: Change[] = diffChars(oldContent, data.content);
+    const diffResult = diff.map((item, id) => {
+      return (
+        <Text
+          key={id}
+          type={item.added ? "success" : item.removed ? "danger" : "secondary"}
+          delete={item.removed ? true : undefined}
+        >
+          {item.value}
+        </Text>
+      );
+    });
+    content = <Tooltip title={data.content}>{diffResult}</Tooltip>;
+  }
   return (
-    <div>
-      <div>
-        <Text>{data?.content}</Text>
-      </div>
-      <div>
-        <Space style={{ fontSize: "80%" }}>
-          <User {...data?.editor} />
-          <TimeShow type="secondary" createdAt={data?.created_at} />
-        </Space>
-      </div>
-    </div>
+    <Paragraph style={{ paddingLeft: 12 }}>
+      <blockquote>
+        {content}
+        <div>
+          <Space style={{ fontSize: "80%" }}>
+            <User {...data?.editor} showAvatar={false} />
+            <TimeShow type="secondary" createdAt={data?.created_at} />
+          </Space>
+        </div>
+      </blockquote>
+    </Paragraph>
   );
 };
 

dashboard/src/components/discussion/DiscussionTopicChildren.tsx

@@ -17,6 +17,7 @@ interface IItem {
   type: "comment" | "sent";
   comment?: IComment;
   sent?: ISentHistoryData;
+  oldSent?: string;
   date: number;
 }
 
@@ -61,18 +62,18 @@ const DiscussionTopicChildrenWidget = ({
         date: date,
       };
     });
-    const his: IItem[] = history
-      .filter(
-        (value) =>
-          new Date(value.created_at ? value.created_at : "").getTime() > first
-      )
-      .map((item) => {
-        return {
-          type: "sent",
-          sent: item,
-          date: new Date(item.created_at ? item.created_at : "").getTime(),
-        };
-      });
+    const hisFiltered = history.filter(
+      (value) =>
+        new Date(value.created_at ? value.created_at : "").getTime() > first
+    );
+    const his: IItem[] = hisFiltered.map((item, index) => {
+      return {
+        type: "sent",
+        sent: item,
+        date: new Date(item.created_at ? item.created_at : "").getTime(),
+        oldSent: index > 0 ? hisFiltered[index - 1].content : undefined,
+      };
+    });
     const mixItems = [...comment, ...his];
     mixItems.sort((a, b) => a.date - b.date);
     setItems(mixItems);
@@ -80,7 +81,7 @@ const DiscussionTopicChildrenWidget = ({
 
   useEffect(() => {
     if (resType === "sentence" && resId) {
-      let url = `/v2/sent_history?view=sentence&id=${resId}`;
+      let url = `/v2/sent_history?view=sentence&id=${resId}&order=created_at&dir=asc`;
       get<ISentHistoryListResponse>(url).then((res) => {
         if (res.ok) {
           setHistory(res.data.rows);
@@ -158,7 +159,10 @@ const DiscussionTopicChildrenWidget = ({
                     />
                   ) : undefined
                 ) : (
-                  <SentHistoryItemWidget data={item.sent} />
+                  <SentHistoryItemWidget
+                    data={item.sent}
+                    oldContent={item.oldSent}
+                  />
                 )}
               </List.Item>
             );