@lingxiteam/ebe-utils 0.5.10 → 0.6.1

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

@@ -0,0 +1,332 @@
+import React, { CSSProperties } from 'react';
+import { Steps, StepsProps } from 'antd';
+import { Vector, CheckCircle } from './constant';
+import { Icon } from '@lingxiteam/icons';
+import FactoryIconED from '../Icon/IconED';
+import FactoryIcon from '../Icon';
+import classNames from 'classnames';
+import ArrowStepItem from './ArrowStepItem';
+import TemplateStepItem from './TemplateStepItem';
+
+const { Step } = Steps;
+
+export const prefixCls = 'ued-step-wrap';
+
+export type StepStyle = 'number' | 'icon' | 'dot' | 'arrow';
+export type StepSize = 'small' | 'default';
+export type StepLabelPlacement = 'horizontal' | 'vertical';
+export type StepTemplate = 'square' | 'ellipse' | 'default' | 'square-vertical';
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+
+export interface IconSettingItem {
+  label: string;
+  value: StepStatus;
+  isUsePrimary?: boolean;
+  icon?: any;
+  color?: string;
+}
+
+export interface StepAlias {
+  icon: string;
+  description: string;
+  disabled: string;
+  status: string;
+  subTitle: string;
+  title: string;
+  id: string;
+}
+
+export interface StepComponentProps {
+  dataSource: any[];
+  size: StepSize;
+  stepStyle: StepStyle;
+  labelPlacement: StepLabelPlacement;
+  direction?: StepsProps['direction'];
+  iconSetting: IconSettingItem[];
+  template?: StepTemplate;
+  arrowStyle?: 'color' | 'simple' | 'colorFlag' | 'colorArrow';
+  stepSpace?: number | string;
+  backgroundStyle?: CSSProperties;
+  style?: CSSProperties;
+  className?: string;
+  getCurrentColor: (item: any, statusAlias: string) => string;
+  alias: StepAlias;
+  getEngineApis?: () => any;
+  $$componentItem?: any;
+  onChange?: (current: number) => void;
+  current?: number;
+  getEdEngineApi?: () => any;
+  //   是否为配置态
+  isED?: boolean;
+}
+
+const StepComponent: React.FC<StepComponentProps> = ({
+  dataSource,
+  size,
+  stepStyle,
+  labelPlacement,
+  direction,
+  iconSetting,
+  template = 'default',
+  arrowStyle,
+  stepSpace,
+  backgroundStyle,
+  style,
+  className,
+  getCurrentColor,
+  alias,
+  getEngineApis,
+  $$componentItem,
+  onChange,
+  current,
+  isED = false,
+  getEdEngineApi,
+  ...restProps
+}) => {
+  const isCustomTemplate = (template || 'default') !== 'default';
+
+  const {
+    icon: iconAlias = 'icon', // 图标别名
+    description: descriptionAlias = 'description', // 描述别名
+    disabled: disabledAlias = 'disabled', // 禁用别名
+    status: statusAlias = 'status', // 状态别名
+    subTitle: subTitleAlias = 'subTitle', // 副标题别名
+    title: titleAlias = 'title', // 标题别名
+    id: idAlias = 'id', // 唯一ID别名
+  } = alias || {};
+
+  const renderFactoryIcon = (item: any) => {
+    if (isED) {
+      return <FactoryIconED
+        {...item}
+        getEdEngineApi={getEdEngineApi}
+        $$componentItem={$$componentItem}
+      />;
+    }
+    return <FactoryIcon
+      {...item}
+      getEngineApis={getEngineApis}
+      engineApis={{ service: getEngineApis?.() }}
+      $$componentItem={$$componentItem}
+    />;
+  };
+  const renderDefaultIcon = (item: any) => {
+    const iconItem = iconSetting.find((i: any) => i.value === item[statusAlias]);
+    let currentColor = iconItem?.isUsePrimary ? undefined : item.color;
+    if (!('color' in item)) {
+      currentColor = iconItem?.color;
+    }
+    const style = {
+      fontSize: size === 'default' ? '18px' : '16px',
+      color: currentColor,
+    };
+    if (stepStyle === 'icon' && ['square', 'square-vertical'].includes(template)) {
+      style.fontSize = size === 'default' ? '32px' : '24px';
+    }
+    if (iconItem?.icon) {
+      return renderFactoryIcon({
+        mode: 'custom',
+        style,
+        iconItems: [{ ...iconItem, color: currentColor }], // 图标优先展示iconItems的颜色，但是这里需要将用户设置的颜色优先级提高
+        className: '',
+      });
+    }
+    return <Icon style={style} component={item[statusAlias] === 'finish' ? CheckCircle : Vector} />;
+  };
+
+  /**
+   * 步骤条图标渲染
+   * @param item
+   * @param index
+   * @returns
+   */
+  const renderStepIcon = (item: any, index: number) => {
+    const iconValue = item[iconAlias];
+    const currentColor = getCurrentColor(item, statusAlias);
+    // 存量无状态的默认状态
+    const status = item[statusAlias] || (index === 0 ? 'process' : 'wait');
+
+    switch (stepStyle) {
+      case 'number':
+        return (
+          <div
+            className={classNames({
+              [`${prefixCls}-numberBox`]: true,
+              [`${prefixCls}-numberBox-${size}`]: true,
+              [`${prefixCls}-${status}`]: true,
+            })}
+            style={{
+              borderColor: currentColor,
+              color: status === 'process' ? '' : currentColor,
+              background: status === 'process' ? currentColor : '',
+            }}
+          >
+            {index + 1}
+          </div>);
+      case 'icon':
+      case 'arrow': {
+        const newItem = {
+          ...item,
+        };
+        const style = {
+          fontSize: size === 'default' ? '18px' : '16px',
+          color: stepStyle === 'arrow' ? undefined : item.color,
+        };
+        if (stepStyle === 'icon' && ['square', 'square-vertical'].includes(template)) {
+          style.fontSize = size === 'default' ? '32px' : '24px';
+        }
+        if ((stepStyle === 'icon' && isCustomTemplate)) {
+          style.color = undefined;
+          newItem.color = undefined;
+          newItem.isUsePrimary = undefined;
+        }
+        // 箭头样式步骤条图标颜色跟随字体
+        if (stepStyle === 'arrow') {
+          newItem.color = undefined;
+          newItem.isUsePrimary = undefined;
+        }
+        // 如果数据没有图标内容，返回默认的图标配置
+        if (!iconValue || iconValue.isIconFont === false || Object.keys(iconValue || {}).length === 0) {
+          if (stepStyle === 'arrow') {
+            return null;
+          }
+          return renderDefaultIcon(newItem);
+        }
+        // 字符串代表使用fileID或者url展示图标
+        if (typeof iconValue === 'string') {
+          // 判断数字字符串
+          newItem[iconAlias] = {
+            iconFile: iconValue.startsWith('http') ? {
+              fileHttp: iconValue,
+              fileSubType: 'ICON_IMAGE',
+            } : {
+              fileCode: iconValue,
+              fileSubType: 'ICON_IMAGE',
+            },
+          };
+        }
+        // 否则为自定义配置的
+        return renderFactoryIcon({
+          mode: 'custom',
+          style,
+          iconItems: [newItem],
+          className: '',
+        });
+      }
+      case 'dot':
+        return <div
+          className={classNames({
+            [`${prefixCls}-dot`]: true,
+            [`${prefixCls}-dot-${size}`]: true,
+            [`${prefixCls}-dot-${status}`]: true,
+          })}
+          style={{ background: currentColor }}
+        />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Steps
+      size={size}
+      {...restProps}
+      direction={direction}
+      style={{
+        ...backgroundStyle,
+        ...style,
+      }}
+      className={classNames({
+        [className || '']: true,
+        [`${prefixCls}-container-${stepStyle}`]: true,
+      })}
+      labelPlacement={stepStyle === 'dot' ? 'vertical' : labelPlacement}
+      current={current}
+      onChange={onChange}
+    >
+      {(dataSource || []).map((opt: any, i: number) => {
+        const icon = (
+          <div className={`${prefixCls}-iconItem-${size}`}>
+            {renderStepIcon(opt, i)}
+          </div>);
+
+        if (stepStyle === 'arrow') {
+          // 若步骤设置无颜色，则按步骤状态的颜色取
+          const currentColor = getCurrentColor(opt, statusAlias);
+          return (
+            <Step
+              status={opt[statusAlias]}
+              title={(
+                <ArrowStepItem
+                  title={opt[titleAlias]}
+                  color={currentColor}
+                  status={opt[statusAlias]}
+                  arrowStyle={arrowStyle}
+                  stepStyle={stepStyle}
+                >{icon}
+                </ArrowStepItem>)}
+              disabled={!!opt[disabledAlias]}
+              key={opt[idAlias]}
+              className={classNames(`ued-step-${stepStyle}`,
+                `ued-step-${stepStyle}-${arrowStyle}`,
+                `ued-step-${stepStyle}-${arrowStyle}-${size}`)}
+              style={{ ...(opt[disabledAlias] ? { cursor: 'not-allowed' } : {}),
+                marginLeft: i !== 0 ? stepSpace : undefined }}
+              icon={null}
+            />
+          );
+        }
+
+        const stepStyleProperties: CSSProperties = { ...(opt[disabledAlias] ? { cursor: 'not-allowed' } : {}) };
+        if (isCustomTemplate) {
+          stepStyleProperties.color = getCurrentColor(opt, statusAlias);
+        }
+
+        const stepItemProps = {
+          status: opt[statusAlias],
+          title: opt[titleAlias],
+          subTitle: opt[subTitleAlias],
+          description: opt[descriptionAlias],
+          disabled: !!opt[disabledAlias],
+        };
+
+        if (stepStyle === 'icon') {
+          stepItemProps.subTitle = isCustomTemplate ? '' : stepItemProps.subTitle;
+          stepItemProps.description = template === 'ellipse' ? '' : stepItemProps.description;
+        }
+
+        const innerClassName = classNames(`ued-step-${stepStyle}`, isCustomTemplate && stepStyle === 'icon' ? `ued-step-${stepStyle}-${template}` : undefined);
+
+        if (stepStyle === 'icon' && isCustomTemplate) {
+          return (
+            <Step
+              title={
+                <TemplateStepItem
+                  {...stepItemProps}
+                  icon={icon}
+                  type={template}
+                  color={stepStyleProperties.color}
+                />}
+              key={opt[idAlias]}
+              style={stepStyleProperties}
+              className={innerClassName}
+              icon={null}
+            />
+          );
+        }
+
+        return (
+          <Step
+            {...stepItemProps}
+            key={opt[idAlias]}
+            style={stepStyleProperties}
+            className={innerClassName}
+            icon={icon}
+          />
+        );
+      })}
+    </Steps>
+  );
+};
+
+export default StepComponent;

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

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import React from 'react';
+import { extractNumbersFromRgb } from './ArrowStepItem';
+
+export interface TemplateStepItemProps {
+  title?: string;
+  description?: string;
+  type: 'square' | 'square-vertical' | 'ellipse' | 'default';
+  icon?: React.ReactNode;
+  color?: string;
+  status?: 'wait' | 'process' | 'finish' | 'error';
+  [key: string]: any;
+}
+
+/**
+ * 将16进制颜色值转换为rgba格式
+ * @param hex 16进制颜色值，如 '#ff0000' 或 '#f00'
+ * @param alpha 透明度，范围0-1
+ * @returns rgba格式的颜色值
+ */
+export function hexToRgba(hex: string, alpha: number = 0.1) {
+  if (hex.indexOf('rgb') !== -1) {
+    return extractNumbersFromRgb(hex) || [];
+  }
+  // 移除可能存在的 # 前缀
+  let hexValue = hex.replace('#', '');
+
+  // 处理简写形式（如 #f00）
+  if (hexValue.length === 3) {
+    hexValue = hexValue.split('').map(char => char + char).join('');
+  }
+
+  // 将16进制转换为RGB
+  const r = parseInt(hexValue.substring(0, 2), 16);
+  const g = parseInt(hexValue.substring(2, 4), 16);
+  const b = parseInt(hexValue.substring(4, 6), 16);
+
+  // 返回rgba格式
+  return [r, g, b, alpha];
+}
+
+export const getProcessingColor = (color: string) => {
+  const [r, g, b] = hexToRgba(color);
+  return `rgba(${r}, ${g}, ${b}, .1)`;
+};
+
+const TemplateStepItem: React.FC<TemplateStepItemProps> = (props) => {
+  const { title, description, type, icon, color, status } = props;
+  return (
+    <div className={classNames('ued-tempalate-step-item', `ued-tempalate-step-item-${type}`)}>
+      <div
+        className="ued-tempalate-step-item-content"
+        style={{
+          backgroundColor: color && status === 'process' && type === 'ellipse' ? getProcessingColor(color) : undefined,
+        }}
+      >
+        {icon && <div className="ued-tempalate-step-item-icon">{icon}</div>}
+        <div className="ued-tempalate-step-item-content-inner">
+          <div className="ued-tempalate-step-item-title">{title}</div>
+          <div className="ued-tempalate-step-item-description">{description}</div>
+        </div>
+      </div>
+      {type !== 'ellipse' && <div className="ued-tempalate-step-item-tail" />}
+    </div>
+  );
+};
+
+export default TemplateStepItem;

package/lib/pcpublic/src/components/pcfactory/src/Steps/constant/checkcircle.tsx

@@ -14,6 +14,5 @@ export default (props: any) => {
           <rect width="20" height="20" fill="white" transform="translate(0.832031)" />
         </clipPath>
       </defs>
-    </svg>
-  );
+    </svg>);
 };

package/lib/pcpublic/src/components/pcfactory/src/Steps/constant/index.ts

@@ -1,2 +1,2 @@
-export { default as CheckCircle } from './checkcircle';
 export { default as Vector } from './vector';
+export { default as CheckCircle } from './checkcircle';

package/lib/pcpublic/src/components/pcfactory/src/Steps/constant/vector.tsx

@@ -4,6 +4,5 @@ export default (props: any) => {
   return (
     <svg height="20" viewBox="0 0 21 20" width="21" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path d="m10.5 0c-2.82737.074349-5.18227 1.05169-7.0647 2.93203-1.88244 1.88034-2.860868 4.24004-2.9353 7.07907.074432 2.8243 1.05286 5.1765 2.9353 7.0569 1.88243 1.8803 4.23733 2.8577 7.0647 2.932 2.8422-.0743 5.2046-1.0517 7.087-2.932 1.8824-1.8804 2.8534-4.2326 2.913-7.0569-.0596-2.83903-1.0306-5.19873-2.913-7.07907s-4.2448-2.857681-7.087-2.93203zm0 18.6846c-2.45534-.0744-4.5015-.9254-6.13847-2.5532-1.63698-1.6276-2.48519-3.6677-2.54463-6.1203.05957-2.46742.90778-4.51501 2.54463-6.14274 1.63684-1.6276 3.683-2.47865 6.13847-2.55313 2.4553.07435 4.5014.9254 6.1383 2.55313 1.637 1.6276 2.4852 3.67519 2.5448 6.14274-.0596 2.4526-.9078 4.4927-2.5448 6.1203-1.6369 1.6278-3.683 2.4788-6.1383 2.5532zm-7.67847-8.6735c0 1.3825.33853 2.6571 1.01558 3.8239.67706 1.1669 1.61828 2.0996 2.82365 2.7982 1.20538.6986 2.48513 1.0479 3.83924 1.0479 1.3541 0 2.6339-.3493 3.8392-1.0479 1.2054-.6986 2.1466-1.6313 2.8237-2.7982.677-1.167 1.0156-2.4454 1.0156-3.8352 0-1.38984-.3386-2.66822-1.0156-3.83515-.6771-1.1668-1.6183-2.09955-2.8237-2.79824-1.2053-.6987-2.4851-1.04805-3.8392-1.04805-1.35411 0-2.63386.34935-3.83924 1.04805-1.20537.69869-2.14659 1.63144-2.82365 2.79824-.67705 1.16693-1.01558 2.44902-1.01558 3.84625z" />
-    </svg>
-  );
+    </svg>);
 };