Merge pull request #791 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

fix(web): file add size
2026-04-07 11:20:00 +08:00
parent a43e8fa594 bfc98efc9d
commit 9c1c232b2e
9 changed files with 213 additions and 169 deletions
--- a/web/package.json
+++ b/web/package.json
@@ -16,6 +16,7 @@
    "@codemirror/lang-cpp": "^6.0.3",
    "@codemirror/lang-java": "^6.0.2",
    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
    "@codemirror/lang-python": "^6.2.1",
    "@codemirror/lang-rust": "^6.0.2",
    "@codemirror/state": "^6.5.4",
--- a/web/src/components/Chat/ChatInput.tsx
+++ b/web/src/components/Chat/ChatInput.tsx
@@ -5,10 +5,11 @@
 * @Last Modified time: 2026-03-23 17:46:25
 */
 import { type FC, useEffect, useMemo, useState } from 'react'
-import { Flex, Input, Spin } from 'antd'
+import { Flex, Input } from 'antd'
 import clsx from 'clsx'

 import type { ChatInputProps } from './types'
+import FileList from './FileList'

 /**
 * Chat Input Component
@@ -52,6 +53,7 @@ const ChatInput: FC<ChatInputProps> = ({
    })) || []
  }, [fileList])

+
  const handleSend = () => {
    if (loading || !inputValue || inputValue.trim() === '') return
    onSend(inputValue)
@@ -64,100 +66,9 @@ const ChatInput: FC<ChatInputProps> = ({
      <Flex gap={0} vertical justify="space-between" className={clsx("rb-border rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)] rb:rounded-3xl rb:min-h-30", {
        ' rb:border-[#171719]!': isFocus
      })}>
-        {previewFileList.length > 0 && <div className="rb:overflow-x-auto rb:max-w-full">
-          <Flex gap={14} className="rb:mx-3! rb:mt-3! rb:w-max!">
-          {previewFileList.map((file) => {
-            if (file.type?.includes('image')) {
-              return (
-                <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
-                  <div className={clsx("rb:inline-block rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:border rb:border-[#F6F6F6]", {
-                    'rb:border-[#FF5D34]': file.status === 'error'
-                  })}>
-                    <img src={file.url} alt={file.name} className="rb:size-12! rb:rounded-lg rb:object-cover" />
-                    <div
-                      className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')] rb:hover:bg-[url('@/assets/images/conversation/delete_hover.svg')]"
-                      onClick={() => handleDelete(file)}
-                    ></div>
-                  </div>
-                </Spin>
-              )
-            }
-            if (file.type?.includes('video')) {
-              return (
-                <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
-                  <div className={clsx("rb:w-45 rb:h-12 rb:inline-block rb:group rb:relative rb:rounded-lg rb:border rb:border-[#F6F6F6]", {
-                    'rb:border-[#FF5D34]': file.status === 'error'
-                  })}>
-                    <video src={file.url} controls className="rb:w-45 rb:h-12 rb:rounded-lg rb:object-cover" />
-                    <div
-                      className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
-                      onClick={() => handleDelete(file)}
-                    ></div>
-                  </div>
-                </Spin>
-              )
-            }
-            if (file.type?.includes('audio')) {
-              return (
-                <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
-                  <div className={clsx("rb:w-45 rb:h-12rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2 rb:px-2.5 rb:gap-2 rb:border rb:border-[#F6F6F6]", {
-                    'rb:border-[#FF5D34]': file.status === 'error'
-                  })}>
-                    <audio src={file.url} controls className="rb:w-45 rb:h-12" />
-                    <div
-                      className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
-                      onClick={() => handleDelete(file)}
-                    ></div>
-                  </div>
-                </Spin>
-              )
-            }
-            return (
-              <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
-                <Flex
-                  align="center"
-                  gap={10}
-                  className={clsx("rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]", {
-                  'rb:border-[#FF5D34]': file.status === 'error'
-                })}>
-                  <div
-                    className={clsx(
-                      "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
-                      file.type?.includes('pdf')
-                        ? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
-                        : (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet'))
-                        ? "rb:bg-[url('@/assets/images/file/excel.svg')]"
-                        : file.type?.includes('csv')
-                        ? "rb:bg-[url('@/assets/images/file/csv.svg')]"
-                        : file.type?.includes('html')
-                        ? "rb:bg-[url('@/assets/images/file/html.svg')]"
-                        : file.type?.includes('json')
-                        ? "rb:bg-[url('@/assets/images/file/json.svg')]"
-                        : file.type?.includes('ppt')
-                        ? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
-                        : file.type?.includes('text')
-                        ? "rb:bg-[url('@/assets/images/file/txt.svg')]"
-                        : file.type?.includes('markdown')
-                        ? "rb:bg-[url('@/assets/images/file/md.svg')]"
-                        : (file.type?.includes('doc') || file.type?.includes('docx') || file.type?.includes('word') || file.type?.includes('wordprocessingml.document'))
-                        ? "rb:bg-[url('@/assets/images/file/word.svg')]"
-                        : null
-                    )}
-                  ></div>
-                  <div className="rb:flex-1 rb:w-32.5">
-                    <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
-                    <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type?.split('/')[file.type?.split('/').length - 1]} · {file.size}</div>
-                  </div>
-                  <div
-                    className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
-                    onClick={() => handleDelete(file)}
-                  ></div>
-                </Flex>
-              </Spin>
-            )
-          })}
-        </Flex>
-        </div>}
+        <div className="rb:overflow-x-auto rb:max-w-full">
+          <FileList fileList={previewFileList} onDelete={handleDelete} />
+        </div>
        {/* Message input area */}
        <Input.TextArea
          value={inputValue}
--- a/web/src/components/Chat/FileList.tsx
+++ b/web/src/components/Chat/FileList.tsx
@@ -0,0 +1,114 @@
+import { type FC } from 'react'
+import { Flex, Spin } from 'antd'
+import clsx from 'clsx'
+import type { UploadFile, FlexProps } from 'antd'
+
+interface FileListProps {
+  fileList: UploadFile[];
+  onDelete?: (file: UploadFile) => void;
+  wrap?: FlexProps['wrap'];
+  className?: string;
+}
+
+const FileList: FC<FileListProps> = ({ fileList, onDelete, wrap,
+  className = "rb:mx-3! rb:mt-3! rb:w-max!"
+ }) => {
+  if (!fileList.length) return null
+
+  return (
+    <Flex gap={14} wrap={wrap} className={className}>
+      {fileList.map((file) => {
+        if (file.type?.includes('image')) {
+          return (
+            <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
+              <div className={clsx("rb:inline-block rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:border rb:border-[#F6F6F6]", {
+                'rb:border-[#FF5D34]': file.status === 'error'
+              })}>
+                <img src={file.url} alt={file.name} className="rb:size-12! rb:rounded-lg rb:object-cover" />
+                {onDelete && <div
+                  className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')] rb:hover:bg-[url('@/assets/images/conversation/delete_hover.svg')]"
+                  onClick={() => onDelete(file)}
+                ></div>}
+              </div>
+            </Spin>
+          )
+        }
+        if (file.type?.includes('video')) {
+          return (
+            <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
+              <div className={clsx("rb:w-45 rb:h-12 rb:inline-block rb:group rb:relative rb:rounded-lg rb:border rb:border-[#F6F6F6]", {
+                'rb:border-[#FF5D34]': file.status === 'error'
+              })}>
+                <video src={file.url} controls className="rb:w-45 rb:h-12 rb:rounded-lg rb:object-cover" />
+                {onDelete && <div
+                  className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
+                  onClick={() => onDelete(file)}
+                ></div>}
+              </div>
+            </Spin>
+          )
+        }
+        if (file.type?.includes('audio')) {
+          return (
+            <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
+              <div className={clsx("rb:w-45 rb:h-12rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2 rb:px-2.5 rb:gap-2 rb:border rb:border-[#F6F6F6]", {
+                'rb:border-[#FF5D34]': file.status === 'error'
+              })}>
+                <audio src={file.url} controls className="rb:w-45 rb:h-12" />
+                {onDelete && <div
+                  className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
+                  onClick={() => onDelete(file)}
+                ></div>}
+              </div>
+            </Spin>
+          )
+        }
+        return (
+          <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
+            <Flex
+              align="center"
+              gap={10}
+              className={clsx("rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]", {
+                'rb:border-[#FF5D34]': file.status === 'error'
+              })}>
+              <div
+                className={clsx(
+                  "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
+                  file.type?.includes('pdf')
+                    ? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
+                    : (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet'))
+                    ? "rb:bg-[url('@/assets/images/file/excel.svg')]"
+                    : file.type?.includes('csv')
+                    ? "rb:bg-[url('@/assets/images/file/csv.svg')]"
+                    : file.type?.includes('html')
+                    ? "rb:bg-[url('@/assets/images/file/html.svg')]"
+                    : file.type?.includes('json')
+                    ? "rb:bg-[url('@/assets/images/file/json.svg')]"
+                    : file.type?.includes('ppt')
+                    ? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
+                    : file.type?.includes('text')
+                    ? "rb:bg-[url('@/assets/images/file/txt.svg')]"
+                    : file.type?.includes('markdown')
+                    ? "rb:bg-[url('@/assets/images/file/md.svg')]"
+                    : (file.type?.includes('doc') || file.type?.includes('docx') || file.type?.includes('word') || file.type?.includes('wordprocessingml.document'))
+                    ? "rb:bg-[url('@/assets/images/file/word.svg')]"
+                    : null
+                )}
+              ></div>
+              <div className="rb:flex-1 rb:w-32.5">
+                <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
+                <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{[file.type?.split('/').pop(), file.size].filter(item => item).join(' · ')}</div>
+              </div>
+              {onDelete && <div
+                className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
+                onClick={() => onDelete(file)}
+              ></div>}
+            </Flex>
+          </Spin>
+        )
+      })}
+    </Flex>
+  )
+}
+
+export default FileList
--- a/web/src/components/CodeMirrorEditor/index.tsx
+++ b/web/src/components/CodeMirrorEditor/index.tsx
@@ -6,12 +6,14 @@
 */
 import { useEffect, useRef, useMemo } from 'react';
 import { EditorView, basicSetup } from 'codemirror';
+import { placeholder as cmPlaceholder } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import { python } from '@codemirror/lang-python';
 import { javascript } from '@codemirror/lang-javascript';
 import { java } from '@codemirror/lang-java';
 import { cpp } from '@codemirror/lang-cpp';
 import { rust } from '@codemirror/lang-rust';
+import { json } from '@codemirror/lang-json';
 import { oneDark } from '@codemirror/theme-one-dark';

 /**
@@ -26,12 +28,14 @@ import { oneDark } from '@codemirror/theme-one-dark';
 */
 interface CodeMirrorEditorProps {
  value?: string;
-  language?: 'python' | 'python3' | 'javascript' | 'typescript' | 'java' | 'cpp' | 'c' | 'rust';
+  language?: 'python' | 'python3' | 'javascript' | 'typescript' | 'java' | 'cpp' | 'c' | 'rust' | 'json';
  onChange?: (value: string) => void;
  theme?: 'light' | 'dark';
  readOnly?: boolean;
  height?: string;
  size?: 'default' | 'small';
+  placeholder?: string;
+  variant?: 'outlined' | 'borderless';
 }

 /**
@@ -47,6 +51,7 @@ const languageExtensions: Record<string, any> = {
  cpp: cpp(),
  c: cpp(),
  rust: rust(),
+  json: json(),
 };

 /**
@@ -61,6 +66,8 @@ const CodeMirrorEditor = ({
  theme = 'light',
  readOnly = false,
  size,
+  placeholder,
+  variant = 'borderless',
 }: CodeMirrorEditorProps) => {
  // Reference to the DOM element that will contain the editor
  const editorRef = useRef<HTMLDivElement>(null);
@@ -88,6 +95,7 @@ const CodeMirrorEditor = ({
        }
      }),
      EditorState.readOnly.of(readOnly), // Set read-only mode
+      ...(placeholder ? [cmPlaceholder(placeholder)] : []),
    ];

    // Apply dark theme if specified
@@ -111,7 +119,7 @@ const CodeMirrorEditor = ({
    return () => {
      viewRef.current?.destroy();
    };
-  }, [language, theme, readOnly]);
+  }, [language, theme, readOnly, placeholder]);

  /**
   * Update editor content when the value prop changes externally
@@ -144,7 +152,13 @@ const CodeMirrorEditor = ({
    return `${size === 'small' ? 16 : 20}px`
  }, [size])

-  return <div ref={editorRef} style={{ minHeight, fontSize, lineHeight }} />;
+  return (
+    <div
+      ref={editorRef}
+      style={{ minHeight, fontSize, lineHeight }}
+      className={variant === 'borderless' ? '' : 'rb-border rb:rounded-[8px]'}
+    />
+  );
 };

 export default CodeMirrorEditor;
--- a/web/src/views/Conversation/components/FileUpload.tsx
+++ b/web/src/views/Conversation/components/FileUpload.tsx
@@ -237,8 +237,11 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
      percent: 0,
      type: rcFile.type,
      originFileObj: rcFile,
-      thumbUrl: URL.createObjectURL(rcFile)
+      thumbUrl: URL.createObjectURL(rcFile),
+      size: rcFile.size,
    }
+
+    console.log('fileVo', fileVo)
    onChange?.(fileVo)
    request.uploadFile(action, formData, requestConfig)
      .then(res => {
--- a/web/src/views/Workflow/components/AddChatVariable/ChatVariableModal.tsx
+++ b/web/src/views/Workflow/components/AddChatVariable/ChatVariableModal.tsx
@@ -6,7 +6,7 @@
 */
 import { forwardRef, useImperativeHandle, useState, useRef, useMemo } from 'react';
 import { Form, Input, Select, InputNumber, Button, Row, Col, Flex, Spin } from 'antd';
-import clsx from 'clsx';
+import { PlusOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';

 import type { ChatVariableModalRef } from './types'
@@ -18,9 +18,31 @@ import UploadFileListModal from '@/views/Conversation/components/UploadFileListM
 import type { UploadFileListModalRef } from '@/views/Conversation/types'
 import { getFileInfoByUrl } from '@/api/fileStorage'
 import { transform_file_type } from '@/views/Conversation/components/FileUpload'
+import RadioGroupBtn from '../Properties/RadioGroupBtn';
+import CodeMirrorEditor from '@/components/CodeMirrorEditor';
+import FileList from '@/components/Chat/FileList'

 const FormItem = Form.Item;

+const object_placeholder = `# example
+# {
+#   "name": "redbear",
+#   "age": 2
+# }`
+
+const array_object_placeholder = `# example
+# [
+#   {
+#     "name": "redbear",
+#     "age": 2
+#   },
+#   {
+#     "name": "redbear",
+#     "age": 2
+#   }
+# ]
+`
+
 interface ChatVariableModalProps {
  refresh: (value: ChatVariable, editIndex?: number) => void;
 }
@@ -233,7 +255,7 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
          <Select
            placeholder={t('common.pleaseSelect')}
            onChange={(value) => {
-              form.setFieldValue('defaultValue', undefined);
+              form.setFieldValue('defaultValue', value === 'array[string]' ? [] : undefined);
              setFileList([]);
              if (value === 'file' || value === 'array[file]') form.setFieldsValue(defaultFileUploadValues as any);
            }}
@@ -244,7 +266,8 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
          />
        </FormItem>

-        {type === 'file' || type === 'array[file]' ? (
+        {type?.includes('file')
+        ? (
          <>
            <UploadFileListModal
              ref={uploadFileListModalRef}
@@ -273,67 +296,53 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
                  </Col>
                </Row>
              {previewFileList.length > 0 && (
-                <Flex gap={8} wrap className="rb:mt-2!">
-                  {previewFileList.map((file) => (
-                    <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
-                      {file.type?.includes('image') ? (
-                        <div className={clsx('rb:inline-block rb:group rb:relative rb:rounded-lg rb:border', {
-                          'rb:border-[#FF5D34]': file.status === 'error',
-                          'rb:border-[#F6F6F6]': file.status !== 'error',
-                        })}>
-                          <img src={file.url} alt={file.name} className="rb:size-12! rb:rounded-lg rb:object-cover" />
-                          <div
-                            className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')] rb:hover:bg-[url('@/assets/images/conversation/delete_hover.svg')]"
-                            onClick={() => handleDelete(file)}
-                          />
-                        </div>
-                      ) : (
-                        <Flex
-                          align="center"
-                          gap={10}
-                          className={clsx('rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2! rb:px-2.5! rb:border', {
-                            'rb:border-[#FF5D34]': file.status === 'error',
-                            'rb:border-[#F6F6F6]': file.status !== 'error',
-                          })}
-                        >
-                          <div className={clsx(
-                            "rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
-                            file.type?.includes('pdf') ? "rb:bg-[url('@/assets/images/file/pdf.svg')]" :
-                              (file.type?.includes('excel') || file.type?.includes('spreadsheetml')) ? "rb:bg-[url('@/assets/images/file/excel.svg')]" :
-                                file.type?.includes('csv') ? "rb:bg-[url('@/assets/images/file/csv.svg')]" :
-                                  file.type?.includes('json') ? "rb:bg-[url('@/assets/images/file/json.svg')]" :
-                                    file.type?.includes('ppt') ? "rb:bg-[url('@/assets/images/file/ppt.svg')]" :
-                                      file.type?.includes('text') ? "rb:bg-[url('@/assets/images/file/txt.svg')]" :
-                                        file.type?.includes('markdown') ? "rb:bg-[url('@/assets/images/file/md.svg')]" :
-                                          (file.type?.includes('doc') || file.type?.includes('word')) ? "rb:bg-[url('@/assets/images/file/word.svg')]" : null
-                          )} />
-                          <div className="rb:flex-1 rb:w-32.5">
-                            <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
-                            <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">
-                              {file.type?.split('/').pop()} · {file.size}
-                            </div>
-                          </div>
-                          <div
-                            className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
-                            onClick={() => handleDelete(file)}
-                          />
-                        </Flex>
-                      )}
-                    </Spin>
-                  ))}
-                </Flex>
+                <FileList wrap="wrap" fileList={previewFileList} onDelete={handleDelete} className="rb:mt-2!" />
              )}
            </Form.Item>
          </>
-        ) : (
+        )
+        : ['array[string]', 'array[number]', 'array[boolean]'].includes(type)
+        ? (
+          <Form.Item label={t('workflow.config.parameter-extractor.default')}>
+            <Form.List name="defaultValue">
+              {(fields, { add, remove }) => (
+                <Flex vertical gap={8}>
+                  {fields.map(({ key, name }) => (
+                    <Flex key={key} align="center" gap={4}>
+                      <Form.Item name={name} noStyle>
+                        {type === 'array[number]'
+                          ? <InputNumber placeholder={t('common.enter')} className="rb:flex-1!" />
+                          : type === 'array[boolean]'
+                          ? <RadioGroupBtn size="large" options={[{ value: true, label: 'True' }, { value: false, label: 'False' }]} className="rb:flex-1!" />
+                          : <Input placeholder={t('common.enter')} className="rb:flex-1!" />
+                        }
+                      </Form.Item>
+                      <div
+                        className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/workflow/deleteBg.svg')] rb:hover:bg-[url('@/assets/images/workflow/deleteBg_hover.svg')]"
+                        onClick={() => remove(name)}
+                      ></div>
+                    </Flex>
+                  ))}
+                  <Button type="dashed" onClick={() => add()} icon={<PlusOutlined />} block>
+                    {t('common.add')}
+                  </Button>
+                </Flex>
+              )}
+            </Form.List>
+          </Form.Item>
+        )
+        : (
          <Form.Item name="defaultValue" label={t('workflow.config.parameter-extractor.default')}>
            {type === 'number'
              ? <InputNumber placeholder={t('common.enter')} style={{ width: '100%' }} />
              : type === 'boolean'
-              ? <Select
-                  placeholder={t('common.pleaseSelect')}
-                  options={[{ value: true, label: 'true' }, { value: false, label: 'false' }]}
-                />
+              ? <RadioGroupBtn size="large" options={[{ value: true, label: 'True' }, { value: false, label: 'False' }]} />
+              : type === 'object' || type === 'array[object]'
+              ? <CodeMirrorEditor
+                language="json"
+                placeholder={type === 'object' ? object_placeholder : array_object_placeholder}
+                variant="outlined"
+              />
              : <Input placeholder={t('common.enter')} />
            }
          </Form.Item>
--- a/web/src/views/Workflow/components/Properties/CaseList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
@@ -281,7 +281,7 @@ const CaseList: FC<CaseListProps> = ({
                                            options={options}
                                            size="small"
                                            allowClear={false}
-                                            onChange={(val) => handleLeftFieldChange(caseIndex, conditionIndex, val)}
+                                            onChange={(val) => handleLeftFieldChange(caseIndex, conditionIndex, val as string)}
                                            variant="borderless"
                                            className="rb:w-36!"
                                          />
--- a/web/src/views/Workflow/components/Properties/RadioGroupBtn.tsx
+++ b/web/src/views/Workflow/components/Properties/RadioGroupBtn.tsx
@@ -63,6 +63,7 @@ const RadioGroupBtn: FC<RadioCardProps> = ({
  allowClear = true,
  block = false,
  type,
+  className,
 }) => {
  /** Listen to value changes and trigger side effects via onValueChange callback */
  useEffect(() => {
@@ -86,7 +87,7 @@ const RadioGroupBtn: FC<RadioCardProps> = ({
  }

  return (
-    <div className={clsx(`rb:grid rb:grid-cols-${block ? 1 : options.length} rb:gap-1`)}>
+    <div className={clsx(`rb:grid rb:grid-cols-${block ? 1 : options.length} rb:gap-1`, className)}>
      {/* Render each option as a selectable card */}
      {options.map(option => (
        <div key={String(option.value)} className={clsx("rb:border rb:w-full rb:leading-4.5 rb:px-2.5  rb:text-center rb:text-[12px] rb:font-medium rb:cursor-pointer", {
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -12,16 +12,7 @@ export default defineConfig({
    proxy: {
      // 主要API代理，支持 /api 和 /api/* 格式
      '/api': {
-        // target: 'http://192.168.110.83:8000', // wxy
-        // target: 'http://192.168.110.86:8000', // lxy
-        // target: 'http://192.168.110.2:8000', // xjn
-        // target: 'http://192.168.110.72:8000', // llq
-        // target: 'http://192.168.110.39:8000', // myh
-        target: 'https://devmemorybear.redbearai.com/', // 开发后端服务地址
-        // target: 'https://devcopymemorybear.redbearai.com/', // 开发sass后端服务地址
-        // target: 'https://testmemorybear.redbearai.com/', // 测试后端服务地址
-        // target: 'https://memorybear.redbearai.com/', // 预发服务地址
-        // target: 'https://cloud.memorybear.ai/', // AMAZON 生产地址
+        target: 'http://localhost:5173',
        changeOrigin: true,

        // 匹配所有以/api开头的请求，包括/api/token
@@ -93,7 +84,7 @@ export default defineConfig({
    minify: 'terser',
    terserOptions: {
      compress: {
-        drop_console: true, // 移除 console
+        drop_console: false, // 移除 console
        drop_debugger: true, // 移除 debugger
      },
    },