Merge branch 'fix/upgrade-bug-fix' into e-300

2025-05-06 16:07:17 +08:00 · 2025-05-06 16:07:17 +08:00 · 2ec5007ba2
parent a41b194d4d b30308e85b
commit 2ec5007ba2
6 changed files with 145 additions and 71 deletions
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@ -6,19 +6,21 @@ import {
  RiDeleteBinLine,
  RiEditLine,
  RiEqualizer2Line,
+  RiExchange2Line,
+  RiFileCopy2Line,
  RiFileDownloadLine,
  RiFileUploadLine,
+  RiMoreLine,
 } from '@remixicon/react'
 import AppIcon from '../base/app-icon'
 import SwitchAppModal from '../app/switch-app-modal'
-import AccessControl from '../app/app-access-control'
 import cn from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
-import { copyApp, deleteApp, exportAppConfig, fetchAppDetail, updateAppInfo } from '@/service/apps'
+import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
 import DuplicateAppModal from '@/app/components/app/duplicate-modal'
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
@ -33,6 +35,7 @@ import ContentDialog from '@/app/components/base/content-dialog'
 import Button from '@/app/components/base/button'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView'
 import Divider from '../base/divider'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../base/portal-to-follow-elem'

 export type IAppInfoProps = {
  expand: boolean
@ -51,7 +54,6 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
  const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
  const [showImportDSLModal, setShowImportDSLModal] = useState<boolean>(false)
-  const [showAccessControl, setShowAccessControl] = useState<boolean>(false)
  const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])

  const mutateApps = useContextSelector(
@ -179,21 +181,13 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
    setShowConfirmDelete(false)
  }, [appDetail, mutateApps, notify, onPlanInfoChanged, replace, setAppDetail, t])

-  const handleClickAccessControl = useCallback(() => {
-    if (!appDetail)
-      return
-    setShowAccessControl(true)
-    setOpen(false)
-  }, [appDetail])
-  const handleAccessControlUpdate = useCallback(() => {
-    fetchAppDetail({ url: '/apps', id: appDetail!.id }).then((res) => {
-      setAppDetail(res)
-      setShowAccessControl(false)
-    })
-  }, [appDetail, setAppDetail])
-
  const { isCurrentWorkspaceEditor } = useAppContext()

+  const [showMore, setShowMore] = useState(false)
+  const handleTriggerMore = useCallback(() => {
+    setShowMore(true)
+  }, [setShowMore])
+
  if (!appDetail)
    return null

@ -278,7 +272,8 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                setOpen(false)
                setShowDuplicateModal(true)
              }}>
-              <span className='text-sm leading-5 text-gray-700'>{t('app.duplicate')}</span>
+              <RiFileCopy2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.duplicate')}</span>
            </Button>
            <Button
              size={'small'}
@ -289,22 +284,50 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
              <RiFileDownloadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.export')}</span>
            </Button>
-            {
-              (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (
+            <PortalToFollowElem
+              open={showMore}
+              onOpenChange={setShowMore}
+              placement='bottom-end'
+              offset={{
+                mainAxis: 4,
+              }}>
+              <PortalToFollowElemTrigger onClick={handleTriggerMore}>
                <Button
                  size={'small'}
                  variant={'secondary'}
                  className='gap-[1px]'
-                  onClick={() => {
-                    setOpen(false)
-                    setShowImportDSLModal(true)
-                  }}
                >
-                  <RiFileUploadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
-                  <span className='system-xs-medium text-components-button-secondary-text'>{t('workflow.common.importDSL')}</span>
+                  <RiMoreLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+                  <span className='system-xs-medium text-components-button-secondary-text'>{t('common.operation.more')}</span>
                </Button>
-              )
-            }
+              </PortalToFollowElemTrigger>
+              <PortalToFollowElemContent className='z-[21]'>
+                <div className='flex w-[264px] flex-col rounded-[12px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'>
+                  {
+                    (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow')
+                    && <div className='flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover'
+                      onClick={() => {
+                        setOpen(false)
+                        setShowImportDSLModal(true)
+                      }}>
+                      <RiFileUploadLine className='h-4 w-4 text-text-tertiary' />
+                      <span className='system-md-regular text-text-secondary'>{t('workflow.common.importDSL')}</span>
+                    </div>
+                  }
+                  {
+                    (appDetail.mode === 'completion' || appDetail.mode === 'chat')
+                    && <div className='flex h-8 cursor-pointer items-center gap-x-1 rounded-lg p-1.5 hover:bg-state-base-hover'
+                      onClick={() => {
+                        setOpen(false)
+                        setShowSwitchModal(true)
+                      }}>
+                      <RiExchange2Line className='h-4 w-4 text-text-tertiary' />
+                      <span className='system-md-regular text-text-secondary'>{t('app.switch')}</span>
+                    </div>
+                  }
+                </div>
+              </PortalToFollowElemContent>
+            </PortalToFollowElem>
          </div>
        </div>
        <div className='flex flex-1'>
@ -315,10 +338,6 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
          />
        </div>
        <Divider />
-        {/* TODO update style figma */}
-        <div className='mx-1 flex h-9 cursor-pointer items-center rounded-lg px-3 py-2 hover:bg-gray-50' onClick={handleClickAccessControl}>
-          <span className='text-sm leading-5 text-gray-700'>{t('app.accessControl')}</span>
-        </div>
        <div className='flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch border-t-[0.5px] border-divider-subtle p-2'>
          <Button
            size={'medium'}
@ -393,11 +412,6 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
          onClose={() => setSecretEnvList([])}
        />
      )}
-      {
-        showAccessControl && <AccessControl app={appDetail}
-          onConfirm={handleAccessControlUpdate}
-          onClose={() => { setShowAccessControl(false) }} />
-      }
    </div>
  )
 }
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@ -89,7 +89,7 @@ const AppPublisher = ({
  const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
  const appURL = `${appBaseURL}${basePath}/${appMode}/${accessToken}`
  const isChatApp = ['chat', 'agent-chat', 'completion'].includes(appDetail?.mode || '')
-  const { data: useCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
+  const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
  const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)

  useEffect(() => {
@ -287,9 +287,10 @@ const AppPublisher = ({
                  {!isAppAccessSet && <p className='system-xs-regular mt-1 text-text-warning'>{t('app.publishApp.notSetDesc')}</p>}
                </div>
                <div className='flex flex-col gap-y-1 border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
-                  <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                  <Tooltip triggerClassName='flex' disabled={userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
                    <SuggestedAction
-                      disabled={!publishedAt}
+                      className='flex-1'
+                      disabled={!publishedAt || !userCanAccessApp?.result}
                      link={appURL}
                      icon={<RiPlayCircleLine className='h-4 w-4' />}
                    >
@ -298,9 +299,10 @@ const AppPublisher = ({
                  </Tooltip>
                  {appDetail?.mode === 'workflow' || appDetail?.mode === 'completion'
                    ? (
-                      <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                      <Tooltip triggerClassName='flex' disabled={userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
                        <SuggestedAction
-                          disabled={!publishedAt}
+                          className='flex-1'
+                          disabled={!publishedAt || !userCanAccessApp?.result}
                          link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
                          icon={<RiPlayList2Line className='h-4 w-4' />}
                        >
@ -320,44 +322,41 @@ const AppPublisher = ({
                        {t('workflow.common.embedIntoSite')}
                      </SuggestedAction>
                    )}
-                  <Tooltip triggerClassName='flex' disabled={useCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                  <Tooltip triggerClassName='flex' disabled={userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
                    <SuggestedAction
+                      className='flex-1'
                      onClick={() => {
                        publishedAt && handleOpenInExplore()
                      }}
-                      disabled={!publishedAt}
+                      disabled={!publishedAt || !userCanAccessApp?.result}
                      icon={<RiPlanetLine className='h-4 w-4' />}
                    >
                      {t('workflow.common.openInExplore')}
                    </SuggestedAction>
                  </Tooltip>
-                  <div className='flex'>
-                    <SuggestedAction
-                      disabled={!publishedAt}
-                      link='./develop'
-                      icon={<RiTerminalBoxLine className='h-4 w-4' />}
-                    >
-                      {t('workflow.common.accessAPIReference')}
-                    </SuggestedAction>
-                  </div>
+                  <SuggestedAction
+                    disabled={!publishedAt}
+                    link='./develop'
+                    icon={<RiTerminalBoxLine className='h-4 w-4' />}
+                  >
+                    {t('workflow.common.accessAPIReference')}
+                  </SuggestedAction>
                  {appDetail?.mode === 'workflow' && (
-                    <div className='flex' >
-                      <WorkflowToolConfigureButton
-                        disabled={!publishedAt}
-                        published={!!toolPublished}
-                        detailNeedUpdate={!!toolPublished && published}
-                        workflowAppId={appDetail?.id}
-                        icon={{
-                          content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
-                          background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
-                        }}
-                        name={appDetail?.name}
-                        description={appDetail?.description}
-                        inputs={inputs}
-                        handlePublish={handlePublish}
-                        onRefreshData={onRefreshData}
-                      />
-                    </div>
+                    <WorkflowToolConfigureButton
+                      disabled={!publishedAt}
+                      published={!!toolPublished}
+                      detailNeedUpdate={!!toolPublished && published}
+                      workflowAppId={appDetail?.id}
+                      icon={{
+                        content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
+                        background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
+                      }}
+                      name={appDetail?.name}
+                      description={appDetail?.description}
+                      inputs={inputs}
+                      handlePublish={handlePublish}
+                      onRefreshData={onRefreshData}
+                    />
                  )}
                </div>
              </>}
--- a/web/app/components/app/overview/appCard.tsx
+++ b/web/app/components/app/overview/appCard.tsx
@ -1,11 +1,13 @@
 'use client'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowRightSLine,
  RiBookOpenLine,
  RiEqualizer2Line,
  RiExternalLinkLine,
+  RiLockLine,
  RiPaintBrushLine,
  RiWindowLine,
 } from '@remixicon/react'
@ -17,6 +19,7 @@ import type { ConfigParams } from './settings'
 import Tooltip from '@/app/components/base/tooltip'
 import AppBasic from '@/app/components/app-sidebar/basic'
 import { asyncRunSafe, randomString } from '@/utils'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import { basePath } from '@/utils/var'
 import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
@ -29,6 +32,11 @@ import type { AppDetailResponse } from '@/models/app'
 import { useAppContext } from '@/context/app-context'
 import type { AppSSO } from '@/types/app'
 import Indicator from '@/app/components/header/indicator'
+import { fetchAppDetail } from '@/service/apps'
+import { AccessMode } from '@/models/access-control'
+import AccessControl from '../app-access-control'
+import { useAppWhiteListSubjects } from '@/service/access-control'
+import { useGlobalPublicStore } from '@/context/global-public-context'

 export type IAppCardProps = {
  className?: string
@ -54,13 +62,17 @@ function AppCard({
  const router = useRouter()
  const pathname = usePathname()
  const { isCurrentWorkspaceManager, isCurrentWorkspaceEditor } = useAppContext()
+  const appDetail = useAppStore(state => state.appDetail)
+  const setAppDetail = useAppStore(state => state.setAppDetail)
  const [showSettingsModal, setShowSettingsModal] = useState(false)
  const [showEmbedded, setShowEmbedded] = useState(false)
  const [showCustomizeModal, setShowCustomizeModal] = useState(false)
  const [genLoading, setGenLoading] = useState(false)
  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
-
+  const [showAccessControl, setShowAccessControl] = useState<boolean>(false)
  const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const { data: appAccessSubjects } = useAppWhiteListSubjects(appDetail?.id, systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)

  const OPERATIONS_MAP = useMemo(() => {
    const operationsMap = {
@ -128,6 +140,31 @@ function AppCard({
    }
  }

+  const [isAppAccessSet, setIsAppAccessSet] = useState(true)
+  useEffect(() => {
+    if (appDetail && appAccessSubjects) {
+      if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
+        setIsAppAccessSet(false)
+      else
+        setIsAppAccessSet(true)
+    }
+    else {
+      setIsAppAccessSet(true)
+    }
+  }, [appAccessSubjects, appDetail])
+
+  const handleClickAccessControl = useCallback(() => {
+    if (!appDetail)
+      return
+    setShowAccessControl(true)
+  }, [appDetail])
+  const handleAccessControlUpdate = useCallback(() => {
+    fetchAppDetail({ url: '/apps', id: appDetail!.id }).then((res) => {
+      setAppDetail(res)
+      setShowAccessControl(false)
+    })
+  }, [appDetail, setAppDetail])
+
  return (
    <div
      className={
@ -206,6 +243,22 @@ function AppCard({
              )}
            </div>
          </div>
+          {isApp && systemFeatures.webapp_auth.enabled && appDetail && <div className='flex flex-col items-start justify-center self-stretch'>
+            <div className="system-xs-medium pb-1 text-text-tertiary">{t('app.publishApp.title')}</div>
+            <div className='flex h-9 w-full cursor-pointer items-center gap-x-0.5  rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2'
+              onClick={handleClickAccessControl}>
+              <div className='flex grow items-center gap-x-1.5 pr-1'>
+                <RiLockLine className='h-4 w-4 shrink-0 text-text-secondary' />
+                {appDetail?.access_mode === AccessMode.ORGANIZATION && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
+                {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
+                {appDetail?.access_mode === AccessMode.PUBLIC && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
+              </div>
+              {!isAppAccessSet && <p className='system-xs-regular shrink-0 text-text-tertiary'>{t('app.publishApp.notSet')}</p>}
+              <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+                <RiArrowRightSLine className='h-4 w-4 text-text-quaternary' />
+              </div>
+            </div>
+          </div>}
        </div>
        <div className={'flex items-center gap-1 self-stretch p-3'}>
          {!isApp && <SecretKeyButton appId={appInfo.id} />}
@ -264,6 +317,11 @@ function AppCard({
              api_base_url={appInfo.api_base_url}
              mode={appInfo.mode}
            />
+            {
+              showAccessControl && <AccessControl app={appDetail!}
+                onConfirm={handleAccessControlUpdate}
+                onClose={() => { setShowAccessControl(false) }} />
+            }
          </>
        )
        : null}
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@ -57,6 +57,7 @@ const translation = {
    submit: 'Submit',
    skip: 'Skip',
    format: 'Format',
+    more: 'More',
  },
  errorMsg: {
    fieldRequired: '{{field}} is required',
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@ -57,6 +57,7 @@ const translation = {
    copied: 'コピーしました',
    in: '中',
    format: 'フォーマット',
+    more: 'もっと',
  },
  errorMsg: {
    fieldRequired: '{{field}}は必要です',
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -57,6 +57,7 @@ const translation = {
    submit: '提交',
    skip: '跳过',
    format: '格式化',
+    more: '更多',
  },
  errorMsg: {
    fieldRequired: '{{field}} 为必填项',