@ibiz-template/vue3-components 0.5.7-alpha.9 → 0.6.0-alpha.2

package/lib/panel-component/user-message/internal-message/common/internal-message-container/internal-message-container.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./internal-message-container.css');
+
+"use strict";
+const InternalMessageContainer = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizInternalMessageContainer",
+  props: {
+    message: {
+      type: Object,
+      required: true
+    },
+    provider: {
+      type: Object,
+      required: true
+    },
+    clickable: {
+      type: Boolean,
+      default: void 0
+    },
+    toolbarItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: {
+    toolbarClick: (_key) => true,
+    close: () => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("internal-message-container");
+    const isUnread = vue.computed(() => {
+      return props.message.status === "RECEIVED";
+    });
+    const finalToolbarItems = vue.computed(() => {
+      const toolbarItems = [...props.toolbarItems];
+      if (isUnread.value) {
+        toolbarItems.push({
+          key: "read",
+          icon: "checkmark-done-outline",
+          tooltip: "\u6807\u8BB0\u4E3A\u5DF2\u8BFB"
+        });
+      }
+      return toolbarItems;
+    });
+    const onToolbarClick = (event, key) => {
+      event.stopPropagation();
+      if (key === "read") {
+        ibiz.hub.notice.internalMessage.markRead(props.message);
+      } else {
+        emit("toolbarClick", key);
+      }
+    };
+    const isClickable = vue.computed(() => {
+      if (props.clickable === void 0) {
+        return ibiz.env.isMob ? !!props.message.mobile_url : !!props.message.url;
+      }
+      return props.clickable;
+    });
+    const onClick = async (event) => {
+      if (isClickable.value && props.provider.onClick) {
+        const isClose = await props.provider.onClick(props.message, event);
+        if (isClose) {
+          emit("close");
+        }
+      }
+    };
+    return {
+      ns,
+      isUnread,
+      isClickable,
+      finalToolbarItems,
+      onToolbarClick,
+      onClick
+    };
+  },
+  render() {
+    var _a, _b;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.isClickable ? this.ns.m("clickable") : "", this.isUnread ? this.ns.m("unread") : ""],
+      "onClick": this.onClick
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), vue.createVNode("div", {
+      "class": this.ns.b("toolbar")
+    }, [this.finalToolbarItems.map((item) => {
+      return vue.createVNode("ion-icon", {
+        "class": this.ns.be("toolbar", "button"),
+        "name": item.icon,
+        "title": item.tooltip,
+        "onClick": (e) => this.onToolbarClick(e, item.key)
+      }, null);
+    })]), vue.createVNode("div", {
+      "class": this.ns.e("unread-tag")
+    }, null)]);
+  }
+});
+
+exports.InternalMessageContainer = InternalMessageContainer;

package/lib/panel-component/user-message/internal-message/common/internal-message-container/internal-message-container.css

@@ -0,0 +1 @@
+.ibiz-internal-message-container{position:relative}.ibiz-internal-message-container--clickable{cursor:pointer}.ibiz-internal-message-container:hover .ibiz-internal-message-container-toolbar{display:block}.ibiz-internal-message-container__unread-tag{position:absolute;top:8px;right:8px;display:none;align-self:flex-start;width:10px;height:10px;background-color:var(--ibiz-color-danger);border-radius:50%}.ibiz-internal-message-container--unread .ibiz-internal-message-container__unread-tag{display:block}.ibiz-internal-message-container--unread:hover .ibiz-internal-message-container__unread-tag{display:none}.ibiz-internal-message-container-toolbar{position:absolute;top:0;right:0;display:none;padding:8px}.ibiz-internal-message-container-toolbar__button{margin-left:10px;font-size:16px;cursor:pointer}.ibiz-internal-message-container-toolbar__button:hover{color:var(--ibiz-color-primary)}

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

@@ -0,0 +1,83 @@
+'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
+    },
+    provider: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup() {
+    const ns = vue3Util.useNamespace("internal-message");
+    return {
+      ns
+    };
+  },
+  render() {
+    const {
+      title,
+      create_time,
+      content: msgContent,
+      status
+    } = this.message;
+    const content = vue.createVNode("div", {
+      "class": this.ns.e("short-content")
+    }, [msgContent]);
+    return vue.createVNode(vue.resolveComponent("iBizInternalMessageContainer"), {
+      "class": [this.ns.b()],
+      "message": this.message,
+      "provider": this.provider,
+      "onClose": () => this.$emit("close")
+    }, {
+      default: () => [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]), content, vue.createVNode("div", {
+        "class": this.ns.e("create-time")
+      }, [create_time])])]
+    });
+  }
+});
+
+exports.InternalMessageDefault = InternalMessageDefault;

package/lib/panel-component/user-message/internal-message/common/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}.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-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}

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

@@ -0,0 +1,68 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
+var vue = require('vue');
+var internalMessageDefault = require('./internal-message-default.cjs');
+
+"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", internalMessageDefault.InternalMessageDefault);
+  }
+  render(props) {
+    return vue.h(this.component, {
+      provider: this,
+      ...props
+    });
+  }
+  async onClick(message, _event) {
+    await ibiz.hub.notice.internalMessage.markRead(message);
+    const redirectUrl = ibiz.env.isMob ? message.mobile_url : message.url;
+    if (redirectUrl) {
+      this.openRedirectView(message, redirectUrl);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * 解析url并打开对应视图，打开视图前会先标记已读
+   * @author lxm
+   * @date 2024-02-02 11:56:07
+   * @param {IInternalMessage} msg
+   * @param {string} redirectUrl
+   * @return {*}  {Promise<void>}
+   */
+  async openRedirectView(msg, redirectUrl) {
+    await ibiz.hub.notice.internalMessage.markRead(msg);
+    let viewId = "";
+    const params = {};
+    const url = new URL(redirectUrl);
+    if (url.searchParams.size > 0) {
+      url.searchParams.forEach((value, _key) => {
+        params[_key] = value;
+      });
+    }
+    const rdTagItems = url.pathname.replace("//", "").split("/");
+    const [appOrViewTag, viewTag] = rdTagItems;
+    if (viewTag) {
+      viewId = viewTag;
+    } else {
+      viewId = appOrViewTag;
+    }
+    ibiz.commands.execute(
+      runtime.OpenAppViewCommand.TAG,
+      viewId,
+      core.IBizContext.create({}),
+      params
+    );
+  }
+}
+
+exports.InternalMessageDefaultProvider = InternalMessageDefaultProvider;

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

@@ -1,15 +1,41 @@
 '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');
+var runtime = require('@ibiz-template/runtime');
+var internalMessageDefault_provider = require('./common/internal-message-default/internal-message-default.provider.cjs');
+var internalMessageDefault = require('./common/internal-message-default/internal-message-default.cjs');
 var internalMessageJson_provider = require('./internal-message-json/internal-message-json.provider.cjs');
 var internalMessageJson = require('./internal-message-json/internal-message-json.cjs');
+var internalMessageContainer = require('./common/internal-message-container/internal-message-container.cjs');
+var internalMessageHtml = require('./internal-message-html/internal-message-html.cjs');
+var internalMessageHtml_provider = require('./internal-message-html/internal-message-html.provider.cjs');
+var internalMessageText_provider = require('./internal-message-text/internal-message-text.provider.cjs');
+var internalMessageText = require('./internal-message-text/internal-message-text.cjs');
+var internalMessageTab = require('./internal-message-tab/internal-message-tab.cjs');
 
 "use strict";
+function installInternalMessage(v) {
+  v.component(internalMessageContainer.InternalMessageContainer.name, internalMessageContainer.InternalMessageContainer);
+  v.component(internalMessageDefault.InternalMessageDefault.name, internalMessageDefault.InternalMessageDefault);
+  v.component(internalMessageJson.InternalMessageJSON.name, internalMessageJson.InternalMessageJSON);
+  v.component(internalMessageHtml.InternalMessageHTML.name, internalMessageHtml.InternalMessageHTML);
+  v.component(internalMessageText.InternalMessageText.name, internalMessageText.InternalMessageText);
+  runtime.registerInternalMessageProvider(
+    "DEFAULT",
+    () => new internalMessageDefault_provider.InternalMessageDefaultProvider()
+  );
+  runtime.registerInternalMessageProvider(
+    "JSON",
+    () => new internalMessageJson_provider.InternalMessageJSONtProvider()
+  );
+  runtime.registerInternalMessageProvider(
+    "HTML",
+    () => new internalMessageHtml_provider.InternalMessageHTMLtProvider()
+  );
+  runtime.registerInternalMessageProvider(
+    "TEXT",
+    () => new internalMessageText_provider.InternalMessageTextProvider()
+  );
+}
 
 exports.InternalMessageTab = internalMessageTab.InternalMessageTab;
-exports.InternalMessageDefaultProvider = internalMessageDefault_provider.InternalMessageDefaultProvider;
-exports.InternalMessageDefault = internalMessageDefault.InternalMessageDefault;
-exports.InternalMessageJSONtProvider = internalMessageJson_provider.InternalMessageJSONtProvider;
-exports.InternalMessageJSON = internalMessageJson.InternalMessageJSON;
+exports.installInternalMessage = installInternalMessage;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./internal-message-html.css');
+
+"use strict";
+const InternalMessageHTML = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizInternalMessageHTML",
+  props: {
+    message: {
+      type: Object,
+      required: true
+    },
+    provider: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup() {
+    const ns = vue3Util.useNamespace("internal-message-html");
+    return {
+      ns
+    };
+  },
+  render() {
+    return vue.createVNode(vue.resolveComponent("iBizInternalMessageContainer"), {
+      "class": [this.ns.b()],
+      "message": this.message,
+      "provider": this.provider,
+      "onClose": () => this.$emit("close")
+    }, {
+      default: () => [vue.createVNode("div", {
+        "class": this.ns.e("content"),
+        "innerHTML": this.message.content
+      }, null)]
+    });
+  }
+});
+
+exports.InternalMessageHTML = InternalMessageHTML;

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

@@ -0,0 +1 @@
+.ibiz-internal-message-html{display:flex;flex-flow:column nowrap}.ibiz-internal-message-html__content{flex-grow:1}

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var internalMessageHtml = require('./internal-message-html.cjs');
+require('../common/index.cjs');
+var internalMessageDefault_provider = require('../common/internal-message-default/internal-message-default.provider.cjs');
+
+"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 InternalMessageHTMLtProvider extends internalMessageDefault_provider.InternalMessageDefaultProvider {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "component", internalMessageHtml.InternalMessageHTML);
+  }
+  async onClick(message, event) {
+    const result = await super.onClick(message, event);
+    if (!result && message.content_type === "JSON" && message.content) {
+      const json = JSON.parse(message.content);
+      if (json.redirecturl) {
+        this.openRedirectView(message, json.redirecturl);
+        return true;
+      }
+    }
+    return true;
+  }
+}
+
+exports.InternalMessageHTMLtProvider = InternalMessageHTMLtProvider;

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

@@ -5,6 +5,9 @@ var vue3Util = require('@ibiz-template/vue3-util');
 require('./internal-message-json.css');
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
 const InternalMessageJSON = /* @__PURE__ */ vue.defineComponent({
   name: "IBizInternalMessageJSON",
   props: {
@@ -25,28 +28,38 @@ const InternalMessageJSON = /* @__PURE__ */ vue.defineComponent({
   }) {
     const ns = vue3Util.useNamespace("internal-message-json");
     const jsonContent = vue.computed(() => {
-      if (props.message.short_content && props.message.content_type === "JSON") {
-        return JSON.parse(props.message.short_content);
+      if (props.message.content && props.message.content_type === "JSON") {
+        return JSON.parse(props.message.content);
       }
       return null;
     });
-    const clickable = vue.computed(() => {
+    const redirectUrl = vue.computed(() => {
       var _a;
-      return !!((_a = jsonContent.value) == null ? void 0 : _a.redirecturl);
+      const url = ibiz.env.isMob ? props.message.mobile_url : props.message.url;
+      return url || ((_a = jsonContent.value) == null ? void 0 : _a.redirecturl);
     });
-    const onClick = async (event) => {
-      if (props.provider.onClick) {
-        const isClose = await props.provider.onClick(props.message, event);
-        if (isClose) {
-          emit("close");
-        }
+    const toolbarItems = vue.computed(() => {
+      if (!redirectUrl.value) {
+        return void 0;
+      }
+      return [{
+        icon: "link-outline",
+        key: "openRedirectView",
+        tooltip: "\u8DF3\u8F6C\u5230\u89C6\u56FE"
+      }];
+    });
+    const onToolbarClick = (key) => {
+      if (key === "openRedirectView") {
+        props.provider.openRedirectView(props.message, redirectUrl.value);
+        emit("close");
       }
     };
     return {
       ns,
-      clickable,
       jsonContent,
-      onClick
+      toolbarItems,
+      redirectUrl,
+      onToolbarClick
     };
   },
   render() {
@@ -60,22 +73,19 @@ const InternalMessageJSON = /* @__PURE__ */ vue.defineComponent({
     } else {
       content = vue.createVNode("div", {
         "class": this.ns.e("content")
-      }, [vue.createTextVNode("\u6570\u636E\u7684short_content\u91CC\u7F3A\u5C11html")]);
+      }, [vue.createTextVNode("\u6570\u636E\u7684content\u91CC\u7F3A\u5C11html")]);
     }
-    return vue.createVNode("div", {
-      "class": [this.ns.b(), this.clickable ? this.ns.m("clickable") : ""],
-      "onClick": this.onClick
-    }, [content, 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)])]);
+    return vue.createVNode(vue.resolveComponent("iBizInternalMessageContainer"), {
+      "class": [this.ns.b()],
+      "message": this.message,
+      "provider": this.provider,
+      "clickable": !!this.redirectUrl,
+      "toolbarItems": this.toolbarItems,
+      "onToolbarClick": this.onToolbarClick,
+      "onClose": () => this.$emit("close")
+    }, _isSlot(content) ? content : {
+      default: () => [content]
+    });
   }
 });
 

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

@@ -1 +1 @@
-.ibiz-internal-message-json{display:flex;flex-flow:column nowrap;position:relative}.ibiz-internal-message-json--clickable{cursor:pointer}.ibiz-internal-message-json__content{flex-grow:1}.ibiz-internal-message-json-toolbar{position:absolute;top:0;right:0;display:none;padding:8px}.ibiz-internal-message-json-toolbar__button{margin-left:10px;font-size:16px;cursor:pointer}.ibiz-internal-message-json-toolbar__button:hover{color:var(--ibiz-color-primary)}
+.ibiz-internal-message-json{display:flex;flex-flow:column nowrap}.ibiz-internal-message-json__content{flex-grow:1}

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

@@ -1,9 +1,8 @@
 'use strict';
 
-var core = require('@ibiz-template/core');
-var runtime = require('@ibiz-template/runtime');
-var vue = require('vue');
 var internalMessageJson = require('./internal-message-json.cjs');
+require('../common/index.cjs');
+var internalMessageDefault_provider = require('../common/internal-message-default/internal-message-default.provider.cjs');
 
 "use strict";
 var __defProp = Object.defineProperty;
@@ -12,45 +11,21 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-class InternalMessageJSONtProvider {
+class InternalMessageJSONtProvider extends internalMessageDefault_provider.InternalMessageDefaultProvider {
   constructor() {
+    super(...arguments);
     __publicField(this, "component", internalMessageJson.InternalMessageJSON);
   }
-  render(props) {
-    return vue.h(this.component, {
-      provider: this,
-      ...props
-    });
-  }
-  async onClick(msg, _event) {
-    if (msg.content_type === "JSON" && msg.short_content) {
-      const json = JSON.parse(msg.short_content);
+  async onClick(message, event) {
+    const result = await super.onClick(message, event);
+    if (!result && message.content_type === "JSON" && message.content) {
+      const json = JSON.parse(message.content);
       if (json.redirecturl) {
-        let viewId = "";
-        const params = {};
-        const url = new URL(json.redirecturl);
-        if (url.searchParams.size > 0) {
-          url.searchParams.forEach((value, _key) => {
-            params[_key] = value;
-          });
-        }
-        const rdTagItems = url.pathname.replace("//", "").split("/");
-        const [appOrViewTag, viewTag] = rdTagItems;
-        if (viewTag) {
-          viewId = viewTag;
-        } else {
-          viewId = appOrViewTag;
-        }
-        ibiz.commands.execute(
-          runtime.OpenAppViewCommand.TAG,
-          viewId,
-          core.IBizContext.create({}),
-          params
-        );
+        this.openRedirectView(message, json.redirecturl);
         return true;
       }
     }
-    return false;
+    return true;
   }
 }
 

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

@@ -30,10 +30,25 @@ const InternalMessageTab = /* @__PURE__ */ vue.defineComponent({
       emit("hiddenPopover");
     };
     const c = props.controller;
+    const hasNotice = vue.ref(false);
+    ibiz.mc.command.internalMessage.on(async (msg) => {
+      ibiz.log.debug("mqtt internalMessage: ", msg);
+      if (msg.subtype === "INTERNALMESSAGE") {
+        hasNotice.value = true;
+      }
+    });
+    vue.watch(() => props.showPopover, (newVal) => {
+      if (newVal && hasNotice.value) {
+        c.load();
+        c.refreshUnreadCount();
+        hasNotice.value = false;
+      }
+    });
     const allItems = vue.ref([]);
     const state = vue.reactive({
       total: 0,
-      pageSize: 0
+      pageSize: 0,
+      unreadOnly: c.unreadOnly
     });
     const updateData = () => {
       allItems.value = ramda.clone(c.messages);
@@ -41,22 +56,36 @@ const InternalMessageTab = /* @__PURE__ */ vue.defineComponent({
       state.pageSize = c.size;
     };
     updateData();
+    const updateUnreadOnlyChange = (val) => {
+      state.unreadOnly = val;
+    };
     c.evt.on("dataChange", updateData);
+    c.evt.on("unreadOnlyChange", updateUnreadOnlyChange);
+    vue.onUnmounted(() => {
+      c.evt.off("dataChange", updateData);
+      c.evt.off("unreadOnlyChange", updateUnreadOnlyChange);
+    });
     const showMore = () => {
       c.loadMore();
     };
+    const switchChange = () => {
+      c.toggleUnReadOnly();
+    };
     return {
       ns,
       allItems,
       state,
       hiddenPopover,
-      showMore
+      showMore,
+      switchChange
     };
   },
   render() {
     const restLength = this.state.total - this.allItems.length;
     return vue.createVNode("div", {
       "class": [this.ns.b()]
+    }, [vue.createVNode("div", {
+      "class": this.ns.b("content")
     }, [this.allItems.length > 0 && this.allItems.map((msg) => {
       let provider;
       try {
@@ -66,20 +95,26 @@ const InternalMessageTab = /* @__PURE__ */ vue.defineComponent({
       }
       if (provider) {
         return provider.render({
-          class: this.ns.e("item"),
+          class: [this.ns.e("item")],
           message: msg,
           onClose: this.hiddenPopover
         });
       }
       return vue.createVNode("div", {
         "class": this.ns.e("item")
-      }, ["\u7AD9\u5185\u6D88\u606F\u7C7B\u578B".concat(msg.message_type, "\u6682\u672A\u652F\u6301")]);
+      }, ["\u7AD9\u5185\u6D88\u606F\u7C7B\u578B".concat(msg.content_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(")")])]);
+    }, [vue.createTextVNode("\u52A0\u8F7D\u66F4\u591A("), restLength, vue.createTextVNode(")")])]), vue.createVNode("div", {
+      "class": this.ns.b("footer")
+    }, [vue.createVNode(vue.resolveComponent("el-switch"), {
+      "value": this.state.unreadOnly,
+      "onChange": this.switchChange,
+      "class": this.ns.be("footer", "switch")
+    }, null), " ", vue.createTextVNode("\u53EA\u663E\u793A\u672A\u8BFB")])]);
   }
 });
 

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

@@ -1 +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:var(--ibiz-spacing-tight)}.ibiz-internal-message-tab__item:hover{background-color:var(--ibiz-color-fill-1)}.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}
+.ibiz-internal-message-tab{--ibiz-internal-message-tab-load-more-height:30px;--ibiz-internal-message-tab-footer-height:48px;width:100%;height:100%}.ibiz-internal-message-tab__item{min-height:60px;padding:var(--ibiz-spacing-tight)}.ibiz-internal-message-tab__item:hover{background-color:var(--ibiz-color-fill-1)}.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}.ibiz-internal-message-tab-content{height:calc(100% - var(--ibiz-internal-message-tab-footer-height));padding-bottom:12px;overflow:auto}.ibiz-internal-message-tab-footer{display:flex;align-items:center;justify-content:flex-start;height:var(--ibiz-internal-message-tab-footer-height);border-top:1px solid var(--ibiz-color-border)}.ibiz-internal-message-tab-footer__switch{margin-right:8px}