diff --git a/package.json b/package.json index e70e0c72..b9da6ae9 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/components/forms/generate-link-form/file-qrcode-field.tsx b/src/renderer/components/forms/generate-link-form/file-qrcode-field.tsx new file mode 100644 index 00000000..604eed8a --- /dev/null +++ b/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 = ({ + fileLink, +}) => { + const {translate} = useI18n(); + + return ( + + + {translate("forms.generateLink.fileQRCode.label")} + +
+ +
+
+ ); +}; + +export default FileQRCodeField; diff --git a/src/renderer/components/forms/generate-link-form/index.tsx b/src/renderer/components/forms/generate-link-form/index.tsx index 03928970..d66db296 100644 --- a/src/renderer/components/forms/generate-link-form/index.tsx +++ b/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'; diff --git a/src/renderer/components/modals/file/generate-file-link/index.tsx b/src/renderer/components/modals/file/generate-file-link/index.tsx index 3d16f559..d0261751 100644 --- a/src/renderer/components/modals/file/generate-file-link/index.tsx +++ b/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 = ({ fileLink={fileLink} loading={isSubmitting} /> + { + fileLink && + } ); }; diff --git a/src/renderer/components/modals/preview-file/file-operation/generate-link.tsx b/src/renderer/components/modals/preview-file/file-operation/generate-link.tsx index 00997f16..1d70b36a 100644 --- a/src/renderer/components/modals/preview-file/file-operation/generate-link.tsx +++ b/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 =({ fileLink={fileLink} loading={isSubmitting} /> + { + fileLink && + } ); diff --git a/src/renderer/modules/i18n/lang/dict.ts b/src/renderer/modules/i18n/lang/dict.ts index da42e5ed..89e63619 100644 --- a/src/renderer/modules/i18n/lang/dict.ts +++ b/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, }, diff --git a/src/renderer/modules/i18n/lang/en-us.ts b/src/renderer/modules/i18n/lang/en-us.ts index 0e1b8943..fd12a7bd 100644 --- a/src/renderer/modules/i18n/lang/en-us.ts +++ b/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!" }, diff --git a/src/renderer/modules/i18n/lang/ja-jp.ts b/src/renderer/modules/i18n/lang/ja-jp.ts index 15191a37..bb3391a0 100644 --- a/src/renderer/modules/i18n/lang/ja-jp.ts +++ b/src/renderer/modules/i18n/lang/ja-jp.ts @@ -342,6 +342,9 @@ const dict: Dictionary = { label: "ファイル リンク:", copied: "もうクリップボードにコピー", }, + fileQRCode: { + label: "QRコード:", + }, errors: { domainNotFound: "選択されたドメインが見つかりません", } diff --git a/src/renderer/modules/i18n/lang/zh-cn.ts b/src/renderer/modules/i18n/lang/zh-cn.ts index 111a4d91..c24cf8c1 100644 --- a/src/renderer/modules/i18n/lang/zh-cn.ts +++ b/src/renderer/modules/i18n/lang/zh-cn.ts @@ -342,6 +342,9 @@ const dict: Dictionary = { label: "文件链接:", copied: "已复制", }, + fileQRCode: { + label: "二维码:", + }, errors: { domainNotFound: "无法获取到所选择的域名信息", }, diff --git a/yarn.lock b/yarn.lock index cfc5931f..7e0ddfc6 100644 --- a/yarn.lock +++ b/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"