Application share qrcode (#1277)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/base/qrcode/index.tsx

@@ -0,0 +1,61 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { debounce } from 'lodash-es'
+import QRCode from 'qrcode.react'
+import Tooltip from '../tooltip'
+import QrcodeStyle from './style.module.css'
+
+type Props = {
+  content: string
+  selectorId: string
+  className?: string
+}
+
+const prefixEmbedded = 'appOverview.overview.appInfo.qrcode.title'
+
+const ShareQRCode = ({ content, selectorId, className }: Props) => {
+  const { t } = useTranslation()
+  const [isShow, setisShow] = useState<boolean>(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 (
+    <Tooltip
+      selector={`common-qrcode-show-${selectorId}`}
+      content={t(`${prefixEmbedded}`) || ''}
+    >
+      <div
+        className={`w-8 h-8 cursor-pointer rounded-lg ${className ?? ''}`}
+        onMouseLeave={onMouseLeave}
+        onClick={onClickShow}
+      >
+        <div className={`w-full h-full ${QrcodeStyle.QrcodeIcon} ${isShow ? QrcodeStyle.show : ''}`} />
+        {isShow && <div className={QrcodeStyle.qrcodeform}>
+          <QRCode size={160} value={content} className={QrcodeStyle.qrcodeimage}/>
+          <div className={QrcodeStyle.text}>
+            <div className={`text-gray-500 ${QrcodeStyle.scan}`}>{t('appOverview.overview.appInfo.qrcode.scan')}</div>
+            <div className={`text-gray-500 ${QrcodeStyle.scan}`}>·</div>
+            <div className={QrcodeStyle.download} onClick={downloadQR}>{t('appOverview.overview.appInfo.qrcode.download')}</div>
+          </div>
+        </div>
+        }
+      </div>
+    </Tooltip>
+  )
+}
+
+export default ShareQRCode

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;
+}