wui-components-v2 1.1.69 → 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/useCompanyFieldFilter.ts

@@ -1,91 +1,91 @@
-import { computed, ref, watch } from 'vue'
-import type { Ref } from 'vue'
-import type { Groups } from '../type'
-
-const COMPANY_FIELD_SOURCE_ID = '' // 公司字段 sourceId
-
-export function useCompanyFieldFilter(
-  fieldGroup: () => Groups | undefined,
-  model: Ref<any>,
-  enabled: boolean = true,
-  companyFieldSourceId: string = COMPANY_FIELD_SOURCE_ID,
-) {
-  const deliveryCompanySourceId = ref<string>('')
-  const selectedCompany = ref<string>('')
-
-  if (enabled) {
-    watch(
-      () => fieldGroup()?.fields,
-      (newFields) => {
-        const companyField: any = newFields?.find((item: any) => item.sourceId === companyFieldSourceId) || {}
-        deliveryCompanySourceId.value = companyField.sourceId || ''
-      },
-      { deep: true, immediate: true },
-    )
-
-    // 直接监听 model 中对应字段的值变化
-    // 使用计算属性做中间层，确保 deliveryCompanySourceId 变化时重新建立依赖
-    const companyFieldValue = computed(() => {
-      const sourceId = deliveryCompanySourceId.value
-      if (!sourceId) return undefined
-      return model.value[sourceId]
-    })
-
-    watch(
-      companyFieldValue,
-      (newValue) => {
-        selectedCompany.value = newValue ? String(newValue).substring(0, 2) : ''
-      },
-      { immediate: true },
-    )
-  }
-
-  const formatFieldsItem=(company:string,item:any)=>{
-     const transDefaultValue = item.usableRuleCriterias?.[0]?.transDefaultValue||''
-      const isHidden=item?.unusableMode==='hidden'
-      const values = transDefaultValue.split(',').map(v => v.trim())
-    if(!company){
-      return {
-        ...item,
-        hidden:isHidden,
-      }
-    }else{
-
-      return {
-        ...item,
-        hidden: values.some(v => v.includes(company))?false:item.hidden,
-      }
-
-    }
-  }
-  const filteredFields = computed(() => {
-    const company = selectedCompany.value
-    const allFields = fieldGroup()?.fields
-    if (!allFields)
-      return []
-    const formattedFields = allFields.filter((item: any) => {
-      // 如果没有选中公司，所有字段都显示
-      if (!company) {
-        return true
-      }
-      // 检查 usableRuleCriterias 是否存在且有值
-      if (!item.usableRuleCriterias || item.usableRuleCriterias.length === 0) {
-        return true
-      }
-      // 获取 transDefaultValue 并检查是否包含选中的公司
-      const transDefaultValue = item.usableRuleCriterias?.[0]?.transDefaultValue
-      if (typeof transDefaultValue === 'string') {
-        const values = transDefaultValue.split(',').map(v => v.trim())
-        // console.log('transDefaultValue', company, 'values', values,values.includes(company))
-        return values.some(v => v.includes(company) )
-      }
-      return true
-    })
-    return formattedFields.map((item: any) => formatFieldsItem(company, item))
-  })
-  watch(filteredFields, (val) => {
-    // console.log('filteredFields变化了', val, 'selectedCompany:', selectedCompany.value)
-  }, { immediate: true })
-
-  return { filteredFields, selectedCompany }
-}
+import { computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import type { Groups } from '../type'
+
+const COMPANY_FIELD_SOURCE_ID = '' // 公司字段 sourceId
+
+export function useCompanyFieldFilter(
+  fieldGroup: () => Groups | undefined,
+  model: Ref<any>,
+  enabled: boolean = true,
+  companyFieldSourceId: string = COMPANY_FIELD_SOURCE_ID,
+) {
+  const deliveryCompanySourceId = ref<string>('')
+  const selectedCompany = ref<string>('')
+
+  if (enabled) {
+    watch(
+      () => fieldGroup()?.fields,
+      (newFields) => {
+        const companyField: any = newFields?.find((item: any) => item.sourceId === companyFieldSourceId) || {}
+        deliveryCompanySourceId.value = companyField.sourceId || ''
+      },
+      { deep: true, immediate: true },
+    )
+
+    // 直接监听 model 中对应字段的值变化
+    // 使用计算属性做中间层，确保 deliveryCompanySourceId 变化时重新建立依赖
+    const companyFieldValue = computed(() => {
+      const sourceId = deliveryCompanySourceId.value
+      if (!sourceId) return undefined
+      return model.value[sourceId]
+    })
+
+    watch(
+      companyFieldValue,
+      (newValue) => {
+        selectedCompany.value = newValue ? String(newValue).substring(0, 2) : ''
+      },
+      { immediate: true },
+    )
+  }
+
+  const formatFieldsItem=(company:string,item:any)=>{
+     const transDefaultValue = item.usableRuleCriterias?.[0]?.transDefaultValue||''
+      const isHidden=item?.unusableMode==='hidden'
+      const values = transDefaultValue.split(',').map(v => v.trim())
+    if(!company){
+      return {
+        ...item,
+        hidden:isHidden,
+      }
+    }else{
+
+      return {
+        ...item,
+        hidden: values.some(v => v.includes(company))?false:item.hidden,
+      }
+
+    }
+  }
+  const filteredFields = computed(() => {
+    const company = selectedCompany.value
+    const allFields = fieldGroup()?.fields
+    if (!allFields)
+      return []
+    const formattedFields = allFields.filter((item: any) => {
+      // 如果没有选中公司，所有字段都显示
+      if (!company) {
+        return true
+      }
+      // 检查 usableRuleCriterias 是否存在且有值
+      if (!item.usableRuleCriterias || item.usableRuleCriterias.length === 0) {
+        return true
+      }
+      // 获取 transDefaultValue 并检查是否包含选中的公司
+      const transDefaultValue = item.usableRuleCriterias?.[0]?.transDefaultValue
+      if (typeof transDefaultValue === 'string') {
+        const values = transDefaultValue.split(',').map(v => v.trim())
+        // console.log('transDefaultValue', company, 'values', values,values.includes(company))
+        return values.some(v => v.includes(company) )
+      }
+      return true
+    })
+    return formattedFields.map((item: any) => formatFieldsItem(company, item))
+  })
+  watch(filteredFields, (val) => {
+    // console.log('filteredFields变化了', val, 'selectedCompany:', selectedCompany.value)
+  }, { immediate: true })
+
+  return { filteredFields, selectedCompany }
+}