message-templates-vue
Version:
A flexible Vue 3 component library for rendering various platform message templates (WeChat, Xiaohongshu, Douyin, etc.)
237 lines (236 loc) • 9.84 kB
JavaScript
import { defineComponent as w, computed as f, createElementBlock as p, openBlock as v, normalizeStyle as C, normalizeClass as j, createElementVNode as i, unref as g, toDisplayString as d } from "vue";
const l = {
avatar: "https://gnlab.com/assets/scene/icons/person.png",
link: "https://gnlab.com/assets/scene/icons/link.png"
}, M = (r) => {
var a, n, c, m, o, t, _, h, y, k, b;
const s = {
type: "text",
content: ""
};
try {
const u = typeof r.wechat_data == "string" ? JSON.parse(r.wechat_data) : r.wechat_data, { wechat_type: F } = r, e = (u == null ? void 0 : u.content) || {};
switch (F) {
case 0:
s.type = "emoji", s.url = (r == null ? void 0 : r.file_url) || "";
break;
case 1:
case 2:
s.type = "link", s.content = (e == null ? void 0 : e.title) || "", s.desc = (e == null ? void 0 : e.desc) || "", s.url = (e == null ? void 0 : e.url) || "", s.avatar = (e == null ? void 0 : e.image_url) || l.link;
break;
case 100:
s.type = "link", s.content = ((a = e == null ? void 0 : e.link) == null ? void 0 : a.title) || "", s.desc = ((n = e == null ? void 0 : e.link) == null ? void 0 : n.des) || "", s.url = ((c = e == null ? void 0 : e.link) == null ? void 0 : c.url) || "", s.avatar = ((m = e == null ? void 0 : e.link) == null ? void 0 : m.thumb_url) || l.link;
break;
case 3:
s.type = "videonum", s.content = (e == null ? void 0 : e.nickname) || "", s.desc = (e == null ? void 0 : e.desc) || "", s.url = (e == null ? void 0 : e.cover_url) || "", s.avatar = (e == null ? void 0 : e.avatar) || l.avatar;
break;
case 102:
s.type = "videonum", s.content = ((o = e == null ? void 0 : e.finder_feed) == null ? void 0 : o.name) || "", s.desc = "", s.url = ((t = e == null ? void 0 : e.finder_feed) == null ? void 0 : t.thumb) || "", s.avatar = ((_ = e == null ? void 0 : e.finder_feed) == null ? void 0 : _.avatar) || l.avatar;
break;
case 4:
s.type = "miniprogram", s.content = (e == null ? void 0 : e.appname) || "", s.desc = (e == null ? void 0 : e.title) || "", s.url = (u == null ? void 0 : u.file_path) || "", s.avatar = (e == null ? void 0 : e.appicon) || l.avatar;
break;
case 101:
s.type = "miniprogram", s.content = ((h = e == null ? void 0 : e.miniprogram) == null ? void 0 : h.show_name) || "", s.desc = ((y = e == null ? void 0 : e.miniprogram) == null ? void 0 : y.title) || "", s.url = ((k = e == null ? void 0 : e.miniprogram) == null ? void 0 : k.cover_url) || "", s.avatar = ((b = e == null ? void 0 : e.miniprogram) == null ? void 0 : b.icon_url) || l.avatar;
break;
case 5:
s.type = "location", s.content = (e == null ? void 0 : e.title) || "", s.desc = (e == null ? void 0 : e.address) || "", s.url = `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${(e == null ? void 0 : e.longitude) || 0}&pointy=${(e == null ? void 0 : e.latitude) || 0}&name=${(e == null ? void 0 : e.title) || ""}&addr=${(e == null ? void 0 : e.address) || ""}`;
break;
case 6:
s.type = "emoji", s.url = (e == null ? void 0 : e.url) || "";
break;
case 7:
s.type = "card", s.content = (e == null ? void 0 : e.nickname) || "", s.avatar = (e == null ? void 0 : e.avatar) || l.avatar;
break;
default:
e != null && e.text || e != null && e.content ? (s.type = "text", s.content = (e == null ? void 0 : e.text) || (e == null ? void 0 : e.content) || "") : e != null && e.url && (e != null && e.url.includes("http") || e != null && e.url.includes("://")) ? (s.type = "link", s.content = (e == null ? void 0 : e.title) || (e == null ? void 0 : e.text) || "链接", s.url = e == null ? void 0 : e.url, s.avatar = (e == null ? void 0 : e.image_url) || l.link) : (s.type = "text", s.content = (e == null ? void 0 : e.text) || (e == null ? void 0 : e.content) || "未知消息类型");
}
} catch (u) {
console.error("Failed to parse WeChat message:", u), s.type = "text", s.content = "消息解析失败";
}
return s;
}, $ = (r) => ({
type: "text",
content: ""
}), E = (r) => ({
type: "text",
content: ""
}), T = (r) => {
const s = r;
switch (s.platform) {
case "wechat":
return M(s.data);
case "xiaohongshu":
return $(s.data);
case "douyin":
return E(s.data);
default:
return {
type: "text",
content: "不支持的消息类型"
};
}
}, S = { class: "message-template__content" }, z = {
key: 0,
class: "person-content"
}, A = { class: "avatar" }, D = ["src"], L = { class: "name" }, q = {
key: 1,
class: "image-wrapper"
}, B = ["src"], N = { class: "title" }, O = { class: "box" }, R = { class: "desc" }, W = ["src"], I = { class: "title" }, J = { class: "desc" }, P = {
key: 4,
class: "minip-content"
}, V = { class: "name" }, X = { class: "avatar" }, G = ["src"], H = { class: "line-1" }, K = { class: "title line-2" }, Q = { class: "cover" }, U = ["src"], Y = {
key: 5,
class: "minip-content"
}, Z = { class: "name" }, ee = { class: "avatar" }, se = ["src"], ae = { class: "line-1" }, ie = { class: "title line-2" }, re = { class: "cover" }, te = ["src"], le = {
key: 6,
class: "text-content"
}, oe = /* @__PURE__ */ w({
__name: "MessageTemplate",
props: {
message: {},
options: { default: () => ({}) }
},
setup(r) {
const s = r, a = f(() => T(s.message)), n = f(() => s.options.customStyles || {}), c = (o) => {
const t = o.target;
t.src = l.avatar;
}, m = (o) => {
s.options.onLinkClick ? s.options.onLinkClick(o) : window.open(o, "_blank");
};
return (o, t) => (v(), p("div", {
class: j(["message-template", [`message-template--${o.options.theme || "light"}`, `message-template--${o.options.size || "medium"}`]]),
style: C(n.value)
}, [
i("div", S, [
a.value.type === "card" ? (v(), p("div", z, [
i("div", A, [
i("img", {
src: a.value.avatar || g(l).avatar,
onError: c
}, null, 40, D)
]),
i("div", null, [
i("div", L, d(a.value.content), 1),
t[2] || (t[2] = i("div", { class: "person" }, "名片", -1))
])
])) : a.value.type === "emoji" ? (v(), p("div", q, [
i("img", {
src: a.value.url,
style: { objectFit: "cover", width: "200px", height: "200px" }
}, null, 8, B)
])) : a.value.type === "link" ? (v(), p("div", {
key: 2,
class: "link-content",
onClick: t[0] || (t[0] = (_) => a.value.url && m(a.value.url))
}, [
i("div", N, d(a.value.content), 1),
i("div", O, [
i("div", R, d(a.value.desc), 1),
i("img", {
src: a.value.avatar || g(l).link
}, null, 8, W)
])
])) : a.value.type === "location" ? (v(), p("div", {
key: 3,
class: "position-content",
onClick: t[1] || (t[1] = (_) => a.value.url && m(a.value.url))
}, [
i("div", I, d(a.value.content), 1),
i("div", J, d(a.value.desc), 1)
])) : a.value.type === "miniprogram" ? (v(), p("div", P, [
i("div", V, [
i("div", X, [
i("img", {
src: a.value.avatar || g(l).avatar,
onError: c
}, null, 40, G)
]),
i("div", H, d(a.value.content), 1),
t[3] || (t[3] = i("div", { class: "label" }, "小程序", -1))
]),
i("div", K, d(a.value.desc), 1),
i("div", Q, [
i("img", {
src: a.value.url,
width: "100%",
height: 220,
style: { objectFit: "cover", borderRadius: "2px" }
}, null, 8, U)
])
])) : a.value.type === "videonum" ? (v(), p("div", Y, [
i("div", Z, [
i("div", ee, [
i("img", {
src: a.value.avatar || g(l).avatar,
onError: c
}, null, 40, se)
]),
i("div", ae, d(a.value.content), 1),
t[4] || (t[4] = i("div", { class: "label" }, "视频号", -1))
]),
i("div", ie, d(a.value.desc), 1),
i("div", re, [
i("img", {
src: a.value.url,
width: "100%",
height: 220,
style: { objectFit: "cover", borderRadius: "2px" }
}, null, 8, te)
])
])) : (v(), p("div", le, d(a.value.content), 1))
])
], 6));
}
}), de = (r, s) => {
const a = r.__vccOpts || r;
for (const [n, c] of s)
a[n] = c;
return a;
}, ce = /* @__PURE__ */ de(oe, [["__scopeId", "data-v-0151d16a"]]), x = {
wechat: {
name: "微信",
icon: "💬",
colors: {
primary: "#07C160",
secondary: "#2A313D",
background: "#FFFFFF"
},
messageTypes: ["text", "image", "video", "audio", "file", "link", "location", "card", "miniprogram", "videonum", "emoji"]
},
xiaohongshu: {
name: "小红书",
icon: "📖",
colors: {
primary: "#FF2442",
secondary: "#333333",
background: "#FFFFFF"
},
messageTypes: ["text"]
},
douyin: {
name: "抖音",
icon: "🎵",
colors: {
primary: "#000000",
secondary: "#333333",
background: "#FFFFFF"
},
messageTypes: ["text"]
}
}, pe = (r) => x[r] || x.wechat, ve = {
install: (r) => {
r.component("MessageTemplate", ce);
}
};
export {
ce as MessageTemplate,
ve as default,
l as defaultAssets,
pe as getPlatformConfig,
E as parseDouyinMessage,
T as parseMessage,
M as parseWeChatMessage,
$ as parseXiaohongshuMessage,
x as platformConfigs
};