AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 20:48:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: make toc panel can collapse (#10875)

Browse Source
This commit is contained in:
非法操作 2024-11-20 10:07:30 +08:00 committed by GitHub
parent 07b5bbae06
commit 7e66e5a713
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import { useEffect, useState } from 'react'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import { RiListUnordered } from '@remixicon/react'
import TemplateEn from './template/template.en.mdx'
import TemplateZh from './template/template.zh.mdx'
import TemplateAdvancedChatEn from './template/template_advanced_chat.en.mdx'
@ -21,6 +22,7 @@ const Doc = ({ appDetail }: IDocProps) => {
const { locale } = useContext(I18n)
const { t } = useTranslation()
const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
const [isTocExpanded, setIsTocExpanded] = useState(false)
const variables = appDetail?.model_config?.configs?.prompt_variables || []
const inputs = variables.reduce((res: any, variable: any) => {
@ -28,6 +30,11 @@ const Doc = ({ appDetail }: IDocProps) => {
return res
}, {})
useEffect(() => {
const mediaQuery = window.matchMedia('(min-width: 1280px)')
setIsTocExpanded(mediaQuery.matches)
}, [])
useEffect(() => {
const extractTOC = () => {
const article = document.querySelector('article')
@ -53,21 +60,42 @@ const Doc = ({ appDetail }: IDocProps) => {
return (
<div className="flex">
<nav className="toc w-64 fixed right-8 top-32 bg-gray-50 p-4 rounded-lg shadow-md z-10">
<h3 className="text-lg font-semibold mb-4">{t('appApi.develop.toc')}</h3>
<ul className="space-y-2">
{toc.map((item, index) => (
<li key={index}>
<a
href={item.href}
className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
>
{item.text}
</a>
</li>
))}
</ul>
</nav>
<div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
{isTocExpanded
? (
<nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
<button
onClick={() => setIsTocExpanded(false)}
className="text-gray-500 hover:text-gray-700"
>
✕
</button>
</div>
<ul className="space-y-2">
{toc.map((item, index) => (
<li key={index}>
<a
href={item.href}
className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
>
{item.text}
</a>
</li>
))}
</ul>
</nav>
)
: (
<button
onClick={() => setIsTocExpanded(true)}
className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
>
<RiListUnordered className="w-6 h-6" />
</button>
)}
</div>
<article className="prose prose-xl" >
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
locale !== LanguagesSupported[1] ? <TemplateChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateChatZh appDetail={appDetail} variables={variables} inputs={inputs} />