From f291aec2cdfd7b08e5c15eae6e4f768a3d3db310 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 3 Apr 2024 11:41:44 +0800
Subject: [PATCH] chore: start input placeholder and bg

---
 .../app/configuration/config-var/config-modal/index.tsx    | 7 ++++---
 .../app/configuration/config-var/config-string/index.tsx   | 2 +-
 .../workflow/nodes/start/components/var-item.tsx           | 2 +-
 web/i18n/en-US/app-debug.ts                                | 1 +
 web/i18n/zh-Hans/app-debug.ts                              | 1 +
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 138fef2fd8..e2c4b96793 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -25,13 +25,12 @@ export type IConfigModalProps = {
   onConfirm: (newValue: InputVar, moreInfo?: MoreInfo) => void
 }
 
-const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
+const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
 
 const ConfigModal: FC<IConfigModalProps> = ({
   isCreate,
   payload,
   isShow,
-  varKeys = [],
   onClose,
   onConfirm,
 }) => {
@@ -151,14 +150,16 @@ const ConfigModal: FC<IConfigModalProps> = ({
               value={variable}
               onChange={e => handlePayloadChange('variable')(e.target.value)}
               onBlur={handleVarKeyBlur}
+              placeholder={t('appDebug.variableConig.inputPlaceholder')!}
             />
           </Field>
           <Field title={t('appDebug.variableConig.labelName')}>
             <input
               type='text'
               className={inputClassName}
-              value={label}
+              value={label as string}
               onChange={e => handlePayloadChange('label')(e.target.value)}
+              placeholder={t('appDebug.variableConig.inputPlaceholder')!}
             />
           </Field>
 
diff --git a/web/app/components/app/configuration/config-var/config-string/index.tsx b/web/app/components/app/configuration/config-var/config-string/index.tsx
index 79c0155b4b..2ec7e767b7 100644
--- a/web/app/components/app/configuration/config-var/config-string/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-string/index.tsx
@@ -36,7 +36,7 @@ const ConfigString: FC<IConfigStringProps> = ({
 
           onChange(value)
         }}
-        className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+        className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index dbc44fa55b..0d33f8ce0f 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -46,7 +46,7 @@ const VarItem: FC<Props> = ({
         <Variable02 className='w-3.5 h-3.5 text-primary-500' />
         <div title={payload.variable} className='shrink-0 max-w-[130px] truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
         {payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
-          <div title={payload.label} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label}</div>
+          <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div>
         </>)}
       </div>
       <div className='shrink-0 ml-2 flex items-center'>
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index a25997c0e1..f3e0a7d5e3 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -283,6 +283,7 @@ const translation = {
     'apiBasedVar': 'API-based Variable',
     'varName': 'Variable Name',
     'labelName': 'Label Name',
+    'inputPlaceholder': 'Please input',
     'required': 'Required',
     'errorMsg': {
       varNameRequired: 'Variable name is required',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 9dc900ddfe..dc0cfcb3be 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -278,6 +278,7 @@ const translation = {
     'addOption': '添加选项',
     'apiBasedVar': '基于 API 的变量',
     'varName': '变量名称',
+    'inputPlaceholder': '请输入',
     'labelName': '显示名称',
     'required': '必填',
     'errorMsg': {