estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(api-access): refactor code group (#24565)

Browse Source 
Refactor CodeGroup component on the API Access page.
Fix example tab switching.
This commit is contained in:
Nite Knite
2025-08-26 18:25:08 +08:00
committed by GitHub
parent 58165c3951
commit a2598fd134
13 changed files with 2388 additions and 2676 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
web/app/components/develop/code.tsx
View File

@@ -7,10 +7,11 @@ import {
useRef,
useState,
} from 'react'
import { Tab, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { Tag } from './tag'
import classNames from '@/utils/classnames'
import { writeTextToClipboard } from '@/utils/clipboard'
import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
const languageNames = {
js: 'JavaScript',
@@ -28,11 +29,6 @@ type IChildrenProps = {
[key: string]: any
}
function getPanelTitle({ className }: { className: string }) {
const language = className.split('-')[1]
return languageNames[language] ?? 'Code'
}
function ClipboardIcon(props: any) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
@@ -66,7 +62,7 @@ function CopyButton({ code }: { code: string }) {
<button
type="button"
className={classNames(
'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
'group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
copied
? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
: 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5',
@@ -100,7 +96,7 @@ function CopyButton({ code }: { code: string }) {
)
}
function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
if (!tag && !label)
return null
@@ -121,38 +117,55 @@ function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
)
}
type ICodePanelProps = {
children: React.ReactNode
type CodeExample = {
title?: string
tag?: string
code?: string
label?: string
targetCode?: string
code: string
}
function CodePanel({ tag, label, code, children, targetCode }: ICodePanelProps) {
const child = Children.only(children)
type ICodePanelProps = {
children?: React.ReactNode
tag?: string
label?: string
code?: string
title?: string
targetCode?: CodeExample
}
function CodePanel({ tag, label, children, targetCode }: ICodePanelProps) {
const child = Children.toArray(children)[0] as ReactElement<any>
return (
<div className="dark:bg-white/2.5 group">
<CodePanelHeader
tag={child.props.tag ?? tag}
label={child.props.label ?? label}
tag={tag}
label={label}
/>
<div className="relative">
{/* <pre className="p-4 overflow-x-auto text-xs text-white">{children}</pre> */}
{/* <CopyButton code={child.props.code ?? code} /> */}
{/* <CopyButton code={child.props.children.props.children} /> */}
<pre className="overflow-x-auto p-4 text-xs text-white">{targetCode || children}</pre>
<CopyButton code={targetCode || child.props.children.props.children} />
<pre className="overflow-x-auto p-4 text-xs text-white">
{targetCode?.code ? (
<code>{targetCode?.code}</code>
) : (
child
)}
</pre>
<CopyButton code={targetCode?.code ?? child.props.children.props.children} />
</div>
</div>
)
}
function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
const hasTabs = Children.count(children) > 1
type CodeGroupHeaderProps = {
title?: string
tabTitles?: string[]
selectedIndex?: number
}
if (!title && !hasTabs)
return null
function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderProps) {
const hasTabs = (tabTitles?.length ?? 0) > 1
return (
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
@@ -163,16 +176,17 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
)}
{hasTabs && (
<TabList className="-mb-px flex gap-4 text-xs font-medium">
{Children.map(children, (child, childIndex) => (
{tabTitles!.map((tabTitle, tabIndex) => (
<Tab
key={tabIndex}
className={classNames(
'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
childIndex === selectedIndex
tabIndex === selectedIndex
? 'border-emerald-500 text-emerald-400'
: 'border-transparent text-zinc-400 hover:text-zinc-300',
)}
>
{getPanelTitle(child.props.children.props)}
{tabTitle}
</Tab>
))}
</TabList>
@@ -181,26 +195,25 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
)
}
type ICodeGroupPanelsProps = {
children: React.ReactNode
type ICodeGroupPanelsProps = PropsWithChildren<{
targetCode?: CodeExample[]
[key: string]: any
}
function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {
const hasTabs = Children.count(children) > 1
}>
if (hasTabs) {
function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {
if ((targetCode?.length ?? 0) > 1) {
return (
<TabPanels>
{Children.map(children, child => (
{targetCode!.map(code => (
<TabPanel>
<CodePanel {...props}>{child}</CodePanel>
<CodePanel {...props} targetCode={code} />
</TabPanel>
))}
</TabPanels>
)
}
return <CodePanel {...props} targetCode={targetCode}>{children}</CodePanel>
return <CodePanel {...props} targetCode={targetCode?.[0]}>{children}</CodePanel>
}
function usePreventLayoutShift() {
@@ -231,10 +244,10 @@ function usePreventLayoutShift() {
function useTabGroupProps(availableLanguages: string[]) {
const [preferredLanguages, addPreferredLanguage] = useState<any>([])
const [selectedIndex, setSelectedIndex] = useState(0)
const activeLanguage = [...availableLanguages].sort(
const activeLanguage = [...(availableLanguages || [])].sort(
(a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
)[0]
const languageIndex = availableLanguages.indexOf(activeLanguage)
const languageIndex = availableLanguages?.indexOf(activeLanguage) || 0
const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
if (newSelectedIndex !== selectedIndex)
setSelectedIndex(newSelectedIndex)
@@ -255,16 +268,26 @@ function useTabGroupProps(availableLanguages: string[]) {
const CodeGroupContext = createContext(false)
export function CodeGroup({ children, title, inputs, targetCode, ...props }: IChildrenProps) {
const languages = Children.map(children, child =>
getPanelTitle(child.props.children.props),
)
const tabGroupProps = useTabGroupProps(languages)
const hasTabs = Children.count(children) > 1
const Container = hasTabs ? Tab.Group : 'div'
type CodeGroupProps = PropsWithChildren<{
/** Code example(s) to display */
targetCode?: string | CodeExample[]
/** Example block title */
title?: string
/** HTTP method tag, e.g. GET, POST */
tag?: string
/** API path */
label?: string
}>
export function CodeGroup({ children, title, targetCode, ...props }: CodeGroupProps) {
const examples = typeof targetCode === 'string' ? [{ code: targetCode }] as CodeExample[] : targetCode
const tabTitles = examples?.map(({ title }) => title || 'Code') || []
const tabGroupProps = useTabGroupProps(tabTitles)
const hasTabs = tabTitles.length > 1
const Container = hasTabs ? TabGroup : 'div'
const containerProps = hasTabs ? tabGroupProps : {}
const headerProps = hasTabs
? { selectedIndex: tabGroupProps.selectedIndex }
? { selectedIndex: tabGroupProps.selectedIndex, tabTitles }
: {}
return (
@@ -273,25 +296,19 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh
{...containerProps}
className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
>
<CodeGroupHeader title={title} {...headerProps}>
{children}
</CodeGroupHeader>
<CodeGroupPanels {...props} targetCode={targetCode}>{children}</CodeGroupPanels>
<CodeGroupHeader title={title} {...headerProps} />
<CodeGroupPanels {...props} targetCode={examples}>{children}</CodeGroupPanels>
</Container>
</CodeGroupContext.Provider>
)
}
type IChildProps = {
children: string
children: ReactNode
[key: string]: any
}
export function Code({ children, ...props }: IChildProps) {
const isGrouped = useContext(CodeGroupContext)
if (isGrouped)
return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
return <code {...props}>{children}</code>
}
@@ -303,3 +320,7 @@ export function Pre({ children, ...props }: IChildrenProps) {
return <CodeGroup {...props}>{children}</CodeGroup>
}
export function Embed({ value, ...props }: IChildrenProps) {
return <span {...props}>{value}</span>
}