fix(web): improve the consistency of the inputs-form UI (#27837)

This commit is contained in:
yangzheli 2025-11-05 09:29:13 +08:00 committed by CodingOnStar
parent 598216ad52
commit b093c1c775
25 changed files with 12 additions and 30 deletions

View File

@ -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>
)}

View File

@ -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>
)}

View File

@ -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 }) }}
/>

View File

@ -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}
/>
)

View File

@ -259,7 +259,6 @@ const translation = {
variableTable: {
key: 'Variablenschlüssel',
name: 'Name des Benutzereingabefelds',
optional: 'Optional',
type: 'Eingabetyp',
action: 'Aktionen',
typeString: 'String',

View File

@ -346,7 +346,6 @@ const translation = {
variableTable: {
key: 'Variable Key',
name: 'User Input Field Name',
optional: 'Optional',
type: 'Input Type',
action: 'Actions',
typeString: 'String',

View File

@ -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',

View File

@ -588,7 +588,6 @@ const translation = {
typeString: 'رشته',
name: 'نام فیلد ورودی کاربر',
type: 'نوع ورودی',
optional: 'اختیاری',
},
varKeyError: {},
otherError: {

View File

@ -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',

View File

@ -279,7 +279,6 @@ const translation = {
variableTable: {
key: 'वेरिएबल कुंजी',
name: 'उपयोगकर्ता इनपुट फ़ील्ड नाम',
optional: 'वैकल्पिक',
type: 'इनपुट प्रकार',
action: 'क्रियाएँ',
typeString: 'स्ट्रिंग',

View File

@ -325,7 +325,6 @@ const translation = {
variableTable: {
action: 'Tindakan',
typeString: 'String',
optional: 'Fakultatif',
typeSelect: 'Pilih',
type: 'Jenis Masukan',
key: 'Kunci Variabel',

View File

@ -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',

View File

@ -340,7 +340,6 @@ const translation = {
variableTable: {
key: '変数キー',
name: 'ユーザー入力フィールド名',
optional: 'オプション',
type: '入力タイプ',
action: 'アクション',
typeString: '文字列',

View File

@ -255,7 +255,6 @@ const translation = {
variableTable: {
key: '변수 키',
name: '사용자 입력 필드명',
optional: '옵션',
type: '입력 타입',
action: '액션',
typeString: '문자열',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -327,7 +327,6 @@ const translation = {
variableTable: {
key: 'Ключ переменной',
name: 'Имя поля пользовательского ввода',
optional: 'Необязательно',
type: 'Тип ввода',
action: 'Действия',
typeString: 'Строка',

View File

@ -350,7 +350,6 @@ const translation = {
},
variableTable: {
action: 'Dejanja',
optional: 'Neobvezno',
typeString: 'Niz',
typeSelect: 'Izbrati',
type: 'Vrsta vnosa',

View File

@ -323,7 +323,6 @@ const translation = {
timeoutExceeded: 'ผลลัพธ์จะไม่แสดงเนื่องจากหมดเวลา โปรดดูบันทึกเพื่อรวบรวมผลลัพธ์ที่สมบูรณ์',
},
variableTable: {
optional: 'เสริม',
key: 'ปุ่มตัวแปร',
typeString: 'เชือก',
typeSelect: 'เลือก',

View File

@ -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',

View File

@ -273,7 +273,6 @@ const translation = {
variableTable: {
key: 'Ключ змінної', // Variable Key
name: 'Назва поля для введення користувача', // User Input Field Name
optional: 'Додатково', // Optional
type: 'Тип введення', // Input Type
action: 'Дії', // Actions
typeString: 'Рядок', // String

View File

@ -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',

View File

@ -342,7 +342,6 @@ const translation = {
variableTable: {
key: '变量 Key',
name: '字段名称',
optional: '可选',
type: '类型',
action: '操作',
typeString: '文本',

View File

@ -255,7 +255,6 @@ const translation = {
variableTable: {
key: '變數 Key',
name: '欄位名稱',
optional: '可選',
type: '型別',
action: '操作',
typeString: '文字',