@voplus/morpho-workspace 11.0.2 → 11.0.4

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardActions.d.ts

@@ -0,0 +1,26 @@
+import { NotificationStatus } from "../../../../data/notification-workspace";
+import React from "react";
+/** 次要操作按钮样式（复用主题的 secondary-button） */
+export declare const SECONDARY_ACTION_CLASS = "secondary-button h-8 px-5 text-sm font-bold uppercase";
+/** 主操作按钮样式（复用主题的 primary-button） */
+export declare const PRIMARY_ACTION_CLASS = "primary-button h-8 px-5 text-sm font-bold uppercase";
+export type NotificationAction = "createTask" | "undoDismiss" | "later" | "dismiss";
+/**
+ * 底部操作按钮：样式、顺序、显示条件统一以 index（桌面端）原有写法为准，
+ * 不区分桌面端与移动端。
+ */
+declare const NotificationCardActions: (props: {
+    status: NotificationStatus;
+    className?: string;
+    onCreateTask: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onChangeStatus: (ev: any, status: NotificationStatus) => void;
+    /**
+     * 追加到每个按钮的类名之后，用于自定义按钮样式；不传时沿用默认样式。
+     *
+     * 覆盖默认已设置的属性（高度、内边距、字号等）时**必须**使用 tailwind v4 的尾置 `!`，
+     * 例如 `"h-7! px-3! text-xs!"`。不加 `!` 时 `.h-8` / `.px-5` 会因为排位更靠后而胜出，
+     * 而 `.secondary-button` 属于未分层样式，会压过分层内的普通工具类。
+     */
+    buttonClassName?: string;
+}) => React.JSX.Element;
+export default NotificationCardActions;

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardActions.js

@@ -0,0 +1,34 @@
+import React from "react";
+import classnames from "classnames";
+/** 次要操作按钮样式（复用主题的 secondary-button） */
+export const SECONDARY_ACTION_CLASS = "secondary-button h-8 px-5 text-sm font-bold uppercase";
+/** 主操作按钮样式（复用主题的 primary-button） */
+export const PRIMARY_ACTION_CLASS = "primary-button h-8 px-5 text-sm font-bold uppercase";
+/** 文案与样式只有这一处定义，各端共用 */
+const ACTIONS = {
+    createTask: { label: "Create Task", className: SECONDARY_ACTION_CLASS },
+    undoDismiss: { label: "Undo Dismiss", className: PRIMARY_ACTION_CLASS, next: "Read" },
+    later: { label: "Later", className: SECONDARY_ACTION_CLASS, next: "Later" },
+    dismiss: { label: "Dismiss", className: PRIMARY_ACTION_CLASS, next: "Dismissed" },
+};
+/** 按钮顺序统一沿用 index（桌面端）原有的写法 */
+const ACTION_ORDER = ["createTask", "undoDismiss", "later", "dismiss"];
+/**
+ * 底部操作按钮：样式、顺序、显示条件统一以 index（桌面端）原有写法为准，
+ * 不区分桌面端与移动端。
+ */
+const NotificationCardActions = (props) => {
+    const { status } = props;
+    const visible = {
+        createTask: true,
+        undoDismiss: status === "Dismissed",
+        later: status !== "Later" && status !== "Dismissed",
+        dismiss: status !== "Dismissed",
+    };
+    return (React.createElement("div", { className: classnames("flex items-center gap-2", props.className) }, ACTION_ORDER.filter((action) => visible[action]).map((action) => {
+        const { label, className, next } = ACTIONS[action];
+        return (React.createElement("button", { key: action, className: classnames(className, props.buttonClassName), onClick: (ev) => (next ? props.onChangeStatus(ev, next) : props.onCreateTask(ev)) }, label));
+    })));
+};
+export default NotificationCardActions;
+//# sourceMappingURL=NotificationCardActions.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardActions.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,uCAAuC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,uDAAuD,CAAC;AAE9F,oCAAoC;AACpC,MAAM,CAAC,MAAM,oBAAoB,GAAG,qDAAqD,CAAC;AAI1F,wBAAwB;AACxB,MAAM,OAAO,GAOT;IACH,UAAU,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,sBAAsB,EAAE;IACvE,WAAW,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,EAAE;IACrF,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,IAAI,EAAE,OAAO,EAAE;IAC3E,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,EAAE;CACjF,CAAC;AAEF,+BAA+B;AAC/B,MAAM,YAAY,GAAyB,CAAC,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;AAE7F;;;GAGG;AACH,MAAM,uBAAuB,GAAG,CAAC,KAahC,EAAE,EAAE;IACJ,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,OAAO,GAAwC;QACpD,UAAU,EAAE,IAAI;QAChB,WAAW,EAAE,MAAM,KAAK,WAAW;QACnC,KAAK,EAAE,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,WAAW;QACnD,OAAO,EAAE,MAAM,KAAK,WAAW;KAC/B,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAE,UAAU,CAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,IACpE,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QAChE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;QACnD,OAAO,CACN,gCACC,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,eAAe,CAAC,EACvD,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAEhF,KAAK,CACE,CACT,CAAC;IACH,CAAC,CAAC,CACG,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardContent.d.ts

@@ -0,0 +1,10 @@
+import { IDocumentNotification } from "../../../../data/notification-workspace";
+import React from "react";
+declare const NotificationCardContent: (props: {
+    notification: IDocumentNotification;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    showMirror: boolean;
+    onReadMore: (ev: React.MouseEvent) => void;
+    mobile?: boolean;
+}) => React.JSX.Element;
+export default NotificationCardContent;

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardContent.js

@@ -0,0 +1,27 @@
+import ProseMirrorViewer from "@voplus/morpho-text/es/controls/ProseMirror/Viewer";
+import React from "react";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+const NotificationCardContent = (props) => {
+    const { notification, contentRef, showMirror, onReadMore, mobile } = props;
+    return observe(() => {
+        /** Read More 统一复用主题的 underline-button（移动端原本是个无样式的 div） */
+        const readMore = !showMirror && (React.createElement("button", { className: classnames("underline-button", mobile ? "mt-1" : "mt-3"), onClick: onReadMore }, "Read More ..."));
+        const content = (React.createElement("div", { ref: contentRef, className: classnames(
+            // 展开时不限高，折叠时限定高度
+            mobile
+                ? classnames("bg-bg-table p-3 mt-3 rounded-base [&_.ProseMirror]:text-xs! [&_.ProseMirror]:font-medium!", showMirror
+                    ? "[&_.ProseMirror-container]:max-h-none!"
+                    : "[&_.ProseMirror-container]:max-h-[85px]")
+                : showMirror
+                    ? "text-font-primary [&_.ProseMirror-container]:max-h-none!"
+                    : "bg-bg-blue rounded-lg p-4 border-l-4 border-font-secondary [&_.ProseMirror-container]:max-h-[85px]") },
+            React.createElement(ProseMirrorViewer, { html: notification.content?.content }),
+            mobile && readMore));
+        return mobile ? (content) : (React.createElement("div", { className: "px-5 mt-5" },
+            content,
+            readMore));
+    });
+};
+export default NotificationCardContent;
+//# sourceMappingURL=NotificationCardContent.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardContent.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardContent.tsx"],"names":[],"mappings":"AACA,OAAO,iBAAiB,MAAM,oDAAoD,CAAC;AACnF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,MAAM,uBAAuB,GAAG,CAAC,KAMhC,EAAE,EAAE;IACJ,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE3E,OAAO,OAAO,CAAC,GAAG,EAAE;QACnB,0DAA0D;QAC1D,MAAM,QAAQ,GAAG,CAAC,UAAU,IAAI,CAC/B,gCACC,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EACnE,OAAO,EAAE,UAAU,oBAGX,CACT,CAAC;QAEF,MAAM,OAAO,GAAG,CACf,6BACC,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,UAAU;YACpB,iBAAiB;YACjB,MAAM;gBACL,CAAC,CAAC,UAAU,CACV,2FAA2F,EAC3F,UAAU;oBACT,CAAC,CAAC,wCAAwC;oBAC1C,CAAC,CAAC,yCAAyC,CAC3C;gBACH,CAAC,CAAC,UAAU;oBACZ,CAAC,CAAC,0DAA0D;oBAC5D,CAAC,CAAC,oGAAoG,CACvG;YAED,oBAAC,iBAAiB,IAAC,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,OAAO,GAAI;YACzD,MAAM,IAAI,QAAQ,CACd,CACN,CAAC;QAEF,OAAO,MAAM,CAAC,CAAC,CAAC,CACf,OAAO,CACP,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,WAAW;YACxB,OAAO;YACP,QAAQ,CACJ,CACN,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardFooter.d.ts

@@ -0,0 +1,12 @@
+import { IDocumentNotification, NotificationStatus } from "../../../../data/notification-workspace";
+import React from "react";
+export declare const CREATE_DATE_FORMAT = "DD MMM YYYY | hh:mm A";
+declare const NotificationCardFooter: (props: {
+    notification: IDocumentNotification;
+    onCreateTask: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onChangeStatus: (ev: any, status: NotificationStatus) => void;
+    mobile?: boolean;
+    /** 透传给 NotificationCardActions，用于自定义按钮样式 */
+    buttonClassName?: string;
+}) => React.JSX.Element;
+export default NotificationCardFooter;

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardFooter.js

@@ -0,0 +1,16 @@
+import React from "react";
+import NotificationCardActions from "./NotificationCardActions";
+import { Divider } from "antd";
+import dayjs from "dayjs";
+import { observe } from "@voplus/morpho-ui";
+export const CREATE_DATE_FORMAT = "DD MMM YYYY | hh:mm A";
+const NotificationCardFooter = (props) => {
+    const { notification, onCreateTask, onChangeStatus, mobile } = props;
+    return observe(() => (React.createElement(React.Fragment, null,
+        !mobile && React.createElement(Divider, { className: "mt-7! mb-5! border-border!" }),
+        React.createElement("div", { className: mobile ? "mt-3" : "px-5 flex justify-between" },
+            React.createElement("div", { className: mobile ? "text-font-grey mb-3" : "text-sm text-font-grey font-medium leading-8" }, dayjs.utc(notification.createDate).local().format(CREATE_DATE_FORMAT)),
+            React.createElement(NotificationCardActions, { status: notification.status, onCreateTask: onCreateTask, onChangeStatus: onChangeStatus, className: mobile ? "justify-end" : undefined, buttonClassName: props.buttonClassName })))));
+};
+export default NotificationCardFooter;
+//# sourceMappingURL=NotificationCardFooter.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardFooter.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,uBAAuB,CAAC;AAE1D,MAAM,sBAAsB,GAAG,CAAC,KAO/B,EAAE,EAAE;IACJ,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAErE,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CACpB;QACE,CAAC,MAAM,IAAI,oBAAC,OAAO,IAAC,SAAS,EAAC,4BAA4B,GAAG;QAC9D,6BAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B;YAC5D,6BACC,SAAS,EACR,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,8CAA8C,IAG/E,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CACjE;YACN,oBAAC,uBAAuB,IACvB,MAAM,EAAE,YAAY,CAAC,MAAM,EAC3B,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC7C,eAAe,EAAE,KAAK,CAAC,eAAe,GACrC,CACG,CACJ,CACH,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardHeader.d.ts

@@ -0,0 +1,7 @@
+import { IDocumentNotification } from "../../../../data/notification-workspace";
+import React from "react";
+declare const NotificationCardHeader: (props: {
+    notification: IDocumentNotification;
+    mobile?: boolean;
+}) => React.JSX.Element;
+export default NotificationCardHeader;

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardHeader.js

@@ -0,0 +1,20 @@
+import React from "react";
+import NotificationTag from "../NotificationTag";
+import classnames from "classnames";
+import { getContentTitle, getInitials } from "./useNotificationCard";
+import { observe } from "@voplus/morpho-ui";
+const NotificationCardHeader = (props) => {
+    const { notification, mobile } = props;
+    return observe(() => {
+        const tag = notification.notificationType ? (React.createElement(NotificationTag, { tag: notification.notificationType })) : null;
+        return (React.createElement("div", { className: mobile ? "flex gap-1.5" : "px-5 flex items-start gap-2.5" },
+            React.createElement("div", { className: classnames("bg-blue-profile rounded-base flex items-center justify-center", mobile ? "w-9 h-9" : "w-10 h-10") }, notification.createdBy && (React.createElement("span", { className: classnames("text-font-secondary font-bold", mobile ? "text-sm" : "text-[15px]") }, getInitials(notification.createdBy.name)))),
+            React.createElement("div", { className: mobile ? "text-font-primary font-medium" : "flex-1 min-w-0" },
+                React.createElement("div", { className: mobile ? "text-font-secondary font-bold" : "text-sm font-bold text-font-secondary" }, notification.createdBy?.name),
+                React.createElement("div", { className: mobile ? "mb-2" : "text-sm text-font-primary font-medium" }, getContentTitle(notification.content?.title)),
+                mobile && tag),
+            !mobile && React.createElement("div", null, tag)));
+    });
+};
+export default NotificationCardHeader;
+//# sourceMappingURL=NotificationCardHeader.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardHeader.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/NotificationCardHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,oBAAoB,CAAC;AACjD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,MAAM,sBAAsB,GAAG,CAAC,KAG/B,EAAE,EAAE;IACJ,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEvC,OAAO,OAAO,CAAC,GAAG,EAAE;QACnB,MAAM,GAAG,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAC3C,oBAAC,eAAe,IAAC,GAAG,EAAE,YAAY,CAAC,gBAAgB,GAAI,CACvD,CAAC,CAAC,CAAC,IAAI,CAAC;QAET,OAAO,CACN,6BAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,+BAA+B;YACxE,6BACC,SAAS,EAAE,UAAU,CACpB,+DAA+D,EAC/D,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAChC,IAEA,YAAY,CAAC,SAAS,IAAI,CAC1B,8BACC,SAAS,EAAE,UAAU,CACpB,+BAA+B,EAC/B,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAClC,IAEA,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,CACnC,CACP,CACI;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB;gBAC1E,6BACC,SAAS,EACR,MAAM,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,uCAAuC,IAGlF,YAAY,CAAC,SAAS,EAAE,IAAI,CACxB;gBACN,6BAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,uCAAuC,IACvE,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CACxC;gBAEL,MAAM,IAAI,GAAG,CACT;YACL,CAAC,MAAM,IAAI,iCAAM,GAAG,CAAO,CACvB,CACN,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationMobileCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { NotificationCardProps } from "./index";
+import { NotificationCardProps } from "./types";
 declare const NotificationMobileCard: (props: NotificationCardProps) => React.JSX.Element;
 export default NotificationMobileCard;

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationMobileCard.js

@@ -1,55 +1,17 @@
-import { Button, Space } from "antd";
-import { useNotificationInWorkSpace, } from "../../../../data/notification-workspace";
-import { useAsideContentContext } from "@voplus/morpho-ui/es/components/layout/AsideContent";
-import ProseMirrorViewer from "@voplus/morpho-text/es/controls/ProseMirror/Viewer";
-import React, { useState, useEffect, useRef } from "react";
-import AvatarItem from "@voplus/morpho-org/es/components/AvatarList/AvatarItem";
-import NotificationNewTaskForm from "../../../tasks/components/NotificationNewTaskForm";
-import classnames from "classnames";
-import dayjs from "dayjs";
+import React from "react";
+import NotificationCardContent from "./NotificationCardContent";
+import NotificationCardFooter from "./NotificationCardFooter";
+import NotificationCardHeader from "./NotificationCardHeader";
 import { observe } from "@voplus/morpho-ui";
+import { useNotificationCard } from "./useNotificationCard";
+/** 移动端卡片宽度有限，用一套更小的按钮；`!` 用于覆盖默认已设置的 h-8 / px-5 / text-sm */
+const MOBILE_BUTTON_CLASS = "h-7! px-3! text-xs!";
 const NotificationMobileCard = (props) => {
-    const elementRef = useRef(null);
-    const asideContext = useAsideContentContext();
-    const notification = useNotificationInWorkSpace(props.id);
-    const [showMirror, setShowMirror] = useState(true);
-    useEffect(() => {
-        const measureHeight = () => {
-            if (elementRef.current) {
-                const element = elementRef.current.getElementsByClassName("ProseMirror")[0];
-                if (element?.offsetHeight > 85)
-                    setShowMirror(false);
-            }
-        };
-        measureHeight();
-    }, []);
+    const { notification, contentRef, showMirror, onReadMore, onCreateTask, onChangeStatus } = useNotificationCard(props);
     return observe(() => (React.createElement("div", { className: "notification-card-content mobile", onClick: props.onClick },
-        React.createElement("div", { className: "notification-card-header" },
-            notification.createdBy && React.createElement(AvatarItem, { id: notification.createdBy.id }),
-            React.createElement("div", { className: "notification-title" },
-                React.createElement("div", { className: "notification-name" }, notification.createdBy?.name),
-                React.createElement("div", null, notification.content?.title === "Mention Notification"
-                    ? "mentioned you in ____"
-                    : notification.content?.title),
-                notification.notificationType && (React.createElement("span", { className: "notification-tags" }, notification.notificationType)))),
-        React.createElement("div", { ref: elementRef, className: classnames("notification-content-viewer", { show: showMirror }) },
-            React.createElement(ProseMirrorViewer, { html: notification.content?.content }),
-            !showMirror && (React.createElement("div", { className: "read-more", onClick: () => setShowMirror(true) }, "Read More ..."))),
-        React.createElement("div", { className: "notification-footer" },
-            React.createElement("div", { className: "notification-date" }, dayjs.utc(notification.createDate).local().format("DD MMM YYYY | hh:mm A")),
-            React.createElement("div", { className: "notification-btn" },
-                React.createElement(Space, null,
-                    notification.status !== "Dismissed" && (React.createElement(Button, { className: "btn-task-form", onClick: (ev) => {
-                            ev.stopPropagation();
-                            asideContext.openAside(React.createElement(NotificationNewTaskForm, { showView: true, self: true, title: `Followup ${notification.content.title}`, description: `<div><p>This is a follow-up task of:</p><h3>Notification Content</h3><p>${notification.content.content}</p></div>`, parentId: notification.node?.id, onCancel: () => asideContext?.closeAside() }), { span: 12 });
-                        } }, "Create Task")),
-                    notification.status !== "Dismissed" && (React.createElement(Button, { className: "btn-dismiss", onClick: (ev) => onChangeStatus(ev, "Dismissed") }, "Dismiss")),
-                    notification.status === "Dismissed" && (React.createElement(Button, { className: "btn-unDismiss", onClick: (ev) => onChangeStatus(ev, "Read") }, "Undo Dismiss")),
-                    notification.status !== "Later" && notification.status !== "Dismissed" && (React.createElement(Button, { className: "btn-later", onClick: (ev) => onChangeStatus(ev, "Later") }, "Later"))))))));
-    function onChangeStatus(ev, status) {
-        props.onChangeStatus?.(status);
-        ev.stopPropagation();
-    }
+        React.createElement(NotificationCardHeader, { notification: notification, mobile: true }),
+        React.createElement(NotificationCardContent, { notification: notification, contentRef: contentRef, showMirror: showMirror, onReadMore: onReadMore, mobile: true }),
+        React.createElement(NotificationCardFooter, { notification: notification, onCreateTask: onCreateTask, onChangeStatus: onChangeStatus, buttonClassName: MOBILE_BUTTON_CLASS, mobile: true }))));
 };
 export default NotificationMobileCard;
 //# sourceMappingURL=NotificationMobileCard.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/NotificationMobileCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationMobileCard.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/NotificationMobileCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationMobileCard.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/NotificationMobileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,6DAA6D;AAC7D,MAAM,mBAAmB,GAAG,qBAAqB,CAAC;AAElD,MAAM,sBAAsB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC/D,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,GACvF,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAE5B,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CACpB,6BAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO;QACvE,oBAAC,sBAAsB,IAAC,YAAY,EAAE,YAAY,EAAE,MAAM,SAAG;QAC7D,oBAAC,uBAAuB,IACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,SACL;QACF,oBAAC,sBAAsB,IACtB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,mBAAmB,EACpC,MAAM,SACL,CACG,CACN,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/es/modules/notification-workspace/components/DocumentNotificationCard/index.d.ts

@@ -1,12 +1,5 @@
-import { NotificationStatus } from "../../../../data/notification-workspace";
 import React from "react";
-import "./index.css";
-export type NotificationCardProps = {
-    id: string;
-    active?: boolean;
-    className?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onChangeStatus?: (state: NotificationStatus) => void;
-};
+import { NotificationCardProps } from "./types";
+export type { NotificationCardProps } from "./types";
 declare const DocumentNotificationCard: (props: NotificationCardProps) => React.JSX.Element;
 export default DocumentNotificationCard;

package/es/modules/notification-workspace/components/DocumentNotificationCard/index.js

@@ -1,69 +1,19 @@
-import { useNotificationInWorkSpace, } from "../../../../data/notification-workspace";
 import { useLayout } from "@voplus/morpho-data";
-import { useAsideContentContext } from "@voplus/morpho-ui/es/components/layout/AsideContent";
-import ProseMirrorViewer from "@voplus/morpho-text/es/controls/ProseMirror/Viewer";
-import React, { useState, useEffect, useRef } from "react";
-import NotificationNewTaskForm from "../../../tasks/components/NotificationNewTaskForm";
-import NotificationTag from "../NotificationTag";
+import React from "react";
+import NotificationCardContent from "./NotificationCardContent";
+import NotificationCardFooter from "./NotificationCardFooter";
+import NotificationCardHeader from "./NotificationCardHeader";
 import NotificationMobileCard from "./NotificationMobileCard";
 import classnames from "classnames";
-import dayjs from "dayjs";
 import { observe } from "@voplus/morpho-ui";
-import "./index.css";
+import { useNotificationCard } from "./useNotificationCard";
 const DocumentNotificationCard = (props) => {
-    const elementRef = useRef(null);
     const layout = useLayout();
-    const asideContext = useAsideContentContext();
-    const notification = useNotificationInWorkSpace(props.id);
-    const [showMirror, setShowMirror] = useState(true);
-    useEffect(() => {
-        const measureHeight = () => {
-            if (elementRef.current) {
-                const element = elementRef.current.getElementsByClassName("ProseMirror")[0];
-                if (element?.offsetHeight > 85)
-                    setShowMirror(false);
-            }
-        };
-        measureHeight();
-    }, []);
-    return observe(() => (React.createElement("div", { className: classnames("mb-4 mr-5 ml-5 bg-white rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200 cursor-pointer new-notification-card", props.active ? "shadow-md" : "shadow-xs", { "notification-card mobile": layout.ui.mobile }, { "notification-card-aside": asideContext?.asideContent }) }, layout.ui.mobile ? (React.createElement(NotificationMobileCard, { ...props })) : (React.createElement("div", { className: "p-6 notification-card-content", onClick: props.onClick },
-        React.createElement("div", { className: "flex items-start gap-4" },
-            React.createElement("div", { className: "shrink-0" },
-                React.createElement("div", { className: "w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center" }, notification.createdBy && (React.createElement("span", { className: "text-blue-600 font-bold text-lg" }, setName(notification.createdBy.name))))),
-            React.createElement("div", { className: "flex-1 min-w-0" },
-                React.createElement("div", { className: "flex items-center justify-between mb-2" },
-                    React.createElement("div", { className: "notification-info flex items-center gap-2" },
-                        React.createElement("h3", { className: "createdBy-name font-semibold text-gray-900" }, notification.createdBy?.name),
-                        notification.notificationType && (React.createElement(NotificationTag, { tag: notification.notificationType }))),
-                    React.createElement("div", { className: "flex items-center gap-2" },
-                        React.createElement("button", { className: "px-3 py-1 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors", onClick: onCreateTask }, "Create Task"),
-                        notification.status === "Dismissed" && (React.createElement("button", { className: "px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-200 transition-colors", onClick: (ev) => onChangeStatus(ev, "Read") }, "Undo Dismiss")),
-                        notification.status !== "Later" && notification.status !== "Dismissed" && (React.createElement("button", { className: "px-3 py-1 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors", onClick: (ev) => onChangeStatus(ev, "Later") }, "Later")),
-                        notification.status !== "Dismissed" && (React.createElement("button", { className: "px-3 py-1 bg-blue-100 text-sm font-medium rounded-lg hover:bg-blue-200 transition-colors dismiss-btn", onClick: (ev) => onChangeStatus(ev, "Dismissed") }, "Dismiss")))),
-                React.createElement("div", { className: "text-sm text-gray-600 mb-2" }, notification.content?.title === "Mention Notification"
-                    ? "mentioned you in ____"
-                    : notification.content?.title),
-                React.createElement("div", { ref: elementRef, className: classnames("notification-content-viewer", showMirror
-                        ? "text-gray-700 mb-3"
-                        : "bg-gray-50 rounded-lg p-4 mb-3 border-l-4 border-blue-500", { show: showMirror }) },
-                    React.createElement(ProseMirrorViewer, { html: notification.content?.content })),
-                !showMirror && (React.createElement("button", { className: "read-more text-blue-600 text-sm hover:text-blue-700 font-medium", onClick: () => setShowMirror(true) }, "Read More ...")),
-                React.createElement("div", { className: "text-xs text-gray-500 mt-2" }, dayjs.utc(notification.createDate).local().format("DD MMM YYYY | hh:mm A")))))))));
-    function setName(name) {
-        let str = "";
-        name?.split(" ").forEach((r) => {
-            str += r.substring(0, 1);
-        });
-        return str;
-    }
-    function onCreateTask(ev) {
-        ev.stopPropagation();
-        asideContext.openAside(React.createElement(NotificationNewTaskForm, { showView: true, self: true, title: `Followup ${notification.content.title}`, description: `<div><p>This is a follow-up task of:</p><h3>Notification Content</h3><p>${notification.content.content}</p></div>`, parentId: notification.node?.id, onCancel: () => asideContext?.closeAside() }), { span: 12 });
-    }
-    function onChangeStatus(ev, status) {
-        props.onChangeStatus?.(status);
-        ev.stopPropagation();
-    }
+    const { notification, contentRef, showMirror, onReadMore, onCreateTask, onChangeStatus } = useNotificationCard(props);
+    return observe(() => (React.createElement("div", { className: classnames("mb-4 mr-5 ml-5 bg-white rounded-base border border-border hover:shadow-md transition-shadow duration-200 cursor-pointer new-notification-card", props.active ? "shadow-md" : "shadow-xs", layout.ui.mobile && "text-xs m-3 p-4", { "notification-card mobile": layout.ui.mobile }) }, layout.ui.mobile ? (React.createElement(NotificationMobileCard, { ...props })) : (React.createElement("div", { className: "py-5 notification-card-content", onClick: props.onClick },
+        React.createElement(NotificationCardHeader, { notification: notification }),
+        React.createElement(NotificationCardContent, { notification: notification, contentRef: contentRef, showMirror: showMirror, onReadMore: onReadMore }),
+        React.createElement(NotificationCardFooter, { notification: notification, onCreateTask: onCreateTask, onChangeStatus: onChangeStatus }))))));
 };
 export default DocumentNotificationCard;
 //# sourceMappingURL=index.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAK5D,MAAM,wBAAwB,GAAG,CAAC,KAA4B,EAAE,EAAE;IACjE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,GACvF,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAE5B,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CACpB,6BACC,SAAS,EAAE,UAAU,CACpB,+IAA+I,EAC/I,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EACxC,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,iBAAiB,EACrC,EAAE,0BAA0B,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAChD,IAEA,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,oBAAC,sBAAsB,OAAK,KAAK,GAAI,CACrC,CAAC,CAAC,CAAC,CACH,6BAAK,SAAS,EAAC,gCAAgC,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO;QACrE,oBAAC,sBAAsB,IAAC,YAAY,EAAE,YAAY,GAAI;QACtD,oBAAC,uBAAuB,IACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACrB;QACF,oBAAC,sBAAsB,IACtB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,GAC7B,CACG,CACN,CACI,CACN,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/es/modules/notification-workspace/components/DocumentNotificationCard/{obsolete.d.ts → types.d.ts}

@@ -1,7 +1,5 @@
 import { NotificationStatus } from "../../../../data/notification-workspace";
 import React from "react";
-import "./index.css";
-/** 旧的，测试后没问题 可删 */
 export type NotificationCardProps = {
     id: string;
     active?: boolean;
@@ -9,5 +7,3 @@ export type NotificationCardProps = {
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onChangeStatus?: (state: NotificationStatus) => void;
 };
-declare const DocumentNotificationCard: (props: NotificationCardProps) => React.JSX.Element;
-export default DocumentNotificationCard;

package/es/modules/notification-workspace/components/DocumentNotificationCard/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/types.ts"],"names":[],"mappings":""}

package/es/modules/notification-workspace/components/DocumentNotificationCard/useNotificationCard.d.ts

@@ -0,0 +1,22 @@
+import { IDocumentNotification, NotificationStatus } from "../../../../data/notification-workspace";
+import React from "react";
+import { NotificationCardProps } from "./types";
+/**
+ * DocumentNotificationCard 与 NotificationMobileCard 共用的卡片逻辑：
+ * 通知数据读取、正文折叠状态、Create Task 侧边栏、状态变更回调。
+ *
+ * 注意：这里读到的 notification 是 observable，组件必须在 observe() 回调内
+ * 读取它上面真正要渲染的字段，响应式更新才不会丢。
+ */
+export declare const useNotificationCard: (props: NotificationCardProps) => {
+    notification: IDocumentNotification;
+    showMirror: boolean;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    onReadMore: (ev: React.MouseEvent) => void;
+    onCreateTask: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onChangeStatus: (ev: any, status: NotificationStatus) => void;
+};
+/** 头像占位用的姓名首字母，例如 "Yi Dan" -> "YD" */
+export declare const getInitials: (name?: string) => string;
+/** Mention 通知在列表里不直接展示原标题 */
+export declare const getContentTitle: (title?: string) => string | undefined;

package/es/modules/notification-workspace/components/DocumentNotificationCard/useNotificationCard.js

@@ -0,0 +1,55 @@
+import { useNotificationInWorkSpace, } from "../../../../data/notification-workspace";
+import { useAsideContentContext } from "@voplus/morpho-ui/es/components/layout/AsideContent";
+import React, { useEffect, useRef, useState } from "react";
+import NotificationNewTaskForm from "../../../tasks/components/NotificationNewTaskForm";
+/** 正文高度超过该值时折叠，并显示 Read More */
+const CONTENT_MAX_HEIGHT = 85;
+/**
+ * DocumentNotificationCard 与 NotificationMobileCard 共用的卡片逻辑：
+ * 通知数据读取、正文折叠状态、Create Task 侧边栏、状态变更回调。
+ *
+ * 注意：这里读到的 notification 是 observable，组件必须在 observe() 回调内
+ * 读取它上面真正要渲染的字段，响应式更新才不会丢。
+ */
+export const useNotificationCard = (props) => {
+    const contentRef = useRef(null);
+    const asideContext = useAsideContentContext();
+    const notification = useNotificationInWorkSpace(props.id);
+    const [showMirror, setShowMirror] = useState(true);
+    useEffect(() => {
+        const element = contentRef.current?.getElementsByClassName("ProseMirror")[0];
+        if (element && element.offsetHeight > CONTENT_MAX_HEIGHT)
+            setShowMirror(false);
+    }, []);
+    const onReadMore = (ev) => {
+        ev.stopPropagation();
+        setShowMirror(true);
+    };
+    const onCreateTask = (ev) => {
+        ev.stopPropagation();
+        asideContext.openAside(React.createElement(NotificationNewTaskForm, { showView: true, self: true, title: `Followup ${notification.content.title}`, description: `<div><p>This is a follow-up task of:</p><h3>Notification Content</h3><p>${notification.content.content}</p></div>`, parentId: notification.node?.id, onCancel: () => asideContext?.closeAside() }), { span: 12 });
+    };
+    const onChangeStatus = (ev, status) => {
+        props.onChangeStatus?.(status);
+        ev.stopPropagation();
+    };
+    return {
+        notification,
+        showMirror,
+        contentRef,
+        onReadMore,
+        onCreateTask,
+        onChangeStatus,
+    };
+};
+/** 头像占位用的姓名首字母，例如 "Yi Dan" -> "YD" */
+export const getInitials = (name) => {
+    let str = "";
+    name?.split(" ").forEach((r) => {
+        str += r.substring(0, 1);
+    });
+    return str;
+};
+/** Mention 通知在列表里不直接展示原标题 */
+export const getContentTitle = (title) => title === "Mention Notification" ? "mentioned you in ____" : title;
+//# sourceMappingURL=useNotificationCard.js.map

package/es/modules/notification-workspace/components/DocumentNotificationCard/useNotificationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationCard.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/DocumentNotificationCard/useNotificationCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGN,0BAA0B,GAC1B,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qDAAqD,CAAC;AAC7F,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,uBAAuB,MAAM,mDAAmD,CAAC;AAGxF,gCAAgC;AAChC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA4B,EAAE,EAAE;IACnE,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,sBAAsB,EAAE,CAAC;IAC9C,MAAM,YAAY,GAAG,0BAA0B,CAAC,KAAK,CAAC,EAAE,CAA0B,CAAC;IAEnF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAE/D,CAAC;QACb,IAAI,OAAO,IAAI,OAAO,CAAC,YAAY,GAAG,kBAAkB;YAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAChF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,CAAC,EAAoB,EAAE,EAAE;QAC3C,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,aAAa,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,EAA6C,EAAE,EAAE;QACtE,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,YAAa,CAAC,SAAS,CACtB,oBAAC,uBAAuB,IACvB,QAAQ,QACR,IAAI,QACJ,KAAK,EAAE,YAAY,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,EAC/C,WAAW,EAAE,2EAA2E,YAAY,CAAC,OAAO,CAAC,OAAO,YAAY,EAChI,QAAQ,EAAE,YAAY,CAAC,IAAI,EAAE,EAAE,EAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,GACzC,EACF,EAAE,IAAI,EAAE,EAAE,EAAE,CACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,EAAO,EAAE,MAA0B,EAAE,EAAE;QAC9D,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,CAAC,CAAC;QAC/B,EAAE,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO;QACN,YAAY;QACZ,UAAU;QACV,UAAU;QACV,UAAU;QACV,YAAY;QACZ,cAAc;KACd,CAAC;AACH,CAAC,CAAC;AAEF,sCAAsC;AACtC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAa,EAAE,EAAE;IAC5C,IAAI,GAAG,GAAG,EAAE,CAAC;IACb,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QAC9B,GAAG,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;IACH,OAAO,GAAG,CAAC;AACZ,CAAC,CAAC;AAEF,6BAA6B;AAC7B,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAc,EAAE,EAAE,CACjD,KAAK,KAAK,sBAAsB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC"}

package/es/modules/notification-workspace/components/NotificationTag/index.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 declare const NotificationTag: (props: {
     tag: string;
+    className?: string;
 }) => React.JSX.Element;
 export default NotificationTag;

package/es/modules/notification-workspace/components/NotificationTag/index.js

@@ -2,23 +2,23 @@ import React from "react";
 import classnames from "classnames";
 const NotificationTag = (props) => {
     const { tag } = props;
-    return (React.createElement("span", { className: classnames("px-2 py-1 text-xs font-medium rounded-full", getStatusClasses()) }, tag));
+    return (React.createElement("span", { className: classnames("border text-2xs font-bold tracking-wide rounded-base px-2.5 py-1 whitespace-nowrap uppercase", getStatusClasses(), props.className) }, tag));
     function getStatusClasses() {
         switch (tag) {
             case "Work Notification":
-                return "bg-emerald-100 text-emerald-800";
+                return "border-emerald-200 bg-emerald-100 text-emerald-800";
             case "Form Notification":
-                return "bg-orange-100 text-orange-800";
+                return "border-orange-200 bg-orange-100 text-orange-800";
             case "Quotation Notification":
-                return "bg-purple-100 text-purple-800";
+                return "border-purple-200 bg-purple-100 text-purple-800";
             case "SignEnvelope Notification":
-                return "bg-indigo-100 text-indigo-800";
+                return "border-indigo-200 bg-indigo-100 text-indigo-800";
             case "FormSchema Notification":
-                return "bg-amber-100 text-amber-800";
+                return "border-amber-200 bg-amber-100 text-amber-800";
             case "Task Notification":
-                return "bg-rose-100 text-rose-800";
+                return "border-rose-200 bg-rose-100 text-rose-800";
             default:
-                return "bg-blue-100 text-blue-800";
+                return "border-blue-200 bg-blue-100 text-blue-800";
         }
     }
 };

package/es/modules/notification-workspace/components/NotificationTag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/NotificationTag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,eAAe,GAAG,CAAC,KAAsB,EAAE,EAAE;IAClD,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAEtB,OAAO,CACN,8BAAM,SAAS,EAAE,UAAU,CAAC,4CAA4C,EAAE,gBAAgB,EAAE,CAAC,IAC3F,GAAG,CACE,CACP,CAAC;IAEF,SAAS,gBAAgB;QACxB,QAAQ,GAAG,EAAE,CAAC;YACb,KAAK,mBAAmB;gBACvB,OAAO,iCAAiC,CAAC;YAC1C,KAAK,mBAAmB;gBACvB,OAAO,+BAA+B,CAAC;YACxC,KAAK,wBAAwB;gBAC5B,OAAO,+BAA+B,CAAC;YACxC,KAAK,2BAA2B;gBAC/B,OAAO,+BAA+B,CAAC;YACxC,KAAK,yBAAyB;gBAC7B,OAAO,6BAA6B,CAAC;YACtC,KAAK,mBAAmB;gBACvB,OAAO,2BAA2B,CAAC;YACpC;gBACC,OAAO,2BAA2B,CAAC;QACrC,CAAC;IACF,CAAC;AACF,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modules/notification-workspace/components/NotificationTag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,eAAe,GAAG,CAAC,KAA0C,EAAE,EAAE;IACtE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAEtB,OAAO,CACN,8BACC,SAAS,EAAE,UAAU,CACpB,8FAA8F,EAC9F,gBAAgB,EAAE,EAClB,KAAK,CAAC,SAAS,CACf,IAEA,GAAG,CACE,CACP,CAAC;IAEF,SAAS,gBAAgB;QACxB,QAAQ,GAAG,EAAE,CAAC;YACb,KAAK,mBAAmB;gBACvB,OAAO,oDAAoD,CAAC;YAC7D,KAAK,mBAAmB;gBACvB,OAAO,iDAAiD,CAAC;YAC1D,KAAK,wBAAwB;gBAC5B,OAAO,iDAAiD,CAAC;YAC1D,KAAK,2BAA2B;gBAC/B,OAAO,iDAAiD,CAAC;YAC1D,KAAK,yBAAyB;gBAC7B,OAAO,8CAA8C,CAAC;YACvD,KAAK,mBAAmB;gBACvB,OAAO,2CAA2C,CAAC;YACpD;gBACC,OAAO,2CAA2C,CAAC;QACrD,CAAC;IACF,CAAC;AACF,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/es/modules/tasks/components/SubTaskList/index.js

@@ -7,7 +7,7 @@ import { NodeMenuContext, NodeMenuState, } from "@voplus/morpho-document-core/es
 import { TaskFilter, TaskStatusFilter } from "../../../../controls/filters";
 import { useTaskListEffect, useTaskStore } from "@voplus/morpho-document-core";
 import { ListDataContext, useCreateListDataState, BatchContext, BatchContextState, } from "@voplus/morpho-ui/es/data";
-import { State } from "./state";
+import { State, composeListFilters } from "./state";
 import { faListCheckSolid } from "@voplus/morpho-ui/es/faIcons";
 import { useApplicationContext, useDeepMemo } from "@voplus/morpho-data";
 import { FlagFilter, CreateDateFilter } from "@voplus/morpho-document/es/controls/filters";
@@ -40,13 +40,10 @@ const SubTaskList = ({ header = true, total = true, filterVisible = true, header
     const state = useDeepMemo(() => new State(), [parentId]);
     const menuContext = useMemo(() => new NodeMenuState(props.parentId), [props.parentId]);
     /** 建立 ListView 和useTaskListEffect所需的ListDataState. 会根据parentId重建所以不需reset. */
-    const defaultFilter = parentId
-        ? [{ c: "ParentNodeId", o: "=", l: "And", v1: parentId }]
-        : [];
     const list = useCreateListDataState({
         filterDefaults: {
             includes: "tags,task-number-reports",
-            filters: defaultFilter.concat(props.filters ?? []),
+            filters: composeListFilters(parentId, props.filters),
         },
     }, [parentId, props.filters]);
     const batch = useDeepMemo(() => new BatchContextState(list), [parentId]);