feat: filed and var

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

@@ -0,0 +1,26 @@
+'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

@@ -1,10 +1,32 @@
 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>
   )
 }