@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/cjs/components/DndTabs.tpl

@@ -0,0 +1,159 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import {
+  closestCenter,
+  defaultDropAnimationSideEffects,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+} from '@dnd-kit/core';
+import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Tabs } from 'antd';
+import React, { useCallback, useMemo, useState } from 'react';
+import { DndTabsProps } from "../types";
+
+interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+  'data-node-key': string;
+  'data-disabled'?: boolean;
+}
+
+const DraggableTabNode: React.FC<Readonly<DraggableTabPaneProps>> = (props) => {
+  const isDisabled = props['data-disabled'];
+  
+  // 如果禁用拖动，直接返回原始节点
+  if (isDisabled) {
+    return React.cloneElement(props.children as React.ReactElement, {
+      style: {
+        ...props.style,
+        cursor: 'default',
+      },
+    });
+  }
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: props['data-node-key'],
+    animateLayoutChanges: () => false, // 禁用布局动画可提高流畅度
+    disabled: isDisabled,
+  });
+
+  const style: React.CSSProperties = {
+    ...props.style,
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: 'pointer', // 改为指针样式
+    opacity: isDragging ? 0.4 : 1, // 拖动时降低透明度
+    zIndex: isDragging ? 1 : 0,
+    position: 'relative',
+  };
+
+  return React.cloneElement(props.children as React.ReactElement, {
+    ref: setNodeRef,
+    style,
+    ...attributes,
+    ...listeners,
+  });
+};
+
+/**
+ * 拖动排序的Tabs组件
+ * @param param onDragSorted 拖拽排序后的回调, 修改items回显
+ */
+const DndTabs: React.FC<DndTabsProps> = (props) => {
+  const { items = [], onDragSorted, disabledKeys = [], ...restProps } = props;
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  // 创建传感器，优化拖拽体验
+  const pointerSensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 8,
+    },
+  });
+
+  const sensors = useMemo(() => [pointerSensor], [pointerSensor]);
+
+  // 拖拽开始时的处理
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    if (event.active?.id) {
+      setActiveId(String(event.active.id));
+    }
+  }, []);
+
+  // 拖拽结束时的处理
+  const onDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      setActiveId(null);
+
+      const { active, over } = event;
+      if (active?.id !== over?.id && items?.length && over?.id) {
+        const activeIndex = items.findIndex((i) => i.key === active.id);
+        const overIndex = items.findIndex((i) => i.key === over.id);
+
+        if (activeIndex !== -1 && overIndex !== -1) {
+          const newItems = arrayMove([...items], activeIndex, overIndex);
+          onDragSorted?.(newItems);
+        }
+      }
+    },
+    [items, onDragSorted],
+  );
+
+  // 优化的drop动画配置
+  const dropAnimation = useMemo(
+    () => ({
+      sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+          active: {
+            opacity: '0.4',
+          },
+        },
+      }),
+    }),
+    [],
+  );
+
+  // 预先计算sortable项目的ID列表，排除禁用拖动的项
+  const sortableItems = useMemo(
+    () => items.filter(item => !disabledKeys.includes(item.key!)).map(i => i.key!),
+    [items, disabledKeys]
+  );
+
+  const renderTabBar = useCallback(
+    (tabBarProps: any, DefaultTabBar: any) => (
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragEnd={onDragEnd}
+        collisionDetection={closestCenter}
+      >
+        <SortableContext items={sortableItems} strategy={horizontalListSortingStrategy}>
+          <DefaultTabBar {...tabBarProps}>
+            {(node: any) => (
+              <DraggableTabNode 
+                {...(node as React.ReactElement<DraggableTabPaneProps>).props} 
+                key={node.key}
+                data-disabled={disabledKeys.includes(node.key)}
+              >
+                {node}
+              </DraggableTabNode>
+            )}
+          </DefaultTabBar>
+        </SortableContext>
+        <DragOverlay>
+          {activeId && !disabledKeys.includes(activeId) ? (
+            <div style={{ opacity: 0.8 }}>{items.find((item) => item.key === activeId)?.label}</div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    ),
+    [sensors, handleDragStart, onDragEnd, sortableItems, activeId, items, disabledKeys],
+  );
+
+  return <Tabs {...restProps} items={items} renderTabBar={renderTabBar} />;
+};
+
+// 使用React.memo优化渲染性能
+export default React.memo(DndTabs);

package/dist/cjs/components/DndTag.tpl

@@ -0,0 +1,89 @@
+import type { DragEndEvent } from '@dnd-kit/core';
+import { closestCenter, DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { Flex, Tag } from 'antd';
+import React from 'react';
+import { DndTagProps, DraggableTagProps } from '../types';
+
+const commonStyle: React.CSSProperties = {
+  cursor: 'move',
+  transition: 'unset', // Prevent element from shaking after drag
+};
+
+const DraggableTag = <T extends Array<any>>(props: DraggableTagProps<T>) => {
+  const { keyNames, tag, tagProps = {}, itemRender } = props;
+  const { id, label } = keyNames;
+  const { listeners, transform, transition, isDragging, setNodeRef } = useSortable({ id: String(tag[id]) });
+
+  const style = transform
+    ? {
+        ...commonStyle,
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        transition: isDragging ? 'unset' : transition, // Improve performance/visual effect when dragging
+      }
+    : commonStyle;
+
+  const handleClose = (e: React.MouseEvent<HTMLSpanElement>) => {
+    tagProps.onClose?.(e, tag);
+  };
+
+  return itemRender ? (
+    <div style={style} ref={setNodeRef} {...listeners}>
+      {React.cloneElement(itemRender(tag))}
+    </div>
+  ) : (
+    <Tag {...tagProps} style={style} ref={setNodeRef} {...listeners} onClose={handleClose}>
+      {tag[label] as React.ReactNode}
+    </Tag>
+  );
+};
+
+const DndTag = <T extends Array<any>>(props: DndTagProps<T>) => {
+  const { keyNames, items, flexProps, tagProps, itemRender, onDragEnd, onBeforeDragEnd } = props;
+  const { id } = keyNames;
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      // 鼠标激活距离，拖动超过5px才激活，避免覆盖Tag组件的点击（关闭）事件
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    // 自定义拖动逻辑
+    if (onBeforeDragEnd) {
+      onBeforeDragEnd(event);
+      return;
+    }
+
+    const { active, over } = event;
+    if (!over) {
+      return;
+    }
+
+    if (active.id !== over.id) {
+      // 处理好拖动顺序，返回外部更新items实现排序
+      const data = [...items];
+      const oldIndex = data.findIndex((item) => String(item[id]) === active.id);
+      const newIndex = data.findIndex((item) => String(item[id]) === over.id);
+      const newItems = arrayMove(items, oldIndex, newIndex);
+
+      onDragEnd?.(newItems as T);
+    }
+  };
+
+  return (
+    <DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
+      <SortableContext items={items.map((item) => String(item[id]))} strategy={horizontalListSortingStrategy}>
+        <Flex gap="4px 0" wrap {...flexProps}>
+          {items.map<React.ReactNode>((item) => (
+            <DraggableTag keyNames={keyNames} tag={item} key={String(item[id])} tagProps={tagProps} itemRender={itemRender}/>
+          ))}
+        </Flex>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default React.memo(DndTag) as <T extends Array<any>>(props: DndTagProps<T>) => JSX.Element;

package/dist/cjs/components/DropdownButton.tpl

@@ -0,0 +1,123 @@
+import { DeleteOutlined, EditOutlined, EyeOutlined, AlignLeftOutlined } from '@ant-design/icons';
+import { useIntl, useModel } from '@umijs/max';
+import { Dropdown, MenuProps } from 'antd';
+import React from 'react';
+import { getAuthorityFunction } from '../index';
+import { DropdownButtonProps } from '../types';
+
+/**
+ * 下拉按钮组
+ * @param {DropdownButtonProps} props 
+ */
+const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
+  const {
+    viewButtonIcon,
+    viewButtonTitle,
+    editButtonTitle,
+    actionLogTitle,
+    removeButtonTitle,
+    viewAuth,
+    editAuth,
+    actionLogAuth,
+    removeAuth,
+    extraButtonList,
+    onView,
+    onEdit,
+    onRemove,
+    onActionLog,
+  } = props;
+
+  const { formatMessage } = useIntl();
+  let { currentUser = {} } = window.__POWERED_BY_QIANKUN__
+    ? useModel('@@qiankunStateFromMaster')
+    : useModel('@@initialState')?.initialState;
+
+  // 判断是布尔值还是其他值，返回布尔值判断是否显示按钮
+  const isShowButton = (buttonAuth: string | boolean | undefined): boolean => {
+    return typeof buttonAuth === 'boolean' ? buttonAuth : getAuthorityFunction(buttonAuth, currentUser);
+  };
+
+  const defautlTtems: MenuProps['items'] | any = [
+    {
+      auth: isShowButton(viewAuth),
+      key: 'view',
+      label: (
+        <a onClick={onView}>
+          <span style={{ marginRight: 6 }}>{viewButtonIcon ? viewButtonIcon : <EyeOutlined />}</span>
+          {viewButtonTitle ? viewButtonTitle : formatMessage({ id: 'cfmmUI.common.button.view', defaultMessage: '查看' })}
+        </a>
+      ),
+    },
+    {
+      auth: isShowButton(editAuth),
+      key: 'edit',
+      label: (
+        <a onClick={onEdit} key="edit">
+          <EditOutlined style={{ marginRight: 6 }} />
+          {editButtonTitle ? editButtonTitle : formatMessage({ id: 'cfmmUI.common.button.edit', defaultMessage: '修改' })}
+        </a>
+      ),
+    },
+    {
+      auth: isShowButton(actionLogAuth),
+      key: 'actionLog',
+      label: (
+        <a onClick={onActionLog} key="actionLog">
+          <AlignLeftOutlined style={{ marginRight: 6 }} />
+          {actionLogTitle ? actionLogTitle : formatMessage({ id: 'cfmmUI.common.button.actionLog', defaultMessage: '操作记录' })}
+        </a>
+      ),
+    },
+    {
+      auth: isShowButton(removeAuth),
+      key: 'remove',
+      danger: true,
+      label: (
+        <a onClick={onRemove} key="remove">
+          <DeleteOutlined style={{ marginRight: 6 }} />
+          {removeButtonTitle ? removeButtonTitle : formatMessage({ id: 'cfmmUI.common.button.delete', defaultMessage: '删除' })}
+        </a>
+      ),
+    },
+  ];
+
+  const handleButtonList = () => {
+    let renderList = [...defautlTtems];
+
+    // 将额外的按钮按指定位置放入渲染列表
+    if (extraButtonList?.length) {
+      extraButtonList.forEach((v, idx) => {
+        const item = {
+          key: typeof v.auth === 'string' ? v.auth : 'extra-' + idx,
+          label: v.label,
+          icon: v.icon,
+          auth: isShowButton(v.auth),
+        };
+        if (v.position === 'start') {
+          renderList.unshift(item);
+        }
+        if (v.position === 'end') {
+          renderList.push(item);
+        }
+        if (typeof v.position === 'number') {
+          renderList.splice(v.position, 0, item);
+        }
+      });
+    }
+
+    return renderList.filter((item) => item.auth).map((item) => ({ ...item, auth: undefined }));
+  };
+
+  const items = handleButtonList();
+
+  if (!items.length) return;
+
+  return (
+    <Dropdown.Button menu={{ items: items.slice(1) }}>
+      {items[0].icon}
+      {items[0].label}
+    </Dropdown.Button>
+  );
+};
+
+export default React.memo(DropdownButton);

package/dist/cjs/components/DynamicIcon.tpl

@@ -0,0 +1,73 @@
+import { FrownOutlined, ReloadOutlined } from '@ant-design/icons';
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import React, { Suspense, lazy } from 'react';
+import { DynamicIconItemType, DynamicIconNameType, DynamicIconProps } from '../types';
+
+const isIcon = (module: Record<DynamicIconNameType, any>, key: DynamicIconNameType) => {
+  return (
+    typeof module[key] === 'object' &&
+    module[key].render &&
+    !['default', 'create', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'].includes(key)
+  );
+};
+
+/**
+ * 获取antd图标列表
+ * @param props IconComponentProps
+ */
+export const getAntdIconList = async (props?: IconComponentProps): Promise<DynamicIconItemType[]> => {
+  return await import(`@ant-design/icons`)
+    .then((module: any) => {
+      if (module) {
+        return Object.keys(module)
+          .filter((key) => isIcon(module, key as DynamicIconNameType))
+          .map((iconName) => {
+            return {
+              value: iconName as DynamicIconNameType,
+              label: iconName as DynamicIconNameType,
+              icon: React.createElement(module[iconName], { props }),
+            };
+          });
+      }
+      return [];
+    })
+    .catch(() => {
+      return [];
+    });
+};
+
+// 动态引入图标的函数
+const loadIcon = (iconName: DynamicIconNameType) => {
+  return lazy(() =>
+    import(`@ant-design/icons`).then((module) => {
+      if (isIcon(module, iconName)) {
+        const IconComponent = (module as Record<DynamicIconNameType, any>)[iconName];
+        if (IconComponent) {
+          return { default: IconComponent };
+        }
+      }
+
+      return {
+        default: (props: IconComponentProps) => <FrownOutlined {...props} style={{ color: 'red', ...props.style }} />,
+      };
+    }),
+  );
+};
+
+/**
+ * 传入antd icon组件的名称，即可动态导入图标
+ * @param {DynamicIconNameType} iconName antd icon name
+ * @param {IconComponentProps} props antd icon props
+ * @returns
+ */
+const DynamicIcon: React.FC<DynamicIconProps> = ({ iconName, ...props }) => {
+  const IconComponent = loadIcon(iconName);
+
+  return (
+    <Suspense fallback={<ReloadOutlined />}>
+      <IconComponent {...props} />
+    </Suspense>
+  );
+};
+
+export default React.memo(DynamicIcon);

package/dist/cjs/components/DynamicIconModal.tpl

@@ -0,0 +1,196 @@
+import { useIntl } from '@umijs/max';
+import { Card, Input, message, Modal, Radio, Tag } from 'antd';
+import { CheckboxOptionType } from 'antd/es/checkbox';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import HighlightStr from './HighlightStr';
+import { getAntdIconList } from './DynamicIcon';
+import { DynamicIconModalProps, DynamicIconItemType } from '../types';
+
+const options: CheckboxOptionType[] = [
+  { label: 'Outlined', value: 'Outlined' },
+  { label: 'Filled', value: 'Filled' },
+  { label: 'TwoTone', value: 'TwoTone' },
+];
+
+/**
+ * 选择antd图标的弹窗组件
+ * @param type 单选/多选
+ * @param initValue 初始值[数组]
+ * @param localIconList 本地列表
+ * @param onOk 点击确认回调
+ * @param onDataLoad 获取列表完成，可以拿到列表
+ * @param {ModalProps} modalReset modal配置
+ */
+const DynamicIconModal: React.FC<DynamicIconModalProps> = (props) => {
+  const { type = 'single', localIconList, onOk, onDataLoad, initValue, highlightStrProps, ...reset } = props;
+
+  const { formatMessage } = useIntl();
+  const [allIconList, setAllIconList] = useState<DynamicIconItemType[]>([]);
+  const [selectItemList, setSelectItemList] = useState<DynamicIconItemType[]>([]);
+  const [searchValue, setSearchValue] = useState<string | null>();
+  const [iconType, setIconType] = useState<CheckboxOptionType['value']>('Outlined');
+
+  // 过滤后的列表
+  const iconList = useMemo(() => {
+    return allIconList
+      .filter((item) => {
+        const { value } = item;
+        return value.endsWith(iconType) && value?.toLocaleLowerCase().includes(searchValue?.toLocaleLowerCase() || '');
+      })
+      .map((item) => {
+        if (!searchValue) return item;
+
+        return {
+          ...item,
+          label: <HighlightStr value={item.value} highlightValue={searchValue} {...highlightStrProps}/>,
+        };
+      });
+  }, [allIconList, searchValue, iconType]);
+
+  // 初始选中
+  const handleSetInitSelect = useCallback((list: DynamicIconItemType[], values?: DynamicIconModalProps['initValue']) => {
+    if (!values) return;
+    const v = Array.isArray(values) ? values : [values];
+    setSelectItemList(() => list.filter((item) => v.some((vv) => vv === item.value)));
+  }, []);
+
+  // 获取icon列表
+  const loadAntdIconList = useCallback(async () => {
+    const list = await getAntdIconList();
+    setAllIconList(list);
+    onDataLoad?.(list);
+    return list;
+  }, []);
+
+  // 点击选中卡片或者取消选中
+  const handleCardClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      const card = (event.target as HTMLElement).closest('[data-icon-value]');
+      if (!card) return;
+      const value = card.getAttribute('data-icon-value');
+
+      // 如果已经选中，则取消选中
+      const selected = selectItemList.find((item) => item.value === value);
+      if (selected) {
+        setSelectItemList((selectItemList) => selectItemList.filter((item) => item.value !== selected.value));
+        return;
+      }
+
+      const selectedIcon = iconList.find((item) => item.value === value);
+      if (!selectedIcon) return;
+
+      // 处理单选多选逻辑
+      if (type === 'single') {
+        setSelectItemList([selectedIcon]);
+      } else {
+        setSelectItemList((selectItemList) => [...selectItemList, selectedIcon]);
+      }
+    },
+    [iconList, selectItemList],
+  );
+
+  // 点击标签关闭按钮取消选中
+  const handleRemoveSelectedItem = (value: React.Key) => {
+    const list = selectItemList.filter((item) => item.value !== value);
+    setSelectItemList(list);
+  };
+
+  // 点击确认
+  const handleOk = useCallback(() => {
+    if (!selectItemList) {
+      message.error(formatMessage({ id: 'cfmmUI.DynamicIconModal.title', defaultMessage: '请选择图标' }));
+      return;
+    }
+    onOk?.(selectItemList, iconList);
+  }, [selectItemList, onOk]);
+
+  // 初始化列表
+  useEffect(() => {
+    if (localIconList) {
+      setAllIconList(localIconList);
+    } else {
+      loadAntdIconList();
+    }
+  }, [localIconList]);
+
+  // 初始化选中
+  useEffect(() => {
+    if (props.open) {
+      handleSetInitSelect(allIconList, initValue);
+    } else {
+      setSearchValue(null);
+      setSelectItemList([]);
+    }
+  }, [props.open, allIconList]);
+
+  return (
+    <Modal
+      width={800}
+      zIndex={1001}
+      maskClosable={false}
+      onOk={handleOk}
+      title={formatMessage({ id: 'cfmmUI.DynamicIconModal.title', defaultMessage: '请选择图标' })}
+      {...reset}
+    >
+      <div style={{ display: 'flex' }}>
+        <Radio.Group
+          style={{ width: 400 }}
+          options={options}
+          defaultValue={iconType}
+          optionType="button"
+          buttonStyle="solid"
+          onChange={(e) => {
+            setIconType(e.target?.value);
+          }}
+        />
+        <Input.Search
+          onInput={(e: any) => {
+            setSearchValue(e.target?.value);
+          }}
+        />
+      </div>
+      <div style={{ marginTop: 10 }}>
+        {selectItemList.map((item) => (
+          <Tag key={item.value} color="processing" closeIcon onClose={() => handleRemoveSelectedItem(item.value)}>
+            {item.label}
+          </Tag>
+        ))}
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          direction: 'ltr',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+          maxHeight: 500,
+          gap: 10,
+          marginTop: 20,
+          overflowY: 'auto',
+        }}
+        onClick={handleCardClick}
+      >
+        {iconList.map((item) => {
+          const isSelect = selectItemList.find((selectItem) => selectItem.value === item.value);
+          return (
+            <Card
+              key={item.value}
+              data-icon-value={item.value} // 添加数据属性用于标识
+              style={{
+                textAlign: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.3s',
+                backgroundColor: isSelect ? '#1677ff' : '',
+                color: isSelect ? '#fff' : '',
+              }}
+            >
+              <div style={{ fontSize: 30 }}>{item.icon}</div>
+              <div style={{ fontSize: 12 }}>{item.label}</div>
+            </Card>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+};
+
+export default React.memo(DynamicIconModal);