press-tdesign-vue-next
Version:
二次封装 tdesign-vue-next
54 lines (45 loc) • 13.3 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("tdesign-vue-next"),C=require("vue-router"),v=require("tdesign-icons-vue-next");function h(p,a,s){const o=p;return o.install=(t,i)=>{t.component(i||o.name,p)},o}const N=e.defineComponent({__name:"breadcrumb",setup(p){const a=C.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,(i,r)=>(e.openBlock(),e.createBlock(e.unref(m.BreadcrumbItem),{key:r,to:{path:i.path}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.meta.title||i.name),1)]),_:2},1032,["to"]))),128))]),_:1}))}}),g=h(N),w={class:"header flex h-full items-center justify-between px-4"},_={class:"flex cursor-pointer items-center"},y={key:0,class:"mr-[8px]"},B=["src"],b=e.defineComponent({__name:"header-avatar",props:{showNick:{type:Boolean,default:!1},nick:{default:""},head:{default:""}},emits:["logout"],setup(p,{emit:a}){const s=a,o=()=>{s("logout")};return(t,i)=>(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",null,[e.createVNode(e.unref(g))]),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",_,[t.showNick?(e.openBlock(),e.createElementBlock("span",y,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(v.ChevronDownIcon),{size:"20px"})])]),content:e.withCtx(()=>[e.createVNode(e.unref(m.Button),{divided:"",onClick:o},{default:e.withCtx(()=>i[0]||(i[0]=[e.createTextVNode(" 退出登录 ")])),_:1,__:[0]})]),_:1})])]))}}),V=h(b),E=e.defineComponent({name:"SideBarItem",__name:"sidebar-item",props:{item:{}},emits:["clickSidebar"],setup(p,{emit:a}){const s=a;function o(t){s("clickSidebar",t)}return(t,i)=>{var l,c,u;const r=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(r,{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:i[0]||(i[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},[(u=t.item.meta)!=null&&u.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"]))}}}),k=h(E),I={class:"header flex h-full items-center justify-between px-4"},S={class:"flex items-center justify-center"},L={key:1,class:"mr-6 flex h-full items-center justify-center"},$={class:"flex items-center"},T={class:"flex cursor-pointer items-center text-[14px]"},j=["src"],M={class:"mr-3 flex flex-col justify-start"},O={class:"mb-[4px] text-[#252525]"},z={class:"min-w-[90px] text-[#999]"},D=e.defineComponent({__name:"header-role",props:{nodeName:{},gameName:{},roleId:{},loginInfo:{default:()=>({})},roleList:{default:()=>[]}},emits:["changeRole","logout","login"],setup(p,{emit:a}){const s=a,o=e.ref(),t=()=>{s("logout")},i=l=>{s("changeRole",l)},r=()=>{s("login")};return(l,c)=>(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("div",null,[e.createVNode(e.unref(g))]),e.createElementVNode("div",S,[l.loginInfo.isLogin?(e.openBlock(),e.createElementBlock("div",L,e.toDisplayString(l.gameName),1)):(e.openBlock(),e.createBlock(e.unref(m.Button),{key:0,theme:"primary",onClick:r},{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",$,[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:i},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(v.ArrowLeftIcon),{class:"mr-2"}),c[2]||(c[2]=e.createElementVNode("span",null,"退出登录",-1))])])]),default:e.withCtx(()=>[e.createElementVNode("div",T,[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,j)):e.createCommentVNode("",!0),e.createElementVNode("div",M,[e.createElementVNode("div",O,e.toDisplayString(l.loginInfo.nick),1),e.createElementVNode("div",z,e.toDisplayString(l.nodeName),1)]),e.createVNode(e.unref(v.ChevronDownIcon),{class:"cursor-pointer !text-[#999]",size:"16"})])]),_:1},512)):e.createCommentVNode("",!0)])]))}}),R=h(D);function P(p){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(p),t.select(),t.setSelectionRange(0,t.value.length);var i=document.execCommand("Copy",!1);t.blur(),i?a():s()})}const A={class:"press-image relative inline-flex h-full w-full items-center justify-center overflow-visible rounded-[2px]"},F=["src"],q=["onClick"],U=["onClick"],G=["onClick"],H=e.defineComponent({name:"ImageGrid",__name:"image-grid",props:{imageList:{default:()=>[]},shouldBreakWord:{type:Boolean,default:!1},width:{default:"160px"},height:{default:"160px"}},setup(p){const a=e.ref(0),s=p,o=(r,l)=>{a.value=l,r()},t=e.computed(()=>s.imageList.map(r=>r.url)),i=r=>{P(r.url).then(()=>{m.MessagePlugin.success("复制成功")})};return(r,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,${r.width})`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.imageList,(c,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:"m-[10px] h-[160px] w-[160px] rounded-[2px] border-[4px] border-solid border-[#f3f3f3]",style:e.normalizeStyle(`width: ${r.width};height: ${r.height}`)},[e.createVNode(e.unref(m.ImageViewer),{index:a.value,"onUpdate:index":l[0]||(l[0]=n=>a.value=n),images:t.value,title:`${r.imageList[a.value].name} `},{trigger:e.withCtx(({open:n})=>[e.createElementVNode("div",A,[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,F),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,u),["stop"])},[e.createElementVNode("span",{class:"px-[4px] py-[8px]",onClick:e.withModifiers(d=>o(n,u),["stop"])},[e.createVNode(e.unref(v.BrowseIcon),{size:"1.4em"}),l[1]||(l[1]=e.createTextVNode(" 预览 "))],8,U),e.createElementVNode("span",{class:"px-[4px] py-[8px]",onClick:e.withModifiers(d=>i(c),["stop"])},[e.createVNode(e.unref(v.FileCopyIcon),{size:"1.4em"}),l[2]||(l[2]=e.createTextVNode(" 复制 "))],8,G)],8,q)])]),_: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":r.shouldBreakWord,truncate:!r.shouldBreakWord}]),style:e.normalizeStyle(`max-width: ${r.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))}}),W=h(H),J=["src"],Y=e.defineComponent({__name:"menu",props:{activeIndex:{},routes:{}},emits:["openMenu","closeMenu","clickSidebar","changeCollapse"],setup(p,{emit:a}){const s={NORMAL:"",COLLAPSE:""},o=e.ref(!1),t=a,i=(u,n)=>{t("openMenu",u,n)},r=(u,n)=>{t("closeMenu",u,n)},l=u=>{t("clickSidebar",u)},c=()=>{o.value=!o.value,t("changeCollapse",o.value)};return(u,n)=>(e.openBlock(),e.createBlock(e.unref(m.Menu),{value:u.activeIndex,collapsed:o.value,theme:"light",class:"press-menu flex-1",onOpen:i,onClose:r},{logo:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(["!ml-0",{"px-[20px]":!o.value}]),src:o.value?s.COLLAPSE:s.NORMAL},null,10,J)]),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(u.routes,(d,f)=>(e.openBlock(),e.createBlock(e.unref(k),{key:`${d.path}-${f}`,item:d,onClickSidebar:l},null,8,["item"]))),128))]),_:1},8,["value","collapsed"]))}}),K=h(Y),X=`
<!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>
`,Z=`
import { createApp } from 'vue';
import Demo from './Index.vue';
import './index.css';
const app = createApp(Demo);
app.mount('#app');
`,Q=`
`,ee=`
{
"installDependencies": true,
"startCommand": "npm run dev"
}
`,te=`
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
`,ne=p=>JSON.stringify({name:"d2c-demo",version:"0.0.0",private:!0,scripts:{dev:"vite",build:"vite build",serve:"vite preview"},dependencies:{vue:p.vue||"^3.5.13"},devDependencies:{vite:p.vite||"^6.3.1",sass:"latest","@vitejs/plugin-vue":p["@vitejs/plugin-vue"]||"^5.2.2"}},null,2),oe=["action"],le=["name","value"],re=e.defineComponent({name:"StackBlitz",__name:"stackblitz",props:{fileList:{default:()=>[]},depsVersion:{default:()=>({})},actionUrl:{default:"https://stackblitz.com/run?file=src%2FIndex.vue"}},emits:["submit"],setup(p,{expose:a,emit:s}){const o=p,t=s,i=e.computed(()=>o.fileList.reduce((n,d)=>({...n,[d.name]:d.content}),{})),r=e.computed(()=>({"src/index.css":Q,"src/main.js":Z,"index.html":X,"package.json":ne(o.depsVersion),"vite.config.js":te,".stackblitzrc":ee})),l=e.computed(()=>{const n={...r.value,...i.value};return Object.keys(n).map(f=>({name:f,content:n[f]}))}),c=e.ref(null),u=()=>{var n;t("submit",l.value),(n=c.value)==null||n.submit()};return a({submit:u}),(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(u,["stop"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(f,x)=>(e.openBlock(),e.createElementBlock("input",{key:x,type:"hidden",name:`project[files][${f.name}]`,value:f.content},null,8,le))),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,oe)]),_:1})]))}}),ie=h(re);exports.Breadcrumb=g;exports.HeaderAvatar=V;exports.HeaderRole=R;exports.ImageGrid=W;exports.Menu=K;exports.SidebarItem=k;exports.Stackblitz=ie;