@xlui/xux-ui 0.1.0

package/src/composables/Msg.ts

@@ -0,0 +1,349 @@
+/**
+ * Msg 消息提示组件
+ * @displayName XMsg
+ */
+
+interface ConfirmOptions {
+    title: string
+    content: string
+    confirmText?: string
+    cancelText?: string
+    onConfirm?: () => void
+    onCancel?: () => void
+    type?: 'success' | 'error' | 'warning' | 'info'
+    duration?: number
+}
+
+interface MessageOptions {
+    title: string
+    content?: string
+    type?: 'success' | 'error' | 'warning' | 'info'
+    duration?: number
+}
+
+export const xlMsg = () => {
+    // 创建消息容器
+    const createMessageContainer = () => {
+        let container = document.getElementById('xl-message-container')
+        if (!container) {
+            container = document.createElement('div')
+            container.id = 'xl-message-container'
+            container.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                z-index: 9999;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            `
+            document.body.appendChild(container)
+        }
+        return container
+    }
+
+    // 获取类型对应的样式和图标
+    const getTypeStyles = (type: string) => {
+        const styles = {
+            success: {
+                bgColor: '#f0fdf4',
+                borderColor: '#86efac',
+                textColor: '#166534',
+                iconColor: '#22c55e',
+                iconSvg: `<svg width="20" height="20" 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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`
+            },
+            error: {
+                bgColor: '#fef2f2',
+                borderColor: '#fca5a5',
+                textColor: '#991b1b',
+                iconColor: '#ef4444',
+                iconSvg: `<svg width="20" height="20" 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>`
+            },
+            warning: {
+                bgColor: '#fefce8',
+                borderColor: '#fde047',
+                textColor: '#854d0e',
+                iconColor: '#eab308',
+                iconSvg: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`
+            },
+            info: {
+                bgColor: '#f8fafc',
+                borderColor: '#cbd5e1',
+                textColor: '#1e293b',
+                iconColor: '#64748b',
+                iconSvg: `<svg width="20" height="20" 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>`
+            }
+        }
+        return styles[type as keyof typeof styles] || styles.info
+    }
+
+    // 显示消息
+    const show = (options: MessageOptions) => {
+        const container = createMessageContainer()
+        const type = options.type || 'info'
+        const duration = options.duration !== undefined ? options.duration : 3000
+        const styles = getTypeStyles(type)
+
+        const messageId = `xl-msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+        
+        const message = document.createElement('div')
+        message.id = messageId
+        message.style.cssText = `
+            background-color: ${styles.bgColor};
+            border: 1px solid ${styles.borderColor};
+            color: ${styles.textColor};
+            border-radius: 12px;
+            padding: 16px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            max-width: 384px;
+            transform: translateX(100%);
+            opacity: 0;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            pointer-events: auto;
+        `
+        
+        message.innerHTML = `
+            <div style="display: flex; align-items: flex-start; gap: 12px;">
+                <div style="flex-shrink: 0; color: ${styles.iconColor}; margin-top: 2px;">
+                    ${styles.iconSvg}
+                </div>
+                <div style="flex: 1; min-width: 0;">
+                    <div style="font-size: 14px; font-weight: 500; line-height: 1.5; color: ${styles.textColor};">
+                        ${options.title}
+                    </div>
+                    ${options.content ? `<div style="margin-top: 4px; font-size: 13px; line-height: 1.5; color: ${styles.textColor}; opacity: 0.8;">${options.content}</div>` : ''}
+                </div>
+                <button 
+                    style="flex-shrink: 0; background: none; border: none; padding: 4px; cursor: pointer; color: ${styles.textColor}; opacity: 0.5; border-radius: 4px; transition: all 0.15s; display: flex; align-items: center; justify-content: center;"
+                    onmouseover="this.style.opacity='1'; this.style.backgroundColor='rgba(0,0,0,0.05)';"
+                    onmouseout="this.style.opacity='0.5'; this.style.backgroundColor='transparent';"
+                    onclick="document.getElementById('${messageId}')?.remove()"
+                >
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                        <path d="M18 6L6 18M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+        `
+
+        container.appendChild(message)
+
+        // 动画进入
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                message.style.transform = 'translateX(0)'
+                message.style.opacity = '1'
+            })
+        })
+
+        // 自动移除
+        if (duration > 0) {
+            setTimeout(() => {
+                removeMessage(messageId)
+            }, duration)
+        }
+    }
+
+    // 移除消息
+    const removeMessage = (messageId: string) => {
+        const message = document.getElementById(messageId)
+        if (message) {
+            message.style.transform = 'translateX(100%)'
+            message.style.opacity = '0'
+            setTimeout(() => {
+                if (message.parentNode) {
+                    message.parentNode.removeChild(message)
+                }
+            }, 300)
+        }
+    }
+
+    // 确认对话框
+    const confirm = (options: ConfirmOptions) => {
+        const type = options.type || 'info'
+        const styles = getTypeStyles(type)
+        
+        const modalId = `xl-confirm-${Date.now()}`
+        const modal = document.createElement('div')
+        modal.id = modalId
+        modal.style.cssText = `
+            position: fixed;
+            inset: 0;
+            z-index: 9999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(4px);
+        `
+        
+        const dialogHtml = `
+            <div class="xl-confirm-dialog" style="
+                background-color: white;
+                border-radius: 12px;
+                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+                max-width: 448px;
+                width: 100%;
+                margin: 16px;
+                transform: scale(0.95);
+                opacity: 0;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            ">
+                <div style="padding: 24px;">
+                    <div style="display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px;">
+                        <div style="flex-shrink: 0; color: ${styles.iconColor}; margin-top: 2px;">
+                            ${styles.iconSvg}
+                        </div>
+                        <div style="flex: 1;">
+                            <h3 style="font-size: 18px; font-weight: 600; color: #1a1a1a; line-height: 1.5; margin: 0;">
+                                ${options.title}
+                            </h3>
+                        </div>
+                    </div>
+                    <div style="font-size: 14px; color: #64748b; line-height: 1.6; margin-bottom: 24px; padding-left: 36px;">
+                        ${options.content}
+                    </div>
+                    <div style="display: flex; justify-content: flex-end; gap: 12px;">
+                        <button class="xl-confirm-cancel" style="
+                            padding: 8px 16px;
+                            font-size: 14px;
+                            font-weight: 500;
+                            height: 36px;
+                            color: #1a1a1a;
+                            background-color: white;
+                            border: 1px solid #cacaca;
+                            border-radius: 6px;
+                            cursor: pointer;
+                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                            box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
+                            position: relative;
+                            overflow: hidden;
+                            transform: translateY(0);
+                        " 
+                        onmouseover="this.style.borderColor='#1a1a1a'; this.style.color='#1a1a1a'; this.style.boxShadow='0 4px 12px rgba(26, 26, 26, 0.3)'; this.style.transform='translateY(-2px)';" 
+                        onmouseout="this.style.backgroundColor='white'; this.style.borderColor='#cacaca'; this.style.color='#1a1a1a'; this.style.boxShadow='0 1px 2px rgba(26, 26, 26, 0.05)'; this.style.transform='translateY(0)';"
+                        onmousedown="this.style.transform='translateY(1px)'; this.style.boxShadow='0 2px 4px rgba(0, 0, 0, 0.1)';"
+                        onmouseup="this.style.transform='translateY(-2px)';">
+                            ${options.cancelText || '取消'}
+                        </button>
+                        <button class="xl-confirm-ok" style="
+                            padding: 8px 16px;
+                            font-size: 14px;
+                            font-weight: 500;
+                            height: 36px;
+                            color: white;
+                            background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
+                            border: 1px solid #1a1a1a;
+                            border-radius: 6px;
+                            cursor: pointer;
+                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                            box-shadow: 0 4px 12px rgba(26, 26, 26, 0.3);
+                            position: relative;
+                            overflow: hidden;
+                            transform: translateY(0);
+                        " 
+                        onmouseover="this.style.background='linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%)'; this.style.boxShadow='0 8px 24px rgba(26, 26, 26, 0.4)'; this.style.transform='translateY(-2px)';" 
+                        onmouseout="this.style.background='linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%)'; this.style.boxShadow='0 4px 12px rgba(26, 26, 26, 0.3)'; this.style.transform='translateY(0)';"
+                        onmousedown="this.style.transform='translateY(1px)'; this.style.boxShadow='0 2px 4px rgba(0, 0, 0, 0.1)';"
+                        onmouseup="this.style.transform='translateY(-2px)';">
+                            ${options.confirmText || '确认'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `
+        
+        modal.innerHTML = dialogHtml
+
+        document.body.appendChild(modal)
+
+        // 动画进入
+        requestAnimationFrame(() => {
+            modal.style.opacity = '1'
+            const dialog = modal.querySelector('.xl-confirm-dialog') as HTMLElement
+            if (dialog) {
+                requestAnimationFrame(() => {
+                    dialog.style.transform = 'scale(1)'
+                    dialog.style.opacity = '1'
+                })
+            }
+        })
+
+        // 绑定事件
+        const confirmBtn = modal.querySelector('.xl-confirm-ok')
+        const cancelBtn = modal.querySelector('.xl-confirm-cancel')
+
+        const closeModal = () => {
+            const dialog = modal.querySelector('.xl-confirm-dialog') as HTMLElement
+            if (dialog) {
+                dialog.style.transform = 'scale(0.95)'
+                dialog.style.opacity = '0'
+            }
+            modal.style.opacity = '0'
+            setTimeout(() => {
+                if (modal.parentNode) {
+                    modal.parentNode.removeChild(modal)
+                }
+            }, 300)
+        }
+
+        confirmBtn?.addEventListener('click', () => {
+            options.onConfirm?.()
+            closeModal()
+        })
+
+        cancelBtn?.addEventListener('click', () => {
+            options.onCancel?.()
+            closeModal()
+        })
+
+        // 点击背景关闭
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                options.onCancel?.()
+                closeModal()
+            }
+        })
+
+        // ESC 键关闭
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                options.onCancel?.()
+                closeModal()
+                document.removeEventListener('keydown', handleEsc)
+            }
+        }
+        document.addEventListener('keydown', handleEsc)
+    }
+
+    // 快捷方法
+    const success = (title: string, content?: string, duration?: number) => {
+        show({ title, content, type: 'success', duration })
+    }
+
+    const error = (title: string, content?: string, duration?: number) => {
+        show({ title, content, type: 'error', duration })
+    }
+
+    const warning = (title: string, content?: string, duration?: number) => {
+        show({ title, content, type: 'warning', duration })
+    }
+
+    const info = (title: string, content?: string, duration?: number) => {
+        show({ title, content, type: 'info', duration })
+    }
+
+    return { 
+        show, 
+        confirm, 
+        success, 
+        error, 
+        warning, 
+        info,
+        remove: removeMessage
+    }
+}
+
+export default xlMsg

package/src/index.ts

@@ -0,0 +1,28 @@
+// 导入主题样式
+import './styles/theme.css'
+
+// 导出组件
+export { default as XButton } from './components/Button/index.vue'
+export { default as XCard } from './components/Card/index.vue'
+export { default as XCountrySelect } from './components/CountrySelect/index.vue'
+export { default as XSelect } from './components/Select/index.vue'
+export { default as XInput } from './components/Input/index.vue'
+export { default as XCheckboxes } from './components/Checkboxes/index.vue'
+export { default as XAccordion } from './components/Accordion/index.vue'
+export { default as XThumbnailContainer } from './components/ThumbnailContainer/index.vue'
+export { default as XSkeleton } from './components/Skeleton/index.vue'
+export { default as XModal } from './components/Modal/index.vue'
+
+// 导出 Composables
+export { xlMsg, default as useMsg } from './composables/Msg'
+
+// 导出类型定义
+export type { Country, CountrySelectProps } from './components/CountrySelect/index.vue'
+export type { SelectOption, SelectProps } from './components/Select/index.vue'
+export type { InputProps } from './components/Input/index.vue'
+export type { CheckboxOption, CheckboxesProps } from './components/Checkboxes/index.vue'
+export type { AccordionItem, AccordionProps } from './components/Accordion/index.vue'
+export type { ThumbnailContainerProps } from './components/ThumbnailContainer/index.vue'
+export type { SkeletonProps } from './components/Skeleton/index.vue'
+export type { ModalProps } from './components/Modal/index.vue'
+

package/src/styles/theme.css

@@ -0,0 +1,120 @@
+/**
+ * XUX 电商主题色系统
+ * 基准色: #1a1a1a
+ */
+
+:root {
+  /* ========== 基准色 ========== */
+  --x-color-base: #1a1a1a;
+  
+  /* ========== 主色 - 深色系 ========== */
+  --x-color-primary: #1a1a1a;
+  --x-color-primary-light: #3a3a3a;
+  --x-color-primary-lighter: #4a4a4a;
+  --x-color-primary-dark: #0d0d0d;
+  --x-color-primary-darker: #000000;
+  
+  /* ========== 辅助色 - 深蓝色系（链接、信息） ========== */
+  --x-color-secondary: #4a90e2;
+  --x-color-secondary-light: #6ba8ed;
+  --x-color-secondary-lighter: #8dc0f7;
+  --x-color-secondary-dark: #3a7bc8;
+  --x-color-secondary-darker: #2a6bb0;
+  
+  /* ========== 成功色 - 翠绿色系 ========== */
+  --x-color-success: #10b981;
+  --x-color-success-light: #34d399;
+  --x-color-success-lighter: #6ee7b7;
+  --x-color-success-dark: #059669;
+  --x-color-success-darker: #047857;
+  
+  /* ========== 警告色 - 琥珀色系 ========== */
+  --x-color-warning: #f59e0b;
+  --x-color-warning-light: #fbbf24;
+  --x-color-warning-lighter: #fcd34d;
+  --x-color-warning-dark: #d97706;
+  --x-color-warning-darker: #b45309;
+  
+  /* ========== 危险色 - 红色系 ========== */
+  --x-color-danger: #ef4444;
+  --x-color-danger-light: #f87171;
+  --x-color-danger-lighter: #fca5a5;
+  --x-color-danger-dark: #dc2626;
+  --x-color-danger-darker: #b91c1c;
+  
+  /* ========== 中性色 - 基于 #1a1a1a ========== */
+  --x-color-black: #1a1a1a;
+  --x-color-gray-900: #2a2a2a;
+  --x-color-gray-800: #3a3a3a;
+  --x-color-gray-700: #4a4a4a;
+  --x-color-gray-600: #6a6a6a;
+  --x-color-gray-500: #8a8a8a;
+  --x-color-gray-400: #aaaaaa;
+  --x-color-gray-300: #cacaca;
+  --x-color-gray-200: #e5e5e5;
+  --x-color-gray-100: #f5f5f5;
+  --x-color-white: #ffffff;
+  
+  /* ========== 渐变色 ========== */
+  --x-gradient-primary: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
+  --x-gradient-primary-hover: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%);
+  --x-gradient-secondary: linear-gradient(135deg, #4a90e2 0%, #3a7bc8 100%);
+  --x-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --x-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  --x-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  --x-gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  
+  /* ========== 阴影 ========== */
+  --x-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05);
+  --x-shadow: 0 2px 8px rgba(26, 26, 26, 0.1);
+  --x-shadow-md: 0 4px 12px rgba(26, 26, 26, 0.15);
+  --x-shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.2);
+  --x-shadow-xl: 0 16px 48px rgba(26, 26, 26, 0.25);
+  
+  /* 彩色阴影 */
+  --x-shadow-primary: 0 4px 12px rgba(26, 26, 26, 0.3);
+  --x-shadow-primary-lg: 0 8px 24px rgba(26, 26, 26, 0.4);
+  --x-shadow-secondary: 0 4px 12px rgba(74, 144, 226, 0.3);
+  --x-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
+  --x-shadow-warning: 0 4px 12px rgba(245, 158, 11, 0.3);
+  --x-shadow-danger: 0 4px 12px rgba(239, 68, 68, 0.3);
+  
+  /* ========== 边框圆角 ========== */
+  --x-radius-sm: 4px;
+  --x-radius: 6px;
+  --x-radius-md: 8px;
+  --x-radius-lg: 12px;
+  --x-radius-xl: 16px;
+  --x-radius-full: 9999px;
+  
+  /* ========== 过渡动画 ========== */
+  --x-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --x-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --x-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* ========== 字体 ========== */
+  --x-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --x-font-size-xs: 12px;
+  --x-font-size-sm: 14px;
+  --x-font-size: 16px;
+  --x-font-size-lg: 18px;
+  --x-font-size-xl: 20px;
+  --x-font-size-2xl: 24px;
+  --x-font-size-3xl: 30px;
+}
+
+/* ========== 暗色模式 ========== */
+.dark {
+  --x-color-white: #1a1a1a;
+  --x-color-black: #ffffff;
+  --x-color-gray-100: #2a2a2a;
+  --x-color-gray-200: #3a3a3a;
+  --x-color-gray-300: #4a4a4a;
+  --x-color-gray-400: #6a6a6a;
+  --x-color-gray-500: #8a8a8a;
+  --x-color-gray-600: #aaaaaa;
+  --x-color-gray-700: #cacaca;
+  --x-color-gray-800: #e5e5e5;
+  --x-color-gray-900: #f5f5f5;
+}
+