press-tdesign-vue-next
Version:
二次封装 tdesign-vue-next
553 lines (544 loc) • 17.1 kB
JavaScript
import { defineComponent as x, computed as w, createBlock as _, openBlock as l, unref as s, withCtx as p, createElementBlock as g, Fragment as L, renderList as S, createTextVNode as C, toDisplayString as b, createElementVNode as i, createVNode as h, createCommentVNode as $, resolveComponent as P, createSlots as D, ref as N, withModifiers as I, normalizeStyle as j, normalizeClass as T } from "vue";
import { Breadcrumb as F, BreadcrumbItem as U, Popup as M, Button as O, Submenu as V, Icon as B, MenuItem as G, Cascader as W, ImageViewer as H, Tooltip as E, MessagePlugin as J, Menu as q } from "tdesign-vue-next";
import { useRoute as Y } from "vue-router";
import { ChevronDownIcon as z, ArrowLeftIcon as K, BrowseIcon as X, FileCopyIcon as Z } from "tdesign-icons-vue-next";
function y(v, c, u) {
const n = v;
return n.install = (e, r) => {
e.component(r || n.name, v);
}, n;
}
const Q = /* @__PURE__ */ x({
__name: "breadcrumb",
setup(v) {
const c = Y(), u = w(() => c.matched);
return (n, e) => (l(), _(s(F), { separator: "/" }, {
default: p(() => [
(l(!0), g(L, null, S(u.value, (r, a) => (l(), _(s(U), {
key: a,
to: { path: r.path }
}, {
default: p(() => [
C(b(r.meta.title || r.name), 1)
]),
_: 2
}, 1032, ["to"]))), 128))
]),
_: 1
}));
}
}), R = y(Q), ee = { class: "header flex h-full items-center justify-between px-4" }, te = { class: "flex cursor-pointer items-center" }, ne = {
key: 0,
class: "mr-[8px]"
}, oe = ["src"], ie = /* @__PURE__ */ x({
__name: "header-avatar",
props: {
showNick: { type: Boolean, default: !1 },
nick: { default: "" },
head: { default: "" }
},
emits: ["logout"],
setup(v, { emit: c }) {
const u = c, n = () => {
u("logout");
};
return (e, r) => (l(), g("div", ee, [
i("div", null, [
h(s(R))
]),
i("div", null, [
h(s(M), {
trigger: "click",
"virtual-triggering": "",
width: "250",
placement: "top-left"
}, {
default: p(() => [
i("span", te, [
e.showNick ? (l(), g("span", ne, b(e.nick), 1)) : $("", !0),
e.head ? (l(), g("img", {
key: 1,
class: "mr-[4px] h-[40px] w-[40px] rounded-full",
src: e.head
}, null, 8, oe)) : $("", !0),
h(s(z), { size: "20px" })
])
]),
content: p(() => [
h(s(O), {
divided: "",
onClick: n
}, {
default: p(() => r[0] || (r[0] = [
C(" 退出登录 ")
])),
_: 1,
__: [0]
})
]),
_: 1
})
])
]));
}
}), Pe = y(ie), se = /* @__PURE__ */ x({
name: "SideBarItem",
__name: "sidebar-item",
props: {
item: {}
},
emits: ["clickSidebar"],
setup(v, { emit: c }) {
const u = c;
function n(e) {
u("clickSidebar", e);
}
return (e, r) => {
var o, d, f;
const a = P("SideBarItem");
return (o = e.item.children) != null && o.length ? (l(), _(s(V), {
key: 0,
value: e.item.fullPath,
title: ((d = e.item.meta) == null ? void 0 : d.title) || e.item.name
}, {
icon: p(() => {
var t, m;
return [
(t = e.item.meta) != null && t.icon ? (l(), _(s(B), {
key: 0,
name: (m = e.item.meta) == null ? void 0 : m.icon
}, null, 8, ["name"])) : $("", !0)
];
}),
default: p(() => [
(l(!0), g(L, null, S(e.item.children, (t, m) => (l(), _(a, {
key: `${t.path}-${m}`,
item: t,
onClickSidebar: () => n(t)
}, null, 8, ["item", "onClickSidebar"]))), 128))
]),
_: 1
}, 8, ["value", "title"])) : (l(), _(s(G), {
key: 1,
value: e.item.fullPath,
onClick: r[0] || (r[0] = () => n(e.item))
}, D({
default: p(() => {
var t;
return [
i("span", null, b(((t = e.item.meta) == null ? void 0 : t.title) || e.item.name), 1)
];
}),
_: 2
}, [
(f = e.item.meta) != null && f.icon ? {
name: "icon",
fn: p(() => {
var t;
return [
h(s(B), {
name: (t = e.item.meta) == null ? void 0 : t.icon
}, null, 8, ["name"])
];
}),
key: "0"
} : void 0
]), 1032, ["value"]));
};
}
}), le = y(se), ae = { class: "header flex h-full items-center justify-between px-4" }, re = { class: "flex items-center justify-center" }, ce = {
key: 1,
class: "mr-6 flex h-full items-center justify-center"
}, ue = { class: "flex items-center" }, de = { class: "flex cursor-pointer items-center text-[14px]" }, me = ["src"], pe = { class: "mr-3 flex flex-col justify-start" }, fe = { class: "mb-[4px] text-[#252525]" }, ve = { class: "min-w-[90px] text-[#999]" }, he = /* @__PURE__ */ x({
__name: "header-role",
props: {
nodeName: {},
gameName: {},
roleId: {},
loginInfo: { default: () => ({}) },
roleList: { default: () => [] }
},
emits: ["changeRole", "logout", "login"],
setup(v, { emit: c }) {
const u = c, n = N(), e = () => {
u("logout");
}, r = (o) => {
u("changeRole", o);
}, a = () => {
u("login");
};
return (o, d) => (l(), g("div", ae, [
i("div", null, [
h(s(R))
]),
i("div", re, [
o.loginInfo.isLogin ? (l(), g("div", ce, b(o.gameName), 1)) : (l(), _(s(O), {
key: 0,
theme: "primary",
onClick: a
}, {
default: p(() => d[0] || (d[0] = [
C(" 登录 ")
])),
_: 1,
__: [0]
})),
o.loginInfo.isLogin ? (l(), _(s(M), {
key: 2,
ref_key: "popoverRef",
ref: n,
trigger: "click",
"virtual-triggering": "",
width: "250",
placement: "top-left"
}, {
content: p(() => [
i("div", null, [
i("div", ue, [
d[1] || (d[1] = i("div", null, "切换到：", -1)),
h(s(W), {
"model-value": o.roleId,
options: o.roleList,
placeholder: "请选择角色",
style: { width: "160px" },
"show-all-levels": !1,
placement: "bottom-end",
teleported: !1,
onChange: r
}, null, 8, ["model-value", "options"])
]),
i("div", {
class: "mt-3 flex cursor-pointer items-center justify-start",
onClick: I(e, ["stop"])
}, [
h(s(K), { class: "mr-2" }),
d[2] || (d[2] = i("span", null, "退出登录", -1))
])
])
]),
default: p(() => [
i("div", de, [
o.loginInfo.head ? (l(), g("img", {
key: 0,
src: o.loginInfo.head,
class: "mr-3 h-[36px] w-[36px] rounded-full"
}, null, 8, me)) : $("", !0),
i("div", pe, [
i("div", fe, b(o.loginInfo.nick), 1),
i("div", ve, b(o.nodeName), 1)
]),
h(s(z), {
class: "cursor-pointer !text-[#999]",
size: "16"
})
])
]),
_: 1
}, 512)) : $("", !0)
])
]));
}
}), De = y(he);
function ge(v) {
return new Promise(function(c, u) {
var n = document.getElementById("#clipboard");
n == null || n.remove();
var e = document.createElement("textarea");
e.id = "#clipboard", e.style.position = "fixed", e.style.top = "-9999px", e.style.zIndex = "-9999", document.body.appendChild(e), e.value = "".concat(v), e.select(), e.setSelectionRange(0, e.value.length);
var r = document.execCommand("Copy", !1);
e.blur(), r ? c() : u();
});
}
const _e = { class: "press-image relative inline-flex h-full w-full items-center justify-center overflow-visible rounded-[2px]" }, ke = ["src"], be = ["onClick"], xe = ["onClick"], ye = ["onClick"], Ce = /* @__PURE__ */ x({
name: "ImageGrid",
__name: "image-grid",
props: {
imageList: { default: () => [] },
shouldBreakWord: { type: Boolean, default: !1 },
width: { default: "160px" },
height: { default: "160px" }
},
setup(v) {
const c = N(0), u = v, n = (a, o) => {
c.value = o, a();
}, e = w(() => u.imageList.map((a) => a.url)), r = (a) => {
ge(a.url).then(() => {
J.success("复制成功");
});
};
return (a, o) => (l(), g("div", {
class: "press-image-grid grid w-full grid-cols-[repeat(auto-fill,160px)] justify-around justify-items-center gap-x-10 gap-y-10",
style: j(`grid-template-columns: repeat(auto-fill,${a.width})`)
}, [
(l(!0), g(L, null, S(a.imageList, (d, f) => (l(), g("div", {
key: f,
class: "m-[10px] h-[160px] w-[160px] rounded-[2px] border-[4px] border-solid border-[#f3f3f3]",
style: j(`width: ${a.width};height: ${a.height}`)
}, [
h(s(H), {
index: c.value,
"onUpdate:index": o[0] || (o[0] = (t) => c.value = t),
images: e.value,
title: `${a.imageList[c.value].name} `
}, {
trigger: p(({ open: t }) => [
i("div", _e, [
i("img", {
alt: "test",
src: d.url,
class: "press-image__img absolute h-auto max-h-full w-auto max-w-full cursor-pointer"
}, null, 8, ke),
i("div", {
class: "press-image__hover absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.6)] leading-[22px] text-white opacity-0 duration-200",
onClick: I((m) => n(t, f), ["stop"])
}, [
i("span", {
class: "px-[4px] py-[8px]",
onClick: I((m) => n(t, f), ["stop"])
}, [
h(s(X), { size: "1.4em" }),
o[1] || (o[1] = C(" 预览 "))
], 8, xe),
i("span", {
class: "px-[4px] py-[8px]",
onClick: I((m) => r(d), ["stop"])
}, [
h(s(Z), { size: "1.4em" }),
o[2] || (o[2] = C(" 复制 "))
], 8, ye)
], 8, be)
])
]),
_: 2
}, 1032, ["index", "images", "title"]),
i("div", {
class: T(["mt-[8px] max-w-[160px] break-all text-center text-[14px] text-[#0052d9]", {
"line-clamp-2": a.shouldBreakWord,
truncate: !a.shouldBreakWord
}]),
style: j(`max-width: ${a.width}`)
}, [
h(s(E), {
content: d.name
}, {
default: p(() => [
C(b(d.name), 1)
]),
_: 2
}, 1032, ["content"])
], 6)
], 4))), 128))
], 4));
}
}), Fe = y(Ce), we = ["src"], Ie = /* @__PURE__ */ x({
__name: "menu",
props: {
activeIndex: {},
routes: {}
},
emits: [
"openMenu",
"closeMenu",
"clickSidebar",
"changeCollapse"
],
setup(v, { emit: c }) {
const u = {
NORMAL: "",
COLLAPSE: ""
}, n = N(!1), e = c, r = (f, t) => {
e("openMenu", f, t);
}, a = (f, t) => {
e("closeMenu", f, t);
}, o = (f) => {
e("clickSidebar", f);
}, d = () => {
n.value = !n.value, e("changeCollapse", n.value);
};
return (f, t) => (l(), _(s(q), {
value: f.activeIndex,
collapsed: n.value,
theme: "light",
class: "press-menu flex-1",
onOpen: r,
onClose: a
}, {
logo: p(() => [
i("img", {
class: T(["!ml-0", {
"px-[20px]": !n.value
}]),
src: n.value ? u.COLLAPSE : u.NORMAL
}, null, 10, we)
]),
operations: p(() => [
h(s(O), {
variant: "text",
shape: "square",
onClick: d
}, {
icon: p(() => [
h(s(B), { name: "view-list" })
]),
_: 1
})
]),
default: p(() => [
(l(!0), g(L, null, S(f.routes, (m, k) => (l(), _(s(le), {
key: `${m.path}-${k}`,
item: m,
onClickSidebar: o
}, null, 8, ["item"]))), 128))
]),
_: 1
}, 8, ["value", "collapsed"]));
}
}), Ue = y(Ie), $e = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="/favicon.ico">
<title>D2C Demo</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"><\/script>
<!--[if lte IE 9]>
<style>
#app {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<!--[if lte IE 9]>
<h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
<![endif]-->
<div id="app"></div>
<script type="module" src="/src/main.js"><\/script>
</body>
</html>
`, Le = `
import { createApp } from 'vue';
import Demo from './Index.vue';
import './index.css';
const app = createApp(Demo);
app.mount('#app');
`, Se = `
`, Ne = `
{
"installDependencies": true,
"startCommand": "npm run dev"
}
`, je = `
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
`, Be = (v) => JSON.stringify(
{
name: "d2c-demo",
version: "0.0.0",
private: !0,
scripts: {
dev: "vite",
build: "vite build",
serve: "vite preview"
},
dependencies: {
vue: v.vue || "^3.5.13"
},
devDependencies: {
vite: v.vite || "^6.3.1",
sass: "latest",
"@vitejs/plugin-vue": v["@vitejs/plugin-vue"] || "^5.2.2"
}
},
null,
2
), Oe = ["action"], Te = ["name", "value"], Me = /* @__PURE__ */ x({
name: "StackBlitz",
__name: "stackblitz",
props: {
fileList: { default: () => [] },
depsVersion: { default: () => ({}) },
actionUrl: { default: "https://stackblitz.com/run?file=src%2FIndex.vue" }
},
emits: ["submit"],
setup(v, { expose: c, emit: u }) {
const n = v, e = u, r = w(() => n.fileList.reduce((t, m) => ({
...t,
[m.name]: m.content
}), {})), a = w(() => ({
"src/index.css": Se,
"src/main.js": Le,
"index.html": $e,
"package.json": Be(n.depsVersion),
"vite.config.js": je,
".stackblitzrc": Ne
})), o = w(() => {
const t = {
...a.value,
...r.value
};
return Object.keys(t).map((k) => ({
name: k,
content: t[k]
}));
}), d = N(null), f = () => {
var t;
e("submit", o.value), (t = d.value) == null || t.submit();
};
return c({
submit: f
}), (t, m) => (l(), g("div", null, [
h(s(E), { content: "在 Stackblitz 中打开" }, {
default: p(() => [
i("form", {
ref_key: "formRef",
ref: d,
method: "post",
action: t.actionUrl,
target: "_blank",
onClick: I(f, ["stop"])
}, [
(l(!0), g(L, null, S(o.value, (k, A) => (l(), g("input", {
key: A,
type: "hidden",
name: `project[files][${k.name}]`,
value: k.content
}, null, 8, Te))), 128)),
m[0] || (m[0] = i("input", {
type: "hidden",
name: "project[template]",
value: "node"
}, null, -1)),
m[1] || (m[1] = i("div", { class: "action-online border-box inline-flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] p-2 text-[rgba(0,0,0,.6)] transition-all duration-200 ease-linear hover:bg-[#f3f3f3] hover:text-[rgba(0,0,0,.9)]" }, [
i("svg", {
viewBox: "0 0 28 28",
height: "20"
}, [
i("path", {
fill: "currentColor",
d: "M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"
})
])
], -1))
], 8, Oe)
]),
_: 1
})
]));
}
}), Ve = y(Me);
export {
R as Breadcrumb,
Pe as HeaderAvatar,
De as HeaderRole,
Fe as ImageGrid,
Ue as Menu,
le as SidebarItem,
Ve as Stackblitz
};