From 1610eb9daafb5a80f2729b662d0710099d5bf7c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Thu, 16 Jul 2026 09:16:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/style.ts | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/utils/style.ts b/src/utils/style.ts
index 34dce3fe..ff69cafd 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -19,15 +19,33 @@ export const animationsClass = (animations: string[]) => {
 export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
   if (!styles || !styles.filterShow) return {}
   const { opacity, saturate, contrast, hueRotate, brightness } = styles
-  return {
-    opacity: opacity,
-    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`
+  const result: Record<string, string | number> = {}
+
+  // opacity 为 1/undefined/null 时不设置，避免创建层叠上下文
+  if (opacity != null && opacity !== 1) {
+    result.opacity = opacity
   }
+
+  // 只收集非默认值的滤镜函数，避免无意义的 filter 计算
+  const filters: string[] = []
+  if (saturate != null && saturate !== 1) filters.push(`saturate(${saturate})`)
+  if (contrast != null && contrast !== 1) filters.push(`contrast(${contrast})`)
+  if (hueRotate != null && hueRotate !== 0) filters.push(`hue-rotate(${hueRotate}deg)`)
+  if (brightness != null && brightness !== 1) filters.push(`brightness(${brightness})`)
+  if (filters.length) {
+    result.filter = filters.join(' ')
+  }
+
+  return result
 }
 
 // * 变换
 export const getTransformStyle = (styles: StylesType) => {
   const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
+  // 所有值都为 0/undefined/null 时不生成 transform，避免创建层叠上下文
+  if (![rotateZ, rotateX, rotateY, skewX, skewY].some(v => v)) {
+    return {}
+  }
   return {
     transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${
       skewX || 0
@@ -39,6 +57,8 @@ export const getTransformStyle = (styles: StylesType) => {
 export const getBlendModeStyle = (styles: StylesType) => {
   if (!styles || !styles.filterShow) return {}
   const { blendMode } = styles
+  // normal 为默认值，不输出以避免创建层叠上下文
+  if (!blendMode || blendMode === 'normal') return {}
   return {
     'mix-blend-mode': blendMode
   }