feat: filed and var

web/app/components/base/button/add-button.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { Plus } from '../icons/src/vender/line/general'
+
+type Props = {
+  className?: string
+  onClick: () => void
+}
+
+const AddButton: FC<Props> = ({
+  className,
+  onClick,
+}) => {
+  return (
+    <div className={cn(className, 'p-1 rounded-md cursor-pointer hover:bg-gray-200 select-none')} onClick={onClick}>
+      <Plus className='w-4 h-4 text-gray-500' />
+    </div>
+  )
+}
+export default React.memo(AddButton)

web/app/components/workflow/nodes/_base/components/field.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  title: string
+  children: JSX.Element | string
+  operations?: JSX.Element
+}
+
+const Filed: FC<Props> = ({
+  title,
+  children,
+  operations,
+}) => {
+  return (
+    <div>
+      <div className='flex justify-between items-center'>
+        <div className='leading-[18px] text-xs font-medium text-gray-500 uppercase'>{title}</div>
+        {operations && <div>{operations}</div>}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}
+export default React.memo(Filed)

web/app/components/workflow/nodes/llm/node.tsx

 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import BaseNode from '../_base/node'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import AddButton from '@/app/components/base/button/add-button'
+const i18nPrefix = 'workflow.nodes.llm'
 
 const Node: FC = () => {
+  const { t } = useTranslation()
+  const handleAddVariable = () => {
+    console.log('add variable')
+  }
   return (
     <BaseNode>
-      <div>llm</div>
+      <div>
+        <Field
+          title={t(`${i18nPrefix}.model`)}
+        >
+          Model Selector
+        </Field>
+        <Field
+          title={t(`${i18nPrefix}.variables`)}
+          operations={
+            <AddButton onClick={handleAddVariable} />
+          }
+        >
+          Var Selector
+        </Field>
+      </div>
     </BaseNode>
   )
 }

web/i18n/i18next-config.ts

@@ -61,6 +61,9 @@ import customPt from './lang/custom.pt' // Portuguese import
 import toolsEn from './lang/tools.en'
 import toolsZh from './lang/tools.zh'
 import toolsPt from './lang/tools.pt' // Portuguese import
+import workflowEn from './lang/workflow.en'
+import workflowZh from './lang/workflow.zh'
+import workflowPt from './lang/workflow.pt' // Portuguese import
 
 const resources = {
   'en-US': {
@@ -89,6 +92,7 @@ const resources = {
       custom: customEn,
       // tools
       tools: toolsEn,
+      workflow: workflowEn,
     },
   },
   'zh-Hans': {
@@ -116,6 +120,7 @@ const resources = {
       custom: customZh,
       // tools
       tools: toolsZh,
+      workflow: workflowZh,
     },
   },
   'pt-BR': {
@@ -142,6 +147,7 @@ const resources = {
       billing: billingPt,
       custom: customPt,
       tools: toolsPt,
+      workflow: workflowPt,
     },
   },
 }

web/i18n/lang/workflow.en.ts

+const translation = {
+  nodes: {
+    llm: {
+      model: 'model',
+      variables: 'variables',
+    },
+  },
+}
+
+export default translation

web/i18n/lang/workflow.pt.ts

+const translation = {
+  nodes: {
+    llm: {
+      model: 'model',
+    },
+  },
+}
+
+export default translation

web/i18n/lang/workflow.zh.ts

+const translation = {
+  nodes: {
+    llm: {
+      model: '模型',
+      variables: '变量',
+    },
+  },
+}
+
+export default translation