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