little-dizzy 2.1.0 → 2.3.0

package/dist/little-dizzy.umd.cjs

@@ -1,4 +1,87 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.LittleDizzy={},l.Vue))})(this,(function(l,e){"use strict";const r=(t,n)=>{const o=t.__vccOpts||t;for(const[a,s]of n)o[a]=s;return o},h=["disabled"],d=r({__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:n}){return(o,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]=s=>o.$emit("click",s))},[e.renderSlot(o.$slots,"default",{},void 0,!0)],10,h))}},[["__scopeId","data-v-75f082b2"]]),_={key:0,class:"card-header"},k={key:0,class:"card-header-title"},S={class:"card-body"},g={key:1,class:"card-footer"},m=r({__name:"Card",props:{title:{type:String,default:""},shadow:{type:Boolean,default:!0}},setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["card",{"card-shadow":t.shadow}])},[n.$slots.header||t.title?(e.openBlock(),e.createElementBlock("div",_,[t.title?(e.openBlock(),e.createElementBlock("h3",k,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"header",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",S,[e.renderSlot(n.$slots,"default",{},void 0,!0)]),n.$slots.footer?(e.openBlock(),e.createElementBlock("div",g,[e.renderSlot(n.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-2d83e63a"]]),$={class:"modal-dialog"},C={class:"modal-content"},z={class:"modal-header"},E={key:0,class:"modal-header-title"},V={class:"modal-body"},N={key:0,class:"modal-footer"},w={key:1,class:"modal-footer"},p=r({__name:"Modal",props:{visible:{type:Boolean,default:!1},title:{type:String,default:""},showFooter:{type:Boolean,default:!0}},emits:["close","cancel","confirm"],setup(t,{emit:n}){const o=n,a=()=>{o("close")},s=()=>{o("cancel")},q=()=>{o("confirm")};return(c,W)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["modal",{"modal-show":t.visible}])},[e.createElementVNode("div",$,[e.createElementVNode("div",C,[e.createElementVNode("div",z,[t.title?(e.openBlock(),e.createElementBlock("h3",E,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"modal-header-close",onClick:a},"×")]),e.createElementVNode("div",V,[e.renderSlot(c.$slots,"default",{},void 0,!0)]),c.$slots.footer?(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(c.$slots,"footer",{},void 0,!0)])):t.showFooter?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("button",{class:"btn btn-secondary",onClick:s},"取消"),e.createElementVNode("button",{class:"btn btn-primary",onClick:q},"确定")])):e.createCommentVNode("",!0)])])],2)):e.createCommentVNode("",!0)}},[["__scopeId","data-v-c66cec30"]]),M={class:"lzbutton-wrapper"},u=r(Object.assign({name:"Lzbutton"},{__name:"lzbutton",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("div",M,[...o[0]||(o[0]=[e.createElementVNode("button",{class:"button"},[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"})]),e.createTextVNode(" Unlock Pro ")],-1)])]))}}),[["__scopeId","data-v-c2498af3"]]),f={Lzbutton:u},L=[{name:"Button",type:"vue",label:"Button 按钮",code:`<template>
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.LittleDizzy={},o.Vue))})(this,(function(o,e){"use strict";const m=(t,s)=>{const n=t.__vccOpts||t;for(const[r,i]of s)n[r]=i;return n},M=["disabled"],_=m({__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,r)=>(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:r[0]||(r[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"},v={class:"card-body"},L={key:1,class:"card-footer"},b=m({__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",v,[e.renderSlot(s.$slots,"default",{},void 0,!0)]),s.$slots.footer?(e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(s.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-2d83e63a"]]),I={class:"modal-dialog"},T={class:"modal-header"},j={key:0,class:"modal-header-title"},O={class:"modal-body"},A={key:0,class:"modal-footer"},D={key:1,class:"modal-footer"},k=m({__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,r=()=>{n("close")},i=()=>{n("cancel")},p=()=>{n("confirm")};return(c,f)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["modal",{"modal-show":t.visible}])},[e.createElementVNode("div",I,[e.createElementVNode("div",{class:"modal-content",style:e.normalizeStyle({width:t.width})},[e.createElementVNode("div",T,[t.title?(e.openBlock(),e.createElementBlock("h3",j,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"modal-header-close",onClick:r},"×")]),e.createElementVNode("div",O,[e.renderSlot(c.$slots,"default",{},void 0,!0)]),c.$slots.footer?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(c.$slots,"footer",{},void 0,!0)])):t.showFooter?(e.openBlock(),e.createElementBlock("div",D,[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"]]),H=["innerHTML"],F={class:"text-sm font-medium"},Y=["onClick"],w=m(Object.assign({name:"Message"},{__name:"Message",setup(t,{expose:s}){const n=e.ref([]),r={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">
+    <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"/>
+  </svg>`,error:`<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+    <circle cx="12" cy="12" r="10"/>
+    <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 c=l=>{const a=++p,d={id:a,type:l.type||"info",content:l.content||"",duration:l.duration??3e3,closable:l.closable??!1};return n.value.push(d),d.duration>0&&setTimeout(()=>{f(a)},d.duration),a},f=l=>{const a=n.value.findIndex(d=>d.id===l);a>-1&&n.value.splice(a,1)};return s({addMessage:c,removeMessage:f,clearAll:()=>{n.value=[]},success:(l,a={})=>c({...a,type:"success",content:l}),warning:(l,a={})=>c({...a,type:"warning",content:l}),error:(l,a={})=>c({...a,type:"error",content:l}),info:(l,a={})=>c({...a,type:"info",content:l})}),(l,a)=>(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",r[d.type]])},[e.createElementVNode("span",{class:"flex-shrink-0",innerHTML:i[d.type]},null,8,H),e.createElementVNode("span",F,e.toDisplayString(d.content),1),d.closable?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:ye=>f(d.id),class:"flex-shrink-0 ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"},[...a[0]||(a[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 q=0;const G=t=>{const s=++q,n=t.type||"info",r=t.content||"",i=t.duration??3e3,p=t.closable??!1,c=document.createElement("div");c.className=`ld-message ld-message--${n}`,c.setAttribute("data-id",s);let y=`${{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"/>
+    </svg>`,error:`<svg class="ld-message-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+      <circle cx="12" cy="12" r="10"/>
+      <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">${r}</span>`;return p&&(y+=`<button class="ld-message-close" onclick="window.__ldMessageClose(${s})">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>`),c.innerHTML=y,{id:s,element:c,duration:i}},P=()=>{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=`
+      #ld-message-root {
+        position: fixed;
+        top: 16px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        pointer-events: none;
+      }
+      .ld-message {
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        backdrop-filter: blur(8px);
+        animation: ldMessageIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .ld-message.ld-message--closing {
+        animation: ldMessageOut 0.2s ease-in forwards;
+      }
+      .ld-message--success { background: rgba(16, 185, 129, 0.95); color: white; }
+      .ld-message--warning { background: rgba(245, 158, 11, 0.95); color: white; }
+      .ld-message--error { background: rgba(239, 68, 68, 0.95); color: white; }
+      .ld-message--info { background: rgba(14, 165, 233, 0.95); color: white; }
+      .ld-message-icon { width: 20px; height: 20px; flex-shrink: 0; }
+      .ld-message-content { white-space: nowrap; }
+      .ld-message-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        margin-left: 4px;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: currentColor;
+        cursor: pointer;
+        border-radius: 50%;
+        transition: background 0.2s;
+      }
+      .ld-message-close:hover { background: rgba(255,255,255,0.2); }
+      .ld-message-close svg { width: 14px; height: 14px; }
+      @keyframes ldMessageIn {
+        from { opacity: 0; transform: translateY(-20px) scale(0.9); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes ldMessageOut {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(-10px) scale(0.95); }
+      }
+    `,document.head.appendChild(s)}return t},u=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=u);const g=t=>{const s=P(),{id:n,element:r,duration:i}=G(t);return s.appendChild(r),i>0&&setTimeout(()=>{u(n)},i),n},R={success:(t,s={})=>g({...s,type:"success",content:t}),warning:(t,s={})=>g({...s,type:"warning",content:t}),error:(t,s={})=>g({...s,type:"error",content:t}),info:(t,s={})=>g({...s,type:"info",content:t}),close:u,closeAll:()=>{const t=document.getElementById("ld-message-root");t&&(t.innerHTML="")}},U={class:"lzbutton-wrapper"},W={class:"button"},B=m(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=m(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"},E=m(Object.assign({name:"Lztheme"},{__name:"lztheme",setup(t){return(s,n)=>(e.openBlock(),e.createElementBlock("div",J,[...n[0]||(n[0]=[e.createElementVNode("label",{for:"theme",class:"theme"},[e.createElementVNode("span",{class:"theme__toggle-wrap"},[e.createElementVNode("input",{id:"theme",class:"theme__toggle",type:"checkbox",role:"switch",name:"theme",value:"dark"}),e.createElementVNode("span",{class:"theme__fill"}),e.createElementVNode("span",{class:"theme__icon"},[e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"}),e.createElementVNode("span",{class:"theme__icon-part"})])])],-1)])]))}}),[["__scopeId","data-v-0b85d094"]]),z={Lzbutton:B,Lztext:x,Lztheme:E},K=[{name:"Button",type:"vue",label:"Button 按钮",code:`<template>
   <Button type="primary">主要按钮</Button>
   <Button type="success">成功按钮</Button>
   <Button type="warning">警告按钮</Button>
@@ -42,4 +125,39 @@ import { ref } from 'vue'
 import { Modal, Button } from 'little-dizzy'
 
 const visible = ref(false)
-<\/script>`}],i=new Map;function y(t){return!t||!t.name?(console.warn("[LittleDizzy] Snippet must have a name property"),!1):(i.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 b(t){if(!Array.isArray(t))return console.warn("[LittleDizzy] registerSnippets expects an array"),0;let n=0;return t.forEach(o=>{y(o)&&n++}),n}function D(){const t={};return i.forEach((n,o)=>{t[o]=n}),t}function j(t){return i.get(t)}b(L);const B={Button:d,Card:m,Modal:p,...f},I=(t,n={})=>{Object.entries(B).forEach(([o,a])=>{t.component(n.prefix?`${n.prefix}${o}`:o,a)})},O=D,T=y,A=b,F=j,P={install:I,...B};l.Button=d,l.Card=m,l.Lzbutton=u,l.Modal=p,l.customComponents=f,l.default=P,l.getSnippet=F,l.registerSnippet=T,l.registerSnippets=A,l.snippets=O,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+<\/script>`},{name:"Message",type:"vue",label:"Message 消息提示",code:`<template>
+  <div class="message-demo">
+    <Button type="success" @click="showSuccess">成功提示</Button>
+    <Button type="warning" @click="showWarning">警告提示</Button>
+    <Button type="danger" @click="showError">错误提示</Button>
+    <Button type="info" @click="showInfo">信息提示</Button>
+  </div>
+</template>
+
+<script setup>
+import { Button, message } from 'little-dizzy'
+
+const showSuccess = () => {
+  message.success('操作成功！')
+}
+
+const showWarning = () => {
+  message.warning('请注意！')
+}
+
+const showError = () => {
+  message.error('操作失败！')
+}
+
+const showInfo = () => {
+  message.info('这是一条提示信息', { duration: 5000, closable: true })
+}
+<\/script>
+
+<style scoped>
+.message-demo {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+</style>`}],h=new Map;function C(t){return!t||!t.name?(console.warn("[LittleDizzy] Snippet must have a name property"),!1):(h.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=>{C(n)&&s++}),s}function Q(){const t={};return h.forEach((s,n)=>{t[n]=s}),t}function Z(t){return h.get(t)}S(K);const $={Button:_,Card:b,Modal:k,Message:w,...z},ee=(t,s={})=>{Object.entries($).forEach(([n,r])=>{t.component(s.prefix?`${s.prefix}${n}`:n,r)})},te=Q,se=C,ne=S,oe=Z,ae={install:ee,...$};o.Button=_,o.Card=b,o.Lzbutton=B,o.Lztext=x,o.Lztheme=E,o.Message=w,o.Modal=k,o.customComponents=z,o.default=ae,o.getSnippet=oe,o.message=R,o.registerSnippet=se,o.registerSnippets=ne,o.snippets=te,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/vite.svg

@@ -1 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- 紫色系线性渐变 -->
+    <linearGradient id="ldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#d8b5ff">
+        <animate attributeName="stop-color" values="#d8b5ff;#a770ef;#7b2cbf;#a770ef;#d8b5ff" dur="6s" repeatCount="indefinite" />
+      </stop>
+      <stop offset="100%" stop-color="#7b2cbf">
+        <animate attributeName="stop-color" values="#7b2cbf;#5a189a;#7b2cbf;#a770ef;#7b2cbf" dur="6s" repeatCount="indefinite" />
+      </stop>
+    </linearGradient>
+  </defs>
+  
+  <!-- LD 字母组合（精美设计） -->
+  <g transform="translate(16, 16)">
+    <!-- L 字母 - 精致优雅 -->
+    <!-- 垂直笔画 -->
+    <rect x="-7" y="-5.5" width="2.2" height="10.5" rx="0.5" fill="url(#ldGradient)" />
+    <!-- 水平笔画 -->
+    <rect x="-7" y="2.8" width="7" height="2.2" rx="0.5" fill="url(#ldGradient)" />
+    
+    <!-- D 字母 - 流畅优雅的曲线 -->
+    <path d="M 0.5 -5.5 L 0.5 5 L 2.8 5 C 5.6 5 6.2 3.2 6.2 1.8 C 6.2 0.4 6.2 -0.4 6.2 -1.8 C 6.2 -3.2 5.6 -5 2.8 -5 Z M 2.8 -3.6 L 2.8 3.6 C 4.4 3.6 4.8 2 4.8 0 C 4.8 -2 4.4 -3.6 2.8 -3.6 Z" fill-rule="evenodd" fill="url(#ldGradient)" />
+  </g>
+</svg>

package/package.json

@@ -1,59 +1,63 @@
-{
-  "name": "little-dizzy",
-  "version": "2.1.0",
-  "description": "LittleDizzy - 一个支持代码片段的 Vue 3 UI 组件库",
-  "type": "module",
-  "main": "dist/little-dizzy.umd.cjs",
-  "module": "dist/little-dizzy.js",
-  "exports": {
-    ".": {
-      "import": "./dist/little-dizzy.js",
-      "require": "./dist/little-dizzy.umd.cjs"
-    },
-    "./dist/*": "./dist/*",
-    "./src/*": "./src/*"
-  },
-  "files": [
-    "dist",
-    "src/components",
-    "src/snippets",
-    "src/styles",
-    "src/index.js"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:lib": "vite build --config vite.lib.config.js",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build:lib",
-    "publish:patch": "npm version patch --no-git-tag-version && npm run build:lib && npm publish --registry https://registry.npmjs.org",
-    "publish:minor": "npm version minor --no-git-tag-version && npm run build:lib && npm publish --registry https://registry.npmjs.org",
-    "publish:major": "npm version major --no-git-tag-version && npm run build:lib && npm publish --registry https://registry.npmjs.org"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "ui",
-    "components",
-    "snippets",
-    "little-dizzy",
-    "LittleDizzy"
-  ],
-  "author": "fsk",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/nizuinande/little-dizzy"
-  },
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
-  "dependencies": {
-    "vue": "^3.5.24"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.1",
-    "sass": "^1.97.1",
-    "vite": "^7.2.4"
-  }
-}
+{
+  "name": "little-dizzy",
+  "version": "2.3.0",
+  "description": "LittleDizzy - 一个支持代码片段的 Vue 3 UI 组件库",
+  "type": "module",
+  "main": "dist/little-dizzy.umd.cjs",
+  "module": "dist/little-dizzy.js",
+  "exports": {
+    ".": {
+      "import": "./dist/little-dizzy.js",
+      "require": "./dist/little-dizzy.umd.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "dist",
+    "src/components",
+    "src/snippets",
+    "src/styles",
+    "src/index.js"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.js",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib",
+    "publish:patch": "npm version patch --no-git-tag-version && npm run build:lib && npm publish --registry https://registry.npmjs.org",
+    "publish:minor": "npm version minor --no-git-tag-version && npm run build:lib && npm publish --registry https://registry.npmjs.org",
+    "publish:major": "npm version major --no-git-tag-version && npm run build:lib && npm publish --registry https://registry.npmjs.org"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "snippets",
+    "little-dizzy",
+    "LittleDizzy"
+  ],
+  "author": "fsk",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/nizuinande/little-dizzy"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "little-dizzy": "^2.1.1",
+    "vue": "^3.0.0",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "sass": "^1.97.1",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.2.4"
+  }
+}

package/src/components/Message.vue

@@ -0,0 +1,156 @@
+<template>
+  <Teleport to="body">
+    <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"
+    >
+      <div
+        v-for="msg in messages"
+        :key="msg.id"
+        class="pointer-events-auto flex items-center gap-3 px-5 py-3 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300"
+        :class="typeClasses[msg.type]"
+      >
+        <!-- Icon -->
+        <span class="flex-shrink-0" v-html="typeIcons[msg.type]"></span>
+        <!-- Content -->
+        <span class="text-sm font-medium">{{ msg.content }}</span>
+        <!-- Close Button -->
+        <button
+          v-if="msg.closable"
+          @click="removeMessage(msg.id)"
+          class="flex-shrink-0 ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"
+        >
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+defineOptions({
+  name: 'Message'
+})
+
+// Message list
+const messages = ref([])
+
+// Type styles
+const typeClasses = {
+  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'
+}
+
+// Type icons
+const typeIcons = {
+  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"/>
+  </svg>`,
+  error: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+    <circle cx="12" cy="12" r="10"/>
+    <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 messageId = 0
+
+// Add message
+const addMessage = (options) => {
+  const id = ++messageId
+  const msg = {
+    id,
+    type: options.type || 'info',
+    content: options.content || '',
+    duration: options.duration ?? 3000,
+    closable: options.closable ?? false
+  }
+  
+  messages.value.push(msg)
+  
+  if (msg.duration > 0) {
+    setTimeout(() => {
+      removeMessage(id)
+    }, msg.duration)
+  }
+  
+  return id
+}
+
+// Remove message
+const removeMessage = (id) => {
+  const index = messages.value.findIndex(m => m.id === id)
+  if (index > -1) {
+    messages.value.splice(index, 1)
+  }
+}
+
+// Clear all messages
+const clearAll = () => {
+  messages.value = []
+}
+
+// Expose methods
+defineExpose({
+  addMessage,
+  removeMessage,
+  clearAll,
+  // Shorthand methods
+  success: (content, options = {}) => addMessage({ ...options, type: 'success', content }),
+  warning: (content, options = {}) => addMessage({ ...options, type: 'warning', content }),
+  error: (content, options = {}) => addMessage({ ...options, type: 'error', content }),
+  info: (content, options = {}) => addMessage({ ...options, type: 'info', content })
+})
+</script>
+
+<style scoped>
+/* Enter animation */
+.message-enter-active {
+  animation: message-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Leave animation */
+.message-leave-active {
+  animation: message-out 0.2s ease-in forwards;
+}
+
+/* Move animation */
+.message-move {
+  transition: transform 0.3s ease;
+}
+
+@keyframes message-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes message-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+}
+</style>
+

package/src/components/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="modal" :class="{ 'modal-show': visible }" v-if="visible">
     <div class="modal-dialog">
-      <div class="modal-content">
+      <div class="modal-content" :style="{ width: width }">
         <!-- 模态框头部 -->
         <div class="modal-header">
           <h3 class="modal-header-title" v-if="title">{{ title }}</h3>
@@ -43,6 +43,10 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  width: {
+    type: String,
+    default: '500px'
+  },
   // 是否显示默认底部按钮
   showFooter: {
     type: Boolean,
@@ -96,14 +100,12 @@ const handleConfirm = () => {
   // 模态框对话框
   &-dialog {
     position: relative;
-    width: auto;
-    margin: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 90vw;
     pointer-events: none;
-
-    @media (min-width: 576px) {
-      max-width: 500px;
-      margin: 1.75rem auto;
-    }
   }
 
   // 模态框内容
@@ -111,14 +113,17 @@ const handleConfirm = () => {
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 500px;
+    max-width: 100%;
+    max-height: 90vh;
     pointer-events: auto;
-    background-color: #fff;
+    background-color: var(--ld-card-bg, #fff);
     background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--ld-border-color, rgba(0, 0, 0, 0.2));
     border-radius: $border-radius-lg;
     outline: 0;
-    box-shadow: $shadow-lg;
+    box-shadow: var(--ld-card-shadow, $shadow-lg);
+    overflow: hidden;
   }
 
   // 模态框头部
@@ -127,9 +132,10 @@ const handleConfirm = () => {
     justify-content: space-between;
     align-items: center;
     padding: 16px;
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--ld-border-color-light, #dee2e6);
     border-top-left-radius: calc($border-radius-lg - 1px);
     border-top-right-radius: calc($border-radius-lg - 1px);
+    background-color: var(--ld-card-bg, #fff);
   }
 
   // 模态框头部标题
@@ -137,7 +143,7 @@ const handleConfirm = () => {
     margin: 0;
     font-size: $font-size-large;
     font-weight: 600;
-    color: #303133;
+    color: var(--ld-text-primary, #303133);
   }
 
   // 模态框头部关闭按钮
@@ -148,11 +154,13 @@ const handleConfirm = () => {
     cursor: pointer;
     font-size: 1.5rem;
     line-height: 1;
-    color: #6c757d;
+    color: var(--ld-text-secondary, #6c757d);
     opacity: 0.5;
+    transition: all 0.2s;
 
     &:hover {
       opacity: 1;
+      color: var(--ld-text-primary, #303133);
     }
   }
 
@@ -161,7 +169,8 @@ const handleConfirm = () => {
     position: relative;
     flex: 1 1 auto;
     padding: 16px;
-    color: #606266;
+    color: var(--ld-text-regular, #606266);
+    background-color: var(--ld-card-bg, #fff);
   }
 
   // 模态框底部
@@ -170,9 +179,10 @@ const handleConfirm = () => {
     justify-content: flex-end;
     align-items: center;
     padding: 16px;
-    border-top: 1px solid #dee2e6;
+    border-top: 1px solid var(--ld-border-color-light, #dee2e6);
     border-bottom-left-radius: calc($border-radius-lg - 1px);
     border-bottom-right-radius: calc($border-radius-lg - 1px);
+    background-color: var(--ld-card-bg, #fff);
 
     >*+* {
       margin-left: 8px;