From ea770d1d685e06d202cc3936606c2f553fa9ed8e Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 12 Nov 2024 17:40:40 +0800
Subject: [PATCH 1/8] feat(v14): indicator adaptation

---
 src/packages/indicator/demos/h5/demo1.tsx | 39 +++++++++-
 src/packages/indicator/indicator.scss     | 95 +++++++++++++++++++----
 src/packages/indicator/indicator.tsx      | 65 +++++++++++++---
 src/styles/variables.scss                 | 14 +++-
 4 files changed, 184 insertions(+), 29 deletions(-)

diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/src/packages/indicator/demos/h5/demo1.tsx
index 0cedc6cd59..203426f23e 100644
--- a/src/packages/indicator/demos/h5/demo1.tsx
+++ b/src/packages/indicator/demos/h5/demo1.tsx
@@ -1,12 +1,47 @@
-import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react'
+import React, { useState } from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo1 = () => {
+  const [current, setCurrent] = useState(0)
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     setCurrent(current + 1 >= 3 ? 0 : current + 1)
+  //   }, 1000)
+  // })
   return (
     <>
       <Cell>
         <Indicator total={3} current={0} />
       </Cell>
+      <Cell>
+        <Indicator total={3} current={current} type="line" />
+      </Cell>
+      <Cell>
+        <Indicator
+          total={3}
+          current={current}
+          type="line"
+          direction="vertical"
+        />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={0} color="white" />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={0} type="line" color="white" />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={0} color="white" direction="vertical" />
+      </Cell>
+      <Cell>
+        <Indicator
+          total={3}
+          current={0}
+          type="line"
+          color="white"
+          direction="vertical"
+        />
+      </Cell>
       <Cell>
         <Indicator total={3} current={1} />
       </Cell>
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index 6b66b4d9a4..569c722358 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -1,19 +1,21 @@
 .nut-indicator {
   display: flex;
-  flex-direction: row;
   width: auto;
+  flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 
-  &-dot {
+  &-dot,
+  &-line {
     display: inline-block;
     vertical-align: middle;
     width: $indicator-dot-size;
     height: $indicator-dot-size;
     border-radius: 50%;
-    background-color: $indicator-dot-color;
+    background-color: $color-border-disabled;
     margin: 0 $indicator-dot-margin;
+    opacity: 0.4;
 
     &:first-child {
       margin-left: 0px;
@@ -22,20 +24,78 @@
     &:last-child {
       margin-right: 0px;
     }
+
+    &-active {
+      width: $indicator-dot-active-size;
+      border-radius: $indicator-border-radius;
+      background: $indicator-color;
+      opacity: 1;
+    }
   }
 
-  &-active {
+  &-line {
     width: $indicator-dot-active-size;
+    margin: 0;
+
     border-radius: $indicator-border-radius;
-    background: $indicator-color;
+    background-color: transparent;
+
+    &-active {
+      transition: transform 0.3s ease-in-out;
+      background: $indicator-color;
+    }
+  }
+}
+
+.nut-indicator-track {
+  position: relative;
+
+  &:after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: $indicator-border-radius;
+    background-color: $color-border-disabled;
+    opacity: 0.4;
+  }
+}
+
+.nut-indicator-white {
+  .nut-indicator {
+    &-dot,
+    &-line {
+      position: relative;
+      box-sizing: content-box;
+      background: rgba(255, 255, 255, 0.4);
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      opacity: 1;
+    }
+
+    &-line {
+      opacity: 0;
+
+      &-active {
+        opacity: 1;
+      }
+    }
   }
 
-  &-vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  &:after {
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(255, 255, 255, 0.4);
+  }
+}
 
+.nut-indicator-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .nut-indicator {
     &-dot {
       margin: $indicator-dot-margin 0;
 
@@ -46,11 +106,20 @@
       &:last-child {
         margin-bottom: 0px;
       }
+
+      &-active {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
+  }
 
-    &-active {
-      width: $indicator-dot-size;
-      height: $indicator-dot-active-size;
+  &.nut-indicator-track {
+    .nut-indicator {
+      &-line {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
   }
 }
diff --git a/src/packages/indicator/indicator.tsx b/src/packages/indicator/indicator.tsx
index 75160d621b..207a61623c 100644
--- a/src/packages/indicator/indicator.tsx
+++ b/src/packages/indicator/indicator.tsx
@@ -1,15 +1,23 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import classNames from 'classnames'
 
+export type IndicatorType = 'dot' | 'line'
+export type IndicatorColor = 'primary' | 'white'
+
 export interface IndicatorProps {
   total: number
   current: number
   direction: string
+  color: IndicatorColor
+  type: IndicatorType
 }
+
 const defaultProps = {
   total: 3,
   current: 0,
   direction: 'horizontal',
+  color: 'primary',
+  type: 'dot',
 } as IndicatorProps
 
 const classPrefix = `nut-indicator`
@@ -17,16 +25,26 @@ const classPrefix = `nut-indicator`
 export const Indicator: FunctionComponent<
   Partial<IndicatorProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
-  const { total, current, children, className, direction, ...rest } = {
+  const {
+    color,
+    type,
+    total,
+    current,
+    children,
+    className,
+    direction,
+    ...rest
+  } = {
     ...defaultProps,
     ...props,
   }
   const classes = classNames({
     [`${classPrefix}-vertical`]: direction === 'vertical',
+    [`${classPrefix}-white`]: color === 'white',
+    [`${classPrefix}-track`]: type === 'line',
   })
-  const classPrefixV =
-    direction === 'vertical' ? `${classPrefix}-vertical` : classPrefix
-  const renderElement = () => {
+
+  const renderDotElement = () => {
     const childs: ReactNode[] = []
     for (let item = 0; item < total; item++) {
       childs.push(
@@ -34,22 +52,49 @@ export const Indicator: FunctionComponent<
           children || (
             <div
               key={item}
-              className={`${classPrefix}-dot ${classPrefix}-active ${classPrefixV}-dot ${classPrefixV}-active`}
+              className={`${classPrefix}-dot ${classPrefix}-dot-active`}
+            />
+          )
+        ) : (
+          <div key={item} className={`${classPrefix}-dot`} />
+        )
+      )
+    }
+    return childs
+  }
+  const renderLineElement = () => {
+    const childs: ReactNode[] = []
+    for (let item = 0; item < total; item++) {
+      childs.push(
+        item === 0 ? (
+          children || (
+            <div
+              key={item}
+              style={{
+                transform: `translateX(${current * 100}%)`,
+              }}
+              className={`${classPrefix}-line ${classPrefix}-line-active`}
             />
           )
         ) : (
-          <div
-            key={item}
-            className={`${classPrefix}-dot ${classPrefixV}-dot`}
-          />
+          <div key={item} className={`${classPrefix}-line`} />
         )
       )
     }
     return childs
   }
+  const renderByType = (type: IndicatorType) => {
+    switch (type) {
+      case 'line':
+        return renderLineElement()
+      default:
+        return renderDotElement()
+    }
+  }
+
   return (
     <div className={classNames(classPrefix, classes, className)} {...rest}>
-      {renderElement()}
+      {renderByType(type)}
     </div>
   )
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1995e15c8b..ae09fcc330 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1799,13 +1799,19 @@ $tabs-tabpane-backgroundColor: var(
 // indicator（✅）
 $indicator-color: var(--nutui-indicator-color, $color-primary) !default;
 $indicator-dot-color: var(--nutui-indicator-dot-color, $color-border) !default;
-$indicator-dot-size: var(--nutui-indicator-dot-size, 4px) !default;
+$indicator-dot-size: var(--nutui-indicator-dot-size, 3px) !default;
 $indicator-dot-active-size: var(
   --nutui-indicator-dot-active-size,
-  8px
+  6px
+) !default;
+$indicator-border-radius: var(
+  --nutui-indicator-border-radius,
+  $radius-xxs
+) !default;
+$indicator-dot-margin: var(
+  --nutui-indicator-dot-margin,
+  $spacing-xxxs
 ) !default;
-$indicator-border-radius: var(--nutui-indicator-border-radius, 2px) !default;
-$indicator-dot-margin: var(--nutui-indicator-dot-margin, 2px) !default;
 
 // menu（✅）
 $menu-scroll-fixed-top: var(--nutui-menu-scroll-fixed-top, 0) !default;

From 68fad76762ee1cdfe96c7b927aa9a3b0fdceaf3c Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Wed, 13 Nov 2024 14:41:44 +0800
Subject: [PATCH 2/8] feat(v14): indicator adaptation

---
 src/config.json                             |  1 +
 src/packages/indicator/demo.taro.tsx        | 14 ++++
 src/packages/indicator/demo.tsx             | 14 ++++
 src/packages/indicator/demos/h5/demo1.tsx   | 43 +-----------
 src/packages/indicator/demos/h5/demo4.tsx   | 22 +++++-
 src/packages/indicator/demos/h5/demo5.tsx   | 13 ++++
 src/packages/indicator/demos/h5/demo6.tsx   | 13 ++++
 src/packages/indicator/demos/taro/demo1.tsx |  8 +--
 src/packages/indicator/demos/taro/demo4.tsx | 20 ++++++
 src/packages/indicator/demos/taro/demo5.tsx | 13 ++++
 src/packages/indicator/demos/taro/demo6.tsx | 13 ++++
 src/packages/indicator/doc.en-US.md         | 26 +++++--
 src/packages/indicator/doc.md               | 32 +++++++--
 src/packages/indicator/doc.taro.md          | 32 +++++++--
 src/packages/indicator/doc.zh-TW.md         | 32 +++++++--
 src/packages/indicator/indicator.scss       |  2 +
 src/packages/indicator/indicator.taro.tsx   | 75 +++++++++++++++++----
 src/packages/indicator/indicator.tsx        | 12 ++--
 18 files changed, 290 insertions(+), 95 deletions(-)
 create mode 100644 src/packages/indicator/demos/h5/demo5.tsx
 create mode 100644 src/packages/indicator/demos/h5/demo6.tsx
 create mode 100644 src/packages/indicator/demos/taro/demo5.tsx
 create mode 100644 src/packages/indicator/demos/taro/demo6.tsx

diff --git a/src/config.json b/src/config.json
index 5d5e1212a0..13ff4b70c6 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1020,6 +1020,7 @@
           "sort": 16,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "liukun"
         },
         {
diff --git a/src/packages/indicator/demo.taro.tsx b/src/packages/indicator/demo.taro.tsx
index ee3bb5a491..184068c77b 100644
--- a/src/packages/indicator/demo.taro.tsx
+++ b/src/packages/indicator/demo.taro.tsx
@@ -7,23 +7,31 @@ import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
     },
     'zh-TW': {
       basic: '基礎用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
     },
     'en-US': {
       basic: 'Basic usage',
+      white: 'White',
+      type: 'Type',
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
@@ -37,6 +45,12 @@ const IndicatorDemo = () => {
         <View className="h2">{translated.basic}</View>
         <Demo1 />
 
+        <View className="h2">{translated.white}</View>
+        <Demo5 />
+
+        <View className="h2">{translated.type}</View>
+        <Demo6 />
+
         <View className="h2">{translated.customNode}</View>
         <Demo2 />
 
diff --git a/src/packages/indicator/demo.tsx b/src/packages/indicator/demo.tsx
index 2943d877a6..a0d1017fb8 100644
--- a/src/packages/indicator/demo.tsx
+++ b/src/packages/indicator/demo.tsx
@@ -4,23 +4,31 @@ import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
 
 const IndicatorDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '竖向展示',
     },
     'zh-TW': {
       basic: '基礎用法',
+      white: '白色',
+      type: '类型',
       customNode: '自定义节点',
       custom: '自定义',
       vertical: '豎向展示',
     },
     'en-US': {
       basic: 'Basic usage',
+      white: 'White',
+      type: 'Type',
       customNode: 'Custom Node',
       custom: 'Custom',
       vertical: 'Vertical display',
@@ -33,6 +41,12 @@ const IndicatorDemo = () => {
         <h2>{translated.basic}</h2>
         <Demo1 />
 
+        <h2>{translated.white}</h2>
+        <Demo5 />
+
+        <h2>{translated.type}</h2>
+        <Demo6 />
+
         <h2>{translated.customNode}</h2>
         <Demo2 />
 
diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/src/packages/indicator/demos/h5/demo1.tsx
index 203426f23e..dcdbe124cd 100644
--- a/src/packages/indicator/demos/h5/demo1.tsx
+++ b/src/packages/indicator/demos/h5/demo1.tsx
@@ -1,53 +1,12 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  const [current, setCurrent] = useState(0)
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     setCurrent(current + 1 >= 3 ? 0 : current + 1)
-  //   }, 1000)
-  // })
   return (
     <>
       <Cell>
         <Indicator total={3} current={0} />
       </Cell>
-      <Cell>
-        <Indicator total={3} current={current} type="line" />
-      </Cell>
-      <Cell>
-        <Indicator
-          total={3}
-          current={current}
-          type="line"
-          direction="vertical"
-        />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={0} color="white" />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={0} type="line" color="white" />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={0} color="white" direction="vertical" />
-      </Cell>
-      <Cell>
-        <Indicator
-          total={3}
-          current={0}
-          type="line"
-          color="white"
-          direction="vertical"
-        />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={1} />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={2} />
-      </Cell>
     </>
   )
 }
diff --git a/src/packages/indicator/demos/h5/demo4.tsx b/src/packages/indicator/demos/h5/demo4.tsx
index 66977d59a2..7f856f5870 100644
--- a/src/packages/indicator/demos/h5/demo4.tsx
+++ b/src/packages/indicator/demos/h5/demo4.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react'
+import { Cell, Indicator } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
@@ -32,6 +32,26 @@ const Demo4 = () => {
           marginLeft: '50px',
         }}
       />
+      <Indicator
+        total={6}
+        current={2}
+        direction="vertical"
+        color="white"
+        style={{
+          marginLeft: '50px',
+        }}
+      />
+
+      <Indicator
+        total={6}
+        current={2}
+        direction="vertical"
+        color="white"
+        type="slide"
+        style={{
+          marginLeft: '50px',
+        }}
+      />
     </Cell>
   )
 }
diff --git a/src/packages/indicator/demos/h5/demo5.tsx b/src/packages/indicator/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..e45943b881
--- /dev/null
+++ b/src/packages/indicator/demos/h5/demo5.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Cell>
+        <Indicator total={3} current={0} color="white" />
+      </Cell>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/indicator/demos/h5/demo6.tsx b/src/packages/indicator/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..2614b05585
--- /dev/null
+++ b/src/packages/indicator/demos/h5/demo6.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <Cell>
+        <Indicator total={3} current={0} type="slide" />
+      </Cell>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/indicator/demos/taro/demo1.tsx b/src/packages/indicator/demos/taro/demo1.tsx
index bcfa4b0d21..54c9bd8d67 100644
--- a/src/packages/indicator/demos/taro/demo1.tsx
+++ b/src/packages/indicator/demos/taro/demo1.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Indicator, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
@@ -7,12 +7,6 @@ const Demo1 = () => {
       <Cell>
         <Indicator total={3} current={0} />
       </Cell>
-      <Cell>
-        <Indicator total={3} current={1} />
-      </Cell>
-      <Cell>
-        <Indicator total={3} current={2} />
-      </Cell>
     </>
   )
 }
diff --git a/src/packages/indicator/demos/taro/demo4.tsx b/src/packages/indicator/demos/taro/demo4.tsx
index 1527d78be1..d723be4ea0 100644
--- a/src/packages/indicator/demos/taro/demo4.tsx
+++ b/src/packages/indicator/demos/taro/demo4.tsx
@@ -60,6 +60,26 @@ const Demo4 = () => {
           marginLeft: 50,
         }}
       />
+      <Indicator
+        total={6}
+        current={2}
+        direction="vertical"
+        color="white"
+        style={{
+          marginLeft: '50px',
+        }}
+      />
+
+      <Indicator
+        total={6}
+        current={2}
+        direction="vertical"
+        color="white"
+        type="slide"
+        style={{
+          marginLeft: '50px',
+        }}
+      />
     </Cell>
   )
 }
diff --git a/src/packages/indicator/demos/taro/demo5.tsx b/src/packages/indicator/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..eeafe1024f
--- /dev/null
+++ b/src/packages/indicator/demos/taro/demo5.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <Cell>
+        <Indicator total={3} current={0} color="white" />
+      </Cell>
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/indicator/demos/taro/demo6.tsx b/src/packages/indicator/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..123c42767e
--- /dev/null
+++ b/src/packages/indicator/demos/taro/demo6.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Cell, Indicator } from '@nutui/nutui-react-taro'
+
+const Demo6 = () => {
+  return (
+    <>
+      <Cell>
+        <Indicator total={3} current={0} type="slide" />
+      </Cell>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/indicator/doc.en-US.md b/src/packages/indicator/doc.en-US.md
index 283cd508be..feb5f3d144 100644
--- a/src/packages/indicator/doc.en-US.md
+++ b/src/packages/indicator/doc.en-US.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### White
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### Type
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### Custom Node
 
 :::demo
@@ -51,6 +67,8 @@ import { Indicator } from '@nutui/nutui-react'
 | current | current step | `number` | `0` |
 | total | step total size | `number` | `3` |
 | direction | display directory,default is horizontal | `horizontal` \| `vertical` | `horizontal` |
+| color | color | `primary` \| `white` | `primary` |
+| type | interactivity Type | `anchor` \| `slide` | `anchor` |
 
 ## Theming
 
@@ -62,7 +80,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-indicator-color | indicator active color | `$color-primary` |
 | \--nutui-indicator-dot-color | indicator default color | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | indicator dot size | `5px` |
-| \--nutui-indicator-dot-active-size | indicator dot active size | `15px` |
-| \--nutui-indicator-border-radius | indicator active border size | `3px` |
-| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `4px` |
+| \--nutui-indicator-dot-size | indicator dot size | `3px` |
+| \--nutui-indicator-dot-active-size | indicator dot active size | `6px` |
+| \--nutui-indicator-border-radius | indicator active border size | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `$spacing-xxxs` |
diff --git a/src/packages/indicator/doc.md b/src/packages/indicator/doc.md
index c255a685b8..16ce2c1dbe 100644
--- a/src/packages/indicator/doc.md
+++ b/src/packages/indicator/doc.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### 白色
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 类型
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 自定义节点
 
 :::demo
@@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| current | 当前步骤 | `number` | `0` |
-| total | 步骤长度 | `number` | `3` |
-| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| current | 当前页 | `number` | `0` |
+| total | 总页数 | `number` | `2` |
+| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| color | 颜色 | `primary` \| `white` | `primary` |
+| type | 交互类型 | `anchor` \| `slide` | `anchor` |
 
 ## 主题定制
 
@@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` |
 | \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
-| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` |
-| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` |
-| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` |
+| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
+| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` |
+| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` |
diff --git a/src/packages/indicator/doc.taro.md b/src/packages/indicator/doc.taro.md
index 46d29ed51e..7b0331f69b 100644
--- a/src/packages/indicator/doc.taro.md
+++ b/src/packages/indicator/doc.taro.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react-taro'
 
 :::
 
+### 白色
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 类型
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 自定义节点
 
 :::demo
@@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react-taro'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| current | 当前步骤 | `number` | `0` |
-| total | 步骤长度 | `number` | `3` |
-| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| current | 当前页 | `number` | `0` |
+| total | 总页数 | `number` | `2` |
+| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| color | 颜色 | `primary` \| `white` | `primary` |
+| type | 交互类型 | `anchor` \| `slide` | `anchor` |
 
 ## 主题定制
 
@@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react-taro'
 | --- | --- | --- |
 | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` |
 | \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
-| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` |
-| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` |
-| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` |
+| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
+| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` |
+| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` |
diff --git a/src/packages/indicator/doc.zh-TW.md b/src/packages/indicator/doc.zh-TW.md
index 65ef6fe486..0d170f68a4 100644
--- a/src/packages/indicator/doc.zh-TW.md
+++ b/src/packages/indicator/doc.zh-TW.md
@@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react'
 
 :::
 
+### 白色
+
+:::demo
+
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
+
+:::
+
+### 类型
+
+:::demo
+
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
+
+:::
+
 ### 自定義節點
 
 :::demo
@@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react'
 
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
-| current | 當前步驟 | `number` | `0` |
-| total | 步驟長度 | `number` | `3` |
-| direction | 展示方向，默認為水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| current | 目前頁 | `number` | `0` |
+| total | 總頁數 | `number` | `2` |
+| direction | 方向，預設為水平方向 | `horizontal` \| `vertical` | `horizontal` |
+| color | 顏色 | `primary` \| `white` | `primary` |
+| type | 互動類型 | `anchor` \| `slide` | `anchor` |
 
 ## 主題定製
 
@@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-indicator-color | 指示器焦點時色值 | `$color-primary` |
 | \--nutui-indicator-dot-color | 指示器默認色值 | `$color-text-disabled` |
-| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` |
-| \--nutui-indicator-dot-active-size | 指示器焦點時尺寸 | `15px` |
-| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `3px` |
-| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `4px` |
+| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` |
+| \--nutui-indicator-dot-active-size | 指示器焦點時尺寸 | `6px` |
+| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `$radius-xxs` |
+| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `$spacing-xxxs` |
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index 569c722358..3cffba6263 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -82,7 +82,9 @@
       }
     }
   }
+}
 
+.nut-indicator-track.nut-indicator-white {
   &:after {
     border: 1px solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
diff --git a/src/packages/indicator/indicator.taro.tsx b/src/packages/indicator/indicator.taro.tsx
index 521e21bfb9..1e56b05a47 100644
--- a/src/packages/indicator/indicator.taro.tsx
+++ b/src/packages/indicator/indicator.taro.tsx
@@ -1,31 +1,51 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import classNames from 'classnames'
-import { View } from '@tarojs/components'
+import { View, ViewProps } from '@tarojs/components'
+
+export type IndicatorType = 'anchor' | 'slide'
+export type IndicatorColor = 'primary' | 'white'
 
 export interface IndicatorProps {
   total: number
   current: number
   direction: string
+  color: IndicatorColor
+  type: IndicatorType
 }
+
 const defaultProps = {
-  total: 3,
+  total: 2,
   current: 0,
   direction: 'horizontal',
+  color: 'primary',
+  type: 'anchor',
 } as IndicatorProps
+
 const classPrefix = `nut-indicator`
+
 export const Indicator: FunctionComponent<
-  Partial<IndicatorProps> & React.HTMLAttributes<HTMLDivElement>
+  Partial<IndicatorProps> & ViewProps
 > = (props) => {
-  const { total, current, children, className, direction, style } = {
+  const {
+    color,
+    type,
+    total,
+    current,
+    children,
+    className,
+    direction,
+    ...rest
+  } = {
     ...defaultProps,
     ...props,
   }
   const classes = classNames({
     [`${classPrefix}-vertical`]: direction === 'vertical',
+    [`${classPrefix}-white`]: color === 'white',
+    [`${classPrefix}-track`]: type === 'slide',
   })
-  const classPrefixV =
-    direction === 'vertical' ? `${classPrefix}-vertical` : classPrefix
-  const renderElement = () => {
+
+  const renderDotElement = () => {
     const childs: ReactNode[] = []
     for (let item = 0; item < total; item++) {
       childs.push(
@@ -33,22 +53,49 @@ export const Indicator: FunctionComponent<
           children || (
             <View
               key={item}
-              className={`${classPrefix}-dot ${classPrefix}-active ${classPrefixV}-dot ${classPrefixV}-active`}
+              className={`${classPrefix}-dot ${classPrefix}-dot-active`}
+            />
+          )
+        ) : (
+          <View key={item} className={`${classPrefix}-dot`} />
+        )
+      )
+    }
+    return childs
+  }
+  const renderLineElement = () => {
+    const childs: ReactNode[] = []
+    for (let item = 0; item < total; item++) {
+      childs.push(
+        item === 0 ? (
+          children || (
+            <View
+              key={item}
+              style={{
+                transform: `translateX(${current * 100}%)`,
+              }}
+              className={`${classPrefix}-line ${classPrefix}-line-active`}
             />
           )
         ) : (
-          <View
-            key={item}
-            className={`${classPrefix}-dot ${classPrefixV}-dot`}
-          />
+          <View key={item} className={`${classPrefix}-line`} />
         )
       )
     }
     return childs
   }
+  const renderByType = (type: IndicatorType) => {
+    switch (type) {
+      case 'slide':
+        return renderLineElement()
+      default:
+        return renderDotElement()
+    }
+  }
+
   return (
-    <View className={classNames(classPrefix, classes, className)} style={style}>
-      {renderElement()}
+    <View className={classNames(classPrefix, classes, className)} {...rest}>
+      {renderByType(type)}
     </View>
   )
 }
diff --git a/src/packages/indicator/indicator.tsx b/src/packages/indicator/indicator.tsx
index 207a61623c..c5a3ac7c93 100644
--- a/src/packages/indicator/indicator.tsx
+++ b/src/packages/indicator/indicator.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import classNames from 'classnames'
 
-export type IndicatorType = 'dot' | 'line'
+export type IndicatorType = 'anchor' | 'slide'
 export type IndicatorColor = 'primary' | 'white'
 
 export interface IndicatorProps {
@@ -13,11 +13,11 @@ export interface IndicatorProps {
 }
 
 const defaultProps = {
-  total: 3,
+  total: 2,
   current: 0,
   direction: 'horizontal',
   color: 'primary',
-  type: 'dot',
+  type: 'anchor',
 } as IndicatorProps
 
 const classPrefix = `nut-indicator`
@@ -41,7 +41,7 @@ export const Indicator: FunctionComponent<
   const classes = classNames({
     [`${classPrefix}-vertical`]: direction === 'vertical',
     [`${classPrefix}-white`]: color === 'white',
-    [`${classPrefix}-track`]: type === 'line',
+    [`${classPrefix}-track`]: type === 'slide',
   })
 
   const renderDotElement = () => {
@@ -71,7 +71,7 @@ export const Indicator: FunctionComponent<
             <div
               key={item}
               style={{
-                transform: `translateX(${current * 100}%)`,
+                transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * 100}%)`,
               }}
               className={`${classPrefix}-line ${classPrefix}-line-active`}
             />
@@ -85,7 +85,7 @@ export const Indicator: FunctionComponent<
   }
   const renderByType = (type: IndicatorType) => {
     switch (type) {
-      case 'line':
+      case 'slide':
         return renderLineElement()
       default:
         return renderDotElement()

From 6cddb6330325e17d3f30617bae6eceda248f9de0 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Fri, 22 Nov 2024 14:36:06 +0800
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E9=99=90=E5=88=B6=E6=9C=80=E5=A4=A7=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/indicator/demos/h5/demo1.tsx   |  9 +++++
 src/packages/indicator/demos/h5/demo4.tsx   |  2 +-
 src/packages/indicator/demos/h5/demo6.tsx   |  5 ++-
 src/packages/indicator/demos/taro/demo1.tsx |  9 +++++
 src/packages/indicator/demos/taro/demo4.tsx |  2 +-
 src/packages/indicator/demos/taro/demo6.tsx |  5 ++-
 src/packages/indicator/indicator.scss       | 39 ++++++++++++++++++-
 src/packages/indicator/indicator.taro.tsx   | 42 +++++++++++----------
 src/packages/indicator/indicator.tsx        | 42 +++++++++++----------
 9 files changed, 110 insertions(+), 45 deletions(-)

diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/src/packages/indicator/demos/h5/demo1.tsx
index dcdbe124cd..2e7be189d3 100644
--- a/src/packages/indicator/demos/h5/demo1.tsx
+++ b/src/packages/indicator/demos/h5/demo1.tsx
@@ -7,6 +7,15 @@ const Demo1 = () => {
       <Cell>
         <Indicator total={3} current={0} />
       </Cell>
+      <Cell>
+        <Indicator total={2} current={0} />
+      </Cell>
+      <Cell>
+        <Indicator total={2} current={0} direction="vertical" />
+      </Cell>
+      <Cell>
+        <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 7f856f5870..ea89362976 100644
--- a/src/packages/indicator/demos/h5/demo4.tsx
+++ b/src/packages/indicator/demos/h5/demo4.tsx
@@ -44,7 +44,7 @@ const Demo4 = () => {
 
       <Indicator
         total={6}
-        current={2}
+        current={5}
         direction="vertical"
         color="white"
         type="slide"
diff --git a/src/packages/indicator/demos/h5/demo6.tsx b/src/packages/indicator/demos/h5/demo6.tsx
index 2614b05585..2fe8b28862 100644
--- a/src/packages/indicator/demos/h5/demo6.tsx
+++ b/src/packages/indicator/demos/h5/demo6.tsx
@@ -5,7 +5,10 @@ const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Indicator total={3} current={0} type="slide" />
+        <Indicator total={3} current={2} type="slide" />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" direction="vertical" />
       </Cell>
     </>
   )
diff --git a/src/packages/indicator/demos/taro/demo1.tsx b/src/packages/indicator/demos/taro/demo1.tsx
index 54c9bd8d67..ac60369109 100644
--- a/src/packages/indicator/demos/taro/demo1.tsx
+++ b/src/packages/indicator/demos/taro/demo1.tsx
@@ -7,6 +7,15 @@ const Demo1 = () => {
       <Cell>
         <Indicator total={3} current={0} />
       </Cell>
+      <Cell>
+        <Indicator total={2} current={0} />
+      </Cell>
+      <Cell>
+        <Indicator total={2} current={0} direction="vertical" />
+      </Cell>
+      <Cell>
+        <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 d723be4ea0..1d9ac45c01 100644
--- a/src/packages/indicator/demos/taro/demo4.tsx
+++ b/src/packages/indicator/demos/taro/demo4.tsx
@@ -72,7 +72,7 @@ const Demo4 = () => {
 
       <Indicator
         total={6}
-        current={2}
+        current={5}
         direction="vertical"
         color="white"
         type="slide"
diff --git a/src/packages/indicator/demos/taro/demo6.tsx b/src/packages/indicator/demos/taro/demo6.tsx
index 123c42767e..7f282ea05c 100644
--- a/src/packages/indicator/demos/taro/demo6.tsx
+++ b/src/packages/indicator/demos/taro/demo6.tsx
@@ -5,7 +5,10 @@ const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Indicator total={3} current={0} type="slide" />
+        <Indicator total={3} current={2} type="slide" />
+      </Cell>
+      <Cell>
+        <Indicator total={3} current={2} type="slide" direction="vertical" />
       </Cell>
     </>
   )
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index 3cffba6263..c00de66a33 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -4,7 +4,11 @@
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
+  //justify-content: center;
+
+  &-fixed-width {
+    width: 21px;
+  }
 
   &-dot,
   &-line {
@@ -33,6 +37,39 @@
     }
   }
 
+  // 固定宽度
+  &-fixed-width {
+    // 两个页码的时候
+    .nut-indicator-dot {
+      width: 12px;
+      border-radius: $indicator-border-radius;
+
+      &-active {
+        width: 6px;
+      }
+    }
+  }
+
+  &-vertical {
+    // 竖向固定高度
+    &.nut-indicator-fixed-width {
+      justify-content: flex-start;
+      height: 21px;
+      width: auto;
+
+      // 竖向两个页码
+      .nut-indicator-dot {
+        width: 3px;
+        height: 12px;
+        border-radius: $indicator-border-radius;
+
+        &-active {
+          height: 6px;
+        }
+      }
+    }
+  }
+
   &-line {
     width: $indicator-dot-active-size;
     margin: 0;
diff --git a/src/packages/indicator/indicator.taro.tsx b/src/packages/indicator/indicator.taro.tsx
index 1e56b05a47..87b192b78f 100644
--- a/src/packages/indicator/indicator.taro.tsx
+++ b/src/packages/indicator/indicator.taro.tsx
@@ -64,25 +64,17 @@ export const Indicator: FunctionComponent<
     return childs
   }
   const renderLineElement = () => {
-    const childs: ReactNode[] = []
-    for (let item = 0; item < total; item++) {
-      childs.push(
-        item === 0 ? (
-          children || (
-            <View
-              key={item}
-              style={{
-                transform: `translateX(${current * 100}%)`,
-              }}
-              className={`${classPrefix}-line ${classPrefix}-line-active`}
-            />
-          )
-        ) : (
-          <View key={item} className={`${classPrefix}-line`} />
-        )
-      )
-    }
-    return childs
+    const trackWidth: number = 21
+    const sliderWidth: number = 6
+    const stride = (trackWidth - sliderWidth) / (total - 1)
+    return (
+      <View
+        style={{
+          transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * stride}px)`,
+        }}
+        className={`${classPrefix}-line ${classPrefix}-line-active`}
+      />
+    )
   }
   const renderByType = (type: IndicatorType) => {
     switch (type) {
@@ -93,8 +85,18 @@ export const Indicator: FunctionComponent<
     }
   }
 
+  function maybeFixedWidth() {
+    if (total === 2 || type === 'slide') {
+      return `${classPrefix}-fixed-width`
+    }
+    return ''
+  }
+
   return (
-    <View className={classNames(classPrefix, classes, className)} {...rest}>
+    <View
+      className={classNames(classPrefix, classes, maybeFixedWidth(), className)}
+      {...rest}
+    >
       {renderByType(type)}
     </View>
   )
diff --git a/src/packages/indicator/indicator.tsx b/src/packages/indicator/indicator.tsx
index c5a3ac7c93..eba34461ca 100644
--- a/src/packages/indicator/indicator.tsx
+++ b/src/packages/indicator/indicator.tsx
@@ -63,25 +63,17 @@ export const Indicator: FunctionComponent<
     return childs
   }
   const renderLineElement = () => {
-    const childs: ReactNode[] = []
-    for (let item = 0; item < total; item++) {
-      childs.push(
-        item === 0 ? (
-          children || (
-            <div
-              key={item}
-              style={{
-                transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * 100}%)`,
-              }}
-              className={`${classPrefix}-line ${classPrefix}-line-active`}
-            />
-          )
-        ) : (
-          <div key={item} className={`${classPrefix}-line`} />
-        )
-      )
-    }
-    return childs
+    const trackWidth: number = 21
+    const sliderWidth: number = 6
+    const stride = (trackWidth - sliderWidth) / (total - 1)
+    return (
+      <div
+        style={{
+          transform: `${direction === 'vertical' ? 'translateY' : 'translateX'}(${current * stride}px)`,
+        }}
+        className={`${classPrefix}-line ${classPrefix}-line-active`}
+      />
+    )
   }
   const renderByType = (type: IndicatorType) => {
     switch (type) {
@@ -92,8 +84,18 @@ export const Indicator: FunctionComponent<
     }
   }
 
+  function maybeFixedWidth() {
+    if (total === 2 || type === 'slide') {
+      return `${classPrefix}-fixed-width`
+    }
+    return ''
+  }
+
   return (
-    <div className={classNames(classPrefix, classes, className)} {...rest}>
+    <div
+      className={classNames(classPrefix, classes, maybeFixedWidth(), className)}
+      {...rest}
+    >
       {renderByType(type)}
     </div>
   )

From a6bd87eb1dc8597c0aeecee6c4f1974274b7b3f7 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Mon, 23 Dec 2024 17:06:01 +0800
Subject: [PATCH 4/8] fix: review

---
 src/config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.json b/src/config.json
index d3b28b3f00..2271019394 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1041,7 +1041,7 @@
           "sort": 16,
           "show": true,
           "taro": true,
-          "v14": true,
+          "v15": true,
           "author": "liukun"
         },
         {

From 991597001943dbc4882507c8d248f385cfdf4aa0 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Mon, 23 Dec 2024 21:09:36 +0800
Subject: [PATCH 5/8] fix: update test

---
 .../__test__/__snapshots__/indicator.spec.tsx.snap          | 6 +++---
 src/packages/indicator/__test__/indicator.spec.tsx          | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap b/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap
index 6aef6f06d8..d2f9346040 100644
--- a/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap
+++ b/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap
@@ -6,13 +6,13 @@ exports[`should match snapshot 1`] = `
     class="nut-indicator"
   >
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
     <div
-      class="nut-indicator-dot nut-indicator-dot"
+      class="nut-indicator-dot"
     />
   </div>
 </DocumentFragment>
diff --git a/src/packages/indicator/__test__/indicator.spec.tsx b/src/packages/indicator/__test__/indicator.spec.tsx
index 341aaef23c..934b651089 100644
--- a/src/packages/indicator/__test__/indicator.spec.tsx
+++ b/src/packages/indicator/__test__/indicator.spec.tsx
@@ -17,7 +17,9 @@ test('should be shown when passing size and current', () => {
     </Cell>
   )
   expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(3)
-  expect(container.querySelectorAll('.nut-indicator-active')).toHaveLength(1)
+  expect(container.querySelectorAll('.nut-indicator-dot-active')).toHaveLength(
+    1
+  )
 })
 
 test('should be shown when custom node', () => {

From 9559885d11a887d3b0c5e5231997d3a3ca10037d Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Tue, 24 Dec 2024 11:20:07 +0800
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=E8=A6=86=E7=9B=96=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/indicator/__test__/indicator.spec.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/packages/indicator/__test__/indicator.spec.tsx b/src/packages/indicator/__test__/indicator.spec.tsx
index 934b651089..b0d76e67e6 100644
--- a/src/packages/indicator/__test__/indicator.spec.tsx
+++ b/src/packages/indicator/__test__/indicator.spec.tsx
@@ -43,3 +43,14 @@ test('should be shown when custom node', () => {
   )
   expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(5)
 })
+
+test('should be shown when slide', () => {
+  const { container } = render(
+    <Cell>
+      <Indicator type="slide" total={6} current={5} />
+    </Cell>
+  )
+  expect(container.querySelectorAll('.nut-indicator-line-active')).toHaveLength(
+    1
+  )
+})

From f30567f2e835177e85b57bc41d32a733d59988c1 Mon Sep 17 00:00:00 2001
From: oasis <suanbanren@foxmail.com>
Date: Thu, 26 Dec 2024 17:53:33 +0800
Subject: [PATCH 7/8] fix: review

---
 src/packages/indicator/demos/h5/demo4.tsx   | 1 -
 src/packages/indicator/demos/taro/demo4.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/packages/indicator/demos/h5/demo4.tsx b/src/packages/indicator/demos/h5/demo4.tsx
index ea89362976..2d0309c91e 100644
--- a/src/packages/indicator/demos/h5/demo4.tsx
+++ b/src/packages/indicator/demos/h5/demo4.tsx
@@ -46,7 +46,6 @@ const Demo4 = () => {
         total={6}
         current={5}
         direction="vertical"
-        color="white"
         type="slide"
         style={{
           marginLeft: '50px',
diff --git a/src/packages/indicator/demos/taro/demo4.tsx b/src/packages/indicator/demos/taro/demo4.tsx
index 1d9ac45c01..63dd666ce3 100644
--- a/src/packages/indicator/demos/taro/demo4.tsx
+++ b/src/packages/indicator/demos/taro/demo4.tsx
@@ -74,7 +74,6 @@ const Demo4 = () => {
         total={6}
         current={5}
         direction="vertical"
-        color="white"
         type="slide"
         style={{
           marginLeft: '50px',

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 8/8] 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);
       }
     }
   }