@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/StdUpload/index.tsx

@@ -1,16 +1,17 @@
-import { CloudUploadOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
-import { LingxiForwardRef } from '@lingxiteam/types';
+import { CloudUploadOutlined, PlusOutlined, UploadOutlined } from '@lingxiteam/icons';
 import { Button, message, Modal, Radio, Upload } from 'antd';
-import { UploadType } from 'antd/lib/upload/interface';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import CommIcon from '../Icon';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import type { IconCfg } from '../Icon/PropsType';
-import { FormFields, getFieldsProps, useCommonImperativeHandle, useForm, useListenProps } from '../utils';
-import { convertToBytes, createRandomStr, getAfterString } from '../utils/common';
-import { useLocale } from '../utils/hooks/useLocale';
+import CommIcon from '../Icon';
+import { createRandomStr, getAfterString, convertToBytes } from '../utils/common';
 import renderReadOnly from '../utils/renderReadOnly';
 import DownloadProgress from './DownloadProgress';
+import { FormFields, getFieldsProps, useCommonImperativeHandle, useListenProps, useForm } from '../utils';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import UploadItem from './UploadItem';
+import { useLocale } from '../utils/hooks/useLocale';
+import { UploadType } from 'antd/lib/upload/interface';
+import { WrapperButton } from '../Button';
 
 const { Dragger } = Upload;
 export interface MyFormUploadProps {
@@ -54,7 +55,7 @@ export interface MyFormUploadProps {
   headers?: any;
   columns?: any;
   uploadAccepType?: any;
-  viewMode: 'newTab' | 'popUp' | 'window';
+  viewMode: 'newTab' | 'popUp' | 'window',
   modalWidth?: number;
   modalHeight?: number;
   synchronousDeletion?: boolean;
@@ -125,7 +126,8 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
 
   useEffect(() => {
     if (api) {
-      setAction(engineApis?.resolveApiPath?.(api));
+      const action = engineApis?.resolveApiPath?.(api, {}, { isIgnoreSecurity: true });
+      setAction(action);
     } else {
       // @ts-ignore
       setAction(engineApis?.service?.uploadSingleFile());
@@ -163,15 +165,9 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
     showDownloadIcon: downloadIcon?.showDownloadIcon,
     downloadIcon: (file: any) => {
       if (downloadProVisible[file.fileId]) {
-        return (
-          <DownloadProgress
-            ref={(r: any) => {
-              progressRef.current[file.fileId] = r;
-            }}
-          />
-        );
+        return <DownloadProgress ref={(r: any) => { progressRef.current[file.fileId] = r; }} />;
       }
-      return downloadIcon?.downloadIconType ? (
+      return (downloadIcon?.downloadIconType ? (
         <CommIcon
           icon={{
             type: downloadIcon?.downloadIconType,
@@ -196,7 +192,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
           $$componentItem={props.$$componentItem}
           className=""
         />
-      );
+      ));
     },
     showRemoveIcon: !(disabled || readOnly) && deleteIcon?.showRemoveIcon,
     removeIcon: deleteIcon?.deleteIconType ? (
@@ -229,40 +225,51 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
 
   const [fileList, setFileList] = useState<any[]>();
 
+  const judgeIsBase64 = (str: string) => typeof str === 'string' && str.match(/^data:([A-Za-z-+/]+);base64,(.+)$/);
+
   // 文件名为全路径时，拆分出实际文件名
-  const handleFileName = (_fileName: string) => (_fileName ? _fileName.split('//').pop() : _fileName);
+  const handleFileName = (_fileName: string) =>
+    _fileName ? _fileName.split('//').pop() : _fileName;
 
   const updateDefaultFileList = (srcList: any) => {
     if (srcList && Array.isArray(srcList)) {
       const defaultList = JSON.parse(JSON.stringify(srcList));
       setFileList(
         defaultList.map((file: any) => {
-          const { fileUrl, url, filePathInServer, fileId } = file;
+          const { fileUrl, url, filePathInServer, fileId, data } = file;
           // const url = undefined;
           let finallyUrl = fileUrl || url;
+
+          const isBase64 = judgeIsBase64(data);
           if (fileId) {
             finallyUrl = engineApis?.getAppFileUrlById(fileId);
           } else {
             // 兼容外部数据使用filePathInServer字段
-            if (!finallyUrl && filePathInServer?.match(/^(http:|https:|\/\/)/)) {
+            if (!finallyUrl && filePathInServer?.match?.(/^(http:|https:|\/\/)/)) {
               finallyUrl = filePathInServer;
             }
-
+  
             // 资源地址加密加签处理
             if (finallyUrl && engineApis?.securityWithUrl) {
               finallyUrl = engineApis.securityWithUrl(finallyUrl);
             }
           }
-          const finallyUrlWithoutSign = finallyUrl.match('X-SIGN=') ? finallyUrl.slice(0, finallyUrl.indexOf('&X-SIGN')) : finallyUrl;
-          return {
+          const finallyUrlWithoutSign = finallyUrl?.match?.('X-SIGN=') ? finallyUrl.slice(0, finallyUrl.indexOf('&X-SIGN')) : finallyUrl;
+
+          // 如果data是base64字符串，则将data赋值给previewUrl来支持预览
+          if (isBase64) {
+            file.previewUrl = file.data;
+          }
+
+          return ({
             ...file,
-            url: finallyUrl,
-            name: file.fileName,
-            uid: `-${file.fileId || file.id || finallyUrl || file.uid}`, // 添加uid
+            url: isBase64 ? data : finallyUrl,
+            name: file.fileName || file.name,
+            uid: isBase64 ? createRandomStr() : `-${file.fileId || file.id || finallyUrl || file.uid}`, // base64时，随机生成uid
             status: file?.status || 'done', // 后台已存在文件状态为已完成
             fileUrl: file.fileUrl || finallyUrlWithoutSign, // 补充一个没有签名的url地址, 业务数据里使用的应是不带签名的
-          };
-        })
+          });
+        }),
       );
     } else {
       setFileList([]);
@@ -274,6 +281,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
     updateDefaultFileList(value);
   }, [value]);
 
+
   let beforeUploadCounter = 0; // 当前一次选择的待上传文件个数
   let allFilesLength = 0; // 待上传文件个数 + 当前文件列表个数
   let continueUpload = true; // 是否继续上传
@@ -288,17 +296,10 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
       const { file, fileList } = e;
       const { percent, status } = file;
       if (onListenUploading) {
-        onListenUploading(
-          file,
-          fileList,
-          fileList?.map((file: any) => (file?.fileId ? file : file?.response?.resultObject))
-        );
+        onListenUploading(file, fileList, fileList?.map((file: any) => file?.fileId ? file : file?.response?.resultObject));
       }
       if (fileList && onFileListChange) {
-        onFileListChange(
-          fileList,
-          fileList?.map((file: any) => (file?.fileId ? file : file?.response?.resultObject))
-        );
+        onFileListChange(fileList, fileList?.map((file: any) => file?.fileId ? file : file?.response?.resultObject));
       }
       // 上传完成的标识
       let flag = true;
@@ -310,7 +311,12 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
         if (f.response && typeof f.response === 'object') {
           const { resultObject, resultCode } = f.response;
           if (resultObject) {
-            const { fileId, filePathInServer = undefined, fileUrl = undefined, url = undefined } = resultObject;
+            const {
+              fileId,
+              filePathInServer = undefined,
+              fileUrl = undefined,
+              url = undefined,
+            } = resultObject;
             const { status } = f;
             let effectDownUrl = fileUrl || url;
             // 兼容外部数据使用filePathInServer字段
@@ -319,7 +325,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
             }
 
             const finallyUrl = effectDownUrl || engineApis?.getAppFileUrlById(fileId);
-            const finallyUrlWithoutSign = finallyUrl.match('X-SIGN=') ? finallyUrl.slice(0, finallyUrl.indexOf('&X-SIGN')) : finallyUrl;
+            const finallyUrlWithoutSign = finallyUrl?.match?.('X-SIGN=') ? finallyUrl.slice(0, finallyUrl.indexOf('&X-SIGN')) : finallyUrl;
             return {
               ...f,
               ...resultObject,
@@ -364,7 +370,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
               }
               return file;
             })
-            .filter((file: any) => file); // 提交文件列表时，过滤掉异常(未上传成功)的文件);
+            .filter((file: any) => file);// 提交文件列表时，过滤掉异常(未上传成功)的文件);
           onChange(fileResponseList);
         }
         if (onFinishUpload && percent === 100 && status === 'done') {
@@ -382,8 +388,15 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
   const handleRemove = async (file: any) => {
     beforeUploadCounter = 0;
     continueUpload = true;
-    const { fileId } = file;
-    const list = (fileList || []).filter(_file => _file.fileId !== fileId);
+    const { fileId, uid } = file;
+    let list = [];
+    if (fileId) {
+      list = (fileList || []).filter((_file) => _file.fileId !== fileId);
+    } else {
+      // 不存在fileId时 根据uid删除
+      list = (fileList || []).filter((_file) => _file.uid !== uid);
+    }
+
     if (onChange) {
       setFileList(list);
       onChange(list);
@@ -404,7 +417,9 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
 
   const getDownloadName = (suffix: any, file: any) => {
     const suf = suffix || getAfterString(file.name, '.') || '';
-    return fileNameEncode ? `${createRandomStr(20).toUpperCase()}.${suf}` : file.name.replace(/\.\w+$/, `.${suf}`);
+    return fileNameEncode
+      ? `${createRandomStr(20).toUpperCase()}.${suf}`
+      : file.name.replace(/\.\w+$/, `.${suf}`);
   };
 
   const createDownLink = (data: Blob, downloadName: string) => {
@@ -426,6 +441,9 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
   const downloadFile = async (file: any) => {
     let downUrl = file.url;
 
+    // 检查是否为 base64 格式
+    const isBase64 = judgeIsBase64(downUrl);
+
     try {
       // 如果有field 优先通过field拼接
       if (file.fileId) {
@@ -433,8 +451,10 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
 
         downUrl = engineApis?.getAppFileUrlById(file.fileId, {
           addWaterMark,
+        }, {
+          isIgnoreSecurity: true,
         });
-      } else if (engineApis?.securityWithUrl) {
+      } else if (engineApis?.securityWithUrl && !isBase64) {
         downUrl = engineApis.securityWithUrl(downUrl);
       }
     } catch (error) {
@@ -470,14 +490,32 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
       // 添加自定义头部(在info.js写入)
       const { lxRequestHeaders } = window as any;
       if (lxRequestHeaders) {
-        Object.keys(lxRequestHeaders).forEach(header => {
+        Object.keys(lxRequestHeaders).forEach((header) => {
           xhr.setRequestHeader(header, lxRequestHeaders[header]); // 设置请求头参数
         });
       }
       xhr.onload = () => {
         // @ts-ignore
         const suffix = getAfterString(xhr.getResponseHeader('Content-Disposition'), '.');
-        const data = xhr.response; // 获取响应体数据
+        let data = xhr.response; // 获取响应体数据
+
+        // base64特殊处理
+        if (isBase64) {
+          // 提取 Base64 数据和 MIME 类型
+          const parts = downUrl.split(';base64,');
+          const mimeType = parts[0].split(':')[1];
+          const base64Content = parts[1];
+
+          // 解码 Base64 数据
+          const byteCharacters = atob(base64Content);
+          const byteArray = new Uint8Array(byteCharacters.length);
+          for (let i = 0; i < byteCharacters.length; i += 1) {
+            byteArray[i] = byteCharacters.charCodeAt(i);
+          }
+
+          data = new Blob([byteArray], { type: mimeType });
+        }
+
         createDownLink(data, getDownloadName(suffix, file));
         setDownloadProVisible({ ...downloadProVisible, [file.fileId]: false });
       };
@@ -488,7 +526,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
       // 下载进度条
       xhr.onprogress = (event: any) => {
         if (event.lengthComputable) {
-          progressRef.current?.[file.fileId]?.setPercent(Math.round((event.loaded * 100) / event.total));
+          progressRef.current?.[file.fileId]?.setPercent(Math.round(event.loaded * 100 / event.total));
         }
       };
       xhr.send();
@@ -527,10 +565,10 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
       let fileIndex: number = 0;
       const fileData = fileList?.map((f, i) => {
         // 第三方系统上传接口可能没有fileId字段，保留一个previewUrl字段作为可预览
-        if (f.fileId === fileId || (f.fileId === undefined && data.previewUrl === f.previewUrl)) {
+        if (f.fileId === fileId || (f.fileId === undefined && ((data.previewUrl && data.previewUrl === f.previewUrl) || data.uid === f.uid))) {
           fileIndex = i;
         }
-        return {
+        return ({
           fileId: f.fileId,
           appId: appId || window.appId,
           pageId,
@@ -543,7 +581,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
             }
           },
           file: f,
-        };
+        });
       });
       engineApis.BannerModal.open({
         fileIndex,
@@ -597,9 +635,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
 
   const getFileType = (fileName: string) => {
     const startIndex = fileName.lastIndexOf('.');
-    if (startIndex !== -1) {
-      return fileName.substring(startIndex + 1, fileName.length).toLowerCase();
-    }
+    if (startIndex !== -1) return fileName.substring(startIndex + 1, fileName.length).toLowerCase();
     return '';
   };
 
@@ -609,14 +645,12 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
     if (acceptExtension) {
       const extensionList = acceptExtension.split(',');
       if (extensionList && extensionList.length > 0) {
-        targetacceptExtension = extensionList
-          .map((item: string) => {
-            if (item.startsWith('.')) {
-              return item;
-            }
-            return `.${item}`;
-          })
-          .join(',');
+        targetacceptExtension = extensionList.map((item: string) => {
+          if (item.startsWith('.')) {
+            return item;
+          }
+          return `.${item}`;
+        }).join(',');
       }
     }
     let combinedAcceptType;
@@ -698,6 +732,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
     ),
   };
 
+
   if (readOnly && fileList && fileList?.length <= 0) {
     return renderReadOnly('--');
   }
@@ -707,68 +742,55 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
       const hidden = fileList?.length === numberLimit;
       return hidden ? null : (
         <>
-          <CommIcon
-            icon={icon}
-            placeholder={<PlusOutlined rev="" />}
-            className=""
-            getEngineApis={getEngineApis}
-            $$componentItem={props.$$componentItem}
-          />
+          <CommIcon icon={icon} placeholder={<PlusOutlined />} className="" getEngineApis={getEngineApis} $$componentItem={props.$$componentItem} />
           <div>{uploadText || '点击上传'}</div>
-        </>
-      );
+        </>);
     }
 
     return (
-      <Button>
-        <CommIcon
-          icon={icon}
-          placeholder={<UploadOutlined rev="" />}
-          className=""
-          getEngineApis={getEngineApis}
-          $$componentItem={props.$$componentItem}
-        />
-        {uploadText || '点击上传'}
-      </Button>
+      <WrapperButton>
+        <Button>
+          <CommIcon icon={icon} placeholder={<UploadOutlined />} className="" getEngineApis={getEngineApis} $$componentItem={props.$$componentItem} />
+          {uploadText || '点击上传'}
+        </Button>
+      </WrapperButton>
     );
   };
 
   // 覆写上传控件外层容器，添加点击拦截
   const coverLayout = (props: any) => {
-    const events = props.disabled
-      ? {}
-      : {
-        onClick:
-            props.openFileDialogOnClick !== false
-              ? async (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
-                let checkResult: any;
-
-                const runNext = () => {
-                  if (checkResult !== 0) {
-                    props.onClick(e);
-                  }
-                };
+    const events = props.disabled ? {} : {
+      onClick: props.openFileDialogOnClick !== false ? async (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
+        let checkResult: any;
+
+        const runNext = () => {
+          if (checkResult !== 0) {
+            props.onClick(e);
+          }
+        };
 
-                if (onCheckUpload) {
-                  // 某些浏览器(Safari)可能出于安全限制，在跳出事件循环后，不再触发dom事件，此处通过添加setTimeout宏任务让当前事件循环保持
-                  const loopWait = () => {
-                    setTimeout(() => {
-                      if (typeof checkResult === 'undefined') {
-                        loopWait();
-                      } else {
-                        runNext();
-                      }
-                    }, 10);
-                  };
-                  loopWait();
-                  checkResult = (await onCheckUpload()) ?? 1; // 避免onCheckUpload返回结果是undefined 导致loopWait的死循环，checkResult必须有一个非undefined的值
-                } else {
-                  runNext();
-                }
+        if (onCheckUpload) {
+          // 某些浏览器(Safari)可能出于安全限制，在跳出事件循环后，不再触发dom事件，此处通过添加setTimeout宏任务让当前事件循环保持
+          const loopWait = () => {
+            setTimeout(() => {
+              if (typeof checkResult === 'undefined') {
+                loopWait();
+              } else {
+                runNext();
               }
-              : () => {},
-      };
-    return <div {...props} {...events} />;
+            }, 10);
+          };
+          loopWait();
+          checkResult = await onCheckUpload() ?? 1; // 避免onCheckUpload返回结果是undefined 导致loopWait的死循环，checkResult必须有一个非undefined的值
+        } else {
+          runNext();
+        }
+      } : () => {},
+    };
+    return <div
+      {...props}
+      {...events}
+    />;
   };
 
   // @ts-ignore
@@ -782,7 +804,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
               {/* TODO: 占位图标？？ */}
               <CommIcon
                 icon={icon}
-                placeholder={<CloudUploadOutlined style={{ fontSize: 45 }} rev="" />}
+                placeholder={<CloudUploadOutlined style={{ fontSize: 45 }} />}
                 getEngineApis={getEngineApis}
                 $$componentItem={props.$$componentItem}
                 className=""
@@ -814,7 +836,7 @@ const FormUpload = LingxiForwardRef<any, MyFormUploadProps>((props, ref) => {
           </Button>
         }
       >
-        <Radio.Group onChange={e => setdDownloadWay(e.target.value)} value={downloadWay}>
+        <Radio.Group onChange={(e) => setdDownloadWay(e.target.value)} value={downloadWay}>
           <Radio value="1">{getLocale?.('Upload.origin')}</Radio>
           <Radio value="2">{getLocale?.('Upload.waterMark')}</Radio>
         </Radio.Group>
@@ -901,6 +923,7 @@ const StdUpload = LingxiForwardRef<any, MyStdUploadProps>((props, ref) => {
     ...restProps
   } = props;
 
+
   const [uploadProps, setUploadProps] = useListenProps(props.uploadProps);
 
   const { formFieldsRef, required, readOnly, disabled, finalRules } = useCommonImperativeHandle(ref, props, {
@@ -930,7 +953,7 @@ const StdUpload = LingxiForwardRef<any, MyStdUploadProps>((props, ref) => {
 
   // FIX: 兼容旧逻辑 通过表单设置值时表单项的值需要预处理，否则会导致值和预想的值不一致
   if (formContext.inForm) {
-    formContext.preproccessSetFormValues(props.fieldName, v => transValue(v));
+    formContext.preproccessSetFormValues(props.fieldName, (v) => transValue(v));
   }
 
   const extraParamsData = useMemo(() => {
@@ -938,16 +961,14 @@ const StdUpload = LingxiForwardRef<any, MyStdUploadProps>((props, ref) => {
       ...(uploadProps?.data || {}),
     };
     if (restProps?.columns) {
-      const { _source, serviceCode } = restProps?.columns || {};
+      const { _source, _serviceId } = restProps?.columns || {};
       switch (_source) {
         case 'std': {
           data['ORCHESTRATION.appId'] = props.$$componentItem.appId;
-          // data['ORCHESTRATION.serviceVersionId'] = _serviceId;
-          data['ORCHESTRATION.serviceCode'] = serviceCode;
+          data['ORCHESTRATION.serviceVersionId'] = _serviceId;
           break;
         }
-        default:
-          break;
+        default: break;
       }
     }
     return data;
@@ -991,7 +1012,7 @@ const StdUpload = LingxiForwardRef<any, MyStdUploadProps>((props, ref) => {
         disabled={disabled}
         appId={props.$$componentItem.appId}
         pageId={props.$$componentItem.pageId}
-        onChange={e => {
+        onChange={(e) => {
           if (onChange) {
             onChange(e);
           }

package/lib/pcpublic/src/components/pcfactory/src/Steps/ArrowStepItem.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import type { StepProps } from 'antd';
+import classNames from 'classnames';
+import hexToHsl from 'hex-to-hsl';
+import rgbToHsl from 'rgb-to-hsl';
+import EllipsisLabel from '../DynamicTabs/EllipsisLabel';
+
+export interface ArrowStepItemProps {
+  arrowStyle?: 'simple' | 'color' | 'colorFlag' | 'colorArrow';
+  title?: string;
+  status?: StepProps['status'];
+  color?: string;
+  stepStyle: 'number' | 'icon' | 'dot' | 'arrow';
+}
+
+export function extractNumbersFromRgb(str: string) {
+  const regex = /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/;
+  const match = str.match(regex);
+
+  if (match) {
+    // 提取匹配的数字（忽略第一个匹配项，因为它是整个字符串）
+    const numbers = match.slice(1).filter(Boolean).map(Number);
+    return numbers;
+  }
+
+  return null;
+}
+
+const ArrowStepItem:React.FC<ArrowStepItemProps> = (props) => {
+  const { title, arrowStyle = 'simple', color, status, stepStyle, children } = props;
+  if (stepStyle !== 'arrow') {
+    return <>{title}</>;
+  }
+
+  // 根据hsl格式的l值动态计算文字颜色
+  const { isLight, finalColor } = useMemo(() => {
+    let light;
+    if (color && arrowStyle !== 'simple') {
+      let hslColor = hexToHsl(color);
+      if (color.indexOf('rgb') !== -1) {
+        const colorList = extractNumbersFromRgb(color)?.slice(0, 3);
+        if (colorList) {
+          hslColor = rgbToHsl(...colorList);
+        }
+      }
+      if (hslColor?.length) {
+        let lightValue = hslColor[2];
+        if (typeof lightValue !== 'number') {
+          lightValue = +(lightValue.replace('%', ''));
+        }
+        light = lightValue < 80;
+      }
+    }
+    return {
+      // 默认样式下颜色固定，跟随主题，不允许设置步骤颜色
+      finalColor: arrowStyle !== 'simple' ? color : undefined,
+      isLight: light,
+    };
+  }, [color, arrowStyle]);
+
+  return (
+    <div
+      style={{
+        color: finalColor,
+      }}
+      className={classNames(
+        'ued-arrow-step-item',
+        `ued-arrow-step-item-${arrowStyle}`,
+        `ued-arrow-step-item-${arrowStyle}-${status}`,
+      )}
+    >
+      <div
+        className={classNames('ued-arrow-step-item-content',
+          isLight !== undefined ? `ued-arrow-step-item-content-${isLight ? 'light' : 'dark'}` : '')}
+        style={{
+          backgroundColor: finalColor,
+        }}
+      >
+        <EllipsisLabel className="ued-arrow-step-item-text">
+          {children}
+          {title}
+        </EllipsisLabel>
+      </div>
+    </div>
+  );
+};
+
+export default ArrowStepItem;