wui-components-v2 1.1.70 → 1.1.71

package/composables/useColorGenerator.ts

@@ -1,221 +1,221 @@
-import { computed, ref } from 'vue'
-import {
-  generateHarmoniousColors,
-  generateIconColors,
-  generateRandomColorFromHex,
-  getColorVariant,
-  hexToRgb,
-  rgbToHex,
-} from '../utils/index'
-import { useManualTheme } from './useManualTheme'
-// 定义颜色对象的类型
-interface ColorObject {
-  hex: string
-  rgb: { r: number, g: number, b: number }
-  hsl: { h: number, s: number, l: number }
-}
-
-/**
- * Vue 3 Composition API: 颜色生成器
- * @param {string} baseHex - 基础十六进制颜色，如 #2164F3
- * @param {object} options - 配置选项
- * @returns {object} 颜色相关的方法和响应式数据
- */
-export function useColorGenerator(options = {}) {
-  // 默认配置
-  const defaultOptions = {
-    hueRange: 60,
-    saturationRange: 0,
-    lightnessRange: 0,
-    count: 8,
-    autoRegenerate: true,
-  }
-
-  const config = { ...defaultOptions, ...options }
-  const {
-    currentThemeColor,
-  } = useManualTheme()
-  // 响应式数据
-  const baseColor = computed(() => currentThemeColor.value.primary)
-  const hueRange = ref(config.hueRange)
-  const saturationRange = ref(config.saturationRange)
-  const lightnessRange = ref(config.lightnessRange)
-  const colors = ref<ColorObject[]>([])
-  const currentRandomColor = ref<ColorObject | null>(null)
-  const colorVariants = ref<Record<string, string>>({})
-
-  /**
-   * 生成基础颜色的RGB对象
-   */
-  const baseRgb = computed(() => hexToRgb(baseColor.value))
-
-  /**
-   * 生成单个随机颜色
-   */
-  const generateRandomColor = () => {
-    currentRandomColor.value = generateRandomColorFromHex(baseColor.value, {
-      hueRange: hueRange.value,
-      saturationRange: saturationRange.value,
-      lightnessRange: lightnessRange.value,
-    })
-
-    return currentRandomColor.value
-  }
-
-  /**
-   * 生成一组协调的颜色
-   */
-  const generateColors = (count = config.count) => {
-    colors.value = generateHarmoniousColors(baseColor.value, count, {
-      hueRange: hueRange.value,
-      saturationRange: saturationRange.value,
-      lightnessRange: lightnessRange.value,
-      colorType: '',
-    })
-
-    return colors.value
-  }
-
-  /**
-   * 生成图标颜色（使用智能算法）
-   */
-  const generateSmartIconColors = (count = config.count) => {
-    colors.value = generateIconColors(baseColor.value, count)
-    return colors.value
-  }
-
-  /**
-   * 生成颜色变体
-   */
-  const generateColorVariants = () => {
-    const variants = ['lighter', 'light', 'dark', 'darker', 'muted']
-    colorVariants.value = {}
-
-    variants.forEach((variant) => {
-      colorVariants.value[variant] = getColorVariant(baseColor.value, variant)
-    })
-
-    return colorVariants.value
-  }
-
-  /**
-   * 更新基础颜色
-   */
-  // const updateBaseColor = (newHex: string) => {
-  //     baseColor.value = newHex;
-  //     if (config.autoRegenerate) {
-  //         generateRandomColor();
-  //         generateColors();
-  //     }
-  // };
-
-  /**
-   * 更新配置
-   */
-  const updateConfig = (newConfig: { hueRange: number | undefined, saturationRange: number | undefined, lightnessRange: number | undefined }) => {
-    if (newConfig.hueRange !== undefined) {
-      hueRange.value = newConfig.hueRange
-    }
-    if (newConfig.saturationRange !== undefined) {
-      saturationRange.value = newConfig.saturationRange
-    }
-    if (newConfig.lightnessRange !== undefined) {
-      lightnessRange.value = newConfig.lightnessRange
-    }
-
-    if (config.autoRegenerate) {
-      generateRandomColor()
-      generateColors()
-    }
-  }
-
-  /**
-   * 获取CSS变量对象，方便在CSS中使用
-   */
-  const cssVariables = computed(() => {
-    const vars: Record<string, string> = {
-      '--primary': baseColor.value,
-      '--primary-rgb': `${baseRgb.value.r}, ${baseRgb.value.g}, ${baseRgb.value.b}`,
-    }
-
-    // 添加颜色变体
-    Object.entries(colorVariants.value).forEach(([key, value]) => {
-      vars[`--primary-${key}`] = value as string
-    })
-
-    // 添加生成的颜色
-    colors.value.forEach((color, index) => {
-      vars[`--color-${index + 1}`] = color.hex
-      vars[`--color-${index + 1}-rgb`] = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`
-    })
-
-    return vars
-  })
-
-  /**
-   * 应用到DOM元素的样式
-   */
-  const applyStyleToElement = (element: { style: { color: any, setProperty: (arg0: string, arg1: any) => void } }, colorObj: { hex: any }) => {
-    if (element && colorObj) {
-      element.style.color = colorObj.hex
-      element.style.setProperty('--current-color', colorObj.hex)
-    }
-  }
-
-  // 初始化
-  generateRandomColor()
-  generateColors()
-  generateColorVariants()
-
-  return {
-    // 响应式数据
-    baseColor,
-    baseRgb,
-    hueRange,
-    saturationRange,
-    lightnessRange,
-    colors,
-    currentRandomColor,
-    colorVariants,
-    cssVariables,
-
-    // 计算属性
-    currentHex: computed(() =>
-      currentRandomColor.value?.hex || baseColor.value,
-    ),
-
-    // 方法
-    generateRandomColor,
-    generateColors,
-    generateSmartIconColors,
-    generateColorVariants,
-    // updateBaseColor,
-    updateConfig,
-    applyStyleToElement,
-
-    // 工具方法
-    hexToRgb,
-    rgbToHex,
-  }
-}
-
-/**
- * 快速使用的简易版本
- * @param {string} baseHex - 基础颜色
- * @returns {object} 简化的颜色生成器
- */
-export function useQuickColorGenerator() {
-  const generator = useColorGenerator({
-    count: 5,
-    autoRegenerate: false,
-  })
-
-  // 立即生成一次
-  generator.generateSmartIconColors()
-
-  return {
-    colors: generator.colors,
-    getRandomColor: generator.generateRandomColor,
-    refreshColors: () => generator.generateSmartIconColors(5),
-  }
-}
+import { computed, ref } from 'vue'
+import {
+  generateHarmoniousColors,
+  generateIconColors,
+  generateRandomColorFromHex,
+  getColorVariant,
+  hexToRgb,
+  rgbToHex,
+} from '../utils/index'
+import { useManualTheme } from './useManualTheme'
+// 定义颜色对象的类型
+interface ColorObject {
+  hex: string
+  rgb: { r: number, g: number, b: number }
+  hsl: { h: number, s: number, l: number }
+}
+
+/**
+ * Vue 3 Composition API: 颜色生成器
+ * @param {string} baseHex - 基础十六进制颜色，如 #2164F3
+ * @param {object} options - 配置选项
+ * @returns {object} 颜色相关的方法和响应式数据
+ */
+export function useColorGenerator(options = {}) {
+  // 默认配置
+  const defaultOptions = {
+    hueRange: 60,
+    saturationRange: 0,
+    lightnessRange: 0,
+    count: 8,
+    autoRegenerate: true,
+  }
+
+  const config = { ...defaultOptions, ...options }
+  const {
+    currentThemeColor,
+  } = useManualTheme()
+  // 响应式数据
+  const baseColor = computed(() => currentThemeColor.value.primary)
+  const hueRange = ref(config.hueRange)
+  const saturationRange = ref(config.saturationRange)
+  const lightnessRange = ref(config.lightnessRange)
+  const colors = ref<ColorObject[]>([])
+  const currentRandomColor = ref<ColorObject | null>(null)
+  const colorVariants = ref<Record<string, string>>({})
+
+  /**
+   * 生成基础颜色的RGB对象
+   */
+  const baseRgb = computed(() => hexToRgb(baseColor.value))
+
+  /**
+   * 生成单个随机颜色
+   */
+  const generateRandomColor = () => {
+    currentRandomColor.value = generateRandomColorFromHex(baseColor.value, {
+      hueRange: hueRange.value,
+      saturationRange: saturationRange.value,
+      lightnessRange: lightnessRange.value,
+    })
+
+    return currentRandomColor.value
+  }
+
+  /**
+   * 生成一组协调的颜色
+   */
+  const generateColors = (count = config.count) => {
+    colors.value = generateHarmoniousColors(baseColor.value, count, {
+      hueRange: hueRange.value,
+      saturationRange: saturationRange.value,
+      lightnessRange: lightnessRange.value,
+      colorType: '',
+    })
+
+    return colors.value
+  }
+
+  /**
+   * 生成图标颜色（使用智能算法）
+   */
+  const generateSmartIconColors = (count = config.count) => {
+    colors.value = generateIconColors(baseColor.value, count)
+    return colors.value
+  }
+
+  /**
+   * 生成颜色变体
+   */
+  const generateColorVariants = () => {
+    const variants = ['lighter', 'light', 'dark', 'darker', 'muted']
+    colorVariants.value = {}
+
+    variants.forEach((variant) => {
+      colorVariants.value[variant] = getColorVariant(baseColor.value, variant)
+    })
+
+    return colorVariants.value
+  }
+
+  /**
+   * 更新基础颜色
+   */
+  // const updateBaseColor = (newHex: string) => {
+  //     baseColor.value = newHex;
+  //     if (config.autoRegenerate) {
+  //         generateRandomColor();
+  //         generateColors();
+  //     }
+  // };
+
+  /**
+   * 更新配置
+   */
+  const updateConfig = (newConfig: { hueRange: number | undefined, saturationRange: number | undefined, lightnessRange: number | undefined }) => {
+    if (newConfig.hueRange !== undefined) {
+      hueRange.value = newConfig.hueRange
+    }
+    if (newConfig.saturationRange !== undefined) {
+      saturationRange.value = newConfig.saturationRange
+    }
+    if (newConfig.lightnessRange !== undefined) {
+      lightnessRange.value = newConfig.lightnessRange
+    }
+
+    if (config.autoRegenerate) {
+      generateRandomColor()
+      generateColors()
+    }
+  }
+
+  /**
+   * 获取CSS变量对象，方便在CSS中使用
+   */
+  const cssVariables = computed(() => {
+    const vars: Record<string, string> = {
+      '--primary': baseColor.value,
+      '--primary-rgb': `${baseRgb.value.r}, ${baseRgb.value.g}, ${baseRgb.value.b}`,
+    }
+
+    // 添加颜色变体
+    Object.entries(colorVariants.value).forEach(([key, value]) => {
+      vars[`--primary-${key}`] = value as string
+    })
+
+    // 添加生成的颜色
+    colors.value.forEach((color, index) => {
+      vars[`--color-${index + 1}`] = color.hex
+      vars[`--color-${index + 1}-rgb`] = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`
+    })
+
+    return vars
+  })
+
+  /**
+   * 应用到DOM元素的样式
+   */
+  const applyStyleToElement = (element: { style: { color: any, setProperty: (arg0: string, arg1: any) => void } }, colorObj: { hex: any }) => {
+    if (element && colorObj) {
+      element.style.color = colorObj.hex
+      element.style.setProperty('--current-color', colorObj.hex)
+    }
+  }
+
+  // 初始化
+  generateRandomColor()
+  generateColors()
+  generateColorVariants()
+
+  return {
+    // 响应式数据
+    baseColor,
+    baseRgb,
+    hueRange,
+    saturationRange,
+    lightnessRange,
+    colors,
+    currentRandomColor,
+    colorVariants,
+    cssVariables,
+
+    // 计算属性
+    currentHex: computed(() =>
+      currentRandomColor.value?.hex || baseColor.value,
+    ),
+
+    // 方法
+    generateRandomColor,
+    generateColors,
+    generateSmartIconColors,
+    generateColorVariants,
+    // updateBaseColor,
+    updateConfig,
+    applyStyleToElement,
+
+    // 工具方法
+    hexToRgb,
+    rgbToHex,
+  }
+}
+
+/**
+ * 快速使用的简易版本
+ * @param {string} baseHex - 基础颜色
+ * @returns {object} 简化的颜色生成器
+ */
+export function useQuickColorGenerator() {
+  const generator = useColorGenerator({
+    count: 5,
+    autoRegenerate: false,
+  })
+
+  // 立即生成一次
+  generator.generateSmartIconColors()
+
+  return {
+    colors: generator.colors,
+    getRandomColor: generator.generateRandomColor,
+    refreshColors: () => generator.generateSmartIconColors(5),
+  }
+}

package/composables/useEnumes.ts

@@ -1,43 +1,43 @@
-import { ref } from 'vue'
-import { enums } from '../api/page'
-import ControlTypeSupportor from '../utils/control-type-supportor'
-import type { Enums } from '../type'
-
-export function useEnums({ config }: { config: any }) {
-  const enumColumn = ref<Enums>({})
-  // 获取枚举
-  async function getEnums() {
-    try {
-      const params: string[] = []
-      const criteria = config.value?.criteria ?? []
-      const columns = config.value.columns ?? []
-      const writes = config.value.rowActions?.reduce((acc: any, cur: any) => {
-        return [...acc, ...cur.writes]
-      }, []) || []
-      columns.forEach((item: any) => {
-        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
-          params.push(`mstrucIds=${item.mstrucId}`)
-        }
-      })
-      criteria.forEach((item: any) => {
-        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
-          params.push(`mstrucIds=${item.mstrucId}`)
-        }
-      })
-      writes.forEach((item: any) => {
-        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
-          params.push(`mstrucIds=${item.mstrucId}`)
-        }
-      })
-      if (!params.length)
-        return
-      const res = await enums(params.join('&'))
-      enumColumn.value = res.enumMap || {}
-    }
-    catch (error) {
-      console.log('error:', error)
-    }
-  }
-
-  return { getEnums, enumColumn }
-}
+import { ref } from 'vue'
+import { enums } from '../api/page'
+import ControlTypeSupportor from '../utils/control-type-supportor'
+import type { Enums } from '../type'
+
+export function useEnums({ config }: { config: any }) {
+  const enumColumn = ref<Enums>({})
+  // 获取枚举
+  async function getEnums() {
+    try {
+      const params: string[] = []
+      const criteria = config.value?.criteria ?? []
+      const columns = config.value.columns ?? []
+      const writes = config.value.rowActions?.reduce((acc: any, cur: any) => {
+        return [...acc, ...cur.writes]
+      }, []) || []
+      columns.forEach((item: any) => {
+        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+          params.push(`mstrucIds=${item.mstrucId}`)
+        }
+      })
+      criteria.forEach((item: any) => {
+        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+          params.push(`mstrucIds=${item.mstrucId}`)
+        }
+      })
+      writes.forEach((item: any) => {
+        if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+          params.push(`mstrucIds=${item.mstrucId}`)
+        }
+      })
+      if (!params.length)
+        return
+      const res = await enums(params.join('&'))
+      enumColumn.value = res.enumMap || {}
+    }
+    catch (error) {
+      console.log('error:', error)
+    }
+  }
+
+  return { getEnums, enumColumn }
+}

package/composables/useEventBus.ts

@@ -1,37 +1,37 @@
-import { onUnmounted } from 'vue'
-import { eventBus } from '../utils/eventBus'
-
-export function useEventBus() {
-  const subscriptions: Array<{ event: string, callback: (...args: any[]) => void }> = []
-
-  const on = (event: string, callback: (...args: any[]) => void) => {
-    eventBus.on(event, callback)
-    subscriptions.push({ event, callback })
-  }
-
-  const off = (event: string, callback: (...args: any[]) => void) => {
-    eventBus.off(event, callback)
-  }
-
-  const emit = (event: string, ...args: any[]) => {
-    eventBus.emit(event, ...args)
-  }
-
-  const once = (event: string, callback: (...args: any[]) => void) => {
-    eventBus.once(event, callback)
-  }
-
-  onUnmounted(() => {
-    // 组件卸载时自动取消订阅
-    subscriptions.forEach(({ event, callback }) => {
-      eventBus.off(event, callback)
-    })
-  })
-
-  return {
-    on,
-    off,
-    emit,
-    once,
-  }
-}
+import { onUnmounted } from 'vue'
+import { eventBus } from '../utils/eventBus'
+
+export function useEventBus() {
+  const subscriptions: Array<{ event: string, callback: (...args: any[]) => void }> = []
+
+  const on = (event: string, callback: (...args: any[]) => void) => {
+    eventBus.on(event, callback)
+    subscriptions.push({ event, callback })
+  }
+
+  const off = (event: string, callback: (...args: any[]) => void) => {
+    eventBus.off(event, callback)
+  }
+
+  const emit = (event: string, ...args: any[]) => {
+    eventBus.emit(event, ...args)
+  }
+
+  const once = (event: string, callback: (...args: any[]) => void) => {
+    eventBus.once(event, callback)
+  }
+
+  onUnmounted(() => {
+    // 组件卸载时自动取消订阅
+    subscriptions.forEach(({ event, callback }) => {
+      eventBus.off(event, callback)
+    })
+  })
+
+  return {
+    on,
+    off,
+    emit,
+    once,
+  }
+}