feat: sync log modal (#94)

* 新增 logModal, 版本同步时展示对应日志, cc @RaoHai 

![image](https://github.com/user-attachments/assets/6523497b-85ac-4666-8d06-8b21985e42bc)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Introduced a new dependency for enhanced log rendering.
- Added a modal to the Sync component for displaying sync logs
interactively.
	- Implemented a custom hook for fetching and caching sync log data.

- **Bug Fixes**
- Improved button functionality to open log modal upon successful sync
instead of navigating away.

- **Documentation**
- Updated documentation to reflect the new log fetching mechanism and
modal integration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

package.json

@@ -27,6 +27,7 @@
     "next": "^13.4.7",
     "npm-package-arg": "^11.0.1",
     "react": "^18.2.0",
+    "react-ansi": "^3.0.2",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
@@ -50,6 +51,9 @@
   "overrides": {
     "npm-package-arg": {
       "validate-npm-package-name": "5.0.0"
+    },
+    "react-ansi": {
+      "react": "^18.2.0"
     }
   }
 }

src/components/Sync.tsx

@@ -1,6 +1,8 @@
 'use client';
 import { REGISTRY, SYNC_REGISTRY } from '@/config';
+import useSyncLog from '@/hooks/useSyncLog';
 import { Button, message, Modal } from 'antd';
+import ReactAnsi from 'react-ansi';
 import React from 'react';
 
 const MAX_RETRY = 30;
@@ -27,7 +29,8 @@ export default function Sync({ pkgName }: SyncProps) {
   const [logId, setLogId] = React.useState<string>();
   const [logState, setLogState] = React.useState<LogStatus>(LogStatus.INIT);
   const retryCountRef = React.useRef(0);
-  const [modal, contextHolder] = Modal.useModal();
+  const [showLog, setShowLog] = React.useState(false);
+  const { data: logContent } = useSyncLog(pkgName, logId);
 
   function genLogFileUrl(id: string) {
     return `${REGISTRY}/-/package/${pkgName}/syncs/${id}/log`;
@@ -80,14 +83,15 @@ export default function Sync({ pkgName }: SyncProps) {
 
   return (
     <>
-      {contextHolder}
       <Button
         size={'small'}
         type="primary"
         loading={logState === LogStatus.WAIT}
-        href={logState === LogStatus.SUCCESS ? genLogFileUrl(logId!) : undefined}
-        target='_blank'
         onClick={() => {
+          if (logState === LogStatus.SUCCESS) {
+            setShowLog(true);
+            return;
+          }
           if (!logId) {
             doSync();
             return;
@@ -96,6 +100,23 @@ export default function Sync({ pkgName }: SyncProps) {
       >
         {LogStatusTextMap[logState]}
       </Button>
+
+      <Modal
+        centered
+        open={showLog}
+        width={'70%'}
+        title="同步日志"
+        footer={null}
+        onCancel={() => setShowLog(false)}
+      >
+        <ReactAnsi
+          key={logId}
+          log={logContent || ['loading....']}
+          bodyStyle={{ overflowY: 'auto', background: '#222', height: '600px' }}
+          showHeader={false}
+          autoScroll
+        ></ReactAnsi>
+      </Modal>
     </>
   );
 }

src/hooks/useSyncLog.ts

@@ -0,0 +1,17 @@
+import { REGISTRY } from '@/config';
+import useSwr from 'swr';
+
+export default function useSyncLog(pkgName: string, logId?: string) {
+  return useSwr(logId ? `sync_log_${logId}` : null, async () => {
+    try {
+      const res = await fetch(`${REGISTRY}/-/package/${pkgName}/syncs/${logId}/log`).then((res) => res.text());
+      return res.split('\n');
+    } catch (e) {
+      return null;
+    }
+  }, {
+    refreshInterval() {
+      return 1000;
+    },
+  });
+}