Feat/embedding (#553)

Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
This commit is contained in:
zxhlyh
2023-07-12 17:27:50 +08:00
committed by GitHub
parent 397a92f2ee
commit fec607db81
33 changed files with 2208 additions and 41 deletions

View File

@@ -1,4 +1,5 @@
'use client'
import type { FC } from 'react'
import React, { useState } from 'react'
import {
Cog8ToothIcon,
@@ -11,6 +12,7 @@ import { usePathname, useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import SettingsModal from './settings'
import ShareLink from './share-link'
import EmbeddedModal from './embedded'
import CustomizeModal from './customize'
import Tooltip from '@/app/components/base/tooltip'
import AppBasic, { randomString } from '@/app/components/app-sidebar/basic'
@@ -18,6 +20,8 @@ import Button from '@/app/components/base/button'
import Tag from '@/app/components/base/tag'
import Switch from '@/app/components/base/switch'
import type { AppDetailResponse } from '@/models/app'
import './style.css'
import { AppType } from '@/types/app'
export type IAppCardProps = {
className?: string
@@ -29,6 +33,10 @@ export type IAppCardProps = {
onGenerateCode?: () => Promise<any>
}
const EmbedIcon: FC<{ className?: string }> = ({ className = '' }) => {
return <div className={`codeBrowserIcon ${className}`}></div>
}
function AppCard({
appInfo,
cardType = 'app',
@@ -42,6 +50,7 @@ function AppCard({
const pathname = usePathname()
const [showSettingsModal, setShowSettingsModal] = useState(false)
const [showShareModal, setShowShareModal] = useState(false)
const [showEmbedded, setShowEmbedded] = useState(false)
const [showCustomizeModal, setShowCustomizeModal] = useState(false)
const { t } = useTranslation()
@@ -49,8 +58,9 @@ function AppCard({
webapp: [
{ opName: t('appOverview.overview.appInfo.preview'), opIcon: RocketLaunchIcon },
{ opName: t('appOverview.overview.appInfo.share.entry'), opIcon: ShareIcon },
appInfo.mode === AppType.chat ? { opName: t('appOverview.overview.appInfo.embedded.entry'), opIcon: EmbedIcon } : false,
{ opName: t('appOverview.overview.appInfo.settings.entry'), opIcon: Cog8ToothIcon },
],
].filter(item => !!item),
api: [{ opName: t('appOverview.overview.apiInfo.doc'), opIcon: DocumentTextIcon }],
app: [],
}
@@ -80,6 +90,10 @@ function AppCard({
return () => {
setShowSettingsModal(true)
}
case t('appOverview.overview.appInfo.embedded.entry'):
return () => {
setShowEmbedded(true)
}
default:
// jump to page develop
return () => {
@@ -139,20 +153,20 @@ function AppCard({
key={op.opName}
onClick={genClickFuncByName(op.opName)}
disabled={
[t('appOverview.overview.appInfo.preview'), t('appOverview.overview.appInfo.share.entry')].includes(op.opName) && !runningStatus
[t('appOverview.overview.appInfo.preview'), t('appOverview.overview.appInfo.share.entry'), t('appOverview.overview.appInfo.embedded.entry')].includes(op.opName) && !runningStatus
}
>
<Tooltip
content={t('appOverview.overview.appInfo.preUseReminder') ?? ''}
selector={`op-btn-${randomString(16)}`}
className={
([t('appOverview.overview.appInfo.preview'), t('appOverview.overview.appInfo.share.entry')].includes(op.opName) && !runningStatus)
([t('appOverview.overview.appInfo.preview'), t('appOverview.overview.appInfo.share.entry'), t('appOverview.overview.appInfo.embedded.entry')].includes(op.opName) && !runningStatus)
? 'mt-[-8px]'
: '!hidden'
}
>
<div className="flex flex-row items-center">
<op.opIcon className="h-4 w-4 mr-1.5" />
<op.opIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
<span className="text-xs">{op.opName}</span>
</div>
</Tooltip>
@@ -193,6 +207,12 @@ function AppCard({
onClose={() => setShowSettingsModal(false)}
onSave={onSaveSiteConfig}
/>
<EmbeddedModal
isShow={showEmbedded}
onClose={() => setShowEmbedded(false)}
appBaseUrl={app_base_url}
accessToken={access_token}
/>
<CustomizeModal
isShow={showCustomizeModal}
linkUrl=""