little-dizzy 2.2.0 → 2.3.0

package/src/components/custom/Lztext.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="Lztext-wrapper">
+    <div class="loader-wrapper">
+      <span class="loader-letter">G</span>
+      <span class="loader-letter">e</span>
+      <span class="loader-letter">n</span>
+      <span class="loader-letter">e</span>
+      <span class="loader-letter">r</span>
+      <span class="loader-letter">a</span>
+      <span class="loader-letter">t</span>
+      <span class="loader-letter">i</span>
+      <span class="loader-letter">n</span>
+      <span class="loader-letter">g</span>
+      <div class="loader"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 渐变文字动画
+ * 
+ * 由 LittleDizzy Demo 自动生成
+ * @component Lztext
+ */
+defineOptions({
+  name: 'Lztext'
+})
+
+</script>
+
+<style scoped>
+.loader-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  width: auto;
+  margin: 2rem;
+
+  font-family: "Poppins", sans-serif;
+  font-size: 1.6em;
+  font-weight: 600;
+  user-select: none;
+  color: #fff;
+
+  scale: 2;
+}
+
+.loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+
+  background-color: transparent;
+  mask: repeating-linear-gradient(
+    90deg,
+    transparent 0,
+    transparent 6px,
+    black 7px,
+    black 8px
+  );
+}
+
+.loader::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-image: radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%),
+    radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%),
+    radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
+    radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
+    radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
+  mask: radial-gradient(
+    circle at 50% 50%,
+    transparent 0%,
+    transparent 10%,
+    black 25%
+  );
+  animation:
+    transform-animation 2s infinite alternate,
+    opacity-animation 4s infinite;
+  animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
+}
+
+@keyframes transform-animation {
+  0% {
+    transform: translate(-55%);
+  }
+  100% {
+    transform: translate(55%);
+  }
+}
+
+@keyframes opacity-animation {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  65% {
+    opacity: 0;
+  }
+}
+
+.loader-letter {
+  display: inline-block;
+  opacity: 0;
+  animation: loader-letter-anim 4s infinite linear;
+  z-index: 2;
+}
+
+.loader-letter:nth-child(1) {
+  animation-delay: 0.1s;
+}
+.loader-letter:nth-child(2) {
+  animation-delay: 0.205s;
+}
+.loader-letter:nth-child(3) {
+  animation-delay: 0.31s;
+}
+.loader-letter:nth-child(4) {
+  animation-delay: 0.415s;
+}
+.loader-letter:nth-child(5) {
+  animation-delay: 0.521s;
+}
+.loader-letter:nth-child(6) {
+  animation-delay: 0.626s;
+}
+.loader-letter:nth-child(7) {
+  animation-delay: 0.731s;
+}
+.loader-letter:nth-child(8) {
+  animation-delay: 0.837s;
+}
+.loader-letter:nth-child(9) {
+  animation-delay: 0.942s;
+}
+.loader-letter:nth-child(10) {
+  animation-delay: 1.047s;
+}
+
+@keyframes loader-letter-anim {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+    text-shadow: 0 0 4px #fff;
+    transform: scale(1.1) translateY(-2px);
+  }
+  20% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

package/src/components/custom/index.js

@@ -6,15 +6,17 @@
  */
 
 import Lzbutton from './lzbutton.vue'
+import Lztext from './Lztext.vue'
 import Lztheme from './lztheme.vue'
 
 // 自定义组件导出
 export const customComponents = {
   Lzbutton,
+  Lztext,
   Lztheme
 }
 
 // 单独导出每个组件
-export { Lzbutton, Lztheme }
+export { Lzbutton, Lztext, Lztheme }
 
 export default customComponents

package/src/components/custom/lzbutton.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="lzbutton-wrapper">
     <button class="button">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
-            <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
-        </svg>
-        Unlock Pro
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
+        <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
+      </svg>
+      <slot>Unlock Pro</slot>
     </button>
   </div>
 </template>
@@ -36,7 +36,7 @@ defineOptions({
   color: #fff;
   border: none;
   background-position: left center;
-  box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
+  box-shadow: 0 30px 10px -20px rgba(0, 0, 0, .2);
   transition: background .3s ease;
 }
 

package/src/components/message.js

@@ -0,0 +1,238 @@
+/**
+ * Message 全局消息提示服务
+ * 
+ * 使用方法：
+ * import { message } from '@/components/message.js'
+ * 
+ * message.success('操作成功')
+ * message.error('操作失败')
+ * message.warning('警告信息')
+ * message.info('提示信息')
+ * 
+ * // 带配置
+ * message.success('操作成功', { duration: 5000, closable: true })
+ */
+
+import { createApp, h, ref } from 'vue'
+import Message from './Message.vue'
+
+let messageInstance = null
+let messageContainer = null
+
+// Initialize message instance
+const initMessage = () => {
+  if (messageInstance) return messageInstance
+
+  messageContainer = document.createElement('div')
+  messageContainer.id = 'ld-message-container'
+  document.body.appendChild(messageContainer)
+
+  const app = createApp({
+    setup () {
+      const messageRef = ref(null)
+      return () => h(Message, { ref: messageRef })
+    }
+  })
+
+  const vm = app.mount(messageContainer)
+  messageInstance = vm.$el.__vueParentComponent?.exposed || vm.$el.parentNode?.__vueParentComponent?.subTree?.component?.exposed
+
+  // Wait for next tick to get the exposed methods
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const container = document.querySelector('#ld-message-container')
+      if (container) {
+        const vueInstance = container._vnode?.component?.subTree?.component?.exposed
+        if (vueInstance) {
+          messageInstance = vueInstance
+          resolve(messageInstance)
+        }
+      }
+    }, 0)
+  })
+}
+
+// Create a simpler implementation using reactive state
+const messages = ref([])
+let messageId = 0
+
+const typeClasses = {
+  success: 'ld-message--success',
+  warning: 'ld-message--warning',
+  error: 'ld-message--error',
+  info: 'ld-message--info'
+}
+
+const createMessageElement = (options) => {
+  const id = ++messageId
+  const type = options.type || 'info'
+  const content = options.content || ''
+  const duration = options.duration ?? 3000
+  const closable = options.closable ?? false
+
+  // Create message element
+  const msgEl = document.createElement('div')
+  msgEl.className = `ld-message ld-message--${type}`
+  msgEl.setAttribute('data-id', id)
+
+  // Icon SVGs
+  const icons = {
+    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>`
+  }
+
+  let html = `${icons[type]}<span class="ld-message-content">${content}</span>`
+
+  if (closable) {
+    html += `<button class="ld-message-close" onclick="window.__ldMessageClose(${id})">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>`
+  }
+
+  msgEl.innerHTML = html
+
+  return { id, element: msgEl, duration }
+}
+
+// Ensure container exists
+const ensureContainer = () => {
+  let container = document.getElementById('ld-message-root')
+  if (!container) {
+    container = document.createElement('div')
+    container.id = 'ld-message-root'
+    document.body.appendChild(container)
+
+    // Add styles
+    const style = document.createElement('style')
+    style.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(style)
+  }
+  return container
+}
+
+// Close message
+const closeMessage = (id) => {
+  const container = document.getElementById('ld-message-root')
+  if (!container) return
+
+  const msgEl = container.querySelector(`[data-id="${id}"]`)
+  if (msgEl) {
+    msgEl.classList.add('ld-message--closing')
+    setTimeout(() => {
+      msgEl.remove()
+    }, 200)
+  }
+}
+
+// Expose close function globally
+if (typeof window !== 'undefined') {
+  window.__ldMessageClose = closeMessage
+}
+
+// Show message
+const showMessage = (options) => {
+  const container = ensureContainer()
+  const { id, element, duration } = createMessageElement(options)
+
+  container.appendChild(element)
+
+  if (duration > 0) {
+    setTimeout(() => {
+      closeMessage(id)
+    }, duration)
+  }
+
+  return id
+}
+
+// Export message API
+export const message = {
+  success: (content, options = {}) => showMessage({ ...options, type: 'success', content }),
+  warning: (content, options = {}) => showMessage({ ...options, type: 'warning', content }),
+  error: (content, options = {}) => showMessage({ ...options, type: 'error', content }),
+  info: (content, options = {}) => showMessage({ ...options, type: 'info', content }),
+  close: closeMessage,
+  closeAll: () => {
+    const container = document.getElementById('ld-message-root')
+    if (container) {
+      container.innerHTML = ''
+    }
+  }
+}
+
+export default message
+

package/src/index.js

@@ -23,6 +23,8 @@
 import Button from './components/Button.vue'
 import Card from './components/Card.vue'
 import Modal from './components/Modal.vue'
+import Message from './components/Message.vue'
+import { message } from './components/message.js'
 
 // 导入自定义组件（由 Demo 上传生成）
 import { customComponents } from './components/custom/index.js'
@@ -35,6 +37,7 @@ const components = {
   Button,
   Card,
   Modal,
+  Message,
   ...customComponents
 }
 
@@ -53,7 +56,7 @@ export const registerSnippets = snippetsModule.registerSnippets
 export const getSnippet = snippetsModule.getSnippet
 
 // 导出内置组件（按需引入）
-export { Button, Card, Modal }
+export { Button, Card, Modal, Message, message }
 
 // 重新导出自定义组件
 export * from './components/custom/index.js'

package/src/snippets/presets/index.js

@@ -7,16 +7,18 @@
 import buttonSnippet from './button.js'
 import cardSnippet from './card.js'
 import modalSnippet from './modal.js'
+import messageSnippet from './message.js'
 
 // 所有预设代码片段
 export const presetSnippets = [
   buttonSnippet,
   cardSnippet,
-  modalSnippet
+  modalSnippet,
+  messageSnippet
 ]
 
 // 单独导出
-export { buttonSnippet, cardSnippet, modalSnippet }
+export { buttonSnippet, cardSnippet, modalSnippet, messageSnippet }
 
 export default presetSnippets
 

package/src/snippets/presets/message.js

@@ -0,0 +1,45 @@
+/**
+ * Message 消息提示组件示例代码
+ */
+export default {
+  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>`
+}
+

package/src/styles/_variables.scss

@@ -34,6 +34,14 @@ $shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.2);
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  
+  // 隐藏滚动条（保持滚动功能）
+  scrollbar-width: none; // Firefox
+  -ms-overflow-style: none; // IE/Edge
+  
+  &::-webkit-scrollbar {
+    display: none; // Chrome/Safari/Opera
+  }
 }
 
 body {

package/src/styles/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";