@veltra/desktop 1.6.1 → 1.6.2

package/dist/components/number-input/number-input.js

@@ -213,6 +213,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				_rawInput.value = getDisplayed(model.value);
 			}
 		});
+		/**
+		* 步进后更新输入框的展示值
+		* 步长为 1 时直接展示目标值, 不播放数字滚动动画
+		* @param rawFrom 步进前的原始值（存在倍数时为除以倍数后的值）
+		* @param rawTarget 步进后的原始值（存在倍数时为除以倍数后的值）
+		*/
+		function updateStepDisplay(rawFrom, rawTarget) {
+			tween.state.n = rawFrom;
+			if (stepVal.value === 1) {
+				tween.state.n = rawTarget;
+				const _rawInput = inputDom.value;
+				if (!_rawInput) return;
+				const { multiple } = props;
+				_rawInput.value = getDisplayed(multiple ? $n.mul(rawTarget, multiple) : rawTarget);
+				return;
+			}
+			tween.to({ n: rawTarget });
+		}
 		/** 增 */
 		function increase() {
 			if (disabled.value) return;
@@ -223,13 +241,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				const newRawVal = $n.plus(rawVal, stepVal.value);
 				const target = getValidValue($n.mul(newRawVal, multiple));
 				model.value = target;
-				tween.state.n = $n.div(target, multiple);
-				tween.to({ n: $n.div(target, multiple) });
+				updateStepDisplay($n.div(val, multiple), $n.div(target, multiple));
 			} else {
-				tween.state.n = val;
 				const target = getValidValue($n.plus(val, stepVal.value));
 				model.value = target;
-				tween.to({ n: target });
+				updateStepDisplay(val, target);
 			}
 		}
 		/** 减 */
@@ -242,13 +258,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				const newRawVal = $n.minus(rawVal, stepVal.value);
 				const target = getValidValue($n.mul(newRawVal, multiple));
 				model.value = target;
-				tween.state.n = $n.div(target, multiple);
-				tween.to({ n: $n.div(target, multiple) });
+				updateStepDisplay($n.div(val, multiple), $n.div(target, multiple));
 			} else {
-				tween.state.n = val;
 				const target = getValidValue($n.minus(val, stepVal.value));
 				model.value = target;
-				tween.to({ n: target });
+				updateStepDisplay(val, target);
 			}
 		}
 		function handleKeydown(e) {

package/dist/components/number-input/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n  <u-input\n    v-if=\"!readonly\"\n    ref=\"inputRef\"\n    :class=\"className\"\n    :model-value=\"displayed\"\n    v-bind=\"inputProps\"\n    @update:model-value=\"handleUpdateModelValue\"\n    @change=\"handleChange\"\n    @keydown.stop=\"handleKeydown\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    :size=\"size\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :clearable=\"false\"\n  >\n    <template #suffix v-if=\"hasSuffix\">\n      <span :class=\"cls.e('suffix')\">\n        <u-icon\n          v-if=\"props.clearable\"\n          :class=\"[cls.e('clear'), bem.is('hidden', !showClear)]\"\n          :title=\"showClear ? '清除' : undefined\"\n          @click.stop=\"handleClear\"\n        >\n          <Close />\n        </u-icon>\n        <span v-if=\"hasCustomSuffix\" :class=\"cls.e('suffix-content')\">\n          {{ suffix }}\n          <slot name=\"suffix\" />\n        </span>\n      </span>\n\n      <div v-if=\"showStep\" :class=\"cls.e('step')\">\n        <u-icon\n          @click=\"increase\"\n          v-ripple=\"!disabled && increasable\"\n          :class=\"bem.is('disabled', disabled || !increasable)\"\n        >\n          <ArrowUp />\n        </u-icon>\n        <u-icon\n          @click=\"decrease\"\n          v-ripple=\"!disabled && reducible\"\n          :class=\"bem.is('disabled', disabled || !reducible)\"\n        >\n          <ArrowDown />\n        </u-icon>\n      </div>\n    </template>\n\n    <template #prefix v-if=\"slots.prefix\">\n      <slot name=\"prefix\" />\n    </template>\n  </u-input>\n\n  <template v-else>\n    {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, shallowRef, useAttrs, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'UNumberInput', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n  placeholder: '请输入',\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{ prefix?: () => any; suffix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst attrs = useAttrs()\n\nconst inputProps = computed(() => ({\n  ...attrs,\n  ...o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])\n}))\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\nconst hovered = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n  if (!displayed.value) return ''\n\n  return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\nconst showStep = computed(() => props.step !== undefined && props.step !== false)\n\nconst hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)\n\nconst showClear = computed(() => {\n  return props.clearable && !disabled.value && displayed.value !== '' && hovered.value\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n  const { step } = props\n  if (step === undefined) return 1\n  return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n  const { max, multiple } = props\n  if (isUndef(max) || isUndef(model.value)) return true\n  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较\n  const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n  return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n  const { min, multiple } = props\n  if (isUndef(min) || isUndef(model.value)) return true\n  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较\n  const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n  return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n  const { multiple } = props\n  // 如果存在倍数，基于原始值计算精度\n  const rawValue =\n    multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n  return Math.max(\n    String(rawValue).split('.')[1]?.length ?? 0,\n    String(stepVal.value).split('.')[1]?.length ?? 0\n  )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n  if (!num && num !== 0) return ''\n\n  const {\n    currency,\n    precision,\n    minPrecision,\n    // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n    maxPrecision = defaultMaxPrecision.value,\n    multiple\n  } = props\n\n  // 如果存在倍数，先将实际值除以倍数得到原始值\n  const displayValue = multiple ? $n.div(num, multiple) : num\n\n  return currency\n    ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n    : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nwatch(\n  [model, focused, () => props.currency],\n  ([modelValue, inputFocused]) => {\n    if (inputFocused) return\n    displayed.value = getDisplayed(modelValue)\n  },\n  { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n  if (!str) return undefined\n\n  // 将货币格式去掉再转化为数字\n  const number = +str.replace(/,/g, '')\n  const { multiple } = props\n\n  // 如果解析失败，使用当前值作为回退\n  // 如果存在倍数，需要先将 model.value 除以倍数得到原始值\n  let result: number | undefined\n  if (isNaN(number)) {\n    if (model.value === undefined) return undefined\n    result = multiple ? $n.div(model.value, multiple) : model.value\n  } else {\n    result = number\n  }\n\n  if (result === undefined) return undefined\n\n  const { precision, maxPrecision, minPrecision } = props\n\n  const fixedResult = +n(result).fixed(precision ?? { minPrecision, maxPrecision })\n\n  // 如果存在倍数，将原始值乘以倍数返回实际值\n  return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n  if (val === undefined) return val\n  const { min, max, multiple } = props\n\n  // 如果存在倍数，先将值除以倍数得到原始值进行验证，验证后再乘以倍数\n  if (multiple) {\n    const rawVal = $n.div(val, multiple)\n    let validRawVal = rawVal\n    if (min !== undefined && rawVal < min) validRawVal = min\n    if (max !== undefined && rawVal > max) validRawVal = max\n    return $n.mul(validRawVal, multiple) as T\n  }\n\n  if (min !== undefined && val < min) return min as T\n  if (max !== undefined && val > max) return max as T\n  return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n  const newVal = parseDisplayed(input)\n  model.value = getValidValue(newVal)\n  displayed.value = input\n}\n\nfunction handleClear(): void {\n  if (!showClear.value) return\n  model.value = undefined\n  displayed.value = ''\n  emit('clear')\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n  emit('change', model.value)\n}\n\nconst tween = new Tween(\n  { n: model.value ?? 0 },\n  {\n    onUpdate(state) {\n      const _rawInput = inputDom.value\n      if (!_rawInput) return\n      const { multiple } = props\n      // 如果存在倍数，tween.state.n 存储的是原始值，需要乘以倍数后传给 getDisplayed\n      const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n      _rawInput.value = getDisplayed(actualValue)\n    },\n    // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n    onComplete() {\n      const _rawInput = inputDom.value\n      if (!_rawInput) return\n      _rawInput.value = getDisplayed(model.value)\n    }\n  }\n)\n\n/** 增 */\nfunction increase(): void {\n  if (disabled.value) return\n  const { multiple } = props\n  const val = model.value ?? 0\n\n  if (multiple) {\n    // 如果存在倍数，先将实际值除以倍数得到原始值\n    const rawVal = $n.div(val, multiple)\n    // 在原始值基础上加步长\n    const newRawVal = $n.plus(rawVal, stepVal.value)\n    // 乘以倍数得到新的实际值\n    const newVal = $n.mul(newRawVal, multiple)\n    const target = getValidValue(newVal)\n    model.value = target\n    // tween 动画在原始值上进行\n    tween.state.n = $n.div(target, multiple)\n    tween.to({ n: $n.div(target, multiple) })\n  } else {\n    tween.state.n = val\n    const target = getValidValue($n.plus(val, stepVal.value))\n    model.value = target\n    tween.to({ n: target })\n  }\n}\n\n/** 减 */\nfunction decrease(): void {\n  if (disabled.value) return\n  const { multiple } = props\n  const val = model.value ?? 0\n\n  if (multiple) {\n    // 如果存在倍数，先将实际值除以倍数得到原始值\n    const rawVal = $n.div(val, multiple)\n    // 在原始值基础上减步长\n    const newRawVal = $n.minus(rawVal, stepVal.value)\n    // 乘以倍数得到新的实际值\n    const newVal = $n.mul(newRawVal, multiple)\n    const target = getValidValue(newVal)\n    model.value = target\n    // tween 动画在原始值上进行\n    tween.state.n = $n.div(target, multiple)\n    tween.to({ n: $n.div(target, multiple) })\n  } else {\n    tween.state.n = val\n    const target = getValidValue($n.minus(val, stepVal.value))\n    model.value = target\n    tween.to({ n: target })\n  }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n  if (!props.step) return\n  if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    return increase()\n  }\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    return decrease()\n  }\n}\n\nfunction handleFocus(): void {\n  focused.value = true\n\n  // 如果初始值和当前设置的精度不匹配则进行精度修正\n  if (model.value === undefined) return\n  const { precision, maxPrecision, minPrecision, multiple } = props\n\n  if (multiple) {\n    // 如果存在倍数，先除以倍数得到原始值进行精度修正，再乘以倍数\n    const rawVal = $n.div(model.value, multiple)\n    const fixedRawVal = +n(rawVal).fixed(precision ?? { maxPrecision, minPrecision })\n    model.value = $n.mul(fixedRawVal, multiple)\n  } else {\n    model.value = +n(model.value).fixed(precision ?? { maxPrecision, minPrecision })\n  }\n}\n\nfunction handleBlur(): void {\n  focused.value = false\n  model.value = props.modelValue\n}\n\nfunction handleMouseEnter(): void {\n  hovered.value = true\n}\n\nfunction handleMouseLeave(): void {\n  hovered.value = false\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../src/components/number-input/number-input.vue"],"sourcesContent":["<template>\n  <u-input\n    v-if=\"!readonly\"\n    ref=\"inputRef\"\n    :class=\"className\"\n    :model-value=\"displayed\"\n    v-bind=\"inputProps\"\n    @update:model-value=\"handleUpdateModelValue\"\n    @change=\"handleChange\"\n    @keydown.stop=\"handleKeydown\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    :size=\"size\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :clearable=\"false\"\n  >\n    <template #suffix v-if=\"hasSuffix\">\n      <span :class=\"cls.e('suffix')\">\n        <u-icon\n          v-if=\"props.clearable\"\n          :class=\"[cls.e('clear'), bem.is('hidden', !showClear)]\"\n          :title=\"showClear ? '清除' : undefined\"\n          @click.stop=\"handleClear\"\n        >\n          <Close />\n        </u-icon>\n        <span v-if=\"hasCustomSuffix\" :class=\"cls.e('suffix-content')\">\n          {{ suffix }}\n          <slot name=\"suffix\" />\n        </span>\n      </span>\n\n      <div v-if=\"showStep\" :class=\"cls.e('step')\">\n        <u-icon\n          @click=\"increase\"\n          v-ripple=\"!disabled && increasable\"\n          :class=\"bem.is('disabled', disabled || !increasable)\"\n        >\n          <ArrowUp />\n        </u-icon>\n        <u-icon\n          @click=\"decrease\"\n          v-ripple=\"!disabled && reducible\"\n          :class=\"bem.is('disabled', disabled || !reducible)\"\n        >\n          <ArrowDown />\n        </u-icon>\n      </div>\n    </template>\n\n    <template #prefix v-if=\"slots.prefix\">\n      <slot name=\"prefix\" />\n    </template>\n  </u-input>\n\n  <template v-else>\n    {{ generateDisplayed || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $n, n, o, isUndef } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, shallowRef, useAttrs, watch } from 'vue'\n\nimport type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'UNumberInput', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n  placeholder: '请输入',\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\nconst emit = defineEmits<NumberInputEmits>()\n\nconst slots = defineSlots<{ prefix?: () => any; suffix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst attrs = useAttrs()\n\nconst inputProps = computed(() => ({\n  ...attrs,\n  ...o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])\n}))\n\nconst inputRef = shallowRef<InputExposed>()\n\nconst inputDom = computed(() => inputRef.value?.el)\n\nconst cls = bem('number-input')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value)]\n})\n\n/** 实际值 */\nconst model = defineModel<NumberInputProps['modelValue']>()\n\n// 展示值\nconst displayed = shallowRef('')\n\nconst focused = shallowRef(false)\nconst hovered = shallowRef(false)\n\nconst generateDisplayed = computed(() => {\n  if (!displayed.value) return ''\n\n  return `${props.prefix ?? ''}${displayed.value}${props.suffix ?? ''}`\n})\n\nconst showStep = computed(() => props.step !== undefined && props.step !== false)\n\nconst hasCustomSuffix = computed(() => !!props.suffix || !!slots.suffix)\n\nconst hasSuffix = computed(() => props.clearable || hasCustomSuffix.value || showStep.value)\n\nconst showClear = computed(() => {\n  return props.clearable && !disabled.value && displayed.value !== '' && hovered.value\n})\n\n/** 步长 */\nconst stepVal = computed<number>(() => {\n  const { step } = props\n  if (step === undefined) return 1\n  return typeof step === 'boolean' ? 1 : step\n})\n\n/** 是否可增 */\nconst increasable = computed(() => {\n  const { max, multiple } = props\n  if (isUndef(max) || isUndef(model.value)) return true\n  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较\n  const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n  return rawValue < max\n})\n\n/** 是否可减 */\nconst reducible = computed(() => {\n  const { min, multiple } = props\n  if (isUndef(min) || isUndef(model.value)) return true\n  // 如果存在倍数，先将 model.value 除以倍数得到原始值再比较\n  const rawValue = multiple ? $n.div(model.value, multiple) : model.value\n  return rawValue > min\n})\n\n// 通过值和步长值计算默认的最大精度\nconst defaultMaxPrecision = computed(() => {\n  const { multiple } = props\n  // 如果存在倍数，基于原始值计算精度\n  const rawValue =\n    multiple && model.value !== undefined ? $n.div(model.value, multiple) : model.value\n  return Math.max(\n    String(rawValue).split('.')[1]?.length ?? 0,\n    String(stepVal.value).split('.')[1]?.length ?? 0\n  )\n})\n\n/**\n * 获取展示值\n * @param num 实际值\n */\nfunction getDisplayed(num?: number): string {\n  if (!num && num !== 0) return ''\n\n  const {\n    currency,\n    precision,\n    minPrecision,\n    // 如果没有指定最大精度那么设置默认为值和步长值中的较大值\n    maxPrecision = defaultMaxPrecision.value,\n    multiple\n  } = props\n\n  // 如果存在倍数，先将实际值除以倍数得到原始值\n  const displayValue = multiple ? $n.div(num, multiple) : num\n\n  return currency\n    ? n(displayValue).currency('CNY', { precision, minPrecision, maxPrecision })\n    : n(displayValue).fixed(precision ?? { minPrecision, maxPrecision })\n}\n\nwatch(\n  [model, focused, () => props.currency],\n  ([modelValue, inputFocused]) => {\n    if (inputFocused) return\n    displayed.value = getDisplayed(modelValue)\n  },\n  { immediate: true }\n)\n\n/**\n * 解析展示值\n * @param str 展示值\n */\nfunction parseDisplayed(str: string): number | undefined {\n  if (!str) return undefined\n\n  // 将货币格式去掉再转化为数字\n  const number = +str.replace(/,/g, '')\n  const { multiple } = props\n\n  // 如果解析失败，使用当前值作为回退\n  // 如果存在倍数，需要先将 model.value 除以倍数得到原始值\n  let result: number | undefined\n  if (isNaN(number)) {\n    if (model.value === undefined) return undefined\n    result = multiple ? $n.div(model.value, multiple) : model.value\n  } else {\n    result = number\n  }\n\n  if (result === undefined) return undefined\n\n  const { precision, maxPrecision, minPrecision } = props\n\n  const fixedResult = +n(result).fixed(precision ?? { minPrecision, maxPrecision })\n\n  // 如果存在倍数，将原始值乘以倍数返回实际值\n  return multiple ? $n.mul(fixedResult, multiple) : fixedResult\n}\n\n/**\n * 获取有效值\n * @param val 值\n */\nfunction getValidValue<T extends undefined | number>(val: T): T {\n  if (val === undefined) return val\n  const { min, max, multiple } = props\n\n  // 如果存在倍数，先将值除以倍数得到原始值进行验证，验证后再乘以倍数\n  if (multiple) {\n    const rawVal = $n.div(val, multiple)\n    let validRawVal = rawVal\n    if (min !== undefined && rawVal < min) validRawVal = min\n    if (max !== undefined && rawVal > max) validRawVal = max\n    return $n.mul(validRawVal, multiple) as T\n  }\n\n  if (min !== undefined && val < min) return min as T\n  if (max !== undefined && val > max) return max as T\n  return val\n}\n\nfunction handleUpdateModelValue(input: string): void {\n  const newVal = parseDisplayed(input)\n  model.value = getValidValue(newVal)\n  displayed.value = input\n}\n\nfunction handleClear(): void {\n  if (!showClear.value) return\n  model.value = undefined\n  displayed.value = ''\n  emit('clear')\n}\n\n/**\n * 处理输入值变化的函数, 该函数仅在输入框失去焦点时触发,\n * 主要用于在输入非数字的情况下的修正处理\n * @param input 输入的值\n */\nfunction handleChange() {\n  emit('change', model.value)\n}\n\nconst tween = new Tween(\n  { n: model.value ?? 0 },\n  {\n    onUpdate(state) {\n      const _rawInput = inputDom.value\n      if (!_rawInput) return\n      const { multiple } = props\n      // 如果存在倍数，tween.state.n 存储的是原始值，需要乘以倍数后传给 getDisplayed\n      const actualValue = multiple ? $n.mul(state.n, multiple) : state.n\n      _rawInput.value = getDisplayed(actualValue)\n    },\n    // 动画进行的过程值有可能被改变, 因此在onComplete中确保还原的是原本的值\n    onComplete() {\n      const _rawInput = inputDom.value\n      if (!_rawInput) return\n      _rawInput.value = getDisplayed(model.value)\n    }\n  }\n)\n\n/**\n * 步进后更新输入框的展示值\n * 步长为 1 时直接展示目标值, 不播放数字滚动动画\n * @param rawFrom 步进前的原始值（存在倍数时为除以倍数后的值）\n * @param rawTarget 步进后的原始值（存在倍数时为除以倍数后的值）\n */\nfunction updateStepDisplay(rawFrom: number, rawTarget: number): void {\n  tween.state.n = rawFrom\n\n  if (stepVal.value === 1) {\n    tween.state.n = rawTarget\n    const _rawInput = inputDom.value\n    if (!_rawInput) return\n    const { multiple } = props\n    _rawInput.value = getDisplayed(multiple ? $n.mul(rawTarget, multiple) : rawTarget)\n    return\n  }\n\n  // tween 动画在原始值上进行\n  tween.to({ n: rawTarget })\n}\n\n/** 增 */\nfunction increase(): void {\n  if (disabled.value) return\n  const { multiple } = props\n  const val = model.value ?? 0\n\n  if (multiple) {\n    // 如果存在倍数，先将实际值除以倍数得到原始值\n    const rawVal = $n.div(val, multiple)\n    // 在原始值基础上加步长\n    const newRawVal = $n.plus(rawVal, stepVal.value)\n    // 乘以倍数得到新的实际值\n    const target = getValidValue($n.mul(newRawVal, multiple))\n    model.value = target\n    updateStepDisplay($n.div(val, multiple), $n.div(target, multiple))\n  } else {\n    const target = getValidValue($n.plus(val, stepVal.value))\n    model.value = target\n    updateStepDisplay(val, target)\n  }\n}\n\n/** 减 */\nfunction decrease(): void {\n  if (disabled.value) return\n  const { multiple } = props\n  const val = model.value ?? 0\n\n  if (multiple) {\n    // 如果存在倍数，先将实际值除以倍数得到原始值\n    const rawVal = $n.div(val, multiple)\n    // 在原始值基础上减步长\n    const newRawVal = $n.minus(rawVal, stepVal.value)\n    // 乘以倍数得到新的实际值\n    const target = getValidValue($n.mul(newRawVal, multiple))\n    model.value = target\n    updateStepDisplay($n.div(val, multiple), $n.div(target, multiple))\n  } else {\n    const target = getValidValue($n.minus(val, stepVal.value))\n    model.value = target\n    updateStepDisplay(val, target)\n  }\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n  if (!props.step) return\n  if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    return increase()\n  }\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    return decrease()\n  }\n}\n\nfunction handleFocus(): void {\n  focused.value = true\n\n  // 如果初始值和当前设置的精度不匹配则进行精度修正\n  if (model.value === undefined) return\n  const { precision, maxPrecision, minPrecision, multiple } = props\n\n  if (multiple) {\n    // 如果存在倍数，先除以倍数得到原始值进行精度修正，再乘以倍数\n    const rawVal = $n.div(model.value, multiple)\n    const fixedRawVal = +n(rawVal).fixed(precision ?? { maxPrecision, minPrecision })\n    model.value = $n.mul(fixedRawVal, multiple)\n  } else {\n    model.value = +n(model.value).fixed(precision ?? { maxPrecision, minPrecision })\n  }\n}\n\nfunction handleBlur(): void {\n  focused.value = false\n  model.value = props.modelValue\n}\n\nfunction handleMouseEnter(): void {\n  hovered.value = true\n}\n\nfunction handleMouseLeave(): void {\n  hovered.value = false\n}\n</script>\n"],"mappings":"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"}

package/dist/components/palette/color-transform.js

@@ -100,26 +100,47 @@ function RGB2HSV(RGB) {
 	};
 }
 /**
-* 将 HEX 颜色转换为 RGB 颜色
-* @param hex HEX 颜色
-* @returns RGB 颜色
+* 将颜色字符串转换为 RGBA 颜色
+* @description
+* 支持 `#rgb`、`#rgba`、`#rrggbb`、`#rrggbbaa`（`#` 可省略）以及 `rgb()` / `rgba()`
+* 函数表示；无法解析时返回 `null`，调用方应视为未绑定颜色而不是沿用错误的解析结果。
+* @param color 颜色字符串
+* @returns RGBA 颜色，解析失败返回 null
 */
-function HEX2RGBA(hex) {
-	const rgb = {
-		r: 0,
-		g: 0,
-		b: 0
-	};
-	let alpha = 1;
-	if (hex.startsWith("#")) hex = hex.slice(1);
+function HEX2RGBA(color) {
+	const input = color.trim();
+	const fnMatch = input.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d+(?:\.\d+)?%?)\s*)?\)$/i);
+	if (fnMatch) {
+		const [, r, g, b, a] = fnMatch;
+		const rgb = {
+			r: +r,
+			g: +g,
+			b: +b
+		};
+		if (rgb.r > 255 || rgb.g > 255 || rgb.b > 255) return null;
+		let alpha = 1;
+		if (a !== void 0) {
+			alpha = a.endsWith("%") ? parseFloat(a) / 100 : parseFloat(a);
+			if (!Number.isFinite(alpha) || alpha < 0 || alpha > 1) return null;
+		}
+		return {
+			RGB: rgb,
+			alpha
+		};
+	}
+	let hex = input.startsWith("#") ? input.slice(1) : input;
 	if (hex.length === 3 || hex.length === 4) hex = hex.split("").map((char) => char + char).join("");
+	if (hex.length !== 6 && hex.length !== 8) return null;
+	if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
+	let alpha = 1;
 	const alphaStr = hex.slice(6);
 	if (alphaStr) alpha = parseInt(alphaStr, 16) / 255;
-	rgb.r = parseInt(hex.slice(0, 2), 16);
-	rgb.g = parseInt(hex.slice(2, 4), 16);
-	rgb.b = parseInt(hex.slice(4, 6), 16);
 	return {
-		RGB: rgb,
+		RGB: {
+			r: parseInt(hex.slice(0, 2), 16),
+			g: parseInt(hex.slice(2, 4), 16),
+			b: parseInt(hex.slice(4, 6), 16)
+		},
 		alpha
 	};
 }

package/dist/components/palette/color-transform.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-transform.js","names":[],"sources":["../../../src/components/palette/color-transform.ts"],"sourcesContent":["import type { PaletteRGB, PaletteHSV } from '../../types'\n\n/**\n * 将色相值转换为 RGB 颜色\n * @param h 色相值\n * @returns RGB 颜色\n */\nexport function HUE2RGB(h: number): PaletteRGB {\n  // 将色相值映射到0-5的范围\n  const segment = h / 60\n  const x = 1 - Math.abs((segment % 2) - 1) // 计算中间值\n  let r = 0,\n    g = 0,\n    b = 0\n  // 根据色相所在的区间计算RGB值\n  if (segment >= 0 && segment < 1) {\n    ;[r, g, b] = [1, x, 0]\n  } else if (segment < 2) {\n    ;[r, g, b] = [x, 1, 0]\n  } else if (segment < 3) {\n    ;[r, g, b] = [0, 1, x]\n  } else if (segment < 4) {\n    ;[r, g, b] = [0, x, 1]\n  } else if (segment < 5) {\n    ;[r, g, b] = [x, 0, 1]\n  } else {\n    ;[r, g, b] = [1, 0, x]\n  }\n  // 将RGB值从0-1范围映射到0-255范围\n  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }\n}\n\n/**\n * 将色调、饱和度和亮度转换为 RGB 颜色\n * @param hsv 色调、饱和度和亮度\n */\nexport function HSV2RGB(hsv: PaletteHSV): PaletteRGB {\n  const { h, s, v } = hsv\n\n  // 使用色相区间映射获取基础RGB值\n  const { r, g, b } = HUE2RGB(h)\n\n  // 应用饱和度和亮度\n  const saturationFactor = 1 - s\n  const valueFactor = v\n\n  return {\n    r: Math.round((r + (255 - r) * saturationFactor) * valueFactor),\n    g: Math.round((g + (255 - g) * saturationFactor) * valueFactor),\n    b: Math.round((b + (255 - b) * saturationFactor) * valueFactor)\n  }\n}\n\n/**\n * 将 RGB 颜色转换为 HEX 颜色\n * @param RGB RGB 颜色\n * @param alpha 透明度\n * @returns HEX 颜色\n */\nexport function RGB2HEX(RGB: PaletteRGB, alpha = 1): string {\n  let hexStr = ['r', 'g', 'b']\n    .map((key) => RGB[key].toString(16).padStart(2, '0'))\n    .join('')\n    .toUpperCase()\n\n  if (alpha < 1) {\n    hexStr += Math.round(alpha * 255)\n      .toString(16)\n      .padStart(2, '0')\n      .toUpperCase()\n  }\n\n  return hexStr\n}\n\n/**\n * 将 RGB 颜色转换为 HSV 颜色\n * @param RGB RGB 颜色\n * @returns HSV 颜色\n */\nexport function RGB2HSV(RGB: PaletteRGB): PaletteHSV {\n  // 归一化到0-1范围\n  const red = RGB.r / 255\n  const green = RGB.g / 255\n  const blue = RGB.b / 255\n  const max = Math.max(red, green, blue)\n  const min = Math.min(red, green, blue)\n  const delta = max - min\n  let h = 0\n  if (delta !== 0) {\n    if (max === red) {\n      h = ((green - blue) / delta) % 6\n    } else if (max === green) {\n      h = (blue - red) / delta + 2\n    } else {\n      h = (red - green) / delta + 4\n    }\n    h = (h * 60 + 360) % 360 // 确保正值\n  }\n  const s = max === 0 ? 0 : delta / max\n  const v = max\n  return { h, s, v }\n}\n\n/**\n * 将 HEX 颜色转换为 RGB 颜色\n * @param hex HEX 颜色\n * @returns RGB 颜色\n */\nexport function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {\n  const rgb = { r: 0, g: 0, b: 0 }\n  let alpha = 1\n\n  if (hex.startsWith('#')) {\n    hex = hex.slice(1)\n  }\n\n  if (hex.length === 3 || hex.length === 4) {\n    hex = hex\n      .split('')\n      .map((char) => char + char)\n      .join('')\n  }\n\n  const alphaStr = hex.slice(6)\n  if (alphaStr) {\n    alpha = parseInt(alphaStr, 16) / 255\n  }\n  rgb.r = parseInt(hex.slice(0, 2), 16)\n  rgb.g = parseInt(hex.slice(2, 4), 16)\n  rgb.b = parseInt(hex.slice(4, 6), 16)\n\n  return { RGB: rgb, alpha }\n}\n"],"mappings":"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"}
+{"version":3,"file":"color-transform.js","names":[],"sources":["../../../src/components/palette/color-transform.ts"],"sourcesContent":["import type { PaletteRGB, PaletteHSV } from '../../types'\n\n/**\n * 将色相值转换为 RGB 颜色\n * @param h 色相值\n * @returns RGB 颜色\n */\nexport function HUE2RGB(h: number): PaletteRGB {\n  // 将色相值映射到0-5的范围\n  const segment = h / 60\n  const x = 1 - Math.abs((segment % 2) - 1) // 计算中间值\n  let r = 0,\n    g = 0,\n    b = 0\n  // 根据色相所在的区间计算RGB值\n  if (segment >= 0 && segment < 1) {\n    ;[r, g, b] = [1, x, 0]\n  } else if (segment < 2) {\n    ;[r, g, b] = [x, 1, 0]\n  } else if (segment < 3) {\n    ;[r, g, b] = [0, 1, x]\n  } else if (segment < 4) {\n    ;[r, g, b] = [0, x, 1]\n  } else if (segment < 5) {\n    ;[r, g, b] = [x, 0, 1]\n  } else {\n    ;[r, g, b] = [1, 0, x]\n  }\n  // 将RGB值从0-1范围映射到0-255范围\n  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }\n}\n\n/**\n * 将色调、饱和度和亮度转换为 RGB 颜色\n * @param hsv 色调、饱和度和亮度\n */\nexport function HSV2RGB(hsv: PaletteHSV): PaletteRGB {\n  const { h, s, v } = hsv\n\n  // 使用色相区间映射获取基础RGB值\n  const { r, g, b } = HUE2RGB(h)\n\n  // 应用饱和度和亮度\n  const saturationFactor = 1 - s\n  const valueFactor = v\n\n  return {\n    r: Math.round((r + (255 - r) * saturationFactor) * valueFactor),\n    g: Math.round((g + (255 - g) * saturationFactor) * valueFactor),\n    b: Math.round((b + (255 - b) * saturationFactor) * valueFactor)\n  }\n}\n\n/**\n * 将 RGB 颜色转换为 HEX 颜色\n * @param RGB RGB 颜色\n * @param alpha 透明度\n * @returns HEX 颜色\n */\nexport function RGB2HEX(RGB: PaletteRGB, alpha = 1): string {\n  let hexStr = ['r', 'g', 'b']\n    .map((key) => RGB[key].toString(16).padStart(2, '0'))\n    .join('')\n    .toUpperCase()\n\n  if (alpha < 1) {\n    hexStr += Math.round(alpha * 255)\n      .toString(16)\n      .padStart(2, '0')\n      .toUpperCase()\n  }\n\n  return hexStr\n}\n\n/**\n * 将 RGB 颜色转换为 HSV 颜色\n * @param RGB RGB 颜色\n * @returns HSV 颜色\n */\nexport function RGB2HSV(RGB: PaletteRGB): PaletteHSV {\n  // 归一化到0-1范围\n  const red = RGB.r / 255\n  const green = RGB.g / 255\n  const blue = RGB.b / 255\n  const max = Math.max(red, green, blue)\n  const min = Math.min(red, green, blue)\n  const delta = max - min\n  let h = 0\n  if (delta !== 0) {\n    if (max === red) {\n      h = ((green - blue) / delta) % 6\n    } else if (max === green) {\n      h = (blue - red) / delta + 2\n    } else {\n      h = (red - green) / delta + 4\n    }\n    h = (h * 60 + 360) % 360 // 确保正值\n  }\n  const s = max === 0 ? 0 : delta / max\n  const v = max\n  return { h, s, v }\n}\n\n/**\n * 将颜色字符串转换为 RGBA 颜色\n * @description\n * 支持 `#rgb`、`#rgba`、`#rrggbb`、`#rrggbbaa`（`#` 可省略）以及 `rgb()` / `rgba()`\n * 函数表示；无法解析时返回 `null`，调用方应视为未绑定颜色而不是沿用错误的解析结果。\n * @param color 颜色字符串\n * @returns RGBA 颜色，解析失败返回 null\n */\nexport function HEX2RGBA(color: string): { RGB: PaletteRGB; alpha: number } | null {\n  const input = color.trim()\n\n  // rgb() / rgba() 函数表示\n  const fnMatch = input.match(\n    /^rgba?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})(?:\\s*,\\s*(\\d+(?:\\.\\d+)?%?)\\s*)?\\)$/i\n  )\n  if (fnMatch) {\n    const [, r, g, b, a] = fnMatch\n    const rgb = { r: +r!, g: +g!, b: +b! }\n    if (rgb.r > 255 || rgb.g > 255 || rgb.b > 255) return null\n\n    let alpha = 1\n    if (a !== undefined) {\n      alpha = a.endsWith('%') ? parseFloat(a) / 100 : parseFloat(a)\n      if (!Number.isFinite(alpha) || alpha < 0 || alpha > 1) return null\n    }\n    return { RGB: rgb, alpha }\n  }\n\n  let hex = input.startsWith('#') ? input.slice(1) : input\n\n  if (hex.length === 3 || hex.length === 4) {\n    hex = hex\n      .split('')\n      .map((char) => char + char)\n      .join('')\n  }\n\n  if (hex.length !== 6 && hex.length !== 8) return null\n  if (!/^[0-9a-fA-F]+$/.test(hex)) return null\n\n  let alpha = 1\n  const alphaStr = hex.slice(6)\n  if (alphaStr) {\n    alpha = parseInt(alphaStr, 16) / 255\n  }\n\n  const rgb = {\n    r: parseInt(hex.slice(0, 2), 16),\n    g: parseInt(hex.slice(2, 4), 16),\n    b: parseInt(hex.slice(4, 6), 16)\n  }\n\n  return { RGB: rgb, alpha }\n}\n"],"mappings":"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"}

package/dist/components/palette/palette.js

@@ -72,7 +72,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		watch(color, (color) => {
 			if (!color) return;
 			if (isUserActive()) return;
-			const { RGB, alpha } = HEX2RGBA(color);
+			const parsed = HEX2RGBA(color);
+			if (!parsed) return;
+			const { RGB, alpha } = parsed;
 			const hsv = RGB2HSV(RGB);
 			rest.updateHue(hsv.h);
 			rest.updateSV({

package/dist/components/palette/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n  <u-tip\n    trigger=\"click\"\n    :class=\"cls.e('panel')\"\n    v-model:visible=\"visible\"\n    :disabled=\"disabled || readonly\"\n  >\n    <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n    <template #content>\n      <!-- 饱和度和亮度 -->\n      <PaletteSV ref=\"palette-sv\" />\n\n      <!-- 色相 -->\n      <PaletteHue ref=\"palette-hue\" />\n\n      <!-- 透明度 -->\n      <PaletteAlpha ref=\"palette-alpha\" />\n\n      <!-- 颜色切换 -->\n      <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'UPalette' })\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nconst visible = shallowRef(false)\n\n/** 清除时跳过一次内部状态到 color 的同步，防止 updateAlpha 把已清空的 color 覆盖回来 */\nlet skipColorUpdate = false\n\nconst handleClear = userAction(() => {\n  if (alpha.value !== 1) {\n    skipColorUpdate = true\n  }\n  color.value = ''\n  rest.updateAlpha(1)\n  visible.value = false\n})\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n  if (skipColorUpdate) {\n    skipColorUpdate = false\n    return\n  }\n  color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n  color,\n  (color) => {\n    if (!color) return\n    if (isUserActive()) return\n\n    const { RGB, alpha } = HEX2RGBA(color)\n    const hsv = RGB2HSV(RGB)\n    rest.updateHue(hsv.h)\n    rest.updateSV({ s: hsv.s, v: hsv.v })\n    rest.updateAlpha(alpha)\n\n    paletteSVRef.value?.init()\n    paletteHueRef.value?.init()\n    paletteAlphaRef.value?.init()\n  },\n  { immediate: true }\n)\n\nprovide(PaletteDIKey, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,GAAG,YAAY,CAAC,MAAM,KAAK;GAAC;EACpE,CAAC;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,OAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,GAAG,CAAC;EACvC,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,MAAM,UAAU,WAAW,KAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;GACnC,IAAI,MAAM,UAAU,GAClB,kBAAkB;GAEpB,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;GAClB,QAAQ,QAAQ;EAClB,CAAC;EAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS;GACpC,IAAI,iBAAiB;IACnB,kBAAkB;IAClB;GACF;GACA,MAAM,QAAQ,IAAI,QAAQ,KAAK,KAAK;EACtC,CAAC;EAED,MAAM,eAAe,eAAe,YAAY;EAChD,MAAM,gBAAgB,eAAe,aAAa;EAClD,MAAM,kBAAkB,eAAe,eAAe;EAEtD,MACE,QACC,UAAU;GACT,IAAI,CAAC,OAAO;GACZ,IAAI,aAAa,GAAG;GAEpB,MAAM,EAAE,KAAK,UAAU,SAAS,KAAK;GACrC,MAAM,MAAM,QAAQ,GAAG;GACvB,KAAK,UAAU,IAAI,CAAC;GACpB,KAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;GAAE,CAAC;GACpC,KAAK,YAAY,KAAK;GAEtB,aAAa,OAAO,KAAK;GACzB,cAAc,OAAO,KAAK;GAC1B,gBAAgB,OAAO,KAAK;EAC9B,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,QAAQ,cAAc;GAAE;GAAK;GAAK;GAAK;GAAO;GAAY;GAAc,GAAG;EAAK,CAAC;;GA5G/E,OAAA,UAAA,GAAA,YAqBQ,MAAA,WAAA,GAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;IACL,SAAS,QAAA;IAAA,oBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,QAAO,QAAA;IACvB,UAAU,MAAA,QAAA,KAAY,MAAA,QAAA;;IAIZ,SAAO,cACD;KAAf,mBAAA,UAAA;KACA,YAA8B,aAAA,EAAnB,KAAI,aAAY,GAAA,MAAA,GAAA;KAE3B,mBAAA,MAAA;KACA,YAAgC,aAAA,EAApB,KAAI,cAAa,GAAA,MAAA,GAAA;KAE7B,mBAAA,OAAA;KACA,YAAoC,aAAA,EAAtB,KAAI,gBAAe,GAAA,MAAA,GAAA;KAEjC,mBAAA,QAAA;KACA,YAAiE,aAAA;MAArC,OAAO,MAAA;MAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;MAAG,SAAO,MAAA,WAAA;;;IAbiB,SAAA,cAAA,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,KAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,MAAK,CAAA"}
+{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n  <u-tip\n    trigger=\"click\"\n    :class=\"cls.e('panel')\"\n    v-model:visible=\"visible\"\n    :disabled=\"disabled || readonly\"\n  >\n    <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n    <template #content>\n      <!-- 饱和度和亮度 -->\n      <PaletteSV ref=\"palette-sv\" />\n\n      <!-- 色相 -->\n      <PaletteHue ref=\"palette-hue\" />\n\n      <!-- 透明度 -->\n      <PaletteAlpha ref=\"palette-alpha\" />\n\n      <!-- 颜色切换 -->\n      <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({ name: 'UPalette' })\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nconst visible = shallowRef(false)\n\n/** 清除时跳过一次内部状态到 color 的同步，防止 updateAlpha 把已清空的 color 覆盖回来 */\nlet skipColorUpdate = false\n\nconst handleClear = userAction(() => {\n  if (alpha.value !== 1) {\n    skipColorUpdate = true\n  }\n  color.value = ''\n  rest.updateAlpha(1)\n  visible.value = false\n})\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n  if (skipColorUpdate) {\n    skipColorUpdate = false\n    return\n  }\n  color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n  color,\n  (color) => {\n    if (!color) return\n    if (isUserActive()) return\n\n    const parsed = HEX2RGBA(color)\n    // 无法解析的颜色（如非法字符）视为未绑定，跳过同步，避免把 NaN 写回 modelValue\n    if (!parsed) return\n\n    const { RGB, alpha } = parsed\n    const hsv = RGB2HSV(RGB)\n    rest.updateHue(hsv.h)\n    rest.updateSV({ s: hsv.s, v: hsv.v })\n    rest.updateAlpha(alpha)\n\n    paletteSVRef.value?.init()\n    paletteHueRef.value?.init()\n    paletteAlphaRef.value?.init()\n  },\n  { immediate: true }\n)\n\nprovide(PaletteDIKey, { cls, HSV, RGB, alpha, userAction, isUserActive, ...rest })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,MAAM,IAAI,SAAS;EAEzB,MAAM,YAAY,eAAe;GAC/B,OAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,KAAK;IAAG,IAAI,GAAG,YAAY,CAAC,MAAM,KAAK;GAAC;EACpE,CAAC;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,OAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,GAAG,CAAC;EACvC,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,MAAM,UAAU,WAAW,KAAK;;EAGhC,IAAI,kBAAkB;EAEtB,MAAM,cAAc,iBAAiB;GACnC,IAAI,MAAM,UAAU,GAClB,kBAAkB;GAEpB,MAAM,QAAQ;GACd,KAAK,YAAY,CAAC;GAClB,QAAQ,QAAQ;EAClB,CAAC;EAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,SAAS;GACpC,IAAI,iBAAiB;IACnB,kBAAkB;IAClB;GACF;GACA,MAAM,QAAQ,IAAI,QAAQ,KAAK,KAAK;EACtC,CAAC;EAED,MAAM,eAAe,eAAe,YAAY;EAChD,MAAM,gBAAgB,eAAe,aAAa;EAClD,MAAM,kBAAkB,eAAe,eAAe;EAEtD,MACE,QACC,UAAU;GACT,IAAI,CAAC,OAAO;GACZ,IAAI,aAAa,GAAG;GAEpB,MAAM,SAAS,SAAS,KAAK;GAE7B,IAAI,CAAC,QAAQ;GAEb,MAAM,EAAE,KAAK,UAAU;GACvB,MAAM,MAAM,QAAQ,GAAG;GACvB,KAAK,UAAU,IAAI,CAAC;GACpB,KAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;GAAE,CAAC;GACpC,KAAK,YAAY,KAAK;GAEtB,aAAa,OAAO,KAAK;GACzB,cAAc,OAAO,KAAK;GAC1B,gBAAgB,OAAO,KAAK;EAC9B,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,QAAQ,cAAc;GAAE;GAAK;GAAK;GAAK;GAAO;GAAY;GAAc,GAAG;EAAK,CAAC;;GAhH/E,OAAA,UAAA,GAAA,YAqBQ,MAAA,WAAA,GAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;IACL,SAAS,QAAA;IAAA,oBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,QAAO,QAAA;IACvB,UAAU,MAAA,QAAA,KAAY,MAAA,QAAA;;IAIZ,SAAO,cACD;KAAf,mBAAA,UAAA;KACA,YAA8B,aAAA,EAAnB,KAAI,aAAY,GAAA,MAAA,GAAA;KAE3B,mBAAA,MAAA;KACA,YAAgC,aAAA,EAApB,KAAI,cAAa,GAAA,MAAA,GAAA;KAE7B,mBAAA,OAAA;KACA,YAAoC,aAAA,EAAtB,KAAI,gBAAe,GAAA,MAAA,GAAA;KAEjC,mBAAA,QAAA;KACA,YAAiE,aAAA;MAArC,OAAO,MAAA;MAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;MAAG,SAAO,MAAA,WAAA;;;IAbiB,SAAA,cAAA,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,KAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,MAAK,CAAA"}

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.6.1",
+  "version": "1.6.2",
+  "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
+  "bugs": {
+    "url": "https://github.com/cabinet-fe/ultra-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cabinet-fe/ultra-ui",
+    "directory": "packages/desktop"
+  },
   "files": [
     "dist",
     "src"
@@ -71,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/fe": ">=1.1.8",
-    "@veltra/compositions": "^1.6.1",
-    "@veltra/directives": "^1.6.1",
+    "@veltra/compositions": "^1.6.2",
+    "@veltra/directives": "^1.6.2",
     "@veltra/icons": "^1.5.0",
-    "@veltra/sheet-core": "^2.3.0",
-    "@veltra/styles": "^1.6.1",
-    "@veltra/utils": "^1.6.1",
+    "@veltra/sheet-core": "^2.3.1",
+    "@veltra/styles": "^1.6.2",
+    "@veltra/utils": "^1.6.2",
     "vue": ">=3.5.41"
   },
   "peerDependenciesMeta": {

package/src/components/number-input/__test__/number-input.test.ts

@@ -57,4 +57,42 @@ describe('NumberInput', () => {
       unmount()
     }
   })
+
+  it('updates the input value immediately without animation when step is 1', async () => {
+    const { host, unmount } = mountNumberInput({ modelValue: 1, step: 1 })
+
+    try {
+      const input = host.querySelector('input')!
+      const [upIcon, downIcon] = Array.from(
+        host.querySelectorAll('.u-number-input__step .u-icon')
+      ) as HTMLElement[]
+
+      upIcon!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await nextTick()
+      expect(input.value).toBe('2')
+
+      downIcon!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await nextTick()
+      expect(input.value).toBe('1')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('keeps the rolling animation when step is greater than 1', () => {
+    const { host, unmount } = mountNumberInput({ modelValue: 0, step: 5 })
+
+    try {
+      const input = host.querySelector('input')!
+      const [upIcon] = Array.from(
+        host.querySelectorAll('.u-number-input__step .u-icon')
+      ) as HTMLElement[]
+
+      upIcon!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      // 动画通过 requestAnimationFrame 逐帧更新, 同步阶段不应直接跳到目标值
+      expect(input.value).toBe('0')
+    } finally {
+      unmount()
+    }
+  })
 })

package/src/components/number-input/number-input.vue

@@ -301,6 +301,28 @@ const tween = new Tween(
   }
 )
 
+/**
+ * 步进后更新输入框的展示值
+ * 步长为 1 时直接展示目标值, 不播放数字滚动动画
+ * @param rawFrom 步进前的原始值（存在倍数时为除以倍数后的值）
+ * @param rawTarget 步进后的原始值（存在倍数时为除以倍数后的值）
+ */
+function updateStepDisplay(rawFrom: number, rawTarget: number): void {
+  tween.state.n = rawFrom
+
+  if (stepVal.value === 1) {
+    tween.state.n = rawTarget
+    const _rawInput = inputDom.value
+    if (!_rawInput) return
+    const { multiple } = props
+    _rawInput.value = getDisplayed(multiple ? $n.mul(rawTarget, multiple) : rawTarget)
+    return
+  }
+
+  // tween 动画在原始值上进行
+  tween.to({ n: rawTarget })
+}
+
 /** 增 */
 function increase(): void {
   if (disabled.value) return
@@ -313,17 +335,13 @@ function increase(): void {
     // 在原始值基础上加步长
     const newRawVal = $n.plus(rawVal, stepVal.value)
     // 乘以倍数得到新的实际值
-    const newVal = $n.mul(newRawVal, multiple)
-    const target = getValidValue(newVal)
+    const target = getValidValue($n.mul(newRawVal, multiple))
     model.value = target
-    // tween 动画在原始值上进行
-    tween.state.n = $n.div(target, multiple)
-    tween.to({ n: $n.div(target, multiple) })
+    updateStepDisplay($n.div(val, multiple), $n.div(target, multiple))
   } else {
-    tween.state.n = val
     const target = getValidValue($n.plus(val, stepVal.value))
     model.value = target
-    tween.to({ n: target })
+    updateStepDisplay(val, target)
   }
 }
 
@@ -339,17 +357,13 @@ function decrease(): void {
     // 在原始值基础上减步长
     const newRawVal = $n.minus(rawVal, stepVal.value)
     // 乘以倍数得到新的实际值
-    const newVal = $n.mul(newRawVal, multiple)
-    const target = getValidValue(newVal)
+    const target = getValidValue($n.mul(newRawVal, multiple))
     model.value = target
-    // tween 动画在原始值上进行
-    tween.state.n = $n.div(target, multiple)
-    tween.to({ n: $n.div(target, multiple) })
+    updateStepDisplay($n.div(val, multiple), $n.div(target, multiple))
   } else {
-    tween.state.n = val
     const target = getValidValue($n.minus(val, stepVal.value))
     model.value = target
-    tween.to({ n: target })
+    updateStepDisplay(val, target)
   }
 }
 

package/src/components/palette/__test__/color-transform.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+
+import { HEX2RGBA } from '../color-transform'
+
+describe('HEX2RGBA', () => {
+  it('解析 6 位 HEX（# 可省略、大小写不敏感）', () => {
+    expect(HEX2RGBA('#FF0000')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 1 })
+    expect(HEX2RGBA('ff0000')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 1 })
+    expect(HEX2RGBA('  #00ff00  ')).toEqual({ RGB: { r: 0, g: 255, b: 0 }, alpha: 1 })
+  })
+
+  it('解析 3/4 位缩写 HEX', () => {
+    expect(HEX2RGBA('#f00')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 1 })
+    expect(HEX2RGBA('#f008')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 0x88 / 255 })
+  })
+
+  it('解析 8 位 HEX（RRGGBBAA）', () => {
+    expect(HEX2RGBA('#FF000080')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 0x80 / 255 })
+  })
+
+  it('解析 rgb() / rgba() 函数表示', () => {
+    expect(HEX2RGBA('rgb(255, 0, 0)')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 1 })
+    expect(HEX2RGBA('rgba(255,0,0,0.5)')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 0.5 })
+    expect(HEX2RGBA('rgba(255, 0, 0, 50%)')).toEqual({ RGB: { r: 255, g: 0, b: 0 }, alpha: 0.5 })
+  })
+
+  it('非法输入返回 null', () => {
+    expect(HEX2RGBA('')).toBeNull()
+    expect(HEX2RGBA('#FF')).toBeNull()
+    expect(HEX2RGBA('#GGGGGG')).toBeNull()
+    expect(HEX2RGBA('red')).toBeNull()
+    expect(HEX2RGBA('rgb(256, 0, 0)')).toBeNull()
+    expect(HEX2RGBA('rgba(0, 0, 0, 2)')).toBeNull()
+  })
+})

package/src/components/palette/__test__/palette.test.ts

@@ -0,0 +1,102 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UPalette from '../palette.vue'
+
+function mountPalette(initialColor?: string) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(initialColor)
+  const app = createApp({
+    render() {
+      return h(UPalette, {
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: string | undefined) => {
+          model.value = value
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    setModel(value: string) {
+      model.value = value
+    },
+    async unmount() {
+      // 等待 usePop 打开面板时的异步定位完成，避免卸载后回调访问已销毁元素
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      app.unmount()
+      await nextTick()
+      host.remove()
+    }
+  }
+}
+
+async function openPanel(host: HTMLElement) {
+  host.querySelector('.u-palette')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  await nextTick()
+  await nextTick()
+}
+
+describe('UPalette', () => {
+  beforeEach(() => {
+    // happy-dom 中 offsetWidth/offsetHeight 恒为 0，这里模拟 200x200 的画布
+    vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(200)
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(200)
+
+    // usePop 的浮层容器是模块级单例，上一个用例清空 body 后需补回 teleport 目标
+    if (!document.getElementById('pop-container')) {
+      const popContainer = document.createElement('div')
+      popContainer.id = 'pop-container'
+      document.body.appendChild(popContainer)
+    }
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    document.body.innerHTML = ''
+  })
+
+  it('SV 面板 thumb 跟随初始绑定的颜色', async () => {
+    const { host, unmount } = mountPalette('#FF0000')
+
+    try {
+      await openPanel(host)
+
+      const thumb = document.body.querySelector<HTMLElement>('.u-palette__sv-thumb')
+      expect(thumb).not.toBeNull()
+      // #FF0000 → hsv(0, 1, 1)，thumb 应在右上角: translate(200px, 0px)
+      expect(thumb!.style.transform).toBe('translate(200px, 0px)')
+
+      const hueThumb = document.body.querySelector<HTMLElement>('.u-palette__hue-thumb')
+      expect(hueThumb!.style.transform).toBe('translateX(0px)')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('面板关闭时外部 modelValue 变化，打开后 thumb 跟随', async () => {
+    const { host, setModel, unmount } = mountPalette('')
+
+    try {
+      setModel('#0000FF')
+      await nextTick()
+
+      await openPanel(host)
+
+      const thumb = document.body.querySelector<HTMLElement>('.u-palette__sv-thumb')
+      // #0000FF → hsv(240, 1, 1)，thumb 应在右上角: translate(200px, 0px)
+      expect(thumb!.style.transform).toBe('translate(200px, 0px)')
+
+      const hueThumb = document.body.querySelector<HTMLElement>('.u-palette__hue-thumb')
+      expect(hueThumb!.style.transform).toBe(`translateX(${(200 * 240) / 360}px)`)
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/palette/color-transform.ts

@@ -103,18 +103,35 @@ export function RGB2HSV(RGB: PaletteRGB): PaletteHSV {
 }
 
 /**
- * 将 HEX 颜色转换为 RGB 颜色
- * @param hex HEX 颜色
- * @returns RGB 颜色
+ * 将颜色字符串转换为 RGBA 颜色
+ * @description
+ * 支持 `#rgb`、`#rgba`、`#rrggbb`、`#rrggbbaa`（`#` 可省略）以及 `rgb()` / `rgba()`
+ * 函数表示；无法解析时返回 `null`，调用方应视为未绑定颜色而不是沿用错误的解析结果。
+ * @param color 颜色字符串
+ * @returns RGBA 颜色，解析失败返回 null
  */
-export function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {
-  const rgb = { r: 0, g: 0, b: 0 }
-  let alpha = 1
+export function HEX2RGBA(color: string): { RGB: PaletteRGB; alpha: number } | null {
+  const input = color.trim()
+
+  // rgb() / rgba() 函数表示
+  const fnMatch = input.match(
+    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d+(?:\.\d+)?%?)\s*)?\)$/i
+  )
+  if (fnMatch) {
+    const [, r, g, b, a] = fnMatch
+    const rgb = { r: +r!, g: +g!, b: +b! }
+    if (rgb.r > 255 || rgb.g > 255 || rgb.b > 255) return null
 
-  if (hex.startsWith('#')) {
-    hex = hex.slice(1)
+    let alpha = 1
+    if (a !== undefined) {
+      alpha = a.endsWith('%') ? parseFloat(a) / 100 : parseFloat(a)
+      if (!Number.isFinite(alpha) || alpha < 0 || alpha > 1) return null
+    }
+    return { RGB: rgb, alpha }
   }
 
+  let hex = input.startsWith('#') ? input.slice(1) : input
+
   if (hex.length === 3 || hex.length === 4) {
     hex = hex
       .split('')
@@ -122,13 +139,20 @@ export function HEX2RGBA(hex: string): { RGB: PaletteRGB; alpha: number } {
       .join('')
   }
 
+  if (hex.length !== 6 && hex.length !== 8) return null
+  if (!/^[0-9a-fA-F]+$/.test(hex)) return null
+
+  let alpha = 1
   const alphaStr = hex.slice(6)
   if (alphaStr) {
     alpha = parseInt(alphaStr, 16) / 255
   }
-  rgb.r = parseInt(hex.slice(0, 2), 16)
-  rgb.g = parseInt(hex.slice(2, 4), 16)
-  rgb.b = parseInt(hex.slice(4, 6), 16)
+
+  const rgb = {
+    r: parseInt(hex.slice(0, 2), 16),
+    g: parseInt(hex.slice(2, 4), 16),
+    b: parseInt(hex.slice(4, 6), 16)
+  }
 
   return { RGB: rgb, alpha }
 }

package/src/components/palette/palette.vue

@@ -94,7 +94,11 @@ watch(
     if (!color) return
     if (isUserActive()) return
 
-    const { RGB, alpha } = HEX2RGBA(color)
+    const parsed = HEX2RGBA(color)
+    // 无法解析的颜色（如非法字符）视为未绑定，跳过同步，避免把 NaN 写回 modelValue
+    if (!parsed) return
+
+    const { RGB, alpha } = parsed
     const hsv = RGB2HSV(RGB)
     rest.updateHue(hsv.h)
     rest.updateSV({ s: hsv.s, v: hsv.v })