@mi-avalon/libs 0.0.7 → 0.0.8

package/package.json

@@ -2,14 +2,21 @@
   "name": "@mi-avalon/libs",
   "author": "顾冬杰",
   "module": "dist/lib.esm.js",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/libs.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./dist/*"
+  },
   "engines": {
     "node": ">=18"
   },
@@ -25,8 +32,8 @@
   "peerDependencies": {
     "antd": ">=5",
     "lodash": ">=4",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18.0.0 || ^19.0.0",
+    "react-dom": ">=18.0.0 || ^19.0.0"
   },
   "husky": {
     "hooks": {

package/src/components/ItemsRow/index.scss

@@ -1,18 +0,0 @@
-$comp-name: 'items-row';
-
-.#{$comp-name} {
-  display: flex;
-  height: 100%;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  white-space: nowrap;
-
-  &-item {
-    margin-left: 10px;
-    max-width: 300px;
-    vertical-align: middle;
-    display: inline-block;
-    line-height: 0;
-  }
-}

package/src/components/ItemsRow/index.tsx

@@ -1,85 +0,0 @@
-import { Button, ButtonProps } from 'antd';
-import * as React from 'react';
-import { getClassName } from '../../utils';
-import CompThemeProvider from '../ThemeContext/CompThemeProvider';
-
-/**
- * 默认配置按钮，也可以通过render() 渲染其他组件
- */
-export interface IRowItem {
-  /**
-   * 按钮名称
-   */
-  label?: string;
-  /**
-   * 按钮类型
-   */
-  type?: ButtonProps['type'];
-  /**
-   * 如果没有指定Render，则是按钮的onClick
-   */
-  onClick?: (e: any) => void;
-  /**
-   * 其他按钮属性
-   */
-  btnProps?: ButtonProps;
-  /**
-   * item 的className
-   */
-  className?: string;
-
-  /**
-   * 自定义渲染
-   */
-  render?: () => React.ReactNode;
-}
-export interface IItemRowProps {
-  route?: Array<{ name: string; url?: string }>;
-  items?: IRowItem[];
-  style?: React.CSSProperties;
-  className?: string;
-  offsetTop?: number;
-}
-
-const classname = (n: string = '') => {
-  const cn = 'items-row';
-  return getClassName(cn, n);
-};
-
-const ItemsRow = (props: IItemRowProps) => {
-  if (!props.items) {
-    return null;
-  }
-  return (
-    <CompThemeProvider>
-      <div
-        className={`${classname()} ${props.className || ''}`}
-        style={props.style}
-      >
-        {(props.items || []).map((item, index) => {
-          const className = `${classname('item')} ${item.className}`;
-          if (item.render) {
-            return (
-              <span key={index} className={className}>
-                {item.render()}
-              </span>
-            );
-          }
-          return (
-            <Button
-              key={item.label}
-              className={className}
-              {...item.btnProps}
-              type={item.type || 'primary'}
-              onClick={item.onClick}
-            >
-              {item.label}
-            </Button>
-          );
-        })}
-      </div>
-    </CompThemeProvider>
-  );
-};
-
-export default ItemsRow;

package/src/components/MBreadcrumb/index.scss

@@ -1,82 +0,0 @@
-$comp-name: 'm-breadcrumb';
-
-@keyframes #{$comp-name}_show_ani {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 100;
-	}
-}
-
-.#{$comp-name} {
-	position: relative;
-	height: 64px;
-	width: 100%;
-
-	&-container {
-		transition: padding 0.3s ease;
-	}
-
-	&-body {
-		border-radius: 8px;
-		height: 64px;
-		line-height: 64px;
-	}
-
-	.ant-card-body {
-		width: 100%;
-		padding: 0 12px;
-		align-items: center;
-		// background-color: var(--ant-color-bg-container); // 使用主题背景色
-	}
-
-	.ant-affix {
-		z-index: 999;
-	}
-
-	.ant-affix > &-container {
-		z-index: 100;
-		width: auto;
-		box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-			0 9px 28px 8px rgba(0, 0, 0, 0.05);
-		// box-shadow: var(--ant-box-shadow); // 使用主题阴影
-	}
-
-	&-inner-breadcrumb {
-		display: inline-block;
-		vertical-align: middle;
-		line-height: 64px;
-
-		.ant-breadcrumb {
-			&-separator {
-				margin: 0 8px;
-				// color: var(--ant-color-text-secondary); // 使用主题文本颜色
-			}
-
-			&-link {
-				// color: var(--ant-color-text); // 使用主题文本颜色
-				> a {
-					transition: all 0.3s;
-					padding: 4px 8px;
-					display: inline-block;
-					line-height: 1.5;
-
-					&:hover {
-						// background-color: var(--ant-color-primary-bg); // 使用主题主色背景
-						font-weight: bold;
-						text-decoration: none;
-						opacity: 0.8;
-					}
-				}
-			}
-		}
-	}
-
-	&-custom-item-wrapper {
-		float: right;
-		height: 100%;
-		display: flex;
-		align-items: center;
-	}
-}

package/src/components/MBreadcrumb/index.tsx

@@ -1,93 +0,0 @@
-import { Affix, AffixRef, Breadcrumb, Card } from 'antd';
-import * as React from 'react';
-import { getClassName } from '../../utils';
-import ItemRow, { IRowItem } from '../ItemsRow';
-import CompThemeProvider from '../ThemeContext/CompThemeProvider';
-import './index.scss';
-
-export interface RouteItem {
-  name: string;
-  url?: string;
-}
-
-export interface IMBreadcrumbProps {
-  routes?: RouteItem[];
-  customItems?: IRowItem[];
-  style?: React.CSSProperties;
-  className?: string;
-  offsetTop?: number;
-  mainAppBaseUrl?: string;
-  microAppName?: string;
-}
-
-const classname = (n: string = '') => {
-  const cn = 'm-breadcrumb';
-  return getClassName(cn, n);
-};
-
-const MBreadcrumb: React.FC<IMBreadcrumbProps> = props => {
-  const {
-    routes,
-    customItems,
-    style,
-    className,
-    offsetTop = 64,
-    mainAppBaseUrl,
-    microAppName,
-  } = props;
-
-  const affixRef = React.useRef<AffixRef>(null);
-
-  const onScroll = React.useCallback(() => {
-    affixRef.current?.updatePosition?.();
-  }, []);
-
-  React.useEffect(() => {
-    window.addEventListener('scroll', onScroll, true);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, [onScroll]);
-
-  const getUrl = React.useCallback(
-    (url: string) => {
-      if (!url) return '';
-      const cleanedUrl = url.replace(/^\/+/, '');
-      const parts = [
-        mainAppBaseUrl?.replace(/\/+$/, ''),
-        microAppName?.replace(/\/+$/, ''),
-        cleanedUrl,
-      ].filter(Boolean);
-      return `/${parts.join('/')}`;
-    },
-    [mainAppBaseUrl, microAppName]
-  );
-
-  return (
-    <CompThemeProvider>
-      <div className={`${classname()} ${className || ''}`} style={style}>
-        <Affix ref={affixRef} offsetTop={offsetTop}>
-          <Card
-            className={classname('container')}
-            rootClassName={classname('body')}
-            variant="borderless"
-          >
-            <Breadcrumb
-              className={classname('inner-breadcrumb')}
-              style={{ fontSize: '18px' }}
-            >
-              {routes?.map(v => (
-                <Breadcrumb.Item key={v.url || v.name}>
-                  {v.url ? <a href={`#${getUrl(v.url)}`}>{v.name}</a> : v.name}
-                </Breadcrumb.Item>
-              ))}
-            </Breadcrumb>
-            <div className={classname('custom-item-wrapper')}>
-              <ItemRow items={customItems} />
-            </div>
-          </Card>
-        </Affix>
-      </div>
-    </CompThemeProvider>
-  );
-};
-
-export default MBreadcrumb;

package/src/components/MDescriptions/index.tsx

@@ -1,131 +0,0 @@
-/**
- * 详情描述列表组件
- * 用于展示对象的详细信息，如用户信息、产品详情等
- */
-import { Descriptions } from 'antd';
-import React from 'react';
-import CompThemeProvider from '../ThemeContext/CompThemeProvider';
-
-export interface IMDescriptionItem {
-	label: React.ReactNode;
-	value: React.ReactNode;
-	span?: number; // 可选项，控制该项跨越的列数
-}
-
-export interface IMDescriptionProps {
-	/**
-	 * 描述列表的数据[{label: '', value: '',}, ...]
-	 */
-	data: IMDescriptionItem[];
-	/**
-	 * 标题
-	 */
-	title?: React.ReactNode;
-	/**
-	 * 需要显示的列数
-	 * @default 3
-	 */
-	column?: 1 | 2 | 3 | 4;
-	/**
-	 * 行高
-	 */
-	lineHeight?: number;
-	/**
-	 * 标签对齐方式
-	 * @default 'left'
-	 */
-	align?: 'left' | 'center' | 'right';
-	/**
-	 * 标签和值的布局配置
-	 */
-	itemLayout?: {
-		label?: number | undefined;
-		value?: number | undefined;
-	};
-	/**
-	 * 是否显示冒号
-	 * @default true
-	 */
-	colon?: boolean;
-	/**
-	 * 是否显示边框
-	 * @default false
-	 */
-	bordered?: boolean;
-	/**
-	 * 自定义样式
-	 */
-	style?: React.CSSProperties;
-	/**
-	 * 自定义类名
-	 */
-	className?: string;
-	/**
-	 * 标签样式
-	 */
-	labelStyle?: React.CSSProperties;
-	/**
-	 * 内容样式
-	 */
-	contentStyle?: React.CSSProperties;
-}
-
-const DetailDescriptions: React.FC<IMDescriptionProps> = props => {
-	const {
-		data,
-		title,
-		column = 3,
-		lineHeight,
-		align = 'left',
-		itemLayout,
-		colon = true,
-		bordered = false,
-		style,
-		className,
-		labelStyle,
-		contentStyle,
-	} = props;
-
-	// 合并样式
-	const mergedLabelStyle = {
-		...(lineHeight ? { lineHeight: `${lineHeight}px` } : {}),
-		textAlign: align,
-		...(itemLayout?.label ? { width: `${itemLayout.label}px` } : {}),
-		...labelStyle,
-	};
-
-	const mergedContentStyle = {
-		...(lineHeight ? { lineHeight: `${lineHeight}px` } : {}),
-		...(itemLayout?.value ? { width: `${itemLayout.value}px` } : {}),
-		...contentStyle,
-	};
-
-	return (
-		<CompThemeProvider>
-			<Descriptions
-				title={title}
-				column={column}
-				colon={colon}
-				bordered={bordered}
-				style={style}
-				className={className}
-				labelStyle={mergedLabelStyle}
-				contentStyle={mergedContentStyle}
-			>
-				{data.map((item, index) => (
-					<Descriptions.Item
-						label={item.label}
-						key={item.label?.toString() || index}
-						span={item.span}
-					>
-						{item.value || '-'}
-					</Descriptions.Item>
-				))}
-			</Descriptions>
-		</CompThemeProvider>
-	);
-};
-
-DetailDescriptions.displayName = 'DetailDescriptions';
-
-export default DetailDescriptions;

package/src/components/MForm/MFormItemConst.tsx

@@ -1,206 +0,0 @@
-import { UploadOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Cascader,
-  Checkbox,
-  DatePicker,
-  Input,
-  InputNumber,
-  Mentions,
-  Radio,
-  Select,
-  Slider,
-  TreeSelect,
-  Upload,
-} from 'antd';
-import React from 'react';
-import {
-  IMFormCascaderItem,
-  IMFormChkBoxGroupItem,
-  IMFormDatePickerItem,
-  IMFormInputItem,
-  IMFormInputNumItem,
-  IMFormItem,
-  IMFormMentionsItem,
-  IMFormRadioGroupItem,
-  IMFormRangePickerItem,
-  IMFormSelectItem,
-  IMFormSliderItem,
-  IMFormTextItem,
-  IMFormTreeSelectItem,
-  IMFormUploadItem,
-  MFormItemTypeEnum,
-} from './type';
-
-const { RangePicker } = DatePicker;
-
-export class MFormItemConst {
-  static readonly labelCol = { span: 7 };
-  static readonly wrapperCol = { span: 17 };
-  static readonly defaultRowGutter = 24;
-
-  static getDefaultArrayPlaceholder(item: IMFormItem) {
-    let placeholder;
-    switch (item.type) {
-      case 'rangePicker':
-        placeholder = ['开始时间', '结束时间'];
-        break;
-    }
-    return placeholder as [string, string];
-  }
-
-  static getDefaultPlaceholder(item: IMFormItem) {
-    let placeholder;
-    switch (item.type) {
-      case MFormItemTypeEnum.Input:
-      case MFormItemTypeEnum.Password:
-      case MFormItemTypeEnum.InputNumber:
-      case MFormItemTypeEnum.Text:
-      case MFormItemTypeEnum.Mentions:
-        placeholder = `请输入${item.label}`;
-        break;
-      case MFormItemTypeEnum.Select:
-      case MFormItemTypeEnum.Checkbox:
-      case MFormItemTypeEnum.Radio:
-      case MFormItemTypeEnum.DatePicker:
-      case MFormItemTypeEnum.RangePicker:
-      case MFormItemTypeEnum.Cascader:
-      case MFormItemTypeEnum.Upload:
-      case MFormItemTypeEnum.TreeSelect:
-        placeholder = `请选择${item.label}`;
-        break;
-    }
-    return placeholder;
-  }
-
-  static input = (item: IMFormInputItem) => (
-    <Input
-      disabled={item.disabled}
-      maxLength={item.maxLength}
-      {...item.props}
-      placeholder={
-        item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-      }
-    />
-  );
-
-  static password = (item: IMFormInputItem) => (
-    <Input.Password
-      disabled={item.disabled}
-      {...item.props}
-      placeholder={
-        item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-      }
-    />
-  );
-
-  static text = (item: IMFormTextItem) => (
-    <Input.TextArea
-      disabled={item.disabled}
-      maxLength={item.maxLength}
-      {...item.props}
-      placeholder={
-        item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-      }
-    />
-  );
-
-  static inputNumber = (item: IMFormInputNumItem) => (
-    <InputNumber
-      disabled={item.disabled}
-      maxLength={item.maxLength}
-      {...item.props}
-      placeholder={
-        item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-      }
-    />
-  );
-
-  static datePicker = (item: IMFormDatePickerItem) => (
-    <DatePicker
-      disabled={item.disabled}
-      {...item.props}
-      placeholder={
-        item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-      }
-    />
-  );
-
-  static rangePicker = (item: IMFormRangePickerItem) => (
-    <RangePicker
-      disabled={item.disabled}
-      {...item.props}
-      placeholder={
-        item.placeholder || MFormItemConst.getDefaultArrayPlaceholder(item)
-      }
-    />
-  );
-
-  static select = (item: IMFormSelectItem) => {
-    return (
-      <Select
-        {...item.props}
-        disabled={item.disabled}
-        placeholder={
-          item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-        }
-      ></Select>
-    );
-  };
-
-  static radio = (item: IMFormRadioGroupItem) => {
-    return <Radio.Group disabled={item.disabled} {...item.props} />;
-  };
-  static checkbox = (item: IMFormChkBoxGroupItem) => {
-    return <Checkbox.Group disabled={item.disabled} {...item.props} />;
-  };
-
-  static upload = (item: IMFormUploadItem) => {
-    return (
-      <Upload defaultFileList={item.initialValue} {...item.props}>
-        {item.children || (
-          <Button>
-            <UploadOutlined /> 点击上传
-          </Button>
-        )}
-      </Upload>
-    );
-  };
-
-  static mentions = (item: IMFormMentionsItem) => {
-    return (
-      <Mentions
-        {...item.props}
-        placeholder={
-          item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-        }
-      />
-    );
-  };
-
-  static cascader = (item: IMFormCascaderItem) => {
-    return (
-      <Cascader
-        {...item.props}
-        placeholder={
-          item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-        }
-      />
-    );
-  };
-
-  static treeSelect = (item: IMFormTreeSelectItem) => {
-    return (
-      <TreeSelect
-        {...item.props}
-        placeholder={
-          item.placeholder || MFormItemConst.getDefaultPlaceholder(item)
-        }
-      />
-    );
-  };
-
-  static slider = (item: IMFormSliderItem) => {
-    return <Slider {...item.props} />;
-  };
-}

package/src/components/MForm/index.scss

@@ -1,13 +0,0 @@
-$comp-name: 'm-form';
-
-.#{$comp-name} {
-	&-item-wrapper {
-		max-width: 480px;
-	}
-
-	.error-message {
-		color: red;
-		font-size: 12px;
-		margin-top: 4px;
-	}
-}