From aa9ff79695c9d529405590e508ac72535a2c1845 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 4 Jun 2024 13:57:21 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix(countdown):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91=E9=80=82=E9=85=8Dv13?=
 =?UTF-8?q?=E5=92=8C=E5=9B=9B=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/nutui-harmony/build-profile.json5   |  48 ++++---
 src/packages/col/col.scss                    |  26 ++--
 src/packages/countdown/countdown.harmony.css |  55 ++++++-
 src/packages/countdown/countdown.scss        |  32 +++++
 src/packages/countdown/countdown.taro.tsx    | 142 ++++++++++++++-----
 src/packages/countdown/countdown.tsx         |  27 ++--
 src/packages/countdown/demos/h5/demo1.tsx    |  15 +-
 src/packages/countdown/demos/h5/demo8.tsx    |  33 +++--
 src/packages/countdown/demos/taro/demo1.tsx  |  15 +-
 src/packages/countdown/demos/taro/demo3.tsx  |   5 +-
 src/packages/countdown/demos/taro/demo8.tsx  |  25 ++--
 src/packages/countdown/doc.en-US.md          |  18 ++-
 src/packages/countdown/doc.md                |  17 ++-
 src/packages/countdown/doc.taro.md           |  16 ++-
 src/packages/countdown/doc.zh-TW.md          |  16 ++-
 src/styles/variables.scss                    |  40 +++++-
 16 files changed, 397 insertions(+), 133 deletions(-)

diff --git a/packages/nutui-harmony/build-profile.json5 b/packages/nutui-harmony/build-profile.json5
index 6573dfaef6..2327375a1c 100644
--- a/packages/nutui-harmony/build-profile.json5
+++ b/packages/nutui-harmony/build-profile.json5
@@ -1,33 +1,35 @@
 {
-  app: {
-    signingConfigs: [],
-    products: [
+  "app": {
+    "signingConfigs": [],
+    "products": [
       {
-        name: 'default',
-        signingConfig: 'default',
-        compatibleSdkVersion: '4.1.0(11)',
-        runtimeOS: 'HarmonyOS',
-      },
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "4.1.0(11)",
+        "runtimeOS": "HarmonyOS"
+      }
     ],
-    buildModeSet: [
+    "buildModeSet": [
       {
-        name: 'debug',
+        "name": "debug"
       },
       {
-        name: 'release',
-      },
-    ],
+        "name": "release"
+      }
+    ]
   },
-  modules: [
+  "modules": [
     {
-      name: 'default',
-      srcPath: './entry',
-      targets: [
+      "name": "default",
+      "srcPath": "./entry",
+      "targets": [
         {
-          name: 'default',
-          applyToProducts: ['default'],
-        },
-      ],
-    },
-  ],
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
 }
diff --git a/src/packages/col/col.scss b/src/packages/col/col.scss
index cc268b64ee..fe45497598 100644
--- a/src/packages/col/col.scss
+++ b/src/packages/col/col.scss
@@ -24,18 +24,18 @@
 
 // RN 不支持 calc
 // dart-sass: math.div -> round & *
-@for $i from 1 through 24 {
-  .nut-col-offset-#{$i} {
-    margin-left: percentage(round($i * 0.04166666666, 0.000000001));
-  }
+// @for $i from 1 through 24 {
+//   .nut-col-offset-#{$i} {
+//     margin-left: percentage(round($i * 0.04166666666, 0.000000001));
+//   }
 
-  [dir='rtl'] .nut-col-offset-#{$i},
-  .nut-rtl .nut-col-offset-#{$i} {
-    margin-left: 0;
-    margin-right: percentage(round($i * 0.04166666666, 0.000000001));
-  }
+//   [dir='rtl'] .nut-col-offset-#{$i},
+//   .nut-rtl .nut-col-offset-#{$i} {
+//     margin-left: 0;
+//     margin-right: percentage(round($i * 0.04166666666, 0.000000001));
+//   }
 
-  .nut-col-#{$i} {
-    width: percentage(round($i * 0.04166666666, 0.000000001));
-  }
-}
+//   .nut-col-#{$i} {
+//     width: percentage(round($i * 0.04166666666, 0.000000001));
+//   }
+// }
diff --git a/src/packages/countdown/countdown.harmony.css b/src/packages/countdown/countdown.harmony.css
index 39283cd48e..b602707136 100644
--- a/src/packages/countdown/countdown.harmony.css
+++ b/src/packages/countdown/countdown.harmony.css
@@ -1,5 +1,56 @@
 .nut-countdown {
   display: flex;
-  color: #1A1A1A;
-  font-size: 14px;
+  flex-direction: row;
+  align-items: center;
+  color: #ff0f23;
+  font-size: 10px;
+}
+.nut-countdown-number-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-unit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  min-width: 14px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number-primary {
+  min-width: 14px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number {
+  border: 1px solid #ffebf1;
+  background-color: transparent;
+  color: #ff0f23;
+}
+.nut-countdown-number-primary {
+  border: 1px solid #ff0f23;
+  background-color: #ff0f23;
+  color: #FFFFFF;
+}
+.nut-countdown-unit {
+  color: #ff0f23;
 }
\ No newline at end of file
diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss
index 78a68bd85f..0b485af8af 100644
--- a/src/packages/countdown/countdown.scss
+++ b/src/packages/countdown/countdown.scss
@@ -1,5 +1,37 @@
 .nut-countdown {
   display: $countdown-display;
+  flex-direction: row;
+  align-items: center;
   color: $countdown-color;
   font-size: $countdown-font-size;
+  &-number-primary,
+  &-number,
+  &-unit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $countdown-height;
+    font-weight: $coutdown-font-weight;
+    font-size: $countdown-font-size;
+  }
+  &-number,
+  &-number-primary {
+    min-width: $countdown-width;
+    padding: $countdown-number-padding;
+    border-radius: $countdown-number-border-radius;
+    margin: $countdown-number-margin;
+  }
+  &-number {
+    border: 1px solid $countdown-number-border-color;
+    background-color: $countdown-number-background-color;
+    color: $countdown-number-color;
+  }
+  &-number-primary {
+    border: 1px solid $countdown-number-primary-border-color;
+    background-color: $countdown-number-primary-background-color;
+    color: $countdown-number-primary-color;
+  }
+  &-unit {
+    color: $color-primary;
+  }
 }
diff --git a/src/packages/countdown/countdown.taro.tsx b/src/packages/countdown/countdown.taro.tsx
index 624fec5dee..c06b1fd8e9 100644
--- a/src/packages/countdown/countdown.taro.tsx
+++ b/src/packages/countdown/countdown.taro.tsx
@@ -8,11 +8,19 @@ import React, {
 } from 'react'
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
-import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { padZero } from '@/utils/pad-zero'
 
+export interface CountDownTimeProps {
+  d: number
+  h: number
+  m: number
+  s: number
+  ms: number
+}
+export type CountDownType = 'default' | 'primary'
 export interface CountDownProps extends BasicComponent {
+  type: CountDownType
   paused: boolean
   startTime: number
   endTime: number
@@ -31,6 +39,7 @@ export interface CountDownProps extends BasicComponent {
 
 const defaultProps = {
   ...ComponentDefaults,
+  type: 'default',
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
@@ -46,8 +55,8 @@ const InternalCountDown: ForwardRefRenderFunction<
   unknown,
   Partial<CountDownProps>
 > = (props, ref) => {
-  const { locale } = useConfig()
   const {
+    type,
     paused,
     startTime,
     endTime,
@@ -80,6 +89,14 @@ const InternalCountDown: ForwardRefRenderFunction<
     diffTime: 0, // 设置了 startTime 时，与 date.now() 的差异
   })
 
+  // TODO: 后期统一替换
+  const harmonyAndRn = [
+    Taro.ENV_TYPE.RN,
+    Taro.ENV_TYPE.HARMONYHYBRID,
+    Taro.ENV_TYPE.HARMONY,
+    // @ts-ignore
+  ].includes(Taro.getEnv())
+
   // 时间戳转换 或 获取当前时间的时间戳
   const getTimeStamp = (timeStr?: string | number) => {
     if (!timeStr) return Date.now()
@@ -94,14 +111,7 @@ const InternalCountDown: ForwardRefRenderFunction<
       stateRef.current.handleEndTime = Date.now() + Number(remainingTime)
     } else {
       stateRef.current.handleEndTime = endTime
-      if (
-        ![
-          Taro.ENV_TYPE.RN,
-          Taro.ENV_TYPE.HARMONYHYBRID,
-          Taro.ENV_TYPE.HARMONY,
-          // @ts-ignore
-        ].includes(Taro.getEnv())
-      ) {
+      if (!harmonyAndRn) {
         stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
       }
     }
@@ -134,7 +144,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     })
   }
 
-  // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
+  // 将倒计时剩余时间格式化   参数：t时间戳 type custom 自定义类型
   const formatRemainTime = (t: number, type?: string) => {
     const ts = t
     const rest = {
@@ -159,13 +169,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     return type === 'custom' ? rest : parseFormat({ ...rest })
   }
 
-  const parseFormat = (time: {
-    d: number
-    h: number
-    m: number
-    s: number
-    ms: number
-  }) => {
+  const parseFormat = (time: CountDownTimeProps) => {
     const { d } = time
     let { h, m, s, ms } = time
     let formatCache = format
@@ -205,8 +209,16 @@ const InternalCountDown: ForwardRefRenderFunction<
         formatCache = formatCache.replace('SS', msC.slice(0, 1))
       }
     }
+    formatCache = formatCache.replace(
+      /(\d+)/g,
+      type === 'primary'
+        ? `<View class="nut-countdown-number-primary">$1</View>`
+        : `<View class="nut-countdown-number">$1</View>`
+    )
+
     return formatCache
   }
+
   // 暂定
   const pause = () => {
     cancelAnimationFrame(stateRef.current.timer)
@@ -293,25 +305,87 @@ const InternalCountDown: ForwardRefRenderFunction<
     return formatRemainTime(stateRef.current.restTime)
   })()
 
+  const getUnit = (unit: string) => {
+    const formatArr = format.split(/(DD|HH|mm|ss|S)/)
+    const index = formatArr.indexOf(unit)
+    return index > -1 ? formatArr[index + 1] : ':'
+  }
+
+  const renderTimeItem = (
+    formatUnit: string,
+    time: number | string,
+    unit = ''
+  ) => {
+    return (
+      <>
+        {format.includes(formatUnit) ? (
+          <>
+            <View
+              className={`${classPrefix}-number${type === 'primary' ? '-primary' : ''}`}
+            >
+              {padZero(time)}
+            </View>
+            {unit ? (
+              <View className={`${classPrefix}-unit`}>{getUnit(unit)}</View>
+            ) : null}
+          </>
+        ) : null}
+      </>
+    )
+  }
+
+  const renderTaroTime = () => {
+    const formatCache = formatRemainTime(stateRef.current.restTime, 'custom')
+    const { d, h, m, s, ms } = formatCache as CountDownTimeProps
+    const digit = format.match(/S/g)?.length
+    // format可能是DD天HH时mm分SSS秒或者DD天HH时mm分S秒或是DD：HH：mm：ss
+
+    return (
+      <>
+        {renderTimeItem('DD', d, 'DD')}
+        {renderTimeItem('HH', h, 'HH')}
+        {renderTimeItem('mm', m, 'mm')}
+        {renderTimeItem('ss', s)}
+        {(format.includes('S') || getUnit('ss') !== ':') && (
+          <>
+            <View className={`${classPrefix}-unit`}>{getUnit('ss')}</View>
+          </>
+        )}
+        {renderTimeItem(
+          'S',
+          padZero(ms, 3)
+            .toString()
+            .slice(0, digit || 2)
+        )}
+      </>
+    )
+  }
+
   return (
-    <View
-      className={`${classPrefix} ${className}`}
-      style={{ ...style }}
-      {...rest}
-    >
+    <>
       {children || (
-        <View
-          className={`${classPrefix}-block`}
-          // eslint-disable-next-line react/no-danger
-          // TODO:RN和鸿蒙暂时不支持dangerouslySetInnerHTML
-          //   dangerouslySetInnerHTML={{
-          //     __html: `${renderTime}`,
-          //   }}
-        >
-          {renderTime as any}
-        </View>
+        <>
+          {!harmonyAndRn ? (
+            <View
+              className={`${classPrefix} ${className}`}
+              style={{ ...style }}
+              {...rest}
+              dangerouslySetInnerHTML={{
+                __html: `${renderTime}`,
+              }}
+            />
+          ) : (
+            <View
+              className={`${classPrefix} ${className}`}
+              style={{ ...style }}
+              {...rest}
+            >
+              {renderTaroTime()}
+            </View>
+          )}
+        </>
       )}
-    </View>
+    </>
   )
 }
 
diff --git a/src/packages/countdown/countdown.tsx b/src/packages/countdown/countdown.tsx
index c9a4184fa0..28ec1959ca 100644
--- a/src/packages/countdown/countdown.tsx
+++ b/src/packages/countdown/countdown.tsx
@@ -6,11 +6,13 @@ import React, {
   ForwardRefRenderFunction,
   useImperativeHandle,
 } from 'react'
-import { useConfig } from '@/packages/configprovider'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { padZero } from '@/utils/pad-zero'
 
+export type CountDownType = 'default' | 'primary'
+
 export interface CountDownProps extends BasicComponent {
+  type: CountDownType
   paused: boolean
   startTime: number
   endTime: number
@@ -29,6 +31,7 @@ export interface CountDownProps extends BasicComponent {
 
 const defaultProps = {
   ...ComponentDefaults,
+  type: 'default',
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
@@ -44,8 +47,8 @@ const InternalCountDown: ForwardRefRenderFunction<
   unknown,
   Partial<CountDownProps>
 > = (props, ref) => {
-  const { locale } = useConfig()
   const {
+    type,
     paused,
     startTime,
     endTime,
@@ -194,6 +197,13 @@ const InternalCountDown: ForwardRefRenderFunction<
         formatCache = formatCache.replace('SS', msC.slice(0, 1))
       }
     }
+    formatCache = formatCache.replace(
+      /(\d+)/g,
+      type === 'primary'
+        ? `<span class="nut-countdown-number-primary">$1</span>`
+        : `<span class="nut-countdown-number">$1</span>`
+    )
+
     return formatCache
   }
 
@@ -284,21 +294,18 @@ const InternalCountDown: ForwardRefRenderFunction<
   })()
 
   return (
-    <div
-      className={`${classPrefix} ${className}`}
-      style={{ ...style }}
-      {...rest}
-    >
+    <>
       {children || (
         <div
-          className={`${classPrefix}-block`}
-          // eslint-disable-next-line react/no-danger
+          className={`${classPrefix} ${className}`}
+          style={{ ...style }}
+          {...rest}
           dangerouslySetInnerHTML={{
             __html: `${renderTime}`,
           }}
         />
       )}
-    </div>
+    </>
   )
 }
 
diff --git a/src/packages/countdown/demos/h5/demo1.tsx b/src/packages/countdown/demos/h5/demo1.tsx
index 48ab03b0a1..2b216cb815 100644
--- a/src/packages/countdown/demos/h5/demo1.tsx
+++ b/src/packages/countdown/demos/h5/demo1.tsx
@@ -9,9 +9,18 @@ const Demo1 = () => {
     console.log('countdown: ended.')
   }
   return (
-    <Cell>
-      <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
-    </Cell>
+    <>
+      <Cell>
+        <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="primary"
+          onEnd={onEnd}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo1
diff --git a/src/packages/countdown/demos/h5/demo8.tsx b/src/packages/countdown/demos/h5/demo8.tsx
index 271ff4bbd0..642b201a77 100644
--- a/src/packages/countdown/demos/h5/demo8.tsx
+++ b/src/packages/countdown/demos/h5/demo8.tsx
@@ -7,14 +7,14 @@ const partItemStyle = {
   alignItems: 'center',
   justifyContent: 'center',
   width: '20px',
-  height: '25px',
-  background: '#e8220e',
+  height: '20px',
+  background: '#fa2c19',
   color: '#fff',
-  fontSize: '14px',
-  borderRadius: '6px',
+  fontSize: '12px',
+  borderRadius: '4px',
 }
 const partItemSymbolStyle = {
-  margin: '0 5px',
+  margin: '0 2px',
 }
 const Demo8 = () => {
   const onUpdate = (v: any) => {
@@ -32,18 +32,17 @@ const Demo8 = () => {
 
   return (
     <Cell>
-      <span>
-        <CountDown endTime={stateRef.current.endTime} onUpdate={onUpdate}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div style={partItemSymbolStyle}>{resetTime.d}天</div>
-            <div style={partItemStyle}>{resetTime.h}</div>
-            <span style={partItemSymbolStyle}>:</span>
-            <div style={partItemStyle}>{resetTime.m}</div>
-            <span style={partItemSymbolStyle}>:</span>
-            <div style={partItemStyle}>{resetTime.s}</div>
-          </div>
-        </CountDown>
-      </span>
+      <CountDown endTime={stateRef.current.endTime} onUpdate={onUpdate}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={partItemStyle}>{resetTime.d}</div>
+          <span style={partItemSymbolStyle}>天</span>
+          <div style={partItemStyle}>{resetTime.h}</div>
+          <span style={partItemSymbolStyle}>:</span>
+          <div style={partItemStyle}>{resetTime.m}</div>
+          <span style={partItemSymbolStyle}>:</span>
+          <div style={partItemStyle}>{resetTime.s}</div>
+        </div>
+      </CountDown>
     </Cell>
   )
 }
diff --git a/src/packages/countdown/demos/taro/demo1.tsx b/src/packages/countdown/demos/taro/demo1.tsx
index 7567da0b0e..8d1e389c29 100644
--- a/src/packages/countdown/demos/taro/demo1.tsx
+++ b/src/packages/countdown/demos/taro/demo1.tsx
@@ -9,9 +9,18 @@ const Demo1 = () => {
     console.log('countdown: ended.')
   }
   return (
-    <Cell>
-      <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
-    </Cell>
+    <>
+      <Cell>
+        <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="primary"
+          onEnd={onEnd}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo1
diff --git a/src/packages/countdown/demos/taro/demo3.tsx b/src/packages/countdown/demos/taro/demo3.tsx
index 9488cf5530..381268fbfd 100644
--- a/src/packages/countdown/demos/taro/demo3.tsx
+++ b/src/packages/countdown/demos/taro/demo3.tsx
@@ -7,10 +7,7 @@ const Demo3 = () => {
   })
   return (
     <Cell>
-      <CountDown
-        endTime={stateRef.current.endTime}
-        format="DD 天 HH 时 mm 分 ss 秒"
-      />
+      <CountDown endTime={stateRef.current.endTime} format="DD天HH时mm分ss秒" />
     </Cell>
   )
 }
diff --git a/src/packages/countdown/demos/taro/demo8.tsx b/src/packages/countdown/demos/taro/demo8.tsx
index 67edac6dc3..a8b77375fb 100644
--- a/src/packages/countdown/demos/taro/demo8.tsx
+++ b/src/packages/countdown/demos/taro/demo8.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react'
 import { Cell, CountDown } from '@nutui/nutui-react-taro'
-import { View, Text } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import Taro, { pxTransform } from '@tarojs/taro'
 import '../../demo.scss'
 
@@ -12,26 +12,26 @@ const partItemStyle = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '#e8220e',
+  backgroundColor: '#fa2c19',
   color: '#fff',
   ...(HARMONY
     ? {
         width: pxTransform(20),
-        height: pxTransform(25),
-        fontSize: pxTransform(14),
-        borderRadius: pxTransform(6),
+        height: pxTransform(20),
+        fontSize: pxTransform(12),
+        borderRadius: pxTransform(4),
       }
     : {
         width: 20,
-        height: 25,
-        fontSize: 14,
-        borderRadius: 6,
+        height: 20,
+        fontSize: 12,
+        borderRadius: 4,
       }),
 }
 const partItemSymbolStyle = HARMONY
   ? {
-      marginLeft: pxTransform(5),
-      marginRight: pxTransform(5),
+      marginLeft: pxTransform(2),
+      marginRight: pxTransform(2),
     }
   : {
       marginLeft: 5,
@@ -61,9 +61,8 @@ const Demo8 = () => {
             alignItems: 'center',
           }}
         >
-          <View style={partItemSymbolStyle}>
-            <Text>{resetTime.d}天</Text>
-          </View>
+          <View style={partItemStyle}>{resetTime.d}</View>
+          <View style={partItemSymbolStyle}>天</View>
           <View style={partItemStyle}>{resetTime.h}</View>
           <View style={partItemSymbolStyle}>:</View>
           <View style={partItemStyle}>{resetTime.m}</View>
diff --git a/src/packages/countdown/doc.en-US.md b/src/packages/countdown/doc.en-US.md
index 8bb44e9abc..22730a5861 100644
--- a/src/packages/countdown/doc.en-US.md
+++ b/src/packages/countdown/doc.en-US.md
@@ -133,6 +133,18 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-countdown-display | display mode of countdown | `flex` |
-| \--nutui-countdown-color | Countdown text color | `$color-title` |
-| \--nutui-countdown-font-size | The font size of the countdown | `14px` |
\ No newline at end of file
+| \--nutui-countdown-display | 倒计时的布局方式 | `flex` |
+| \--nutui-countdown-color | Countdown text color | `$color-primary` |
+| \--nutui-countdown-font-size | Countdown font size | `10px` |
+| \--nutui-countdown-font-weight | Countdown font weight | `400` |
+| \--nutui-countdown-width | Time area width of the countdown | `14px` |
+| \--nutui-countdown-height | Time area height of the countdown | `14px` |
+| \--nutui-countdown-number-padding | Countdown time area padding | `0 1px` |
+| \--nutui-countdown-number-margin | Countdown time area margin | `0 2px` |
+| \countdown-number-border-radius | Countdown time area border radius | `2px` |
+| \--nutui-countdown-color | Countdown time area text color | `$color-primary-light` |
+| \--nutui-countdown-background-color | Countdown time area background color | `$color-primary` |
+| \--nutui-countdown-border-color | Countdown time area border color color | `$color-primary` |
+| \--nutui-countdown-primary-color | When type is primary, the text color of the countdown time area | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | When type is primary, the background color of the countdown time area | `$color-primary` |
+| \--nutui-countdown-primary-border-color | When type is primary, the border color of the countdown time area is the color | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/countdown/doc.md b/src/packages/countdown/doc.md
index c0336e7be0..f1dc98064e 100644
--- a/src/packages/countdown/doc.md
+++ b/src/packages/countdown/doc.md
@@ -92,6 +92,7 @@ import { CountDown } from '@nutui/nutui-react'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| type| 展示类型 | `default`\|`primary` | `default` |
 | startTime | 开始时间 | `number` | `Date.now()` |
 | endTime | 结束时间 | `number` | `Date.now()` |
 | remainingTime | 剩余时间，单位是毫秒 | `number` | `0` |
@@ -135,5 +136,17 @@ import { CountDown } from '@nutui/nutui-react'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-countdown-display | 倒计时的布局方式 | `flex` |
-| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-title` |
-| \--nutui-countdown-font-size | 倒计时的字体大小 | `14px` |
\ No newline at end of file
+| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` |
+| \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` |
+| \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` |
+| \--nutui-countdown-width | 倒计时的时间区域宽度 | `14px` |
+| \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
+| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
+| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
+| \countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
+| \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light` |
+| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` |
+| \--nutui-countdown-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | type为`primary`时，倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-primary-border-color | type为`primary`时，倒计时的时间区域的边框颜色颜色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/countdown/doc.taro.md b/src/packages/countdown/doc.taro.md
index 6c0924fd88..4423c727ca 100644
--- a/src/packages/countdown/doc.taro.md
+++ b/src/packages/countdown/doc.taro.md
@@ -135,5 +135,17 @@ import { CountDown } from '@nutui/nutui-react-taro'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-countdown-display | 倒计时的布局方式 | `flex` |
-| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-title` |
-| \--nutui-countdown-font-size | 倒计时的字体大小 | `14px` |
\ No newline at end of file
+| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` |
+| \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` |
+| \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` |
+| \--nutui-countdown-width | 倒计时的时间区域宽度 | `14px` |
+| \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
+| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
+| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
+| \countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
+| \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light` |
+| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` |
+| \--nutui-countdown-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | type为`primary`时，倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-primary-border-color | type为`primary`时，倒计时的时间区域的边框颜色颜色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/countdown/doc.zh-TW.md b/src/packages/countdown/doc.zh-TW.md
index 45e0176f31..a321a06b7b 100644
--- a/src/packages/countdown/doc.zh-TW.md
+++ b/src/packages/countdown/doc.zh-TW.md
@@ -135,5 +135,17 @@ import { CountDown } from '@nutui/nutui-react'
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-countdown-display | 倒計時的布局方式 | `flex` |
-| \--nutui-countdown-color | 倒計時的文字顏色 | `$color-title` |
-| \--nutui-countdown-font-size | 倒計時的字體大小 | `14px` |
\ No newline at end of file
+| \--nutui-countdown-color | 倒計時的文字顔色 | `$color-primary` |
+| \--nutui-countdown-font-size | 倒計時的字體大小 | `10px` |
+| \--nutui-countdown-font-weight | 倒計時的字體粗細 | `400` |
+| \--nutui-countdown-width | 倒計時的時間區域寬度 | `14px` |
+| \--nutui-countdown-height | 倒計時的時間區域高度 | `14px` |
+| \--nutui-countdown-number-padding | 倒計時的時間區域padding | `0 1px` |
+| \--nutui-countdown-number-margin | 倒計時的時間區域margin | `0 2px` |
+| \countdown-number-border-radius | 倒計時的時間區域圓角大小 | `2px` |
+| \--nutui-countdown-color | 倒計時的時間區域的文字顔色 | `$color-primary-light` |
+| \--nutui-countdown-background-color | 倒計時的時間區域的背景顔色 | `$color-primary` |
+| \--nutui-countdown-border-color | 倒計時的時間區域的邊框顔色顔色 | `$color-primary` |
+| \--nutui-countdown-primary-color | type爲`primary`時，倒計時的時間區域的文字顔色 | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | type爲`primary`時，倒計時的時間區域的背景顔色 | `$color-primary` |
+| \--nutui-countdown-primary-border-color | type爲`primary`時，倒計時的時間區域的邊框顔色顔色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a26277257d..d88e157474 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -757,8 +757,44 @@ $numberkeyboard-key-confirm-background-color: var(
 
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
-$countdown-color: var(--nutui-countdown-color, $color-title) !default;
-$countdown-font-size: var(--nutui-countdown-font-size, 14px) !default;
+$countdown-color: var(--nutui-countdown-color, $color-primary) !default;
+$countdown-font-size: var(--nutui-countdown-font-size, 10px) !default;
+$coutdown-font-weight: var(--nutui-countdown-font-weight, 400) !default;
+$countdown-height: var(--nutui-countdown-height, 14px) !default;
+$countdown-width: var(--nutui-countdown-width, 14px) !default;
+$countdown-number-padding: var(
+  --nutui-countdown-number-padding,
+  0 1px
+) !default;
+$countdown-number-border-radius: var(
+  --nutui-countdown-number-border-radius,
+  2px
+) !default;
+$countdown-number-margin: var(--nutui-countdown-number-margin, 0 2px) !default;
+$countdown-number-border-color: var(
+  --nutui-countdown-number-border-color,
+  $color-primary-light
+) !default;
+$countdown-number-color: var(
+  --nutui-countdown-number-color,
+  $color-primary
+) !default;
+$countdown-number-background-color: var(
+  --nutui-countdown-number-background-color,
+  transparent
+) !default;
+$countdown-number-primary-border-color: var(
+  --nutui-countdown-number-primary-border-color,
+  $color-primary
+) !default;
+$countdown-number-primary-color: var(
+  --nutui-countdown-number-primary-color,
+  #ffffff
+) !default;
+$countdown-number-primary-background-color: var(
+  --nutui-countdown-number-primary-background-color,
+  $color-primary
+) !default;
 
 //large price（✅）
 $price-symbol-padding-right: var(

From 05e0eeb60464316b5918b479247d13afb13488e6 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 4 Jun 2024 14:00:14 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E5=8F=96=E6=B6=88col=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/col/col.scss | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/packages/col/col.scss b/src/packages/col/col.scss
index fe45497598..cc268b64ee 100644
--- a/src/packages/col/col.scss
+++ b/src/packages/col/col.scss
@@ -24,18 +24,18 @@
 
 // RN 不支持 calc
 // dart-sass: math.div -> round & *
-// @for $i from 1 through 24 {
-//   .nut-col-offset-#{$i} {
-//     margin-left: percentage(round($i * 0.04166666666, 0.000000001));
-//   }
+@for $i from 1 through 24 {
+  .nut-col-offset-#{$i} {
+    margin-left: percentage(round($i * 0.04166666666, 0.000000001));
+  }
 
-//   [dir='rtl'] .nut-col-offset-#{$i},
-//   .nut-rtl .nut-col-offset-#{$i} {
-//     margin-left: 0;
-//     margin-right: percentage(round($i * 0.04166666666, 0.000000001));
-//   }
+  [dir='rtl'] .nut-col-offset-#{$i},
+  .nut-rtl .nut-col-offset-#{$i} {
+    margin-left: 0;
+    margin-right: percentage(round($i * 0.04166666666, 0.000000001));
+  }
 
-//   .nut-col-#{$i} {
-//     width: percentage(round($i * 0.04166666666, 0.000000001));
-//   }
-// }
+  .nut-col-#{$i} {
+    width: percentage(round($i * 0.04166666666, 0.000000001));
+  }
+}

From 08035289a89ebf816e47d5fc798b546b5dd0641f Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 19 Jun 2024 16:46:02 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20cr=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/countdown/countdown.harmony.css | 7 ++++---
 src/packages/countdown/countdown.scss        | 1 +
 src/packages/countdown/doc.en-US.md          | 2 +-
 src/packages/countdown/doc.md                | 2 +-
 src/packages/countdown/doc.taro.md           | 2 +-
 src/packages/countdown/doc.zh-TW.md          | 2 +-
 src/styles/variables.scss                    | 2 +-
 7 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/packages/countdown/countdown.harmony.css b/src/packages/countdown/countdown.harmony.css
index b602707136..57b77bbe79 100644
--- a/src/packages/countdown/countdown.harmony.css
+++ b/src/packages/countdown/countdown.harmony.css
@@ -30,13 +30,13 @@
   font-size: 10px;
 }
 .nut-countdown-number {
-  min-width: 14px;
+  min-width: 20px;
   padding: 0 1px;
   border-radius: 2px;
   margin: 0 2px;
 }
 .nut-countdown-number-primary {
-  min-width: 14px;
+  min-width: 20px;
   padding: 0 1px;
   border-radius: 2px;
   margin: 0 2px;
@@ -45,11 +45,12 @@
   border: 1px solid #ffebf1;
   background-color: transparent;
   color: #ff0f23;
+  text-align: center;
 }
 .nut-countdown-number-primary {
   border: 1px solid #ff0f23;
   background-color: #ff0f23;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 .nut-countdown-unit {
   color: #ff0f23;
diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss
index 0b485af8af..8591c93949 100644
--- a/src/packages/countdown/countdown.scss
+++ b/src/packages/countdown/countdown.scss
@@ -25,6 +25,7 @@
     border: 1px solid $countdown-number-border-color;
     background-color: $countdown-number-background-color;
     color: $countdown-number-color;
+    text-align: center;
   }
   &-number-primary {
     border: 1px solid $countdown-number-primary-border-color;
diff --git a/src/packages/countdown/doc.en-US.md b/src/packages/countdown/doc.en-US.md
index 22730a5861..9631361b4e 100644
--- a/src/packages/countdown/doc.en-US.md
+++ b/src/packages/countdown/doc.en-US.md
@@ -137,7 +137,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-countdown-color | Countdown text color | `$color-primary` |
 | \--nutui-countdown-font-size | Countdown font size | `10px` |
 | \--nutui-countdown-font-weight | Countdown font weight | `400` |
-| \--nutui-countdown-width | Time area width of the countdown | `14px` |
+| \--nutui-countdown-width | Time area width of the countdown | `20px` |
 | \--nutui-countdown-height | Time area height of the countdown | `14px` |
 | \--nutui-countdown-number-padding | Countdown time area padding | `0 1px` |
 | \--nutui-countdown-number-margin | Countdown time area margin | `0 2px` |
diff --git a/src/packages/countdown/doc.md b/src/packages/countdown/doc.md
index f1dc98064e..fa035fa3e5 100644
--- a/src/packages/countdown/doc.md
+++ b/src/packages/countdown/doc.md
@@ -139,7 +139,7 @@ import { CountDown } from '@nutui/nutui-react'
 | \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` |
 | \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` |
 | \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` |
-| \--nutui-countdown-width | 倒计时的时间区域宽度 | `14px` |
+| \--nutui-countdown-width | 倒计时的时间区域宽度 | `20px` |
 | \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
 | \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
 | \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
diff --git a/src/packages/countdown/doc.taro.md b/src/packages/countdown/doc.taro.md
index 4423c727ca..f2b7af32b2 100644
--- a/src/packages/countdown/doc.taro.md
+++ b/src/packages/countdown/doc.taro.md
@@ -138,7 +138,7 @@ import { CountDown } from '@nutui/nutui-react-taro'
 | \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` |
 | \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` |
 | \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` |
-| \--nutui-countdown-width | 倒计时的时间区域宽度 | `14px` |
+| \--nutui-countdown-width | 倒计时的时间区域宽度 | `20px` |
 | \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
 | \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
 | \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
diff --git a/src/packages/countdown/doc.zh-TW.md b/src/packages/countdown/doc.zh-TW.md
index a321a06b7b..5323653b9c 100644
--- a/src/packages/countdown/doc.zh-TW.md
+++ b/src/packages/countdown/doc.zh-TW.md
@@ -138,7 +138,7 @@ import { CountDown } from '@nutui/nutui-react'
 | \--nutui-countdown-color | 倒計時的文字顔色 | `$color-primary` |
 | \--nutui-countdown-font-size | 倒計時的字體大小 | `10px` |
 | \--nutui-countdown-font-weight | 倒計時的字體粗細 | `400` |
-| \--nutui-countdown-width | 倒計時的時間區域寬度 | `14px` |
+| \--nutui-countdown-width | 倒計時的時間區域寬度 | `20px` |
 | \--nutui-countdown-height | 倒計時的時間區域高度 | `14px` |
 | \--nutui-countdown-number-padding | 倒計時的時間區域padding | `0 1px` |
 | \--nutui-countdown-number-margin | 倒計時的時間區域margin | `0 2px` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ca36944abc..f304a254e4 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -761,7 +761,7 @@ $countdown-color: var(--nutui-countdown-color, $color-primary) !default;
 $countdown-font-size: var(--nutui-countdown-font-size, 10px) !default;
 $coutdown-font-weight: var(--nutui-countdown-font-weight, 400) !default;
 $countdown-height: var(--nutui-countdown-height, 14px) !default;
-$countdown-width: var(--nutui-countdown-width, 14px) !default;
+$countdown-width: var(--nutui-countdown-width, 20px) !default;
 $countdown-number-padding: var(
   --nutui-countdown-number-padding,
   0 1px

From 6d7e0d97d1518687e2e73944017c78fc69f987ba Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 19 Jun 2024 16:54:27 +0800
Subject: [PATCH 4/4] chore: update docs

---
 src/packages/countdown/doc.en-US.md | 2 +-
 src/packages/countdown/doc.md       | 2 +-
 src/packages/countdown/doc.taro.md  | 2 +-
 src/packages/countdown/doc.zh-TW.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/packages/countdown/doc.en-US.md b/src/packages/countdown/doc.en-US.md
index 9631361b4e..ab7d11dee0 100644
--- a/src/packages/countdown/doc.en-US.md
+++ b/src/packages/countdown/doc.en-US.md
@@ -141,7 +141,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-countdown-height | Time area height of the countdown | `14px` |
 | \--nutui-countdown-number-padding | Countdown time area padding | `0 1px` |
 | \--nutui-countdown-number-margin | Countdown time area margin | `0 2px` |
-| \countdown-number-border-radius | Countdown time area border radius | `2px` |
+| \--countdown-number-border-radius | Countdown time area border radius | `2px` |
 | \--nutui-countdown-color | Countdown time area text color | `$color-primary-light` |
 | \--nutui-countdown-background-color | Countdown time area background color | `$color-primary` |
 | \--nutui-countdown-border-color | Countdown time area border color color | `$color-primary` |
diff --git a/src/packages/countdown/doc.md b/src/packages/countdown/doc.md
index fa035fa3e5..f31cbd41b9 100644
--- a/src/packages/countdown/doc.md
+++ b/src/packages/countdown/doc.md
@@ -143,7 +143,7 @@ import { CountDown } from '@nutui/nutui-react'
 | \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
 | \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
 | \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
-| \countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
+| \--countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
 | \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light` |
 | \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` |
 | \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` |
diff --git a/src/packages/countdown/doc.taro.md b/src/packages/countdown/doc.taro.md
index f2b7af32b2..dd99369dfb 100644
--- a/src/packages/countdown/doc.taro.md
+++ b/src/packages/countdown/doc.taro.md
@@ -142,7 +142,7 @@ import { CountDown } from '@nutui/nutui-react-taro'
 | \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
 | \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
 | \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
-| \countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
+| \--countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
 | \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light` |
 | \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` |
 | \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` |
diff --git a/src/packages/countdown/doc.zh-TW.md b/src/packages/countdown/doc.zh-TW.md
index 5323653b9c..3dd412af22 100644
--- a/src/packages/countdown/doc.zh-TW.md
+++ b/src/packages/countdown/doc.zh-TW.md
@@ -142,7 +142,7 @@ import { CountDown } from '@nutui/nutui-react'
 | \--nutui-countdown-height | 倒計時的時間區域高度 | `14px` |
 | \--nutui-countdown-number-padding | 倒計時的時間區域padding | `0 1px` |
 | \--nutui-countdown-number-margin | 倒計時的時間區域margin | `0 2px` |
-| \countdown-number-border-radius | 倒計時的時間區域圓角大小 | `2px` |
+| \--countdown-number-border-radius | 倒計時的時間區域圓角大小 | `2px` |
 | \--nutui-countdown-color | 倒計時的時間區域的文字顔色 | `$color-primary-light` |
 | \--nutui-countdown-background-color | 倒計時的時間區域的背景顔色 | `$color-primary` |
 | \--nutui-countdown-border-color | 倒計時的時間區域的邊框顔色顔色 | `$color-primary` |