little-dizzy 2.4.0 → 2.6.0

package/dist/little-dizzy.umd.cjs

@@ -1,4 +1,4 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.LittleDizzy={},a.Vue))})(this,(function(a,e){"use strict";const g=(t,s)=>{const n=t.__vccOpts||t;for(const[d,i]of s)n[d]=i;return n},M=["disabled"],k=g({__name:"Button",props:{type:{type:String,default:"primary",validator:t=>["primary","success","warning","danger","info","secondary"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:s}){return(n,d)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["btn",[`btn-${t.type}`,`btn-${t.size}`,{"btn-block":t.block},{"btn-disabled":t.disabled}]]),disabled:t.disabled,onClick:d[0]||(d[0]=i=>n.$emit("click",i))},[e.renderSlot(n.$slots,"default",{},void 0,!0)],10,M))}},[["__scopeId","data-v-75f082b2"]]),V={key:0,class:"card-header"},N={key:0,class:"card-header-title"},L={class:"card-body"},I={key:1,class:"card-footer"},b=g({__name:"Card",props:{title:{type:String,default:""},shadow:{type:Boolean,default:!0}},setup(t){return(s,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["card",{"card-shadow":t.shadow}])},[s.$slots.header||t.title?(e.openBlock(),e.createElementBlock("div",V,[t.title?(e.openBlock(),e.createElementBlock("h3",N,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"header",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",L,[e.renderSlot(s.$slots,"default",{},void 0,!0)]),s.$slots.footer?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(s.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-1e2b2467"]]),T={class:"modal-dialog"},j={class:"modal-header"},D={key:0,class:"modal-header-title"},O={class:"modal-body"},A={key:0,class:"modal-footer"},H={key:1,class:"modal-footer"},w=g({__name:"Modal",props:{visible:{type:Boolean,default:!1},title:{type:String,default:""},width:{type:String,default:"500px"},showFooter:{type:Boolean,default:!0}},emits:["close","cancel","confirm"],setup(t,{emit:s}){const n=s,d=()=>{n("close")},i=()=>{n("cancel")},p=()=>{n("confirm")};return(l,m)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["modal",{"modal-show":t.visible}])},[e.createElementVNode("div",T,[e.createElementVNode("div",{class:"modal-content",style:e.normalizeStyle({width:t.width})},[e.createElementVNode("div",j,[t.title?(e.openBlock(),e.createElementBlock("h3",D,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"modal-header-close",onClick:d},"×")]),e.createElementVNode("div",O,[e.renderSlot(l.$slots,"default",{},void 0,!0)]),l.$slots.footer?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(l.$slots,"footer",{},void 0,!0)])):t.showFooter?(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("button",{class:"btn btn-secondary",onClick:i},"取消"),e.createElementVNode("button",{class:"btn btn-primary",onClick:p},"确定")])):e.createCommentVNode("",!0)],4)])],2)):e.createCommentVNode("",!0)}},[["__scopeId","data-v-39af2dcd"]]),F=["innerHTML"],R={class:"text-sm font-medium"},Y=["onClick"],B=g(Object.assign({name:"Message"},{__name:"Message",setup(t,{expose:s}){const n=e.ref([]),d={success:"bg-emerald-500/95 text-white",warning:"bg-amber-500/95 text-white",error:"bg-rose-500/95 text-white",info:"bg-sky-500/95 text-white"},i={success:`<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.LittleDizzy={},d.Vue))})(this,(function(d,e){"use strict";const B=(t,o)=>{const l=t.__vccOpts||t;for(const[a,c]of o)l[a]=c;return l},G=["disabled"],N=B({__name:"Button",props:{type:{type:String,default:"primary",validator:t=>["primary","success","warning","danger","info","secondary"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:o}){return(l,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["btn",[`btn-${t.type}`,`btn-${t.size}`,{"btn-block":t.block},{"btn-disabled":t.disabled}]]),disabled:t.disabled,onClick:a[0]||(a[0]=c=>l.$emit("click",c))},[e.renderSlot(l.$slots,"default",{},void 0,!0)],10,G))}},[["__scopeId","data-v-75f082b2"]]),W={key:0,class:"card-header"},X={key:0,class:"card-header-title"},K={class:"card-body"},J={key:1,class:"card-footer"},L=B({__name:"Card",props:{title:{type:String,default:""},shadow:{type:Boolean,default:!0}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["card",{"card-shadow":t.shadow}])},[o.$slots.header||t.title?(e.openBlock(),e.createElementBlock("div",W,[t.title?(e.openBlock(),e.createElementBlock("h3",X,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"header",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",K,[e.renderSlot(o.$slots,"default",{},void 0,!0)]),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",J,[e.renderSlot(o.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-1e2b2467"]]),Q={class:"modal-dialog"},Z={class:"modal-header"},ee={key:0,class:"modal-header-title"},te={class:"modal-body"},oe={key:0,class:"modal-footer"},ne={key:1,class:"modal-footer"},M=B({__name:"Modal",props:{visible:{type:Boolean,default:!1},title:{type:String,default:""},width:{type:String,default:"500px"},showFooter:{type:Boolean,default:!0}},emits:["close","cancel","confirm"],setup(t,{emit:o}){const l=o,a=()=>{l("close")},c=()=>{l("cancel")},r=()=>{l("confirm")};return(n,g)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["modal",{"modal-show":t.visible}])},[e.createElementVNode("div",Q,[e.createElementVNode("div",{class:"modal-content",style:e.normalizeStyle({width:t.width})},[e.createElementVNode("div",Z,[t.title?(e.openBlock(),e.createElementBlock("h3",ee,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"modal-header-close",onClick:a},"×")]),e.createElementVNode("div",te,[e.renderSlot(n.$slots,"default",{},void 0,!0)]),n.$slots.footer?(e.openBlock(),e.createElementBlock("div",oe,[e.renderSlot(n.$slots,"footer",{},void 0,!0)])):t.showFooter?(e.openBlock(),e.createElementBlock("div",ne,[e.createElementVNode("button",{class:"btn btn-secondary",onClick:c},"取消"),e.createElementVNode("button",{class:"btn btn-primary",onClick:r},"确定")])):e.createCommentVNode("",!0)],4)])],2)):e.createCommentVNode("",!0)}},[["__scopeId","data-v-39af2dcd"]]),le=["innerHTML"],ae={class:"text-sm font-medium"},se=["onClick"],T=B(Object.assign({name:"Message"},{__name:"Message",setup(t,{expose:o}){const l=e.ref([]),a={success:"bg-emerald-500/95 text-white",warning:"bg-amber-500/95 text-white",error:"bg-rose-500/95 text-white",info:"bg-sky-500/95 text-white"},c={success:`<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
     <path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>`,warning:`<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
@@ -7,7 +7,7 @@
     <path d="M15 9l-6 6M9 9l6 6" stroke-linecap="round"/>
   </svg>`,info:`<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-  </svg>`};let p=0;const l=c=>{const o=++p,r={id:o,type:c.type||"info",content:c.content||"",duration:c.duration??3e3,closable:c.closable??!1};return n.value.push(r),r.duration>0&&setTimeout(()=>{m(o)},r.duration),o},m=c=>{const o=n.value.findIndex(r=>r.id===c);o>-1&&n.value.splice(o,1)};return s({addMessage:l,removeMessage:m,clearAll:()=>{n.value=[]},success:(c,o={})=>l({...o,type:"success",content:c}),warning:(c,o={})=>l({...o,type:"warning",content:c}),error:(c,o={})=>l({...o,type:"error",content:c}),info:(c,o={})=>l({...o,type:"info",content:c})}),(c,o)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.TransitionGroup,{name:"message",tag:"div",class:"fixed top-4 left-1/2 -translate-x-1/2 z-[9999] flex flex-col items-center gap-3 pointer-events-none"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,r=>(e.openBlock(),e.createElementBlock("div",{key:r.id,class:e.normalizeClass(["pointer-events-auto flex items-center gap-3 px-5 py-3 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300",d[r.type]])},[e.createElementVNode("span",{class:"flex-shrink-0",innerHTML:i[r.type]},null,8,F),e.createElementVNode("span",R,e.toDisplayString(r.content),1),r.closable?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:ke=>m(r.id),class:"flex-shrink-0 ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"},[...o[0]||(o[0]=[e.createElementVNode("svg",{class:"w-4 h-4",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("path",{d:"M18 6L6 18M6 6l12 12"})],-1)])],8,Y)):e.createCommentVNode("",!0)],2))),128))]),_:1})]))}}),[["__scopeId","data-v-d727fd6c"]]);e.ref([]);let P=0;const q=t=>{const s=++P,n=t.type||"info",d=t.content||"",i=t.duration??3e3,p=t.closable??!1,l=document.createElement("div");l.className=`ld-message ld-message--${n}`,l.setAttribute("data-id",s);let f=`${{success:`<svg class="ld-message-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+  </svg>`};let r=0;const n=m=>{const s=++r,i={id:s,type:m.type||"info",content:m.content||"",duration:m.duration??3e3,closable:m.closable??!1};return l.value.push(i),i.duration>0&&setTimeout(()=>{g(s)},i.duration),s},g=m=>{const s=l.value.findIndex(i=>i.id===m);s>-1&&l.value.splice(s,1)};return o({addMessage:n,removeMessage:g,clearAll:()=>{l.value=[]},success:(m,s={})=>n({...s,type:"success",content:m}),warning:(m,s={})=>n({...s,type:"warning",content:m}),error:(m,s={})=>n({...s,type:"error",content:m}),info:(m,s={})=>n({...s,type:"info",content:m})}),(m,s)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.TransitionGroup,{name:"message",tag:"div",class:"fixed top-4 left-1/2 -translate-x-1/2 z-[9999] flex flex-col items-center gap-3 pointer-events-none"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,i=>(e.openBlock(),e.createElementBlock("div",{key:i.id,class:e.normalizeClass(["pointer-events-auto flex items-center gap-3 px-5 py-3 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300",a[i.type]])},[e.createElementVNode("span",{class:"flex-shrink-0",innerHTML:c[i.type]},null,8,le),e.createElementVNode("span",ae,e.toDisplayString(i.content),1),i.closable?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:C=>g(i.id),class:"flex-shrink-0 ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"},[...s[0]||(s[0]=[e.createElementVNode("svg",{class:"w-4 h-4",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("path",{d:"M18 6L6 18M6 6l12 12"})],-1)])],8,se)):e.createCommentVNode("",!0)],2))),128))]),_:1})]))}}),[["__scopeId","data-v-d727fd6c"]]),re=["src","alt"],ce={key:1,class:"slide-title"},ie={key:0,class:"carousel-indicators"},de=["onClick"],me={viewBox:"0 0 24 24",width:"24",height:"24"},pe=["d"],ge={viewBox:"0 0 24 24",width:"24",height:"24"},fe=["d"],I=B(Object.assign({name:"Carousel"},{__name:"Carousel",props:{items:{type:Array,default:()=>[]},height:{type:String,default:"300px"},direction:{type:String,default:"horizontal",validator:t=>["horizontal","vertical"].includes(t)},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},showIndicators:{type:Boolean,default:!0},showArrows:{type:Boolean,default:!0}},emits:["change"],setup(t,{expose:o,emit:l}){const a=t,c=l,r=e.ref(0);let n=null;const g=e.computed(()=>{const f=r.value*100;return a.direction==="vertical"?{transform:`translateY(-${f}%)`}:{transform:`translateX(-${f}%)`}}),u=()=>{r.value=(r.value+1)%a.items.length,c("change",r.value)},m=()=>{r.value=(r.value-1+a.items.length)%a.items.length,c("change",r.value)},s=f=>{r.value=f,c("change",r.value)},i=()=>{a.autoplay&&a.items.length>1&&(n=setInterval(u,a.interval))},C=()=>{n&&(clearInterval(n),n=null)};return e.onMounted(()=>{i()}),e.onUnmounted(()=>{C()}),o({next:u,prev:m,goTo:s,currentIndex:r}),(f,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["ld-carousel",{"ld-carousel--vertical":t.direction==="vertical"}]),style:e.normalizeStyle({height:t.height})},[e.createElementVNode("div",{class:"carousel-container",style:e.normalizeStyle(g.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(w,_)=>(e.openBlock(),e.createElementBlock("div",{key:_,class:e.normalizeClass(["carousel-slide",{active:_===r.value}])},[e.renderSlot(f.$slots,"item",{item:w,index:_},()=>[w.image?(e.openBlock(),e.createElementBlock("img",{key:0,src:w.image,alt:w.title||""},null,8,re)):e.createCommentVNode("",!0),w.title?(e.openBlock(),e.createElementBlock("div",ce,e.toDisplayString(w.title),1)):e.createCommentVNode("",!0)],!0)],2))),128))],4),t.showIndicators?(e.openBlock(),e.createElementBlock("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(w,_)=>(e.openBlock(),e.createElementBlock("span",{key:_,class:e.normalizeClass(["indicator",{active:_===r.value}]),onClick:V=>s(_)},null,10,de))),128))])):e.createCommentVNode("",!0),t.showArrows?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"carousel-arrow prev",onClick:m},[(e.openBlock(),e.createElementBlock("svg",me,[e.createElementVNode("path",{fill:"currentColor",d:t.direction==="vertical"?"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z":"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"},null,8,pe)]))]),e.createElementVNode("button",{class:"carousel-arrow next",onClick:u},[(e.openBlock(),e.createElementBlock("svg",ge,[e.createElementVNode("path",{fill:"currentColor",d:t.direction==="vertical"?"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z":"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"},null,8,fe)]))])],64)):e.createCommentVNode("",!0)],6))}}),[["__scopeId","data-v-42bf1623"]]),ue={key:1,class:"dots"},he={key:4,class:"bars"},ye={key:5,class:"loading-text"},v=B(Object.assign({name:"Loading"},{__name:"Loading",props:{type:{type:String,default:"spinner",validator:t=>["spinner","dots","ring","pulse","bars"].includes(t)},size:{type:String,default:"40px"},color:{type:String,default:"var(--ld-color-primary, #6366f1)"},text:{type:String,default:""},fullscreen:{type:Boolean,default:!1}},setup(t){const o=t,l=e.computed(()=>({width:o.size,height:o.size,"--spinner-color":o.color})),a=e.computed(()=>({width:o.size,height:o.size,"--ring-color":o.color}));return(c,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["ld-loading",[`ld-loading--${t.type}`,{"ld-loading--fullscreen":t.fullscreen}]])},[t.type==="spinner"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"spinner",style:e.normalizeStyle(l.value)},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,n=>e.createElementVNode("div",{key:n,class:"spinner-blade"})),64))],4)):t.type==="dots"?(e.openBlock(),e.createElementBlock("div",ue,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(3,n=>e.createElementVNode("span",{key:n,class:"dot",style:e.normalizeStyle({background:t.color})},null,4)),64))])):t.type==="ring"?(e.openBlock(),e.createElementBlock("div",{key:2,class:"ring",style:e.normalizeStyle(a.value)},[...r[0]||(r[0]=[e.createElementVNode("div",{class:"ring-inner"},null,-1)])],4)):t.type==="pulse"?(e.openBlock(),e.createElementBlock("div",{key:3,class:"pulse",style:e.normalizeStyle({background:t.color,width:t.size,height:t.size})},null,4)):t.type==="bars"?(e.openBlock(),e.createElementBlock("div",he,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,n=>e.createElementVNode("span",{key:n,class:"bar",style:e.normalizeStyle({background:t.color})},null,4)),64))])):e.createCommentVNode("",!0),t.text?(e.openBlock(),e.createElementBlock("div",ye,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-5052ea89"]]),ke={key:0,class:"ld-table-loading"},Be={key:0,class:"loading-text"},be={class:"ld-table"},we=["onClick"],_e={class:"th-content"},Ee={key:0},Ce=["colspan"],ze=["onClick"],D=B(Object.assign({name:"ldTable"},{__name:"Table",props:{columns:{type:Array,required:!0},data:{type:Array,default:()=>[]},bordered:{type:Boolean,default:!1},striped:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},api:{type:Function,default:null},autoLoad:{type:Boolean,default:!0},loadParams:{type:Object,default:()=>({})}},emits:["row-click","load-success","load-error"],setup(t,{expose:o,emit:l}){const a=t,c=l,r=e.ref(!1),n=e.ref([]),g=e.computed(()=>typeof a.api=="function"),u=e.computed(()=>a.loading||r.value),m=e.computed(()=>g.value?n.value:a.data),s=async(h={})=>{if(g.value){r.value=!0;try{const k={...a.loadParams,...h},p=await a.api(k);return n.value=Array.isArray(p)?p:p?.data||p?.list||[],c("load-success",n.value),n.value}catch(k){throw console.error("[ld-table] Load error:",k),c("load-error",k),k}finally{r.value=!1}}},i=(h={})=>s(h),C=()=>{n.value=[]};e.watch(()=>a.loadParams,h=>{g.value&&a.autoLoad&&s()},{deep:!0}),e.onMounted(()=>{g.value&&a.autoLoad&&s()});const f=e.ref(""),y=e.ref(""),w=h=>{f.value===h?(y.value=y.value==="asc"?"desc":y.value==="desc"?"":"asc",y.value||(f.value="")):(f.value=h,y.value="asc")},_=h=>f.value!==h?"":y.value==="asc"?"sort-asc":y.value==="desc"?"sort-desc":"",V=e.computed(()=>{const h=m.value;return!f.value||!y.value?h:[...h].sort((k,p)=>{const E=k[f.value],b=p[f.value];if(typeof E=="number"&&typeof b=="number")return y.value==="asc"?E-b:b-E;const U=String(E||""),q=String(b||"");return y.value==="asc"?U.localeCompare(q):q.localeCompare(U)})});return o({load:s,reload:i,clear:C,getData:()=>n.value}),(h,k)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["ld-table-wrapper",{"ld-table--bordered":t.bordered,"ld-table--striped":t.striped}])},[u.value?(e.openBlock(),e.createElementBlock("div",ke,[k[0]||(k[0]=e.createElementVNode("div",{class:"loading-spinner"},[e.createElementVNode("svg",{class:"circular",viewBox:"0 0 50 50"},[e.createElementVNode("circle",{class:"path",cx:"25",cy:"25",r:"20",fill:"none"})])],-1)),t.loadingText?(e.openBlock(),e.createElementBlock("span",Be,e.toDisplayString(t.loadingText),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("table",be,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,p=>(e.openBlock(),e.createElementBlock("th",{key:p.key,style:e.normalizeStyle({width:p.width,textAlign:p.align||"left"}),onClick:E=>p.sortable&&w(p.key)},[e.createElementVNode("div",_e,[e.createElementVNode("span",null,e.toDisplayString(p.title),1),p.sortable?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["sort-icon",_(p.key)])},[...k[1]||(k[1]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"14",height:"14"},[e.createElementVNode("path",{fill:"currentColor",d:"M7 10l5-5 5 5H7zm0 4l5 5 5-5H7z"})],-1)])],2)):e.createCommentVNode("",!0)])],12,we))),128))])]),e.createElementVNode("tbody",null,[!V.value.length&&!u.value?(e.openBlock(),e.createElementBlock("tr",Ee,[e.createElementVNode("td",{colspan:t.columns.length,class:"empty-cell"},[e.renderSlot(h.$slots,"empty",{},()=>[k[2]||(k[2]=e.createStaticVNode('<div class="empty-content" data-v-567f3024><svg viewBox="0 0 64 41" width="64" height="41" data-v-567f3024><g transform="translate(0 1)" fill="none" fill-rule="evenodd" data-v-567f3024><ellipse fill="var(--ld-color-bg-secondary, #f5f5f5)" cx="32" cy="33" rx="32" ry="7" data-v-567f3024></ellipse><g fill-rule="nonzero" stroke="var(--ld-color-border, #d9d9d9)" data-v-567f3024><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" data-v-567f3024></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--ld-color-bg, #fafafa)" data-v-567f3024></path></g></g></svg><span data-v-567f3024>暂无数据</span></div>',1))],!0)],8,Ce)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,(p,E)=>(e.openBlock(),e.createElementBlock("tr",{key:E,onClick:b=>h.$emit("row-click",p,E)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,b=>(e.openBlock(),e.createElementBlock("td",{key:b.key,style:e.normalizeStyle({textAlign:b.align||"left"})},[e.renderSlot(h.$slots,b.key,{row:p,index:E,value:p[b.key]},()=>[e.createTextVNode(e.toDisplayString(p[b.key]),1)],!0)],4))),128))],8,ze))),128))])])],2))}}),[["__scopeId","data-v-567f3024"]]),A=B({__name:"Backtop",props:{visibilityHeight:{type:Number,default:200},right:{type:Number,default:40},bottom:{type:Number,default:40},target:{type:String,default:""}},emits:["click"],setup(t,{expose:o,emit:l}){const a=t,c=l,r=e.ref(!1),n=e.shallowRef(null);e.shallowRef(null);const g=e.computed(()=>({right:`${a.right}px`,bottom:`${a.bottom}px`})),u=()=>a.target?document.querySelector(a.target)??window:window,m=()=>n.value===window?window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0:n.value?.scrollTop??0,s=()=>{r.value=m()>=a.visibilityHeight},i=f=>{C(),c("click",f)},C=()=>{n.value&&(n.value===window?window.scrollTo({top:0,behavior:"smooth"}):n.value.scrollTo({top:0,behavior:"smooth"}))};return e.onMounted(()=>{n.value=u(),n.value&&(n.value.addEventListener("scroll",s,{passive:!0}),s())}),e.onUnmounted(()=>{n.value&&n.value.removeEventListener("scroll",s)}),o({scrollToTop:C}),(f,y)=>(e.openBlock(),e.createBlock(e.Transition,{name:"ld-backtop-fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"ld-backtop",style:e.normalizeStyle(g.value),onClick:i},[e.renderSlot(f.$slots,"default",{},()=>[y[0]||(y[0]=e.createElementVNode("svg",{class:"ld-backtop-icon",viewBox:"0 0 24 24",width:"20",height:"20"},[e.createElementVNode("path",{fill:"currentColor",d:"M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"})],-1))],!0)],4),[[e.vShow,r.value]])]),_:3}))}},[["__scopeId","data-v-e2cc7059"]]);e.ref([]);let Se=0;const $e=t=>{const o=++Se,l=t.type||"info",a=t.content||"",c=t.duration??3e3,r=t.closable??!1,n=document.createElement("div");n.className=`ld-message ld-message--${l}`,n.setAttribute("data-id",o);let u=`${{success:`<svg class="ld-message-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
       <path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`,warning:`<svg class="ld-message-icon" viewBox="0 0 24 24" fill="currentColor">
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
@@ -16,11 +16,11 @@
       <path d="M15 9l-6 6M9 9l6 6" stroke-linecap="round"/>
     </svg>`,info:`<svg class="ld-message-icon" viewBox="0 0 24 24" fill="currentColor">
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-    </svg>`}[n]}<span class="ld-message-content">${d}</span>`;return p&&(f+=`<button class="ld-message-close" onclick="window.__ldMessageClose(${s})">
+    </svg>`}[l]}<span class="ld-message-content">${a}</span>`;return r&&(u+=`<button class="ld-message-close" onclick="window.__ldMessageClose(${o})">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M18 6L6 18M6 6l12 12"/>
       </svg>
-    </button>`),l.innerHTML=f,{id:s,element:l,duration:i}},G=()=>{let t=document.getElementById("ld-message-root");if(!t){t=document.createElement("div"),t.id="ld-message-root",document.body.appendChild(t);const s=document.createElement("style");s.textContent=`
+    </button>`),n.innerHTML=u,{id:o,element:n,duration:c}},xe=()=>{let t=document.getElementById("ld-message-root");if(!t){t=document.createElement("div"),t.id="ld-message-root",document.body.appendChild(t);const o=document.createElement("style");o.textContent=`
       #ld-message-root {
         position: fixed;
         top: 16px;
@@ -81,7 +81,7 @@
         from { opacity: 1; transform: translateY(0) scale(1); }
         to { opacity: 0; transform: translateY(-10px) scale(0.95); }
       }
-    `,document.head.appendChild(s)}return t},h=t=>{const s=document.getElementById("ld-message-root");if(!s)return;const n=s.querySelector(`[data-id="${t}"]`);n&&(n.classList.add("ld-message--closing"),setTimeout(()=>{n.remove()},200))};typeof window<"u"&&(window.__ldMessageClose=h);const u=t=>{const s=G(),{id:n,element:d,duration:i}=q(t);return s.appendChild(d),i>0&&setTimeout(()=>{h(n)},i),n},y={success:(t,s={})=>u({...s,type:"success",content:t}),warning:(t,s={})=>u({...s,type:"warning",content:t}),error:(t,s={})=>u({...s,type:"error",content:t}),info:(t,s={})=>u({...s,type:"info",content:t}),close:h,closeAll:()=>{const t=document.getElementById("ld-message-root");t&&(t.innerHTML="")}},U={class:"lzbutton-wrapper"},W={class:"button"},v=g(Object.assign({name:"Lzbutton"},{__name:"lzbutton",setup(t){return(s,n)=>(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("button",W,[n[1]||(n[1]=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 36 24"},[e.createElementVNode("path",{d:"m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"})],-1)),e.renderSlot(s.$slots,"default",{},()=>[n[0]||(n[0]=e.createTextVNode("Unlock Pro",-1))],!0)])]))}}),[["__scopeId","data-v-7124b716"]]),X={class:"Lztext-wrapper"},x=g(Object.assign({name:"Lztext"},{__name:"Lztext",setup(t){return(s,n)=>(e.openBlock(),e.createElementBlock("div",X,[...n[0]||(n[0]=[e.createStaticVNode('<div class="loader-wrapper" data-v-f22456dd><span class="loader-letter" data-v-f22456dd>G</span><span class="loader-letter" data-v-f22456dd>e</span><span class="loader-letter" data-v-f22456dd>n</span><span class="loader-letter" data-v-f22456dd>e</span><span class="loader-letter" data-v-f22456dd>r</span><span class="loader-letter" data-v-f22456dd>a</span><span class="loader-letter" data-v-f22456dd>t</span><span class="loader-letter" data-v-f22456dd>i</span><span class="loader-letter" data-v-f22456dd>n</span><span class="loader-letter" data-v-f22456dd>g</span><div class="loader" data-v-f22456dd></div></div>',1)])]))}}),[["__scopeId","data-v-f22456dd"]]),J={class:"lztheme-wrapper"},K={class:"theme__toggle-wrap"},Q=["checked"],C=g(Object.assign({name:"Lztheme"},{__name:"lztheme",props:{modelValue:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(t,{expose:s,emit:n}){let d=0;const i=`lztheme-toggle-${++d}-${Date.now()}`,p=t,l=n,m=e.ref(null),f=e.ref(p.modelValue);e.watch(()=>p.modelValue,o=>{f.value=o});const c=o=>{const r=o.target.checked;f.value=r,l("update:modelValue",r),l("change",r)};return s({toggle:()=>{m.value&&m.value.click()},setDark:o=>{f.value=o,l("update:modelValue",o),l("change",o)}}),(o,r)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("label",{for:i,class:"theme"},[e.createElementVNode("span",K,[e.createElementVNode("input",{id:i,ref_key:"toggleRef",ref:m,class:"theme__toggle",type:"checkbox",role:"switch",name:"theme",value:"dark",checked:f.value,onChange:c},null,40,Q),r[0]||(r[0]=e.createStaticVNode('<span class="theme__icon" data-v-e887d581><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span></span>',1))])])]))}}),[["__scopeId","data-v-e887d581"]]),z={Lzbutton:v,Lztext:x,Lztheme:C},Z=[{name:"Button",type:"vue",label:"Button 按钮",code:`<template>
+    `,document.head.appendChild(o)}return t},S=t=>{const o=document.getElementById("ld-message-root");if(!o)return;const l=o.querySelector(`[data-id="${t}"]`);l&&(l.classList.add("ld-message--closing"),setTimeout(()=>{l.remove()},200))};typeof window<"u"&&(window.__ldMessageClose=S);const z=t=>{const o=xe(),{id:l,element:a,duration:c}=$e(t);return o.appendChild(a),c>0&&setTimeout(()=>{S(l)},c),l},$={success:(t,o={})=>z({...o,type:"success",content:t}),warning:(t,o={})=>z({...o,type:"warning",content:t}),error:(t,o={})=>z({...o,type:"error",content:t}),info:(t,o={})=>z({...o,type:"info",content:t}),close:S,closeAll:()=>{const t=document.getElementById("ld-message-root");t&&(t.innerHTML="")}},Ve={class:"lzbutton-wrapper"},Ne={class:"button"},F=B(Object.assign({name:"Lzbutton"},{__name:"lzbutton",setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("div",Ve,[e.createElementVNode("button",Ne,[l[1]||(l[1]=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 36 24"},[e.createElementVNode("path",{d:"m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"})],-1)),e.renderSlot(o.$slots,"default",{},()=>[l[0]||(l[0]=e.createTextVNode("Unlock Pro",-1))],!0)])]))}}),[["__scopeId","data-v-7124b716"]]),Le={class:"Lztext-wrapper"},Me={class:"loader-wrapper"},O=B(Object.assign({name:"Lztext"},{__name:"Lztext",props:{text:{type:String,default:"Generating"}},setup(t){const o=t,l=e.computed(()=>o.text.split(""));return(a,c)=>(e.openBlock(),e.createElementBlock("div",Le,[e.createElementVNode("div",Me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(r,n)=>(e.openBlock(),e.createElementBlock("span",{key:n,class:"loader-letter",style:e.normalizeStyle({animationDelay:`${.1+n*.105}s`})},e.toDisplayString(r===" "?" ":r),5))),128)),c[0]||(c[0]=e.createElementVNode("div",{class:"loader"},null,-1))])]))}}),[["__scopeId","data-v-2cca50b0"]]),Te={class:"lztheme-wrapper"},Ie={class:"theme__toggle-wrap"},ve=["checked"],j=B(Object.assign({name:"Lztheme"},{__name:"lztheme",props:{modelValue:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(t,{expose:o,emit:l}){let a=0;const c=`lztheme-toggle-${++a}-${Date.now()}`,r=t,n=l,g=e.ref(null),u=e.ref(r.modelValue);e.watch(()=>r.modelValue,s=>{u.value=s});const m=s=>{const i=s.target.checked;u.value=i,n("update:modelValue",i),n("change",i)};return o({toggle:()=>{g.value&&g.value.click()},setDark:s=>{u.value=s,n("update:modelValue",s),n("change",s)}}),(s,i)=>(e.openBlock(),e.createElementBlock("div",Te,[e.createElementVNode("label",{for:c,class:"theme"},[e.createElementVNode("span",Ie,[e.createElementVNode("input",{id:c,ref_key:"toggleRef",ref:g,class:"theme__toggle",type:"checkbox",role:"switch",name:"theme",value:"dark",checked:u.value,onChange:m},null,40,ve),i[0]||(i[0]=e.createStaticVNode('<span class="theme__icon" data-v-e887d581><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span></span>',1))])])]))}}),[["__scopeId","data-v-e887d581"]]),H={Lzbutton:F,Lztext:O,Lztheme:j},De=[{name:"Button",type:"vue",label:"Button 按钮",code:`<template>
   <Button type="primary">主要按钮</Button>
   <Button type="success">成功按钮</Button>
   <Button type="warning">警告按钮</Button>
@@ -160,4 +160,59 @@ const showInfo = () => {
   gap: 12px;
   flex-wrap: wrap;
 }
-</style>`}],_=new Map;function $(t){return!t||!t.name?(console.warn("[LittleDizzy] Snippet must have a name property"),!1):(_.set(t.name,{name:t.name,type:t.type||"html",label:t.label||t.name,code:t.code||"",isCustom:t.isCustom||!1,...t}),!0)}function S(t){if(!Array.isArray(t))return console.warn("[LittleDizzy] registerSnippets expects an array"),0;let s=0;return t.forEach(n=>{$(n)&&s++}),s}function ee(){const t={};return _.forEach((s,n)=>{t[n]=s}),t}function te(t){return _.get(t)}S(Z);const E={Button:k,Card:b,Modal:w,Message:B,...z},se=(t,s={})=>{Object.entries(E).forEach(([n,d])=>{t.component(s.prefix?`${s.prefix}${n}`:n,d)}),t.config.globalProperties.$message=y,t.provide("message",y)},ne=ee,oe=$,ae=S,le=te,re={install:se,...E};a.Button=k,a.Card=b,a.Lzbutton=v,a.Lztext=x,a.Lztheme=C,a.Message=B,a.Modal=w,a.customComponents=z,a.default=re,a.getSnippet=le,a.message=y,a.registerSnippet=oe,a.registerSnippets=ae,a.snippets=ne,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+</style>`},{name:"Carousel",type:"vue",label:"Carousel 轮播图",code:`<template>
+  <Carousel :items="items" height="300px" />
+</template>
+
+<script setup>
+import { Carousel } from 'little-dizzy'
+
+const items = [
+  { image: 'https://picsum.photos/800/300?random=1', title: '图片 1' },
+  { image: 'https://picsum.photos/800/300?random=2', title: '图片 2' },
+  { image: 'https://picsum.photos/800/300?random=3', title: '图片 3' }
+]
+<\/script>`},{name:"Loading",type:"vue",label:"Loading 加载",code:`<template>
+  <Loading type="spinner" />
+  <Loading type="dots" />
+  <Loading type="ring" />
+  <Loading type="pulse" />
+  <Loading type="bars" />
+</template>
+
+<script setup>
+import { Loading } from 'little-dizzy'
+<\/script>`},{name:"Table",type:"vue",label:"Table 表格",code:`<template>
+  <Table :columns="columns" :data="data" bordered striped />
+</template>
+
+<script setup>
+import { Table } from 'little-dizzy'
+
+const columns = [
+  { key: 'name', title: '姓名', width: '120px' },
+  { key: 'age', title: '年龄', width: '80px' },
+  { key: 'address', title: '地址' }
+]
+
+const data = [
+  { name: '张三', age: 28, address: '北京市朝阳区' },
+  { name: '李四', age: 32, address: '上海市浦东新区' },
+  { name: '王五', age: 25, address: '广州市天河区' }
+]
+<\/script>`},{name:"Backtop",type:"vue",label:"Backtop 回到顶部",code:`<template>
+  <!-- 基础用法 -->
+  <Backtop />
+
+  <!-- 指定滚动容器 -->
+  <Backtop target=".my-container" :visibility-height="100" />
+
+  <!-- 自定义内容 -->
+  <Backtop>
+    <span style="font-size: 12px;">UP</span>
+  </Backtop>
+</template>
+
+<script setup>
+import { Backtop } from 'little-dizzy'
+<\/script>`}],x=new Map;function P(t){return!t||!t.name?(console.warn("[LittleDizzy] Snippet must have a name property"),!1):(x.set(t.name,{name:t.name,type:t.type||"html",label:t.label||t.name,code:t.code||"",isCustom:t.isCustom||!1,...t}),!0)}function R(t){if(!Array.isArray(t))return console.warn("[LittleDizzy] registerSnippets expects an array"),0;let o=0;return t.forEach(l=>{P(l)&&o++}),o}function Ae(){const t={};return x.forEach((o,l)=>{t[l]=o}),t}function Fe(t){return x.get(t)}R(De);const Y={Button:N,Card:L,Modal:M,Message:T,Carousel:I,Loading:v,Table:D,Backtop:A,...H},Oe=(t,o={})=>{Object.entries(Y).forEach(([l,a])=>{t.component(o.prefix?`${o.prefix}${l}`:l,a)}),t.config.globalProperties.$message=$,t.provide("message",$)},je=Ae,He=P,Pe=R,Re=Fe,Ye={install:Oe,...Y};d.Backtop=A,d.Button=N,d.Card=L,d.Carousel=I,d.Loading=v,d.Lzbutton=F,d.Lztext=O,d.Lztheme=j,d.Message=T,d.Modal=M,d.Table=D,d.customComponents=H,d.default=Ye,d.getSnippet=Re,d.message=$,d.registerSnippet=He,d.registerSnippets=Pe,d.snippets=je,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "little-dizzy",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "LittleDizzy - 一个支持代码片段的 Vue 3 UI 组件库",
   "type": "module",
   "main": "dist/little-dizzy.umd.cjs",
@@ -49,7 +49,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "little-dizzy": "^2.3.0",
+    "little-dizzy": "^2.6.0",
     "vue": "^3.0.0",
     "vue-router": "^4.6.4"
   },
@@ -60,4 +60,4 @@
     "tailwindcss": "^4.1.18",
     "vite": "^7.2.4"
   }
-}
+}

package/src/components/Backtop.vue

@@ -0,0 +1,151 @@
+<template>
+  <Transition name="ld-backtop-fade">
+    <div v-show="visible" class="ld-backtop" :style="positionStyle" @click="handleClick">
+      <slot>
+        <svg class="ld-backtop-icon" viewBox="0 0 24 24" width="20" height="20">
+          <path fill="currentColor" d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z" />
+        </svg>
+      </slot>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, shallowRef } from 'vue'
+
+const props = defineProps({
+  // 滚动高度达到此参数值才出现
+  visibilityHeight: {
+    type: Number,
+    default: 200
+  },
+  // 距离页面右边距
+  right: {
+    type: Number,
+    default: 40
+  },
+  // 距离页面底部距离
+  bottom: {
+    type: Number,
+    default: 40
+  },
+  // 触发滚动的对象
+  target: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const visible = ref(false)
+const container = shallowRef(null)
+const el = shallowRef(null)
+
+const positionStyle = computed(() => ({
+  right: `${props.right}px`,
+  bottom: `${props.bottom}px`
+}))
+
+// 获取滚动容器
+const getContainer = () => {
+  if (props.target) {
+    return document.querySelector(props.target) ?? window
+  }
+  return window
+}
+
+// 获取滚动距离
+const getScrollTop = () => {
+  if (container.value === window) {
+    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+  }
+  return container.value?.scrollTop ?? 0
+}
+
+// 滚动处理
+const handleScroll = () => {
+  visible.value = getScrollTop() >= props.visibilityHeight
+}
+
+// 点击处理
+const handleClick = (event) => {
+  scrollToTop()
+  emit('click', event)
+}
+
+// 滚动到顶部
+const scrollToTop = () => {
+  if (!container.value) return
+
+  if (container.value === window) {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  } else {
+    container.value.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+}
+
+onMounted(() => {
+  container.value = getContainer()
+  if (container.value) {
+    container.value.addEventListener('scroll', handleScroll, { passive: true })
+    handleScroll()
+  }
+})
+
+onUnmounted(() => {
+  if (container.value) {
+    container.value.removeEventListener('scroll', handleScroll)
+  }
+})
+
+// 暴露方法
+defineExpose({
+  scrollToTop
+})
+</script>
+
+<style scoped>
+.ld-backtop {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  background-color: var(--ld-card-bg, #fff);
+  border-radius: 50%;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  z-index: 1000;
+  color: var(--ld-color-primary, #6366f1);
+}
+
+.ld-backtop:hover {
+  background-color: var(--ld-color-primary, #6366f1);
+  color: #fff;
+}
+
+.ld-backtop-icon {
+  display: block;
+}
+
+/* 动画 */
+.ld-backtop-fade-enter-active,
+.ld-backtop-fade-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.ld-backtop-fade-enter-from,
+.ld-backtop-fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+</style>

package/src/components/Carousel.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="ld-carousel" :class="{ 'ld-carousel--vertical': direction === 'vertical' }" :style="{ height: height }">
+    <div class="carousel-container" :style="containerStyle">
+      <div v-for="(item, index) in items" :key="index" class="carousel-slide"
+        :class="{ active: index === currentIndex }">
+        <slot name="item" :item="item" :index="index">
+          <img v-if="item.image" :src="item.image" :alt="item.title || ''" />
+          <div v-if="item.title" class="slide-title">{{ item.title }}</div>
+        </slot>
+      </div>
+    </div>
+
+    <!-- 指示器 -->
+    <div v-if="showIndicators" class="carousel-indicators">
+      <span v-for="(_, index) in items" :key="index" class="indicator" :class="{ active: index === currentIndex }"
+        @click="goTo(index)" />
+    </div>
+
+    <!-- 箭头 -->
+    <template v-if="showArrows">
+      <button class="carousel-arrow prev" @click="prev">
+        <svg viewBox="0 0 24 24" width="24" height="24">
+          <path fill="currentColor" :d="direction === 'vertical'
+            ? 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'
+            : 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'" />
+        </svg>
+      </button>
+      <button class="carousel-arrow next" @click="next">
+        <svg viewBox="0 0 24 24" width="24" height="24">
+          <path fill="currentColor" :d="direction === 'vertical'
+            ? 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'
+            : 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'" />
+        </svg>
+      </button>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+defineOptions({
+  name: 'Carousel'
+})
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: String,
+    default: '300px'
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (val) => ['horizontal', 'vertical'].includes(val)
+  },
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  interval: {
+    type: Number,
+    default: 3000
+  },
+  showIndicators: {
+    type: Boolean,
+    default: true
+  },
+  showArrows: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const currentIndex = ref(0)
+let timer = null
+
+const containerStyle = computed(() => {
+  const offset = currentIndex.value * 100
+  return props.direction === 'vertical'
+    ? { transform: `translateY(-${offset}%)` }
+    : { transform: `translateX(-${offset}%)` }
+})
+
+const next = () => {
+  currentIndex.value = (currentIndex.value + 1) % props.items.length
+  emit('change', currentIndex.value)
+}
+
+const prev = () => {
+  currentIndex.value = (currentIndex.value - 1 + props.items.length) % props.items.length
+  emit('change', currentIndex.value)
+}
+
+const goTo = (index) => {
+  currentIndex.value = index
+  emit('change', currentIndex.value)
+}
+
+const startAutoplay = () => {
+  if (props.autoplay && props.items.length > 1) {
+    timer = setInterval(next, props.interval)
+  }
+}
+
+const stopAutoplay = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+onMounted(() => {
+  startAutoplay()
+})
+
+onUnmounted(() => {
+  stopAutoplay()
+})
+
+defineExpose({
+  next,
+  prev,
+  goTo,
+  currentIndex
+})
+</script>
+
+<style scoped>
+.ld-carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--ld-color-bg-secondary, #f5f5f5);
+}
+
+.carousel-container {
+  display: flex;
+  height: 100%;
+  transition: transform 0.5s ease;
+}
+
+.carousel-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.slide-title {
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #fff;
+  font-size: 18px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+
+.indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.indicator.active {
+  background: #fff;
+  width: 24px;
+  border-radius: 4px;
+}
+
+.carousel-arrow {
+  position: absolute;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.carousel-arrow:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.carousel-arrow.prev {
+  left: -50px;
+  transform: translateY(-50%);
+}
+
+.carousel-arrow.next {
+  right: -50px;
+  transform: translateY(-50%);
+}
+
+.ld-carousel:hover .carousel-arrow.prev {
+  left: 12px;
+}
+
+.ld-carousel:hover .carousel-arrow.next {
+  right: 12px;
+}
+
+/* 垂直方向样式 */
+.ld-carousel--vertical .carousel-container {
+  flex-direction: column;
+}
+
+.ld-carousel--vertical .carousel-slide {
+  width: 100%;
+  height: 100%;
+}
+
+.ld-carousel--vertical .carousel-indicators {
+  flex-direction: column;
+  right: 12px;
+  top: 50%;
+  left: auto;
+  bottom: auto;
+  transform: translateY(-50%);
+}
+
+.ld-carousel--vertical .indicator.active {
+  width: 8px;
+  height: 24px;
+}
+
+.ld-carousel--vertical .carousel-arrow {
+  left: 50%;
+  right: auto;
+}
+
+.ld-carousel--vertical .carousel-arrow.prev {
+  top: -50px;
+  bottom: auto;
+  transform: translateX(-50%);
+}
+
+.ld-carousel--vertical .carousel-arrow.next {
+  top: auto;
+  bottom: -50px;
+  transform: translateX(-50%);
+}
+
+.ld-carousel--vertical:hover .carousel-arrow.prev {
+  left: 50%;
+  top: 12px;
+}
+
+.ld-carousel--vertical:hover .carousel-arrow.next {
+  right: auto;
+  bottom: 12px;
+}
+</style>