little-dizzy 2.2.0 → 2.4.0

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
 }
 
@@ -44,6 +47,11 @@ const install = (app, options = {}) => {
   Object.entries(components).forEach(([name, component]) => {
     app.component(options.prefix ? `${options.prefix}${name}` : name, component)
   })
+
+  // 挂载 message 到全局属性
+  app.config.globalProperties.$message = message
+  // 同时提供 provide 方式
+  app.provide('message', message)
 }
 
 // 导出代码片段相关
@@ -53,7 +61,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";