little-dizzy 2.4.0 → 2.5.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(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.LittleDizzy={},i.Vue))})(this,(function(i,e){"use strict";const b=(t,o)=>{const n=t.__vccOpts||t;for(const[l,c]of o)n[l]=c;return n},q=["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(n,l)=>(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:l[0]||(l[0]=c=>n.$emit("click",c))},[e.renderSlot(n.$slots,"default",{},void 0,!0)],10,q))}},[["__scopeId","data-v-75f082b2"]]),G={key:0,class:"card-header"},W={key:0,class:"card-header-title"},X={class:"card-body"},K={key:1,class:"card-footer"},L=b({__name:"Card",props:{title:{type:String,default:""},shadow:{type:Boolean,default:!0}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["card",{"card-shadow":t.shadow}])},[o.$slots.header||t.title?(e.openBlock(),e.createElementBlock("div",G,[t.title?(e.openBlock(),e.createElementBlock("h3",W,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"header",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",X,[e.renderSlot(o.$slots,"default",{},void 0,!0)]),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",K,[e.renderSlot(o.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-1e2b2467"]]),J={class:"modal-dialog"},Q={class:"modal-header"},Z={key:0,class:"modal-header-title"},ee={class:"modal-body"},te={key:0,class:"modal-footer"},oe={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 n=o,l=()=>{n("close")},c=()=>{n("cancel")},r=()=>{n("confirm")};return(a,g)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["modal",{"modal-show":t.visible}])},[e.createElementVNode("div",J,[e.createElementVNode("div",{class:"modal-content",style:e.normalizeStyle({width:t.width})},[e.createElementVNode("div",Q,[t.title?(e.openBlock(),e.createElementBlock("h3",Z,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"modal-header-close",onClick:l},"×")]),e.createElementVNode("div",ee,[e.renderSlot(a.$slots,"default",{},void 0,!0)]),a.$slots.footer?(e.openBlock(),e.createElementBlock("div",te,[e.renderSlot(a.$slots,"footer",{},void 0,!0)])):t.showFooter?(e.openBlock(),e.createElementBlock("div",oe,[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"]]),ne=["innerHTML"],ae={class:"text-sm font-medium"},le=["onClick"],I=b(Object.assign({name:"Message"},{__name:"Message",setup(t,{expose:o}){const n=e.ref([]),l={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 a=m=>{const s=++r,d={id:s,type:m.type||"info",content:m.content||"",duration:m.duration??3e3,closable:m.closable??!1};return n.value.push(d),d.duration>0&&setTimeout(()=>{g(s)},d.duration),s},g=m=>{const s=n.value.findIndex(d=>d.id===m);s>-1&&n.value.splice(s,1)};return o({addMessage:a,removeMessage:g,clearAll:()=>{n.value=[]},success:(m,s={})=>a({...s,type:"success",content:m}),warning:(m,s={})=>a({...s,type:"warning",content:m}),error:(m,s={})=>a({...s,type:"error",content:m}),info:(m,s={})=>a({...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(n.value,d=>(e.openBlock(),e.createElementBlock("div",{key:d.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",l[d.type]])},[e.createElementVNode("span",{class:"flex-shrink-0",innerHTML:c[d.type]},null,8,ne),e.createElementVNode("span",ae,e.toDisplayString(d.content),1),d.closable?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:C=>g(d.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,le)):e.createCommentVNode("",!0)],2))),128))]),_:1})]))}}),[["__scopeId","data-v-d727fd6c"]]),se=["src","alt"],re={key:1,class:"slide-title"},ce={key:0,class:"carousel-indicators"},ie=["onClick"],de={viewBox:"0 0 24 24",width:"24",height:"24"},me=["d"],pe={viewBox:"0 0 24 24",width:"24",height:"24"},ge=["d"],T=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:n}){const l=t,c=n,r=e.ref(0);let a=null;const g=e.computed(()=>{const y=r.value*100;return l.direction==="vertical"?{transform:`translateY(-${y}%)`}:{transform:`translateX(-${y}%)`}}),u=()=>{r.value=(r.value+1)%l.items.length,c("change",r.value)},m=()=>{r.value=(r.value-1+l.items.length)%l.items.length,c("change",r.value)},s=y=>{r.value=y,c("change",r.value)},d=()=>{l.autoplay&&l.items.length>1&&(a=setInterval(u,l.interval))},C=()=>{a&&(clearInterval(a),a=null)};return e.onMounted(()=>{d()}),e.onUnmounted(()=>{C()}),o({next:u,prev:m,goTo:s,currentIndex:r}),(y,k)=>(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(y.$slots,"item",{item:w,index:_},()=>[w.image?(e.openBlock(),e.createElementBlock("img",{key:0,src:w.image,alt:w.title||""},null,8,se)):e.createCommentVNode("",!0),w.title?(e.openBlock(),e.createElementBlock("div",re,e.toDisplayString(w.title),1)):e.createCommentVNode("",!0)],!0)],2))),128))],4),t.showIndicators?(e.openBlock(),e.createElementBlock("div",ce,[(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,ie))),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",de,[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,me)]))]),e.createElementVNode("button",{class:"carousel-arrow next",onClick:u},[(e.openBlock(),e.createElementBlock("svg",pe,[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,ge)]))])],64)):e.createCommentVNode("",!0)],6))}}),[["__scopeId","data-v-42bf1623"]]),fe={key:1,class:"dots"},ue={key:4,class:"bars"},ye={key:5,class:"loading-text"},D=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,n=e.computed(()=>({width:o.size,height:o.size,"--spinner-color":o.color})),l=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(n.value)},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,a=>e.createElementVNode("div",{key:a,class:"spinner-blade"})),64))],4)):t.type==="dots"?(e.openBlock(),e.createElementBlock("div",fe,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(3,a=>e.createElementVNode("span",{key:a,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(l.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",ue,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,a=>e.createElementVNode("span",{key:a,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"]]),he={key:0,class:"ld-table-loading"},ke={key:0,class:"loading-text"},Be={class:"ld-table"},be=["onClick"],we={class:"th-content"},_e={key:0},Ee=["colspan"],ze=["onClick"],A=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:n}){const l=t,c=n,r=e.ref(!1),a=e.ref([]),g=e.computed(()=>typeof l.api=="function"),u=e.computed(()=>l.loading||r.value),m=e.computed(()=>g.value?a.value:l.data),s=async(f={})=>{if(g.value){r.value=!0;try{const h={...l.loadParams,...f},p=await l.api(h);return a.value=Array.isArray(p)?p:p?.data||p?.list||[],c("load-success",a.value),a.value}catch(h){throw console.error("[ld-table] Load error:",h),c("load-error",h),h}finally{r.value=!1}}},d=(f={})=>s(f),C=()=>{a.value=[]};e.watch(()=>l.loadParams,f=>{g.value&&l.autoLoad&&s()},{deep:!0}),e.onMounted(()=>{g.value&&l.autoLoad&&s()});const y=e.ref(""),k=e.ref(""),w=f=>{y.value===f?(k.value=k.value==="asc"?"desc":k.value==="desc"?"":"asc",k.value||(y.value="")):(y.value=f,k.value="asc")},_=f=>y.value!==f?"":k.value==="asc"?"sort-asc":k.value==="desc"?"sort-desc":"",V=e.computed(()=>{const f=m.value;return!y.value||!k.value?f:[...f].sort((h,p)=>{const E=h[y.value],B=p[y.value];if(typeof E=="number"&&typeof B=="number")return k.value==="asc"?E-B:B-E;const R=String(E||""),U=String(B||"");return k.value==="asc"?R.localeCompare(U):U.localeCompare(R)})});return o({load:s,reload:d,clear:C,getData:()=>a.value}),(f,h)=>(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",he,[h[0]||(h[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",ke,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",we,[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)])},[...h[1]||(h[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,be))),128))])]),e.createElementVNode("tbody",null,[!V.value.length&&!u.value?(e.openBlock(),e.createElementBlock("tr",_e,[e.createElementVNode("td",{colspan:t.columns.length,class:"empty-cell"},[e.renderSlot(f.$slots,"empty",{},()=>[h[2]||(h[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,Ee)])):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=>f.$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(f.$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"]]);e.ref([]);let Ce=0;const Se=t=>{const o=++Ce,n=t.type||"info",l=t.content||"",c=t.duration??3e3,r=t.closable??!1,a=document.createElement("div");a.className=`ld-message ld-message--${n}`,a.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>`}[n]}<span class="ld-message-content">${l}</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>`),a.innerHTML=u,{id:o,element:a,duration:c}},$e=()=>{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 n=o.querySelector(`[data-id="${t}"]`);n&&(n.classList.add("ld-message--closing"),setTimeout(()=>{n.remove()},200))};typeof window<"u"&&(window.__ldMessageClose=S);const z=t=>{const o=$e(),{id:n,element:l,duration:c}=Se(t);return o.appendChild(l),c>0&&setTimeout(()=>{S(n)},c),n},$={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="")}},xe={class:"lzbutton-wrapper"},Ve={class:"button"},F=b(Object.assign({name:"Lzbutton"},{__name:"lzbutton",setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("button",Ve,[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(o.$slots,"default",{},()=>[n[0]||(n[0]=e.createTextVNode("Unlock Pro",-1))],!0)])]))}}),[["__scopeId","data-v-7124b716"]]),Ne={class:"Lztext-wrapper"},Le={class:"loader-wrapper"},j=b(Object.assign({name:"Lztext"},{__name:"Lztext",props:{text:{type:String,default:"Generating"}},setup(t){const o=t,n=e.computed(()=>o.text.split(""));return(l,c)=>(e.openBlock(),e.createElementBlock("div",Ne,[e.createElementVNode("div",Le,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(r,a)=>(e.openBlock(),e.createElementBlock("span",{key:a,class:"loader-letter",style:e.normalizeStyle({animationDelay:`${.1+a*.105}s`})},e.toDisplayString(r===" "?" ":r),5))),128)),c[0]||(c[0]=e.createElementVNode("div",{class:"loader"},null,-1))])]))}}),[["__scopeId","data-v-2cca50b0"]]),Me={class:"lztheme-wrapper"},Ie={class:"theme__toggle-wrap"},Te=["checked"],O=b(Object.assign({name:"Lztheme"},{__name:"lztheme",props:{modelValue:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(t,{expose:o,emit:n}){let l=0;const c=`lztheme-toggle-${++l}-${Date.now()}`,r=t,a=n,g=e.ref(null),u=e.ref(r.modelValue);e.watch(()=>r.modelValue,s=>{u.value=s});const m=s=>{const d=s.target.checked;u.value=d,a("update:modelValue",d),a("change",d)};return o({toggle:()=>{g.value&&g.value.click()},setDark:s=>{u.value=s,a("update:modelValue",s),a("change",s)}}),(s,d)=>(e.openBlock(),e.createElementBlock("div",Me,[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,Te),d[0]||(d[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"]]),v={Lzbutton:F,Lztext:j,Lztheme:O},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 H(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 P(t){if(!Array.isArray(t))return console.warn("[LittleDizzy] registerSnippets expects an array"),0;let o=0;return t.forEach(n=>{H(n)&&o++}),o}function Ae(){const t={};return x.forEach((o,n)=>{t[n]=o}),t}function Fe(t){return x.get(t)}P(De);const Y={Button:N,Card:L,Modal:M,Message:I,Carousel:T,Loading:D,Table:A,...v},je=(t,o={})=>{Object.entries(Y).forEach(([n,l])=>{t.component(o.prefix?`${o.prefix}${n}`:n,l)}),t.config.globalProperties.$message=$,t.provide("message",$)},Oe=Ae,ve=H,He=P,Pe=Fe,Ye={install:je,...Y};i.Button=N,i.Card=L,i.Carousel=T,i.Loading=D,i.Lzbutton=F,i.Lztext=j,i.Lztheme=O,i.Message=I,i.Modal=M,i.Table=A,i.customComponents=v,i.default=Ye,i.getSnippet=Pe,i.message=$,i.registerSnippet=ve,i.registerSnippets=He,i.snippets=Oe,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "little-dizzy",
-  "version": "2.4.0",
+  "version": "2.5.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.4.0",
     "vue": "^3.0.0",
     "vue-router": "^4.6.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>