AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-13 14:19:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: api page dark mode (#18078)

Browse Source
This commit is contained in:
KVOJJJin 2025-04-15 16:13:18 +08:00 committed by GitHub
parent d119c7d629
commit f27a956c71
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 51 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/(commonLayout)/datasets/Container.tsx
View File

@ -11,7 +11,7 @@ import { useQuery } from '@tanstack/react-query'
import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel' import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
import Datasets from './Datasets' import Datasets from './Datasets'
import DatasetFooter from './DatasetFooter' import DatasetFooter from './DatasetFooter'
import ApiServer from './ApiServer' import ApiServer from '../../components/develop/ApiServer'
import Doc from './Doc' import Doc from './Doc'
import TabSliderNew from '@/app/components/base/tab-slider-new' import TabSliderNew from '@/app/components/base/tab-slider-new'
import TagManagementModal from '@/app/components/base/tag-management' import TagManagementModal from '@/app/components/base/tag-management'

18
web/app/(commonLayout)/datasets/Doc.tsx
View File

@ -9,6 +9,9 @@ import TemplateZh from './template/template.zh.mdx'
import TemplateJa from './template/template.ja.mdx' import TemplateJa from './template/template.ja.mdx'
import I18n from '@/context/i18n' import I18n from '@/context/i18n'
import { LanguagesSupported } from '@/i18n/language' import { LanguagesSupported } from '@/i18n/language'
import useTheme from '@/hooks/use-theme'
import { Theme } from '@/types/app'
import cn from '@/utils/classnames'
type DocProps = { type DocProps = {
apiBaseUrl: string apiBaseUrl: string
@ -19,6 +22,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const [toc, setToc] = useState<Array<{ href: string; text: string }>>([]) const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
const [isTocExpanded, setIsTocExpanded] = useState(false) const [isTocExpanded, setIsTocExpanded] = useState(false)
const { theme } = useTheme()
// Set initial TOC expanded state based on screen width // Set initial TOC expanded state based on screen width
useEffect(() => { useEffect(() => {
@ -83,12 +87,12 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
<div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}> <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
{isTocExpanded {isTocExpanded
? ( ? (
<nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md"> <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3> <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
<button <button
onClick={() => setIsTocExpanded(false)} onClick={() => setIsTocExpanded(false)}
className="text-gray-500 hover:text-gray-700" className="text-text-tertiary hover:text-text-secondary"
> >
✕ ✕
</button> </button>
@ -98,7 +102,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
<li key={index}> <li key={index}>
<a <a
href={item.href} href={item.href}
className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline" className="text-text-secondary transition-colors duration-200 hover:text-text-primary hover:underline"
onClick={e => handleTocClick(e, item)} onClick={e => handleTocClick(e, item)}
> >
{item.text} {item.text}
@ -111,13 +115,13 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
: ( : (
<button <button
onClick={() => setIsTocExpanded(true)} onClick={() => setIsTocExpanded(true)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100" className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
> >
<RiListUnordered className="h-6 w-6" /> <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
</button> </button>
)} )}
</div> </div>
<article className='prose-xl prose mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'> <article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'dark:prose-invert')}>
{Template} {Template}
</article> </article>
</div> </div>

17
web/app/(commonLayout)/datasets/ApiServer.tsx → web/app/components/develop/ApiServer.tsx
View File

@ -4,7 +4,6 @@ import type { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import CopyFeedback from '@/app/components/base/copy-feedback' import CopyFeedback from '@/app/components/base/copy-feedback'
import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button' import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
import { randomString } from '@/utils'
type ApiServerProps = { type ApiServerProps = {
apiBaseUrl: string apiBaseUrl: string
@ -16,21 +15,17 @@ const ApiServer: FC<ApiServerProps> = ({
return ( return (
<div className='flex flex-wrap items-center gap-y-2'> <div className='flex flex-wrap items-center gap-y-2'>
<div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-white bg-white/80 pl-1.5 pr-1 leading-5'> <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-components-input-border-active bg-components-input-bg-normal pl-1.5 pr-1 leading-5'>
<div className='mr-0.5 h-5 shrink-0 rounded-md border border-gray-200 px-1.5 text-[11px] text-gray-500'>{t('appApi.apiServer')}</div> <div className='mr-0.5 h-5 shrink-0 rounded-md border border-divider-subtle px-1.5 text-[11px] text-text-tertiary'>{t('appApi.apiServer')}</div>
<div className='w-fit truncate px-1 text-[13px] font-medium text-gray-800 sm:w-[248px]'>{apiBaseUrl}</div> <div className='w-fit truncate px-1 text-[13px] font-medium text-text-secondary sm:w-[248px]'>{apiBaseUrl}</div>
<div className='mx-1 h-[14px] w-[1px] bg-gray-200'></div> <div className='mx-1 h-[14px] w-[1px] bg-divider-regular'></div>
<CopyFeedback <CopyFeedback content={apiBaseUrl}/>
content={apiBaseUrl}
selectorId={randomString(8)}
className={'!h-6 !w-6 hover:bg-gray-200'}
/>
</div> </div>
<div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'> <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'>
{t('appApi.ok')} {t('appApi.ok')}
</div> </div>
<SecretKeyButton <SecretKeyButton
className='!h-8 shrink-0 bg-white' className='!h-8 shrink-0'
/> />
</div> </div>
) )

18
web/app/components/develop/doc.tsx
View File

@ -17,6 +17,9 @@ import TemplateChatZh from './template/template_chat.zh.mdx'
import TemplateChatJa from './template/template_chat.ja.mdx' import TemplateChatJa from './template/template_chat.ja.mdx'
import I18n from '@/context/i18n' import I18n from '@/context/i18n'
import { LanguagesSupported } from '@/i18n/language' import { LanguagesSupported } from '@/i18n/language'
import useTheme from '@/hooks/use-theme'
import { Theme } from '@/types/app'
import cn from '@/utils/classnames'
type IDocProps = { type IDocProps = {
appDetail: any appDetail: any
@ -27,6 +30,7 @@ const Doc = ({ appDetail }: IDocProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const [toc, setToc] = useState<Array<{ href: string; text: string }>>([]) const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
const [isTocExpanded, setIsTocExpanded] = useState(false) const [isTocExpanded, setIsTocExpanded] = useState(false)
const { theme } = useTheme()
const variables = appDetail?.model_config?.configs?.prompt_variables || [] const variables = appDetail?.model_config?.configs?.prompt_variables || []
const inputs = variables.reduce((res: any, variable: any) => { const inputs = variables.reduce((res: any, variable: any) => {
@ -83,12 +87,12 @@ const Doc = ({ appDetail }: IDocProps) => {
<div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}> <div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
{isTocExpanded {isTocExpanded
? ( ? (
<nav className="toc w-full rounded-lg bg-gray-50 p-4 shadow-md"> <nav className="toc w-full rounded-lg bg-components-panel-bg p-4 shadow-md">
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3> <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
<button <button
onClick={() => setIsTocExpanded(false)} onClick={() => setIsTocExpanded(false)}
className="text-gray-500 hover:text-gray-700" className="text-text-tertiary hover:text-text-secondary"
> >
✕ ✕
</button> </button>
@ -98,7 +102,7 @@ const Doc = ({ appDetail }: IDocProps) => {
<li key={index}> <li key={index}>
<a <a
href={item.href} href={item.href}
className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline" className="text-text-secondary transition-colors duration-200 hover:text-text-primary hover:underline"
onClick={e => handleTocClick(e, item)} onClick={e => handleTocClick(e, item)}
> >
{item.text} {item.text}
@ -111,13 +115,13 @@ const Doc = ({ appDetail }: IDocProps) => {
: ( : (
<button <button
onClick={() => setIsTocExpanded(true)} onClick={() => setIsTocExpanded(true)}
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100" className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
> >
<RiListUnordered className="h-6 w-6" /> <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
</button> </button>
)} )}
</div> </div>
<article className="prose-xl prose" > <article className={cn('prose-xl prose', theme === Theme.dark && 'dark:prose-invert')} >
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && ( {(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
(() => { (() => {
switch (locale) { switch (locale) {

26
web/app/components/develop/index.tsx
View File

@ -1,10 +1,7 @@
'use client' 'use client'
import { useTranslation } from 'react-i18next'
import s from './secret-key/style.module.css'
import Doc from '@/app/components/develop/doc' import Doc from '@/app/components/develop/doc'
import Loading from '@/app/components/base/loading' import Loading from '@/app/components/base/loading'
import InputCopy from '@/app/components/develop/secret-key/input-copy' import ApiServer from '@/app/components/develop/ApiServer'
import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
import { useStore as useAppStore } from '@/app/components/app/store' import { useStore as useAppStore } from '@/app/components/app/store'
type IDevelopMainProps = { type IDevelopMainProps = {
@ -13,11 +10,10 @@ type IDevelopMainProps = {
const DevelopMain = ({ appId }: IDevelopMainProps) => { const DevelopMain = ({ appId }: IDevelopMainProps) => {
const appDetail = useAppStore(state => state.appDetail) const appDetail = useAppStore(state => state.appDetail)
const { t } = useTranslation()
if (!appDetail) { if (!appDetail) {
return ( return (
<div className='flex h-full items-center justify-center bg-white'> <div className='flex h-full items-center justify-center bg-background-default'>
<Loading /> <Loading />
</div> </div>
) )
@ -25,21 +21,9 @@ const DevelopMain = ({ appId }: IDevelopMainProps) => {
return ( return (
<div className='relative flex h-full flex-col overflow-hidden'> <div className='relative flex h-full flex-col overflow-hidden'>
<div className='flex shrink-0 items-center justify-between border-b border-solid border-b-gray-100 px-6 py-2'> <div className='flex shrink-0 items-center justify-between border-b border-solid border-b-divider-regular px-6 py-2'>
<div className='text-lg font-medium text-gray-900'></div> <div className='text-lg font-medium text-text-primary'></div>
<div className='flex flex-wrap items-center gap-y-1'> <ApiServer apiBaseUrl={appDetail.api_base_url} />
<InputCopy className='mr-1 w-52 shrink-0 sm:w-80' value={appDetail.api_base_url}>
<div className={`ml-2 shrink-0 rounded-[6px] border border-solid border-gray-200 px-2 py-0.5 text-[0.625rem] text-gray-500 ${s.customApi}`}>
{t('appApi.apiServer')}
</div>
</InputCopy>
<div className={`mr-2 flex h-9 items-center rounded-lg
px-3 text-[13px] font-normal ${appDetail.enable_api ? 'bg-green-50 text-green-500' : 'bg-yellow-50 text-yellow-500'}`}>
<div className='mr-1'>{t('appApi.status')}</div>
<div className='font-semibold'>{appDetail.enable_api ? `${t('appApi.ok')}` : `${t('appApi.disabled')}`}</div>
</div>
<SecretKeyButton className='shrink-0' appId={appId} />
</div>
</div> </div>
<div className='grow overflow-auto px-4 py-4 sm:px-10'> <div className='grow overflow-auto px-4 py-4 sm:px-10'>
<Doc appDetail={appDetail} /> <Doc appDetail={appDetail} />

54
web/app/components/develop/secret-key/secret-key-modal.tsx
View File

@ -1,16 +1,17 @@
'use client' 'use client'
import { import {
useEffect,
useState, useState,
} from 'react' } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RiDeleteBinLine } from '@remixicon/react'
import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid' import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
import useSWR, { useSWRConfig } from 'swr' import useSWR, { useSWRConfig } from 'swr'
import copy from 'copy-to-clipboard'
import SecretKeyGenerateModal from './secret-key-generate' import SecretKeyGenerateModal from './secret-key-generate'
import s from './style.module.css' import s from './style.module.css'
import ActionButton from '@/app/components/base/action-button'
import Modal from '@/app/components/base/modal' import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import CopyFeedback from '@/app/components/base/copy-feedback'
import { import {
createApikey as createAppApikey, createApikey as createAppApikey,
delApikey as delAppApikey, delApikey as delAppApikey,
@ -22,7 +23,6 @@ import {
fetchApiKeysList as fetchDatasetApiKeysList, fetchApiKeysList as fetchDatasetApiKeysList,
} from '@/service/datasets' } from '@/service/datasets'
import type { CreateApiKeyResponse } from '@/models/app' import type { CreateApiKeyResponse } from '@/models/app'
import Tooltip from '@/app/components/base/tooltip'
import Loading from '@/app/components/base/loading' import Loading from '@/app/components/base/loading'
import Confirm from '@/app/components/base/confirm' import Confirm from '@/app/components/base/confirm'
import useTimestamp from '@/hooks/use-timestamp' import useTimestamp from '@/hooks/use-timestamp'
@ -54,20 +54,6 @@ const SecretKeyModal = ({
const [delKeyID, setDelKeyId] = useState('') const [delKeyID, setDelKeyId] = useState('')
const [copyValue, setCopyValue] = useState('')
useEffect(() => {
if (copyValue) {
const timeout = setTimeout(() => {
setCopyValue('')
}, 1000)
return () => {
clearTimeout(timeout)
}
}
}, [copyValue])
const onDel = async () => { const onDel = async () => {
setShowConfirmDelete(false) setShowConfirmDelete(false)
if (!delKeyID) if (!delKeyID)
@ -104,7 +90,7 @@ const SecretKeyModal = ({
{ {
!!apiKeysList?.data?.length && ( !!apiKeysList?.data?.length && (
<div className='mt-4 flex grow flex-col overflow-hidden'> <div className='mt-4 flex grow flex-col overflow-hidden'>
<div className='flex h-9 shrink-0 items-center border-b border-solid text-xs font-semibold text-text-tertiary'> <div className='flex h-9 shrink-0 items-center border-b border-divider-regular text-xs font-semibold text-text-tertiary'>
<div className='w-64 shrink-0 px-3'>{t('appApi.apiKeyModal.secretKey')}</div> <div className='w-64 shrink-0 px-3'>{t('appApi.apiKeyModal.secretKey')}</div>
<div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.created')}</div> <div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.created')}</div>
<div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.lastUsed')}</div> <div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.lastUsed')}</div>
@ -112,28 +98,22 @@ const SecretKeyModal = ({
</div> </div>
<div className='grow overflow-auto'> <div className='grow overflow-auto'>
{apiKeysList.data.map(api => ( {apiKeysList.data.map(api => (
<div className='flex h-9 items-center border-b border-solid text-sm font-normal text-text-secondary' key={api.id}> <div className='flex h-9 items-center border-b border-divider-regular text-sm font-normal text-text-secondary' key={api.id}>
<div className='w-64 shrink-0 truncate px-3 font-mono'>{generateToken(api.token)}</div> <div className='w-64 shrink-0 truncate px-3 font-mono'>{generateToken(api.token)}</div>
<div className='w-[200px] shrink-0 truncate px-3'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div> <div className='w-[200px] shrink-0 truncate px-3'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div>
<div className='w-[200px] shrink-0 truncate px-3'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div> <div className='w-[200px] shrink-0 truncate px-3'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div>
<div className='flex grow px-3'> <div className='flex grow space-x-2 px-3'>
<Tooltip <CopyFeedback content={api.token} />
popupContent={copyValue === api.token ? `${t('appApi.copied')}` : `${t('appApi.copy')}`} {isCurrentWorkspaceManager && (
popupClassName='mr-1' <ActionButton
> onClick={() => {
<div className={`mr-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${copyValue === api.token ? s.copied : ''}`} onClick={() => { setDelKeyId(api.id)
// setIsCopied(true) setShowConfirmDelete(true)
copy(api.token) }}
setCopyValue(api.token) >
}}></div> <RiDeleteBinLine className='h-4 w-4' />
</Tooltip> </ActionButton>
{isCurrentWorkspaceManager )}
&& <div className={`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg ${s.trashIcon}`} onClick={() => {
setDelKeyId(api.id)
setShowConfirmDelete(true)
}}>
</div>
}
</div> </div>
</div> </div>
))} ))}