@teamias/rex-design 0.0.1

package/dist/components/data-cell/modules/cellItemMap.js

@@ -0,0 +1,374 @@
+var _excluded = ["ellipsis", "tooltip", "copyable", "action", "urlTarget", "url", "style", "type"],
+  _excluded2 = ["mediaViewerType"],
+  _excluded3 = ["value"],
+  _excluded4 = ["iconsType"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import { Tag, Tooltip, Typography } from "antd";
+import React from "react";
+import { Icons, MediaViewer } from "../../..";
+import { DataCell } from "../data-cell";
+import { DataCellRowText, DataCellRowTextLabel, DataCellRowTextValue } from "../style";
+var isEmpty = function isEmpty(val) {
+  if (val === '' || val === null || val === undefined) return true;
+  if (typeof val === 'undefined') return true;
+  return false;
+};
+
+/** 动作块渲染 */
+var actionRender = function actionRender(item, action, node, click) {
+  var _item$urlTarget;
+  var tooltipBox = function tooltipBox(content) {
+    if (item.tooltip) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        styles: {
+          body: {
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word'
+          }
+        },
+        title: item.tooltip,
+        arrow: false
+      }, content);
+    }
+    return content;
+  };
+  if (action === 'default') {
+    return tooltipBox( /*#__PURE__*/React.createElement("span", {
+      style: item.style
+    }, node));
+  }
+
+  // 自定义
+  if (action === 'custom') {
+    return tooltipBox( /*#__PURE__*/React.createElement("a", {
+      href: "void",
+      style: item.style,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        click === null || click === void 0 || click();
+      }
+    }, node));
+  }
+
+  // TODO: 窗口-未实现
+  // if (action === 'modal') {
+  //   return <a href="javascript:void;" onClick={() => click?.()}>{node}</a>
+  // }
+
+  // 默认url
+  return tooltipBox( /*#__PURE__*/React.createElement("a", {
+    style: item.style,
+    href: item.value,
+    target: (_item$urlTarget = item.urlTarget) !== null && _item$urlTarget !== void 0 ? _item$urlTarget : '_blank',
+    rel: "noreferrer"
+  }, node));
+};
+export var cellItemMap = {
+  /** 文本块 */
+  text: function text(item, click) {
+    var props = item.props;
+    if (!props) return undefined;
+    return !isEmpty(props.label) || !isEmpty(props.value) ? /*#__PURE__*/React.createElement(DataCellRowText, {
+      className: "data-cell-row-text",
+      style: props === null || props === void 0 ? void 0 : props.style
+    }, !isEmpty(props.label) ? /*#__PURE__*/React.createElement(DataCellRowTextLabel, {
+      className: "data-cell-row-text-label",
+      title: "".concat(props.label),
+      style: props === null || props === void 0 ? void 0 : props.labelStyle
+    }, "".concat(props.label)) : '', !isEmpty(props.label) && !isEmpty(props.value) ? /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingRight: 3
+      }
+    }, ":") : '', function () {
+      if (isEmpty(props.value)) return '';
+      if (_typeof(props.value) === 'object') {
+        return /*#__PURE__*/React.createElement(DataCellRowTextValue, {
+          className: "data-cell-row-text-value",
+          style: props === null || props === void 0 ? void 0 : props.valueStyle
+        }, cellItemMap[props.value.type](props.value, click));
+      }
+      return /*#__PURE__*/React.createElement(DataCellRowTextValue, {
+        ellipsis: props === null || props === void 0 ? void 0 : props.ellipsis,
+        className: "data-cell-row-text-value",
+        title: "".concat(props.tooltip || props.value),
+        style: props === null || props === void 0 ? void 0 : props.valueStyle
+      }, "".concat(props.value));
+    }(), _typeof(props.value) !== 'object' && props.copyable ? /*#__PURE__*/React.createElement(Typography.Paragraph, {
+      copyable: {
+        text: typeof props.copyable === 'string' ? props.copyable : "".concat(props.value)
+      }
+    }) : '') : undefined;
+  },
+  /** 图片块 */
+  img: function img(item) {
+    var props = item.props;
+    return /*#__PURE__*/React.createElement(MediaViewer, _extends({
+      src: props === null || props === void 0 ? void 0 : props.value,
+      alt: props === null || props === void 0 ? void 0 : props.label
+    }, props));
+  },
+  /** 链接块 */
+  link: function link(item, click) {
+    var props = item.props;
+    if (!props) return undefined;
+
+    // return actionRender(props, props.action, props.label, () => click?.(item));
+    return /*#__PURE__*/React.createElement(DataCellRowText, {
+      className: "data-cell-row-text link"
+    }, /*#__PURE__*/React.createElement(DataCellRowTextValue, {
+      ellipsis: props === null || props === void 0 ? void 0 : props.ellipsis,
+      className: "data-cell-row-text-value link",
+      style: {
+        flex: 'initial',
+        width: 'auto'
+      }
+    }, actionRender(props, props.action, props.label, function () {
+      return click === null || click === void 0 ? void 0 : click(item);
+    })), props.copyable ? /*#__PURE__*/React.createElement(Typography.Paragraph, {
+      copyable: {
+        text: typeof props.copyable === 'string' ? props.copyable : "".concat(props.label)
+      }
+    }) : '');
+  },
+  /** 链接组 */
+  'link-group': function linkGroup(item, click) {
+    var props = item.props;
+    if (!props) return undefined;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'inline-flex'
+      }
+    }, props === null || props === void 0 ? void 0 : props.items.map(function (child, index) {
+      var _props$separator;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'inline-flex'
+        },
+        key: index
+      }, cellItemMap.link({
+        props: child,
+        type: 'link'
+      }, click), (props === null || props === void 0 ? void 0 : props.items.length) - 1 === index ? '' : /*#__PURE__*/React.createElement("span", {
+        style: {
+          paddingInline: 2
+        }
+      }, (_props$separator = props.separator) !== null && _props$separator !== void 0 ? _props$separator : '/'));
+    }));
+  },
+  /** tag块 */
+  tag: function tag(item, click) {
+    var props = item.props;
+    if (!props) return undefined;
+    var color = function () {
+      if (props.color !== null && _typeof(props.color) === 'object') {
+        var _props$color, _props$color$toHexStr;
+        return (_props$color = props.color) === null || _props$color === void 0 || (_props$color$toHexStr = _props$color.toHexString) === null || _props$color$toHexStr === void 0 ? void 0 : _props$color$toHexStr.call(_props$color);
+      }
+      if (typeof props.color === 'string') {
+        return props.color;
+      }
+      return "#2db7f5";
+    }();
+    return !isEmpty(props.label) || !isEmpty(props.value) ? /*#__PURE__*/React.createElement(Tag, _extends({}, props, {
+      color: color,
+      onClick: function onClick() {
+        return click === null || click === void 0 ? void 0 : click(item);
+      }
+    }), !isEmpty(props.label) ? /*#__PURE__*/React.createElement("span", {
+      title: "".concat(props.label)
+    }, "".concat(props.label)) : '', !isEmpty(props.label) && !isEmpty(props.value) ? /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingRight: 3
+      }
+    }, ":") : '', !isEmpty(props.value) ? /*#__PURE__*/React.createElement("span", {
+      title: "".concat(props.value)
+    }, "".concat(props.value)) : '') : undefined;
+  },
+  icon: function icon(item, click) {
+    var _props$action;
+    var props = item.props;
+    if (!props) return undefined;
+    return actionRender(props, (_props$action = props.action) !== null && _props$action !== void 0 ? _props$action : 'default', /*#__PURE__*/React.createElement(Icons, {
+      type: props.label,
+      name: props.value
+    }), function () {
+      return click === null || click === void 0 ? void 0 : click(item);
+    });
+  },
+  /** 块组 */
+  group: function group(item, click) {
+    var props = item.props;
+    if (!props) return undefined;
+    return /*#__PURE__*/React.createElement("div", {
+      style: props.style
+    }, /*#__PURE__*/React.createElement(DataCell, {
+      items: props.items,
+      onClick: click
+    }));
+  },
+  'group-v2': function groupV2(item, click) {
+    var _props$items;
+    var props = item.props;
+    if (!props) return undefined;
+    // itemsSeparator itemsStyle itemsDirection itemsGap
+    // ellipsis tooltip copyable action urlTarget url style
+    var renderItem = function renderItem(subItem, index) {
+      var count = 0;
+      if (subItem.type === 'group-v2') {
+        return /*#__PURE__*/React.createElement(DataCell, {
+          key: "renderItem-".concat(index, "-").concat(count++),
+          items: [subItem],
+          onClick: click
+        });
+      }
+      var ellipsis = subItem.ellipsis,
+        tooltip = subItem.tooltip,
+        copyable = subItem.copyable,
+        action = subItem.action,
+        urlTarget = subItem.urlTarget,
+        url = subItem.url,
+        style = subItem.style,
+        type = subItem.type,
+        other = _objectWithoutProperties(subItem, _excluded);
+      var renderBox = function renderBox(content) {
+        var afterContent = /*#__PURE__*/React.createElement(DataCellRowTextValue, {
+          className: "data-cell-group-v2-value-item"
+          // title={typeof content === 'string' ? content : ''}
+          ,
+          ellipsis: ellipsis,
+          key: "renderItem-".concat(index, "-").concat(count++)
+        }, content);
+        if (tooltip) {
+          afterContent = /*#__PURE__*/React.createElement(Tooltip, {
+            styles: {
+              body: {
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word'
+              }
+            },
+            title: typeof tooltip === 'boolean' ? "".concat(content) : tooltip,
+            arrow: false,
+            key: "renderItem-".concat(index, "-").concat(count++)
+          }, afterContent);
+        }
+        if (copyable) {
+          afterContent = /*#__PURE__*/React.createElement(React.Fragment, null, afterContent, /*#__PURE__*/React.createElement(Typography.Paragraph, {
+            copyable: {
+              text: typeof copyable === 'string' ? copyable : "".concat(typeof content === 'string' ? content : '')
+            },
+            key: "renderItem-".concat(index, "-").concat(count++)
+          }));
+        }
+        if (action === 'url') {
+          return /*#__PURE__*/React.createElement("a", {
+            href: url,
+            target: urlTarget !== null && urlTarget !== void 0 ? urlTarget : '_blank',
+            style: _objectSpread({
+              display: 'inline-flex'
+            }, style),
+            key: "renderItem-".concat(index, "-").concat(count++)
+          }, afterContent);
+        }
+        if (action === 'custom') {
+          return /*#__PURE__*/React.createElement("a", {
+            href: "void",
+            style: _objectSpread({
+              display: 'inline-flex'
+            }, style),
+            key: "renderItem-".concat(index, "-").concat(count++),
+            onClick: function onClick(e) {
+              e.preventDefault();
+              click === null || click === void 0 || click(item, subItem);
+            }
+          }, afterContent);
+        }
+        return /*#__PURE__*/React.createElement("div", {
+          style: _objectSpread({
+            display: 'inline-flex'
+          }, style),
+          key: "renderItem-".concat(index, "-").concat(count++)
+        }, afterContent);
+      };
+      switch (type) {
+        case 'text':
+          return renderBox(subItem.value);
+        case 'img':
+          {
+            var _ref = other,
+              mediaViewerType = _ref.mediaViewerType,
+              otherProps = _objectWithoutProperties(_ref, _excluded2);
+            return renderBox( /*#__PURE__*/React.createElement(MediaViewer, _extends({
+              type: mediaViewerType
+            }, otherProps)));
+          }
+        case 'tag':
+          {
+            var _ref2 = other,
+              value = _ref2.value,
+              _otherProps = _objectWithoutProperties(_ref2, _excluded3);
+            var color = function () {
+              if (subItem.color !== null && _typeof(subItem.color) === 'object') {
+                var _subItem$color, _subItem$color$toHexS;
+                return (_subItem$color = subItem.color) === null || _subItem$color === void 0 || (_subItem$color$toHexS = _subItem$color.toHexString) === null || _subItem$color$toHexS === void 0 ? void 0 : _subItem$color$toHexS.call(_subItem$color);
+              }
+              if (typeof subItem.color === 'string') {
+                return subItem.color;
+              }
+              return "#2db7f5";
+            }();
+            return renderBox(isEmpty(value) ? '' : /*#__PURE__*/React.createElement(Tag, _extends({}, _otherProps, {
+              color: color
+            }), value));
+          }
+        case 'icon':
+          {
+            var _ref3 = other,
+              iconsType = _ref3.iconsType,
+              _otherProps2 = _objectWithoutProperties(_ref3, _excluded4);
+            return renderBox( /*#__PURE__*/React.createElement(Icons, _extends({
+              type: iconsType
+            }, _otherProps2)));
+          }
+        default:
+          break;
+      }
+    };
+    return /*#__PURE__*/React.createElement(DataCellRowText, {
+      className: "data-cell-group-v2-box",
+      style: props === null || props === void 0 ? void 0 : props.style
+    }, !isEmpty(props.label) ? /*#__PURE__*/React.createElement(DataCellRowTextLabel, {
+      className: "data-cell-group-v2-label",
+      title: "".concat(props.label),
+      style: props === null || props === void 0 ? void 0 : props.labelStyle
+    }, "".concat(props.label)) : '', !isEmpty(props.label) ? /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingRight: 3
+      }
+    }, ":") : '', /*#__PURE__*/React.createElement(DataCellRowTextValue, {
+      className: "data-cell-group-v2-value",
+      style: _objectSpread({
+        gap: props.itemsGap,
+        flexDirection: props.itemsDirection
+      }, props.itemsStyle)
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, (_props$items = props.items) === null || _props$items === void 0 ? void 0 : _props$items.map(function (child, index) {
+      var _props$items2;
+      var arr = [];
+      arr.push(renderItem(child, index));
+      arr.push(((_props$items2 = props.items) === null || _props$items2 === void 0 ? void 0 : _props$items2.length) - 1 === index ? undefined : !isEmpty(props.itemsSeparator) && props.itemsDirection === 'row' ? /*#__PURE__*/React.createElement("span", {
+        key: "span-".concat(index),
+        style: {
+          paddingInline: 2
+        }
+      }, props.itemsSeparator) : undefined);
+      return arr;
+    }))));
+  }
+};

package/dist/components/data-cell/style/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataCellRowText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataCellRowTextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const DataCellRowTextValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    ellipsis?: number | undefined;
+}>> & string;

package/dist/components/data-cell/style/index.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export var Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "rex-design-aaf4__sc-9eukro-0"
+})(["&.data-cell-row-item{font-size:12px;}"]);
+export var DataCellRowText = styled.div.withConfig({
+  displayName: "DataCellRowText",
+  componentId: "rex-design-aaf4__sc-9eukro-1"
+})(["&.data-cell-row-text{display:inline-flex;gap:1px;width:100%;align-items:flex-start;>.ant-typography{margin:0;margin-left:2px;opacity:0;z-index:-1;transition:.2s;position:relative;}&:hover > .ant-typography{opacity:1;z-index:initial;}}&.data-cell-group-v2-box{display:flex;width:100%;gap:1px;align-items:flex-start;div:has(.data-cell-group-v2-value-item),a:has(.data-cell-group-v2-value-item){.data-cell-group-v2-value-item + .ant-typography{margin:0;margin-left:2px;opacity:0;z-index:-1;transition:.2s;position:relative;}&:hover > .ant-typography{opacity:1;z-index:initial;}}}"]);
+export var DataCellRowTextLabel = styled.span.withConfig({
+  displayName: "DataCellRowTextLabel",
+  componentId: "rex-design-aaf4__sc-9eukro-2"
+})(["&.data-cell-row-text-label{white-space:nowrap;}&.data-cell-group-v2-label{white-space:nowrap;}&.data-cell-row-text-label.link{display:inline-flex;}"]);
+export var DataCellRowTextValue = styled.span.withConfig({
+  displayName: "DataCellRowTextValue",
+  componentId: "rex-design-aaf4__sc-9eukro-3"
+})(["&.data-cell-row-text-value{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;word-break:break-word;}&.data-cell-group-v2-value{display:flex;gap:2px;flex-direction:row;}&.data-cell-group-v2-value-item{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;word-break:break-word;}&.data-cell-row-text-value.link{}"], function (props) {
+  var _props$ellipsis;
+  return (_props$ellipsis = props.ellipsis) !== null && _props$ellipsis !== void 0 ? _props$ellipsis : 2;
+}, function (props) {
+  var _props$ellipsis2;
+  return (_props$ellipsis2 = props.ellipsis) !== null && _props$ellipsis2 !== void 0 ? _props$ellipsis2 : 2;
+});

package/dist/components/data-cell/types.d.ts

@@ -0,0 +1,192 @@
+import { GetProps, Tag } from "antd";
+import { HTMLAttributeAnchorTarget } from "react";
+import { Icons, MediaViewer } from "../..";
+/** 组件props */
+export interface IDataCellProps {
+    /** 每一行展示内容 */
+    items: Array<TGroupV2 | IDataCellItem<TDataCellType>>;
+    /** 点击回调 */
+    onClick?: (item: IDataCellItem, subItem?: Exclude<TGroupV2['props'], undefined>['items'][number]) => void;
+}
+export interface IDataCellItem<T extends TDataCellType = TDataCellType> {
+    /** 组件类型 */
+    type: T;
+    /** 组件props */
+    props?: ICellPropsMap[T];
+    /** 顶层样式 */
+    rootStyle?: React.CSSProperties;
+    /** 扩展信息 */
+    extra?: {
+        rowSpan?: number;
+        colSpan?: number;
+    };
+}
+export interface ICellPropsMap {
+    text: {
+        /** 小标题 */
+        label?: string | number | boolean;
+        /** 展示值 */
+        value?: string | number | boolean | Omit<IDataCellItem<TDataCellType>, 'extra'>;
+        /** 样式 */
+        style?: React.CSSProperties;
+        /**
+         * 缺省
+         * @default 2
+         */
+        ellipsis?: number;
+        /** 提示信息 */
+        tooltip?: string;
+        /** 可复制 */
+        copyable?: boolean | string;
+        labelStyle?: React.CSSProperties;
+        valueStyle?: React.CSSProperties;
+    };
+    img: {
+        /** alt文案 */
+        label?: string;
+        /** url地址 */
+        value?: string;
+    } & Omit<GetProps<typeof MediaViewer>, 'src' | 'alt'>;
+    link: {
+        /** 展示文案 */
+        label?: string;
+        /** 跳转地址 */
+        value?: string;
+        /**
+         * 缺省
+         * @default 2
+         */
+        ellipsis?: number;
+        /** 提示信息 */
+        tooltip?: string;
+        /** 可复制 */
+        copyable?: boolean | string;
+    } & TCellActionExtend;
+    tag: {
+        /** 小标题 */
+        label?: string;
+        /** 展示值 */
+        value?: string;
+    } & Omit<GetProps<typeof Tag>, 'children'>;
+    'link-group': {
+        items: Array<ICellPropsMap['link']>;
+        /**
+         * 分离器
+         * @default /
+         */
+        separator?: string;
+    };
+    'icon': {
+        /** 类型 */
+        label?: GetProps<typeof Icons>['type'];
+        /** 图标 */
+        value?: string;
+    } & Omit<GetProps<typeof Icons>, 'type' | 'name'> & TCellActionExtend;
+    'group': {
+        items: Array<Omit<IDataCellItem<TDataCellType>, 'extra'>>;
+        /** 样式 */
+        style?: React.CSSProperties;
+    };
+    'group-v2': TGroupV2['props'];
+}
+export type TGroupV2 = {
+    /** 组件类型 */
+    type: 'group-v2';
+    /** 组件props */
+    props?: {
+        style?: React.CSSProperties;
+        label?: string;
+        labelStyle?: React.CSSProperties;
+        /**
+         * 分离器
+         */
+        itemsSeparator?: string;
+        /** 样式 */
+        itemsStyle?: React.CSSProperties;
+        /**
+         * 排列方向
+         * @default row
+         */
+        itemsDirection?: 'column' | 'row';
+        /**
+         * 间距
+         * @default 2
+         */
+        itemsGap?: number | string;
+        items: Array<{
+            type?: 'text';
+            value?: React.ReactNode;
+        } & ICommonGroupV2 | {
+            type?: 'img';
+            mediaViewerType?: GetProps<typeof MediaViewer>['type'];
+        } & ICommonGroupV2 & Omit<GetProps<typeof MediaViewer>, 'type'> | {
+            type?: 'tag';
+            value?: React.ReactNode;
+        } & ICommonGroupV2 & Omit<GetProps<typeof Tag>, 'children'> | {
+            type?: 'icon';
+            iconsType?: GetProps<typeof Icons>['type'];
+        } & ICommonGroupV2 & Omit<GetProps<typeof Icons>, 'type'> | TGroupV2>;
+    };
+    /** 顶层样式 */
+    rootStyle?: React.CSSProperties;
+    /** 扩展信息 */
+    extra?: {
+        rowSpan?: number;
+        colSpan?: number;
+    };
+};
+export interface ICommonGroupV2 {
+    /**
+     * 缺省
+     * @default 2
+     */
+    ellipsis?: number;
+    /** 提示信息 */
+    tooltip?: string | boolean;
+    /** 可复制 */
+    copyable?: boolean | string;
+    /**
+     * 触发类型
+     * - url 跳转路由
+     * - custom 透传出去
+     * - default 什么都不做
+     * @default default
+     */
+    action?: 'url' | 'custom' | 'default';
+    /**
+     * url 跳转类型
+     * - a 标签的 target 属性
+     * @default _blank
+     */
+    urlTarget?: HTMLAttributeAnchorTarget;
+    /** 跳转路径 */
+    url?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+}
+/** 操作功能 */
+export type TCellActionExtend = {
+    label?: string;
+    value?: string;
+    /**
+     * 触发类型
+     * - url 跳转路由
+     * - modal-form 弹出表单窗口(未实现)
+     * - modal-search 弹出搜索窗口(未实现)
+     * - custom 透传出去
+     * - default 什么都不做
+     */
+    action: 'url' | 'modal-form' | 'modal-search' | 'custom' | 'default';
+    /**
+     * url 跳转类型
+     * - a 标签的 target 属性
+     * @default _blank
+     */
+    urlTarget?: HTMLAttributeAnchorTarget;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 提示信息 */
+    tooltip?: string;
+};
+/** 支持配置的展示类型 */
+export type TDataCellType = 'text' | 'link' | 'tag' | 'link-group' | 'img' | 'icon' | 'group' | 'group-v2';

package/dist/components/data-cell/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/icons/assets/icon-park--arrow-up.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+	<rect width="48" height="48" fill="none" />
+	<g fill="none" stroke="#020000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
+		<path d="M24 6V42" />
+		<path d="M12 18L24 6L36 18" />
+	</g>
+</svg>

package/dist/components/icons/assets/index.d.ts

@@ -0,0 +1,4 @@
+/** 本地图标枚举 */
+export declare const localIconMap: Record<string, () => Promise<{
+    default: string;
+}>>;

package/dist/components/icons/assets/index.js

@@ -0,0 +1,9 @@
+/** 本地图标枚举 */
+export var localIconMap = {
+  'icon-park--arrow-up': function iconParkArrowUp() {
+    return import("./icon-park--arrow-up.svg");
+  },
+  'svg-spinners--blocks-shuffle-3': function svgSpinnersBlocksShuffle3() {
+    return import("./svg-spinners--blocks-shuffle-3.svg");
+  }
+};

package/dist/components/icons/assets/svg-spinners--blocks-shuffle-3.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<rect width="24" height="24" fill="none" />
+	<rect width="10" height="10" x="1" y="1" fill="currentColor" rx="1">
+		<animate id="svgSpinnersBlocksShuffle30" fill="freeze" attributeName="x" begin="0;svgSpinnersBlocksShuffle3b.end" dur="0.2s" values="1;13" />
+		<animate id="svgSpinnersBlocksShuffle31" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle38.end" dur="0.2s" values="1;13" />
+		<animate id="svgSpinnersBlocksShuffle32" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle39.end" dur="0.2s" values="13;1" />
+		<animate id="svgSpinnersBlocksShuffle33" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle3a.end" dur="0.2s" values="13;1" />
+	</rect>
+	<rect width="10" height="10" x="1" y="13" fill="currentColor" rx="1">
+		<animate id="svgSpinnersBlocksShuffle34" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle30.end" dur="0.2s" values="13;1" />
+		<animate id="svgSpinnersBlocksShuffle35" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle31.end" dur="0.2s" values="1;13" />
+		<animate id="svgSpinnersBlocksShuffle36" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle32.end" dur="0.2s" values="1;13" />
+		<animate id="svgSpinnersBlocksShuffle37" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle33.end" dur="0.2s" values="13;1" />
+	</rect>
+	<rect width="10" height="10" x="13" y="13" fill="currentColor" rx="1">
+		<animate id="svgSpinnersBlocksShuffle38" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle34.end" dur="0.2s" values="13;1" />
+		<animate id="svgSpinnersBlocksShuffle39" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle35.end" dur="0.2s" values="13;1" />
+		<animate id="svgSpinnersBlocksShuffle3a" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle36.end" dur="0.2s" values="1;13" />
+		<animate id="svgSpinnersBlocksShuffle3b" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle37.end" dur="0.2s" values="1;13" />
+	</rect>
+</svg>

package/dist/components/icons/demo/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;