feat(web): ui upgrade
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user