dify

dify/web/app/dev-preview/page.tsx

@@ -0,0 +1,68 @@
+'use client'
+import BaseForm from '../components/base/form/form-scenarios/base'
+import { BaseFieldType } from '../components/base/form/form-scenarios/base/types'
+
+export default function Page() {
+  return (
+    <div className='flex h-screen w-full items-center justify-center p-20'>
+      <div className='w-[400px] rounded-lg border border-components-panel-border bg-components-panel-bg'>
+        <BaseForm
+          initialData={{
+            type: 'option_1',
+            variable: 'test',
+            label: 'Test',
+            maxLength: 48,
+            required: true,
+          }}
+          configurations={[
+            {
+              type: BaseFieldType.textInput,
+              variable: 'variable',
+              label: 'Variable',
+              required: true,
+              showConditions: [],
+            },
+            {
+              type: BaseFieldType.textInput,
+              variable: 'label',
+              label: 'Label',
+              required: true,
+              showConditions: [],
+            },
+            {
+              type: BaseFieldType.numberInput,
+              variable: 'maxLength',
+              label: 'Max Length',
+              required: true,
+              showConditions: [],
+              max: 100,
+              min: 1,
+            },
+            {
+              type: BaseFieldType.checkbox,
+              variable: 'required',
+              label: 'Required',
+              required: true,
+              showConditions: [],
+            },
+            {
+              type: BaseFieldType.select,
+              variable: 'type',
+              label: 'Type',
+              required: true,
+              showConditions: [],
+              options: [
+                { label: 'Option 1', value: 'option_1' },
+                { label: 'Option 2', value: 'option_2' },
+                { label: 'Option 3', value: 'option_3' },
+              ],
+            },
+          ]}
+          onSubmit={(value) => {
+            console.log('onSubmit', value)
+          }}
+        />
+      </div>
+    </div>
+  )
+}