press-tdesign-vue-next
Version:
二次封装 tdesign-vue-next
54 lines (45 loc) • 13.6 kB
JavaScript
(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("tdesign-vue-next"),require("vue-router"),require("tdesign-icons-vue-next")):typeof define=="function"&&define.amd?define(["exports","vue","tdesign-vue-next","vue-router","tdesign-icons-vue-next"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h.PressTdesignVueNext={},h.vue,h.tdesignVueNext,h.vueRouter,h.tdesignIconsVueNext))})(this,function(h,e,m,w,g){"use strict";function k(f,a,s){const o=f;return o.install=(t,r)=>{t.component(r||o.name,f)},o}const _=k(e.defineComponent({__name:"breadcrumb",setup(f){const a=w.useRoute(),s=e.computed(()=>a.matched);return(o,t)=>(e.openBlock(),e.createBlock(e.unref(m.Breadcrumb),{separator:"/"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(r,i)=>(e.openBlock(),e.createBlock(e.unref(m.BreadcrumbItem),{key:i,to:{path:r.path}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.meta.title||r.name),1)]),_:2},1032,["to"]))),128))]),_:1}))}})),y={class:"header flex h-full items-center justify-between px-4"},B={class:"flex cursor-pointer items-center"},x={key:0,class:"mr-[8px]"},b=["src"],E=k(e.defineComponent({__name:"header-avatar",props:{showNick:{type:Boolean,default:!1},nick:{default:""},head:{default:""}},emits:["logout"],setup(f,{emit:a}){const s=a,o=()=>{s("logout")};return(t,r)=>(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",null,[e.createVNode(e.unref(_))]),e.createElementVNode("div",null,[e.createVNode(e.unref(m.Popup),{trigger:"click","virtual-triggering":"",width:"250",placement:"top-left"},{default:e.withCtx(()=>[e.createElementVNode("span",B,[t.showNick?(e.openBlock(),e.createElementBlock("span",x,e.toDisplayString(t.nick),1)):e.createCommentVNode("",!0),t.head?(e.openBlock(),e.createElementBlock("img",{key:1,class:"mr-[4px] h-[40px] w-[40px] rounded-full",src:t.head},null,8,b)):e.createCommentVNode("",!0),e.createVNode(e.unref(g.ChevronDownIcon),{size:"20px"})])]),content:e.withCtx(()=>[e.createVNode(e.unref(m.Button),{divided:"",onClick:o},{default:e.withCtx(()=>r[0]||(r[0]=[e.createTextVNode(" 退出登录 ")])),_:1,__:[0]})]),_:1})])]))}})),C=k(e.defineComponent({name:"SideBarItem",__name:"sidebar-item",props:{item:{}},emits:["clickSidebar"],setup(f,{emit:a}){const s=a;function o(t){s("clickSidebar",t)}return(t,r)=>{var l,c,p;const i=e.resolveComponent("SideBarItem");return(l=t.item.children)!=null&&l.length?(e.openBlock(),e.createBlock(e.unref(m.Submenu),{key:0,value:t.item.fullPath,title:((c=t.item.meta)==null?void 0:c.title)||t.item.name},{icon:e.withCtx(()=>{var n,d;return[(n=t.item.meta)!=null&&n.icon?(e.openBlock(),e.createBlock(e.unref(m.Icon),{key:0,name:(d=t.item.meta)==null?void 0:d.icon},null,8,["name"])):e.createCommentVNode("",!0)]}),default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.item.children,(n,d)=>(e.openBlock(),e.createBlock(i,{key:`${n.path}-${d}`,item:n,onClickSidebar:()=>o(n)},null,8,["item","onClickSidebar"]))),128))]),_:1},8,["value","title"])):(e.openBlock(),e.createBlock(e.unref(m.MenuItem),{key:1,value:t.item.fullPath,onClick:r[0]||(r[0]=()=>o(t.item))},e.createSlots({default:e.withCtx(()=>{var n;return[e.createElementVNode("span",null,e.toDisplayString(((n=t.item.meta)==null?void 0:n.title)||t.item.name),1)]}),_:2},[(p=t.item.meta)!=null&&p.icon?{name:"icon",fn:e.withCtx(()=>{var n;return[e.createVNode(e.unref(m.Icon),{name:(n=t.item.meta)==null?void 0:n.icon},null,8,["name"])]}),key:"0"}:void 0]),1032,["value"]))}}})),N={class:"header flex h-full items-center justify-between px-4"},S={class:"flex items-center justify-center"},I={key:1,class:"mr-6 flex h-full items-center justify-center"},V={class:"flex items-center"},$={class:"flex cursor-pointer items-center text-[14px]"},L=["src"],T={class:"mr-3 flex flex-col justify-start"},j={class:"mb-[4px] text-[#252525]"},M={class:"min-w-[90px] text-[#999]"},O=k(e.defineComponent({__name:"header-role",props:{nodeName:{},gameName:{},roleId:{},loginInfo:{default:()=>({})},roleList:{default:()=>[]}},emits:["changeRole","logout","login"],setup(f,{emit:a}){const s=a,o=e.ref(),t=()=>{s("logout")},r=l=>{s("changeRole",l)},i=()=>{s("login")};return(l,c)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",null,[e.createVNode(e.unref(_))]),e.createElementVNode("div",S,[l.loginInfo.isLogin?(e.openBlock(),e.createElementBlock("div",I,e.toDisplayString(l.gameName),1)):(e.openBlock(),e.createBlock(e.unref(m.Button),{key:0,theme:"primary",onClick:i},{default:e.withCtx(()=>c[0]||(c[0]=[e.createTextVNode(" 登录 ")])),_:1,__:[0]})),l.loginInfo.isLogin?(e.openBlock(),e.createBlock(e.unref(m.Popup),{key:2,ref_key:"popoverRef",ref:o,trigger:"click","virtual-triggering":"",width:"250",placement:"top-left"},{content:e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("div",V,[c[1]||(c[1]=e.createElementVNode("div",null,"切换到：",-1)),e.createVNode(e.unref(m.Cascader),{"model-value":l.roleId,options:l.roleList,placeholder:"请选择角色",style:{width:"160px"},"show-all-levels":!1,placement:"bottom-end",teleported:!1,onChange:r},null,8,["model-value","options"])]),e.createElementVNode("div",{class:"mt-3 flex cursor-pointer items-center justify-start",onClick:e.withModifiers(t,["stop"])},[e.createVNode(e.unref(g.ArrowLeftIcon),{class:"mr-2"}),c[2]||(c[2]=e.createElementVNode("span",null,"退出登录",-1))])])]),default:e.withCtx(()=>[e.createElementVNode("div",$,[l.loginInfo.head?(e.openBlock(),e.createElementBlock("img",{key:0,src:l.loginInfo.head,class:"mr-3 h-[36px] w-[36px] rounded-full"},null,8,L)):e.createCommentVNode("",!0),e.createElementVNode("div",T,[e.createElementVNode("div",j,e.toDisplayString(l.loginInfo.nick),1),e.createElementVNode("div",M,e.toDisplayString(l.nodeName),1)]),e.createVNode(e.unref(g.ChevronDownIcon),{class:"cursor-pointer !text-[#999]",size:"16"})])]),_:1},512)):e.createCommentVNode("",!0)])]))}}));function z(f){return new Promise(function(a,s){var o=document.getElementById("#clipboard");o==null||o.remove();var t=document.createElement("textarea");t.id="#clipboard",t.style.position="fixed",t.style.top="-9999px",t.style.zIndex="-9999",document.body.appendChild(t),t.value="".concat(f),t.select(),t.setSelectionRange(0,t.value.length);var r=document.execCommand("Copy",!1);t.blur(),r?a():s()})}const D={class:"press-image relative inline-flex h-full w-full items-center justify-center overflow-visible rounded-[2px]"},P=["src"],R=["onClick"],A=["onClick"],F=["onClick"],q=k(e.defineComponent({name:"ImageGrid",__name:"image-grid",props:{imageList:{default:()=>[]},shouldBreakWord:{type:Boolean,default:!1},width:{default:"160px"},height:{default:"160px"}},setup(f){const a=e.ref(0),s=f,o=(i,l)=>{a.value=l,i()},t=e.computed(()=>s.imageList.map(i=>i.url)),r=i=>{z(i.url).then(()=>{m.MessagePlugin.success("复制成功")})};return(i,l)=>(e.openBlock(),e.createElementBlock("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:e.normalizeStyle(`grid-template-columns: repeat(auto-fill,${i.width})`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.imageList,(c,p)=>(e.openBlock(),e.createElementBlock("div",{key:p,class:"m-[10px] h-[160px] w-[160px] rounded-[2px] border-[4px] border-solid border-[#f3f3f3]",style:e.normalizeStyle(`width: ${i.width};height: ${i.height}`)},[e.createVNode(e.unref(m.ImageViewer),{index:a.value,"onUpdate:index":l[0]||(l[0]=n=>a.value=n),images:t.value,title:`${i.imageList[a.value].name} `},{trigger:e.withCtx(({open:n})=>[e.createElementVNode("div",D,[e.createElementVNode("img",{alt:"test",src:c.url,class:"press-image__img absolute h-auto max-h-full w-auto max-w-full cursor-pointer"},null,8,P),e.createElementVNode("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:e.withModifiers(d=>o(n,p),["stop"])},[e.createElementVNode("span",{class:"px-[4px] py-[8px]",onClick:e.withModifiers(d=>o(n,p),["stop"])},[e.createVNode(e.unref(g.BrowseIcon),{size:"1.4em"}),l[1]||(l[1]=e.createTextVNode(" 预览 "))],8,A),e.createElementVNode("span",{class:"px-[4px] py-[8px]",onClick:e.withModifiers(d=>r(c),["stop"])},[e.createVNode(e.unref(g.FileCopyIcon),{size:"1.4em"}),l[2]||(l[2]=e.createTextVNode(" 复制 "))],8,F)],8,R)])]),_:2},1032,["index","images","title"]),e.createElementVNode("div",{class:e.normalizeClass(["mt-[8px] max-w-[160px] break-all text-center text-[14px] text-[#0052d9]",{"line-clamp-2":i.shouldBreakWord,truncate:!i.shouldBreakWord}]),style:e.normalizeStyle(`max-width: ${i.width}`)},[e.createVNode(e.unref(m.Tooltip),{content:c.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.name),1)]),_:2},1032,["content"])],6)],4))),128))],4))}})),U=["src"],G=k(e.defineComponent({__name:"menu",props:{activeIndex:{},routes:{}},emits:["openMenu","closeMenu","clickSidebar","changeCollapse"],setup(f,{emit:a}){const s={NORMAL:"",COLLAPSE:""},o=e.ref(!1),t=a,r=(p,n)=>{t("openMenu",p,n)},i=(p,n)=>{t("closeMenu",p,n)},l=p=>{t("clickSidebar",p)},c=()=>{o.value=!o.value,t("changeCollapse",o.value)};return(p,n)=>(e.openBlock(),e.createBlock(e.unref(m.Menu),{value:p.activeIndex,collapsed:o.value,theme:"light",class:"press-menu flex-1",onOpen:r,onClose:i},{logo:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(["!ml-0",{"px-[20px]":!o.value}]),src:o.value?s.COLLAPSE:s.NORMAL},null,10,U)]),operations:e.withCtx(()=>[e.createVNode(e.unref(m.Button),{variant:"text",shape:"square",onClick:c},{icon:e.withCtx(()=>[e.createVNode(e.unref(m.Icon),{name:"view-list"})]),_:1})]),default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.routes,(d,u)=>(e.openBlock(),e.createBlock(e.unref(C),{key:`${d.path}-${u}`,item:d,onClickSidebar:l},null,8,["item"]))),128))]),_:1},8,["value","collapsed"]))}})),H=`
<!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>
`,W=`
import { createApp } from 'vue';
import Demo from './Index.vue';
import './index.css';
const app = createApp(Demo);
app.mount('#app');
`,J=`
`,Y=`
{
"installDependencies": true,
"startCommand": "npm run dev"
}
`,K=`
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
`,X=f=>JSON.stringify({name:"d2c-demo",version:"0.0.0",private:!0,scripts:{dev:"vite",build:"vite build",serve:"vite preview"},dependencies:{vue:f.vue||"^3.5.13"},devDependencies:{vite:f.vite||"^6.3.1",sass:"latest","@vitejs/plugin-vue":f["@vitejs/plugin-vue"]||"^5.2.2"}},null,2),Z=["action"],Q=["name","value"],v=k(e.defineComponent({name:"StackBlitz",__name:"stackblitz",props:{fileList:{default:()=>[]},depsVersion:{default:()=>({})},actionUrl:{default:"https://stackblitz.com/run?file=src%2FIndex.vue"}},emits:["submit"],setup(f,{expose:a,emit:s}){const o=f,t=s,r=e.computed(()=>o.fileList.reduce((n,d)=>({...n,[d.name]:d.content}),{})),i=e.computed(()=>({"src/index.css":J,"src/main.js":W,"index.html":H,"package.json":X(o.depsVersion),"vite.config.js":K,".stackblitzrc":Y})),l=e.computed(()=>{const n={...i.value,...r.value};return Object.keys(n).map(u=>({name:u,content:n[u]}))}),c=e.ref(null),p=()=>{var n;t("submit",l.value),(n=c.value)==null||n.submit()};return a({submit:p}),(n,d)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(e.unref(m.Tooltip),{content:"在 Stackblitz 中打开"},{default:e.withCtx(()=>[e.createElementVNode("form",{ref_key:"formRef",ref:c,method:"post",action:n.actionUrl,target:"_blank",onClick:e.withModifiers(p,["stop"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(u,ee)=>(e.openBlock(),e.createElementBlock("input",{key:ee,type:"hidden",name:`project[files][${u.name}]`,value:u.content},null,8,Q))),128)),d[0]||(d[0]=e.createElementVNode("input",{type:"hidden",name:"project[template]",value:"node"},null,-1)),d[1]||(d[1]=e.createElementVNode("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)]"},[e.createElementVNode("svg",{viewBox:"0 0 28 28",height:"20"},[e.createElementVNode("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,Z)]),_:1})]))}}));h.Breadcrumb=_,h.HeaderAvatar=E,h.HeaderRole=O,h.ImageGrid=q,h.Menu=G,h.SidebarItem=C,h.Stackblitz=v,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});