fix: 🐛 修复 signature 组件设置background-color为透明色导致撤销无效 (#1224)

✅ Closes: #1223

Author: yauyy

src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue

@@ -91,6 +91,45 @@ const canvasState = reactive({
   ctx: null as UniApp.CanvasContext | null // canvas上下文
 })
 
+/**
+ * 判断颜色是否为透明色
+ * @param color 颜色值（支持 rgba/hsla/hex/transparent）
+ */
+function isTransparentColor(color: string | undefined): boolean {
+  if (!color) return true
+  const transparentKeywords = ['transparent', '#0000', '#00000000']
+
+  // 标准透明关键字
+  if (transparentKeywords.includes(color.toLowerCase())) {
+    return true
+  }
+
+  // 匹配 rgba(r, g, b, a)
+  const rgbaMatch = color.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(\d*\.?\d+))?\)$/i)
+  if (rgbaMatch) {
+    const alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+    return alpha === 0
+  }
+
+  // 匹配 hsla(h, s, l, a)
+  const hslaMatch = color.match(/^hsla?\(\s*(\d+)(?:deg)?\s*,\s*(\d+)%\s*,\s*(\d+)%(?:\s*,\s*(\d*\.?\d+))?\)$/i)
+  if (hslaMatch) {
+    const alpha = hslaMatch[4] ? parseFloat(hslaMatch[4]) : 1
+    return alpha === 0
+  }
+
+  // 匹配 #RRGGBBAA 或 #RGBA
+  const hexMatch = color.match(/^#([0-9a-f]{8}|[0-9a-f]{4})$/i)
+  if (hexMatch) {
+    const hex = hexMatch[1]
+    const alphaHex = hex.length === 8 ? hex.slice(6, 8) : hex.slice(3, 4).repeat(2)
+    const alpha = parseInt(alphaHex, 16)
+    return alpha === 0
+  }
+
+  return false
+}
+
 watch(
   () => props.penColor,
   () => {
@@ -302,8 +341,8 @@ const redrawCanvas = () => {
   if (!ctx) return
 
   // 清除画布并设置背景
-  if (isDef(props.backgroundColor)) {
-    ctx.setFillStyle(props.backgroundColor)
+  if (!isTransparentColor(props.backgroundColor)) {
+    ctx.setFillStyle(props.backgroundColor as string)
     ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
   } else {
     ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
@@ -570,8 +609,8 @@ function clearCanvas() {
   const { canvasWidth, canvasHeight, ctx } = canvasState
   if (ctx) {
     ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-    if (isDef(props.backgroundColor)) {
-      ctx.setFillStyle(props.backgroundColor)
+    if (!isTransparentColor(props.backgroundColor)) {
+      ctx.setFillStyle(props.backgroundColor as string)
       ctx.fillRect(0, 0, canvasWidth, canvasHeight)
     }
     ctx.draw()