From 153e68e0552ce5f612c1e7068133e65cf2baa2f7 Mon Sep 17 00:00:00 2001
From: zhaoying <yzhao96@best-inc.com>
Date: Sat, 7 Mar 2026 15:09:22 +0800
Subject: [PATCH] feat(web): ui upgrade

---
 .../components/VariableList/VariableList.tsx  | 29 +++++++++++++------
 .../Conversation/components/FileUpload.tsx    | 12 ++++----
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx b/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
index 8e9d2452..6f72c0da 100644
--- a/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
+++ b/web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:26:32 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:26:32 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-25 15:09:09
  */
 /**
  * Variable List Component
@@ -56,12 +56,22 @@ interface VariableListProps {
   }
   return (
     <Card
-      title={<>
-        {t('application.variableConfiguration')}
-        <span className="rb:font-regular rb:text-[12px] rb:text-[#5B6167]"> ({t('application.VariableManagementDesc')})</span>
-      </>}
-      extra={<Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddVariable}>+ {t('application.addVariables')}</Button>}
+      title={t('application.variableConfiguration')}
+      extra={
+        <Button
+          size="small"
+          className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233"
+          onClick={handleAddVariable}
+        >
+          + {t('application.addVariables')}
+        </Button>
+      }
     >
+      <div className="rb:leading-4.5 rb:text-[12px] rb:mb-2">
+        <span className="rb:font-medium">{t('application.variableManagement')}</span>
+        <span className="rb:font-regular rb:text-[#5B6167]"> ({t('application.variableManagementDesc')})</span>
+      </div>
+
       <Form.List name="variables" initialValue={value}>
         {(fields, { remove }) => {
           return (
@@ -69,6 +79,7 @@ interface VariableListProps {
               {fields.length > 0 ? (
                 <div className="rb:mt-3">
                   <Table
+                    size="small"
                     rowKey="index"
                     pagination={false}
                     columns={[
@@ -92,7 +103,7 @@ interface VariableListProps {
                         title: t('application.optional'),
                         dataIndex: 'required',
                         key: 'required',
-                        render: (required) => <Switch checked={!required} disabled />
+                        render: (required) => <Switch size="small" checked={!required} disabled />
                       },
                       {
                         title: t('common.operation'),
@@ -117,7 +128,7 @@ interface VariableListProps {
                   />
                 </div>
               ) : (
-                <Empty url={variablesEmpty} size={88} subTitle={t('application.variablesEmpty')} />
+                <div className="rb-border rb:rounded-xl rb:pt-4 rb:pb-6"><Empty url={variablesEmpty} size={88} subTitle={t('application.variablesEmpty')} /></div>
               )}
             </>
           )
diff --git a/web/src/views/Conversation/components/FileUpload.tsx b/web/src/views/Conversation/components/FileUpload.tsx
index b4f11b1b..256f2d42 100644
--- a/web/src/views/Conversation/components/FileUpload.tsx
+++ b/web/src/views/Conversation/components/FileUpload.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-06 21:09:42 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 12:20:43
+ * @Last Modified time: 2026-03-07 15:03:31
  */
 /**
  * File Upload Component
@@ -21,7 +21,7 @@
  * @component
  */
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Upload, Progress, App } from 'antd';
+import { Upload, Progress, App, Flex } from 'antd';
 import type { UploadProps, UploadFile } from 'antd';
 import type { UploadProps as RcUploadProps } from 'antd/es/upload/interface';
 import { useTranslation } from 'react-i18next';
@@ -194,7 +194,7 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
       formData.append('file', file);
       
       const response = await request.uploadFile(action, formData, requestConfig);
-
+      
       onSuccess?.({data: response});
     } catch (error) {
       onError?.(error as Error);
@@ -260,10 +260,10 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
     itemRender: (_, file, __, actions) => {
       return (
         <div key={file.uid} className="rb:relative rb:w-full rb:pt-2 rb:px-2.5 rb-pb-[10px] rb:border rb:border-[#EBEBEB] rb:rounded rb:p-2 rb:mt-2 rb:bg-white">
-          <div className="rb:text-[12px] rb:flex rb:items-center rb:justify-between rb:mb-0.5">
+          <Flex align="center" justify="space-between" className="rb:text-[12px] rb:mb-0.5!">
             {file.name}
-            <span className="rb:text-[#5B6167] rb:cursor-pointer" onClick={() => actions?.remove()}>Cancel</span>
-          </div>
+            <span className="rb:text-[#5B6167] rb:cursor-pointer" onClick={() => actions?.remove()}>{t('common.cancel')}</span>
+          </Flex>
           <Progress percent={file.percent || 0} strokeColor={file.status === 'error' ? '#FF5D34' : '#155EEF'} size="small" showInfo={false} />
         </div>
       );