feat: file qrcode

package.json

@@ -117,6 +117,7 @@
     "mime": "^2.3.1",
     "moment": "^2.22.2",
     "qiniu-path": "^0.0.3",
+    "qrcode.react": "^4.2.0",
     "react": "^18.2.0",
     "react-base-table": "^1.13.2",
     "react-bootstrap": "^2.5.0",

src/renderer/components/forms/generate-link-form/file-qrcode-field.tsx

@@ -0,0 +1,31 @@
+import React, {Fragment} from "react";
+import {Form} from "react-bootstrap";
+import {QRCodeSVG} from 'qrcode.react';
+import {useI18n} from "@renderer/modules/i18n";
+
+interface FileNameFieldProps {
+  fileLink: string,
+}
+
+
+const FileQRCodeField: React.FC<FileNameFieldProps> = ({
+  fileLink,
+}) => {
+  const {translate} = useI18n();
+
+  return (
+    <Form.Group as={Fragment} controlId="fileName">
+      <Form.Label className="text-end">
+        {translate("forms.generateLink.fileQRCode.label")}
+      </Form.Label>
+      <div>
+        <QRCodeSVG
+          value={fileLink}
+          size={128}
+        />
+      </div>
+    </Form.Group>
+  );
+};
+
+export default FileQRCodeField;

src/renderer/components/forms/generate-link-form/index.tsx

@@ -5,3 +5,4 @@ export {default as ExpireAfterField} from './expire-after-field';
 export * from"./expire-after-field";
 export {default as FileLinkField} from './file-link-field';
 export {default as FileNameField} from './file-name-field';
+export {default as FileQRCodeField} from './file-qrcode-field';

src/renderer/components/modals/file/generate-file-link/index.tsx

@@ -17,6 +17,7 @@ import {
   ExpireAfterField,
   FileLinkField,
   FileNameField,
+  FileQRCodeField,
   GenerateLinkForm,
   GenerateLinkFormData,
 } from "@renderer/components/forms/generate-link-form";
@@ -177,6 +178,11 @@ const GenerateFileLink: React.FC<ModalProps & GenerateFileLinkProps> = ({
           fileLink={fileLink}
           loading={isSubmitting}
         />
+        {
+          fileLink && <FileQRCodeField
+            fileLink={fileLink}
+          />
+        }
       </GenerateLinkForm>
     );
   };

src/renderer/components/modals/preview-file/file-operation/generate-link.tsx

@@ -13,6 +13,7 @@ import {
   DomainNameField,
   ExpireAfterField,
   FileLinkField,
+  FileQRCodeField,
   GenerateLinkForm,
   GenerateLinkFormData,
 } from "@renderer/components/forms/generate-link-form";
@@ -140,6 +141,11 @@ const GenerateLink: React.FC<GenerateLinkProps> =({
           fileLink={fileLink}
           loading={isSubmitting}
         />
+        {
+          fileLink && <FileQRCodeField
+            fileLink={fileLink}
+          />
+        }
       </GenerateLinkForm>
     </div>
   );

src/renderer/modules/i18n/lang/dict.ts

@@ -350,6 +350,9 @@ export default interface Dictionary {
         label: string,
         copied: string,
       },
+      fileQRCode: {
+        label: string,
+      },
       errors: {
         domainNotFound: string,
       },

src/renderer/modules/i18n/lang/en-us.ts

@@ -343,6 +343,9 @@ const dict: Dictionary = {
         label: "File Link:",
         copied: "Copied",
       },
+      fileQRCode: {
+        label: "QR code:",
+      },
       errors: {
         domainNotFound: "The domain selected not found!"
       },

src/renderer/modules/i18n/lang/ja-jp.ts

@@ -342,6 +342,9 @@ const dict: Dictionary = {
                 label: "ファイル リンク：",
                 copied: "もうクリップボードにコピー",
             },
+            fileQRCode: {
+                label: "QRコード:",
+            },
             errors: {
                 domainNotFound: "選択されたドメインが見つかりません",
             }

src/renderer/modules/i18n/lang/zh-cn.ts

@@ -342,6 +342,9 @@ const dict: Dictionary = {
         label: "文件链接：",
         copied: "已复制",
       },
+      fileQRCode: {
+        label: "二维码：",
+      },
       errors: {
         domainNotFound: "无法获取到所选择的域名信息",
       },

yarn.lock

@@ -9851,6 +9851,11 @@ qrcode-terminal@^0.12.0:
   resolved "https://registry.npmjs.org/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819"
   integrity sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==
 
+qrcode.react@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-4.2.0.tgz#1bce8363f348197d145c0da640929a24c83cbca3"
+  integrity sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==
+
 qs@^6.4.0:
   version "6.9.4"
   resolved "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"