zmdms-webui 1.8.6 → 1.8.8

package/dist/es/table/components/Badge.d.ts

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+interface IBadgeProps {
+    /** 角标提示文本 */
+    title?: string;
+    /** 角标颜色 */
+    color?: string;
+    /** 角标大小 */
+    size?: "small" | "default" | "large";
+    /** 是否显示角标 */
+    show?: boolean;
+    /** 角标样式 */
+    style?: React__default.CSSProperties;
+    /** 角标类名 */
+    className?: string;
+    /** 子元素 */
+    children?: React__default.ReactNode;
+    /** 角标位置 */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    /** 触发方式 */
+    trigger?: "click" | "hover" | "focus";
+}
+
+export { IBadgeProps };

package/dist/es/table/components/Badge.js

@@ -0,0 +1,51 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Tooltip } from 'antd';
+
+/**
+ * 角标组件
+ * 右上角显示三角形角标，鼠标悬停显示提示文本
+ */
+var Badge = function (_a) {
+    var title = _a.title, _b = _a.color, color = _b === void 0 ? "#f50" : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.show, show = _d === void 0 ? true : _d, style = _a.style, className = _a.className, children = _a.children, _e = _a.position, position = _e === void 0 ? "top-right" : _e, _f = _a.trigger, trigger = _f === void 0 ? "click" : _f, restProps = __rest(_a, ["title", "color", "size", "show", "style", "className", "children", "position", "trigger"]);
+    // 如果不显示角标，直接返回子元素
+    if (!show) {
+        return jsx(Fragment, { children: children });
+    }
+    // 根据位置计算样式
+    var getPositionStyle = function () {
+        var baseStyle = {
+            position: "absolute",
+            width: 0,
+            height: 0,
+            borderStyle: "solid",
+        };
+        var sizeMap = {
+            small: 6,
+            default: 8,
+            large: 10,
+        };
+        var triangleSize = sizeMap[size];
+        switch (position) {
+            case "top-right":
+                return __assign(__assign({}, baseStyle), { top: 0, right: 0, borderWidth: "0 ".concat(triangleSize, "px ").concat(triangleSize, "px 0"), borderColor: "transparent ".concat(color, " transparent transparent") });
+            case "top-left":
+                return __assign(__assign({}, baseStyle), { top: 0, left: 0, borderWidth: "".concat(triangleSize, "px ").concat(triangleSize, "px 0 0"), borderColor: "".concat(color, " transparent transparent transparent") });
+            case "bottom-right":
+                return __assign(__assign({}, baseStyle), { bottom: 0, right: 0, borderWidth: "0 0 ".concat(triangleSize, "px ").concat(triangleSize, "px"), borderColor: "transparent transparent ".concat(color, " transparent") });
+            case "bottom-left":
+                return __assign(__assign({}, baseStyle), { bottom: 0, left: 0, borderWidth: "".concat(triangleSize, "px 0 0 ").concat(triangleSize, "px"), borderColor: "transparent transparent transparent ".concat(color) });
+            default:
+                return __assign(__assign({}, baseStyle), { top: 0, right: 0, borderWidth: "0 ".concat(triangleSize, "px ").concat(triangleSize, "px 0"), borderColor: "transparent ".concat(color, " transparent transparent") });
+        }
+    };
+    var badge = jsx("div", { style: getPositionStyle() });
+    // 如果有 title，则包装在 Tooltip 中
+    if (title) {
+        badge = (jsx(Tooltip, __assign({ title: title, placement: "top", trigger: trigger }, { children: jsx("div", { style: getPositionStyle() }) })));
+    }
+    var badgeElement = (jsxs("div", __assign({ style: __assign({}, style), className: className }, restProps, { children: [children, badge] })));
+    return badgeElement;
+};
+
+export { Badge as default };

package/dist/es/table/interface.d.ts

@@ -6,6 +6,7 @@ import { IInputNumberProps } from '../inputnumber/inputNumber.js';
 import { IDynamicItem } from '../dynamicsetting/interface.js';
 import _default from './components/TitleDirectionColumn.js';
 import { IS_SUMMARY } from './constant.js';
+import { IBadgeProps } from './components/Badge.js';
 
 type IEditableConfigOtherProps = IInputProps & IInputNumberProps & TextAreaProps;
 interface IEditableConfig extends Partial<IEditableConfigOtherProps> {
@@ -224,6 +225,10 @@ interface IColumnType<RecordType> extends Omit<ColumnType<RecordType>, "render">
      * 开启合并的字段,按其他字段维度合并
      */
     mergeKey?: string;
+    /**
+     * 添加角标
+     */
+    badge?: IBadgeProps | ((record: any) => IBadgeProps);
 }
 interface IRenderOptions {
     insertTableFromClipboard: IFuncInsertTableFromClipboard;

package/dist/es/table/useColumns.js

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { getTableColumns, parsePasteData, getFilterRecords, startColumnInsertTableData } from './utils.js';
 import '../node_modules/classnames/index.js';
-import { MERGE_INDEX } from './constant.js';
+import { MERGE_INDEX, IS_SUMMARY } from './constant.js';
 import 'ahooks';
 import './components/EnhanceHeaderCell.js';
 import ColumnDynamic from './components/ColumnDynamic.js';
@@ -12,6 +12,7 @@ import TitleOperation from './components/TitleOperation.js';
 import SortTitle from './components/SortTitle.js';
 import PopoverIcon from './components/PopoverIcon.js';
 import FilterDropdown, { createFilterValue, filterHandle } from './components/FilterDropdown.js';
+import Badge from './components/Badge.js';
 import { PLACEHOLDER_NULL } from '../config/constant.js';
 import { useMergeAddAndDel } from './hooks.js';
 import SearchOutlined from '../node_modules/@ant-design/icons/es/icons/SearchOutlined.js';
@@ -293,6 +294,23 @@ function useColumns(columns, options) {
                 return fn_1(record, preRecord);
             };
         }
+        // 添加角标
+        if (_column.badge) {
+            var render_1 = _column.render;
+            _column.render = function (text, record, index, options) {
+                var v = render_1 ? render_1(text, record, index, options) : text;
+                if (record[IS_SUMMARY]) {
+                    return v;
+                }
+                var props = typeof _column.badge === "function"
+                    ? _column.badge(record)
+                    : _column.badge;
+                if (!props) {
+                    return v;
+                }
+                return jsx(Badge, __assign({}, props, { children: v }));
+            };
+        }
         // 添加render字段，
         if (!_column.render && !_column.editable) {
             _column.render = function (text, record, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmdms-webui",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "private": false,
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",