dify

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import ShareQRCode from '.'
+
+const QRDemo = ({
+  content = 'https://dify.ai',
+}: {
+  content?: string
+}) => {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Share QR</p>
+      <div className="flex items-center gap-2 text-sm text-text-secondary">
+        <span>Generated URL:</span>
+        <code className="rounded-md bg-background-default px-2 py-1 text-[11px]">{content}</code>
+      </div>
+      <ShareQRCode content={content} />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Data Display/QRCode',
+  component: QRDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Toggleable QR code generator for sharing app URLs. Clicking the trigger reveals the code with a download CTA.',
+      },
+    },
+  },
+  argTypes: {
+    content: {
+      control: 'text',
+    },
+  },
+  args: {
+    content: 'https://dify.ai',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof QRDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const DemoLink: Story = {
+  args: {
+    content: 'https://dify.ai/docs',
+  },
+}

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

@@ -0,0 +1,80 @@
+'use client'
+import React, { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiQrCodeLine,
+} from '@remixicon/react'
+import { QRCodeCanvas as QRCode } from 'qrcode.react'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+
+type Props = {
+  content: string
+}
+
+const prefixEmbedded = 'appOverview.overview.appInfo.qrcode.title'
+
+const ShareQRCode = ({ content }: Props) => {
+  const { t } = useTranslation()
+  const [isShow, setIsShow] = useState<boolean>(false)
+  const qrCodeRef = useRef<HTMLDivElement>(null)
+
+  const toggleQRCode = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    setIsShow(prev => !prev)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (qrCodeRef.current && !qrCodeRef.current.contains(event.target as Node))
+        setIsShow(false)
+    }
+
+    if (isShow)
+      document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [isShow])
+
+  const downloadQR = () => {
+    const canvas = document.getElementsByTagName('canvas')[0]
+    const link = document.createElement('a')
+    link.download = 'qrcode.png'
+    link.href = canvas.toDataURL()
+    link.click()
+  }
+
+  const handlePanelClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+  }
+
+  return (
+    <Tooltip
+      popupContent={t(`${prefixEmbedded}`) || ''}
+    >
+      <div className='relative h-6 w-6' onClick={toggleQRCode}>
+        <ActionButton>
+          <RiQrCodeLine className='h-4 w-4' />
+        </ActionButton>
+        {isShow && (
+          <div
+            ref={qrCodeRef}
+            className='absolute -right-8 top-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs'
+            onClick={handlePanelClick}
+          >
+            <QRCode size={160} value={content} className='mb-2' />
+            <div className='system-xs-regular flex items-center'>
+              <div className='text-text-tertiary'>{t('appOverview.overview.appInfo.qrcode.scan')}</div>
+              <div className='text-text-tertiary'>·</div>
+              <div className='cursor-pointer text-text-accent-secondary' onClick={downloadQR}>{t('appOverview.overview.appInfo.qrcode.download')}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </Tooltip>
+  )
+}
+
+export default ShareQRCode