From e9252310d0e71835e35c62258a1562ac705bdf57 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 27 Dec 2024 11:14:11 +0800
Subject: [PATCH] fix: review

---
 migrate-from-v2.md                          |   8 +-
 src/packages/indicator/demos/h5/demo1.tsx   |   2 +-
 src/packages/indicator/demos/h5/demo4.tsx   |  96 +++++++------
 src/packages/indicator/demos/h5/demo5.tsx   |   2 +-
 src/packages/indicator/demos/taro/demo1.tsx |   2 +-
 src/packages/indicator/demos/taro/demo4.tsx | 152 ++++++++++----------
 src/packages/indicator/demos/taro/demo5.tsx |   2 +-
 src/packages/indicator/indicator.scss       |   7 +-
 8 files changed, 140 insertions(+), 131 deletions(-)

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 6e386b6808..ee879f5b44 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -255,12 +255,8 @@ plugins: [
 
 #### Indicator
 
-- 移除 `block`，暴露自定义节点
-- 移除 `align`，暴露自定义节点
-- `vertical` 重命名为`direction`，默认值为 `horizontal`，可选 `vertical`
-- 移除 `fillZero`，暴露自定义节点
-- `size` 重命名为 `total`
-- 增加非数字展示，并设置为默认状态
+- type 属性的值调整为 `'anchor'` 或 `'slide'`
+- color 属性的值增加 `'white'`
 
 #### Menu
 
diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/src/packages/indicator/demos/h5/demo1.tsx
index 2e7be189d3..5ba63d1e3c 100644
--- a/src/packages/indicator/demos/h5/demo1.tsx
+++ b/src/packages/indicator/demos/h5/demo1.tsx
@@ -13,7 +13,7 @@ const Demo1 = () => {
       <Cell>
         <Indicator total={2} current={0} direction="vertical" />
       </Cell>
-      <Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
         <Indicator total={2} current={1} direction="vertical" color="white" />
       </Cell>
     </>
diff --git a/src/packages/indicator/demos/h5/demo4.tsx b/src/packages/indicator/demos/h5/demo4.tsx
index 2d0309c91e..788f2ef46e 100644
--- a/src/packages/indicator/demos/h5/demo4.tsx
+++ b/src/packages/indicator/demos/h5/demo4.tsx
@@ -3,55 +3,59 @@ import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Cell>
-      <Indicator total={6} current={5} direction="vertical">
-        <div
+    <>
+      <Cell>
+        <Indicator total={6} current={5} direction="vertical">
+          <div
+            style={{
+              display: 'inline-block',
+              width: '14px',
+              height: '14px',
+              lineHeight: '14px',
+              textAlign: 'center',
+              fontSize: '12px',
+              color: '#FFFFFF',
+              border: '1px solid #FFFFFF',
+              borderRadius: '50%',
+              margin: '4px',
+              background: `var(--nutui-color-primary)`,
+              boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+            }}
+          >
+            {5}
+          </div>
+        </Indicator>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
           style={{
-            display: 'inline-block',
-            width: '14px',
-            height: '14px',
-            lineHeight: '14px',
-            textAlign: 'center',
-            fontSize: '12px',
-            color: '#FFFFFF',
-            border: '1px solid #FFFFFF',
-            borderRadius: '50%',
-            margin: '4px',
-            background: `var(--nutui-color-primary)`,
-            boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+            marginLeft: '50px',
           }}
-        >
-          {5}
-        </div>
-      </Indicator>
-      <Indicator
-        total={6}
-        current={2}
-        direction="vertical"
-        style={{
-          marginLeft: '50px',
-        }}
-      />
-      <Indicator
-        total={6}
-        current={2}
-        direction="vertical"
-        color="white"
-        style={{
-          marginLeft: '50px',
-        }}
-      />
+        />
 
-      <Indicator
-        total={6}
-        current={5}
-        direction="vertical"
-        type="slide"
-        style={{
-          marginLeft: '50px',
-        }}
-      />
-    </Cell>
+        <Indicator
+          total={6}
+          current={5}
+          direction="vertical"
+          type="slide"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
+          color="white"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo4
diff --git a/src/packages/indicator/demos/h5/demo5.tsx b/src/packages/indicator/demos/h5/demo5.tsx
index e45943b881..b4595b4fd0 100644
--- a/src/packages/indicator/demos/h5/demo5.tsx
+++ b/src/packages/indicator/demos/h5/demo5.tsx
@@ -4,7 +4,7 @@ import { Cell, Indicator } from '@nutui/nutui-react'
 const Demo5 = () => {
   return (
     <>
-      <Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
         <Indicator total={3} current={0} color="white" />
       </Cell>
     </>
diff --git a/src/packages/indicator/demos/taro/demo1.tsx b/src/packages/indicator/demos/taro/demo1.tsx
index ac60369109..4dfb8e95c0 100644
--- a/src/packages/indicator/demos/taro/demo1.tsx
+++ b/src/packages/indicator/demos/taro/demo1.tsx
@@ -13,7 +13,7 @@ const Demo1 = () => {
       <Cell>
         <Indicator total={2} current={0} direction="vertical" />
       </Cell>
-      <Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
         <Indicator total={2} current={1} direction="vertical" color="white" />
       </Cell>
     </>
diff --git a/src/packages/indicator/demos/taro/demo4.tsx b/src/packages/indicator/demos/taro/demo4.tsx
index 63dd666ce3..250e4f4d85 100644
--- a/src/packages/indicator/demos/taro/demo4.tsx
+++ b/src/packages/indicator/demos/taro/demo4.tsx
@@ -1,85 +1,89 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import { harmonyAndRn } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   return (
-    <Cell>
-      <Indicator total={6} current={5} direction="vertical">
-        <View
-          style={
-            !harmonyAndRn()
-              ? {
-                  display: 'inline-block',
-                  width: '14px',
-                  height: '14px',
-                  lineHeight: '14px',
-                  textAlign: 'center',
-                  fontSize: '12px',
-                  color: '#FFFFFF',
-                  border: '1px solid #FFFFFF',
-                  borderRadius: '50%',
-                  margin: '4px',
-                  backgroundColor: 'var(--nutui-color-primary)',
-                  boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
-                }
-              : {
-                  display: 'inline-block',
-                  width: pxTransform(14),
-                  height: pxTransform(14),
-                  lineHeight: pxTransform(14),
-                  textAlign: 'center',
-                  fontSize: pxTransform(12),
-                  color: '#FFFFFF',
-                  borderWidth: 1,
-                  borderColor: '#FFFFFF',
-                  borderRadius: pxTransform(14),
-                  margin: 4,
-                  backgroundColor: '#ff0f23',
-                  // @ts-ignore
-                  shadowColor: '#ff0f23',
-                  shadowOffset: {
-                    width: 0,
-                    height: 0,
-                  },
-                  shadowOpacity: 1,
-                  shadowRadius: 1,
-                }
-          }
-        >
-          {5}
-        </View>
-      </Indicator>
-      <Indicator
-        total={6}
-        current={2}
-        direction="vertical"
-        style={{
-          marginLeft: 50,
-        }}
-      />
-      <Indicator
-        total={6}
-        current={2}
-        direction="vertical"
-        color="white"
-        style={{
-          marginLeft: '50px',
-        }}
-      />
+    <>
+      <Cell>
+        <Indicator total={6} current={5} direction="vertical">
+          <View
+            style={
+              !harmonyAndRn()
+                ? {
+                    display: 'inline-block',
+                    width: '14px',
+                    height: '14px',
+                    lineHeight: '14px',
+                    textAlign: 'center',
+                    fontSize: '12px',
+                    color: '#FFFFFF',
+                    border: '1px solid #FFFFFF',
+                    borderRadius: '50%',
+                    margin: '4px',
+                    backgroundColor: 'var(--nutui-color-primary)',
+                    boxShadow: `0 0 1px 1px var(--nutui-color-primary)`,
+                  }
+                : {
+                    display: 'inline-block',
+                    width: pxTransform(14),
+                    height: pxTransform(14),
+                    lineHeight: pxTransform(14),
+                    textAlign: 'center',
+                    fontSize: pxTransform(12),
+                    color: '#FFFFFF',
+                    borderWidth: 1,
+                    borderColor: '#FFFFFF',
+                    borderRadius: pxTransform(14),
+                    margin: 4,
+                    backgroundColor: '#ff0f23',
+                    // @ts-ignore
+                    shadowColor: '#ff0f23',
+                    shadowOffset: {
+                      width: 0,
+                      height: 0,
+                    },
+                    shadowOpacity: 1,
+                    shadowRadius: 1,
+                  }
+            }
+          >
+            {5}
+          </View>
+        </Indicator>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
+          style={{
+            marginLeft: 50,
+          }}
+        />
 
-      <Indicator
-        total={6}
-        current={5}
-        direction="vertical"
-        type="slide"
-        style={{
-          marginLeft: '50px',
-        }}
-      />
-    </Cell>
+        <Indicator
+          total={6}
+          current={5}
+          direction="vertical"
+          type="slide"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
+        <Indicator
+          total={6}
+          current={2}
+          direction="vertical"
+          color="white"
+          style={{
+            marginLeft: '50px',
+          }}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo4
diff --git a/src/packages/indicator/demos/taro/demo5.tsx b/src/packages/indicator/demos/taro/demo5.tsx
index eeafe1024f..a7d213f591 100644
--- a/src/packages/indicator/demos/taro/demo5.tsx
+++ b/src/packages/indicator/demos/taro/demo5.tsx
@@ -4,7 +4,7 @@ import { Cell, Indicator } from '@nutui/nutui-react-taro'
 const Demo5 = () => {
   return (
     <>
-      <Cell>
+      <Cell style={{ background: '#C2C4CC' }}>
         <Indicator total={3} current={0} color="white" />
       </Cell>
     </>
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index c00de66a33..6272f82c1b 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -4,7 +4,6 @@
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  //justify-content: center;
 
   &-fixed-width {
     width: 21px;
@@ -116,6 +115,12 @@
 
       &-active {
         opacity: 1;
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+    &-dot {
+      &-active {
+        background: rgba(255, 255, 255, 1);
       }
     }
   }