feat(web): add link copy in oss page (#1108)

labring · May 6, 2023 · 425b782 · 425b782
1 parent adac7f0
commit 425b782
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 28 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -415,5 +415,6 @@
       "item3_2": "Forum"
     }
   },
-  "ChatGPT example": "ChatGPT example"
-}
+  "ChatGPT example": "ChatGPT example",
+  "LinkCopied": "Link Copied"
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -415,5 +415,6 @@
       "item3_2": "开发者社区"
     }
   },
-  "ChatGPT example": "ChatGPT 示例"
+  "ChatGPT example": "ChatGPT 示例",
+  "LinkCopied": "链接复制成功"
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -415,5 +415,6 @@
       "item3_2": "开发者社区"
     }
   },
-  "ChatGPT example": "ChatGPT 示例"
+  "ChatGPT example": "ChatGPT 示例",
+  "LinkCopied": "链接复制成功"
 }
diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx
@@ -1,5 +1,5 @@
 import { BiCloudUpload, BiRefresh } from "react-icons/bi";
-import { DeleteIcon, ViewIcon } from "@chakra-ui/icons";
+import { DeleteIcon, LinkIcon, ViewIcon } from "@chakra-ui/icons";
 import {
   Button,
   Center,
@@ -19,8 +19,8 @@ import clsx from "clsx";
 import { t } from "i18next";
 
 import ConfirmButton from "@/components/ConfirmButton";
+import CopyText from "@/components/CopyText";
 import EmptyBox from "@/components/EmptyBox";
-// import CopyText from "@/components/CopyText";
 import FileTypeIcon from "@/components/FileTypeIcon";
 import IconWrap from "@/components/IconWrap";
 import Panel from "@/components/Panel";
@@ -30,11 +30,9 @@ import { formatDate, formateType, formatSize } from "@/utils/format";
 import useStorageStore, { TFile } from "../../store";
 import CreateFolderModal from "../CreateFolderModal";
 import CreateWebsiteModal from "../CreateWebsiteModal";
-// import CreateWebsiteModal from "../CreateWebsiteModal";
 import PathLink from "../PathLink";
 import UploadButton from "../UploadButton";
 
-// import styles from "../index.module.scss";
 import useAwsS3 from "@/hooks/useAwsS3";
 export default function FileList() {
   const { getList, getFileUrl, deleteFile } = useAwsS3();
@@ -53,21 +51,23 @@ export default function FileList() {
     },
   );
 
-  const viewAppFile = (file: TFile) => {
-    if (file.Prefix) {
-      changeDirectory(file);
-      return;
-    }
-
+  const getLinkUrl = (file: TFile) => {
     let fileUrl = "";
-
     if (bucketType === "private") {
       fileUrl = getFileUrl(bucketName!, file.Key);
     } else {
       fileUrl = getOrigin(currentStorage?.domain?.domain || "") + `/${file.Key}` || "";
     }
 
-    window.open(fileUrl, "_blank");
+    return fileUrl;
+  };
+
+  const viewAppFile = (file: TFile) => {
+    if (file.Prefix) {
+      changeDirectory(file);
+      return;
+    }
+    window.open(getLinkUrl(file), "_blank");
   };
 
   const changeDirectory = (file: TFile) => {
@@ -213,18 +213,25 @@ export default function FileList() {
                               <ViewIcon fontSize={12} />
                             </IconWrap>
                             {!file.Prefix ? (
-                              <ConfirmButton
-                                onSuccessAction={async () => {
-                                  await deleteFile(bucketName!, file.Key);
-                                  query.refetch();
-                                }}
-                                headerText={String(t("Delete"))}
-                                bodyText={t("StoragePanel.DeleteFileTip")}
-                              >
-                                <IconWrap tooltip={String(t("Delete"))}>
-                                  <DeleteIcon fontSize={14} />
+                              <>
+                                <IconWrap>
+                                  <CopyText text={getLinkUrl(file)} tip={String(t("LinkCopied"))}>
+                                    <LinkIcon />
+                                  </CopyText>
                                 </IconWrap>
-                              </ConfirmButton>
+                                <ConfirmButton
+                                  onSuccessAction={async () => {
+                                    await deleteFile(bucketName!, file.Key);
+                                    query.refetch();
+                                  }}
+                                  headerText={String(t("Delete"))}
+                                  bodyText={t("StoragePanel.DeleteFileTip")}
+                                >
+                                  <IconWrap tooltip={String(t("Delete"))}>
+                                    <DeleteIcon fontSize={14} />
+                                  </IconWrap>
+                                </ConfirmButton>
+                              </>
                             ) : (
                               <ConfirmButton
                                 onSuccessAction={async () => {

diff --git a/web/src/pages/app/storages/mods/UploadButton/index.tsx b/web/src/pages/app/storages/mods/UploadButton/index.tsx
@@ -7,6 +7,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  Spinner,
   useDisclosure,
 } from "@chakra-ui/react";
 
@@ -80,7 +81,11 @@ function UploadButton(props: { onUploadSuccess: Function; children: React.ReactE
                     className="my-2 flex h-10 w-full items-center justify-between px-5 hover:bg-slate-100"
                   >
                     <span className="text-slate-500">{item.fileName}</span>
-                    {item.status ? <CheckCircleIcon color="green.500" fontSize={20} /> : ""}
+                    {item.status ? (
+                      <CheckCircleIcon color="green.500" fontSize={20} />
+                    ) : (
+                      <Spinner size="xs" className="mr-1" />
+                    )}
                   </div>
                 );
               })}