mirror of https://github.com/langgenius/dify.git
fix(web): improve the consistency of the inputs-form UI (#27837)
This commit is contained in:
parent
598216ad52
commit
b093c1c775
|
|
@ -49,7 +49,7 @@ const InputsFormContent = ({ showTip }: Props) => {
|
|||
<div className='flex h-6 items-center gap-1'>
|
||||
<div className='system-md-semibold text-text-secondary'>{form.label}</div>
|
||||
{!form.required && (
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const InputsFormContent = ({ showTip }: Props) => {
|
|||
<div className='flex h-6 items-center gap-1'>
|
||||
<div className='system-md-semibold text-text-secondary'>{form.label}</div>
|
||||
{!form.required && (
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,10 @@ const RunOnce: FC<IRunOnceProps> = ({
|
|||
: promptConfig.prompt_variables.map(item => (
|
||||
<div className='mt-4 w-full' key={item.key}>
|
||||
{item.type !== 'checkbox' && (
|
||||
<label className='system-md-semibold flex h-6 items-center text-text-secondary'>{item.name}</label>
|
||||
<div className='system-md-semibold flex h-6 items-center gap-1 text-text-secondary'>
|
||||
<div className='truncate'>{item.name}</div>
|
||||
{!item.required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
|
||||
</div>
|
||||
)}
|
||||
<div className='mt-1'>
|
||||
{item.type === 'select' && (
|
||||
|
|
@ -115,7 +118,7 @@ const RunOnce: FC<IRunOnceProps> = ({
|
|||
{item.type === 'string' && (
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
placeholder={item.name}
|
||||
value={inputs[item.key]}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
|
||||
maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
|
||||
|
|
@ -124,7 +127,7 @@ const RunOnce: FC<IRunOnceProps> = ({
|
|||
{item.type === 'paragraph' && (
|
||||
<Textarea
|
||||
className='h-[104px] sm:text-xs'
|
||||
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
placeholder={item.name}
|
||||
value={inputs[item.key]}
|
||||
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
|
||||
/>
|
||||
|
|
@ -132,7 +135,7 @@ const RunOnce: FC<IRunOnceProps> = ({
|
|||
{item.type === 'number' && (
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
placeholder={item.name}
|
||||
value={inputs[item.key]}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ const FormItem: FC<Props> = ({
|
|||
<Input
|
||||
value={value || ''}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
|
||||
placeholder={typeof payload.label === 'object' ? payload.label.variable : payload.label}
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
)
|
||||
|
|
@ -152,7 +152,7 @@ const FormItem: FC<Props> = ({
|
|||
type="number"
|
||||
value={value || ''}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
|
||||
placeholder={typeof payload.label === 'object' ? payload.label.variable : payload.label}
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
)
|
||||
|
|
@ -163,7 +163,7 @@ const FormItem: FC<Props> = ({
|
|||
<Textarea
|
||||
value={value || ''}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
|
||||
placeholder={typeof payload.label === 'object' ? payload.label.variable : payload.label}
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -259,7 +259,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Variablenschlüssel',
|
||||
name: 'Name des Benutzereingabefelds',
|
||||
optional: 'Optional',
|
||||
type: 'Eingabetyp',
|
||||
action: 'Aktionen',
|
||||
typeString: 'String',
|
||||
|
|
|
|||
|
|
@ -346,7 +346,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Variable Key',
|
||||
name: 'User Input Field Name',
|
||||
optional: 'Optional',
|
||||
type: 'Input Type',
|
||||
action: 'Actions',
|
||||
typeString: 'String',
|
||||
|
|
|
|||
|
|
@ -255,7 +255,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Clave de Variable',
|
||||
name: 'Nombre del Campo de Entrada del Usuario',
|
||||
optional: 'Opcional',
|
||||
type: 'Tipo de Entrada',
|
||||
action: 'Acciones',
|
||||
typeString: 'Cadena',
|
||||
|
|
|
|||
|
|
@ -588,7 +588,6 @@ const translation = {
|
|||
typeString: 'رشته',
|
||||
name: 'نام فیلد ورودی کاربر',
|
||||
type: 'نوع ورودی',
|
||||
optional: 'اختیاری',
|
||||
},
|
||||
varKeyError: {},
|
||||
otherError: {
|
||||
|
|
|
|||
|
|
@ -259,7 +259,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Clé Variable',
|
||||
name: 'Nom du champ d\'entrée de l\'utilisateur',
|
||||
optional: 'Facultatif',
|
||||
type: 'Type d\'Entrée',
|
||||
action: 'Actions',
|
||||
typeString: 'Chaîne',
|
||||
|
|
|
|||
|
|
@ -279,7 +279,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'वेरिएबल कुंजी',
|
||||
name: 'उपयोगकर्ता इनपुट फ़ील्ड नाम',
|
||||
optional: 'वैकल्पिक',
|
||||
type: 'इनपुट प्रकार',
|
||||
action: 'क्रियाएँ',
|
||||
typeString: 'स्ट्रिंग',
|
||||
|
|
|
|||
|
|
@ -325,7 +325,6 @@ const translation = {
|
|||
variableTable: {
|
||||
action: 'Tindakan',
|
||||
typeString: 'String',
|
||||
optional: 'Fakultatif',
|
||||
typeSelect: 'Pilih',
|
||||
type: 'Jenis Masukan',
|
||||
key: 'Kunci Variabel',
|
||||
|
|
|
|||
|
|
@ -281,7 +281,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Chiave Variabile',
|
||||
name: 'Nome Campo Input Utente',
|
||||
optional: 'Opzionale',
|
||||
type: 'Tipo di Input',
|
||||
action: 'Azioni',
|
||||
typeString: 'Stringa',
|
||||
|
|
|
|||
|
|
@ -340,7 +340,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: '変数キー',
|
||||
name: 'ユーザー入力フィールド名',
|
||||
optional: 'オプション',
|
||||
type: '入力タイプ',
|
||||
action: 'アクション',
|
||||
typeString: '文字列',
|
||||
|
|
|
|||
|
|
@ -255,7 +255,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: '변수 키',
|
||||
name: '사용자 입력 필드명',
|
||||
optional: '옵션',
|
||||
type: '입력 타입',
|
||||
action: '액션',
|
||||
typeString: '문자열',
|
||||
|
|
|
|||
|
|
@ -277,7 +277,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Klucz Zmiennej',
|
||||
name: 'Nazwa Pola Wejściowego Użytkownika',
|
||||
optional: 'Opcjonalnie',
|
||||
type: 'Typ Wejścia',
|
||||
action: 'Akcje',
|
||||
typeString: 'String',
|
||||
|
|
|
|||
|
|
@ -261,7 +261,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Chave da Variável',
|
||||
name: 'Nome do Campo de Entrada do Usuário',
|
||||
optional: 'Opcional',
|
||||
type: 'Tipo de Entrada',
|
||||
action: 'Ações',
|
||||
typeString: 'Texto',
|
||||
|
|
|
|||
|
|
@ -261,7 +261,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Cheie variabilă',
|
||||
name: 'Nume câmp de intrare utilizator',
|
||||
optional: 'Opțional',
|
||||
type: 'Tip intrare',
|
||||
action: 'Acțiuni',
|
||||
typeString: 'Șir',
|
||||
|
|
|
|||
|
|
@ -327,7 +327,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Ключ переменной',
|
||||
name: 'Имя поля пользовательского ввода',
|
||||
optional: 'Необязательно',
|
||||
type: 'Тип ввода',
|
||||
action: 'Действия',
|
||||
typeString: 'Строка',
|
||||
|
|
|
|||
|
|
@ -350,7 +350,6 @@ const translation = {
|
|||
},
|
||||
variableTable: {
|
||||
action: 'Dejanja',
|
||||
optional: 'Neobvezno',
|
||||
typeString: 'Niz',
|
||||
typeSelect: 'Izbrati',
|
||||
type: 'Vrsta vnosa',
|
||||
|
|
|
|||
|
|
@ -323,7 +323,6 @@ const translation = {
|
|||
timeoutExceeded: 'ผลลัพธ์จะไม่แสดงเนื่องจากหมดเวลา โปรดดูบันทึกเพื่อรวบรวมผลลัพธ์ที่สมบูรณ์',
|
||||
},
|
||||
variableTable: {
|
||||
optional: 'เสริม',
|
||||
key: 'ปุ่มตัวแปร',
|
||||
typeString: 'เชือก',
|
||||
typeSelect: 'เลือก',
|
||||
|
|
|
|||
|
|
@ -327,7 +327,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Değişken Anahtarı',
|
||||
name: 'Kullanıcı Giriş Alanı Adı',
|
||||
optional: 'İsteğe Bağlı',
|
||||
type: 'Giriş Tipi',
|
||||
action: 'Aksiyonlar',
|
||||
typeString: 'Metin',
|
||||
|
|
|
|||
|
|
@ -273,7 +273,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Ключ змінної', // Variable Key
|
||||
name: 'Назва поля для введення користувача', // User Input Field Name
|
||||
optional: 'Додатково', // Optional
|
||||
type: 'Тип введення', // Input Type
|
||||
action: 'Дії', // Actions
|
||||
typeString: 'Рядок', // String
|
||||
|
|
|
|||
|
|
@ -255,7 +255,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: 'Khóa biến',
|
||||
name: 'Tên trường nhập liệu người dùng',
|
||||
optional: 'Tùy chọn',
|
||||
type: 'Loại nhập liệu',
|
||||
action: 'Hành động',
|
||||
typeString: 'Chuỗi',
|
||||
|
|
|
|||
|
|
@ -342,7 +342,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: '变量 Key',
|
||||
name: '字段名称',
|
||||
optional: '可选',
|
||||
type: '类型',
|
||||
action: '操作',
|
||||
typeString: '文本',
|
||||
|
|
|
|||
|
|
@ -255,7 +255,6 @@ const translation = {
|
|||
variableTable: {
|
||||
key: '變數 Key',
|
||||
name: '欄位名稱',
|
||||
optional: '可選',
|
||||
type: '型別',
|
||||
action: '操作',
|
||||
typeString: '文字',
|
||||
|
|
|
|||
Loading…
Reference in New Issue