From 8367ae85ded779e0dfef1c70862b38b8a6db2252 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Sun, 27 Apr 2025 10:16:16 +0800
Subject: [PATCH] feat: Replace BaseVarType with BaseFieldType for consistent
 field type usage across components

---
 .../base/form/form-scenarios/base/field.tsx    | 10 +++++-----
 .../base/form/form-scenarios/base/types.ts     |  4 ++--
 .../base/form/form-scenarios/base/utils.ts     | 18 +++++++++---------
 web/app/dev-preview/page.tsx                   | 12 ++++++------
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/web/app/components/base/form/form-scenarios/base/field.tsx b/web/app/components/base/form/form-scenarios/base/field.tsx
index 2adae3316a..7076535414 100644
--- a/web/app/components/base/form/form-scenarios/base/field.tsx
+++ b/web/app/components/base/form/form-scenarios/base/field.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { type BaseConfiguration, BaseVarType } from './types'
+import { type BaseConfiguration, BaseFieldType } from './types'
 import { withForm } from '../..'
 import { useStore } from '@tanstack/react-form'
 
@@ -36,7 +36,7 @@ const BaseField = <T,>({
     if (!isAllConditionsMet)
       return <></>
 
-    if (type === BaseVarType.textInput) {
+    if (type === BaseFieldType.textInput) {
       return (
         <form.AppField
           name={variable}
@@ -55,7 +55,7 @@ const BaseField = <T,>({
       )
     }
 
-    if (type === BaseVarType.numberInput) {
+    if (type === BaseFieldType.numberInput) {
       return (
         <form.AppField
           name={variable}
@@ -76,7 +76,7 @@ const BaseField = <T,>({
       )
     }
 
-    if (type === BaseVarType.checkbox) {
+    if (type === BaseFieldType.checkbox) {
       return (
         <form.AppField
           name={variable}
@@ -89,7 +89,7 @@ const BaseField = <T,>({
       )
     }
 
-    if (type === BaseVarType.select) {
+    if (type === BaseFieldType.select) {
       return (
         <form.AppField
           name={variable}
diff --git a/web/app/components/base/form/form-scenarios/base/types.ts b/web/app/components/base/form/form-scenarios/base/types.ts
index 43a4e634fa..0805845ece 100644
--- a/web/app/components/base/form/form-scenarios/base/types.ts
+++ b/web/app/components/base/form/form-scenarios/base/types.ts
@@ -2,7 +2,7 @@ import type { DeepKeys } from '@tanstack/react-form'
 import type { FormType } from '../..'
 import type { Option } from '../../../select/pure'
 
-export enum BaseVarType {
+export enum BaseFieldType {
   textInput = 'textInput',
   numberInput = 'numberInput',
   checkbox = 'checkbox',
@@ -31,7 +31,7 @@ export type BaseConfiguration<T> = {
   required: boolean
   showOptional?: boolean // show optional label
   showConditions: ShowCondition<T>[] // Show this field only when all conditions are met
-  type: BaseVarType
+  type: BaseFieldType
   tooltip?: string // Tooltip for this field
 } & NumberConfiguration & SelectConfiguration
 
diff --git a/web/app/components/base/form/form-scenarios/base/utils.ts b/web/app/components/base/form/form-scenarios/base/utils.ts
index e332dd5392..d23e6bf015 100644
--- a/web/app/components/base/form/form-scenarios/base/utils.ts
+++ b/web/app/components/base/form/form-scenarios/base/utils.ts
@@ -1,6 +1,6 @@
 import type { ZodSchema, ZodString } from 'zod'
 import { z } from 'zod'
-import { type BaseConfiguration, BaseVarType } from './types'
+import { type BaseConfiguration, BaseFieldType } from './types'
 
 export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
   const shape: Record<string, ZodSchema> = {}
@@ -9,16 +9,16 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
     let zodType
 
     switch (field.type) {
-      case BaseVarType.textInput:
+      case BaseFieldType.textInput:
         zodType = z.string()
         break
-      case BaseVarType.numberInput:
+      case BaseFieldType.numberInput:
         zodType = z.number()
         break
-      case BaseVarType.checkbox:
+      case BaseFieldType.checkbox:
         zodType = z.boolean()
         break
-      case BaseVarType.select:
+      case BaseFieldType.select:
         zodType = z.string()
         break
       default:
@@ -27,7 +27,7 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
     }
 
     if (field.required) {
-      if ([BaseVarType.textInput].includes(field.type))
+      if ([BaseFieldType.textInput].includes(field.type))
         zodType = (zodType as ZodString).nonempty(`${field.label} is required`)
     }
     else {
@@ -35,17 +35,17 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
     }
 
     if (field.maxLength) {
-      if ([BaseVarType.textInput].includes(field.type))
+      if ([BaseFieldType.textInput].includes(field.type))
         zodType = (zodType as ZodString).max(field.maxLength, `${field.label} exceeds max length of ${field.maxLength}`)
     }
 
     if (field.min) {
-      if ([BaseVarType.numberInput].includes(field.type))
+      if ([BaseFieldType.numberInput].includes(field.type))
         zodType = (zodType as ZodString).min(field.min, `${field.label} must be at least ${field.min}`)
     }
 
     if (field.max) {
-      if ([BaseVarType.numberInput].includes(field.type))
+      if ([BaseFieldType.numberInput].includes(field.type))
         zodType = (zodType as ZodString).max(field.max, `${field.label} exceeds max value of ${field.max}`)
     }
 
diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx
index e0c4a8c300..e06f10d795 100644
--- a/web/app/dev-preview/page.tsx
+++ b/web/app/dev-preview/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import BaseForm from '../components/base/form/form-scenarios/base'
-import { BaseVarType } from '../components/base/form/form-scenarios/base/types'
+import { BaseFieldType } from '../components/base/form/form-scenarios/base/types'
 
 export default function Page() {
   return (
@@ -16,21 +16,21 @@ export default function Page() {
           }}
           configurations={[
             {
-              type: BaseVarType.textInput,
+              type: BaseFieldType.textInput,
               variable: 'variable',
               label: 'Variable',
               required: true,
               showConditions: [],
             },
             {
-              type: BaseVarType.textInput,
+              type: BaseFieldType.textInput,
               variable: 'label',
               label: 'Label',
               required: true,
               showConditions: [],
             },
             {
-              type: BaseVarType.numberInput,
+              type: BaseFieldType.numberInput,
               variable: 'maxLength',
               label: 'Max Length',
               required: true,
@@ -39,14 +39,14 @@ export default function Page() {
               min: 1,
             },
             {
-              type: BaseVarType.checkbox,
+              type: BaseFieldType.checkbox,
               variable: 'required',
               label: 'Required',
               required: true,
               showConditions: [],
             },
             {
-              type: BaseVarType.select,
+              type: BaseFieldType.select,
               variable: 'type',
               label: 'Type',
               required: true,