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/content-dialog/index.stories.tsx
+++ b/dify/web/app/components/base/content-dialog/index.stories.tsx
@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import ContentDialog from '.'
+
+type Props = React.ComponentProps<typeof ContentDialog>
+
+const meta = {
+  title: 'Base/Feedback/ContentDialog',
+  component: ContentDialog,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Sliding panel overlay used in the app detail view. Includes dimmed backdrop and animated entrance/exit transitions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes applied to the sliding panel container.',
+    },
+    show: {
+      control: 'boolean',
+      description: 'Controls visibility of the dialog.',
+    },
+    onClose: {
+      control: false,
+      description: 'Invoked when the overlay/backdrop is clicked.',
+    },
+    children: {
+      control: false,
+      table: { disable: true },
+    },
+  },
+  args: {
+    show: false,
+    children: null,
+  },
+} satisfies Meta<typeof ContentDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DemoWrapper = (props: Props) => {
+  const [open, setOpen] = useState(props.show)
+
+  useEffect(() => {
+    setOpen(props.show)
+  }, [props.show])
+
+  return (
+    <div className="relative h-[480px] w-full overflow-hidden bg-gray-100">
+      <div className="flex h-full items-center justify-center">
+        <button
+          className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+          onClick={() => setOpen(true)}
+        >
+          Open dialog
+        </button>
+      </div>
+
+      <ContentDialog
+        {...props}
+        show={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="flex h-full flex-col space-y-4 bg-white p-6">
+          <h2 className="text-lg font-semibold text-gray-900">Plan summary</h2>
+          <p className="text-sm text-gray-600">
+            Use this area to present rich content for the selected run, configuration details, or
+            any supporting context.
+          </p>
+          <div className="flex-1 overflow-y-auto rounded-md border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            Scrollable placeholder content. Add domain-specific information, activity logs, or
+            editors in the real application.
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <button
+              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
+              onClick={() => setOpen(false)}
+            >
+              Cancel
+            </button>
+            <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+              Apply changes
+            </button>
+          </div>
+        </div>
+      </ContentDialog>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  args: {
+    children: null,
+  },
+  render: args => <DemoWrapper {...args} />,
+}
+
+export const NarrowPanel: Story = {
+  render: args => <DemoWrapper {...args} />,
+  args: {
+    className: 'max-w-[420px]',
+    children: null,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies a custom width class to show the dialog as a narrower information panel.',
+      },
+    },
+  },
+}