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