@veltra/desktop 1.6.1 → 1.6.3

package/dist/types/collapse.d.ts

@@ -43,7 +43,7 @@ interface CollapseItemProps {
    * @default false
    */
   modelValue?: boolean;
-  /** 标题文本（也可通过 #header 插槽自定义整个头部） */
+  /** 标题文本（也可通过 #header 插槽自定义标题区；展开图标始终保留，可用 expandIcon 替换） */
   title?: string;
   /** 是否禁用 */
   disabled?: boolean;

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.6.1",
+  "version": "1.6.3",
+  "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.3",
+    "@veltra/directives": "^1.6.3",
     "@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.3",
+    "@veltra/utils": "^1.6.3",
     "vue": ">=3.5.41"
   },
   "peerDependenciesMeta": {

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

@@ -223,11 +223,41 @@ describe('CollapseItem standalone', () => {
       expect(host.querySelector('.u-collapse__item')).toBeTruthy()
       expect(host.querySelector('.u-collapse__header')).toBeTruthy()
       expect(host.querySelector('.u-collapse__title')?.textContent).toBe('Standalone')
+      expect(host.querySelector('.u-collapse__icon')).toBeTruthy()
     } finally {
       unmount()
     }
   })
 
+  it('keeps the expand icon when #header slot is provided', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({
+      render() {
+        return h(
+          UCollapseItem,
+          { title: 'Fallback' },
+          { header: () => 'Custom header', default: () => 'Body' }
+        )
+      }
+    })
+    app.mount(host)
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__title')?.textContent).toBe('Custom header')
+      expect(host.querySelector('.u-collapse__icon')).toBeTruthy()
+
+      ;(host.querySelector('.u-collapse__header') as HTMLElement).click()
+      await nextTick()
+      expect(host.querySelector('.u-collapse__header.is-active')).toBeTruthy()
+    } finally {
+      app.unmount()
+      host.remove()
+    }
+  })
+
   it('defaults to collapsed when no v-model is provided', async () => {
     const { host, model, unmount } = mountStandaloneItem({ title: 'Standalone' })
 

package/src/components/collapse/collapse-item.vue

@@ -10,13 +10,13 @@
       @keydown.enter.prevent="handleClick"
       @keydown.space.prevent="handleClick"
     >
-      <slot name="header" :is-active="isActive">
-        <span :class="cls.e('title')">{{ title }}</span>
+      <span :class="cls.e('title')">
+        <slot name="header" :is-active="isActive">{{ title }}</slot>
+      </span>
 
-        <span :class="cls.e('icon')">
-          <UIcon><component :is="iconComponent" /></UIcon>
-        </span>
-      </slot>
+      <span :class="cls.e('icon')">
+        <UIcon><component :is="iconComponent" /></UIcon>
+      </span>
     </div>
     <div ref="wrapperEl" :class="cls.e('content-wrapper')" :aria-hidden="!isActive">
       <div v-if="contentMounted" :class="cls.e('content')">
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<CollapseItemProps>(), { modelValue: false
 const emit = defineEmits<CollapseItemEmits>()
 
 defineSlots<{
-  /** 自定义整个头部，作用域参数 `isActive` 指示展开状态；缺省渲染 title + 展开图标 */
+  /** 自定义标题区，作用域参数 `isActive` 指示展开状态；缺省渲染 title。展开图标始终由组件渲染，活动态旋转 180° */
   header?: (scope: { isActive: boolean }) => any
   /** 折叠面板内容 */
   default?: () => any

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 })

package/src/types/collapse.ts

@@ -52,7 +52,7 @@ export interface CollapseItemProps {
    */
   modelValue?: boolean
 
-  /** 标题文本（也可通过 #header 插槽自定义整个头部） */
+  /** 标题文本（也可通过 #header 插槽自定义标题区；展开图标始终保留，可用 expandIcon 替换） */
   title?: string
 
   /** 是否禁用 */