@teamias/rex-design 0.1.13 → 0.1.15

package/dist/components/data-cell/demo/GroupV2Demo.js

@@ -0,0 +1,89 @@
+import { DataCell, RexProConfigProvider } from "../../..";
+
+/**
+ * title: group-v2 组合类型（推荐）
+ * description: 增强的组合类型，支持 label、分隔符、排列方向等更多配置。推荐在大多数场景使用此类型。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(RexProConfigProvider, {
+    value: {},
+    children: /*#__PURE__*/_jsx(DataCell, {
+      items: [{
+        type: 'group-v2',
+        props: {
+          label: '商品规格',
+          labelStyle: {
+            color: '#666',
+            marginRight: 8
+          },
+          itemsDirection: 'row',
+          itemsGap: 4,
+          itemsSeparator: ' / ',
+          items: [{
+            type: 'text',
+            value: '红色'
+          }, {
+            type: 'text',
+            value: 'XL'
+          }, {
+            type: 'text',
+            value: '128GB'
+          }]
+        }
+      }, {
+        type: 'group-v2',
+        props: {
+          label: '操作记录',
+          itemsDirection: 'column',
+          itemsGap: 8,
+          items: [{
+            type: 'text',
+            value: '2024-01-10 创建订单',
+            style: {
+              color: '#666'
+            }
+          }, {
+            type: 'text',
+            value: '2024-01-11 已发货',
+            style: {
+              color: '#1890ff'
+            }
+          }, {
+            type: 'text',
+            value: '2024-01-12 已签收',
+            style: {
+              color: '#52c41a'
+            }
+          }]
+        }
+      }, {
+        type: 'group-v2',
+        props: {
+          label: '商品信息',
+          itemsDirection: 'row',
+          itemsGap: 12,
+          items: [{
+            type: 'img',
+            src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            width: 50,
+            height: 50
+          }, {
+            type: 'tag',
+            value: '热销',
+            color: 'red'
+          }, {
+            type: 'text',
+            value: '查看详情',
+            action: 'url',
+            url: '/detail',
+            style: {
+              color: '#1890ff',
+              cursor: 'pointer'
+            }
+          }]
+        }
+      }]
+    })
+  });
+});

package/dist/components/data-cell/demo/IconDemo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 图标类型
+ * description: 展示图标，支持 iconify 图标库和自定义图标
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/data-cell/demo/IconDemo.js

@@ -0,0 +1,52 @@
+import { DataCell } from "../../..";
+
+/**
+ * title: 图标类型
+ * description: 展示图标，支持 iconify 图标库和自定义图标
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(DataCell, {
+    items: [{
+      type: 'icon',
+      props: {
+        label: 'iconify',
+        value: 'mdi:home',
+        style: {
+          fontSize: 24,
+          color: '#1890ff'
+        }
+      }
+    }, {
+      type: 'icon',
+      props: {
+        label: 'iconify',
+        value: 'mdi:account',
+        style: {
+          fontSize: 24,
+          color: '#52c41a'
+        }
+      }
+    }, {
+      type: 'icon',
+      props: {
+        label: 'iconify',
+        value: 'mdi:cog',
+        style: {
+          fontSize: 24,
+          color: '#faad14'
+        }
+      }
+    }, {
+      type: 'icon',
+      props: {
+        label: 'iconify',
+        value: 'svg-spinners:ring-resize',
+        style: {
+          fontSize: 24,
+          color: '#1890ff'
+        }
+      }
+    }]
+  });
+});

package/dist/components/{base-form/demo/BaseFormBasicDepend.d.ts → data-cell/demo/ImageDemo.d.ts}

@@ -1,2 +1,6 @@
+/**
+ * title: 图片类型
+ * description: 展示图片，支持预览功能
+ */
 declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/components/data-cell/demo/ImageDemo.js

@@ -0,0 +1,31 @@
+import { DataCell } from "../../..";
+
+/**
+ * title: 图片类型
+ * description: 展示图片，支持预览功能
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(DataCell, {
+    items: [{
+      type: 'img',
+      props: {
+        label: '商品图片',
+        value: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        width: 80,
+        height: 80
+      }
+    }, {
+      type: 'img',
+      props: {
+        label: '用户头像',
+        value: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503023345310-bd7c1de61c7d.jfif',
+        width: 60,
+        height: 60,
+        style: {
+          borderRadius: '50%'
+        }
+      }
+    }]
+  });
+});

package/dist/components/data-cell/demo/LinkDemo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 链接类型
+ * description: 可点击的链接，支持 URL 跳转、文件预览/下载、自定义点击事件
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/data-cell/demo/LinkDemo.js

@@ -0,0 +1,52 @@
+import { DataCell, RexProConfigProvider } from "../../..";
+
+/**
+ * title: 链接类型
+ * description: 可点击的链接，支持 URL 跳转、文件预览/下载、自定义点击事件
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(RexProConfigProvider, {
+    value: {},
+    children: /*#__PURE__*/_jsx(DataCell, {
+      items: [{
+        type: 'link',
+        props: {
+          label: '外部链接（新窗口）',
+          value: 'https://ant.design',
+          action: 'url',
+          urlTarget: '_blank'
+        }
+      }, {
+        type: 'link',
+        props: {
+          label: '内部跳转（当前窗口）',
+          value: '/components/data-cell',
+          action: 'url',
+          urlTarget: '_self'
+        }
+      }, {
+        type: 'link',
+        props: {
+          label: '文件预览/下载',
+          value: 'https://zzzz-zkp.oss-cn-shenzhen.aliyuncs.com/%E5%85%A5%E8%81%8C%E5%BD%95%E7%94%A8%E9%80%9A%E7%9F%A5.pdf',
+          action: 'file'
+        }
+      }, {
+        type: 'link',
+        props: {
+          label: '自定义点击事件',
+          value: 'custom-data',
+          action: 'custom'
+        }
+      }],
+      onClick: function onClick(item) {
+        var _item$props;
+        if (((_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.action) === 'custom') {
+          var _item$props2;
+          alert("\u81EA\u5B9A\u4E49\u70B9\u51FB: ".concat((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.value));
+        }
+      }
+    })
+  });
+});

package/dist/components/data-cell/demo/LinkGroupDemo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 链接组类型
+ * description: 多个链接组合展示，支持自定义分隔符
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/data-cell/demo/LinkGroupDemo.js

@@ -0,0 +1,62 @@
+import { DataCell, RexProConfigProvider } from "../../..";
+
+/**
+ * title: 链接组类型
+ * description: 多个链接组合展示，支持自定义分隔符
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(RexProConfigProvider, {
+    value: {},
+    children: /*#__PURE__*/_jsx(DataCell, {
+      items: [{
+        type: 'link-group',
+        props: {
+          separator: ' / ',
+          items: [{
+            label: '查看',
+            value: '/detail/1',
+            action: 'url',
+            urlTarget: '_self'
+          }, {
+            label: '编辑',
+            value: '/edit/1',
+            action: 'url',
+            urlTarget: '_self'
+          }, {
+            label: '删除',
+            value: 'delete-1',
+            action: 'custom',
+            style: {
+              color: '#ff4d4f'
+            }
+          }]
+        }
+      }, {
+        type: 'link-group',
+        props: {
+          separator: ' | ',
+          items: [{
+            label: '首页',
+            value: '/',
+            action: 'url'
+          }, {
+            label: '文档',
+            value: '/docs',
+            action: 'url'
+          }, {
+            label: '关于',
+            value: '/about',
+            action: 'url'
+          }]
+        }
+      }],
+      onClick: function onClick(item) {
+        var _item$props;
+        alert("\u81EA\u5B9A\u4E49\u64CD\u4F5C: ".concat((_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.label));
+        // if (subItem?.action === 'custom') {
+        // }
+      }
+    })
+  });
+});

package/dist/components/{base-form/demo/BaseFormCustomContent.d.ts → data-cell/demo/NestedDemo.d.ts}

@@ -1,2 +1,6 @@
+/**
+ * title: 嵌套使用
+ * description: text 类型的 value 支持嵌套其他类型
+ */
 declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/components/data-cell/demo/NestedDemo.js

@@ -0,0 +1,50 @@
+import { DataCell } from "../../..";
+
+/**
+ * title: 嵌套使用
+ * description: text 类型的 value 支持嵌套其他类型
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(DataCell, {
+    items: [{
+      type: 'text',
+      props: {
+        label: '状态',
+        value: {
+          type: 'tag',
+          props: {
+            value: '进行中',
+            color: 'processing'
+          }
+        }
+      }
+    }, {
+      type: 'text',
+      props: {
+        label: '图片',
+        value: {
+          type: 'img',
+          props: {
+            value: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+            width: 40,
+            height: 40
+          }
+        }
+      }
+    }, {
+      type: 'text',
+      props: {
+        label: '链接',
+        value: {
+          type: 'link',
+          props: {
+            label: '点击查看',
+            value: 'https://ant.design',
+            action: 'url'
+          }
+        }
+      }
+    }]
+  });
+});

package/dist/components/data-cell/demo/TagDemo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 标签类型
+ * description: 展示标签样式的内容，继承 antd Tag 的所有属性
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/data-cell/demo/TagDemo.js

@@ -0,0 +1,47 @@
+import { DataCell } from "../../..";
+
+/**
+ * title: 标签类型
+ * description: 展示标签样式的内容，继承 antd Tag 的所有属性
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(DataCell, {
+    items: [{
+      type: 'tag',
+      props: {
+        label: '状态',
+        value: '进行中',
+        color: 'processing'
+      }
+    }, {
+      type: 'tag',
+      props: {
+        label: '结果',
+        value: '成功',
+        color: 'success'
+      }
+    }, {
+      type: 'tag',
+      props: {
+        label: '警告',
+        value: '待处理',
+        color: 'warning'
+      }
+    }, {
+      type: 'tag',
+      props: {
+        label: '错误',
+        value: '失败',
+        color: 'error'
+      }
+    }, {
+      type: 'tag',
+      props: {
+        label: '自定义颜色',
+        value: 'VIP用户',
+        color: '#f50'
+      }
+    }]
+  });
+});

package/dist/components/data-cell/demo/TextDemo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 文本类型
+ * description: 展示文本内容，支持 label + value 格式，可配置省略、复制、提示等功能
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/data-cell/demo/TextDemo.js

@@ -0,0 +1,43 @@
+import { DataCell } from "../../..";
+
+/**
+ * title: 文本类型
+ * description: 展示文本内容，支持 label + value 格式，可配置省略、复制、提示等功能
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(DataCell, {
+    items: [{
+      type: 'text',
+      props: {
+        label: '用户名',
+        value: '张三'
+      }
+    }, {
+      type: 'text',
+      props: {
+        label: '订单号',
+        value: 'ORD202401100001',
+        copyable: true
+      }
+    }, {
+      type: 'text',
+      props: {
+        label: '备注',
+        value: '这是一段很长的备注信息，超过指定行数会自动省略显示，鼠标悬停可查看完整内容',
+        ellipsis: 1,
+        tooltip: '这是一段很长的备注信息，超过指定行数会自动省略显示，鼠标悬停可查看完整内容'
+      }
+    }, {
+      type: 'text',
+      props: {
+        label: '金额',
+        value: 1999.99,
+        valueStyle: {
+          color: '#f5222d',
+          fontWeight: 'bold'
+        }
+      }
+    }]
+  });
+});

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

@@ -13,7 +13,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { EyeOutlined } from '@ant-design/icons';
 import { downloadResourceFile, Icons, MediaViewer, showFileViewer } from "../../..";
 import { Tag, Tooltip, Typography } from 'antd';
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { DataCell } from "../data-cell";
 import { DataCellRowText, DataCellRowTextLabel, DataCellRowTextValue } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -386,28 +386,33 @@ export var cellItemMap = {
           }, "renderItem-".concat(index, "-").concat(count++));
         }
         if (action === 'file') {
-          return /*#__PURE__*/_jsxs("a", {
+          return /*#__PURE__*/_jsx("a", {
             href: "void",
-            style: _objectSpread({
-              wordBreak: 'break-all'
-            }, style),
+            style: style,
             onClick: function onClick(e) {
               e.preventDefault();
               e.stopPropagation();
               downloadResourceFile(url || '');
             },
-            children: [/*#__PURE__*/_jsx(EyeOutlined, {
-              style: {
-                marginRight: 4
-              },
-              onClick: function onClick(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                showFileViewer({
-                  fileUrl: url || ''
-                });
-              }
-            }), afterContent]
+            children: /*#__PURE__*/cloneElement(afterContent, {
+              style: _objectSpread({
+                wordBreak: 'break-all'
+              }, afterContent.props.style),
+              children: /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx(EyeOutlined, {
+                  style: {
+                    marginRight: 4
+                  },
+                  onClick: function onClick(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    showFileViewer({
+                      fileUrl: url || ''
+                    });
+                  }
+                }), afterContent.props.children]
+              })
+            })
           }, "renderItem-".concat(index, "-").concat(count++));
         }
         if (action === 'custom') {