feat: migrate tab (#121)

mogland · May 1, 2023 · 4ebc612 · 4ebc612
1 parent 3198522
commit 4ebc612
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 7 deletions.
diff --git a/src/components/universal/Modal/index.module.css b/src/components/universal/Modal/index.module.css
@@ -84,6 +84,12 @@
   margin-bottom: 0.5rem;
 }
 
+.modalBody a {
+  @apply text-sm text-blue-500 underline;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
 .double-click {
   background-color: red !important;
 }

diff --git a/src/pages/Comments/index.tsx b/src/pages/Comments/index.tsx
@@ -8,18 +8,15 @@ import { getQueryVariable } from "@utils/url";
 import { useNavigate } from "react-router-dom";
 import { apiClient } from "@utils/request";
 import { Title } from "@components/universal/Title";
-import {
-  CheckSmall,
-  CloseSmall,
-  Redo,
-} from "@icon-park/react";
+import { CheckSmall, CloseSmall, Redo } from "@icon-park/react";
 import { mailAvatar } from "@utils/avatar";
 import { jump } from "@utils/path";
 import { useSeo } from "@hooks/useSeo";
 import { CommentsList, EditModal } from "./component";
 import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 import { ActionButton, ActionButtons } from "@components/widgets/ActionButtons";
+import { Button } from "@components/universal/Button";
 
 const tabsList = [
   {
@@ -188,11 +185,19 @@ export const CommentsPage: BasicPage = () => {
       </div>
       <div className={postStyles.nav}>
         {(data?.pagination.has_prev_page && (
-          <button className={postStyles.button}>上一页</button>
+          <Button 
+          onClick={() => {
+            navigate(jump(`/comments?status=${tab}&page=${page - 1}`));
+          }}
+          >上一页</Button>
         )) ||
           null}
         {(data?.pagination.has_next_page && (
-          <button className={postStyles.button}>下一页</button>
+          <Button
+          onClick={() => {
+            navigate(jump(`/comments?status=${tab}&page=${page + 1}`));
+          }}
+          >下一页</Button>
         )) ||
           null}
       </div>

diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -19,6 +19,7 @@ import { jump } from "@utils/path";
 import { useSeo } from "@hooks/useSeo";
 import { toast } from "sonner";
 import useSWR from "swr";
+import { Space } from "@components/universal/Space";
 
 const tabsAPI = ["/user/master/info", "/configs"];
 
@@ -262,6 +263,20 @@ export const SettingsPage: BasicPage = () => {
               type="password"
             />
           </Collapse>
+          <Collapse title="迁移与备份">
+            <ModalBody>
+              导出备份文件, 此操作将会导出文章、页面、评论、用户与友链信息
+            </ModalBody>
+            <Button onClick={handleExportData}>导出</Button>
+            <ModalBody>导入备份文件, 此操作将会与现有信息合并</ModalBody>
+            <Button onClick={handleImportData}>导入</Button>
+            <Space height={20} />
+            <ModalBody>
+              如果您对此功能尚不熟悉，请前往
+              <a href="https://mog.js.org/docs/migrate/backup">文档</a>
+              阅读后使用
+            </ModalBody>
+          </Collapse>
         </CollapseContainer>
 
         <Button
@@ -331,3 +346,50 @@ export const SettingsPage: BasicPage = () => {
     </>
   );
 };
+
+function handleExportData() {
+  const handler = apiClient("/migrate/export").then((res) => {
+    const blob = new Blob([JSON.stringify(res)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "mog.json";
+    a.click();
+    URL.revokeObjectURL(url);
+    return res;
+  })
+  toast.promise(handler, {
+    loading: "正在导出",
+    success: "导出成功",
+    error: (data) => `导出失败 - ${data.message}`,
+  });
+}
+
+function handleImportData() {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "application/json";
+  input.onchange = (e: any) => {
+    const file = e.target.files[0];
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      const data = JSON.parse(e.target.result as string);
+      const handler = apiClient("/migrate/import", {
+        method: "POST",
+        body: JSON.stringify(data),
+      });
+      toast.promise(handler, {
+        loading: "正在导入",
+        success: "导入成功",
+        error: (data) => `导入失败 - ${data.message}`,
+      });
+    };
+    reader.readAsText(file);
+  }
+  input.click();
+}