@xlui/xux-ui 0.1.0 → 0.2.1

package/src/composables/Alert.ts

@@ -0,0 +1,238 @@
+/**
+ * Alert 警告提示组件
+ * 居中显示，支持自动关闭和手动关闭
+ */
+
+interface AlertOptions {
+    title?: string
+    content: string
+    type?: 'success' | 'error' | 'warning' | 'info'
+    duration?: number  // 自动关闭时间，毫秒。0 表示不自动关闭
+    closable?: boolean // 是否显示关闭按钮
+}
+
+export const xlAlert = () => {
+    // 创建 Alert 容器
+    const createAlertContainer = () => {
+        let container = document.getElementById('xl-alert-container')
+        if (!container) {
+            container = document.createElement('div')
+            container.id = 'xl-alert-container'
+            container.style.cssText = `
+                position: fixed;
+                top: 5%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                z-index: 10000;
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                max-width: 90%;
+                width: 500px;
+            `
+            document.body.appendChild(container)
+        }
+        return container
+    }
+
+    // 获取类型对应的样式和图标
+    const getTypeStyles = (type: string) => {
+        const styles = {
+            success: {
+                bgColor: 'rgb(240, 253, 244)',
+                darkBgColor: 'rgb(20, 83, 45)',
+                borderColor: 'rgb(134, 239, 172)',
+                darkBorderColor: 'rgb(22, 101, 52)',
+                textColor: 'rgb(22, 101, 52)',
+                darkTextColor: 'rgb(187, 247, 208)',
+                iconColor: 'rgb(34, 197, 94)',
+                iconSvg: `<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
+                </svg>`
+            },
+            error: {
+                bgColor: 'rgb(254, 242, 242)',
+                darkBgColor: 'rgb(127, 29, 29)',
+                borderColor: 'rgb(252, 165, 165)',
+                darkBorderColor: 'rgb(153, 27, 27)',
+                textColor: 'rgb(153, 27, 27)',
+                darkTextColor: 'rgb(254, 202, 202)',
+                iconColor: 'rgb(239, 68, 68)',
+                iconSvg: `<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
+                </svg>`
+            },
+            warning: {
+                bgColor: 'rgb(254, 252, 232)',
+                darkBgColor: 'rgb(133, 77, 14)',
+                borderColor: 'rgb(253, 224, 71)',
+                darkBorderColor: 'rgb(161, 98, 7)',
+                textColor: 'rgb(133, 77, 14)',
+                darkTextColor: 'rgb(254, 240, 138)',
+                iconColor: 'rgb(234, 179, 8)',
+                iconSvg: `<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
+                </svg>`
+            },
+            info: {
+                bgColor: 'rgb(239, 246, 255)',
+                darkBgColor: 'rgb(30, 58, 138)',
+                borderColor: 'rgb(147, 197, 253)',
+                darkBorderColor: 'rgb(29, 78, 216)',
+                textColor: 'rgb(30, 64, 175)',
+                darkTextColor: 'rgb(191, 219, 254)',
+                iconColor: 'rgb(59, 130, 246)',
+                iconSvg: `<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
+                </svg>`
+            }
+        }
+        return styles[type as keyof typeof styles] || styles.info
+    }
+
+    // 检测暗色模式
+    const isDarkMode = () => {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+
+    // 显示 Alert
+    const show = (options: AlertOptions) => {
+        const container = createAlertContainer()
+        const type = options.type || 'info'
+        const duration = options.duration !== undefined ? options.duration : 5000
+        const closable = options.closable !== undefined ? options.closable : true
+        const styles = getTypeStyles(type)
+        const dark = isDarkMode()
+
+        const alertId = `xl-alert-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+        
+        const alert = document.createElement('div')
+        alert.id = alertId
+        alert.setAttribute('role', 'alert')
+        alert.style.cssText = `
+            background-color: ${dark ? styles.darkBgColor : styles.bgColor};
+            border-left: 4px solid ${dark ? styles.darkBorderColor : styles.borderColor};
+            color: ${dark ? styles.darkTextColor : styles.textColor};
+            padding: 16px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            transition: all 0.3s ease-in-out;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            transform: scale(0.8);
+            opacity: 0;
+            position: relative;
+        `
+
+        // 创建内容
+        let innerHTML = `
+            <div style="color: ${styles.iconColor}; width: 20px; height: 20px; flex-shrink: 0; margin-right: 12px;">
+                ${styles.iconSvg}
+            </div>
+            <div style="flex: 1;">
+                ${options.title ? `<p style="font-weight: 600; font-size: 14px; margin-bottom: 4px;">${options.title}</p>` : ''}
+                <p style="font-size: ${options.title ? '13px' : '14px'}; font-weight: ${options.title ? '400' : '600'};">${options.content}</p>
+            </div>
+        `
+
+        // 添加关闭按钮
+        if (closable) {
+            innerHTML += `
+                <button 
+                    class="xl-alert-close"
+                    style="
+                        background: transparent;
+                        border: none;
+                        color: ${dark ? styles.darkTextColor : styles.textColor};
+                        cursor: pointer;
+                        padding: 4px;
+                        margin-left: 8px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        opacity: 0.6;
+                        transition: opacity 0.2s;
+                        width: 20px;
+                        height: 20px;
+                        flex-shrink: 0;
+                    "
+                    onmouseover="this.style.opacity='1'"
+                    onmouseout="this.style.opacity='0.6'"
+                >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            `
+        }
+
+        alert.innerHTML = innerHTML
+
+        // 关闭函数
+        const close = () => {
+            alert.style.transform = 'scale(0.8)'
+            alert.style.opacity = '0'
+            setTimeout(() => {
+                if (alert.parentNode) {
+                    container.removeChild(alert)
+                }
+                // 如果容器为空，移除容器
+                if (container.children.length === 0) {
+                    document.body.removeChild(container)
+                }
+            }, 300)
+        }
+
+        // 添加关闭按钮事件
+        if (closable) {
+            const closeBtn = alert.querySelector('.xl-alert-close')
+            if (closeBtn) {
+                closeBtn.addEventListener('click', close)
+            }
+        }
+
+        container.appendChild(alert)
+
+        // 显示动画
+        setTimeout(() => {
+            alert.style.transform = 'scale(1)'
+            alert.style.opacity = '1'
+        }, 10)
+
+        // 自动关闭
+        if (duration > 0) {
+            setTimeout(close, duration)
+        }
+
+        return { close }
+    }
+
+    // 快捷方法
+    const success = (content: string, options?: Partial<AlertOptions>) => {
+        return show({ content, type: 'success', ...options })
+    }
+
+    const error = (content: string, options?: Partial<AlertOptions>) => {
+        return show({ content, type: 'error', ...options })
+    }
+
+    const warning = (content: string, options?: Partial<AlertOptions>) => {
+        return show({ content, type: 'warning', ...options })
+    }
+
+    const info = (content: string, options?: Partial<AlertOptions>) => {
+        return show({ content, type: 'info', ...options })
+    }
+
+    return {
+        show,
+        success,
+        error,
+        warning,
+        info
+    }
+}
+
+// 默认导出
+export default xlAlert

package/src/composables/DateTime.ts

@@ -0,0 +1,391 @@
+// useDateTime.ts
+import dayjs, { Dayjs } from 'dayjs'
+import { ref, computed } from 'vue'
+
+// plugins
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import duration from 'dayjs/plugin/duration'
+import isSameOrAfterPlugin from 'dayjs/plugin/isSameOrAfter'
+import isSameOrBeforePlugin from 'dayjs/plugin/isSameOrBefore'
+import isBetweenPlugin from 'dayjs/plugin/isBetween'
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import isoWeek from 'dayjs/plugin/isoWeek'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+
+// locale
+import 'dayjs/locale/zh-cn'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(relativeTime)
+dayjs.extend(duration)
+dayjs.extend(isSameOrAfterPlugin)
+dayjs.extend(isSameOrBeforePlugin)
+dayjs.extend(isBetweenPlugin)
+dayjs.extend(weekOfYear)
+dayjs.extend(isoWeek)
+dayjs.extend(customParseFormat)
+dayjs.extend(advancedFormat)
+
+export interface DateTimeOptions {
+  /** 时区（默认 Asia/Shanghai） */
+  timezone?: string
+  /** 语言（默认 zh-cn） */
+  locale?: string
+  /** 默认格式 */
+  defaultFormat?: string
+  /** 解析是否严格（默认 false） */
+  parseStrict?: boolean
+  /** 周起始：0 周日；1 周一（默认跟随 locale；传入可强制） */
+  weekStart?: 0 | 1
+}
+
+export interface DateRange {
+  start: Dayjs | null
+  end: Dayjs | null
+}
+
+export interface CalendarDate {
+  date: Dayjs
+  isCurrentMonth: boolean
+  isToday: boolean
+  isSelected: boolean
+  isDisabled: boolean
+  isWeekend: boolean
+}
+
+type DateInput = Dayjs | Date | string | number | null | undefined
+
+export function useDateTime(options: DateTimeOptions = {}) {
+  const {
+    timezone: tz = 'Asia/Shanghai',
+    locale = 'zh-cn',
+    defaultFormat = 'YYYY-MM-DD HH:mm:ss',
+    parseStrict = false,
+    weekStart, // undefined = 跟随 locale
+  } = options
+
+  // 全局 locale（Dayjs 是全局单例，这里设一次即可）
+  dayjs.locale(locale)
+
+  /** 绑定 tz + locale 的工厂（核心入口） */
+  const d = (v?: DateInput) => (v == null ? dayjs() : dayjs(v)).tz(tz).locale(locale)
+
+  /** 归一化：接受任意输入，统一返回 Dayjs（绑定 tz） */
+  const normalize = (v: DateInput, fmt?: string) => {
+    if (fmt) return dayjs(v as any, fmt, parseStrict).tz(tz).locale(locale)
+    return d(v)
+  }
+
+  /** 可选：UTC 与本地时区互转 */
+  const toUTC = (v: DateInput) => normalize(v).utc()
+  const fromUTC = (v: DateInput) => dayjs(v as any).utc().tz(tz).locale(locale)
+
+  // ===================== 基础 =====================
+  const now = ref(d())
+
+  const updateNow = () => { now.value = d() }
+  const getCurrent = () => d()
+
+  const format = (v: DateInput, fmt: string = defaultFormat) => normalize(v).format(fmt)
+  const parse = (v: string | number, fmt?: string) => normalize(v, fmt)
+  const create = (v?: DateInput) => normalize(v)
+
+  // ===================== 比较 =====================
+  const isSame = (a: DateInput, b: DateInput, unit?: dayjs.OpUnitType) =>
+    normalize(a).isSame(normalize(b), unit)
+
+  const isAfter = (a: DateInput, b: DateInput, unit?: dayjs.OpUnitType) =>
+    normalize(a).isAfter(normalize(b), unit)
+
+  const isBefore = (a: DateInput, b: DateInput, unit?: dayjs.OpUnitType) =>
+    normalize(a).isBefore(normalize(b), unit)
+
+  const isSameOrAfter = (a: DateInput, b: DateInput, unit?: dayjs.OpUnitType) =>
+    normalize(a).isSameOrAfter(normalize(b), unit)
+
+  const isSameOrBefore = (a: DateInput, b: DateInput, unit?: dayjs.OpUnitType) =>
+    normalize(a).isSameOrBefore(normalize(b), unit)
+
+  /** 新：支持 inclusivity（'()' | '[]' | '[)' | '(]'），默认 '()' 同 dayjs */
+  const isBetween = (
+    v: DateInput, start: DateInput, end: DateInput,
+    unit?: dayjs.OpUnitType, inclusivity?: '()' | '[]' | '[)' | '(]'
+  ) => normalize(v).isBetween(normalize(start), normalize(end), unit, inclusivity)
+
+  // ===================== 计算 =====================
+  const add = (v: DateInput, amount: number, unit: dayjs.ManipulateType) => normalize(v).add(amount, unit)
+  const subtract = (v: DateInput, amount: number, unit: dayjs.ManipulateType) => normalize(v).subtract(amount, unit)
+  const diff = (a: DateInput, b: DateInput, unit?: dayjs.QUnitType, float?: boolean) =>
+    normalize(a).diff(normalize(b), unit, float)
+
+  const startOf = (v: DateInput, unit: dayjs.OpUnitType) => normalize(v).startOf(unit)
+  const endOf = (v: DateInput, unit: dayjs.OpUnitType) => normalize(v).endOf(unit)
+
+  // ===================== 相对时间 =====================
+  const fromNow = (v: DateInput) => normalize(v).from(d())
+  const toNow = (v: DateInput) => normalize(v).to(d())
+  const from = (a: DateInput, b: DateInput) => normalize(a).from(normalize(b))
+  const to = (a: DateInput, b: DateInput) => normalize(a).to(normalize(b))
+
+  /** 新：更细粒度的人性化差值（单位可选） */
+  const humanizeDiff = (a: DateInput, b: DateInput = d(), unit: dayjs.QUnitType = 'millisecond') => {
+    const ms = normalize(a).diff(normalize(b), 'millisecond')
+    return dayjs.duration(Math.abs(ms)).humanize()
+  }
+
+  /** 新：格式化为分解的时间部分（用于倒计时/仪表） */
+  const formatParts = (ms: number) => {
+    const dur = dayjs.duration(ms)
+    const days = Math.floor(dur.asDays())
+    const hours = dur.hours()
+    const minutes = dur.minutes()
+    const seconds = dur.seconds()
+    return { days, hours, minutes, seconds }
+  }
+
+  // ===================== 日历 / 月份 =====================
+  /**
+   * 重写：遵循 locale 或指定 weekStart，保证 6×7=42 单元
+   * month: 0-11
+   */
+  const getCalendarDates = (
+    year: number,
+    month: number,
+    selectedDate?: DateInput,
+    minDate?: DateInput,
+    maxDate?: DateInput
+  ): CalendarDate[] => {
+    const firstDay = d().year(year).month(month).date(1)
+    const monthStart = firstDay.startOf('month')
+    const monthEnd = firstDay.endOf('month')
+
+    // 确定周起始（默认跟随 locale；可强制为周一）
+    const localWeekStart = typeof weekStart === 'number' ? weekStart : (dayjs.Ls[locale]?.weekStart ?? 0)
+    // Dayjs 的 startOf('week') 受 locale 影响；这里手动对齐
+    const start = monthStart.startOf('week').add(localWeekStart, 'day')
+    const gridStart = start.isAfter(monthStart) ? start.subtract(7, 'day') : start
+
+    const selected = selectedDate ? normalize(selectedDate) : null
+    const min = minDate ? normalize(minDate).startOf('day') : null
+    const max = maxDate ? normalize(maxDate).endOf('day') : null
+    const today = d()
+
+    const cells: CalendarDate[] = []
+    for (let i = 0; i < 42; i++) {
+      const date = gridStart.add(i, 'day')
+      const isCurrentMonth = date.month() === month
+      const isToday = date.isSame(today, 'day')
+      const isSelected = selected ? date.isSame(selected, 'day') : false
+      const wd = date.day()
+      const isWeekend = wd === 0 || wd === 6
+
+      let isDisabled = false
+      if (min && date.isBefore(min, 'day')) isDisabled = true
+      if (max && date.isAfter(max, 'day')) isDisabled = true
+
+      cells.push({ date, isCurrentMonth, isToday, isSelected, isDisabled, isWeekend })
+    }
+    return cells
+  }
+
+  const getMonthInfo = (year: number, month: number) => {
+    const first = d().year(year).month(month).date(1)
+    const last = first.endOf('month')
+    const daysInMonth = last.date()
+    const firstWeekday = first.day() // 0 Sun - 6 Sat
+    const lastWeekday = last.day()
+    const weeksInMonth = Math.ceil((firstWeekday + daysInMonth) / 7)
+    return { firstDay: first, lastDay: last, daysInMonth, firstWeekday, lastWeekday, weeksInMonth }
+  }
+
+  const getTimeRanges = () => {
+    const today = d()
+    return {
+      today: { start: today.startOf('day'), end: today.endOf('day') },
+      yesterday: {
+        start: today.subtract(1, 'day').startOf('day'),
+        end: today.subtract(1, 'day').endOf('day'),
+      },
+      thisWeek: { start: today.startOf('week'), end: today.endOf('week') },
+      lastWeek: {
+        start: today.subtract(1, 'week').startOf('week'),
+        end: today.subtract(1, 'week').endOf('week'),
+      },
+      thisMonth: { start: today.startOf('month'), end: today.endOf('month') },
+      lastMonth: {
+        start: today.subtract(1, 'month').startOf('month'),
+        end: today.subtract(1, 'month').endOf('month'),
+      },
+      thisYear: { start: today.startOf('year'), end: today.endOf('year') },
+      lastYear: {
+        start: today.subtract(1, 'year').startOf('year'),
+        end: today.subtract(1, 'year').endOf('year'),
+      },
+    }
+  }
+
+  // ===================== 校验 / 取值 =====================
+  const isValid = (v: DateInput, fmt?: string) =>
+    fmt ? dayjs(v as any, fmt, parseStrict).isValid() : dayjs(v as any).isValid()
+
+  const getUnit = (v: DateInput, unit: dayjs.UnitType) => normalize(v).get(unit)
+  const setUnit = (v: DateInput, unit: dayjs.UnitType, value: number) => normalize(v).set(unit, value)
+
+  const formats = {
+    date: 'YYYY-MM-DD',
+    time: 'HH:mm:ss',
+    datetime: 'YYYY-MM-DD HH:mm:ss',
+    dateTime: 'YYYY-MM-DD HH:mm',
+    month: 'YYYY-MM',
+    year: 'YYYY',
+    timestamp: 'X',
+    iso: 'YYYY-MM-DDTHH:mm:ssZ',
+  } as const
+
+  return {
+    // 基础
+    now: computed(() => now.value),
+    updateNow,
+    getCurrent,
+    format,
+    parse,
+    create,
+
+    // 比较
+    isSame,
+    isAfter,
+    isBefore,
+    isSameOrAfter,
+    isSameOrBefore,
+    isBetween,
+
+    // 计算
+    add,
+    subtract,
+    diff,
+    startOf,
+    endOf,
+
+    // 相对时间
+    fromNow,
+    toNow,
+    from,
+    to,
+    humanizeDiff,
+    formatParts,
+
+    // 日历
+    getCalendarDates,
+    getMonthInfo,
+    getTimeRanges,
+
+    // 工具
+    isValid,
+    getUnit,
+    setUnit,
+
+    // 常量
+    formats,
+
+    // tz/locale 绑定 dayjs（高级用法）
+    dayjs: (v?: DateInput) => normalize(v),
+
+    // UTC <-> 本地
+    toUTC,
+    fromUTC,
+  }
+}
+
+/** 时间范围选择器（修正：统一 tz） */
+export function useDateRange(initialRange: DateRange = { start: null, end: null }, tz = 'Asia/Shanghai') {
+  const _d = (v?: DateInput) => (v == null ? dayjs() : dayjs(v)).tz(tz)
+
+  const range = ref<DateRange>({ start: initialRange.start ? _d(initialRange.start) : null,
+                                 end: initialRange.end ? _d(initialRange.end) : null })
+
+  const setRange = (start: DateInput, end: DateInput) => {
+    range.value = { start: start ? _d(start) : null, end: end ? _d(end) : null }
+  }
+
+  const clearRange = () => { range.value = { start: null, end: null } }
+
+  const isValidRange = computed(() => {
+    const { start, end } = range.value
+    if (!start || !end) return false
+    return start.isBefore(end) || start.isSame(end)
+  })
+
+  /** 兼容性变更：原先返回天数，这里保留 days，同时附带 ms */
+  const rangeDuration = computed(() => {
+    if (!isValidRange.value) return null
+    const ms = range.value.end!.diff(range.value.start!)
+    return { ms, days: Math.floor(dayjs.duration(ms).asDays()) }
+  })
+
+  return {
+    range: computed(() => range.value),
+    setRange,
+    clearRange,
+    isValidRange,
+    rangeDuration,
+  }
+}
+
+/** 倒计时（统一 tz；新增 parts 输出） */
+export function useCountdown(targetDate: DateInput, tz = 'Asia/Shanghai') {
+  const _d = (v?: DateInput) => (v == null ? dayjs() : dayjs(v)).tz(tz)
+
+  const target = ref(_d(targetDate))
+  const now = ref(_d())
+  const isExpired = ref(false)
+
+  const durationObj = computed(() => {
+    const diffMs = target.value.diff(now.value)
+    if (diffMs <= 0) {
+      isExpired.value = true
+      return dayjs.duration(0)
+    }
+    return dayjs.duration(diffMs)
+  })
+
+  const updateNow = () => { now.value = _d() }
+
+  const formatDuration = (format: string = 'HH:mm:ss') => {
+    if (isExpired.value) return '00:00:00'
+    const dur = durationObj.value
+    const hours = Math.floor(dur.asHours())
+    const minutes = dur.minutes()
+    const seconds = dur.seconds()
+    return format
+      .replace('HH', String(hours).padStart(2, '0'))
+      .replace('mm', String(minutes).padStart(2, '0'))
+      .replace('ss', String(seconds).padStart(2, '0'))
+  }
+
+  const parts = computed(() => {
+    const dur = durationObj.value
+    return {
+      days: Math.floor(dur.asDays()),
+      hours: dur.hours(),
+      minutes: dur.minutes(),
+      seconds: dur.seconds(),
+      milliseconds: dur.milliseconds(),
+    }
+  })
+
+  return {
+    target: computed(() => target.value),
+    now: computed(() => now.value),
+    duration: computed(() => durationObj.value),
+    parts,
+    isExpired: computed(() => isExpired.value),
+    updateNow,
+    formatDuration,
+  }
+}
+
+export default useDateTime

package/src/index.ts

@@ -12,9 +12,15 @@ 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'
+export { default as XTooltips } from './components/Tooltips/index.vue'
+export { default as XScore } from './components/Score/index.vue'
+export { default as XRadio } from './components/Radio/index.vue'
+export { default as XDateTimePicker } from './components/DateTimePicker/index.vue'
 
 // 导出 Composables
 export { xlMsg, default as useMsg } from './composables/Msg'
+export { xlAlert, default as useAlert } from './composables/Alert'
+export { useDateTime, useDateRange, useCountdown, default as useDateTimeDefault } from './composables/DateTime'
 
 // 导出类型定义
 export type { Country, CountrySelectProps } from './components/CountrySelect/index.vue'
@@ -25,4 +31,9 @@ export type { AccordionItem, AccordionProps } from './components/Accordion/index
 export type { ThumbnailContainerProps } from './components/ThumbnailContainer/index.vue'
 export type { SkeletonProps } from './components/Skeleton/index.vue'
 export type { ModalProps } from './components/Modal/index.vue'
+export type { TooltipsProps } from './components/Tooltips/index.vue'
+export type { ScoreProps } from './components/Score/index.vue'
+export type { RadioOption, RadioProps } from './components/Radio/index.vue'
+export type { DateTimePickerProps } from './components/DateTimePicker/index.vue'
+export type { DateTimeOptions, DateRange, CalendarDate } from './composables/DateTime'