Feat: The key for the begin operator can only contain alphanumeric characters and underscores. #10427 (#11377)

### What problem does this PR solve?

Feat: The key for the begin operator can only contain alphanumeric
characters and underscores. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/icon-font.tsx

@@ -1,15 +1,16 @@
 import { FileIconMap } from '@/constants/file';
 import { cn } from '@/lib/utils';
 import { getExtension } from '@/utils/document-util';
+import { CSSProperties } from 'react';
 
 type IconFontType = {
   name: string;
-
   className?: string;
+  style?: CSSProperties;
 };
 
-export const IconFont = ({ name, className }: IconFontType) => (
+export const IconFont = ({ name, className, style }: IconFontType) => (
-  <svg className={cn('size-4', className)}>
+  <svg className={cn('size-4', className)} style={style}>
     <use xlinkHref={`#icon-${name}`} />
   </svg>
 );

web/src/components/key-input.tsx

@@ -8,7 +8,10 @@ type KeyInputProps = {
 } & Omit<InputProps, 'onChange'>;
 
 export const KeyInput = forwardRef<HTMLInputElement, KeyInputProps>(
-  function KeyInput({ value, onChange, searchValue = /[^a-zA-Z0-9_]/g }, ref) {
+  function KeyInput(
+    { value, onChange, searchValue = /[^a-zA-Z0-9_]/g, ...props },
+    ref,
+  ) {
     const handleChange = useCallback(
       (e: ChangeEvent<HTMLInputElement>) => {
         const value = e.target.value ?? '';
@@ -18,6 +21,6 @@ export const KeyInput = forwardRef<HTMLInputElement, KeyInputProps>(
       [onChange, searchValue],
     );
 
-    return <Input value={value} onChange={handleChange} ref={ref} />;
+    return <Input {...props} value={value} onChange={handleChange} ref={ref} />;
   },
 );

web/src/hooks/logic-hooks/use-build-operator-options.tsx

@@ -12,9 +12,12 @@ export const LogicalOperatorIcon = function OperatorIcon({
     return (
       <IconFont
         name={icon}
-        className={cn('size-4', {
+        className={cn('size-4')}
-          'rotate-180': value === ComparisonOperator.GreatThan,
+        style={
-        })}
+          value === ComparisonOperator.GreatThan
+            ? { transform: 'rotate(180deg)' }
+            : undefined
+        }
       ></IconFont>
     );
   }

web/src/pages/agent/constant/index.tsx

@@ -868,7 +868,7 @@ export enum VariableAssignerLogicalArrayOperator {
 }
 
 export enum ExportFileType {
-  PDF = 'pdf',
+  // PDF = 'pdf',
   HTML = 'html',
   Markdown = 'md',
   DOCX = 'docx',

web/src/pages/agent/form/begin-form/parameter-dialog.tsx

@@ -1,3 +1,4 @@
+import { KeyInput } from '@/components/key-input';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -113,7 +114,6 @@ function ParameterForm({
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
     const values = { ...data, options: data.options?.map((x) => x.value) };
-    console.log('🚀 ~ onSubmit ~ values:', values);
 
     submit(values);
   }
@@ -153,7 +153,11 @@ function ParameterForm({
             <FormItem>
               <FormLabel>{t('key')}</FormLabel>
               <FormControl>
-                <Input {...field} autoComplete="off" onBlur={handleKeyChange} />
+                <KeyInput
+                  {...field}
+                  autoComplete="off"
+                  onBlur={handleKeyChange}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>

web/src/pages/agent/form/iteration-form/dynamic-output.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { FormContainer } from '@/components/form-container';
+import { KeyInput } from '@/components/key-input';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { BlockButton, Button } from '@/components/ui/button';
 import {
@@ -9,7 +10,6 @@ import {
   FormItem,
   FormMessage,
 } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { t } from 'i18next';
@@ -67,10 +67,10 @@ export function DynamicOutputForm({ node }: IProps) {
               render={({ field }) => (
                 <FormItem className="flex-1">
                   <FormControl>
-                    <Input
+                    <KeyInput
                       {...field}
                       placeholder={t('common.pleaseInput')}
-                    ></Input>
+                    ></KeyInput>
                   </FormControl>
                   <FormMessage />
                 </FormItem>