chore: relocate datasets api form (#31224)

2026-01-19 16:15:51 +08:00 · 2026-01-19 16:15:51 +08:00 · 2d4289a925
parent 88780c7eb7
commit 2d4289a925
11 changed files with 188 additions and 66 deletions
--- a/web/app/components/datasets/extra-info/api-access/card.tsx
+++ b/web/app/components/datasets/extra-info/api-access/card.tsx
@ -0,0 +1,92 @@
+import { RiArrowRightUpLine, RiBookOpenLine } from '@remixicon/react'
+import Link from 'next/link'
+import * as React from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Switch from '@/app/components/base/switch'
+import Indicator from '@/app/components/header/indicator'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
+import { useDisableDatasetServiceApi, useEnableDatasetServiceApi } from '@/service/knowledge/use-dataset'
+import { cn } from '@/utils/classnames'
+
+type CardProps = {
+  apiEnabled: boolean
+}
+
+const Card = ({
+  apiEnabled,
+}: CardProps) => {
+  const { t } = useTranslation()
+  const datasetId = useDatasetDetailContextWithSelector(state => state.dataset?.id)
+  const mutateDatasetRes = useDatasetDetailContextWithSelector(state => state.mutateDatasetRes)
+  const { mutateAsync: enableDatasetServiceApi } = useEnableDatasetServiceApi()
+  const { mutateAsync: disableDatasetServiceApi } = useDisableDatasetServiceApi()
+
+  const isCurrentWorkspaceManager = useAppContextSelector(state => state.isCurrentWorkspaceManager)
+
+  const apiReferenceUrl = useDatasetApiAccessUrl()
+
+  const onToggle = useCallback(async (state: boolean) => {
+    let result: 'success' | 'fail'
+    if (state)
+      result = (await enableDatasetServiceApi(datasetId ?? '')).result
+    else
+      result = (await disableDatasetServiceApi(datasetId ?? '')).result
+    if (result === 'success')
+      mutateDatasetRes?.()
+  }, [datasetId, enableDatasetServiceApi, mutateDatasetRes, disableDatasetServiceApi])
+
+  return (
+    <div className="w-[208px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
+      <div className="p-1">
+        <div className="p-2">
+          <div className="mb-1.5 flex justify-between">
+            <div className="flex items-center gap-1">
+              <Indicator
+                className="shrink-0"
+                color={apiEnabled ? 'green' : 'yellow'}
+              />
+              <div
+                className={cn(
+                  'system-xs-semibold-uppercase',
+                  apiEnabled ? 'text-text-success' : 'text-text-warning',
+                )}
+              >
+                {apiEnabled
+                  ? t('serviceApi.enabled', { ns: 'dataset' })
+                  : t('serviceApi.disabled', { ns: 'dataset' })}
+              </div>
+            </div>
+            <Switch
+              defaultValue={apiEnabled}
+              onChange={onToggle}
+              disabled={!isCurrentWorkspaceManager}
+            />
+          </div>
+          <div className="system-xs-regular text-text-tertiary">
+            {t('appMenus.apiAccessTip', { ns: 'common' })}
+          </div>
+        </div>
+      </div>
+      <div className="h-px bg-divider-subtle"></div>
+      <div className="p-1">
+        <Link
+          href={apiReferenceUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex h-8 items-center space-x-[7px] rounded-lg px-2 text-text-tertiary hover:bg-state-base-hover"
+        >
+          <RiBookOpenLine className="size-3.5 shrink-0" />
+          <div className="system-sm-regular grow truncate">
+            {t('overview.apiInfo.doc', { ns: 'appOverview' })}
+          </div>
+          <RiArrowRightUpLine className="size-3.5 shrink-0" />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Card)
--- a/web/app/components/datasets/extra-info/api-access/index.tsx
+++ b/web/app/components/datasets/extra-info/api-access/index.tsx
@ -0,0 +1,65 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import Indicator from '@/app/components/header/indicator'
+import { cn } from '@/utils/classnames'
+import Card from './card'
+
+type ApiAccessProps = {
+  expand: boolean
+  apiEnabled: boolean
+}
+
+const ApiAccess = ({
+  expand,
+  apiEnabled,
+}: ApiAccessProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const handleToggle = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <div className="p-3 pt-2">
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement="top-start"
+        offset={{
+          mainAxis: 4,
+          crossAxis: -4,
+        }}
+      >
+        <PortalToFollowElemTrigger
+          className="w-full"
+          onClick={handleToggle}
+        >
+          <div className={cn(
+            'relative flex h-8 cursor-pointer items-center gap-2 rounded-lg border border-components-panel-border px-3',
+            !expand && 'w-8 justify-center',
+            open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
+          )}
+          >
+            <ApiAggregate className="size-4 shrink-0 text-text-secondary" />
+            {expand && <div className="system-sm-medium grow text-text-secondary">{t('appMenus.apiAccess', { ns: 'common' })}</div>}
+            <Indicator
+              className={cn('shrink-0', !expand && 'absolute -right-px -top-px')}
+              color={apiEnabled ? 'green' : 'yellow'}
+            />
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className="z-[10]">
+          <Card
+            apiEnabled={apiEnabled}
+          />
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </div>
+  )
+}
+
+export default React.memo(ApiAccess)
--- a/web/app/components/datasets/extra-info/index.tsx
+++ b/web/app/components/datasets/extra-info/index.tsx
@ -1,8 +1,7 @@
 import type { RelatedAppResponse } from '@/models/datasets'
 import * as React from 'react'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
-import { useDatasetApiBaseUrl } from '@/service/knowledge/use-dataset'
-import ServiceApi from './service-api'
+import ApiAccess from './api-access'
 import Statistics from './statistics'

 type IExtraInfoProps = {
@ -17,7 +16,6 @@ const ExtraInfo = ({
  expand,
 }: IExtraInfoProps) => {
  const apiEnabled = useDatasetDetailContextWithSelector(state => state.dataset?.enable_api)
-  const { data: apiBaseInfo } = useDatasetApiBaseUrl()

  return (
    <>
@ -28,9 +26,8 @@ const ExtraInfo = ({
          relatedApps={relatedApps}
        />
      )}
-      <ServiceApi
+      <ApiAccess
        expand={expand}
-        apiBaseUrl={apiBaseInfo?.api_base_url ?? ''}
        apiEnabled={apiEnabled ?? false}
      />
    </>
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@ -6,45 +6,22 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
-import Switch from '@/app/components/base/switch'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 import Indicator from '@/app/components/header/indicator'
-import { useSelector as useAppContextSelector } from '@/context/app-context'
-import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
-import { useDisableDatasetServiceApi, useEnableDatasetServiceApi } from '@/service/knowledge/use-dataset'
-import { cn } from '@/utils/classnames'

 type CardProps = {
-  apiEnabled: boolean
  apiBaseUrl: string
 }

 const Card = ({
-  apiEnabled,
  apiBaseUrl,
 }: CardProps) => {
  const { t } = useTranslation()
-  const datasetId = useDatasetDetailContextWithSelector(state => state.dataset?.id)
-  const mutateDatasetRes = useDatasetDetailContextWithSelector(state => state.mutateDatasetRes)
-  const { mutateAsync: enableDatasetServiceApi } = useEnableDatasetServiceApi()
-  const { mutateAsync: disableDatasetServiceApi } = useDisableDatasetServiceApi()
  const [isSecretKeyModalVisible, setIsSecretKeyModalVisible] = useState(false)

-  const isCurrentWorkspaceManager = useAppContextSelector(state => state.isCurrentWorkspaceManager)
-
  const apiReferenceUrl = useDatasetApiAccessUrl()

-  const onToggle = useCallback(async (state: boolean) => {
-    let result: 'success' | 'fail'
-    if (state)
-      result = (await enableDatasetServiceApi(datasetId ?? '')).result
-    else
-      result = (await disableDatasetServiceApi(datasetId ?? '')).result
-    if (result === 'success')
-      mutateDatasetRes?.()
-  }, [datasetId, enableDatasetServiceApi, disableDatasetServiceApi])
-
  const handleOpenSecretKeyModal = useCallback(() => {
    setIsSecretKeyModalVisible(true)
  }, [])
@ -68,24 +45,16 @@ const Card = ({
          <div className="flex items-center gap-x-1">
            <Indicator
              className="shrink-0"
-              color={apiEnabled ? 'green' : 'yellow'}
+              color={
+                apiBaseUrl ? 'green' : 'yellow'
+              }
            />
            <div
-              className={cn(
-                'system-xs-semibold-uppercase',
-                apiEnabled ? 'text-text-success' : 'text-text-warning',
-              )}
+              className="system-xs-semibold-uppercase text-text-success"
            >
-              {apiEnabled
-                ? t('serviceApi.enabled', { ns: 'dataset' })
-                : t('serviceApi.disabled', { ns: 'dataset' })}
+              {t('serviceApi.enabled', { ns: 'dataset' })}
            </div>
          </div>
-          <Switch
-            defaultValue={apiEnabled}
-            onChange={onToggle}
-            disabled={!isCurrentWorkspaceManager}
-          />
        </div>
        <div className="flex flex-col">
          <div className="system-xs-regular leading-6 text-text-tertiary">
--- a/web/app/components/datasets/extra-info/service-api/index.tsx
+++ b/web/app/components/datasets/extra-info/service-api/index.tsx
@ -1,22 +1,17 @@
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Card from './card'

 type ServiceApiProps = {
-  expand: boolean
  apiBaseUrl: string
-  apiEnabled: boolean
 }

 const ServiceApi = ({
-  expand,
  apiBaseUrl,
-  apiEnabled,
 }: ServiceApiProps) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
@ -26,7 +21,7 @@ const ServiceApi = ({
  }

  return (
-    <div className="p-3 pt-2">
+    <div>
      <PortalToFollowElem
        open={open}
        onOpenChange={setOpen}
@ -41,22 +36,21 @@ const ServiceApi = ({
          onClick={handleToggle}
        >
          <div className={cn(
-            'relative flex h-8 cursor-pointer items-center gap-2 rounded-lg border border-components-panel-border px-3',
-            !expand && 'w-8 justify-center',
-            open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
+            'relative flex h-8 cursor-pointer items-center gap-2 rounded-lg border-[0.5px] border-components-button-secondary-border-hover bg-components-button-secondary-bg px-3',
+            open ? 'bg-components-button-secondary-bg-hover' : 'hover:bg-components-button-secondary-bg-hover',
          )}
          >
-            <ApiAggregate className="size-4 shrink-0 text-text-secondary" />
-            {expand && <div className="system-sm-medium grow text-text-secondary">{t('serviceApi.title', { ns: 'dataset' })}</div>}
            <Indicator
-              className={cn('shrink-0', !expand && 'absolute -right-px -top-px')}
-              color={apiEnabled ? 'green' : 'yellow'}
+              className={cn('shrink-0')}
+              color={
+                apiBaseUrl ? 'green' : 'yellow'
+              }
            />
+            <div className="system-sm-medium grow text-text-secondary">{t('serviceApi.title', { ns: 'dataset' })}</div>
          </div>
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent className="z-[10]">
          <Card
-            apiEnabled={apiEnabled}
            apiBaseUrl={apiBaseUrl}
          />
        </PortalToFollowElemContent>
--- a/web/app/components/datasets/list/index.tsx
+++ b/web/app/components/datasets/list/index.tsx
@ -14,13 +14,14 @@ import TagFilter from '@/app/components/base/tag-management/filter'
 // Hooks
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
-import { useAppContext } from '@/context/app-context'
+import { useAppContext, useSelector as useAppContextSelector } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
-
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useDatasetApiBaseUrl } from '@/service/knowledge/use-dataset'
 // Components
 import ExternalAPIPanel from '../external-api/external-api-panel'
+import ServiceApi from '../extra-info/service-api'
 import DatasetFooter from './dataset-footer'
 import Datasets from './datasets'

@ -58,6 +59,9 @@ const List = () => {
      return router.replace('/apps')
  }, [currentWorkspace, router])

+  const isCurrentWorkspaceManager = useAppContextSelector(state => state.isCurrentWorkspaceManager)
+  const { data: apiBaseInfo } = useDatasetApiBaseUrl()
+
  return (
    <div className="scroll-container relative flex grow flex-col overflow-y-auto bg-background-body">
      <div className="sticky top-0 z-10 flex items-center justify-end gap-x-1 bg-background-body px-12 pb-2 pt-4">
@ -81,6 +85,11 @@ const List = () => {
            onChange={e => handleKeywordsChange(e.target.value)}
            onClear={() => handleKeywordsChange('')}
          />
+          {
+            isCurrentWorkspaceManager && (
+              <ServiceApi apiBaseUrl={apiBaseInfo?.api_base_url ?? ''} />
+            )
+          }
          <div className="h-4 w-[1px] bg-divider-regular" />
          <Button
            className="shadows-shadow-xs gap-0.5"
@ -96,7 +105,6 @@ const List = () => {
      {showTagManagementModal && (
        <TagManagementModal type="knowledge" show={showTagManagementModal} />
      )}
-
      {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} />}
    </div>
  )
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@ -4223,11 +4223,6 @@
      "count": 1
    }
  },
-  "i18n/en-US/common.json": {
-    "no-irregular-whitespace": {
-      "count": 3
-    }
-  },
  "i18n/fr-FR/app-debug.json": {
    "no-irregular-whitespace": {
      "count": 1
--- a/web/i18n/en-US/common.json
+++ b/web/i18n/en-US/common.json
@ -91,6 +91,7 @@
  "apiBasedExtension.title": "API extensions provide centralized API management, simplifying configuration for easy use across Dify's applications.",
  "apiBasedExtension.type": "Type",
  "appMenus.apiAccess": "API Access",
+  "appMenus.apiAccessTip": "This knowledge base is accessible via the Service API",
  "appMenus.logAndAnn": "Logs & Annotations",
  "appMenus.logs": "Logs",
  "appMenus.overview": "Monitoring",
@ -281,7 +282,7 @@
  "model.params.setToCurrentModelMaxTokenTip": "Max token is updated to the 80% maximum token of the current model {{maxToken}}.",
  "model.params.stop_sequences": "Stop sequences",
  "model.params.stop_sequencesPlaceholder": "Enter sequence and press Tab",
-  "model.params.stop_sequencesTip": "Up to four sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.",
+  "model.params.stop_sequencesTip": "Up to four sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.",
  "model.params.temperature": "Temperature",
  "model.params.temperatureTip": "Controls randomness: Lowering results in less random completions. As the temperature approaches zero, the model will become deterministic and repetitive.",
  "model.params.top_p": "Top P",
--- a/web/i18n/en-US/dataset.json
+++ b/web/i18n/en-US/dataset.json
@ -170,7 +170,7 @@
  "serviceApi.card.endpoint": "Service API Endpoint",
  "serviceApi.card.title": "Backend service api",
  "serviceApi.disabled": "Disabled",
-  "serviceApi.enabled": "In Service",
+  "serviceApi.enabled": "Enabled",
  "serviceApi.title": "Service API",
  "unavailable": "Unavailable",
  "updated": "Updated",
--- a/web/i18n/zh-Hans/common.json
+++ b/web/i18n/zh-Hans/common.json
@ -91,6 +91,7 @@
  "apiBasedExtension.title": "API 扩展提供了一个集中式的 API 管理，在此统一添加 API 配置后，方便在 Dify 上的各类应用中直接使用。",
  "apiBasedExtension.type": "类型",
  "appMenus.apiAccess": "访问 API",
+  "appMenus.apiAccessTip": "此知识库可通过服务 API 访问",
  "appMenus.logAndAnn": "日志与标注",
  "appMenus.logs": "日志",
  "appMenus.overview": "监测",
--- a/web/i18n/zh-Hans/dataset.json
+++ b/web/i18n/zh-Hans/dataset.json
@ -170,7 +170,7 @@
  "serviceApi.card.endpoint": "API 端点",
  "serviceApi.card.title": "后端服务 API",
  "serviceApi.disabled": "已停用",
-  "serviceApi.enabled": "运行中",
+  "serviceApi.enabled": "已启用",
  "serviceApi.title": "服务 API",
  "unavailable": "不可用",
  "updated": "更新于",