3.5.2版，className里使用表达式动态添加样式类失效，3.3.0以前有效。

EvanZheng11 commented 10 months ago

描述问题：

菜单中的btn-status样式类应该默认是第2个有下划线，第1、3是没有的。

截图或视频：

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？ sdk、npm 或其他...
amis 版本是什么？请先在最新 beta 版本测试问题是否存在 amis@3.5.2

粘贴有问题的完整 amis schema 代码：

{
"type": "page",
"body": [
{
  "type": "container",
  "id": "u:214049d3d44a",
  "style": {
    "boxShadow": " 0px 0px 0px 0px transparent",
    "position": "fixed",
    "display": "block"
  },
  "body": [
    {
      "type": "flex",
      "items": [
        {
          "type": "container",
          "body": [
          ],
          "id": "u:767e350bfd1c",
          "style": {
            "align-self": "center",
            "position": "static",
            "display": "block",
            "boxShadow": " 0px 0px 0px 0px transparent",
            "flex": "0 0 auto"
          },
          "isFixedHeight": false,
          "themeCss": {
            "baseControlClassName": {
              "boxShadow:default": " 0px 0px 0px 0px transparent"
            }
          }
        },
        {
          "type": "container",
          "body": [
            {
              "type": "button-group",
              "buttons": [
                {
                  "type": "button",
                  "label": "应用市场",
                  "id": "u:2fba42a0aaa2",
                  "className": {
                    "btn-status": "${pageIndex == '1' ? false:false}"
                  },
                  "onEvent": {
                    "click": {
                      "actions": [
                        {
                          "actionType": "url",
                          "args": {
                            "url": "/open/appStore/appStore",
                            "blank": false
                          }
                        }
                      ]
                    }
                  },
                  "level": "default"
                },
                {
                  "type": "button",
                  "label": "解决方案",
                  "level": "default",
                  "id": "u:956c287002ca",
                  "className": {
                    "btn-status": "this.pageIndex == '2' || this.pageIndex == '999'"
                  },
                  "onEvent": {
                    "click": {
                      "actions": [
                        {
                          "actionType": "url",
                          "args": {
                            "url": "/open/appStore/appSolution",
                            "blank": false
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  "type": "button",
                  "label": "联系我们",
                  "level": "default",
                  "id": "u:956c287002ca",
                  "className": {
                    "btn-status": "this.pageIndex == '3'"
                  },
                  "onEvent": {
                    "click": {
                      "actions": [
                        {
                          "actionType": "url",
                          "args": {
                            "url": "/open/appStore/connectUs",
                            "blank": false
                          }
                        }
                      ]
                    }
                  }
                }
              ],
              "id": "u:32e37ca8e88e",
              "vertical": false,
              "tiled": false,
              "className": "nav-btns",
              "btnClassName": ""
            }
          ],
          "id": "u:3b5950ef5e96",
          "style": {
            "display": "flex",
            "flex": 1,
            "margin-left": "110px",
            "position": "static",
            "flexWrap": "nowrap",
            "boxShadow": " 0px 0px 0px 0px transparent"
          },
          "isFixedHeight": false,
          "themeCss": {
            "baseControlClassName": {
              "boxShadow:default": " 0px 0px 0px 0px transparent",
              "padding-and-margin:default": {
                "margin-left": "110px"
              }
            }
          }
        }
      ],
      "id": "u:10de1966a745",
      "justify": "space-between",
      "alignItems": "stretch",
      "direction": "row",
      "style": {
        "height": "64px",
        "padding": "0 40px",
        "position": "static",
        "flexWrap": "nowrap",
        "boxShadow": " 0px 0px 0px 0px transparent"
      },
      "isFixedHeight": false,
      "isFixedWidth": false,
      "themeCss": {
        "baseControlClassName": {
          "boxShadow:default": " 0px 0px 0px 0px transparent",
          "padding-and-margin:default": {
            "padding": "0 40px"
          }
        }
      }
    }
  ],
  "className": "website-top",
  "hidden": false,
  "isFixedHeight": false,
  "isFixedWidth": false,
  "hiddenOn": "${isMobile}",
  "themeCss": {
    "baseControlClassName": {
      "boxShadow:default": " 0px 0px 0px 0px transparent"
    }
  }
},
{
  "type": "container",
  "id": "u:140678574875",
  "body": [
  ],
  "className": "",
  "style": {
    "position": "absolute",
    "display": "block",
    "boxShadow": " 0px 0px 0px 0px transparent",
    "maxWidth": "1180px",
    "margin": "0 auto",
    "top": "64px",
    "margin-top": "30px",
    "margin-left": "calc(50% - 590px)",
    "width": "1180px"
  },
  "isFixedHeight": false,
  "isFixedWidth": false,
  "wrapperComponent": "div",
  "hiddenOn": "${pageIndex!='999' || isMobile}",
  "themeCss": {
    "baseControlClassName": {
      "boxShadow:default": " 0px 0px 0px 0px transparent",
      "padding-and-margin:default": {
        "margin": "0 auto",
        "margin-top": "30px",
        "margin-left": "calc(50% - 590px)"
      }
    }
  }
}
],
"id": "u:5eeeba2a6155",
"data": {
"status": 3,
"pageIndex": "2",
"listIndex": 0
},
"asideResizor": false,
"style": {
"height": "auto",
"boxShadow": " 0px 0px 0px 0px transparent",
"position": "relative"
},
"pullRefresh": {
"disabled": true
},
"css": {
".content-html p": {
  "padding": "10px"
},
".content-html img": {
  "max-height": "100vh",
  "max-width": "100vw",
  "object-fit": "contain"
},
".cxd-Image--thumb": {
  "padding": "0px",
  "border": "none"
},
".detail-carousel .cxd-Grid": {
  "margin-left": "0px",
  "margin-right": "0px"
},
".left-img .cxd-Image": {
  "border": "none"
},
".detail-carousel .cxd-Carousel-leftArrow": {
  "left": "-20px !important"
},
".class6c32d2597085": {
  "border": "none !important"
},
".class6c32d2597085 .tox-statusbar": {
  "display": "none"
},
".classbd23dc1d8a7c .cxd-Image": {
  "border": "none"
},
".app-info-list .cxd-Divider": {
  "margin": "5px 0px"
},
".card-bg": {
  "background-image": "linear-gradient(to bottom, #f1f3fe, #ffffff)"
},
".website-top .nav-btns, .website-top .nav-btns .cxd-Button": {
  "height": "100%"
},
".website-top": {
  "width": "100%",
  "border": "0px",
  "background-color": "rgba(255, 255, 255, 1)",
  "backdrop-filter": "blur(4px)",
  "left": "0",
  "box-shadow": "0px 4px 8px rgba(0, 0, 0, 0.1)",
  "position": "fixed",
  "z-index": "999"
},
".btn-status": {
  "border": "0px",
  "border-bottom": "2px solid #3778fa !important",
  "color": "#3778fa",
  "border-radius": "0"
},
".website-top .cxd-Button": {
  "width": "120px",
  "border": "0",
  "background-color": "rgba(255, 255, 255, 0)",
  "font-size": "15px",
  "font-weight": "500"
},
".website-top .cxd-Image": {
  "border": "0px"
},
".website": {
  "padding": "0px"
},
"amis-container": {
  "padding": "0px"
},
".website-top .cxd-Button:hover": {
  "border-left-width": "0px !important",
  "border-top-width": "0px !important",
  "border-right-width": "0px !important",
  "border-bottom-width": "0px !important"
},
".modal-carousel .cxd-Image": {
  "border": "0px"
},
".modal-carousel .cxd-Carousel-dotsControl": {
  "bottom": "-25px"
},
".detail-carousel .cxd-Carousel-dotsControl": {
  "bottom": "-5px !important"
},
".modal-carousel .cxd-Carousel-leftArrow": {
  "width": "5%",
  "left": "-30px"
},
".modal-carousel .cxd-Carousel-rightArrow": {
  "width": "5%",
  "right": "-30px"
},
".label-default": {
  "background": "#2468f2"
},
".self-list-control .cxd-ListControl-items .cxd-ListControl-item": {
  "boder": "none",
  "width": "auto",
  "position": "relative",
  "-webkit-user-select": "none",
  "-moz-user-select": "none",
  "-ms-user-select": "none",
  "user-select": "none",
  "font-size": "14px",
  "display": "inline-block",
  "vertical-align": "middle",
  "margin": "0 0.3rem",
  "border": "none",
  "background": "transparent",
  "color": "#151b26",
  "-webkit-transition": "none",
  "transition": "none",
  "max-width": "13.625rem",
  "padding": "0 0.3rem"
},
".self-list-control .cxd-ListControl-items .cxd-ListControl-item.is-active, .self-list-control .cxd-ListControl-items .cxd-ListControl-item:hover:active": {
  "border": "none",
  "color": "#2468f2"
},
".self-list-control .cxd-ListControl-items .cxd-ListControl-item.is-active:before, .self-list-control .cxd-ListControl-items .cxd-ListControl-item:hover:active:before, .self-list-control .cxd-ListControl-items .cxd-ListControl-item.is-active:after, .self-list-control .cxd-ListControl-items .cxd-ListControl-item:hover:active:after": {
  "display": "none"
},
".classffbd084cf9d6 .cxd-Carousel-container": {
  "overflow": "visible"
},
".form-bg-img": {
  "background-image": "linear-gradient(180deg, #d2e7ff 0%, #deedff 50%, #ffffff 100%)",
  "padding": "27px 27px 13px 27px",
  "box-shadow": "0px 0px 20px 5px rgba(33, 98, 227, 0.1)!important"
},
".mobile-container .cxd-Container--xs, .cxd-Wrapper--xs": {
  "padding": "0px"
},
".detail-carousel .cxd-Carousel-rightArrow": {
  "right": "-20px !important"
},
".detail-carousel .cxd-Grid-col--sm4": {
  "padding": "0px !important"
},
".solution-container .cxd-Grid-col--sm4": {
  "padding-left": "0px",
  "padding-right": "0px"
},
".solution-container .cxd-Grid": {
  "margin-left": "0px",
  "margin-right": "0px"
},
".small-input .cxd-Select-value": {
  "font-size": "12px"
},
".content-html p > img": {
  "margin-left": "-10px"
},
".small-input .cxd-Select.is-mobile .cxd-Select-valueWrap": {
  "text-align": "center"
}
},
"regions": [
"body"
],
"themeCss": {
"baseControlClassName": {
  "boxShadow:default": " 0px 0px 0px 0px transparent"
}
},
"bodyClassName": "website",
"onEvent": {
"init": {
  "weight": 0,
  "actions": [
    {
      "script": "/* 自定义JS使用说明：\n  * 1.动作执行函数doAction，可以执行所有类型的动作\n  * 2.通过上下文对象context可以获取当前组件实例，例如context.props可以获取该组件相关属性\n  * 3.事件对象event，在doAction之后执行event.stopPropagation();可以阻止后续动作执行\n*/\ndoAction({\n  componentId: \"u:5eeeba2a6155\",\n  groupType: \"component\",\n  actionType: \"setValue\",\n  args: {\n    \"value\": {\n      \"origin\": window.location.origin,\n      \"isMobile\": /Mobi|Android|iPhone/i.test(navigator.userAgent)\n    }\n  }\n});\n",
      "actionType": "custom"
    }
  ]
}
}
}

github-actions[bot] commented 10 months ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

EvanZheng11 commented 10 months ago

通过在源码里调试找到原因：原因是这个组件要是像buttonGroup这种里面有子元素的（buttons），当buttons里的按钮配置className表达式会失效。失效的原因是10.17(commit ID: 7f851fea0b2d4b7049a4cc7dd5fdec320d501f0f)提交的代码修改filter-schema.ts里的过滤逻辑中，添加了一个优先props的条件，但在buttonGroup里渲染buttons时，进入到这个判断时，props里的className好像是已经计算好了表达式的结果（但结果是永远为true)，所以buttons里的className就会无视表达式，永远加上class。

目前我自己的处理方法里在filter-schema.ts里的这个位置加特定类型组件的判断或去掉。。

baidu / amis