@ithinkdt/naive
Version:
iThinkDT Naive UI
242 lines (241 loc) • 8.19 kB
JavaScript
import { defineComponent as D, inject as E, ref as s, computed as H, createVNode as e, createTextVNode as d, Fragment as U, h as j, isVNode as O } from "vue";
import { NTabs as P, NTab as I, NSpin as R, NList as L, NListItem as V, NThing as $, NIcon as f, NFlex as T, NTooltip as N, NButton as p, NText as J, NEmpty as W, NPagination as q, NBadge as G } from "ithinkdt-ui";
import { format as X } from "date-fns";
import { until as Y } from "@vueuse/core";
import { useAtomicBroadcast as Z } from "@ithinkdt/common";
import { useModal as K, router as M, openPage as Q, msgHandler as b, $msg as ee } from "@ithinkdt/core";
import { cB as te, cE as le, CSS_MOUNT_ANCHOR_META_NAME as ae, CSS_STYLE_PREFIX as ne } from "@ithinkdt/core/cssr";
import { m as ue, n as oe, e as k, b as re, o as ie } from "./index-CDEm3BS5.js";
function B(n) {
return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !O(n);
}
const _e = /* @__PURE__ */ D({
name: "DtMessage",
setup() {
const n = `${ne}-msg`;
se(n);
const w = E("__INJECTED_AUTH__"), v = E("__INJECTED_THEME__"), c = s("unread"), u = s(0), r = s(0), h = s(!1), o = s([]), m = s(1), g = 10, i = (l, t = g, a = 1) => (h.value = !0, m.value = a, b.loadMessages({
status: l,
pageSize: t,
currentPage: a
}).then((y) => {
l === "unread" ? u.value = y.total : r.value = y.total, t && (o.value = y.records);
}).finally(() => {
h.value = !1;
})), {
start: S
} = Z({
channel: "__dt_mc_shared_channel",
timeout: v.msgInterval || 1e4,
onMsg: (l) => {
u.value = l.totalUnread, r.value = l.totalRead;
},
getMsg: async () => (await i("unread", 0), {
totalUnread: u.value,
totalRead: r.value
})
});
Y(H(() => w.logged && v.hasTopbar)).toBeTruthy().then(S);
const _ = (l) => b.readMessages(l).then(() => {
u.value -= l.length, r.value += l.length;
}), A = (l) => b.deleteMessages(l).then(() => {
ee.success("已删除");
}), {
visible: F,
show: z
} = K({
type: "drawer",
content: {
header: () => e(P, {
value: c.value,
onUpdateValue: x,
size: "small"
}, {
prefix: () => e("div", {
style: "padding-right: 8px"
}, [d("通知")]),
default: () => e(U, null, [e(I, {
name: "unread"
}, {
default: () => [d("未读 ("), u.value, d(")")]
}), e(I, {
name: "read"
}, {
default: () => [d(" 已读 ("), r.value, d(")")]
})])
}),
default: () => {
let l;
return e(R, {
show: h.value
}, {
default: () => [o.value?.length ? e(L, {
clickable: !0,
hoverable: !0,
style: "min-height: 50vh"
}, B(l = o.value.map((t) => e(V, {
onClick: () => {
if (_([t.id]).then(() => {
t.status = "read";
}), t.link) {
if (t.link.startsWith(location.origin) && t.link.slice(location.origin.length).startsWith(M.base)) {
const a = "/" + t.link.slice(Math.max(0, location.origin + M.base));
if (M.resolve(a)) {
Q(a);
return;
}
}
window.open(t.link, "_target");
}
}
}, {
default: () => [e($, {
bordered: !1,
closable: !0,
contentIndented: !0,
size: "small",
onMouseenter: () => t.hover = !0,
onMouseleave: () => t.hover = !1,
style: "padding: 0 4px"
}, {
avatar: () => e(f, {
size: 22,
color: t.status === "unread" ? v.vars.primaryColor : void 0
}, {
default: () => [t.status === "read" ? e(ue, null, null) : e(oe, null, null)]
}),
header: () => t.title,
"header-extra": () => e("div", {
style: "width: 64px"
}, [t.hover ? e(T, {
justify: "end",
onClick: (a) => {
a.preventDefault(), a.stopPropagation();
}
}, {
default: () => [t.status === "unread" ? e(N, null, {
trigger: () => e(p, {
text: !0,
type: "primary",
onClick: () => _([t.id]).then(() => {
t.status = "read";
})
}, {
default: () => [e(f, {
size: 20
}, {
default: () => [e(k, null, null)]
})]
}),
default: () => "标为已读"
}) : void 0, e(N, null, {
trigger: () => e(p, {
text: !0,
type: "error",
onClick: () => A([t.id]).then(() => {
o.value.splice(o.value.findIndex((a) => a.id == t.id), 1);
})
}, {
default: () => [e(f, {
size: 20
}, {
default: () => [e(re, null, null)]
})]
}),
default: () => "移除消息"
})]
}) : void 0]),
default: () => j("div", {
innerHTML: t.content
}),
footer: () => {
let a;
return e(J, {
depth: "3"
}, B(a = X(t.time, "M月d日 HH:mm")) ? a : {
default: () => [a]
});
}
})]
}))) ? l : {
default: () => [l]
}) : e(W, {
style: "margin-top: 30vh"
}, null)]
});
},
footer: () => e(T, {
justify: "space-between",
style: "width: 100%"
}, {
default: () => [c.value === "unread" ? e(p, {
text: !0,
type: "primary",
disabled: o.value.length === 0,
onClick: () => {
const l = o.value.filter((t) => t.status === "unread").map((t) => t.id);
_(l).then(() => {
let t = m.value;
for (; u.value - l.length <= g * (t - 1); )
t--;
i("unread", g, t), i("read", 0);
});
}
}, {
default: () => [e(f, null, {
default: () => [e(k, null, null)]
}), d("标记此页为已读")]
}) : e("span", null, null), e(q, {
simple: !0,
pageSize: 10,
page: m.value,
itemCount: c.value === "unread" ? u.value : r.value,
onUpdatePage: (l) => i(c.value, 10, l)
}, null)]
})
},
width: "400px",
closable: !0,
maskClosable: !0,
bodyContentStyle: {
padding: "0"
}
});
function x(l = "unread") {
c.value = l, F.value || i("read", 0), z(), i(l);
}
return () => e(N, null, {
default: () => "通知",
trigger: () => e(G, {
class: n,
max: 99,
value: u.value,
onClick: () => x(),
offset: [-8, 10]
}, {
default: () => [e(p, {
class: `${n}__btn`,
quaternary: !0,
circle: !0,
size: "large"
}, {
default: () => [e(ie, null, null)]
})]
})
});
}
});
let C;
function se(n) {
C || (C = te("msg", {
cursor: "pointer"
}, [le("btn", {
fontSize: "19px"
})]), C.mount({
id: n,
anchorMetaName: ae
}));
}
export {
_e as DtMessage
};