tang-ui-x 1.0.0

package/composables/useTheme.uts

@@ -0,0 +1,235 @@
+/**
+ * 主题管理组合式函数
+ * @module composables/useTheme
+ */
+
+import { ref, reactive, computed, watch } from 'vue'
+import type { ThemeConfig } from '../types/index.uts'
+
+/** 默认主题配置 */
+const defaultTheme: ThemeConfig = {
+  primaryColor: '#007aff',
+  successColor: '#4cd964',
+  warningColor: '#f0ad4e',
+  dangerColor: '#dd524d',
+  infoColor: '#909399',
+  textColor: '#303133',
+  borderColor: '#dcdfe6',
+  backgroundColor: '#f5f7fa',
+  borderRadius: '8rpx',
+  fontSize: '28rpx'
+}
+
+/** 当前主题配置 */
+const currentTheme = reactive<ThemeConfig>({ ...defaultTheme })
+
+/** 是否深色模式 */
+const isDarkMode = ref(false)
+
+/**
+ * 主题管理组合式函数
+ * @returns {Object} 主题管理对象
+ */
+export function useTheme() {
+  /**
+   * 设置主题
+   * @param {Partial<ThemeConfig>} theme - 主题配置
+   */
+  const setTheme = (theme: Partial<ThemeConfig>) => {
+    Object.assign(currentTheme, theme)
+    applyTheme()
+  }
+
+  /**
+   * 重置主题
+   */
+  const resetTheme = () => {
+    Object.assign(currentTheme, defaultTheme)
+    applyTheme()
+  }
+
+  /**
+   * 切换深色模式
+   * @param {boolean} dark - 是否深色模式
+   */
+  const toggleDarkMode = (dark?: boolean) => {
+    isDarkMode.value = dark !== undefined ? dark : !isDarkMode.value
+
+    if (isDarkMode.value) {
+      applyDarkTheme()
+    } else {
+      applyLightTheme()
+    }
+  }
+
+  /**
+   * 应用主题到页面
+   */
+  const applyTheme = () => {
+    try {
+      // 在 H5 平台应用 CSS 变量
+      // #ifdef H5
+      const root = document.documentElement
+      if (root) {
+        root.style.setProperty('--primary-color', currentTheme.primaryColor)
+        root.style.setProperty('--success-color', currentTheme.successColor)
+        root.style.setProperty('--warning-color', currentTheme.warningColor)
+        root.style.setProperty('--danger-color', currentTheme.dangerColor)
+        root.style.setProperty('--info-color', currentTheme.infoColor)
+        root.style.setProperty('--text-color', currentTheme.textColor)
+        root.style.setProperty('--border-color', currentTheme.borderColor)
+        root.style.setProperty('--bg-color', currentTheme.backgroundColor)
+        root.style.setProperty('--border-radius', currentTheme.borderRadius)
+        root.style.setProperty('--font-size', currentTheme.fontSize)
+      }
+      // #endif
+
+      // 存储到本地
+      uni.setStorageSync('theme-config', JSON.stringify(currentTheme))
+    } catch (e) {
+      console.error('应用主题失败:', e)
+    }
+  }
+
+  /**
+   * 应用深色主题
+   */
+  const applyDarkTheme = () => {
+    const darkTheme: Partial<ThemeConfig> = {
+      primaryColor: '#409eff',
+      successColor: '#67c23a',
+      warningColor: '#e6a23c',
+      dangerColor: '#f56c6c',
+      infoColor: '#909399',
+      textColor: '#f0f0f0',
+      borderColor: '#4c4c4c',
+      backgroundColor: '#1a1a1a',
+      borderRadius: '8rpx',
+      fontSize: '28rpx'
+    }
+    setTheme(darkTheme)
+  }
+
+  /**
+   * 应用浅色主题
+   */
+  const applyLightTheme = () => {
+    resetTheme()
+  }
+
+  /**
+   * 从本地存储加载主题
+   */
+  const loadTheme = () => {
+    try {
+      const savedTheme = uni.getStorageSync('theme-config')
+      if (savedTheme) {
+        const theme = JSON.parse(savedTheme)
+        Object.assign(currentTheme, theme)
+        applyTheme()
+      }
+
+      const savedDarkMode = uni.getStorageSync('dark-mode')
+      if (savedDarkMode !== '') {
+        isDarkMode.value = savedDarkMode === 'true'
+      }
+    } catch (e) {
+      console.error('加载主题失败:', e)
+    }
+  }
+
+  /**
+   * 获取主题颜色
+   * @param {string} type - 颜色类型
+   * @returns {string} 颜色值
+   */
+  const getColor = (type: string): string => {
+    switch (type) {
+      case 'primary':
+        return currentTheme.primaryColor
+      case 'success':
+        return currentTheme.successColor
+      case 'warning':
+        return currentTheme.warningColor
+      case 'danger':
+        return currentTheme.dangerColor
+      case 'info':
+        return currentTheme.infoColor
+      case 'text':
+        return currentTheme.textColor
+      case 'border':
+        return currentTheme.borderColor
+      case 'bg':
+      case 'background':
+        return currentTheme.backgroundColor
+      default:
+        return currentTheme.primaryColor
+    }
+  }
+
+  /**
+   * 获取计算后的主题
+   */
+  const computedTheme = computed(() => currentTheme)
+
+  /**
+   * 监听系统主题变化
+   */
+  const watchSystemTheme = () => {
+    // #ifdef H5
+    if (window.matchMedia) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      mediaQuery.addListener((e) => {
+        if (e.matches) {
+          toggleDarkMode(true)
+        } else {
+          toggleDarkMode(false)
+        }
+      })
+    }
+    // #endif
+
+    // #ifdef APP-PLUS
+    plus.globalEvent.addEventListener('ThemeChange', (e: any) => {
+      toggleDarkMode(e.dark)
+    })
+    // #endif
+  }
+
+  // 监听深色模式变化
+  watch(isDarkMode, (newValue) => {
+    uni.setStorageSync('dark-mode', String(newValue))
+  })
+
+  // 初始化加载主题
+  loadTheme()
+  watchSystemTheme()
+
+  return {
+    // 状态
+    theme: computedTheme,
+    isDarkMode,
+
+    // 方法
+    setTheme,
+    resetTheme,
+    toggleDarkMode,
+    getColor,
+    loadTheme,
+
+    // 常量
+    defaultTheme
+  }
+}
+
+/**
+ * 获取主题实例（单例模式）
+ */
+let themeInstance: ReturnType<typeof useTheme> | null = null
+
+export function getThemeInstance() {
+  if (!themeInstance) {
+    themeInstance = useTheme()
+  }
+  return themeInstance
+}

package/composables/useToast.uts

@@ -0,0 +1,322 @@
+/**
+ * Toast 提示管理组合式函数
+ * @module composables/useToast
+ */
+
+import { ref } from 'vue'
+import type { ToastOptions, ComponentType, PositionType } from '@/types/index.uts'
+
+/** Toast 队列 */
+const toastQueue = ref<ToastOptions[]>([])
+
+/** 当前显示的 Toast */
+const currentToast = ref<ToastOptions | null>(null)
+
+/** 是否正在显示 */
+const isShowing = ref(false)
+
+/** 默认配置 */
+const defaultOptions: Partial<ToastOptions> = {
+  duration: 2000,
+  position: 'center',
+  type: 'default',
+  mask: false
+}
+
+/**
+ * Toast 管理组合式函数
+ * @returns {Object} Toast 管理对象
+ */
+export function useToast() {
+  /**
+   * 显示 Toast
+   * @param {string | ToastOptions} options - 提示内容或配置
+   * @returns {void}
+   */
+  const show = (options: string | ToastOptions): void => {
+    try {
+      // 处理参数
+      const toastOptions: ToastOptions = typeof options === 'string'
+        ? { message: options }
+        : options
+
+      // 合并默认配置
+      const config = { ...defaultOptions, ...toastOptions }
+
+      // 添加到队列
+      toastQueue.value.push(config)
+
+      // 如果当前没有显示，则开始显示
+      if (!isShowing.value) {
+        showNext()
+      }
+    } catch (error) {
+      console.error('显示 Toast 失败:', error)
+    }
+  }
+
+  /**
+   * 显示成功提示
+   * @param {string} message - 提示内容
+   * @param {number} duration - 显示时长
+   */
+  const success = (message: string, duration?: number): void => {
+    show({
+      message,
+      type: 'success',
+      duration: duration || defaultOptions.duration
+    })
+  }
+
+  /**
+   * 显示错误提示
+   * @param {string} message - 提示内容
+   * @param {number} duration - 显示时长
+   */
+  const error = (message: string, duration?: number): void => {
+    show({
+      message,
+      type: 'danger',
+      duration: duration || defaultOptions.duration
+    })
+  }
+
+  /**
+   * 显示警告提示
+   * @param {string} message - 提示内容
+   * @param {number} duration - 显示时长
+   */
+  const warning = (message: string, duration?: number): void => {
+    show({
+      message,
+      type: 'warning',
+      duration: duration || defaultOptions.duration
+    })
+  }
+
+  /**
+   * 显示信息提示
+   * @param {string} message - 提示内容
+   * @param {number} duration - 显示时长
+   */
+  const info = (message: string, duration?: number): void => {
+    show({
+      message,
+      type: 'info',
+      duration: duration || defaultOptions.duration
+    })
+  }
+
+  /**
+   * 显示加载提示
+   * @param {string} message - 提示内容
+   * @returns {Function} 关闭函数
+   */
+  const loading = (message: string = '加载中...'): (() => void) => {
+    uni.showToast({
+      title: message,
+      icon: 'loading',
+      duration: 100000,  // 设置一个很长的时间
+      mask: true
+    })
+
+    return () => {
+      uni.hideToast()
+    }
+  }
+
+  /**
+   * 显示下一个 Toast
+   */
+  const showNext = (): void => {
+    if (toastQueue.value.length === 0) {
+      isShowing.value = false
+      return
+    }
+
+    isShowing.value = true
+    currentToast.value = toastQueue.value.shift() || null
+
+    if (!currentToast.value) {
+      isShowing.value = false
+      return
+    }
+
+    // 根据类型选择图标
+    let icon: 'success' | 'error' | 'loading' | 'none' = 'none'
+    let image: string | undefined = undefined
+
+    switch (currentToast.value.type) {
+      case 'success':
+        icon = 'success'
+        break
+      case 'danger':
+        icon = 'error'
+        break
+      case 'warning':
+      case 'info':
+        // 使用自定义图标
+        // image = '/static/icons/warning.png'  // 需要准备图标文件
+        icon = 'none'
+        break
+      default:
+        icon = 'none'
+        break
+    }
+
+    // 处理位置（uni.showToast 不支持自定义位置，这里仅作记录）
+    // 实际项目中可以使用自定义组件来支持更多位置选项
+
+    // 显示 Toast
+    uni.showToast({
+      title: currentToast.value.message,
+      icon,
+      image,
+      duration: currentToast.value.duration,
+      mask: currentToast.value.mask,
+      success: () => {
+        // 设置定时器，在 duration 后显示下一个
+        setTimeout(() => {
+          currentToast.value = null
+          showNext()
+        }, currentToast.value?.duration || 2000)
+      },
+      fail: (error) => {
+        console.error('Toast 显示失败:', error)
+        currentToast.value = null
+        isShowing.value = false
+
+        // 尝试显示下一个
+        setTimeout(() => showNext(), 100)
+      }
+    })
+  }
+
+  /**
+   * 隐藏当前 Toast
+   */
+  const hide = (): void => {
+    uni.hideToast()
+    currentToast.value = null
+
+    // 清理后显示下一个
+    if (toastQueue.value.length > 0) {
+      setTimeout(() => showNext(), 100)
+    } else {
+      isShowing.value = false
+    }
+  }
+
+  /**
+   * 清空 Toast 队列
+   */
+  const clear = (): void => {
+    toastQueue.value = []
+    currentToast.value = null
+    isShowing.value = false
+    uni.hideToast()
+  }
+
+  /**
+   * 设置默认配置
+   * @param {Partial<ToastOptions>} options - 配置项
+   */
+  const setDefaults = (options: Partial<ToastOptions>): void => {
+    Object.assign(defaultOptions, options)
+  }
+
+  /**
+   * 获取队列长度
+   * @returns {number} 队列长度
+   */
+  const getQueueLength = (): number => {
+    return toastQueue.value.length
+  }
+
+  return {
+    // 状态
+    isShowing,
+    currentToast,
+    toastQueue,
+
+    // 方法
+    show,
+    success,
+    error,
+    warning,
+    info,
+    loading,
+    hide,
+    clear,
+    setDefaults,
+    getQueueLength
+  }
+}
+
+/**
+ * 获取 Toast 实例（单例模式）
+ */
+let toastInstance: ReturnType<typeof useToast> | null = null
+
+export function getToastInstance() {
+  if (!toastInstance) {
+    toastInstance = useToast()
+  }
+  return toastInstance
+}
+
+/**
+ * 快捷方法：显示 Toast
+ */
+export function showToast(options: string | ToastOptions): void {
+  getToastInstance().show(options)
+}
+
+/**
+ * 快捷方法：显示成功提示
+ */
+export function showSuccess(message: string, duration?: number): void {
+  getToastInstance().success(message, duration)
+}
+
+/**
+ * 快捷方法：显示错误提示
+ */
+export function showError(message: string, duration?: number): void {
+  getToastInstance().error(message, duration)
+}
+
+/**
+ * 快捷方法：显示警告提示
+ */
+export function showWarning(message: string, duration?: number): void {
+  getToastInstance().warning(message, duration)
+}
+
+/**
+ * 快捷方法：显示信息提示
+ */
+export function showInfo(message: string, duration?: number): void {
+  getToastInstance().info(message, duration)
+}
+
+/**
+ * 快捷方法：显示加载提示
+ */
+export function showLoadingToast(message?: string): () => void {
+  return getToastInstance().loading(message)
+}
+
+/**
+ * 快捷方法：隐藏 Toast
+ */
+export function hideToast(): void {
+  getToastInstance().hide()
+}
+
+/**
+ * 快捷方法：清空 Toast 队列
+ */
+export function clearToast(): void {
+  getToastInstance().clear()
+}

package/index.js

@@ -0,0 +1,62 @@
+// UniApp X UI 组件库入口文件
+// 注意：uni-app x 项目通常通过 easycom 自动导入组件，无需手动注册
+
+// 导出所有组件（供按需引入使用）
+export { default as TButton } from './components/TButton/TButton.vue'
+export { default as TIcon } from './components/TIcon/TIcon.vue'
+export { default as TText } from './components/TText/TText.vue'
+export { default as TImage } from './components/TImage/TImage.vue'
+export { default as TDivider } from './components/TDivider/TDivider.vue'
+
+// 布局组件
+export { default as TCard } from './components/TCard/TCard.vue'
+export { default as TList } from './components/TList/TList.vue'
+export { default as TListItem } from './components/TListItem/TListItem.vue'
+export { default as TCell } from './components/TCell/TCell.vue'
+export { default as TGrid } from './components/TGrid/TGrid.vue'
+export { default as TGridItem } from './components/TGridItem/TGridItem.vue'
+export { default as TRow } from './components/TRow/TRow.vue'
+export { default as TCol } from './components/TCol/TCol.vue'
+
+// 表单组件
+export { default as TInput } from './components/TInput/TInput.vue'
+export { default as TNumberInput } from './components/TNumberInput/TNumberInput.vue'
+export { default as TTextarea } from './components/TTextarea/TTextarea.vue'
+export { default as TSearchBar } from './components/TSearchBar/TSearchBar.vue'
+export { default as TSwitch } from './components/TSwitch/TSwitch.vue'
+export { default as TCheckbox } from './components/TCheckbox/TCheckbox.vue'
+export { default as TCheckboxGroup } from './components/TCheckboxGroup/TCheckboxGroup.vue'
+export { default as TRadioButton } from './components/TRadioButton/TRadioButton.vue'
+export { default as TRadioGroup } from './components/TRadioGroup/TRadioGroup.vue'
+export { default as TSelect } from './components/TSelect/TSelect.vue'
+export { default as TSlider } from './components/TSlider/TSlider.vue'
+export { default as TRate } from './components/TRate/TRate.vue'
+
+// 数据展示
+export { default as Tags } from './components/Tags/Tags.vue'
+export { default as TBadge } from './components/TBadge/TBadge.vue'
+export { default as TAvatar } from './components/TAvatar/TAvatar.vue'
+export { default as TProgress } from './components/TProgress/TProgress.vue'
+export { default as TNoticeBar } from './components/TNoticeBar/TNoticeBar.vue'
+export { default as TCollapse } from './components/TCollapse/TCollapse.vue'
+export { default as TCollapseItem } from './components/TCollapseItem/TCollapseItem.vue'
+export { default as TEmpty } from './components/TEmpty/TEmpty.vue'
+export { default as TErrorState } from './components/TErrorState/TErrorState.vue'
+export { default as TSwiper } from './components/TSwiper/TSwiper.vue'
+
+// 反馈组件
+export { default as TLoading } from './components/TLoading/TLoading.vue'
+export { default as TToast } from './components/TToast/TToast.vue'
+export { default as TDialog } from './components/TDialog/TDialog.vue'
+export { default as TPopup } from './components/TPopup/TPopup.vue'
+export { default as TActionSheet } from './components/TActionSheet/TActionSheet.vue'
+
+// 导航组件
+export { default as Tabs } from './components/Tabs/Tabs.vue'
+export { default as TNavBar } from './components/TNavBar/TNavBar.vue'
+
+// 导出工具函数（如果有）
+export * from './utils'
+
+// 版本信息
+export const version = '1.0.0'

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "tang-ui-x",
+  "version": "1.0.0",
+  "description": "UniApp X UI 组件库 - 基于 uni-app x 的移动端 UI 组件库",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "components",
+    "composables",
+    "utils",
+    "types",
+    "style",
+    "uni.scss",
+    "index.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "uniapp",
+    "uni-app-x",
+    "uniapp-x",
+    "ui",
+    "components",
+    "mobile",
+    "vue3",
+    "typescript",
+    "tang-ui"
+  ],
+  "author": "sugar258596",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sugar258596/tang-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sugar258596/tang-ui/issues"
+  },
+  "homepage": "https://github.com/sugar258596/tang-ui#readme",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "echo 'Build completed'",
+    "version": "npm run build"
+  }
+}