@artmate/chat
Version:
借鉴字节开源react库AntX，通过vue实现的版本
208 lines (207 loc) • 6.72 kB
JavaScript
import { defineComponent as U, toRaw as l, ref as S, watch as j, computed as x, createElementBlock as f, openBlock as m, normalizeClass as n, unref as r, createCommentVNode as k, Fragment as F, createElementVNode as a, createBlock as P, toDisplayString as g, normalizeStyle as A, createVNode as _, withCtx as R, resolveDynamicComponent as G } from "vue";
import { ElIcon as T } from "element-plus";
import { CircleCloseFilled as K } from "@element-plus/icons-vue";
import { previewImage as W } from "../attachment/util.js";
import { useNamespace as X } from "../hooks/useNamespace.js";
import Y from "./AudioIcon.vue.js";
import Z from "./ExcelIcon.vue.js";
import q from "./ImageIcon.vue.js";
import H from "./MarkdownIcon.vue.js";
import J from "./PdfIcon.vue.js";
import Q from "./PptIcon.vue.js";
import V from "./Progress.vue.js";
import ee from "./TxtIcon.vue.js";
import te from "./VideoIcon.vue.js";
import oe from "./WordIcon.vue.js";
import ie from "./ZipIcon.vue.js";
const re = ["src"], I = " ", E = "#8c8c8c", Ce = /* @__PURE__ */ U({
__name: "fileListCard",
props: {
item: {},
onRemove: { type: Function, default: () => {
} },
className: { default: "" },
style: { default: void 0 },
disabled: { type: Boolean, default: !1 }
},
setup(L) {
const e = L, s = X("attachment-list-card"), z = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"], O = [
{
icon: l(Z),
color: "#22b35e",
ext: ["xlsx", "xls"]
},
{
icon: l(q),
color: E,
ext: z
},
{
icon: l(H),
color: E,
ext: ["md", "mdx"]
},
{
icon: l(J),
color: "#ff4d4f",
ext: ["pdf"]
},
{
icon: l(Q),
color: "#ff6e31",
ext: ["ppt", "pptx"]
},
{
icon: l(oe),
color: "#1677ff",
ext: ["doc", "docx"]
},
{
icon: l(ie),
color: "#fab714",
ext: ["zip", "rar", "7z", "tar", "gz"]
},
{
icon: l(te),
color: "#ff4d4f",
ext: ["mp4", "avi", "mov", "wmv", "flv", "mkv"]
},
{
icon: l(Y),
color: "#8c8c8c",
ext: ["mp3", "wav", "flac", "ape", "aac", "ogg"]
}
], y = S(), w = S("");
j(
() => e.item,
async (t) => {
var o, i;
if (t != null && t.raw) {
let c = !0;
const u = await W(t.raw);
c && (y.value = u), c = !1;
} else
y.value = void 0;
w.value = ((o = e.item) == null ? void 0 : o.thumbUrl) || ((i = e.item) == null ? void 0 : i.url) || y.value;
},
{
immediate: !0
}
);
const b = x(() => {
var i;
const t = ((i = e.item) == null ? void 0 : i.name) || "", o = t.match(/^(.*)\.[^.]+$/);
return o ? [o[1], t.slice(o[1].length)] : [t, ""];
});
function B(t, o) {
return o.some((i) => t.toLowerCase() === `.${i}`);
}
function M(t) {
let o = t;
const i = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
let c = 0;
for (; o >= 1024 && c < i.length - 1; )
o /= 1024, c++;
return `${o.toFixed(0)} ${i[c]}`;
}
const h = x(() => {
var t, o, i, c, u, p, d, v;
return (t = e.item) != null && t.description ? (o = e.item) == null ? void 0 : o.description : ((i = e.item) == null ? void 0 : i.status) === "uploading" ? `${((c = e.item) == null ? void 0 : c.percent) || 0}%` : ((u = e.item) == null ? void 0 : u.status) === "fail" ? ((p = e.item) == null ? void 0 : p.response) || I : (d = e.item) != null && d.size ? M((v = e.item) == null ? void 0 : v.size) : I;
}), N = x(() => {
for (const { ext: t, icon: o, color: i } of O)
if (B(b.value[1], t))
return [o, i];
return [l(ee), E];
}), D = x(() => B(b.value[1], z)), C = x(
() => {
var t;
return D.value && (((t = e.item) == null ? void 0 : t.file) || w);
}
);
return (t, o) => {
var i, c, u, p, d, v, $;
return m(), f("div", {
class: n([
r(s).b(),
{
[r(s).b(`status-${(i = e.item) == null ? void 0 : i.status}`)]: (c = e.item) == null ? void 0 : c.status,
[r(s).b("type-preview")]: C.value,
[r(s).b("type-overview")]: !C.value
}
])
}, [
C.value ? (m(), f(F, { key: 0 }, [
a("img", {
src: w.value,
alt: "preview"
}, null, 8, re),
(u = e.item) != null && u.status && ((p = e.item) == null ? void 0 : p.status) !== "ready" ? (m(), f("div", {
key: 0,
class: n([`${r(s).b("img-mask")}`])
}, [
((d = e.item) == null ? void 0 : d.status) === "uploading" ? (m(), P(V, {
key: 0,
percent: ((v = e == null ? void 0 : e.item) == null ? void 0 : v.percent) || 0
}, null, 8, ["percent"])) : (($ = e.item) == null ? void 0 : $.status) === "fail" ? (m(), f("div", {
key: 1,
class: n([r(s).b("desc")])
}, [
a("div", {
class: n([r(s).b("ellipsis-prefix")])
}, g(h.value), 3)
], 2)) : k("", !0)
], 2)) : k("", !0)
], 64)) : (m(), f(F, { key: 1 }, [
a("div", {
class: n([r(s).b("icon")]),
style: A({ color: N.value[1] })
}, [
_(r(T), { size: "32" }, {
default: R(() => [
(m(), P(G(N.value[0])))
]),
_: 1
})
], 6),
a("div", {
class: n([r(s).b("content")])
}, [
a("div", {
class: n([r(s).b("name")])
}, [
a("div", {
class: n([r(s).b("ellipsis-prefix")])
}, g(b.value[0] ?? I), 3),
a("div", {
class: n([r(s).b("ellipsis-suffix")])
}, g(b.value[1] ?? I), 3)
], 2),
a("div", {
class: n([r(s).b("desc")])
}, [
a("div", {
class: n([r(s).b("ellipsis-prefix")])
}, g(h.value), 3)
], 2)
], 2)
], 64)),
!e.disabled && e.onRemove ? (m(), f("button", {
key: 2,
class: n([r(s).b("remove")]),
type: "button",
onClick: o[0] || (o[0] = (se) => t.onRemove(t.item))
}, [
_(r(T), { size: "20" }, {
default: R(() => [
_(r(K))
]),
_: 1
})
], 2)) : k("", !0)
], 2);
};
}
});
export {
Ce as default
};