diff --git a/web/app/components/app/overview/appCard.tsx b/web/app/components/app/overview/appCard.tsx index f51d25382365e0..bb037b9b6e1f26 100644 --- a/web/app/components/app/overview/appCard.tsx +++ b/web/app/components/app/overview/appCard.tsx @@ -22,6 +22,7 @@ import Tag from '@/app/components/base/tag' import Switch from '@/app/components/base/switch' import Divider from '@/app/components/base/divider' import CopyFeedback from '@/app/components/base/copy-feedback' +import ShareQRCode from '@/app/components/base/qrcode' import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button' import type { AppDetailResponse } from '@/models/app' import { AppType } from '@/types/app' @@ -168,6 +169,7 @@ function AppCard({ + {isApp && } { + const { t } = useTranslation() + const [isShow, setisShow] = useState(false) + const onClickShow = debounce(() => { + setisShow(true) + }, 100) + + const downloadQR = () => { + const canvas = document.getElementsByTagName('canvas')[0] + const link = document.createElement('a') + link.download = 'qrcode.png' + link.href = canvas.toDataURL() + link.click() + } + + const onMouseLeave = debounce(() => { + setisShow(false) + }, 500) + + return ( + +
+
+ {isShow &&
+ +
+
{t('appOverview.overview.appInfo.qrcode.scan')}
+
·
+
{t('appOverview.overview.appInfo.qrcode.download')}
+
+
+ } +
+ + ) +} + +export default ShareQRCode diff --git a/web/app/components/base/qrcode/style.module.css b/web/app/components/base/qrcode/style.module.css new file mode 100644 index 00000000000000..976aabf1fefd50 --- /dev/null +++ b/web/app/components/base/qrcode/style.module.css @@ -0,0 +1,61 @@ +.QrcodeIcon { + background-image: url(~@/app/components/develop/secret-key/assets/qrcode.svg); + background-position: center; + background-repeat: no-repeat; +} + +.QrcodeIcon:hover { + background-image: url(~@/app/components/develop/secret-key/assets/qrcode-hover.svg); + background-position: center; + background-repeat: no-repeat; +} + +.QrcodeIcon.show { + background-image: url(~@/app/components/develop/secret-key/assets/qrcode-hover.svg); + background-position: center; + background-repeat: no-repeat; +} + +.qrcodeimage { + position: relative; + object-fit: cover; +} +.scan { + margin: 0; + line-height: 1rem; + font-size: 0.75rem; +} +.download { + position: relative; + color: #155eef; + font-size: 0.75rem; + line-height: 1rem; +} +.text { + align-self: stretch; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 4px; +} +.qrcodeform { + border: 0.5px solid #eaecf0; + display: flex; + flex-direction: column; + margin: 0 !important; + margin-top: 4px !important; + margin-left: -75px !important; + position: absolute; + border-radius: 8px; + background-color: #fff; + box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), + 0 4px 6px -2px rgba(16, 24, 40, 0.03); + overflow: hidden; + align-items: center; + justify-content: center; + padding: 12px; + gap: 8px; + z-index: 3; + font-family: "PingFang SC", serif; +} diff --git a/web/app/components/develop/secret-key/assets/qrcode-hover.svg b/web/app/components/develop/secret-key/assets/qrcode-hover.svg new file mode 100644 index 00000000000000..84e3ee70d0876f --- /dev/null +++ b/web/app/components/develop/secret-key/assets/qrcode-hover.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/web/app/components/develop/secret-key/assets/qrcode.svg b/web/app/components/develop/secret-key/assets/qrcode.svg new file mode 100644 index 00000000000000..57878d5fc4ac8a --- /dev/null +++ b/web/app/components/develop/secret-key/assets/qrcode.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/web/i18n/lang/app-overview.en.ts b/web/i18n/lang/app-overview.en.ts index 9905761948fe91..21ba5db8b0a92d 100644 --- a/web/i18n/lang/app-overview.en.ts +++ b/web/i18n/lang/app-overview.en.ts @@ -61,6 +61,11 @@ const translation = { copied: 'Copied', copy: 'Copy', }, + qrcode: { + title: 'QR code to share', + scan: 'Scan Share Application', + download: 'Download QR Code', + }, customize: { way: 'way', entry: 'Customize', diff --git a/web/i18n/lang/app-overview.zh.ts b/web/i18n/lang/app-overview.zh.ts index f2c39441984bca..e7ad953235e6a0 100644 --- a/web/i18n/lang/app-overview.zh.ts +++ b/web/i18n/lang/app-overview.zh.ts @@ -61,6 +61,11 @@ const translation = { copied: '已复制', copy: '复制', }, + qrcode: { + title: '二维码分享', + scan: '扫码分享应用', + download: '下载二维码', + }, customize: { way: '方法', entry: '定制化', diff --git a/web/package.json b/web/package.json index f8e2a7f38facda..d17344ededb7c8 100644 --- a/web/package.json +++ b/web/package.json @@ -46,6 +46,7 @@ "mermaid": "10.4.0", "negotiator": "^0.6.3", "next": "13.3.1", + "qrcode.react": "^3.1.0", "qs": "^6.11.1", "react": "^18.2.0", "react-18-input-autosize": "^3.0.0",