chore: 还原部分改动

Author: irisSong

.cursor/skills/nutui-proportional-scaling/SKILL.md

@@ -8,7 +8,9 @@ description: >-
   scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly;
   commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配,
   等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or
-  editing component SCSS for resize.
+  editing component SCSS for resize; SCSS: prefer calc($token + Npx) over
+  #{} in calc, use outer calc() when mixing tokens that compile to
+  var(--nutui-*).
 ---
 
 # NutUI React 等比适配
@@ -51,8 +53,9 @@ description: >-
 
 ### 2.1 `npm run build` / `npm run build:taro` 时的 px → `scale-px`
 
-- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库文件。
+- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库里的组件 SCSS。
 - 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。
+- 该脚本对 **`calc(...)` 体内同时含 `$` 与 `/`** 的整段先做占位再替换裸 `px`，避免 postcss-scss 把 **`calc($var / 2)`** 等拆坏；其它 `calc` 内的裸 `Npx` 仍会按规则转为 `scale-px`。
 
 ---
 
@@ -76,6 +79,14 @@ description: >-
 - 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。
 - 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。
 
+### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致）
+
+- **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。
+- **与 `var(--nutui-*)` 一起运算时**：许多 token 会展开为 **`var(--nutui-…, calc(Npx * var(--nut-scale-f, 1)))`**。此时**不要**指望纯 Sass 括号在声明值里做「减法 + 固定 px」，例如  
+  **`margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px`**  
+  会在编译结果里拼成 **`var(...)var(...)`** 一类**缺少运算符**的非法片段。应写成 **`margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px`**，让整条长度在**一个** CSS `calc()` 里由浏览器解析。
+- **`100%` 与长度相减**：用 **`calc(100% - Npx)`** 一层即可，避免出现 **`100% - calc(...)`** 这类单位不合法的组合（历史上有过 postcss / 手工替换导致的损坏，以当前组件 SCSS 为准）。
+
 ---
 
 ## 4. 业务接入清单
@@ -91,6 +102,8 @@ description: >-
 
 - [ ] 新增 **0** 尺寸未误用 `scale-px(0px)`。
 - [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。
+- [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。
+- [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。
 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。
 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。
 

src/packages/avatarcropper/avatarcropper.taro.tsx

@@ -4,9 +4,8 @@ import React, {
   useMemo,
   useCallback,
   FunctionComponent,
-  useLayoutEffect,
 } from 'react'
-import Taro, { createSelectorQuery } from '@tarojs/taro'
+import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
@@ -138,7 +137,7 @@ export const AvatarCropper: FunctionComponent<
     cropperCanvasContext: null,
   })
 
-  useLayoutEffect(() => {
+  useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -150,7 +149,7 @@ export const AvatarCropper: FunctionComponent<
         })
         .exec()
     }
-  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
+  })
 
   useEffect(() => {
     setCanvasAll({

src/packages/button/button.taro.tsx

@@ -1,7 +1,10 @@
 import React, { CSSProperties, useCallback, useMemo } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
-import { View } from '@tarojs/components'
+import {
+  View,
+  // Button as TaroButton,
+} from '@tarojs/components'
 import { Loading } from '@nutui/icons-react-taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'

src/packages/checkbox/checkbox.scss

@@ -117,7 +117,7 @@
       height: 12px;
       position: absolute;
       color: $white;
-      right: 0px;
+      right: 0;
       bottom: 0;
       transform: translate(-1px, -2px);
     }

src/packages/fixednav/fixednav.scss

@@ -89,7 +89,7 @@
     right: 0;
     .nut-fixednav-btn {
       right: 0;
-      border-radius: 45px 0 0 45px;
+      border-radius: 45px 0px 0px 45px;
       .nut-icon {
         margin-right: 5px;
         transform: rotate(0deg);
@@ -98,7 +98,7 @@
     .nut-fixednav-list {
       right: 0;
       transform: translateX(100%);
-      border-radius: 25px 0 0 25px;
+      border-radius: 25px 0px 0px 25px;
       padding: {
         left: 20px;
         right: 80px;
@@ -121,7 +121,7 @@
     .nut-fixednav-list {
       transform: translateX(-100%);
       left: 0;
-      border-radius: 0 25px 25px 0;
+      border-radius: 0px 25px 25px 0px;
       padding: {
         left: 80px;
         right: 20px;

src/packages/lottie/lottiemp.taro.tsx

@@ -1,5 +1,5 @@
-import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react'
-import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro'
+import React, { useImperativeHandle, useRef } from 'react'
+import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro'
 import lottie from '@nutui/lottie-miniprogram'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
 import { useUuid } from '@/hooks/use-uuid'
@@ -21,9 +21,16 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
     dpr = true,
   } = props
 
+  const setSpeed = () => {
+    if (animation.current) {
+      animation.current.setSpeed(Math.abs(speed))
+      animation.current.setDirection(speed > 0 ? 1 : -1)
+    }
+  }
+
   useImperativeHandle(ref, () => animation.current || {})
   const pixelRatio = useRef(getWindowInfo().pixelRatio)
-  useLayoutEffect(() => {
+  useReady(() => {
     createSelectorQuery()
       .select(`#${id}`)
       .fields(
@@ -57,22 +64,17 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
                 context,
               },
             })
-            if (onComplete) {
+            onComplete &&
               animation.current.addEventListener('complete', onComplete)
-            }
-
-            if (animation.current) {
-              animation.current.setSpeed(Math.abs(speed))
-              animation.current.setDirection(speed > 0 ? 1 : -1)
-            }
+            setSpeed()
             inited.current = true
           } catch (error) {
             console.error(error)
           }
         }
       )
       .exec()
-  }, [autoPlay, dpr, id, loop, onComplete, source, speed, style])
+  })
 
   useUnload(() => {
     onComplete &&

src/packages/overlay/overlay.tsx

@@ -10,6 +10,7 @@ import classNames from 'classnames'
 import { ComponentDefaults } from '@/utils/typings'
 import { useLockScroll } from '@/hooks/use-lock-scroll'
 import { WebOverlayProps } from '@/types'
+import { useConfig } from '@/packages/configprovider'
 
 export const defaultOverlayProps: WebOverlayProps = {
   ...ComponentDefaults,
@@ -37,12 +38,14 @@ export const Overlay: FunctionComponent<
     afterShow,
     afterClose,
     onClick,
+    ariaLabel,
     ...rest
   } = { ...defaultOverlayProps, ...props }
 
   const classPrefix = 'nut-overlay'
   const [innerVisible, setInnerVisible] = useState(visible)
   const nodeRef = useRef(null)
+  const { locale } = useConfig()
 
   useEffect(() => {
     setInnerVisible(visible)
@@ -78,6 +81,9 @@ export const Overlay: FunctionComponent<
         style={styles}
         {...rest}
         onClick={handleClick}
+        {...(closeOnOverlayClick
+          ? { ariaLabel: ariaLabel || locale.mask }
+          : {})}
       >
         {children}
       </div>

src/packages/popover/popover.taro.tsx

@@ -265,7 +265,7 @@ export const Popover: FunctionComponent<
           <View className="nut-popover-content-group" ref={popoverContentRef}>
             {showArrow && (
               <View className={popoverArrow()} style={popoverArrowStyle()}>
-                <ArrowRadius width={8} height={4} />
+                <ArrowRadius />
               </View>
             )}
             {Array.isArray(children) ? children[1] : null}

src/packages/rate/rate.taro.tsx

@@ -1,14 +1,13 @@
 import React, {
   FunctionComponent,
   ReactElement,
-  useCallback,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { StarFill } from '@nutui/icons-react-taro'
+import { useReady } from '@tarojs/taro'
 import { ITouchEvent, Text, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
@@ -132,7 +131,7 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
     }
   }
 
-  const updateRects = useCallback(() => {
+  const updateRects = () => {
     for (let index = 0; index < refs.length; index++) {
       const item = refs[index]
       if (item) {
@@ -141,11 +140,11 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
         })
       }
     }
-  }, [refs])
+  }
 
-  useLayoutEffect(() => {
+  useReady(() => {
     updateRects()
-  }, [updateRects])
+  })
 
   const handleTouchStart = (e: any) => {
     if (!touchable || readOnly || disabled) {

src/packages/switch/switch.scss

@@ -78,16 +78,16 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px;
+      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        margin: 0 7px 0 ($switch-height - $switch-border-width + 3px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      margin: 0 7px 0 ($switch-height - $switch-border-width + 3px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px;
+        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }