dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/base/popover/index.stories.tsx
+++ b/dify/web/app/components/base/popover/index.stories.tsx
@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import CustomPopover from '.'
+
+type PopoverContentProps = {
+  open?: boolean
+  onClose?: () => void
+  onClick?: () => void
+  title: string
+  description: string
+}
+
+const PopoverContent = ({ title, description, onClose }: PopoverContentProps) => {
+  return (
+    <div className="flex min-w-[220px] flex-col gap-2 p-3">
+      <div className="text-xs font-semibold uppercase tracking-[0.12em] text-text-tertiary">
+        {title}
+      </div>
+      <p className="text-sm leading-5 text-text-secondary">{description}</p>
+      <button
+        type="button"
+        className="self-start rounded-md border border-divider-subtle px-2 py-1 text-xs font-medium text-text-tertiary hover:bg-state-base-hover"
+        onClick={onClose}
+      >
+        Dismiss
+      </button>
+    </div>
+  )
+}
+
+const Template = ({
+  trigger = 'hover',
+  position = 'bottom',
+  manualClose,
+  disabled,
+}: {
+  trigger?: 'click' | 'hover'
+  position?: 'bottom' | 'bl' | 'br'
+  manualClose?: boolean
+  disabled?: boolean
+}) => {
+  const [hoverHint] = useState(
+    trigger === 'hover'
+      ? 'Hover over the badge to reveal quick tips.'
+      : 'Click the badge to open the contextual menu.',
+  )
+
+  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">
+      <p className="text-sm text-text-secondary">{hoverHint}</p>
+      <div className="flex flex-wrap items-center gap-6">
+        <CustomPopover
+          trigger={trigger}
+          position={position}
+          manualClose={manualClose}
+          disabled={disabled}
+          btnElement={<span className="text-xs font-medium text-text-secondary">Popover trigger</span>}
+          htmlContent={
+            <PopoverContent
+              title={trigger === 'hover' ? 'Quick help' : 'More actions'}
+              description={trigger === 'hover'
+                ? 'Use hover-triggered popovers for light contextual hints and inline docs.'
+                : 'Click-triggered popovers are ideal for menus that require user decisions.'}
+            />
+          }
+        />
+      </div>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Feedback/Popover',
+  component: Template,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Headless UI popover wrapper supporting hover and click triggers. These examples highlight alignment controls and manual closing.',
+      },
+    },
+  },
+  argTypes: {
+    trigger: {
+      control: 'radio',
+      options: ['hover', 'click'],
+    },
+    position: {
+      control: 'radio',
+      options: ['bottom', 'bl', 'br'],
+    },
+    manualClose: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    trigger: 'hover',
+    position: 'bottom',
+    manualClose: false,
+    disabled: false,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Template>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const HoverPopover: Story = {}
+
+export const ClickPopover: Story = {
+  args: {
+    trigger: 'click',
+    position: 'br',
+  },
+}
+
+export const DisabledState: Story = {
+  args: {
+    disabled: true,
+  },
+}