style: 更新等比适配组件样式

Author: irisSong

packages/nutui-taro-demo/src/pages/index/index.config.ts

@@ -1,5 +1,3 @@
 export default definePageConfig({
   navigationBarTitleText: '首页',
-  // App设计规范适配版本
-  // designAppVersion: 16
 })

src/packages/menu/menu.scss

@@ -42,6 +42,8 @@
   }
 
   &-icon {
+    width: scale-icon-px(12px);
+    height: scale-icon-px(12px);
     flex-shrink: 0;
     transition: all 0.2s linear;
   }

src/packages/menu/menu.taro.tsx

@@ -137,17 +137,9 @@ export const Menu: FunctionComponent<Partial<TaroMenuProps>> & {
           if (titleIcon) return titleIcon
           if (icon) return icon
           return direction === 'up' ? (
-            <ArrowUp
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowUp className="nut-menu-title-icon" />
           ) : (
-            <ArrowDown
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowDown className="nut-menu-title-icon" />
           )
         }
         return (

src/packages/menu/menu.tsx

@@ -137,17 +137,9 @@ export const Menu: FunctionComponent<Partial<WebMenuProps>> & {
           if (titleIcon) return titleIcon
           if (icon) return icon
           return direction === 'up' ? (
-            <ArrowUp
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowUp className="nut-menu-title-icon" />
           ) : (
-            <ArrowDown
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowDown className="nut-menu-title-icon" />
           )
         }
         return (

src/packages/menuitem/menuitem.scss

@@ -28,6 +28,11 @@
       color: $menu-item-active-color;
     }
 
+    &-icon {
+      display: flex;
+      align-items: center;
+    }
+
     .nut-icon {
       /* #ifdef dynamic*/
       display: flex;

src/packages/numberkeyboard/numberkeyboard.scss

@@ -1,6 +1,11 @@
 @import '../popup/popup.scss';
 
 .nut-numberkeyboard {
+  &-close-icon {
+    width: scale-icon-px(18px);
+    height: scale-icon-px(18px);
+  }
+
   width: 100%;
   padding: $numberkeyboard-padding;
   user-select: none;

src/packages/numberkeyboard/numberkeyboard.taro.tsx

@@ -115,7 +115,7 @@ export const NumberKeyboard: FunctionComponent<
         case 'delete':
           return <DeleteIcon />
         case 'close':
-          return <ArrowDown size={18} />
+          return <ArrowDown className={`${classPrefix}-close-icon`} />
         case 'confirm':
           return <>{confirmText || locale.done}</>
         default:

src/packages/numberkeyboard/numberkeyboard.tsx

@@ -118,7 +118,7 @@ export const NumberKeyboard: FunctionComponent<
         case 'delete':
           return <DeleteIcon />
         case 'close':
-          return <ArrowDown width={18} height={18} />
+          return <ArrowDown className={`${classPrefix}-close-icon`} />
         case 'confirm':
           return <>{confirmText || locale.done}</>
         default:

src/packages/quickenter/quickenter.scss

@@ -5,7 +5,7 @@
   /* 限制弹层最大高度，包含安全区 */
   max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0));
   background: $quickenter-bg-color;
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
   overflow: hidden;
   box-sizing: border-box;
   display: flex;
@@ -24,7 +24,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 30px 16px 0;
+    padding: scale-px(30px) scale-px(16px) 0;
     box-sizing: border-box;
   }
 
@@ -53,7 +53,7 @@
 
   &-content {
     flex: 1;
-    padding: 10px 28px;
+    padding: scale-px(10px) scale-px(28px);
     overflow-y: hidden; // 始终可滚动，防止内容被遮挡
     box-sizing: border-box;
 
@@ -75,48 +75,48 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: 56px;
-    padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px
+    width: scale-px(56px);
+    padding: 0 0 scale-px(12px) 0; // Reduced from 16px to ensure 2 rows fit in 256px
     box-sizing: border-box;
     cursor: pointer;
 
     // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
-    margin-right: calc((100% - 224px) / 3);
+    margin-right: calc((100% - scale-px(224px)) / 3);
 
     &:nth-child(4n) {
       margin-right: 0;
     }
 
     &-icon {
-      width: 56px;
-      height: 56px;
+      width: scale-px(56px);
+      height: scale-px(56px);
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       background: $quickenter-item-icon-bg-color;
       color: $quickenter-item-icon-color;
-      margin-bottom: 8px;
+      margin-bottom: scale-px(8px);
       flex-shrink: 0;
 
       svg,
       .nut-icon {
-        width: 22px;
-        height: 22px;
+        width: scale-icon-px(22px);
+        height: scale-icon-px(22px);
       }
     }
 
     &-title {
       font-size: $quickenter-item-title-font-size;
       color: $quickenter-item-title-color;
       text-align: center;
-      line-height: 1.4;
+      line-height: scale-font-px(16px);
       // Allow multi-line if text is long, preventing truncation
       white-space: normal;
       word-wrap: break-word;
-      width: 72px; // Allow text to be slightly wider than icon
-      margin-left: -8px; // Center 72px title over 56px icon
-      margin-right: -8px;
+      width: scale-px(72px); // Allow text to be slightly wider than icon
+      margin-left: scale-px(-8px); // Center 72px title over 56px icon
+      margin-right: scale-px(-8px);
     }
   }
 }

src/packages/searchbar/demos/h5/demo6.tsx

@@ -20,7 +20,14 @@ const Demo6 = () => {
             }}
             list={itemList}
           >
-            <div style={{ fontSize: '12px', width: '50px', display: 'flex' }}>
+            <div
+              style={{
+                fontSize: '12px',
+                width: '50px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               更多
               <ArrowDown />
             </div>