@cloudbase/weda-ui 3.5.2 → 3.6.0

package/dist/web/actions/showMessage/index.css

@@ -1,3 +1,32 @@
 .weda-showmessage__none > .wedatea2td-icon {
   display: none;
 }
+
+.weda-showmessage__success,
+.weda-showmessage__warning,
+.weda-showmessage__error {
+  overflow: hidden;
+}
+
+.weda-showmessage__success > .wedatea2td-icon {
+  transform: translateX(-40px);
+  filter: drop-shadow(40px 0 0 var(--wd-color-success, #00a870));
+}
+
+.weda-showmessage__warning > .wedatea2td-icon {
+  transform: translateX(-40px);
+  filter: drop-shadow(40px 0 0 var(--wd-color-warning, #ed7b2f));
+}
+
+.weda-showmessage__error > .wedatea2td-icon {
+  transform: translateX(-40px);
+  filter: drop-shadow(40px 0 0 var(--wd-color-error, #e34d59));
+}
+
+.weda-showmessage__loading > .wedatea2td-icon {
+  background: conic-gradient(
+    from 90deg at 50% 50%,
+    #fff 0deg,
+    var(--wd-color-brand, #0052d9) 1turn
+  );
+}

package/dist/web/actions/showModal/index.css

@@ -1,3 +1,4 @@
 .weapps__modal {
   z-index: 5001 !important;
+  word-wrap: break-word;
 }

package/dist/web/components/calendar/index.css

@@ -157,22 +157,26 @@
 
 .weda-calendar
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-disabled,
+  .weda-calendar__table-body-cell.is-invalid {
+  cursor: default;
+}
 .weda-calendar
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid {
+  .weda-calendar__table-body-cell.is-disabled {
   cursor: not-allowed;
 }
 
 .weda-calendar
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid {
+  .weda-calendar__table-body-cell.is-disabled {
   background: #f3f3f3;
 }
 
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-now {
-  border-top-color: #0052d9;
-  background: #ecf2fe;
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-checked {
+  border-top-color: var(--wd-color-brand, #0052d9);
+  background-color: var(--wd-color-brand-light, #ecf2fe);
 }
 
 .weda-calendar .weda-calendar__table .weda-calendar__table-body-cell-value {
@@ -186,7 +190,7 @@
 
 .weda-calendar
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell.is-invalid
   .weda-calendar__table-body-cell-value {
   color: rgba(0, 0, 0, 0.26);
 }
@@ -346,7 +350,9 @@
   flex-direction: row;
 }
 
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-now {
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-checked {
   border: none;
   background: transparent;
 }
@@ -365,19 +371,19 @@
 
 .weda-calendar-h5
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell.is-checked
   .weda-calendar__table-body-cell-value {
   color: #fff;
 }
 
 .weda-calendar-h5
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell.is-checked
   .weda-calendar__table-body-cell-bg {
   position: absolute;
   width: 1.714285em;
   height: 1.714285em;
-  background: #0052d9;
+  background: var(--wd-color-brand, #0052d9);
   border-radius: 100%;
   left: calc(50% - 0.85714em);
   top: calc(50% - 0.85714em);
@@ -395,20 +401,20 @@
 
 .weda-calendar-h5
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell.is-invalid
   .weda-calendar__table-body-cell-value {
   color: rgba(0, 0, 0, 0.6);
 }
 
 .weda-calendar-h5
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid {
+  .weda-calendar__table-body-cell.is-disabled {
   background: transparent;
 }
 
 .weda-calendar-h5
   .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid
+  .weda-calendar__table-body-cell.is-disabled
   .weda-calendar__table-body-cell-value {
   color: #c5c5c5;
 }

package/dist/web/components/calendar/index.js

@@ -148,7 +148,7 @@ export default function Calendar({ id, className, style, initVisible, initValue,
                                     const isNow = (dateCell.formattedDate === dayjs().format('YYYY-MM-DD') &&
                                         'is-now') ||
                                         '';
-                                    return (_jsx("td", { className: classNames(`${blockName}__table-body-cell`, isNow, dateCell.isCurrent ? 'is-checked' : '', dateCell.belongTo !== 0 ? 'is-disabled' : '', dateCell.disabled ? 'is-invalid' : ''), children: _jsxs("div", { className: blockName + '__table-body-cell-value', children: [dateCell.date.getDate(), _jsx("div", { className: `${blockName}__table-body-cell-bg` }), dateCell.marked && dateCell.marked !== '' && (_jsx("div", { style: { backgroundColor: `${dateCell.marked}` }, className: blockName + '__table-body-cell-marked', "data-testid": "weda-calendar-cell-marked" }))] }) }, String(dateCellIndex)));
+                                    return (_jsx("td", { className: classNames(`${blockName}__table-body-cell`, isNow, dateCell.isCurrent ? 'is-checked' : '', dateCell.belongTo !== 0 ? 'is-invalid' : '', dateCell.disabled ? 'is-disabled' : ''), children: _jsxs("div", { className: blockName + '__table-body-cell-value', children: [dateCell.date.getDate(), _jsx("div", { className: `${blockName}__table-body-cell-bg` }), dateCell.marked && dateCell.marked !== '' && (_jsx("div", { style: { backgroundColor: `${dateCell.marked}` }, className: blockName + '__table-body-cell-marked', "data-testid": "weda-calendar-cell-marked" }))] }) }, String(dateCellIndex)));
                                 }) }, String(dateRowIndex)))) })] }) })] }));
 }
 Calendar.propTypes = {

package/dist/web/components/carousel/index.d.ts

@@ -9,6 +9,7 @@ interface imagesItem {
     fit: ImageProps['fit'];
     height: string;
     width: string;
+    packageName?: string;
     insideUrl?: string;
     outerUrl?: string;
     newPage?: boolean;

package/dist/web/components/carousel/index.js

@@ -5,6 +5,7 @@ import Swipe from 'react-easy-swipe';
 import { useDebouncedCallback, useEventListener, useResizeObserver, } from '@react-hookz/web';
 import Image from '../image';
 import { emptyObject } from '../../utils/constant';
+import WdLink from '../wd-link';
 import './style';
 export default function Carousel({ className, style, autoplay, circular, vertical, indicatorDots, indicatorColor, indicatorActiveColor, duration, interval, current, events = emptyObject, id, images: defalutImages, }) {
     const isCorrectDatas = Array.isArray(defalutImages);
@@ -202,7 +203,7 @@ const SwiperItem = ({ setHeight, children, currentIndex, index, imagesValue }) =
         return res;
     };
     const handleImage = (e) => {
-        const { insideUrl, outerUrl, tapMode, params, newPage } = imagesValue;
+        const { insideUrl, outerUrl, tapMode, params, newPage, packageName } = imagesValue;
         if (tapMode === 'tap') {
             return;
         }
@@ -225,7 +226,7 @@ const SwiperItem = ({ setHeight, children, currentIndex, index, imagesValue }) =
                 e.preventDefault();
                 app.navigateTo({
                     pageId: path,
-                    packageName: '',
+                    packageName: packageName || '',
                     mode: 'weDa',
                     params: paramObj,
                 });
@@ -237,5 +238,7 @@ const SwiperItem = ({ setHeight, children, currentIndex, index, imagesValue }) =
     };
     return (_jsx("div", { className: classNames('g-swiper-item', {
             current: index === currentIndex,
-        }), "data-index": index, onClick: handleImage, "data-testid": "swiper-item", children: _jsx("div", { ref: firstChildRef, children: children }) }));
+        }), "data-index": index, onClick: handleImage, "data-testid": "swiper-item", children: ['inside', 'outer'].includes(imagesValue === null || imagesValue === void 0 ? void 0 : imagesValue.tapMode) ? (_jsx(WdLink, { style: { width: '100%', color: 'unset', fontSize: 'unset' }, packageName: imagesValue === null || imagesValue === void 0 ? void 0 : imagesValue.packageName, url: (imagesValue === null || imagesValue === void 0 ? void 0 : imagesValue.tapMode) === 'inside'
+                ? imagesValue.insideUrl
+                : imagesValue.outerUrl, params: imagesValue === null || imagesValue === void 0 ? void 0 : imagesValue.params, disabled: true, contentSlot: _jsx("div", { ref: firstChildRef, children: children }), content: '' })) : (_jsx("div", { ref: firstChildRef, children: children })) }));
 };

package/dist/web/components/chart/common/chart-custom-connector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IChartType, PropsType } from './types';
 export declare const ChartCustomConnector: (props: PropsType<IChartType, 'custom-connector'> & {
     type: IChartType;

package/dist/web/components/chart/common/data-transform.js

@@ -111,6 +111,10 @@ export function transform(chartType, dataInput, chartInput) {
                                 },
                             ]
                             : [eachYaxis.Value],
+                        ...(chartType === 'line' &&
+                            (chartInput === null || chartInput === void 0 ? void 0 : chartInput.chartType) === 'bight'
+                            ? { smooth: true }
+                            : {}),
                     };
                     if (chartInput.isUnit || chartInput.isPercent) {
                         series[idx].label.formatter = formatter;
@@ -164,6 +168,10 @@ export function transform(chartType, dataInput, chartInput) {
                         color: (_b = (_a = chartInput === null || chartInput === void 0 ? void 0 : chartInput.setColor) === null || _a === void 0 ? void 0 : _a[idx % 6]) !== null && _b !== void 0 ? _b : null,
                     },
                 data: [],
+                ...(chartType === 'line' &&
+                    (chartInput === null || chartInput === void 0 ? void 0 : chartInput.chartType) === 'bight'
+                    ? { smooth: true }
+                    : {}),
             });
         });
         // 然后再往data里放东西

package/dist/web/components/common/portal.d.ts

@@ -1,9 +1,13 @@
-/// <reference types="react" />
+import { RefObject } from 'react';
 type PortalProps = {
     children: React.ReactNode;
     type: string;
     disableOutsidePointerEvents?: boolean;
     disableOutsideScroll?: boolean;
+    /**
+     * Portal到什么玩意里面
+     */
+    portalContainer?: HTMLElement | RefObject<HTMLElement>;
 };
-export declare const Portal: ({ children, type, disableOutsidePointerEvents, disableOutsideScroll, }: PortalProps) => import("react").ReactPortal;
+export declare const Portal: ({ children, type, disableOutsidePointerEvents, disableOutsideScroll, portalContainer, }: PortalProps) => import("react").ReactPortal;
 export {};

package/dist/web/components/common/portal.js

@@ -4,16 +4,22 @@ const layersWithOutsidePointerEventsDisabled = new Set();
 const layersWithOutsideScrollDisabled = new Set();
 let originalBodyPointerEvents;
 let originalBodyOverflow;
-export const Portal = ({ children, type, disableOutsidePointerEvents = false, disableOutsideScroll = false, }) => {
+export const Portal = (_a) => {
+    var _b;
+    var { children, type, disableOutsidePointerEvents = false, disableOutsideScroll = false, portalContainer = (_b = document.getElementById('root')) !== null && _b !== void 0 ? _b : document.body, } = _a;
     const [portalNode, setPortalNode] = useState(null);
+    const container = portalContainer &&
+        Object.prototype.hasOwnProperty.call(portalContainer, 'current')
+        ? portalContainer.current
+        : portalContainer;
     useEffect(() => {
         const element = document.createElement(type);
-        document.body.appendChild(element);
+        container.appendChild(element);
         setPortalNode(element);
         return () => {
-            document.body.removeChild(element);
+            container.removeChild(element);
         };
-    }, [type]);
+    }, [container, type]);
     useEffect(() => {
         if (!portalNode) {
             return;

package/dist/web/components/container/index.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { CommonPropsType } from '../../types';
-export default function Container({ children, title, events, className, style, id, }: PropsType): JSX.Element;
-export interface PropsType extends CommonPropsType {
-    title?: string;
+import type { DataType } from '../../../configs/components/container';
+declare const _default: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<unknown>>;
+export default _default;
+export interface PropsType extends CommonPropsType, DataType {
 }

package/dist/web/components/container/index.js

@@ -1,6 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import classNames from '../../utils/classnames';
 import { emptyObject } from '../../utils/constant';
-export default function Container({ children, title, events = emptyObject, className, style, id, }) {
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+export default React.forwardRef(function Container({ children, title, events = emptyObject, className, style, id, data, }, ref) {
+    useSetWidgetApi(() => {
+        return {
+            data,
+        };
+    }, [data], ref);
     return (_jsx("div", { role: "container", id: id, style: style, className: classNames({ 'weda-ui': true, [className]: className }), title: title, onClick: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onContextMenu: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.longpress) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchStart: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchstart) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchMove: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchmove) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchCancel: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchcancel) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, onTouchEnd: (e) => { var _a; return (_a = events === null || events === void 0 ? void 0 : events.touchend) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e }); }, children: children }));
-}
+});

package/dist/web/components/echart/echart.js

@@ -5,11 +5,13 @@ import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import { usePlatform } from '../../utils/platform';
 let ReactEcharts = null;
+let Echarts = null;
 const getEchartInstance = async () => {
-    if (ReactEcharts)
+    if (ReactEcharts && Echarts)
         return ReactEcharts;
     const { default: _ } = await import(
     /* webpackChunkName: "echarts-for-react" */ 'echarts-for-react');
+    Echarts = await import(/* webpackChunkName: "echarts" */ 'echarts');
     ReactEcharts = _;
 };
 export const Echart = forwardRef(function Echart(props, ref) {
@@ -67,6 +69,7 @@ export const Echart = forwardRef(function Echart(props, ref) {
             setOption,
             setTheme,
             echartsInstance,
+            echarts: Echarts,
         };
     }, [echartsInstance, setOption, setTheme]);
     /**
@@ -75,6 +78,11 @@ export const Echart = forwardRef(function Echart(props, ref) {
      */
     const onChartReadyCallback = (instance) => {
         setEchartsInstance(instance);
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+            var _a;
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.onReady({ echartsInstance: instance, echarts: Echarts });
+        }, 0);
     };
     /**
      * 单击

package/dist/web/components/flow/common/hooks/useFlowConfig.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IWedaPlatformProps } from '../../common';
 import { IUseCommonFlowDataProps } from './useCommonFlowData';
 export interface IUseFlowConfigParams {

package/dist/web/components/flow/modules/basic/Basic.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFlowModulesProps } from '../../common';
 import './Basic.css';
 export declare const Basic: (props: IFlowModulesProps) => JSX.Element;

package/dist/web/components/flow/modules/basic/BasicMobile.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFlowModulesProps } from '../../common';
 import './BasicMobile.css';
 export declare const BasicMobile: (props: IFlowModulesProps) => JSX.Element;

package/dist/web/components/flow/modules/combination/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const ModelFlow: (props: any) => JSX.Element;
 export default ModelFlow;

package/dist/web/components/flow/modules/operations/control.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IWedaPlatformProps } from '../../common';
 import './style.css';
 /** 流程控制组件 */

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/{comment → comments-input}/index.d.ts

@@ -1,11 +1,16 @@
+/**
+ * 审批意见输入组件
+ */
 import React from 'react';
 import './style.css';
 interface IFlowCommentProps {
+    /** 占位符 */
     placeholder?: string;
+    /** 是否是移动端 */
     isH5?: boolean;
-    defaultValue?: IFlowCommentValue;
+    /** 组件值变更事件 */
     onChange?: (value: IFlowCommentValue) => void;
-    bordered?: boolean;
+    /** @ 按钮样式 */
     atButtonStyle?: React.CSSProperties;
 }
 export interface IFlowCommentValue {

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/comments-input/index.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 审批意见输入组件
+ */
+import { useState, useRef } from 'react';
+import { Button, Input } from 'tea-component';
+import { FlowUserSelect } from '../../../components';
+import { useCommentTextareaSelection, useKeyboardEventModel, updateCommentWithUserName, checkHighlight, checkOpinionUserMap, } from './utils';
+import './style.css';
+const { TextArea } = Input;
+export function FlowComment(props) {
+    const { placeholder = '请输入评论，可@通知他人', isH5 = false } = props;
+    const [commentValue, setCommentValue] = useState('');
+    /** 用户弹窗是否显示 */
+    const [userModalVisible, setUserModalVisible] = useState(false);
+    /** 存储同事用户的对象 */
+    const opinionUserMapRef = useRef({});
+    /** 记录上一次的评论内容 */
+    const prevCommentValueRef = useRef('');
+    /** 处理审批意见输入框光标Model */
+    const textAreaSelectionModel = useCommentTextareaSelection();
+    /** 处理键盘事件Model */
+    const keyboardModel = useKeyboardEventModel({
+        commentValue,
+        prevCommentValueRef,
+        isH5,
+        atEvent: onOpenUserSelectModal,
+    });
+    /** 评论内容变更 */
+    const onCommentChange = (value) => {
+        prevCommentValueRef.current = commentValue;
+        setCommentValue(value);
+        handleCommentValueChange(value);
+    };
+    /** 用户选择变更 */
+    const onUserChange = ({ users }) => {
+        let value = isH5 ? '@' : '';
+        users.forEach((user, index) => {
+            const name = `@${user.userName}`;
+            value = `${value + user.userName} `;
+            if (index < users.length - 1) {
+                value = `${value}@`;
+            }
+            if (!opinionUserMapRef.current[user.userId]) {
+                opinionUserMapRef.current[user.userId] = name;
+            }
+        });
+        const { comment, selectionEnd } = updateCommentWithUserName(commentValue, value, textAreaSelectionModel.selectionEndRef.current);
+        setCommentValue(comment);
+        handleCommentValueChange(comment);
+        // 设置完审批意见后设置新的光标位置
+        textAreaSelectionModel.setNewSelectionEnd(selectionEnd);
+    };
+    /** 处理评论内容变更 */
+    const handleCommentValueChange = (comment) => {
+        var _a, _b;
+        if (!comment) {
+            const values = {
+                operationComment: '',
+                opinionUserMap: {},
+                highlightPositionList: '{}',
+            };
+            opinionUserMapRef.current = {};
+            (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values);
+            return;
+        }
+        const { obj: highlightPositionObj } = checkHighlight(comment, opinionUserMapRef.current);
+        const opinionUserMap = checkOpinionUserMap(opinionUserMapRef.current, comment);
+        const newValues = {
+            operationComment: comment,
+            opinionUserMap: opinionUserMap,
+            highlightPositionList: JSON.stringify(highlightPositionObj),
+        };
+        (_b = props === null || props === void 0 ? void 0 : props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, newValues);
+    };
+    function onOpenUserSelectModal() {
+        setUserModalVisible(true);
+        // 打开成员选择弹窗时获取当前光标位置
+        textAreaSelectionModel.getCurrentSelectionEnd();
+    }
+    return (_jsxs("div", { className: "weda-flow-comment", children: [_jsx(TextArea, { size: "full", value: commentValue, onChange: onCommentChange, placeholder: placeholder, onKeyUp: keyboardModel.onKeyUp, ref: textAreaSelectionModel.textAreaRef }), userModalVisible ? (_jsx(FlowUserSelect, { visible: true, multiple: true, onChange: onUserChange, onClose: () => setUserModalVisible(false), defaultValue: [], isH5: props.isH5 })) : null, isH5 ? (_jsx(Button, { type: "link", onClick: onOpenUserSelectModal, style: props.atButtonStyle, children: "@\u67D0\u4EBA" })) : null] }));
+}

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/comments-input/style.css

@@ -0,0 +1,3 @@
+.weda-flow-comment .weda-ui-user-selected {
+  display: none;
+}

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/comments-input/utils.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+/** 处理评论框键盘事件hook */
+export declare function useKeyboardEventModel(params: {
+    commentValue: string;
+    prevCommentValueRef: React.MutableRefObject<string>;
+    isH5: boolean;
+    atEvent: () => void;
+}): {
+    onKeyUp: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+};
+/** 处理审批意见输入框光标hook */
+export declare function useCommentTextareaSelection(): {
+    selectionEndRef: import("react").MutableRefObject<number>;
+    textAreaRef: import("react").MutableRefObject<HTMLTextAreaElement>;
+    getCurrentSelectionEnd: () => void;
+    setNewSelectionEnd: (selectionEnd: number) => void;
+};
+/** 根据选择的用户更新审批意见 */
+export declare function updateCommentWithUserName(currentComment: string, userNames: string, selectionEnd: number): {
+    comment: string;
+    selectionEnd: number;
+};
+/** 检查高亮位置数据 */
+export declare function checkHighlight(text: string, opinionUserMap: Record<string, string>): {
+    res: any[];
+    obj: {};
+};
+/** 检查通知用户Map */
+export declare function checkOpinionUserMap(currentOpinionUserMap: Record<string, string>, commentValue: string): {};

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/comments-input/utils.js

@@ -0,0 +1,106 @@
+import { useRef } from 'react';
+/** 处理评论框键盘事件hook */
+export function useKeyboardEventModel(params) {
+    const { commentValue, isH5, atEvent, prevCommentValueRef } = params;
+    /** 统计'@'符号个数 */
+    const countAtSignal = (currentValue) => {
+        let count1 = 0;
+        let count2 = 0;
+        for (const v of currentValue) {
+            if (v === '@') {
+                count1 += 1;
+            }
+        }
+        for (const v of prevCommentValueRef.current) {
+            if (v === '@') {
+                count2 += 1;
+            }
+        }
+        return count1 === count2;
+    };
+    /** 评论框KeyUp事件 */
+    const onKeyUp = (e) => {
+        // 当shift键与@键同时触发
+        if (!isH5 && e.shiftKey && (e.key === '@' || e.keyCode === 50)) {
+            atEvent === null || atEvent === void 0 ? void 0 : atEvent();
+            return;
+        }
+        // 当shift键与@键未同时触发，对比判断审批意见中@符号数量
+        if (!isH5 && e.keyCode === 50 && !countAtSignal(commentValue)) {
+            atEvent === null || atEvent === void 0 ? void 0 : atEvent();
+        }
+    };
+    return {
+        onKeyUp,
+    };
+}
+/** 处理审批意见输入框光标hook */
+export function useCommentTextareaSelection() {
+    /** 输入框实例对象 */
+    const textAreaRef = useRef();
+    const selectionEndRef = useRef(0);
+    const getCurrentSelectionEnd = () => {
+        var _a;
+        selectionEndRef.current = ((_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.selectionEnd) || 0;
+    };
+    const setNewSelectionEnd = (selectionEnd) => {
+        var _a, _b, _c, _d;
+        selectionEndRef.current = selectionEnd;
+        (_b = (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_d = (_c = textAreaRef.current) === null || _c === void 0 ? void 0 : _c.setSelectionRange) === null || _d === void 0 ? void 0 : _d.call(_c, selectionEnd, selectionEnd);
+    };
+    return {
+        selectionEndRef,
+        textAreaRef,
+        getCurrentSelectionEnd,
+        setNewSelectionEnd,
+    };
+}
+/** 根据选择的用户更新审批意见 */
+export function updateCommentWithUserName(currentComment, userNames, selectionEnd) {
+    const currentCommentArray = currentComment.split('');
+    const userNamesArray = userNames.split('');
+    currentCommentArray.splice(selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0, 0, ...userNamesArray);
+    return {
+        comment: currentCommentArray.join(''),
+        selectionEnd: selectionEnd + userNamesArray.length,
+    };
+}
+/** 检查高亮位置数据 */
+export function checkHighlight(text, opinionUserMap) {
+    const highlightList = Object.values(opinionUserMap);
+    const len = highlightList.length;
+    let v = text;
+    let res = [];
+    // 回显时使用，必须顺序排列
+    let obj = {};
+    for (let i = 0; i < len; i++) {
+        const indexof = v.indexOf(highlightList[i]);
+        const itemLen = highlightList[i].length;
+        if (indexof !== -1) {
+            const endIndex = indexof + itemLen;
+            res.push([indexof, endIndex]);
+            obj[indexof] = endIndex;
+            const fillText = new Array(itemLen).fill(' ').join(''); // 空格填充
+            v = v.substring(0, indexof) + fillText + v.substring(endIndex);
+        }
+    }
+    if (res.length > 0 && v.includes('@')) {
+        // 继续检查剩下文本，是否存在重复@
+        const { res: arr, obj: objCopy } = checkHighlight(v, opinionUserMap);
+        res = res.concat(arr);
+        obj = { ...obj, ...objCopy };
+    }
+    return { res, obj };
+}
+/** 检查通知用户Map */
+export function checkOpinionUserMap(currentOpinionUserMap, commentValue) {
+    const newOpinionUserMap = {};
+    // value每次change后需要再次检查opinionUserMap
+    for (const [id, name] of Object.entries(currentOpinionUserMap)) {
+        if (commentValue.indexOf(name) !== -1) {
+            newOpinionUserMap[id] = name;
+        }
+    }
+    return newOpinionUserMap;
+}

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/drawer-form/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFlowApprovalFormDrawerProps } from './types';
 export * from './types';
 /** 抽屉表单 */

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/drawer-form/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Drawer, Button, Form } from 'tea-component';
 import { FlowPopup, FlowUserSelect } from '../../../components';
 import { FlowField } from '../field';
-import { FlowComment } from '../comment';
+import { FlowComment } from '../comments-input';
 import { useDrawerFormModel } from './view-model';
 const FormComponents = {
     FlowComment,

package/dist/web/components/flow/modules/operations/controls-items/flow-task-info-modal/view-model.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFlowControlItemProps } from '../types';
 /**
  * 下一节点审批人model

package/dist/web/components/flow/modules/operations/controls-items/flow-task-info-modal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFlowControlItemProps } from './types';
 /**
  * 选择下一节点审批人弹窗

package/dist/web/components/flow/modules/operations/controls-items/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AddAssigneeBtn } from './add-assignee-btn';
 import { ApplyCcBtn } from './apply-cc-btn';
 import { ApprovalDrawer } from './approval-drawer';