vue3-chat-yzx
Version:
vue3-chat-yzx
327 lines (326 loc) • 11.7 kB
JavaScript
import { defineComponent as _, computed as h, createElementBlock as d, openBlock as n, normalizeClass as u, unref as r, createCommentVNode as V, createElementVNode as i, normalizeStyle as v, renderSlot as p, createBlock as b, resolveDynamicComponent as A, toDisplayString as w, createTextVNode as N, useSlots as D, watch as S, resolveComponent as E, createVNode as m, withCtx as g, Transition as H, withDirectives as F, vShow as I } from "vue";
function U(l, a, s, o, t) {
let f = `${l}-${a}`;
return s && (f += `-${s}`), f;
}
function T(l) {
const a = "Vc";
return {
namespace: a,
b: (o = "") => U(a, l, o)
};
}
const j = ["src"], q = /* @__PURE__ */ _({
__name: "Welcome",
props: {
classNames: {},
description: {},
extra: {},
icon: {},
rootClassName: {},
styles: {},
title: {},
variant: { default: "filled" },
directions: {}
},
setup(l) {
const a = l, s = T("welcome"), o = h(() => [
a.rootClassName,
{
[s.b("filled")]: a.variant === "filled",
[s.b("borderless")]: a.variant === "borderless",
[s.b("left")]: a.directions === "left",
[s.b("right")]: a.directions === "right"
}
]);
return (t, f) => {
var k, c, C, $, B, L, e, W;
return n(), d("div", {
class: u([r(s).b(), o.value])
}, [
t.$slots.icon || t.icon ? (n(), d("div", {
key: 0,
class: u([r(s).b("icon"), (k = t.classNames) == null ? void 0 : k.icon]),
style: v((c = t.styles) == null ? void 0 : c.icon)
}, [
p(t.$slots, "icon", {}, () => [
typeof t.icon == "string" ? (n(), d("img", {
key: 0,
src: t.icon,
alt: "欢迎图标"
}, null, 8, j)) : (n(), b(A(t.icon), { key: 1 }))
], !0)
], 6)) : V("", !0),
i("div", {
class: u(r(s).b("content-wrapper"))
}, [
t.$slots.title || t.title ? (n(), d("div", {
key: 0,
class: u([r(s).b("title"), (C = t.classNames) == null ? void 0 : C.title, (t.$slots.extra || t.extra) && "extra"]),
style: v(($ = t.styles) == null ? void 0 : $.title)
}, [
p(t.$slots, "title", {}, () => [
i("h4", null, w(t.title), 1)
], !0),
t.$slots.extra || t.extra ? (n(), d("div", {
key: 0,
class: u([r(s).b("extra"), (B = t.classNames) == null ? void 0 : B.extra]),
style: v((L = t.styles) == null ? void 0 : L.extra)
}, [
p(t.$slots, "extra", {}, () => [
N(w(t.extra), 1)
], !0)
], 6)) : V("", !0)
], 6)) : V("", !0),
i("span", {
class: u([r(s).b("description"), (e = t.classNames) == null ? void 0 : e.description]),
style: v((W = t.styles) == null ? void 0 : W.description)
}, [
p(t.$slots, "description", {}, () => [
N(w(t.description), 1)
], !0)
], 6)
], 2)
], 2);
};
}
}), O = (l, a) => {
const s = l.__vccOpts || l;
for (const [o, t] of a)
s[o] = t;
return s;
}, z = /* @__PURE__ */ O(q, [["__scopeId", "data-v-f9b19b9d"]]);
z.install = (l) => {
l.component("Welcome", z);
};
/*! Element Plus Icons Vue v2.3.1 */
var G = /* @__PURE__ */ _({
name: "ArrowUpBold",
__name: "arrow-up-bold",
setup(l) {
return (a, s) => (n(), d("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
i("path", {
fill: "currentColor",
d: "M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8 316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z"
})
]));
}
}), J = G, K = /* @__PURE__ */ _({
name: "CircleCloseFilled",
__name: "circle-close-filled",
setup(l) {
return (a, s) => (n(), d("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
i("path", {
fill: "currentColor",
d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"
})
]));
}
}), P = K, Q = /* @__PURE__ */ _({
name: "Loading",
__name: "loading",
setup(l) {
return (a, s) => (n(), d("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
i("path", {
fill: "currentColor",
d: "M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
})
]));
}
}), R = Q, X = /* @__PURE__ */ _({
name: "Opportunity",
__name: "opportunity",
setup(l) {
return (a, s) => (n(), d("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
i("path", {
fill: "currentColor",
d: "M384 960v-64h192.064v64zm448-544a350.656 350.656 0 0 1-128.32 271.424C665.344 719.04 640 763.776 640 813.504V832H320v-14.336c0-48-19.392-95.36-57.216-124.992a351.552 351.552 0 0 1-128.448-344.256c25.344-136.448 133.888-248.128 269.76-276.48A352.384 352.384 0 0 1 832 416m-544 32c0-132.288 75.904-224 192-224v-64c-154.432 0-256 122.752-256 288z"
})
]));
}
}), Y = X, Z = /* @__PURE__ */ _({
name: "SuccessFilled",
__name: "success-filled",
setup(l) {
return (a, s) => (n(), d("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, [
i("path", {
fill: "currentColor",
d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
})
]));
}
}), x = Z;
const ee = ["disabled"], te = /* @__PURE__ */ _({
__name: "Thinking",
props: {
content: { default: "" },
modelValue: { type: Boolean, default: !0 },
status: { default: "start" },
autoCollapse: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
duration: { default: "0.2s" },
buttonWidth: { default: "160px" },
maxWidth: { default: "500px" },
backgroundColor: {},
color: { default: "#00" },
isBorder: { type: Boolean, default: !1 },
lb: { type: Boolean, default: !0 }
},
emits: ["update:modelValue", "change"],
setup(l, { emit: a }) {
const s = T("thinking"), o = l, t = h(() => o.status === "start" ? "开始思考" : o.status === "thinking" ? "思考中" : o.status === "end" ? "思考完成" : "思考失败"), f = a, k = D(), c = h({
get() {
return o.modelValue;
},
set(e) {
f("update:modelValue", e);
}
}), C = () => {
c.value = !c.value, f("change", !c.value, o.status);
}, $ = h(() => {
const e = {};
return o.buttonWidth && (e.width = o.buttonWidth), o.isBorder && (e.border = "1px solid var(--border-color)"), e;
}), B = h(() => {
const e = {};
return o.maxWidth && (e.maxWidth = o.maxWidth), o.backgroundColor && (o.backgroundColor.includes("linear-gradient") ? e.background = o.backgroundColor : e.backgroundColor = o.backgroundColor), o.color && (e.color = o.color), e;
}), L = h(() => ({
transition: o.duration ? `transform ${o.duration} ease` : "transform $motion-duration-slow ease"
}));
return S(
() => o.status,
(e) => {
o.autoCollapse && e === "end" && (c.value = !1, console.log("isOpen.value", c.value));
}
), S(
() => c.value,
(e) => {
console.log("Watch isOpen.value", e);
}
), (e, W) => {
const y = E("el-icon");
return n(), d("div", {
class: u(r(s).b())
}, [
i("div", null, [
i("button", {
class: u(r(s).b("top")),
disabled: e.disabled,
style: v($.value),
onClick: C
}, [
i("span", {
class: u(r(s).b("icon"))
}, [
p(e.$slots, "icon", { status: e.status }, () => [
e.status === "start" ? (n(), b(y, {
key: 0,
style: { color: "var(--start-color)" }
}, {
default: g(() => [
m(r(Y))
]),
_: 1
})) : e.status === "thinking" ? (n(), b(y, {
key: 1,
style: { color: "var(--thinking-color)" },
class: "thinking-loading"
}, {
default: g(() => [
m(r(R))
]),
_: 1
})) : e.status === "end" ? (n(), b(y, {
key: 2,
style: { color: "var(--end-color)" }
}, {
default: g(() => [
m(r(x))
]),
_: 1
})) : e.status === "error" ? (n(), b(y, {
key: 3,
style: { color: "var(--error-color)" }
}, {
default: g(() => [
m(r(P))
]),
_: 1
})) : V("", !0)
], !0)
], 2),
i("span", {
class: u(r(s).b("label"))
}, [
p(e.$slots, "label", { status: e.status }, () => [
N(w(t.value), 1)
], !0)
], 2),
i("span", {
class: u([r(s).b("arrow"), { "is-open": c.value }]),
style: v(L.value)
}, [
p(e.$slots, "arrow", {}, () => [
m(y, { class: "el-icon-center" }, {
default: g(() => [
m(r(J))
]),
_: 1
})
], !0)
], 6)
], 14, ee)
]),
m(H, { name: "thinking-content" }, {
default: g(() => [
F(i("div", {
class: u([
r(s).b("content"),
{ [r(s).b("content-lb")]: e.lb }
]),
style: v(B.value)
}, [
r(k).error && e.status === "error" ? p(e.$slots, "error", { key: 0 }, void 0, !0) : p(e.$slots, "content", {
key: 1,
status: e.status,
content: e.content
}, () => [
N(w(e.content), 1)
], !0)
], 6), [
[I, c.value]
])
]),
_: 3
})
], 2);
};
}
}), M = /* @__PURE__ */ O(te, [["__scopeId", "data-v-144544e5"]]);
M.install = (l) => {
l.component("Thinking", M);
};
const se = [z, M], oe = (l) => {
se.forEach((a) => {
l.component(a.__name, a);
});
}, le = { install: oe };
export {
M as Thinking,
z as Welcome,
le as default
};