Skip to content

feat(price): 支持自定义颜色&数据原样输出 #3328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xiaoyatong merged 9 commits into from
Aug 15, 2025
Merged

feat(price): 支持自定义颜色&数据原样输出 #3328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d7e7d86
fix(badge): 解决中文偏上问题
irisSong Mar 21, 2025
532e0e1
fix: css 变量更新
irisSong Mar 21, 2025
c912d43
Merge branch 'feat_v3.x' of https://github.com/irisSong/nutui-react i…
irisSong Apr 27, 2025
9a49448
Merge remote-tracking branch 'upstream/feat_v3.x' into feat_v3.x
irisSong Apr 30, 2025
0324919
Merge remote-tracking branch 'upstream/feat_v3.x' into feat_v3.x
irisSong May 14, 2025
87c7e2e
Merge remote-tracking branch 'upstream/feat_v3.x' into feat_v3.x
irisSong Jun 9, 2025
a9e16bc
feat: 支持自定义颜色&数据原样输出
irisSong Aug 14, 2025
4e9f2fd
feat(price): 价格净化
irisSong Aug 14, 2025
a761bbb
chore: 文档更新
irisSong Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/packages/price/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'
import Demo8 from './demos/taro/demo8'
import Demo9 from './demos/taro/demo9'
import Demo10 from './demos/taro/demo10'
import Demo11 from './demos/taro/demo11'

const PriceDemo = () => {
const [translated] = useTranslate({
Expand All @@ -25,6 +27,8 @@ const PriceDemo = () => {
title7: '不展示 symbol 符号',
title8: '划线价',
title9: '场域分类：原子级、模块级、列表级、页面级',
title10: '自定义颜色',
title11: '数据原样输出',
},
'zh-TW': {
title1: '支持尺寸：small、normal、large、xlarge',
Expand All @@ -36,6 +40,8 @@ const PriceDemo = () => {
title7: '不展示 symbol 符號',
title8: '劃線價',
title9: '場域分類：原子級、模塊級、列表級、頁面級',
title10: '自定義顏色',
title11: '數據原樣輸出',
},
'en-US': {
title1: 'Support sizes：small、normal、large、xlarge',
Expand All @@ -48,6 +54,8 @@ const PriceDemo = () => {
title7: 'Do not display symbol',
title8: 'Line-through price',
title9: 'Field classification: atomic, module, list, page',
title10: 'Custom color',
title11: 'Data original output',
},
})
return (
Expand All @@ -72,6 +80,10 @@ const PriceDemo = () => {
<Demo7 />
<View className="h2">{translated.title8}</View>
<Demo8 />
<View className="h2">{translated.title10}</View>
<Demo10 />
<View className="h2">{translated.title11}</View>
<Demo11 />
</ScrollView>
</>
)
Expand Down
10 changes: 10 additions & 0 deletions src/packages/price/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'
import Demo8 from './demos/h5/demo8'
import Demo9 from './demos/h5/demo9'
import Demo10 from './demos/h5/demo10'
import Demo11 from './demos/h5/demo11'

const PriceDemo = () => {
const [translated] = useTranslate({
Expand All @@ -22,6 +24,8 @@ const PriceDemo = () => {
title7: '不展示 symbol 符号',
title8: '划线价',
title9: '场域分类：原子级、模块级、列表级、页面级',
title10: '自定义颜色',
title11: '数据原样输出',
},
'zh-TW': {
title1: '支持尺寸：small、normal、large、xlarge',
Expand All @@ -45,6 +49,8 @@ const PriceDemo = () => {
title7: 'Do not display symbol',
title8: 'Line-through price',
title9: 'Field classification: atomic, module, list, page',
title10: 'Custom color',
title11: 'Data original output',
},
})

Expand All @@ -68,6 +74,10 @@ const PriceDemo = () => {
<Demo7 />
<h2>{translated.title8}</h2>
<Demo8 />
<h2>{translated.title10}</h2>
<Demo10 />
<h2>{translated.title11}</h2>
<Demo11 />
</div>
)
}
Expand Down
22 changes: 22 additions & 0 deletions src/packages/price/demos/h5/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { Price, Cell, CellGroup } from '@nutui/nutui-react'

const Demo10 = () => {
return (
<CellGroup>
<Cell>
<Price price={618.68} size="small" thousands color="darkgray" />
</Cell>
<Cell>
<Price price={618.68} size="normal" thousands color="dark" />
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

color="dark" 不是有效的预置 token 或 CSS 颜色名

  • 预置 token：'primary' | 'gray' | 'darkgray'
  • 自定义颜色：任何合法 CSS 颜色字符串（如 'blue'、'#b5691a'）
  • 'dark' 并非标准 CSS 颜色名，也不是预置 token，渲染会无效

建议改为 'darkgray'（预置 token）或一个自定义可识别颜色。

-        <Price price={618.68} size="normal" thousands color="dark" />
+        <Price price={618.68} size="normal" thousands color="darkgray" />

另外请同步排查 Taro 端 Demo10 是否也使用了 "dark"：

🏁 Script executed:

#!/bin/bash
# 搜索 H5/Taro 示例中是否误用了 color="dark"
rg -n 'color=["'\'']dark["'\'']' src/packages/price/demos

Length of output: 285

修复 Price 示例中无效的 color="dark"

color="dark" 既不是预置 token（可用：'primary' | 'gray' | 'darkgray'），也不是标准 CSS 颜色名，会导致渲染无效。请改为 'darkgray' 或其他合法的 CSS 颜色值。

需要修改的文件：

  • src/packages/price/demos/h5/demo10.tsx:11
  • src/packages/price/demos/taro/demo10.tsx:11

建议修改（在两个文件中均应用）：

-        <Price price={618.68} size="normal" thousands color="dark" />
+        <Price price={618.68} size="normal" thousands color="darkgray" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Price price={618.68} size="normal" thousands color="dark" />
<Price price={618.68} size="normal" thousands color="darkgray" />
🤖 Prompt for AI Agents 
In src/packages/price/demos/h5/demo10.tsx around line 11 and
src/packages/price/demos/taro/demo10.tsx around line 11, the Price component
uses color="dark" which is not a valid token or CSS color and thus won't render
correctly; replace color="dark" with a valid token like color="darkgray" (or any
supported token 'primary'|'gray'|'darkgray' or a standard CSS color) in both
files so the component renders the expected color.

</Cell>
<Cell>
<Price price={618.68} size="large" thousands color="blue" />
</Cell>
<Cell>
<Price price={618.68} size="xlarge" thousands color="#b5691a" />
</Cell>
</CellGroup>
)
}
export default Demo10
22 changes: 22 additions & 0 deletions src/packages/price/demos/h5/demo11.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { Price, Cell, CellGroup } from '@nutui/nutui-react'

const Demo11 = () => {
return (
<CellGroup>
<Cell>
<Price price={618} size="small" thousands digits={null} />
</Cell>
<Cell>
<Price price={618.6} size="normal" thousands digits={null} />
</Cell>
<Cell>
<Price price={618.18} size="large" thousands digits={null} />
</Cell>
<Cell>
<Price price={618.111} size="xlarge" thousands digits={null} />
</Cell>
</CellGroup>
)
}
export default Demo11
22 changes: 22 additions & 0 deletions src/packages/price/demos/taro/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro'

const Demo10 = () => {
return (
<CellGroup>
<Cell>
<Price price={618.68} size="small" thousands color="darkgray" />
</Cell>
<Cell>
<Price price={618.68} size="normal" thousands color="dark" />
</Cell>
<Cell>
<Price price={618.68} size="large" thousands color="blue" />
</Cell>
<Cell>
<Price price={618.68} size="xlarge" thousands color="#b5691a" />
</Cell>
</CellGroup>
)
}
export default Demo10
22 changes: 22 additions & 0 deletions src/packages/price/demos/taro/demo11.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro'

const Demo11 = () => {
return (
<CellGroup>
<Cell>
<Price price={618} size="small" thousands digits={null} />
</Cell>
<Cell>
<Price price={618.6} size="normal" thousands digits={null} />
</Cell>
<Cell>
<Price price={618.18} size="large" thousands digits={null} />
</Cell>
<Cell>
<Price price={618.111} size="xlarge" thousands digits={null} />
</Cell>
</CellGroup>
)
}
export default Demo11
28 changes: 22 additions & 6 deletions src/packages/price/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,19 +82,35 @@ import { Price } from '@nutui/nutui-react'

:::

### Custom color

:::demo

<CodeBlock src='h5/demo10.tsx'></CodeBlock>

:::

### Data original output

:::demo

<CodeBlock src='h5/demo11.tsx'></CodeBlock>

:::

## Price

### Props

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| color | Price type | `primary` \| `gray` \| `darkgray` | `primary` |
| color | Price type, supports custom colors | `primary` \| `gray` \| `darkgray` \| `string` | `primary` |
| price | Price | `number` | `0` |
| symbol | Symbol type | `string` | `&yen;` |
| digits | Decimal digits | `number` | `2` |
| digits | Decimal digits, pass `null` for original data output | `number` \| `null` | `2` |
| thousands | Thousands separation | `boolean` | `false` |
| position | The symbol appear before or after the price，`before`、`after` | `string` | `before` |
| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` |
| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` |
| line | Line-through price | `boolean` | `false` |

## Theming
Expand All @@ -105,9 +121,9 @@ The component provides the following CSS variables, which can be used to customi

| Name | Description | Default |
| --- | --- | --- |
| \--nutui-price-primary-color | Text color when type is primary | `#ff0f23` |
| \--nutui-price-color | Text color when type is gray | `#888b94` |
| \--nutui-price-darkgray-color | Text color when type is darkgray | `#1a1a1a` |
| \--nutui-price-primary-color | Text color when color is primary | `#ff0f23` |
| \--nutui-price-color | Text color when color is gray | `#888b94` |
| \--nutui-price-darkgray-color | Text color when color is darkgray | `#1a1a1a` |
| \--nutui-price-line-color | Underline price color | `#888b94` |
| \--nutui-price-symbol-padding-right | Right padding of symbol | `0px` |
| \--nutui-price-symbol-xlarge-size | xlarge size symbol font size | `12px` |
Expand Down
20 changes: 18 additions & 2 deletions src/packages/price/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,16 +82,32 @@ import { Price } from '@nutui/nutui-react'

:::

### 自定义颜色

:::demo

<CodeBlock src='h5/demo10.tsx'></CodeBlock>

:::

### 数据原样输出

:::demo

<CodeBlock src='h5/demo11.tsx'></CodeBlock>

:::

## Price

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| color | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` |
| color | 价格类型, 支持自定义颜色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` |
| price | 价格数量 | `number` | `0` |
| symbol | 符号类型 | `string` | `&yen;` |
| digits | 小数位位数 | `number` | `2` |
| digits | 小数位位数，传入`null`数据原样输出 | `number` \| `null` | `2` |
| thousands | 是否按照千分号形式显示 | `boolean` | `false` |
| position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` |
| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` |
Expand Down
27 changes: 22 additions & 5 deletions src/packages/price/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,32 @@ import { Price } from '@nutui/nutui-react-taro'

:::

### 自定义颜色

:::demo

<CodeBlock src='taro/demo10.tsx'></CodeBlock>

:::

### 数据原样输出

:::demo

<CodeBlock src='taro/demo11.tsx'></CodeBlock>

:::

## Price

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` |
| color | 价格类型, 支持自定义颜色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` |
| price | 价格数量 | `number` | `0` |
| symbol | 符号类型 | `string` | `&yen;` |
| digits | 小数位位数 | `number` | `2` |
| digits | 小数位位数，传入`null`数据原样输出 | `number` \| `null` | `2` |
| thousands | 是否按照千分号形式显示 | `boolean` | `false` |
| position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` |
| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` |
Expand All @@ -104,9 +121,9 @@ import { Price } from '@nutui/nutui-react-taro'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` |
| \--nutui-price-color | type为gray时文字颜色 | `#888b94` |
| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` |
| \--nutui-price-primary-color | color为primary时文字颜色 | `#ff0f23` |
| \--nutui-price-color | color为gray时文字颜色 | `#888b94` |
| \--nutui-price-darkgray-color | color为darkgray时文字颜色 | `#1a1a1a` |
| \--nutui-price-line-color | 划线价颜色 | `#888b94` |
| \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` |
| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` |
Expand Down
26 changes: 21 additions & 5 deletions src/packages/price/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,16 +82,32 @@ import { Price } from '@nutui/nutui-react'

:::

### 自定義顏色

:::demo

<CodeBlock src='h5/demo10.tsx'></CodeBlock>

:::

### 數據原樣輸出

:::demo

<CodeBlock src='h5/demo11.tsx'></CodeBlock>

:::

## Price

### Props

| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| color | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` |
| color | 價格類型, 支持自定義顏色 | `primary` \| `gray` \| `darkgray` \| `string` | `primary` |
| price | 價格數量 | `number` | `0` |
| symbol | 符號類型 | `string` | `&yen;` |
| digits | 小數位位數 | `number` | `2` |
| digits | 小數位位數，傳入`null`數據原樣輸出 | `number` \| `null` | `2` |
| thousands | 是否按照千分號形式顯示 | `boolean` | `false` |
| position | 符號顯示在價格前或者後，`before`、`after` | `string` | `before` |
| size | 價格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` |
Expand All @@ -105,9 +121,9 @@ import { Price } from '@nutui/nutui-react'

| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-price-primary-color | type為primary時文字顏色 | `#ff0f23` |
| \--nutui-price-color | type為gray時文字顏色 | `#888b94` |
| \--nutui-price-darkgray-color | type為darkgray時文字顏色 | `#1a1a1a` |
| \--nutui-price-primary-color | color為primary時文字顏色 | `#ff0f23` |
| \--nutui-price-color | color為gray時文字顏色 | `#888b94` |
| \--nutui-price-darkgray-color | color為darkgray時文字顏色 | `#1a1a1a` |
| \--nutui-price-line-color | 劃線價顏色 | `#888b94` |
| \--nutui-price-symbol-padding-right | 符號的右內邊距 | `0px` |
| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符號字體大小 | `12px` |
Expand Down
Loading
Loading