From 1d93dbabb5c136fd136dadc25e142ae8ee019a3c Mon Sep 17 00:00:00 2001
From: huxiyang <1872591453@qq.com>
Date: Tue, 4 Jun 2024 16:53:15 +0800
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20progress=E9=B8=BF=E8=92=99?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/progress/demos/taro/demo7.tsx | 10 ++-
 src/packages/progress/progress.harmony.css | 18 +----
 src/packages/progress/progress.taro.tsx    | 77 ++++++++++++----------
 3 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/src/packages/progress/demos/taro/demo7.tsx b/src/packages/progress/demos/taro/demo7.tsx
index e9087600aa..651b529a5a 100644
--- a/src/packages/progress/demos/taro/demo7.tsx
+++ b/src/packages/progress/demos/taro/demo7.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Progress, Cell, Button, Toast } from '@nutui/nutui-react-taro'
+import { Cell, Button, Toast, Progress } from '@nutui/nutui-react-taro'
+import { View, Text } from '@tarojs/components'
+import { pxTransform } from '@tarojs/taro'
 
 const Demo7 = () => {
   const [value, setValue] = useState(0)
@@ -16,8 +18,10 @@ const Demo7 = () => {
         }}
       />
       <Cell align="center">
-        <Progress percent={value} />
-        <span style={{ margin: '0 5px' }}>{value}%</span>
+        <View style={{ width: '90%', marginRight: pxTransform(5) }}>
+          <Progress percent={value} />
+        </View>
+        <Text>{value}%</Text>
       </Cell>
       <Cell align="center">
         <Button
diff --git a/src/packages/progress/progress.harmony.css b/src/packages/progress/progress.harmony.css
index 2fef8db7bf..59d77bd145 100644
--- a/src/packages/progress/progress.harmony.css
+++ b/src/packages/progress/progress.harmony.css
@@ -34,15 +34,15 @@
   align-items: center;
   position: absolute;
   top: -4px;
-  bottom: -4px;
   transition: all 0.4s;
   transform: translate(-50%);
+  margin-top: -8px;
 }
 .nut-progress-text-inner {
   display: flex;
   align-items: center;
   height: 100%;
-  width: 100%;
+  /* width: 100%; */
   color: #ffffff;
   padding: 0 5px;
   border-radius: 5px;
@@ -50,20 +50,6 @@
   line-height: 1;
   background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
 }
-@keyframes progressActive {
-  0% {
-    background: rgba(255, 255, 255, 0.1);
-    width: 0;
-  }
-  20% {
-    background: rgba(255, 255, 255, 0.5);
-    width: 0;
-  }
-  to {
-    background: rgba(255, 255, 255, 0);
-    width: 100%;
-  }
-}
 
 [dir=rtl] .nut-progress-text,
 .nut-rtl .nut-progress-text {
diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index ff529046c0..ecaa89c371 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
-import Taro, { PageInstance } from '@tarojs/taro'
+import Taro, { PageInstance, pxTransform } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '../configprovider/index.taro'
 import useUuid from '@/utils/use-uuid'
@@ -54,7 +55,6 @@ export const Progress: FunctionComponent<
   })
 
   const stylesOuter: React.CSSProperties = {
-    height: `${strokeWidth}px`,
     background,
   }
 
@@ -64,6 +64,10 @@ export const Progress: FunctionComponent<
     width: `${displayPercent}%`,
     background: color,
   }
+  if (strokeWidth) {
+    stylesOuter.height = pxTransform(Number(strokeWidth))
+    stylesInner.height = pxTransform(Number(strokeWidth))
+  }
   const handlePercent = () => {
     let timer: any = null
     if (delay) {
@@ -152,39 +156,42 @@ export const Progress: FunctionComponent<
   }, [])
 
   return (
-    <div
-      ref={progressRef}
-      id={selector}
-      className={classNames(classPrefix, className)}
-      style={style}
-      {...rest}
-    >
-      <div className={`${classPrefix}-outer`} style={stylesOuter}>
-        <div className={classesInner} style={stylesInner}>
-          {showText && (
-            <div
-              className={`${classPrefix}-text`}
-              style={
-                rtl
-                  ? { right: `${displayPercent}%` }
-                  : { left: `${displayPercent}%` }
-              }
-            >
-              {children || (
-                <div
-                  className={`${classPrefix}-text-inner`}
-                  style={{
-                    background: color,
-                  }}
-                >
-                  {percent}%
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
+    <>
+      <View
+        ref={progressRef}
+        id={selector}
+        className={classNames(classPrefix, className)}
+        style={style}
+        {...rest}
+      >
+        <View className={`${classPrefix}-outer`} style={stylesOuter}>
+          <View className={classesInner} style={stylesInner}>
+            {showText && (
+              <View
+                className={`${classPrefix}-text`}
+                style={
+                  { left: '100%' }
+                  // rtl
+                  //   ? { right: `${displayPercent}%` }
+                  //   : { left: `${displayPercent}%` }
+                }
+              >
+                {children || (
+                  <Text
+                    className={`${classPrefix}-text-inner`}
+                    style={{
+                      background: color,
+                    }}
+                  >
+                    {percent}%
+                  </Text>
+                )}
+              </View>
+            )}
+          </View>
+        </View>
+      </View>
+    </>
   )
 }
 

From f0e859a889df82a458a790115fd9186285da61bd Mon Sep 17 00:00:00 2001
From: huxiyang <1872591453@qq.com>
Date: Thu, 6 Jun 2024 17:16:42 +0800
Subject: [PATCH 02/16] =?UTF-8?q?feat(progress):=20=E5=9B=9B=E7=AB=AF?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/progress/demo.taro.tsx        |  25 +++--
 src/packages/progress/demos/taro/demo2.tsx |   4 +-
 src/packages/progress/demos/taro/demo6.tsx |  21 ++--
 src/packages/progress/demos/taro/demo7.tsx |  24 ++--
 src/packages/progress/progress.harmony.css |  33 +++---
 src/packages/progress/progress.scss        |   2 +-
 src/packages/progress/progress.taro.tsx    | 121 ++++++++++++++++-----
 7 files changed, 151 insertions(+), 79 deletions(-)

diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx
index 5308200e87..26777f06e8 100644
--- a/src/packages/progress/demo.taro.tsx
+++ b/src/packages/progress/demo.taro.tsx
@@ -63,20 +63,29 @@ const ProgressDemo = () => {
         <Cell>
           <Demo3 />
         </Cell>
-        <View className="h2">{translated.customContent}</View>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <>
+            <View className="h2">{translated.customContent}</View>
+            <Cell>
+              <Demo4 />
+            </Cell>
+          </>
+        )}
         <View className="h2">{translated.customSize}</View>
         <Demo5 />
         <View className="h2">{translated.statusDisplay}</View>
         <Demo6 />
+
         <View className="h2">{translated.dynamicChange}</View>
         <Demo7 />
-        <View className="h2">{translated.lazy}</View>
-        <Cell>
-          <Demo8 />
-        </Cell>
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <>
+            <View className="h2">{translated.lazy}</View>
+            <Cell>
+              <Demo8 />
+            </Cell>
+          </>
+        )}
       </ScrollView>
     </>
   )
diff --git a/src/packages/progress/demos/taro/demo2.tsx b/src/packages/progress/demos/taro/demo2.tsx
index 165bb53917..55de4b5f8b 100644
--- a/src/packages/progress/demos/taro/demo2.tsx
+++ b/src/packages/progress/demos/taro/demo2.tsx
@@ -5,8 +5,8 @@ const Demo2 = () => {
   return (
     <Progress
       percent={30}
-      color="var(--nutui-color-primary)"
-      background="var(--nutui-brand-1)"
+      color="#FF0F23"
+      background="#FFEAE8"
       strokeWidth="15"
     />
   )
diff --git a/src/packages/progress/demos/taro/demo6.tsx b/src/packages/progress/demos/taro/demo6.tsx
index 91ef3a5d8a..5f0c4bc406 100644
--- a/src/packages/progress/demos/taro/demo6.tsx
+++ b/src/packages/progress/demos/taro/demo6.tsx
@@ -1,28 +1,25 @@
 import React from 'react'
 import { Progress, Cell } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
 import { Checked, Tips } from '@nutui/icons-react-taro'
 
 const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Progress
-          percent={30}
-          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-          animated
-        />
+        <Progress percent={30} color="blue" animated />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
-        <Checked color="green" style={{ margin: '0 5px' }} />
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <Checked color="green" style={{ margin: '0 5px' }} />
+        )}
       </Cell>
       <Cell align="center">
-        <Progress
-          percent={100}
-          color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
-          strokeWidth="15"
-        />
-        <Tips color="red" style={{ margin: '0 5px' }} />
+        <Progress percent={100} color="#AAFF00" strokeWidth="15" />
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <Tips color="red" style={{ margin: '0 5px' }} />
+        )}
       </Cell>
     </>
   )
diff --git a/src/packages/progress/demos/taro/demo7.tsx b/src/packages/progress/demos/taro/demo7.tsx
index 651b529a5a..a95a02eafc 100644
--- a/src/packages/progress/demos/taro/demo7.tsx
+++ b/src/packages/progress/demos/taro/demo7.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Cell, Button, Toast, Progress } from '@nutui/nutui-react-taro'
 import { View, Text } from '@tarojs/components'
-import { pxTransform } from '@tarojs/taro'
+import Taro, { pxTransform } from '@tarojs/taro'
 
 const Demo7 = () => {
   const [value, setValue] = useState(0)
@@ -9,14 +9,17 @@ const Demo7 = () => {
   const [toastMsg, setToastMsg] = useState('')
   return (
     <Cell.Group>
-      <Toast
-        type="text"
-        visible={show}
-        content={toastMsg}
-        onClose={() => {
-          setShow(false)
-        }}
-      />
+      {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+        <Toast
+          type="text"
+          visible={show}
+          content={toastMsg}
+          onClose={() => {
+            setShow(false)
+          }}
+        />
+      )}
+
       <Cell align="center">
         <View style={{ width: '90%', marginRight: pxTransform(5) }}>
           <Progress percent={value} />
@@ -26,7 +29,7 @@ const Demo7 = () => {
       <Cell align="center">
         <Button
           type="default"
-          style={{ margin: 8 }}
+          style={{ marginRight: pxTransform(16) }}
           onClick={() => {
             if (value <= 0) {
               setToastMsg('进度已为0')
@@ -39,7 +42,6 @@ const Demo7 = () => {
         </Button>
         <Button
           type="primary"
-          style={{ margin: 8 }}
           onClick={() => {
             if (value >= 100) {
               setToastMsg('进度已为100%')
diff --git a/src/packages/progress/progress.harmony.css b/src/packages/progress/progress.harmony.css
index 59d77bd145..5a225c3601 100644
--- a/src/packages/progress/progress.harmony.css
+++ b/src/packages/progress/progress.harmony.css
@@ -8,7 +8,7 @@
   flex: auto;
   border-radius: 12px;
   height: 10px;
-  background: #F7F8FC;
+  background-color: #f5f6fa;
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,31 +27,34 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: 12px;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background-color: #ff0f23;
 }
 .nut-progress-text {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: -4px;
   transition: all 0.4s;
-  transform: translate(-50%);
-  margin-top: -8px;
 }
 .nut-progress-text-inner {
   display: flex;
   align-items: center;
   height: 100%;
-  /* width: 100%; */
+  width: 100%;
   color: #ffffff;
   padding: 0 5px;
   border-radius: 5px;
   font-size: 9px;
   line-height: 1;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background-color: #ff0f23;
+}
+@keyframes progressActive {
+  0% {
+    background: rgba(255, 255, 255, 0.1);
+    width: 0;
+  }
+  20% {
+    background: rgba(255, 255, 255, 0.5);
+    width: 0;
+  }
+  to {
+    background: rgba(255, 255, 255, 0);
+    width: 100%;
+  }
 }
-
-[dir=rtl] .nut-progress-text,
-.nut-rtl .nut-progress-text {
-  transform: translate(50%);
-}
\ No newline at end of file
diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
index 5eebd11a18..82c6df71c0 100644
--- a/src/packages/progress/progress.scss
+++ b/src/packages/progress/progress.scss
@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background: $progress-color;
+    // background: $progress-color;
   }
 
   &-text {
diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index ecaa89c371..77c48c2c27 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 import Taro, { PageInstance, pxTransform } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '../configprovider/index.taro'
 import useUuid from '@/utils/use-uuid'
@@ -55,15 +55,17 @@ export const Progress: FunctionComponent<
   })
 
   const stylesOuter: React.CSSProperties = {
-    background,
+    width: '100%',
+    backgroundColor: background,
   }
 
   const [displayPercent, setDispalyPercent] = useState(0)
 
   const stylesInner: React.CSSProperties = {
     width: `${displayPercent}%`,
-    background: color,
+    backgroundColor: color || '#FF0F23',
   }
+
   if (strokeWidth) {
     stylesOuter.height = pxTransform(Number(strokeWidth))
     stylesInner.height = pxTransform(Number(strokeWidth))
@@ -111,6 +113,7 @@ export const Progress: FunctionComponent<
   }, [intersecting])
   const handleWebObserver = () => {
     /// web环境
+
     if (lazy) {
       webObserver.current = new IntersectionObserver(
         (entires, self) => {
@@ -129,6 +132,12 @@ export const Progress: FunctionComponent<
   }
   const handleOtherObserver = () => {
     // 非web环境
+    if (
+      Taro.getEnv() === Taro.ENV_TYPE.HARMONY ||
+      Taro.getEnv() === Taro.ENV_TYPE.RN
+    ) {
+      return
+    }
     let observer: any = null
     if (lazy) {
       observer = Taro.createIntersectionObserver(
@@ -154,44 +163,96 @@ export const Progress: FunctionComponent<
       handleOtherObserver()
     }
   }, [])
-
+  const getTextStyle = () => {
+    const value = Taro.getEnv() === Taro.ENV_TYPE.HARMONY ? '90%' : '100%'
+    return rtl ? { right: value } : { left: value }
+  }
+  const computeRight = () => {
+    if (children) {
+      return 0
+    }
+    if (!['HARMONY', 'RN'].includes(Taro.getEnv())) {
+      return Math.floor((`${percent}%`.length * 9) / 2)
+    }
+    if (Taro.getEnv() === Taro.ENV_TYPE.RN) {
+      return `${percent}%`.length * 9 + 4
+    }
+    return Math.floor((`${percent}%`.length * 9 + 4) / 2)
+  }
+  const computeInnerStyle = () => {
+    const style: any = {
+      backgroundColor: color || '#ff0f23',
+      height:
+        // eslint-disable-next-line no-nested-ternary
+        Taro.getEnv() === Taro.ENV_TYPE.HARMONY
+          ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18)
+          : strokeWidth
+            ? Number(strokeWidth) + 8
+            : 18,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }
+    if (['HARMONY', 'RN'].includes(Taro.getEnv())) {
+      style.width =
+        Taro.getEnv() === Taro.ENV_TYPE.HARMONY
+          ? pxTransform(`${percent}%`.length * 9 + 4)
+          : `${percent}%`.length * 9 + 4
+    }
+    return style
+  }
   return (
-    <>
-      <View
-        ref={progressRef}
-        id={selector}
-        className={classNames(classPrefix, className)}
-        style={style}
-        {...rest}
-      >
-        <View className={`${classPrefix}-outer`} style={stylesOuter}>
-          <View className={classesInner} style={stylesInner}>
-            {showText && (
+    <View
+      ref={progressRef}
+      id={selector}
+      className={classNames(classPrefix, className)}
+      style={style}
+      {...rest}
+    >
+      <View className={`${classPrefix}-outer`} style={stylesOuter}>
+        <View
+          className={classesInner}
+          style={{ ...stylesInner, position: 'relative' }}
+        >
+          {showText && (
+            <View
+              style={{
+                position: 'relative',
+                [rtl ? 'left' : 'right']: computeRight(),
+              }}
+            >
               <View
                 className={`${classPrefix}-text`}
-                style={
-                  { left: '100%' }
-                  // rtl
-                  //   ? { right: `${displayPercent}%` }
-                  //   : { left: `${displayPercent}%` }
-                }
+                style={{
+                  ...getTextStyle(),
+                  height:
+                    // eslint-disable-next-line no-nested-ternary
+                    Taro.getEnv() === Taro.ENV_TYPE.HARMONY
+                      ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18)
+                      : strokeWidth
+                        ? Number(strokeWidth) + 8
+                        : 18,
+                  position: 'absolute',
+                  top: -(strokeWidth
+                    ? (Number(strokeWidth) + 8 - 9) / 2 + 5
+                    : 9),
+                }}
               >
                 {children || (
-                  <Text
+                  <View
                     className={`${classPrefix}-text-inner`}
-                    style={{
-                      background: color,
-                    }}
+                    style={computeInnerStyle()}
                   >
-                    {percent}%
-                  </Text>
+                    {`${percent}%`}
+                  </View>
                 )}
               </View>
-            )}
-          </View>
+            </View>
+          )}
         </View>
       </View>
-    </>
+    </View>
   )
 }
 

From 735f3a34bc1bd92d0691bdb98a27001bccbb3ad8 Mon Sep 17 00:00:00 2001
From: huxiyang <1872591453@qq.com>
Date: Thu, 6 Jun 2024 17:48:12 +0800
Subject: [PATCH 03/16] =?UTF-8?q?fix:=20web=20h5=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/progress/demos/h5/demo6.tsx | 12 ++----------
 src/packages/progress/progress.tsx       |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/packages/progress/demos/h5/demo6.tsx b/src/packages/progress/demos/h5/demo6.tsx
index 99a4c573b3..51a4f1bc7c 100644
--- a/src/packages/progress/demos/h5/demo6.tsx
+++ b/src/packages/progress/demos/h5/demo6.tsx
@@ -6,22 +6,14 @@ const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Progress
-          percent={30}
-          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-          animated
-        />
+        <Progress percent={30} color="blue" animated />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
         <Checked color="green" style={{ margin: '0 5px' }} />
       </Cell>
       <Cell align="center">
-        <Progress
-          percent={100}
-          color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
-          strokeWidth="15"
-        />
+        <Progress percent={100} color="#AAFF00" strokeWidth="15" />
         <Tips color="red" style={{ margin: '0 5px' }} />
       </Cell>
     </>
diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx
index a47ec44fbd..902d6c3553 100644
--- a/src/packages/progress/progress.tsx
+++ b/src/packages/progress/progress.tsx
@@ -61,7 +61,7 @@ export const Progress: FunctionComponent<
 
   const stylesInner: React.CSSProperties = {
     width: `${displayPercent}%`,
-    background: color,
+    backgroundColor: color || '#FF0F23',
   }
 
   useEffect(() => {

From 5a2994669b56a5edd66702cd12ba87e8486b6eb7 Mon Sep 17 00:00:00 2001
From: huxiyang <1872591453@qq.com>
Date: Thu, 6 Jun 2024 19:59:46 +0800
Subject: [PATCH 04/16] chore: transfer cell

---
 src/packages/progress/demo.taro.tsx        | 21 +++++----------------
 src/packages/progress/demo.tsx             | 21 +++++----------------
 src/packages/progress/demos/h5/demo1.tsx   |  8 ++++++--
 src/packages/progress/demos/h5/demo2.tsx   | 16 +++++++++-------
 src/packages/progress/demos/h5/demo3.tsx   |  8 ++++++--
 src/packages/progress/demos/h5/demo4.tsx   | 18 ++++++++++--------
 src/packages/progress/demos/h5/demo8.tsx   |  8 ++++++--
 src/packages/progress/demos/taro/demo1.tsx |  8 ++++++--
 src/packages/progress/demos/taro/demo2.tsx | 16 +++++++++-------
 src/packages/progress/demos/taro/demo3.tsx |  8 ++++++--
 src/packages/progress/demos/taro/demo4.tsx | 18 ++++++++++--------
 src/packages/progress/demos/taro/demo8.tsx |  8 ++++++--
 12 files changed, 84 insertions(+), 74 deletions(-)

diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx
index 26777f06e8..7fafa1d2f3 100644
--- a/src/packages/progress/demo.taro.tsx
+++ b/src/packages/progress/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -52,23 +51,15 @@ const ProgressDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.customStyle}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.noShowPercentage}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
           <>
             <View className="h2">{translated.customContent}</View>
-            <Cell>
-              <Demo4 />
-            </Cell>
+            <Demo4 />
           </>
         )}
         <View className="h2">{translated.customSize}</View>
@@ -81,9 +72,7 @@ const ProgressDemo = () => {
         {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
           <>
             <View className="h2">{translated.lazy}</View>
-            <Cell>
-              <Demo8 />
-            </Cell>
+            <Demo8 />
           </>
         )}
       </ScrollView>
diff --git a/src/packages/progress/demo.tsx b/src/packages/progress/demo.tsx
index 373867889a..8742d579f0 100644
--- a/src/packages/progress/demo.tsx
+++ b/src/packages/progress/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import { Cell } from '@/packages/cell/cell'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -48,21 +47,13 @@ const ProgressDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.customStyle}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.noShowPercentage}</h2>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated.customContent}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.customSize}</h2>
         <Demo5 />
         <h2>{translated.statusDisplay}</h2>
@@ -70,9 +61,7 @@ const ProgressDemo = () => {
         <h2>{translated.dynamicChange}</h2>
         <Demo7 />
         <h2>{translated.lazy}</h2>
-        <Cell align="center">
-          <Demo8 />
-        </Cell>
+        <Demo8 />
       </div>
     </>
   )
diff --git a/src/packages/progress/demos/h5/demo1.tsx b/src/packages/progress/demos/h5/demo1.tsx
index da817f698e..9c3617fd48 100644
--- a/src/packages/progress/demos/h5/demo1.tsx
+++ b/src/packages/progress/demos/h5/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  return <Progress percent={30} />
+  return (
+    <Cell>
+      <Progress percent={30} />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/progress/demos/h5/demo2.tsx b/src/packages/progress/demos/h5/demo2.tsx
index 540c554d4b..ef49c6067f 100644
--- a/src/packages/progress/demos/h5/demo2.tsx
+++ b/src/packages/progress/demos/h5/demo2.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Progress, Cell } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Progress
-      percent={30}
-      color="var(--nutui-color-primary)"
-      background="var(--nutui-brand-1)"
-      strokeWidth="15"
-    />
+    <Cell>
+      <Progress
+        percent={30}
+        color="var(--nutui-color-primary)"
+        background="var(--nutui-brand-1)"
+        strokeWidth="15"
+      />
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/progress/demos/h5/demo3.tsx b/src/packages/progress/demos/h5/demo3.tsx
index a1a8ac0101..5d1368ecdf 100644
--- a/src/packages/progress/demos/h5/demo3.tsx
+++ b/src/packages/progress/demos/h5/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <Progress percent={50} showText />
+  return (
+    <Cell>
+      <Progress percent={50} showText />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/progress/demos/h5/demo4.tsx b/src/packages/progress/demos/h5/demo4.tsx
index 376c8040af..393f2ec18b 100644
--- a/src/packages/progress/demos/h5/demo4.tsx
+++ b/src/packages/progress/demos/h5/demo4.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Progress, Image } from '@nutui/nutui-react'
+import { Progress, Image, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Progress percent={60} showText>
-      <Image
-        width="30px"
-        height="30px"
-        src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      />
-    </Progress>
+    <Cell>
+      <Progress percent={60} showText>
+        <Image
+          width="30px"
+          height="30px"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </Progress>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/progress/demos/h5/demo8.tsx b/src/packages/progress/demos/h5/demo8.tsx
index 33ae6c3c4a..6e8af3eaf7 100644
--- a/src/packages/progress/demos/h5/demo8.tsx
+++ b/src/packages/progress/demos/h5/demo8.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo8 = () => {
-  return <Progress percent={30} lazy delay={500} />
+  return (
+    <Cell align="center">
+      <Progress percent={30} lazy delay={500} />
+    </Cell>
+  )
 }
 export default Demo8
diff --git a/src/packages/progress/demos/taro/demo1.tsx b/src/packages/progress/demos/taro/demo1.tsx
index a196ee8d24..a1c0566acf 100644
--- a/src/packages/progress/demos/taro/demo1.tsx
+++ b/src/packages/progress/demos/taro/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
-  return <Progress percent={30} />
+  return (
+    <Cell>
+      <Progress percent={30} />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/progress/demos/taro/demo2.tsx b/src/packages/progress/demos/taro/demo2.tsx
index 55de4b5f8b..2ee73e1ab0 100644
--- a/src/packages/progress/demos/taro/demo2.tsx
+++ b/src/packages/progress/demos/taro/demo2.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <Progress
-      percent={30}
-      color="#FF0F23"
-      background="#FFEAE8"
-      strokeWidth="15"
-    />
+    <Cell>
+      <Progress
+        percent={30}
+        color="#FF0F23"
+        background="#FFEAE8"
+        strokeWidth="15"
+      />
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/progress/demos/taro/demo3.tsx b/src/packages/progress/demos/taro/demo3.tsx
index 444838a990..8b0d6af10a 100644
--- a/src/packages/progress/demos/taro/demo3.tsx
+++ b/src/packages/progress/demos/taro/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <Progress percent={50} showText />
+  return (
+    <Cell>
+      <Progress percent={50} showText />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/progress/demos/taro/demo4.tsx b/src/packages/progress/demos/taro/demo4.tsx
index 4cd774d925..916695d4df 100644
--- a/src/packages/progress/demos/taro/demo4.tsx
+++ b/src/packages/progress/demos/taro/demo4.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Progress, Image } from '@nutui/nutui-react-taro'
+import { Progress, Image, Cell } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   return (
-    <Progress percent={60} showText>
-      <Image
-        width="30px"
-        height="30px"
-        src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      />
-    </Progress>
+    <Cell>
+      <Progress percent={60} showText>
+        <Image
+          width="30px"
+          height="30px"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </Progress>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/progress/demos/taro/demo8.tsx b/src/packages/progress/demos/taro/demo8.tsx
index 652fe66cea..071d65ad3b 100644
--- a/src/packages/progress/demos/taro/demo8.tsx
+++ b/src/packages/progress/demos/taro/demo8.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Progress, Cell } from '@nutui/nutui-react-taro'
 
 const Demo8 = () => {
-  return <Progress percent={30} delay={500} lazy />
+  return (
+    <Cell>
+      <Progress percent={30} delay={500} lazy />
+    </Cell>
+  )
 }
 export default Demo8

From eec8bd92df8df3b8da66d5c5fb5d5f77f8764c4d Mon Sep 17 00:00:00 2001
From: huxiyang <1872591453@qq.com>
Date: Fri, 7 Jun 2024 13:43:45 +0800
Subject: [PATCH 05/16] =?UTF-8?q?chore:=20css=E7=AB=AF=E4=BE=A7=E5=8C=BA?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/progress/demos/taro/demo2.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/packages/progress/demos/taro/demo2.tsx b/src/packages/progress/demos/taro/demo2.tsx
index 2ee73e1ab0..e6c9499643 100644
--- a/src/packages/progress/demos/taro/demo2.tsx
+++ b/src/packages/progress/demos/taro/demo2.tsx
@@ -1,13 +1,22 @@
 import React from 'react'
 import { Cell, Progress } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
 
 const Demo2 = () => {
   return (
     <Cell>
       <Progress
         percent={30}
-        color="#FF0F23"
-        background="#FFEAE8"
+        color={
+          ['HARMONY', 'RN'].includes(Taro.getEnv())
+            ? '#FF0F23'
+            : 'var(--nutui-color-primary)'
+        }
+        background={
+          ['HARMONY', 'RN'].includes(Taro.getEnv())
+            ? '#FFEAE8'
+            : 'var(--nutui-brand-1)'
+        }
         strokeWidth="15"
       />
     </Cell>

From 6f6e4b5df7f66cbba6634128e2a1527b1da3544c Mon Sep 17 00:00:00 2001
From: huxiyang <1872591453@qq.com>
Date: Fri, 7 Jun 2024 13:55:26 +0800
Subject: [PATCH 06/16] chore: delete css

---
 src/packages/progress/progress.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
index 82c6df71c0..bff357dfdf 100644
--- a/src/packages/progress/progress.scss
+++ b/src/packages/progress/progress.scss
@@ -29,7 +29,6 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    // background: $progress-color;
   }
 
   &-text {

From cb8fb0f1e3616e97eab4fad88806338040b77210 Mon Sep 17 00:00:00 2001
From: huxiyang <1872591453@qq.com>
Date: Fri, 7 Jun 2024 17:32:13 +0800
Subject: [PATCH 07/16] chore: delete useless css

---
 src/packages/progress/progress.taro.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index 77c48c2c27..6c065606f1 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -182,13 +182,6 @@ export const Progress: FunctionComponent<
   const computeInnerStyle = () => {
     const style: any = {
       backgroundColor: color || '#ff0f23',
-      height:
-        // eslint-disable-next-line no-nested-ternary
-        Taro.getEnv() === Taro.ENV_TYPE.HARMONY
-          ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18)
-          : strokeWidth
-            ? Number(strokeWidth) + 8
-            : 18,
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',

From 18ec5a246390ccf20dc2a0b213792fdf4f32d2a4 Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Tue, 23 Jul 2024 16:42:17 +0800
Subject: [PATCH 08/16] fix: demos fix

---
 src/config.json                            |  2 +-
 src/packages/progress/demos/taro/demo2.tsx | 14 +++-----------
 src/packages/progress/demos/taro/demo6.tsx |  8 +++-----
 src/packages/progress/demos/taro/demo7.tsx |  5 +++--
 src/packages/progress/progress.harmony.css | 14 +++++++++++---
 src/packages/progress/progress.scss        |  4 ++--
 6 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/config.json b/src/config.json
index f458f6f4ce..8303f9f0ae 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1044,7 +1044,7 @@
           "author": "songsong"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Progress",
           "type": "component",
           "cName": "进度条",
diff --git a/src/packages/progress/demos/taro/demo2.tsx b/src/packages/progress/demos/taro/demo2.tsx
index e6c9499643..eca916fadf 100644
--- a/src/packages/progress/demos/taro/demo2.tsx
+++ b/src/packages/progress/demos/taro/demo2.tsx
@@ -1,22 +1,14 @@
 import React from 'react'
 import { Cell, Progress } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo2 = () => {
   return (
     <Cell>
       <Progress
         percent={30}
-        color={
-          ['HARMONY', 'RN'].includes(Taro.getEnv())
-            ? '#FF0F23'
-            : 'var(--nutui-color-primary)'
-        }
-        background={
-          ['HARMONY', 'RN'].includes(Taro.getEnv())
-            ? '#FFEAE8'
-            : 'var(--nutui-brand-1)'
-        }
+        color={harmonyAndRn() ? '#FF0F23' : 'var(--nutui-color-primary)'}
+        background={harmonyAndRn() ? '#FFEAE8' : 'var(--nutui-brand-1)'}
         strokeWidth="15"
       />
     </Cell>
diff --git a/src/packages/progress/demos/taro/demo6.tsx b/src/packages/progress/demos/taro/demo6.tsx
index 5f0c4bc406..4f2121eb1c 100644
--- a/src/packages/progress/demos/taro/demo6.tsx
+++ b/src/packages/progress/demos/taro/demo6.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress, Cell } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
 import { Checked, Tips } from '@nutui/icons-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo6 = () => {
   return (
@@ -11,15 +11,13 @@ const Demo6 = () => {
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
-        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+        {!harmonyAndRn() && (
           <Checked color="green" style={{ margin: '0 5px' }} />
         )}
       </Cell>
       <Cell align="center">
         <Progress percent={100} color="#AAFF00" strokeWidth="15" />
-        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
-          <Tips color="red" style={{ margin: '0 5px' }} />
-        )}
+        {!harmonyAndRn() && <Tips color="red" style={{ margin: '0 5px' }} />}
       </Cell>
     </>
   )
diff --git a/src/packages/progress/demos/taro/demo7.tsx b/src/packages/progress/demos/taro/demo7.tsx
index a95a02eafc..c2739e27fc 100644
--- a/src/packages/progress/demos/taro/demo7.tsx
+++ b/src/packages/progress/demos/taro/demo7.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { Cell, Button, Toast, Progress } from '@nutui/nutui-react-taro'
 import { View, Text } from '@tarojs/components'
-import Taro, { pxTransform } from '@tarojs/taro'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo7 = () => {
   const [value, setValue] = useState(0)
@@ -9,7 +10,7 @@ const Demo7 = () => {
   const [toastMsg, setToastMsg] = useState('')
   return (
     <Cell.Group>
-      {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+      {!harmonyAndRn() && (
         <Toast
           type="text"
           visible={show}
diff --git a/src/packages/progress/progress.harmony.css b/src/packages/progress/progress.harmony.css
index 5a225c3601..a040a94c88 100644
--- a/src/packages/progress/progress.harmony.css
+++ b/src/packages/progress/progress.harmony.css
@@ -8,7 +8,7 @@
   flex: auto;
   border-radius: 12px;
   height: 10px;
-  background-color: #f5f6fa;
+  background: #f5f6fa;
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,9 +27,13 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: 12px;
-  background-color: #ff0f23;
 }
 .nut-progress-text {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
   transition: all 0.4s;
 }
 .nut-progress-text-inner {
@@ -42,7 +46,6 @@
   border-radius: 5px;
   font-size: 9px;
   line-height: 1;
-  background-color: #ff0f23;
 }
 @keyframes progressActive {
   0% {
@@ -58,3 +61,8 @@
     width: 100%;
   }
 }
+
+[dir=rtl] .nut-progress-text,
+.nut-rtl .nut-progress-text {
+  transform: translate(50%);
+}
\ No newline at end of file
diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
index bff357dfdf..9b04391f72 100644
--- a/src/packages/progress/progress.scss
+++ b/src/packages/progress/progress.scss
@@ -38,7 +38,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    transform: translate(-50%);
+    // transform: translate(-50%);
 
     &-inner {
       display: flex;
@@ -50,7 +50,7 @@
       border-radius: $progress-text-border-radius;
       font-size: $progress-text-font-size;
       line-height: 1;
-      background: $progress-text-background;
+      // background: $progress-text-background;
     }
   }
 

From b855f23208acab1f0371b0870f409ac758bfc204 Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Tue, 23 Jul 2024 16:46:50 +0800
Subject: [PATCH 09/16] fix: component fix

---
 src/packages/progress/progress.taro.tsx | 37 +++++++++++--------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index 6c065606f1..e845439b46 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -1,10 +1,12 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
-import Taro, { PageInstance, pxTransform } from '@tarojs/taro'
+import Taro, { PageInstance } from '@tarojs/taro'
 import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '../configprovider/index.taro'
 import useUuid from '@/utils/use-uuid'
+import { harmony, harmonyAndRn, rn, web } from '@/utils/platform-taro'
 
 export interface ProgressProps extends BasicComponent {
   percent: number
@@ -80,7 +82,7 @@ export const Progress: FunctionComponent<
     }
 
     return () => {
-      lazy && resetObserver(Taro.getEnv())
+      lazy && resetObserver()
       timer && clearTimeout(timer)
     }
   }
@@ -93,8 +95,8 @@ export const Progress: FunctionComponent<
   const webObserver: any = useRef(null)
   const uuid = useUuid()
   const selector = `${classPrefix}-lazy-${uuid}`
-  const resetObserver = (env: string, observer: any = null) => {
-    if (env === 'WEB') {
+  const resetObserver = (observer: any = null) => {
+    if (web()) {
       webObserver.current.disconnect && webObserver.current.disconnect()
     } else {
       observer && observer.disconnect()
@@ -132,12 +134,6 @@ export const Progress: FunctionComponent<
   }
   const handleOtherObserver = () => {
     // 非web环境
-    if (
-      Taro.getEnv() === Taro.ENV_TYPE.HARMONY ||
-      Taro.getEnv() === Taro.ENV_TYPE.RN
-    ) {
-      return
-    }
     let observer: any = null
     if (lazy) {
       observer = Taro.createIntersectionObserver(
@@ -157,24 +153,24 @@ export const Progress: FunctionComponent<
   }
 
   useEffect(() => {
-    if (Taro.getEnv() === 'WEB') {
+    if (web()) {
       handleWebObserver()
-    } else {
+    } else if (!harmonyAndRn()) {
       handleOtherObserver()
     }
   }, [])
   const getTextStyle = () => {
-    const value = Taro.getEnv() === Taro.ENV_TYPE.HARMONY ? '90%' : '100%'
+    const value = harmony() ? '90%' : '100%'
     return rtl ? { right: value } : { left: value }
   }
   const computeRight = () => {
     if (children) {
       return 0
     }
-    if (!['HARMONY', 'RN'].includes(Taro.getEnv())) {
+    if (!harmonyAndRn()) {
       return Math.floor((`${percent}%`.length * 9) / 2)
     }
-    if (Taro.getEnv() === Taro.ENV_TYPE.RN) {
+    if (rn()) {
       return `${percent}%`.length * 9 + 4
     }
     return Math.floor((`${percent}%`.length * 9 + 4) / 2)
@@ -187,11 +183,10 @@ export const Progress: FunctionComponent<
       alignItems: 'center',
       justifyContent: 'center',
     }
-    if (['HARMONY', 'RN'].includes(Taro.getEnv())) {
-      style.width =
-        Taro.getEnv() === Taro.ENV_TYPE.HARMONY
-          ? pxTransform(`${percent}%`.length * 9 + 4)
-          : `${percent}%`.length * 9 + 4
+    if (harmonyAndRn()) {
+      style.width = harmony()
+        ? pxTransform(`${percent}%`.length * 9 + 4)
+        : `${percent}%`.length * 9 + 4
     }
     return style
   }
@@ -221,7 +216,7 @@ export const Progress: FunctionComponent<
                   ...getTextStyle(),
                   height:
                     // eslint-disable-next-line no-nested-ternary
-                    Taro.getEnv() === Taro.ENV_TYPE.HARMONY
+                    harmony()
                       ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18)
                       : strokeWidth
                         ? Number(strokeWidth) + 8

From 7362d7fb574b42358dc815de607656bea044ab50 Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Tue, 23 Jul 2024 17:31:48 +0800
Subject: [PATCH 10/16] fix: review

---
 src/packages/col/col.harmony.css              | 144 ++++++++--------
 src/packages/empty/empty.harmony.css          |   4 +-
 src/packages/grid/grid.harmony.css            |   1 +
 .../hoverbutton/hoverbutton.harmony.css       |  36 ++++
 .../hoverbuttonitem.harmony.css               |   8 +-
 src/packages/image/image.harmony.css          |   6 +-
 src/packages/overlay/overlay.harmony.css      |   5 +
 src/packages/progress/demos/h5/demo6.tsx      |  12 +-
 src/packages/progress/demos/taro/demo4.tsx    |   1 +
 src/packages/progress/demos/taro/demo6.tsx    |  21 ++-
 src/packages/progress/progress.harmony.css    |   4 +
 src/packages/progress/progress.scss           |   5 +-
 src/packages/progress/progress.taro.tsx       |   4 -
 .../resultpage/resultpage.harmony.css         |   3 -
 src/packages/skeleton/skeleton.harmony.css    | 158 ++++++++++--------
 src/packages/swiper/swiper.harmony.css        |   1 +
 src/styles/variables-jmapp.scss               |   2 +-
 src/styles/variables.scss                     |   7 +-
 18 files changed, 255 insertions(+), 167 deletions(-)

diff --git a/src/packages/col/col.harmony.css b/src/packages/col/col.harmony.css
index 299b23745d..e52f1a1b58 100644
--- a/src/packages/col/col.harmony.css
+++ b/src/packages/col/col.harmony.css
@@ -20,337 +20,337 @@
 }
 
 .nut-col-offset-1 {
-  margin-left: 4.1666667%;
+  margin-left: 4.166666666%;
 }
 
 [dir=rtl] .nut-col-offset-1,
 .nut-rtl .nut-col-offset-1 {
   margin-left: 0;
-  margin-right: 4.1666667%;
+  margin-right: 4.166666666%;
 }
 
 .nut-col-1 {
-  width: 4.1666667%;
+  width: 4.166666666%;
 }
 
 .nut-col-offset-2 {
-  margin-left: 8.3333333%;
+  margin-left: 8.333333332%;
 }
 
 [dir=rtl] .nut-col-offset-2,
 .nut-rtl .nut-col-offset-2 {
   margin-left: 0;
-  margin-right: 8.3333333%;
+  margin-right: 8.333333332%;
 }
 
 .nut-col-2 {
-  width: 8.3333333%;
+  width: 8.333333332%;
 }
 
 .nut-col-offset-3 {
-  margin-left: 12.5%;
+  margin-left: 12.499999998%;
 }
 
 [dir=rtl] .nut-col-offset-3,
 .nut-rtl .nut-col-offset-3 {
   margin-left: 0;
-  margin-right: 12.5%;
+  margin-right: 12.499999998%;
 }
 
 .nut-col-3 {
-  width: 12.5%;
+  width: 12.499999998%;
 }
 
 .nut-col-offset-4 {
-  margin-left: 16.6666667%;
+  margin-left: 16.666666664%;
 }
 
 [dir=rtl] .nut-col-offset-4,
 .nut-rtl .nut-col-offset-4 {
   margin-left: 0;
-  margin-right: 16.6666667%;
+  margin-right: 16.666666664%;
 }
 
 .nut-col-4 {
-  width: 16.6666667%;
+  width: 16.666666664%;
 }
 
 .nut-col-offset-5 {
-  margin-left: 20.8333333%;
+  margin-left: 20.83333333%;
 }
 
 [dir=rtl] .nut-col-offset-5,
 .nut-rtl .nut-col-offset-5 {
   margin-left: 0;
-  margin-right: 20.8333333%;
+  margin-right: 20.83333333%;
 }
 
 .nut-col-5 {
-  width: 20.8333333%;
+  width: 20.83333333%;
 }
 
 .nut-col-offset-6 {
-  margin-left: 25%;
+  margin-left: 24.999999996%;
 }
 
 [dir=rtl] .nut-col-offset-6,
 .nut-rtl .nut-col-offset-6 {
   margin-left: 0;
-  margin-right: 25%;
+  margin-right: 24.999999996%;
 }
 
 .nut-col-6 {
-  width: 25%;
+  width: 24.999999996%;
 }
 
 .nut-col-offset-7 {
-  margin-left: 29.1666667%;
+  margin-left: 29.166666662%;
 }
 
 [dir=rtl] .nut-col-offset-7,
 .nut-rtl .nut-col-offset-7 {
   margin-left: 0;
-  margin-right: 29.1666667%;
+  margin-right: 29.166666662%;
 }
 
 .nut-col-7 {
-  width: 29.1666667%;
+  width: 29.166666662%;
 }
 
 .nut-col-offset-8 {
-  margin-left: 33.3333333%;
+  margin-left: 33.333333328%;
 }
 
 [dir=rtl] .nut-col-offset-8,
 .nut-rtl .nut-col-offset-8 {
   margin-left: 0;
-  margin-right: 33.3333333%;
+  margin-right: 33.333333328%;
 }
 
 .nut-col-8 {
-  width: 33.3333333%;
+  width: 33.333333328%;
 }
 
 .nut-col-offset-9 {
-  margin-left: 37.5%;
+  margin-left: 37.499999994%;
 }
 
 [dir=rtl] .nut-col-offset-9,
 .nut-rtl .nut-col-offset-9 {
   margin-left: 0;
-  margin-right: 37.5%;
+  margin-right: 37.499999994%;
 }
 
 .nut-col-9 {
-  width: 37.5%;
+  width: 37.499999994%;
 }
 
 .nut-col-offset-10 {
-  margin-left: 41.6666667%;
+  margin-left: 41.66666666%;
 }
 
 [dir=rtl] .nut-col-offset-10,
 .nut-rtl .nut-col-offset-10 {
   margin-left: 0;
-  margin-right: 41.6666667%;
+  margin-right: 41.66666666%;
 }
 
 .nut-col-10 {
-  width: 41.6666667%;
+  width: 41.66666666%;
 }
 
 .nut-col-offset-11 {
-  margin-left: 45.8333333%;
+  margin-left: 45.833333326%;
 }
 
 [dir=rtl] .nut-col-offset-11,
 .nut-rtl .nut-col-offset-11 {
   margin-left: 0;
-  margin-right: 45.8333333%;
+  margin-right: 45.833333326%;
 }
 
 .nut-col-11 {
-  width: 45.8333333%;
+  width: 45.833333326%;
 }
 
 .nut-col-offset-12 {
-  margin-left: 50%;
+  margin-left: 49.999999992%;
 }
 
 [dir=rtl] .nut-col-offset-12,
 .nut-rtl .nut-col-offset-12 {
   margin-left: 0;
-  margin-right: 50%;
+  margin-right: 49.999999992%;
 }
 
 .nut-col-12 {
-  width: 50%;
+  width: 49.999999992%;
 }
 
 .nut-col-offset-13 {
-  margin-left: 54.1666667%;
+  margin-left: 54.166666658%;
 }
 
 [dir=rtl] .nut-col-offset-13,
 .nut-rtl .nut-col-offset-13 {
   margin-left: 0;
-  margin-right: 54.1666667%;
+  margin-right: 54.166666658%;
 }
 
 .nut-col-13 {
-  width: 54.1666667%;
+  width: 54.166666658%;
 }
 
 .nut-col-offset-14 {
-  margin-left: 58.3333333%;
+  margin-left: 58.333333324%;
 }
 
 [dir=rtl] .nut-col-offset-14,
 .nut-rtl .nut-col-offset-14 {
   margin-left: 0;
-  margin-right: 58.3333333%;
+  margin-right: 58.333333324%;
 }
 
 .nut-col-14 {
-  width: 58.3333333%;
+  width: 58.333333324%;
 }
 
 .nut-col-offset-15 {
-  margin-left: 62.5%;
+  margin-left: 62.49999999%;
 }
 
 [dir=rtl] .nut-col-offset-15,
 .nut-rtl .nut-col-offset-15 {
   margin-left: 0;
-  margin-right: 62.5%;
+  margin-right: 62.49999999%;
 }
 
 .nut-col-15 {
-  width: 62.5%;
+  width: 62.49999999%;
 }
 
 .nut-col-offset-16 {
-  margin-left: 66.6666667%;
+  margin-left: 66.666666656%;
 }
 
 [dir=rtl] .nut-col-offset-16,
 .nut-rtl .nut-col-offset-16 {
   margin-left: 0;
-  margin-right: 66.6666667%;
+  margin-right: 66.666666656%;
 }
 
 .nut-col-16 {
-  width: 66.6666667%;
+  width: 66.666666656%;
 }
 
 .nut-col-offset-17 {
-  margin-left: 70.8333333%;
+  margin-left: 70.833333322%;
 }
 
 [dir=rtl] .nut-col-offset-17,
 .nut-rtl .nut-col-offset-17 {
   margin-left: 0;
-  margin-right: 70.8333333%;
+  margin-right: 70.833333322%;
 }
 
 .nut-col-17 {
-  width: 70.8333333%;
+  width: 70.833333322%;
 }
 
 .nut-col-offset-18 {
-  margin-left: 75%;
+  margin-left: 74.999999988%;
 }
 
 [dir=rtl] .nut-col-offset-18,
 .nut-rtl .nut-col-offset-18 {
   margin-left: 0;
-  margin-right: 75%;
+  margin-right: 74.999999988%;
 }
 
 .nut-col-18 {
-  width: 75%;
+  width: 74.999999988%;
 }
 
 .nut-col-offset-19 {
-  margin-left: 79.1666667%;
+  margin-left: 79.166666654%;
 }
 
 [dir=rtl] .nut-col-offset-19,
 .nut-rtl .nut-col-offset-19 {
   margin-left: 0;
-  margin-right: 79.1666667%;
+  margin-right: 79.166666654%;
 }
 
 .nut-col-19 {
-  width: 79.1666667%;
+  width: 79.166666654%;
 }
 
 .nut-col-offset-20 {
-  margin-left: 83.3333333%;
+  margin-left: 83.33333332%;
 }
 
 [dir=rtl] .nut-col-offset-20,
 .nut-rtl .nut-col-offset-20 {
   margin-left: 0;
-  margin-right: 83.3333333%;
+  margin-right: 83.33333332%;
 }
 
 .nut-col-20 {
-  width: 83.3333333%;
+  width: 83.33333332%;
 }
 
 .nut-col-offset-21 {
-  margin-left: 87.5%;
+  margin-left: 87.499999986%;
 }
 
 [dir=rtl] .nut-col-offset-21,
 .nut-rtl .nut-col-offset-21 {
   margin-left: 0;
-  margin-right: 87.5%;
+  margin-right: 87.499999986%;
 }
 
 .nut-col-21 {
-  width: 87.5%;
+  width: 87.499999986%;
 }
 
 .nut-col-offset-22 {
-  margin-left: 91.6666667%;
+  margin-left: 91.666666652%;
 }
 
 [dir=rtl] .nut-col-offset-22,
 .nut-rtl .nut-col-offset-22 {
   margin-left: 0;
-  margin-right: 91.6666667%;
+  margin-right: 91.666666652%;
 }
 
 .nut-col-22 {
-  width: 91.6666667%;
+  width: 91.666666652%;
 }
 
 .nut-col-offset-23 {
-  margin-left: 95.8333333%;
+  margin-left: 95.833333318%;
 }
 
 [dir=rtl] .nut-col-offset-23,
 .nut-rtl .nut-col-offset-23 {
   margin-left: 0;
-  margin-right: 95.8333333%;
+  margin-right: 95.833333318%;
 }
 
 .nut-col-23 {
-  width: 95.8333333%;
+  width: 95.833333318%;
 }
 
 .nut-col-offset-24 {
-  margin-left: 100%;
+  margin-left: 99.999999984%;
 }
 
 [dir=rtl] .nut-col-offset-24,
 .nut-rtl .nut-col-offset-24 {
   margin-left: 0;
-  margin-right: 100%;
+  margin-right: 99.999999984%;
 }
 
 .nut-col-24 {
-  width: 100%;
+  width: 99.999999984%;
 }
\ No newline at end of file
diff --git a/src/packages/empty/empty.harmony.css b/src/packages/empty/empty.harmony.css
index 36acc0f5b9..ef8d04f968 100644
--- a/src/packages/empty/empty.harmony.css
+++ b/src/packages/empty/empty.harmony.css
@@ -6,7 +6,7 @@
   flex-direction: column;
   justify-content: center;
   padding: 32px 40px;
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .nut-empty-base {
   width: 160px;
@@ -45,6 +45,6 @@
   margin-top: 16px;
 }
 .nut-empty-action {
-  margin-left: 6px;
   margin-right: 6px;
+  margin-left: 6px;
 }
\ No newline at end of file
diff --git a/src/packages/grid/grid.harmony.css b/src/packages/grid/grid.harmony.css
index e4df8e80b5..bb074fa123 100644
--- a/src/packages/grid/grid.harmony.css
+++ b/src/packages/grid/grid.harmony.css
@@ -22,6 +22,7 @@
 }
 .nut-grid-item-content {
   display: flex;
+  box-sizing: border-box;
   flex: 1;
   flex-direction: column;
   width: 100%;
diff --git a/src/packages/hoverbutton/hoverbutton.harmony.css b/src/packages/hoverbutton/hoverbutton.harmony.css
index bd4baa04ca..79f9a4d67a 100644
--- a/src/packages/hoverbutton/hoverbutton.harmony.css
+++ b/src/packages/hoverbutton/hoverbutton.harmony.css
@@ -1,3 +1,39 @@
+.nut-hoverbutton-item-container {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: #ffffff;
+}
+.nut-hoverbutton-item-container:active {
+  background-color: #f5f6fa;
+}
+.nut-hoverbutton-item-container-active {
+  background-color: #f5f6fa;
+}
+.nut-hoverbutton-item-container-harmony {
+  margin-bottom: 16px;
+}
+.nut-hoverbutton-item-container-harmony:last-child {
+  margin-bottom: 0;
+}
+.nut-hoverbutton-item-icon {
+  width: 20px;
+  height: 20px;
+  margin: 9px;
+  color: #1a1a1a;
+  fill: #1a1a1a;
+}
+.nut-hoverbutton-item-icon .nut-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
+  color: #505259;
+  fill: #505259;
+}
+
 .nut-hoverbutton {
   display: flex;
   flex-direction: column;
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css b/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css
index 44bd9c6a8a..108f34d756 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css
@@ -6,10 +6,10 @@
   background-color: #ffffff;
 }
 .nut-hoverbutton-item-container:active {
-  background-color: #f6f6f6;
+  background-color: #f5f6fa;
 }
 .nut-hoverbutton-item-container-active {
-  background-color: #f6f6f6;
+  background-color: #f5f6fa;
 }
 .nut-hoverbutton-item-container-harmony {
   margin-bottom: 16px;
@@ -30,6 +30,6 @@
   height: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: #595959;
-  fill: #595959;
+  color: #505259;
+  fill: #505259;
 }
\ No newline at end of file
diff --git a/src/packages/image/image.harmony.css b/src/packages/image/image.harmony.css
index 86c0301bec..b3e12d4ad7 100644
--- a/src/packages/image/image.harmony.css
+++ b/src/packages/image/image.harmony.css
@@ -2,7 +2,7 @@
   display: block;
   position: relative;
 }
-.nut-image .nut-img {
+.nut-image-default {
   display: block;
   width: 100%;
   height: 100%;
@@ -11,7 +11,7 @@
   border-radius: 50%;
   overflow: hidden;
 }
-.nut-image .nut-img-loading {
+.nut-image-loading {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -24,7 +24,7 @@
   background: #f5f6fa;
   background-size: 100% 100%;
 }
-.nut-image .nut-img-error {
+.nut-image-error {
   width: 100%;
   height: 100%;
   position: absolute;
diff --git a/src/packages/overlay/overlay.harmony.css b/src/packages/overlay/overlay.harmony.css
index 1ee36be032..940e9f9f97 100644
--- a/src/packages/overlay/overlay.harmony.css
+++ b/src/packages/overlay/overlay.harmony.css
@@ -1,5 +1,10 @@
 .nut-overlay {
+  /* #ifdef rn */
   position: absolute;
+  /* #endif */
+  /* #ifndef rn */
+  position: fixed;
+  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
diff --git a/src/packages/progress/demos/h5/demo6.tsx b/src/packages/progress/demos/h5/demo6.tsx
index 51a4f1bc7c..99a4c573b3 100644
--- a/src/packages/progress/demos/h5/demo6.tsx
+++ b/src/packages/progress/demos/h5/demo6.tsx
@@ -6,14 +6,22 @@ const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Progress percent={30} color="blue" animated />
+        <Progress
+          percent={30}
+          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
+          animated
+        />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
         <Checked color="green" style={{ margin: '0 5px' }} />
       </Cell>
       <Cell align="center">
-        <Progress percent={100} color="#AAFF00" strokeWidth="15" />
+        <Progress
+          percent={100}
+          color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
+          strokeWidth="15"
+        />
         <Tips color="red" style={{ margin: '0 5px' }} />
       </Cell>
     </>
diff --git a/src/packages/progress/demos/taro/demo4.tsx b/src/packages/progress/demos/taro/demo4.tsx
index 916695d4df..59449f0f0a 100644
--- a/src/packages/progress/demos/taro/demo4.tsx
+++ b/src/packages/progress/demos/taro/demo4.tsx
@@ -6,6 +6,7 @@ const Demo4 = () => {
     <Cell>
       <Progress percent={60} showText>
         <Image
+          style={{ position: 'relative', right: '10px' }}
           width="30px"
           height="30px"
           src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
diff --git a/src/packages/progress/demos/taro/demo6.tsx b/src/packages/progress/demos/taro/demo6.tsx
index 4f2121eb1c..60ac132b88 100644
--- a/src/packages/progress/demos/taro/demo6.tsx
+++ b/src/packages/progress/demos/taro/demo6.tsx
@@ -7,7 +7,15 @@ const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Progress percent={30} color="blue" animated />
+        <Progress
+          percent={30}
+          color={
+            harmonyAndRn()
+              ? 'blue'
+              : 'linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)'
+          }
+          animated
+        />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
@@ -17,7 +25,16 @@ const Demo6 = () => {
       </Cell>
       <Cell align="center">
         <Progress percent={100} color="#AAFF00" strokeWidth="15" />
-        {!harmonyAndRn() && <Tips color="red" style={{ margin: '0 5px' }} />}
+        {!harmonyAndRn() && (
+          <Tips
+            color={
+              harmonyAndRn()
+                ? 'red'
+                : 'linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)'
+            }
+            style={{ margin: '0 5px' }}
+          />
+        )}
       </Cell>
     </>
   )
diff --git a/src/packages/progress/progress.harmony.css b/src/packages/progress/progress.harmony.css
index a040a94c88..00a5f8da97 100644
--- a/src/packages/progress/progress.harmony.css
+++ b/src/packages/progress/progress.harmony.css
@@ -27,6 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: 12px;
+  background-color: #ff0f23;
 }
 .nut-progress-text {
   display: flex;
@@ -38,6 +39,8 @@
 }
 .nut-progress-text-inner {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
@@ -46,6 +49,7 @@
   border-radius: 5px;
   font-size: 9px;
   line-height: 1;
+  background: #ff0f23;
 }
 @keyframes progressActive {
   0% {
diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
index 9b04391f72..b7d865ad3a 100644
--- a/src/packages/progress/progress.scss
+++ b/src/packages/progress/progress.scss
@@ -29,6 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
+    background-color: $progress-color;
   }
 
   &-text {
@@ -42,6 +43,8 @@
 
     &-inner {
       display: flex;
+      flex-direction: row;
+      justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;
@@ -50,7 +53,7 @@
       border-radius: $progress-text-border-radius;
       font-size: $progress-text-font-size;
       line-height: 1;
-      // background: $progress-text-background;
+      background: $progress-text-background;
     }
   }
 
diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index e845439b46..7a65bc3e15 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -178,10 +178,6 @@ export const Progress: FunctionComponent<
   const computeInnerStyle = () => {
     const style: any = {
       backgroundColor: color || '#ff0f23',
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
     }
     if (harmonyAndRn()) {
       style.width = harmony()
diff --git a/src/packages/resultpage/resultpage.harmony.css b/src/packages/resultpage/resultpage.harmony.css
index 3a7be57829..a627e778bb 100644
--- a/src/packages/resultpage/resultpage.harmony.css
+++ b/src/packages/resultpage/resultpage.harmony.css
@@ -38,7 +38,4 @@
 .nut-resultpage-action {
   margin-left: 6px;
   margin-right: 6px;
-}
-.nut-resultpage-action-button {
-  white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css
index 34bf352a46..4e53472b40 100644
--- a/src/packages/skeleton/skeleton.harmony.css
+++ b/src/packages/skeleton/skeleton.harmony.css
@@ -1,29 +1,8 @@
-.nut-avatar-group {
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  display: inline-block;
-  position: relative;
-  flex: 0 0 auto;
-}
-.nut-avatar-group .nut-avatar {
-  border: 1px solid #fff;
-}
-.nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: -8px;
-}
-
-[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
-.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: 0;
-  margin-right: -8px;
-}
-
 .nut-image {
   display: block;
   position: relative;
 }
-.nut-image .nut-img {
+.nut-image-default {
   display: block;
   width: 100%;
   height: 100%;
@@ -32,7 +11,7 @@
   border-radius: 50%;
   overflow: hidden;
 }
-.nut-image .nut-img-loading {
+.nut-image-loading {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -45,7 +24,7 @@
   background: #f5f6fa;
   background-size: 100% 100%;
 }
-.nut-image .nut-img-error {
+.nut-image-error {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -70,81 +49,124 @@
   right: 0;
 }
 
+.nut-avatar-group {
+  display: flex;
+  flex-direction: row;
+  flex: 0 0 auto;
+}
+.nut-avatar-group-avatar,
+.nut-avatar-group .nut-avatar {
+  border: 1px solid #fff;
+  margin-left: -8px;
+}
+.nut-avatar-group-avatar:not(:first-of-type),
+.nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: -8px;
+}
+
+[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
+.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: 0;
+  margin-right: -8px;
+}
+
 .nut-avatar {
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-  display: inline-block;
   position: relative;
   flex: 0 0 auto;
-  text-align: center;
 }
-.nut-avatar .avatar-img {
-  position: absolute;
+.nut-avatar-round {
+  border-radius: 999px;
+  overflow: hidden;
+}
+.nut-avatar-square {
+  border-radius: 5px;
+}
+.nut-avatar-first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+.nut-avatar-img {
   width: 100%;
   height: 100%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   flex-shrink: 0;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
-.nut-avatar .icon {
+.nut-avatar-icon {
   background-size: 100% 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }
 .nut-avatar .nut-icon-img {
   width: 100%;
   height: 100%;
 }
-.nut-avatar .text {
-  display: inline-block;
+.nut-avatar-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   height: 100%;
-  text-align: center;
-  overflow: hidden;
 }
-
-[dir=rtl] .nut-avatar .avatar-img,
-.nut-rtl .nut-avatar .avatar-img {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
+.nut-avatar-large {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
 }
-[dir=rtl] .nut-avatar .icon,
-.nut-rtl .nut-avatar .icon {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
+.nut-avatar-large-img {
+  width: 60px;
+  height: 60px;
 }
-
-.nut-avatar-large {
+.nut-avatar-large-img-image {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-large-icon {
+  width: 60px;
+  height: 60px;
+}
+.nut-avatar-large .nut-icon-img {
+  width: 100%;
+  height: 100%;
+}
+.nut-avatar-large-text {
   width: 60px;
   height: 60px;
-  line-height: 60px;
 }
-
 .nut-avatar-small {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+}
+.nut-avatar-small-img-image {
+  width: 32px;
+  height: 32px;
+}
+.nut-avatar-small-text {
   width: 32px;
   height: 32px;
-  line-height: 32px;
 }
-
 .nut-avatar-normal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 40px;
   height: 40px;
-  line-height: 40px;
 }
-
-.nut-avatar-round {
-  border-radius: 50%;
-  overflow: hidden;
+.nut-avatar-normal-img-image {
+  width: 40px;
+  height: 40px;
 }
-
-.nut-avatar-square {
-  border-radius: 5px;
+.nut-avatar-normal .nut-icon-img {
+  width: 100%;
+  height: 100%;
+}
+.nut-avatar-normal-text {
+  width: 40px;
+  height: 40px;
 }
 
 .nut-skeleton {
diff --git a/src/packages/swiper/swiper.harmony.css b/src/packages/swiper/swiper.harmony.css
index 7faa11b218..b0609ae6be 100644
--- a/src/packages/swiper/swiper.harmony.css
+++ b/src/packages/swiper/swiper.harmony.css
@@ -4,6 +4,7 @@
   width: auto;
   flex-wrap: nowrap;
   align-items: center;
+  justify-content: center;
 }
 .nut-indicator-dot {
   display: inline-block;
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index ec25df8eea..2410dec893 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -1652,7 +1652,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  $progress-color
+  #ff0f23
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1a5d2002ee..e6c1da6599 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1625,10 +1625,7 @@ $popover-menu-item-padding: var(
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;
-$progress-color: var(
-  --nutui-progress-color,
-  $color-primary-gradient-1
-) !default;
+$progress-color: var(--nutui-progress-color, #ff0f23) !default;
 $progress-background: var(
   --nutui-progress-background,
   $color-background
@@ -1640,7 +1637,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  $progress-color
+  #ff0f23
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;

From 25cc2e962f43ff82ec2f2f9e8bfdbda23374b93e Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Tue, 23 Jul 2024 17:46:22 +0800
Subject: [PATCH 11/16] fix: delete

---
 src/packages/col/col.harmony.css     | 144 +++++++++++++--------------
 src/packages/empty/empty.harmony.css |   4 +-
 2 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/src/packages/col/col.harmony.css b/src/packages/col/col.harmony.css
index e52f1a1b58..299b23745d 100644
--- a/src/packages/col/col.harmony.css
+++ b/src/packages/col/col.harmony.css
@@ -20,337 +20,337 @@
 }
 
 .nut-col-offset-1 {
-  margin-left: 4.166666666%;
+  margin-left: 4.1666667%;
 }
 
 [dir=rtl] .nut-col-offset-1,
 .nut-rtl .nut-col-offset-1 {
   margin-left: 0;
-  margin-right: 4.166666666%;
+  margin-right: 4.1666667%;
 }
 
 .nut-col-1 {
-  width: 4.166666666%;
+  width: 4.1666667%;
 }
 
 .nut-col-offset-2 {
-  margin-left: 8.333333332%;
+  margin-left: 8.3333333%;
 }
 
 [dir=rtl] .nut-col-offset-2,
 .nut-rtl .nut-col-offset-2 {
   margin-left: 0;
-  margin-right: 8.333333332%;
+  margin-right: 8.3333333%;
 }
 
 .nut-col-2 {
-  width: 8.333333332%;
+  width: 8.3333333%;
 }
 
 .nut-col-offset-3 {
-  margin-left: 12.499999998%;
+  margin-left: 12.5%;
 }
 
 [dir=rtl] .nut-col-offset-3,
 .nut-rtl .nut-col-offset-3 {
   margin-left: 0;
-  margin-right: 12.499999998%;
+  margin-right: 12.5%;
 }
 
 .nut-col-3 {
-  width: 12.499999998%;
+  width: 12.5%;
 }
 
 .nut-col-offset-4 {
-  margin-left: 16.666666664%;
+  margin-left: 16.6666667%;
 }
 
 [dir=rtl] .nut-col-offset-4,
 .nut-rtl .nut-col-offset-4 {
   margin-left: 0;
-  margin-right: 16.666666664%;
+  margin-right: 16.6666667%;
 }
 
 .nut-col-4 {
-  width: 16.666666664%;
+  width: 16.6666667%;
 }
 
 .nut-col-offset-5 {
-  margin-left: 20.83333333%;
+  margin-left: 20.8333333%;
 }
 
 [dir=rtl] .nut-col-offset-5,
 .nut-rtl .nut-col-offset-5 {
   margin-left: 0;
-  margin-right: 20.83333333%;
+  margin-right: 20.8333333%;
 }
 
 .nut-col-5 {
-  width: 20.83333333%;
+  width: 20.8333333%;
 }
 
 .nut-col-offset-6 {
-  margin-left: 24.999999996%;
+  margin-left: 25%;
 }
 
 [dir=rtl] .nut-col-offset-6,
 .nut-rtl .nut-col-offset-6 {
   margin-left: 0;
-  margin-right: 24.999999996%;
+  margin-right: 25%;
 }
 
 .nut-col-6 {
-  width: 24.999999996%;
+  width: 25%;
 }
 
 .nut-col-offset-7 {
-  margin-left: 29.166666662%;
+  margin-left: 29.1666667%;
 }
 
 [dir=rtl] .nut-col-offset-7,
 .nut-rtl .nut-col-offset-7 {
   margin-left: 0;
-  margin-right: 29.166666662%;
+  margin-right: 29.1666667%;
 }
 
 .nut-col-7 {
-  width: 29.166666662%;
+  width: 29.1666667%;
 }
 
 .nut-col-offset-8 {
-  margin-left: 33.333333328%;
+  margin-left: 33.3333333%;
 }
 
 [dir=rtl] .nut-col-offset-8,
 .nut-rtl .nut-col-offset-8 {
   margin-left: 0;
-  margin-right: 33.333333328%;
+  margin-right: 33.3333333%;
 }
 
 .nut-col-8 {
-  width: 33.333333328%;
+  width: 33.3333333%;
 }
 
 .nut-col-offset-9 {
-  margin-left: 37.499999994%;
+  margin-left: 37.5%;
 }
 
 [dir=rtl] .nut-col-offset-9,
 .nut-rtl .nut-col-offset-9 {
   margin-left: 0;
-  margin-right: 37.499999994%;
+  margin-right: 37.5%;
 }
 
 .nut-col-9 {
-  width: 37.499999994%;
+  width: 37.5%;
 }
 
 .nut-col-offset-10 {
-  margin-left: 41.66666666%;
+  margin-left: 41.6666667%;
 }
 
 [dir=rtl] .nut-col-offset-10,
 .nut-rtl .nut-col-offset-10 {
   margin-left: 0;
-  margin-right: 41.66666666%;
+  margin-right: 41.6666667%;
 }
 
 .nut-col-10 {
-  width: 41.66666666%;
+  width: 41.6666667%;
 }
 
 .nut-col-offset-11 {
-  margin-left: 45.833333326%;
+  margin-left: 45.8333333%;
 }
 
 [dir=rtl] .nut-col-offset-11,
 .nut-rtl .nut-col-offset-11 {
   margin-left: 0;
-  margin-right: 45.833333326%;
+  margin-right: 45.8333333%;
 }
 
 .nut-col-11 {
-  width: 45.833333326%;
+  width: 45.8333333%;
 }
 
 .nut-col-offset-12 {
-  margin-left: 49.999999992%;
+  margin-left: 50%;
 }
 
 [dir=rtl] .nut-col-offset-12,
 .nut-rtl .nut-col-offset-12 {
   margin-left: 0;
-  margin-right: 49.999999992%;
+  margin-right: 50%;
 }
 
 .nut-col-12 {
-  width: 49.999999992%;
+  width: 50%;
 }
 
 .nut-col-offset-13 {
-  margin-left: 54.166666658%;
+  margin-left: 54.1666667%;
 }
 
 [dir=rtl] .nut-col-offset-13,
 .nut-rtl .nut-col-offset-13 {
   margin-left: 0;
-  margin-right: 54.166666658%;
+  margin-right: 54.1666667%;
 }
 
 .nut-col-13 {
-  width: 54.166666658%;
+  width: 54.1666667%;
 }
 
 .nut-col-offset-14 {
-  margin-left: 58.333333324%;
+  margin-left: 58.3333333%;
 }
 
 [dir=rtl] .nut-col-offset-14,
 .nut-rtl .nut-col-offset-14 {
   margin-left: 0;
-  margin-right: 58.333333324%;
+  margin-right: 58.3333333%;
 }
 
 .nut-col-14 {
-  width: 58.333333324%;
+  width: 58.3333333%;
 }
 
 .nut-col-offset-15 {
-  margin-left: 62.49999999%;
+  margin-left: 62.5%;
 }
 
 [dir=rtl] .nut-col-offset-15,
 .nut-rtl .nut-col-offset-15 {
   margin-left: 0;
-  margin-right: 62.49999999%;
+  margin-right: 62.5%;
 }
 
 .nut-col-15 {
-  width: 62.49999999%;
+  width: 62.5%;
 }
 
 .nut-col-offset-16 {
-  margin-left: 66.666666656%;
+  margin-left: 66.6666667%;
 }
 
 [dir=rtl] .nut-col-offset-16,
 .nut-rtl .nut-col-offset-16 {
   margin-left: 0;
-  margin-right: 66.666666656%;
+  margin-right: 66.6666667%;
 }
 
 .nut-col-16 {
-  width: 66.666666656%;
+  width: 66.6666667%;
 }
 
 .nut-col-offset-17 {
-  margin-left: 70.833333322%;
+  margin-left: 70.8333333%;
 }
 
 [dir=rtl] .nut-col-offset-17,
 .nut-rtl .nut-col-offset-17 {
   margin-left: 0;
-  margin-right: 70.833333322%;
+  margin-right: 70.8333333%;
 }
 
 .nut-col-17 {
-  width: 70.833333322%;
+  width: 70.8333333%;
 }
 
 .nut-col-offset-18 {
-  margin-left: 74.999999988%;
+  margin-left: 75%;
 }
 
 [dir=rtl] .nut-col-offset-18,
 .nut-rtl .nut-col-offset-18 {
   margin-left: 0;
-  margin-right: 74.999999988%;
+  margin-right: 75%;
 }
 
 .nut-col-18 {
-  width: 74.999999988%;
+  width: 75%;
 }
 
 .nut-col-offset-19 {
-  margin-left: 79.166666654%;
+  margin-left: 79.1666667%;
 }
 
 [dir=rtl] .nut-col-offset-19,
 .nut-rtl .nut-col-offset-19 {
   margin-left: 0;
-  margin-right: 79.166666654%;
+  margin-right: 79.1666667%;
 }
 
 .nut-col-19 {
-  width: 79.166666654%;
+  width: 79.1666667%;
 }
 
 .nut-col-offset-20 {
-  margin-left: 83.33333332%;
+  margin-left: 83.3333333%;
 }
 
 [dir=rtl] .nut-col-offset-20,
 .nut-rtl .nut-col-offset-20 {
   margin-left: 0;
-  margin-right: 83.33333332%;
+  margin-right: 83.3333333%;
 }
 
 .nut-col-20 {
-  width: 83.33333332%;
+  width: 83.3333333%;
 }
 
 .nut-col-offset-21 {
-  margin-left: 87.499999986%;
+  margin-left: 87.5%;
 }
 
 [dir=rtl] .nut-col-offset-21,
 .nut-rtl .nut-col-offset-21 {
   margin-left: 0;
-  margin-right: 87.499999986%;
+  margin-right: 87.5%;
 }
 
 .nut-col-21 {
-  width: 87.499999986%;
+  width: 87.5%;
 }
 
 .nut-col-offset-22 {
-  margin-left: 91.666666652%;
+  margin-left: 91.6666667%;
 }
 
 [dir=rtl] .nut-col-offset-22,
 .nut-rtl .nut-col-offset-22 {
   margin-left: 0;
-  margin-right: 91.666666652%;
+  margin-right: 91.6666667%;
 }
 
 .nut-col-22 {
-  width: 91.666666652%;
+  width: 91.6666667%;
 }
 
 .nut-col-offset-23 {
-  margin-left: 95.833333318%;
+  margin-left: 95.8333333%;
 }
 
 [dir=rtl] .nut-col-offset-23,
 .nut-rtl .nut-col-offset-23 {
   margin-left: 0;
-  margin-right: 95.833333318%;
+  margin-right: 95.8333333%;
 }
 
 .nut-col-23 {
-  width: 95.833333318%;
+  width: 95.8333333%;
 }
 
 .nut-col-offset-24 {
-  margin-left: 99.999999984%;
+  margin-left: 100%;
 }
 
 [dir=rtl] .nut-col-offset-24,
 .nut-rtl .nut-col-offset-24 {
   margin-left: 0;
-  margin-right: 99.999999984%;
+  margin-right: 100%;
 }
 
 .nut-col-24 {
-  width: 99.999999984%;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/packages/empty/empty.harmony.css b/src/packages/empty/empty.harmony.css
index ef8d04f968..36acc0f5b9 100644
--- a/src/packages/empty/empty.harmony.css
+++ b/src/packages/empty/empty.harmony.css
@@ -6,7 +6,7 @@
   flex-direction: column;
   justify-content: center;
   padding: 32px 40px;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 .nut-empty-base {
   width: 160px;
@@ -45,6 +45,6 @@
   margin-top: 16px;
 }
 .nut-empty-action {
-  margin-right: 6px;
   margin-left: 6px;
+  margin-right: 6px;
 }
\ No newline at end of file

From cb29213d6ad6af4bd2e92b6454885156e55e06ec Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Tue, 23 Jul 2024 17:48:01 +0800
Subject: [PATCH 12/16] fix: delete

---
 src/packages/grid/grid.harmony.css            |  1 -
 .../hoverbutton/hoverbutton.harmony.css       | 36 -------------------
 .../hoverbuttonitem.harmony.css               |  8 ++---
 3 files changed, 4 insertions(+), 41 deletions(-)

diff --git a/src/packages/grid/grid.harmony.css b/src/packages/grid/grid.harmony.css
index bb074fa123..e4df8e80b5 100644
--- a/src/packages/grid/grid.harmony.css
+++ b/src/packages/grid/grid.harmony.css
@@ -22,7 +22,6 @@
 }
 .nut-grid-item-content {
   display: flex;
-  box-sizing: border-box;
   flex: 1;
   flex-direction: column;
   width: 100%;
diff --git a/src/packages/hoverbutton/hoverbutton.harmony.css b/src/packages/hoverbutton/hoverbutton.harmony.css
index 79f9a4d67a..bd4baa04ca 100644
--- a/src/packages/hoverbutton/hoverbutton.harmony.css
+++ b/src/packages/hoverbutton/hoverbutton.harmony.css
@@ -1,39 +1,3 @@
-.nut-hoverbutton-item-container {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  background-color: #ffffff;
-}
-.nut-hoverbutton-item-container:active {
-  background-color: #f5f6fa;
-}
-.nut-hoverbutton-item-container-active {
-  background-color: #f5f6fa;
-}
-.nut-hoverbutton-item-container-harmony {
-  margin-bottom: 16px;
-}
-.nut-hoverbutton-item-container-harmony:last-child {
-  margin-bottom: 0;
-}
-.nut-hoverbutton-item-icon {
-  width: 20px;
-  height: 20px;
-  margin: 9px;
-  color: #1a1a1a;
-  fill: #1a1a1a;
-}
-.nut-hoverbutton-item-icon .nut-icon {
-  display: block;
-  width: 20px;
-  height: 20px;
-}
-.nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: #505259;
-  fill: #505259;
-}
-
 .nut-hoverbutton {
   display: flex;
   flex-direction: column;
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css b/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css
index 108f34d756..44bd9c6a8a 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.harmony.css
@@ -6,10 +6,10 @@
   background-color: #ffffff;
 }
 .nut-hoverbutton-item-container:active {
-  background-color: #f5f6fa;
+  background-color: #f6f6f6;
 }
 .nut-hoverbutton-item-container-active {
-  background-color: #f5f6fa;
+  background-color: #f6f6f6;
 }
 .nut-hoverbutton-item-container-harmony {
   margin-bottom: 16px;
@@ -30,6 +30,6 @@
   height: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: #505259;
-  fill: #505259;
+  color: #595959;
+  fill: #595959;
 }
\ No newline at end of file

From 7bba50d120bf4e493ef4a4ffa6b2ae4c0d78cc74 Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Tue, 23 Jul 2024 17:50:42 +0800
Subject: [PATCH 13/16] fix: delete

---
 src/packages/image/image.harmony.css          |   6 +-
 src/packages/overlay/overlay.harmony.css      |   5 -
 .../resultpage/resultpage.harmony.css         |   3 +
 src/packages/skeleton/skeleton.harmony.css    | 158 ++++++++----------
 src/packages/swiper/swiper.harmony.css        |   1 -
 5 files changed, 74 insertions(+), 99 deletions(-)

diff --git a/src/packages/image/image.harmony.css b/src/packages/image/image.harmony.css
index b3e12d4ad7..86c0301bec 100644
--- a/src/packages/image/image.harmony.css
+++ b/src/packages/image/image.harmony.css
@@ -2,7 +2,7 @@
   display: block;
   position: relative;
 }
-.nut-image-default {
+.nut-image .nut-img {
   display: block;
   width: 100%;
   height: 100%;
@@ -11,7 +11,7 @@
   border-radius: 50%;
   overflow: hidden;
 }
-.nut-image-loading {
+.nut-image .nut-img-loading {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -24,7 +24,7 @@
   background: #f5f6fa;
   background-size: 100% 100%;
 }
-.nut-image-error {
+.nut-image .nut-img-error {
   width: 100%;
   height: 100%;
   position: absolute;
diff --git a/src/packages/overlay/overlay.harmony.css b/src/packages/overlay/overlay.harmony.css
index 940e9f9f97..1ee36be032 100644
--- a/src/packages/overlay/overlay.harmony.css
+++ b/src/packages/overlay/overlay.harmony.css
@@ -1,10 +1,5 @@
 .nut-overlay {
-  /* #ifdef rn */
   position: absolute;
-  /* #endif */
-  /* #ifndef rn */
-  position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
diff --git a/src/packages/resultpage/resultpage.harmony.css b/src/packages/resultpage/resultpage.harmony.css
index a627e778bb..3a7be57829 100644
--- a/src/packages/resultpage/resultpage.harmony.css
+++ b/src/packages/resultpage/resultpage.harmony.css
@@ -38,4 +38,7 @@
 .nut-resultpage-action {
   margin-left: 6px;
   margin-right: 6px;
+}
+.nut-resultpage-action-button {
+  white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css
index 4e53472b40..34bf352a46 100644
--- a/src/packages/skeleton/skeleton.harmony.css
+++ b/src/packages/skeleton/skeleton.harmony.css
@@ -1,8 +1,29 @@
+.nut-avatar-group {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
+  position: relative;
+  flex: 0 0 auto;
+}
+.nut-avatar-group .nut-avatar {
+  border: 1px solid #fff;
+}
+.nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: -8px;
+}
+
+[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
+.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
+  margin-left: 0;
+  margin-right: -8px;
+}
+
 .nut-image {
   display: block;
   position: relative;
 }
-.nut-image-default {
+.nut-image .nut-img {
   display: block;
   width: 100%;
   height: 100%;
@@ -11,7 +32,7 @@
   border-radius: 50%;
   overflow: hidden;
 }
-.nut-image-loading {
+.nut-image .nut-img-loading {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -24,7 +45,7 @@
   background: #f5f6fa;
   background-size: 100% 100%;
 }
-.nut-image-error {
+.nut-image .nut-img-error {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -49,124 +70,81 @@
   right: 0;
 }
 
-.nut-avatar-group {
-  display: flex;
-  flex-direction: row;
-  flex: 0 0 auto;
-}
-.nut-avatar-group-avatar,
-.nut-avatar-group .nut-avatar {
-  border: 1px solid #fff;
-  margin-left: -8px;
-}
-.nut-avatar-group-avatar:not(:first-of-type),
-.nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: -8px;
-}
-
-[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
-.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: 0;
-  margin-right: -8px;
-}
-
 .nut-avatar {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: inline-block;
   position: relative;
   flex: 0 0 auto;
+  text-align: center;
 }
-.nut-avatar-round {
-  border-radius: 999px;
-  overflow: hidden;
-}
-.nut-avatar-square {
-  border-radius: 5px;
-}
-.nut-avatar-first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-.nut-avatar-img {
+.nut-avatar .avatar-img {
+  position: absolute;
   width: 100%;
   height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   flex-shrink: 0;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
 }
-.nut-avatar-icon {
+.nut-avatar .icon {
   background-size: 100% 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .nut-avatar .nut-icon-img {
   width: 100%;
   height: 100%;
 }
-.nut-avatar-text {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.nut-avatar .text {
+  display: inline-block;
   width: 100%;
   height: 100%;
+  text-align: center;
+  overflow: hidden;
 }
-.nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 60px;
-  height: 60px;
-}
-.nut-avatar-large-img {
-  width: 60px;
-  height: 60px;
-}
-.nut-avatar-large-img-image {
-  width: 60px;
-  height: 60px;
-}
-.nut-avatar-large-icon {
-  width: 60px;
-  height: 60px;
+
+[dir=rtl] .nut-avatar .avatar-img,
+.nut-rtl .nut-avatar .avatar-img {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
+[dir=rtl] .nut-avatar .icon,
+.nut-rtl .nut-avatar .icon {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, -50%);
 }
-.nut-avatar-large-text {
+
+.nut-avatar-large {
   width: 60px;
   height: 60px;
+  line-height: 60px;
 }
+
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-}
-.nut-avatar-small-img-image {
-  width: 32px;
-  height: 32px;
-}
-.nut-avatar-small-text {
   width: 32px;
   height: 32px;
+  line-height: 32px;
 }
+
 .nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 40px;
   height: 40px;
+  line-height: 40px;
 }
-.nut-avatar-normal-img-image {
-  width: 40px;
-  height: 40px;
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
+
+.nut-avatar-round {
+  border-radius: 50%;
+  overflow: hidden;
 }
-.nut-avatar-normal-text {
-  width: 40px;
-  height: 40px;
+
+.nut-avatar-square {
+  border-radius: 5px;
 }
 
 .nut-skeleton {
diff --git a/src/packages/swiper/swiper.harmony.css b/src/packages/swiper/swiper.harmony.css
index b0609ae6be..7faa11b218 100644
--- a/src/packages/swiper/swiper.harmony.css
+++ b/src/packages/swiper/swiper.harmony.css
@@ -4,7 +4,6 @@
   width: auto;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
 }
 .nut-indicator-dot {
   display: inline-block;

From 5f918996039a4a904aa817ce22d0dbdda45f8ec4 Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Tue, 23 Jul 2024 18:59:50 +0800
Subject: [PATCH 14/16] fix: re

---
 src/packages/progress/demo.taro.tsx        | 8 ++++----
 src/packages/progress/demos/taro/demo4.tsx | 3 +--
 src/packages/progress/demos/taro/demo7.tsx | 8 +++-----
 src/packages/progress/progress.taro.tsx    | 2 +-
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx
index 7fafa1d2f3..05faffc8cf 100644
--- a/src/packages/progress/demo.taro.tsx
+++ b/src/packages/progress/demo.taro.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
@@ -11,6 +10,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import { harmonyAndRn, web } from '@/utils/platform-taro'
 
 const ProgressDemo = () => {
   const [translated] = useTranslate({
@@ -49,14 +49,14 @@ const ProgressDemo = () => {
   return (
     <>
       <Header />
-      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+      <ScrollView className={`demo ${web() ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
         <Demo1 />
         <View className="h2">{translated.customStyle}</View>
         <Demo2 />
         <View className="h2">{translated.noShowPercentage}</View>
         <Demo3 />
-        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+        {!harmonyAndRn() && (
           <>
             <View className="h2">{translated.customContent}</View>
             <Demo4 />
@@ -69,7 +69,7 @@ const ProgressDemo = () => {
 
         <View className="h2">{translated.dynamicChange}</View>
         <Demo7 />
-        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+        {!harmonyAndRn() && (
           <>
             <View className="h2">{translated.lazy}</View>
             <Demo8 />
diff --git a/src/packages/progress/demos/taro/demo4.tsx b/src/packages/progress/demos/taro/demo4.tsx
index 59449f0f0a..24d6b7995d 100644
--- a/src/packages/progress/demos/taro/demo4.tsx
+++ b/src/packages/progress/demos/taro/demo4.tsx
@@ -6,10 +6,9 @@ const Demo4 = () => {
     <Cell>
       <Progress percent={60} showText>
         <Image
-          style={{ position: 'relative', right: '10px' }}
           width="30px"
           height="30px"
-          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
         />
       </Progress>
     </Cell>
diff --git a/src/packages/progress/demos/taro/demo7.tsx b/src/packages/progress/demos/taro/demo7.tsx
index c2739e27fc..97d7d58ad4 100644
--- a/src/packages/progress/demos/taro/demo7.tsx
+++ b/src/packages/progress/demos/taro/demo7.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Cell, Button, Toast, Progress } from '@nutui/nutui-react-taro'
-import { View, Text } from '@tarojs/components'
+import { Text } from '@tarojs/components'
 import pxTransform from '@/utils/px-transform'
 import { harmonyAndRn } from '@/utils/platform-taro'
 
@@ -22,10 +22,8 @@ const Demo7 = () => {
       )}
 
       <Cell align="center">
-        <View style={{ width: '90%', marginRight: pxTransform(5) }}>
-          <Progress percent={value} />
-        </View>
-        <Text>{value}%</Text>
+        <Progress percent={value} />
+        <Text style={{ marginLeft: '5px' }}>{value}%</Text>
       </Cell>
       <Cell align="center">
         <Button
diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index 7a65bc3e15..f93da6218a 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -160,7 +160,7 @@ export const Progress: FunctionComponent<
     }
   }, [])
   const getTextStyle = () => {
-    const value = harmony() ? '90%' : '100%'
+    const value = harmony() ? '90%' : '99%'
     return rtl ? { right: value } : { left: value }
   }
   const computeRight = () => {

From 7491fb7500b3c6e92f48628495b7cec6c209834b Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Mon, 12 Aug 2024 18:10:54 +0800
Subject: [PATCH 15/16] =?UTF-8?q?chore:=20=E9=AA=8C=E8=AF=81=E3=80=81?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/harmony/clone-jdharmony.js         | 2 +-
 src/packages/progress/demos/taro/demo7.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/harmony/clone-jdharmony.js b/scripts/harmony/clone-jdharmony.js
index e0b16dc0a4..a5e2fc3f4e 100644
--- a/scripts/harmony/clone-jdharmony.js
+++ b/scripts/harmony/clone-jdharmony.js
@@ -9,7 +9,7 @@ const temp = `${process.cwd()}/packages`
 
 async function cloneJdHarmony() {
   // 填写coding地址
-  const remote = ''
+  const remote = 'git@coding.jd.com:DongDesign/JDHarmony.git'
   const branch = 'master'
   const git = simpleGit({
     baseDir: temp,
diff --git a/src/packages/progress/demos/taro/demo7.tsx b/src/packages/progress/demos/taro/demo7.tsx
index 97d7d58ad4..5d683d408c 100644
--- a/src/packages/progress/demos/taro/demo7.tsx
+++ b/src/packages/progress/demos/taro/demo7.tsx
@@ -23,7 +23,6 @@ const Demo7 = () => {
 
       <Cell align="center">
         <Progress percent={value} />
-        <Text style={{ marginLeft: '5px' }}>{value}%</Text>
       </Cell>
       <Cell align="center">
         <Button
@@ -51,6 +50,7 @@ const Demo7 = () => {
         >
           增加
         </Button>
+        <Text style={{ marginLeft: pxTransform(16) }}>{value}%</Text>
       </Cell>
     </Cell.Group>
   )

From 8a4dd7eca86e5602d7c63ee7a6ce11174f3b7159 Mon Sep 17 00:00:00 2001
From: huxiyang3 <1872591453@qq.com>
Date: Mon, 12 Aug 2024 20:04:23 +0800
Subject: [PATCH 16/16] fix: remove

---
 scripts/harmony/clone-jdharmony.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/harmony/clone-jdharmony.js b/scripts/harmony/clone-jdharmony.js
index a5e2fc3f4e..e0b16dc0a4 100644
--- a/scripts/harmony/clone-jdharmony.js
+++ b/scripts/harmony/clone-jdharmony.js
@@ -9,7 +9,7 @@ const temp = `${process.cwd()}/packages`
 
 async function cloneJdHarmony() {
   // 填写coding地址
-  const remote = 'git@coding.jd.com:DongDesign/JDHarmony.git'
+  const remote = ''
   const branch = 'master'
   const git = simpleGit({
     baseDir: temp,