@ibiz-template/vue3-components 0.5.4 → 0.5.7-alpha.0

package/lib/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.cjs

@@ -25,6 +25,9 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
     const isEditable = vue.ref(false);
     const editorRef = vue.ref();
     const editorItems = c.model.editorItems;
+    const isLoading = vue.ref(false);
+    let editorState = "";
+    let funcs;
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover") {
         return true;
@@ -62,7 +65,9 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       });
       return list;
     };
-    c.loadCodeList(props.data).then((codeList) => {
+    const loadCodeList = async () => {
+      isLoading.value = true;
+      const codeList = await c.loadCodeList(props.data);
       isLoadedCodeList.value = true;
       items.value = codeList;
       for (let i = 0; i < items.value.length; i++) {
@@ -73,6 +78,16 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
           break;
         }
       }
+      isLoading.value = false;
+    };
+    vue.watch(() => props.value, async (newVal, oldVal) => {
+      if (newVal || newVal === null) {
+        if (!isLoadedCodeList.value && oldVal === void 0) {
+          await loadCodeList();
+        }
+      }
+    }, {
+      immediate: true
     });
     const setEditable = (flag) => {
       if (flag) {
@@ -146,10 +161,12 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const onFocus = (e) => {
+      editorState = "focus";
       emit("focus", e);
       setEditable(true);
     };
     const onBlur = (e) => {
+      editorState = "blur";
       emit("blur", e);
       setEditable(false);
     };
@@ -165,6 +182,28 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       const list = hasChildren.value ? codeListItems.value : items.value;
       return list.find((item) => item.text === text);
     };
+    const onVisibleChange = async (visible) => {
+      if (visible && !isLoadedCodeList.value) {
+        await loadCodeList();
+        if (hasChildren.value && editorRef.value && editorState !== "outside") {
+          vue.nextTick(() => {
+            editorRef.value.focus();
+          });
+        }
+      }
+    };
+    vue.onMounted(() => {
+      if (editorRef.value) {
+        funcs = vue3Util.useClickOutside(editorRef, async (_evt) => {
+          editorState = "outside";
+        });
+      }
+    });
+    vue.onUnmounted(() => {
+      if (funcs && funcs.stop) {
+        funcs.stop();
+      }
+    });
     return {
       ns,
       c,
@@ -182,7 +221,9 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       getCodeListItem,
       isEditable,
       setEditable,
-      showFormDefaultContent
+      showFormDefaultContent,
+      onVisibleChange,
+      isLoading
     };
   },
   render() {
@@ -201,8 +242,10 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       "multiple": this.c.multiple,
       "placeholder": this.c.placeHolder ? this.c.placeHolder : " ",
       "disabled": this.disabled,
+      "loading": this.isLoading,
       "onBlur": this.onBlur,
       "onFocus": this.onFocus,
+      "onVisibleChange": this.onVisibleChange,
       "props": {
         class: this.customNodeClass
       }
@@ -217,9 +260,11 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       "multiple": this.c.multiple,
       "placeholder": this.c.placeHolder ? this.c.placeHolder : " ",
       "disabled": this.disabled,
+      "loading": this.isLoading,
       "onBlur": this.onBlur,
       "onFocus": this.onFocus,
-      "onKeyup": this.handleKeyUp
+      "onKeyup": this.handleKeyUp,
+      "onVisibleChange": this.onVisibleChange
     }, _isSlot(_slot = this.items.map((item) => {
       return vue.createVNode(vue.resolveComponent("el-option"), {
         "key": item.value,

package/lib/locale/en/index.cjs

@@ -106,7 +106,10 @@ var index = {
       noSupportVideo: "Your browser does not support video tags"
     },
     gridSetting: {
-      hideControl: "Table Column Hide Control"
+      hideControl: "Column selection"
+    },
+    actionToolbar: {
+      more: "More"
     }
   },
   // 编辑器

package/lib/locale/zh-CN/index.cjs

@@ -106,7 +106,10 @@ var index = {
       noSupportVideo: "\u4F60\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301video\u6807\u7B7E"
     },
     gridSetting: {
-      hideControl: "\u8868\u683C\u5217\u9690\u85CF\u63A7\u5236"
+      hideControl: "\u5217\u9009\u62E9"
+    },
+    actionToolbar: {
+      more: "\u66F4\u591A"
     }
   },
   // 编辑器

package/lib/panel-component/user-message/async-action/{async-action.cjs → async-action/async-action.cjs}

@@ -4,7 +4,6 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./async-action.css');
 var lodashEs = require('lodash-es');
-var ramda = require('ramda');
 
 "use strict";
 const stateTexts = {
@@ -48,7 +47,7 @@ const AsyncAction = /* @__PURE__ */ vue.defineComponent({
       return props.message.actionstate;
     });
     const progressText = vue.computed(() => {
-      return ramda.isNil(props.message.completionrate) ? "" : "(".concat(props.message.completionrate, "%)");
+      return !props.message.completionrate ? "" : "(".concat(props.message.completionrate, "%)");
     });
     return {
       ns,
@@ -87,7 +86,7 @@ const AsyncAction = /* @__PURE__ */ vue.defineComponent({
       "type": stateType[this.actionstate]
     }, {
       default: () => [stateTexts[this.actionstate]]
-    })]), this.actionstate === 20 && this.message.completionrate && vue.createVNode("div", {
+    })]), this.actionstate === 20 && !!this.message.completionrate && vue.createVNode("div", {
       "class": this.ns.b("loading-warp")
     }, [vue.createVNode("div", {
       "class": this.ns.be("loading-warp", "inner"),

package/lib/panel-component/user-message/async-action/async-action-tab/async-action-tab.cjs

@@ -0,0 +1,93 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+require('./async-action-tab.css');
+
+"use strict";
+const AsyncActionTab = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAsyncActionTab",
+  props: {
+    showPopover: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: {
+    hiddenPopover: () => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("async-action-tab");
+    const {
+      appStore
+    } = vue3Util.useAppStore();
+    const showHistoryLength = vue.ref(0);
+    const actualMsgs = vue.computed(() => {
+      const showLength = appStore.recentAsyncActions.length + showHistoryLength.value;
+      return appStore.allAsyncActions.filter((_, index) => {
+        return index < showLength;
+      });
+    });
+    const hiddenHistory = () => {
+      showHistoryLength.value = 0;
+    };
+    const showMoreHistory = () => {
+      showHistoryLength.value += 10;
+    };
+    const hiddenPopover = () => {
+      emit("hiddenPopover");
+    };
+    vue.watch(() => props.showPopover, (newVal, oldVal) => {
+      if (newVal !== oldVal && newVal === false) {
+        hiddenHistory();
+      }
+    });
+    return {
+      ns,
+      appStore,
+      actualMsgs,
+      hiddenPopover,
+      hiddenHistory,
+      showMoreHistory
+    };
+  },
+  render() {
+    const restLength = this.appStore.allAsyncActions.length - this.actualMsgs.length;
+    const loadMoreText = this.actualMsgs.length === 0 ? "\u67E5\u770B\u5386\u53F2\uFF08".concat(restLength, "\uFF09") : "\u52A0\u8F7D\u66F4\u591A\uFF08".concat(restLength, "\uFF09");
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [this.actualMsgs.length > 0 && this.actualMsgs.map((msg) => {
+      let provider;
+      try {
+        provider = runtime.getAsyncActionProvider(msg.actiontype);
+      } catch (error) {
+        ibiz.log.error(error);
+      }
+      if (provider) {
+        return vue.h(vue.resolveComponent(provider.component), {
+          class: this.ns.e("item"),
+          onClick: (event) => {
+            const isClose = provider.onClick(msg, event);
+            if (isClose) {
+              this.hiddenPopover();
+            }
+          },
+          message: msg
+        });
+      }
+      return vue.createVNode("div", {
+        "class": this.ns.e("item")
+      }, ["\u5F02\u6B65\u64CD\u4F5C\u7C7B\u578B".concat(msg.actiontype, "\u6682\u672A\u652F\u6301")]);
+    }), this.actualMsgs.length === 0 && vue.createVNode("div", {
+      "class": this.ns.e("nodata")
+    }, [vue.createTextVNode("\u6682\u65E0\u901A\u77E5")]), restLength > 0 && vue.createVNode("div", {
+      "class": this.ns.e("load-more"),
+      "onClick": this.showMoreHistory
+    }, [loadMoreText])]);
+  }
+});
+
+exports.AsyncActionTab = AsyncActionTab;

package/lib/panel-component/user-message/async-action/async-action-tab/async-action-tab.css

@@ -0,0 +1 @@
+.ibiz-async-action-tab{--ibiz-async-action-tab-load-more-height:30px;width:100%;height:100%}.ibiz-async-action-tab__item{min-height:60px;padding:6px 0}.ibiz-async-action-tab__nodata{display:flex;align-items:center;justify-content:center;height:calc(100% - var(--ibiz-async-action-tab-load-more-height))}.ibiz-async-action-tab__load-more{height:var(--ibiz-async-action-tab-load-more-height);line-height:var(--ibiz-async-action-tab-load-more-height);text-align:center}.ibiz-async-action-tab__load-more:hover{color:var(--ibiz-color-primary-hover);cursor:pointer}

package/lib/panel-component/user-message/async-action/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var asyncAction = require('./async-action/async-action.cjs');
+var asyncActionTab = require('./async-action-tab/async-action-tab.cjs');
+var asyncAction_provider = require('./async-action/async-action.provider.cjs');
+
+"use strict";
+
+exports.AsyncAction = asyncAction.AsyncAction;
+exports.AsyncActionTab = asyncActionTab.AsyncActionTab;
+exports.AsyncActionProvider = asyncAction_provider.AsyncActionProvider;

package/lib/panel-component/user-message/index.cjs

@@ -4,17 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
-var asyncAction = require('./async-action/async-action.cjs');
-var asyncAction_provider = require('./async-action/async-action.provider.cjs');
+require('./async-action/index.cjs');
 var userMessage = require('./user-message.cjs');
 var userMessage_provider = require('./user-message.provider.cjs');
+require('./internal-message/index.cjs');
+var asyncAction = require('./async-action/async-action/async-action.cjs');
+var internalMessageDefault = require('./internal-message/internal-message-default/internal-message-default.cjs');
+var asyncAction_provider = require('./async-action/async-action/async-action.provider.cjs');
+var internalMessageDefault_provider = require('./internal-message/internal-message-default/internal-message-default.provider.cjs');
 
 "use strict";
 const IBizUserMessage = vue3Util.withInstall(userMessage.UserMessage, function(v) {
   v.component(userMessage.UserMessage.name, userMessage.UserMessage);
   v.component(asyncAction.AsyncAction.name, asyncAction.AsyncAction);
+  v.component(internalMessageDefault.InternalMessageDefault.name, internalMessageDefault.InternalMessageDefault);
   runtime.registerAsyncActionProvider("DEIMPORTDATA2", () => new asyncAction_provider.AsyncActionProvider());
   runtime.registerAsyncActionProvider("DEFAULT", () => new asyncAction_provider.AsyncActionProvider());
+  runtime.registerInternalMessageProvider(
+    "DEFAULT",
+    () => new internalMessageDefault_provider.InternalMessageDefaultProvider()
+  );
   runtime.registerPanelItemProvider(
     "RAWITEM_USERMESSAGE",
     () => new userMessage_provider.UserMessageProvider()

package/lib/panel-component/user-message/internal-message/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var internalMessageTab = require('./internal-message-tab/internal-message-tab.cjs');
+var internalMessageDefault_provider = require('./internal-message-default/internal-message-default.provider.cjs');
+var internalMessageDefault = require('./internal-message-default/internal-message-default.cjs');
+
+"use strict";
+
+exports.InternalMessageTab = internalMessageTab.InternalMessageTab;
+exports.InternalMessageDefaultProvider = internalMessageDefault_provider.InternalMessageDefaultProvider;
+exports.InternalMessageDefault = internalMessageDefault.InternalMessageDefault;

package/lib/panel-component/user-message/internal-message/internal-message-default/internal-message-default.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./internal-message-default.css');
+
+"use strict";
+const stateTexts = {
+  READ: "\u5DF2\u9605\u8BFB",
+  SENT: "\u5DF2\u53D1\u9001",
+  RECEIVED: "\u5DF2\u63A5\u6536",
+  REPLIED: "\u5DF2\u56DE\u590D",
+  SEND_FAILED: "\u53D1\u9001\u5931\u8D25",
+  NOT_SENT: "\u672A\u53D1\u9001",
+  DELETED: "\u5DF2\u5220\u9664"
+};
+const stateType = {
+  READ: "",
+  SENT: "success",
+  RECEIVED: "success",
+  REPLIED: "warning",
+  SEND_FAILED: "danger",
+  NOT_SENT: "info",
+  DELETED: "info"
+};
+const InternalMessageDefault = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizInternalMessageDefault",
+  props: {
+    message: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("internal-message");
+    const clickable = vue.computed(() => {
+      return props.message.short_content !== props.message.content;
+    });
+    return {
+      ns,
+      clickable
+    };
+  },
+  render() {
+    const {
+      title,
+      create_time,
+      short_content,
+      status
+    } = this.message;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.clickable ? this.ns.m("clickable") : ""]
+    }, [vue.createVNode("div", {
+      "class": this.ns.b("left")
+    }, [vue.createVNode("ion-icon", {
+      "name": "list-outline"
+    }, null)]), vue.createVNode("div", {
+      "class": this.ns.b("center")
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("caption")
+    }, [vue.createVNode(vue.resolveComponent("el-tag"), {
+      "class": this.ns.e("status"),
+      "type": stateType[status]
+    }, {
+      default: () => [stateTexts[status]]
+    }), title]), vue.createVNode("div", {
+      "class": this.ns.e("short-content")
+    }, [short_content]), vue.createVNode("div", {
+      "class": this.ns.e("create-time")
+    }, [create_time])]), vue.createVNode("div", {
+      "class": this.ns.b("toolbar")
+    }, [vue.createVNode("ion-icon", {
+      "class": this.ns.be("toolbar", "button"),
+      "name": "timer-outline",
+      "title": "\u7A0D\u540E\u5904\u7406"
+    }, null), vue.createVNode("ion-icon", {
+      "class": this.ns.be("toolbar", "button"),
+      "name": "checkmark-done-outline",
+      "title": "\u5DF2\u8BFB"
+    }, null)])]);
+  }
+});
+
+exports.InternalMessageDefault = InternalMessageDefault;

package/lib/panel-component/user-message/internal-message/internal-message-default/internal-message-default.css

@@ -0,0 +1 @@
+.ibiz-internal-message{--ibiz-internal-message-loading-warp-bg-color:linear-gradient(90deg, var(--ibiz-color-primary-light-hover), var(--ibiz-color-primary));display:flex;align-items:center;justify-content:space-between;position:relative}.ibiz-internal-message--clickable{cursor:pointer}.ibiz-internal-message:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-internal-message__caption{margin-bottom:8px;font-weight:var(--ibiz-font-weight-bold)}.ibiz-internal-message__short-content{margin-bottom:8px}.ibiz-internal-message__status{margin-right:8px}.ibiz-internal-message:hover .ibiz-internal-message-toolbar{display:block}.ibiz-internal-message-left{flex-grow:0;flex-shrink:0;align-self:flex-start;width:50px;font-size:var(--ibiz-font-size-header-3);text-align:center}.ibiz-internal-message-center{flex-grow:1;width:342px}.ibiz-internal-message-toolbar{position:absolute;top:0;right:0;display:none;padding:8px}.ibiz-internal-message-toolbar__button{margin-left:10px;font-size:16px;cursor:pointer}.ibiz-internal-message-toolbar__button:hover{color:var(--ibiz-color-primary)}

package/lib/panel-component/user-message/internal-message/internal-message-default/internal-message-default.provider.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class InternalMessageDefaultProvider {
+  constructor() {
+    __publicField(this, "component", "IBizInternalMessageDefault");
+  }
+  onClick(_msg, _event) {
+    return false;
+  }
+}
+
+exports.InternalMessageDefaultProvider = InternalMessageDefaultProvider;

package/lib/panel-component/user-message/internal-message/internal-message-tab/internal-message-tab.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+require('./internal-message-tab.css');
+
+"use strict";
+const InternalMessageTab = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizInternalMessageTab",
+  props: {
+    showPopover: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: {
+    hiddenPopover: () => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("internal-message-tab");
+    const hiddenPopover = () => {
+      emit("hiddenPopover");
+    };
+    const allItems = vue.ref([]);
+    const state = vue.reactive({
+      total: 0,
+      curPage: 0,
+      pageSize: 20
+    });
+    const load = async (params) => {
+      const res = await ibiz.internalMessage.fetch({
+        page: 0,
+        size: state.pageSize,
+        ...params
+      });
+      console.log(res);
+      if (res.ok) {
+        if (typeof res.total === "number") {
+          state.total = res.total;
+        }
+        if (typeof res.page === "number") {
+          state.curPage = res.page;
+        }
+        if (state.curPage === 0) {
+          allItems.value = res.data;
+        } else {
+          allItems.value.push(...res.data);
+        }
+      }
+    };
+    const showMore = () => {
+      load({
+        page: state.curPage + 1
+      });
+    };
+    load();
+    return {
+      ns,
+      allItems,
+      state,
+      hiddenPopover,
+      showMore
+    };
+  },
+  render() {
+    const restLength = this.state.total - this.allItems.length;
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [this.allItems.length > 0 && this.allItems.map((msg) => {
+      let provider;
+      try {
+        provider = runtime.getInternalMessageProvider(msg);
+      } catch (error) {
+        ibiz.log.error(error);
+      }
+      if (provider) {
+        return vue.h(vue.resolveComponent(provider.component), {
+          class: this.ns.e("item"),
+          onClick: (event) => {
+            const isClose = provider.onClick(msg, event);
+            if (isClose) {
+              this.hiddenPopover();
+            }
+          },
+          message: msg
+        });
+      }
+      return vue.createVNode("div", {
+        "class": this.ns.e("item")
+      }, ["\u7AD9\u5185\u6D88\u606F\u7C7B\u578B".concat(msg.message_type, "\u6682\u672A\u652F\u6301")]);
+    }), this.allItems.length === 0 && vue.createVNode("div", {
+      "class": this.ns.e("nodata")
+    }, [vue.createTextVNode("\u6682\u65E0\u901A\u77E5")]), restLength > 0 && vue.createVNode("div", {
+      "class": this.ns.e("load-more"),
+      "onClick": this.showMore
+    }, [vue.createTextVNode("\u52A0\u8F7D\u66F4\u591A("), restLength, vue.createTextVNode(")")])]);
+  }
+});
+
+exports.InternalMessageTab = InternalMessageTab;

package/lib/panel-component/user-message/internal-message/internal-message-tab/internal-message-tab.css

@@ -0,0 +1 @@
+.ibiz-internal-message-tab{--ibiz-internal-message-tab-load-more-height:30px;width:100%;height:100%}.ibiz-internal-message-tab__item{min-height:60px;padding:6px 0}.ibiz-internal-message-tab__nodata{display:flex;align-items:center;justify-content:center;height:calc(100% - var(--ibiz-internal-message-tab-load-more-height))}.ibiz-internal-message-tab__load-more{height:var(--ibiz-internal-message-tab-load-more-height);line-height:var(--ibiz-internal-message-tab-load-more-height);text-align:center}.ibiz-internal-message-tab__load-more:hover{color:var(--ibiz-color-primary-hover);cursor:pointer}

package/lib/panel-component/user-message/user-message.cjs

@@ -4,6 +4,9 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 require('./user-message.css');
+var asyncActionTab = require('./async-action/async-action-tab/async-action-tab.cjs');
+require('./internal-message/index.cjs');
+var internalMessageTab = require('./internal-message/internal-message-tab/internal-message-tab.cjs');
 
 "use strict";
 const UserMessage = /* @__PURE__ */ vue.defineComponent({
@@ -26,43 +29,23 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
     const sysImage = props.modelData.sysImage || {
       imagePath: "svg/message.svg"
     };
-    const {
-      appStore
-    } = vue3Util.useAppStore();
-    const showHistoryLength = vue.ref(0);
-    const actualMsgs = vue.computed(() => {
-      const showLength = appStore.recentAsyncActions.length + showHistoryLength.value;
-      return appStore.allAsyncActions.filter((_, index) => {
-        return index < showLength;
-      });
-    });
-    const hiddenHistory = () => {
-      showHistoryLength.value = 0;
-    };
-    const showMoreHistory = () => {
-      showHistoryLength.value += 10;
-    };
     const popoverRef = vue.ref();
     const hiddenPopover = () => {
       popoverRef.value.hide();
     };
+    const noticeNum = vue.ref(12);
     return {
       ns,
       c,
+      noticeNum,
       popoverRef,
       showPopover,
       sysImage,
       currentTab,
-      appStore,
-      actualMsgs,
-      hiddenPopover,
-      hiddenHistory,
-      showMoreHistory
+      hiddenPopover
     };
   },
   render() {
-    const restLength = this.appStore.allAsyncActions.length - this.actualMsgs.length;
-    const loadMoreText = this.actualMsgs.length === 0 ? "\u67E5\u770B\u5386\u53F2\uFF08".concat(restLength, "\uFF09") : "\u52A0\u8F7D\u66F4\u591A\uFF08".concat(restLength, "\uFF09");
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass]
     }, [vue.createVNode(vue.resolveComponent("el-popover"), {
@@ -70,15 +53,20 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
       "popper-class": this.ns.b("popover"),
       "placement": "bottom",
       "trigger": "click",
-      "modelValue": this.showPopover,
-      "onUpdate:modelValue": ($event) => this.showPopover = $event,
-      "onHide": this.hiddenHistory
+      "visible": this.showPopover,
+      "onUpdate:visible": ($event) => this.showPopover = $event
     }, {
       reference: () => {
-        return vue.createVNode(vue.resolveComponent("i-biz-icon"), {
-          "class": [this.ns.e("image")],
-          "icon": this.sysImage
-        }, null);
+        return vue.createVNode(vue.resolveComponent("el-badge"), {
+          "class": this.ns.e("badge"),
+          "value": this.noticeNum,
+          "hidden": this.noticeNum === 0
+        }, {
+          default: () => [vue.createVNode(vue.resolveComponent("i-biz-icon"), {
+            "class": [this.ns.e("image")],
+            "icon": this.sysImage
+          }, null)]
+        });
       },
       default: () => {
         return vue.createVNode(vue.resolveComponent("el-tabs"), {
@@ -90,34 +78,18 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
             "label": "\u901A\u77E5",
             "name": "notification"
           }, {
-            default: () => [this.actualMsgs.length > 0 && this.actualMsgs.map((msg) => {
-              let provider;
-              try {
-                provider = runtime.getAsyncActionProvider(msg.actiontype);
-              } catch (error) {
-                ibiz.log.error(error);
-              }
-              if (provider) {
-                return vue.h(vue.resolveComponent(provider.component), {
-                  class: this.ns.e("notification-item"),
-                  onClick: (event) => {
-                    const isClose = provider.onClick(msg, event);
-                    if (isClose) {
-                      this.hiddenPopover();
-                    }
-                  },
-                  message: msg
-                });
-              }
-              return vue.createVNode("div", {
-                "class": this.ns.e("notification-item")
-              }, ["\u5F02\u6B65\u64CD\u4F5C\u7C7B\u578B".concat(msg.actiontype, "\u6682\u672A\u652F\u6301")]);
-            }), this.actualMsgs.length === 0 && vue.createVNode("div", {
-              "class": this.ns.e("nodata")
-            }, [vue.createTextVNode("\u6682\u65E0\u901A\u77E5")]), restLength > 0 && vue.createVNode("div", {
-              "class": this.ns.e("load-more"),
-              "onClick": this.showMoreHistory
-            }, [loadMoreText])]
+            default: () => [vue.createVNode(internalMessageTab.InternalMessageTab, {
+              "showPopover": this.showPopover,
+              "onHiddenPopover": this.hiddenPopover
+            }, null)]
+          }), vue.createVNode(vue.resolveComponent("el-tab-pane"), {
+            "label": "\u540E\u53F0\u4F5C\u4E1A",
+            "name": "async-action"
+          }, {
+            default: () => [vue.createVNode(asyncActionTab.AsyncActionTab, {
+              "showPopover": this.showPopover,
+              "onHiddenPopover": this.hiddenPopover
+            }, null)]
           })]
         });
       }

package/lib/panel-component/user-message/user-message.css

@@ -1 +1 @@
-.ibiz-user-message{--ibiz-user-message-load-more-height:30px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ibiz-user-message__image{width:28px;height:28px;cursor:pointer}.ibiz-user-message__notification-item{min-height:60px;padding:6px 0}.ibiz-user-message__nodata{display:flex;align-items:center;justify-content:center;height:calc(100% - var(--ibiz-user-message-load-more-height))}.ibiz-user-message__load-more{height:var(--ibiz-user-message-load-more-height);line-height:var(--ibiz-user-message-load-more-height);text-align:center}.ibiz-user-message__load-more:hover{color:var(--ibiz-color-primary-hover);cursor:pointer}.ibiz-user-message-popover{width:500px!important;height:500px!important;--ibiz-user-message-load-more-height:30px}.ibiz-user-message-popover-content{height:100%}.ibiz-user-message-popover-content>.el-tabs__content{height:calc(100% - 55px)}.ibiz-user-message-popover-content>.el-tabs__content>.el-tab-pane{height:100%;overflow:auto}
+.ibiz-user-message{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ibiz-user-message__image{width:28px;height:28px;cursor:pointer}.ibiz-user-message__badge .el-badge__content{top:4px;right:calc(2px + var(--el-badge-size)/ 2);border-width:0}.ibiz-user-message-popover{width:500px!important;height:500px!important}.ibiz-user-message-popover.el-popover{padding-top:2px}.ibiz-user-message-popover-content{height:100%}.ibiz-user-message-popover-content>.el-tabs__content{height:calc(100% - 55px)}.ibiz-user-message-popover-content>.el-tabs__content>.el-tab-pane{height:100%;overflow:auto}