dify

dify/web/app/components/base/tab-slider/index.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import TabSlider from '.'
+
+const OPTIONS = [
+  { value: 'models', text: 'Models' },
+  { value: 'datasets', text: 'Datasets' },
+  { value: 'plugins', text: 'Plugins' },
+]
+
+const TabSliderDemo = ({
+  initialValue = 'models',
+}: {
+  initialValue?: string
+}) => {
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    const originalFetch = globalThis.fetch?.bind(globalThis)
+
+    const handler = async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === 'string'
+        ? input
+        : input instanceof URL
+          ? input.toString()
+          : input.url
+
+      if (url.includes('/workspaces/current/plugin/list')) {
+        return new Response(
+          JSON.stringify({
+            total: 6,
+            plugins: [],
+          }),
+          {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          },
+        )
+      }
+
+      if (originalFetch)
+        return originalFetch(input, init)
+
+      throw new Error(`Unhandled request for ${url}`)
+    }
+
+    globalThis.fetch = handler as typeof globalThis.fetch
+
+    return () => {
+      if (originalFetch)
+        globalThis.fetch = originalFetch
+    }
+  }, [])
+
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Segmented tabs</div>
+      <TabSlider
+        value={value}
+        options={OPTIONS}
+        onChange={setValue}
+      />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Navigation/TabSlider',
+  component: TabSliderDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Animated segmented control with sliding highlight. A badge appears when plugins are installed (mocked in Storybook).',
+      },
+    },
+  },
+  argTypes: {
+    initialValue: {
+      control: 'radio',
+      options: OPTIONS.map(option => option.value),
+    },
+  },
+  args: {
+    initialValue: 'models',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TabSliderDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

dify/web/app/components/base/tab-slider/index.tsx

@@ -0,0 +1,90 @@
+import type { FC, ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import cn from '@/utils/classnames'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import { useInstalledPluginList } from '@/service/use-plugins'
+type Option = {
+  value: string
+  text: ReactNode
+}
+
+type TabSliderProps = {
+  className?: string
+  value: string
+  itemClassName?: string | ((active: boolean) => string)
+  onChange: (v: string) => void
+  options: Option[]
+}
+
+const TabSlider: FC<TabSliderProps> = ({
+  className,
+  itemClassName,
+  value,
+  onChange,
+  options,
+}) => {
+  const [activeIndex, setActiveIndex] = useState(() => options.findIndex(option => option.value === value))
+  const [sliderStyle, setSliderStyle] = useState({})
+  const { data: pluginList } = useInstalledPluginList()
+
+  const updateSliderStyle = (index: number) => {
+    const tabElement = document.getElementById(`tab-${index}`)
+    if (tabElement) {
+      const { offsetLeft, offsetWidth } = tabElement
+      setSliderStyle({
+        transform: `translateX(${offsetLeft}px)`,
+        width: `${offsetWidth}px`,
+      })
+    }
+  }
+
+  useEffect(() => {
+    const newIndex = options.findIndex(option => option.value === value)
+    setActiveIndex(newIndex)
+    updateSliderStyle(newIndex)
+  }, [value, options, pluginList?.total])
+
+  return (
+    <div className={cn(className, 'relative inline-flex items-center justify-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5')}>
+      <div
+        className="shadows-shadow-xs absolute bottom-0.5 left-0 right-0 top-0.5 rounded-[10px] bg-components-panel-bg transition-transform duration-300 ease-in-out"
+        style={sliderStyle}
+      />
+      {options.map((option, index) => (
+        <div
+          id={`tab-${index}`}
+          key={option.value}
+          className={cn(
+            'relative z-10 flex cursor-pointer items-center justify-center gap-1 rounded-[10px] px-2.5 py-1.5 transition-colors duration-300 ease-in-out',
+            'system-md-semibold',
+            index === activeIndex
+              ? 'text-text-primary'
+              : 'text-text-tertiary',
+            typeof itemClassName === 'function' ? itemClassName(index === activeIndex) : itemClassName,
+          )}
+          onClick={() => {
+            if (index !== activeIndex) {
+              onChange(option.value)
+              updateSliderStyle(index)
+            }
+          }}
+        >
+          {option.text}
+          {/* if no plugin installed, the badge won't show */}
+          {option.value === 'plugins'
+            && (pluginList?.total ?? 0) > 0
+            && <Badge
+              size='s'
+              uppercase={true}
+              state={BadgeState.Default}
+            >
+              {pluginList?.total}
+            </Badge>
+          }
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default TabSlider