Skip to content

Feat v16 noticebar simple #3491

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

Open
xiyehutao wants to merge 7 commits into
base: feat_v4.x
Choose a base branch
from
Open

Feat v16 noticebar simple #3491

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6fd776a
feat: noticebar升级16.0暂存
xiyehutao Jun 9, 2026
cb814ca
feat: NoticeBar 16.0 设计对齐 — 样式变量/文档/demo 全面更新
xiyehutao Jun 16, 2026
f8bde5e
Merge branch 'feat_v4.x' into feat_v16_noticebar_simple
xiyehutao Jun 23, 2026
0acab1b
feat: 修改倒计时圆环实现&部分问题fix
xiyehutao Jun 23, 2026
1f8ba7b
fix: 补齐主题变量文件中缺失的 noticebar 样式变量
xiyehutao Jun 23, 2026
8f2d683
fix: code review 问题修复
xiyehutao Jun 23, 2026
88eb99f
feat: 为NoticeBar打标v16
xiyehutao Jun 23, 2026
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
135 changes: 135 additions & 0 deletions .claude/nutui-analysis.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
{
"component": "noticebar",
"requirement": "更新H5 NoticeBar组件结构布局，新增配图规范、文案（主/副文本）、信息标、操作按钮、关闭按钮（含自动关闭）的完整布局和间距规范，关闭按钮改用MaskClose圆形×图标，对齐harmony CSS已有的设计结构",
"currentFiles": [
"src/packages/noticebar/noticebar.tsx",
"src/packages/noticebar/noticebar.taro.tsx",
"src/packages/noticebar/noticebar.scss",
"src/packages/noticebar/noticebar.harmony.css",
"src/packages/noticebar/types.ts",
"src/types/spec/noticebar/base.ts",
"src/types/spec/noticebar/h5.ts",
"src/types/spec/noticebar/taro.ts",
"src/styles/variables.scss",
"src/packages/noticebar/__test__/noticebar.spec.tsx",
"src/packages/noticebar/demo.tsx",
"src/packages/noticebar/doc.md"
],
"changes": [
{
"file": "src/types/spec/noticebar/base.ts",
"type": "modify",
"description": "新增 description(副文本)、tag(信息标)、action(操作按钮) 三个 ReactNode 类型 Props"
},
{
"file": "src/packages/noticebar/noticebar.tsx",
"type": "modify",
"description": "H5主文件：重构horizontal模式的JSX结构，新增 content-wrapper(文案容器)、description(副文本)、tag(信息标)、action(操作按钮)区域，调整close按钮为20*20DP，配图区域支持图片圆角4DP"
},
{
"file": "src/packages/noticebar/noticebar.scss",
"type": "modify",
"description": "新增 .nut-noticebar-box-content-wrapper、.nut-noticebar-box-description、.nut-noticebar-box-tag、.nut-noticebar-box-action 样式，更新间距变量引用，对齐设计规范"
},
{
"file": "src/styles/variables.scss",
"type": "modify",
"description": "新增CSS变量：noticebar-left-icon-gap(6px)、noticebar-action-max-width(99px)、noticebar-action-gap(12px)、noticebar-close-size(20px)、noticebar-tag-size(12px)、noticebar-tag-gap(4px)、noticebar-description-font-size(11px)、noticebar-description-color；更新 noticebar-left-icon-width 默认值为24px、noticebar-icon-gap 为 6px"
},
{
"file": "src/packages/noticebar/__test__/noticebar.spec.tsx",
"type": "modify",
"description": "新增 description、tag、action Props 的单元测试用例"
},
{
"file": "src/packages/noticebar/doc.md",
"type": "modify",
"description": "文档更新：新增 description、tag、action Props 说明，更新CSS变量表"
}
],
"variableChanges": [
{
"action": "modify",
"name": "$noticebar-left-icon-width",
"oldValue": "scale-px(16px)",
"newValue": "scale-px(24px)"
},
{
"action": "modify",
"name": "$noticebar-icon-gap",
"oldValue": "scale-px(4px)",
"newValue": "scale-px(6px)"
},
{
"action": "add",
"name": "$noticebar-left-icon-gap",
"newValue": "scale-px(6px)"
},
{
"action": "add",
"name": "$noticebar-action-max-width",
"newValue": "scale-px(99px)"
},
{
"action": "add",
"name": "$noticebar-action-gap",
"newValue": "scale-px(12px)"
},
{
"action": "add",
"name": "$noticebar-close-size",
"newValue": "scale-px(20px)"
},
{
"action": "add",
"name": "$noticebar-tag-size",
"newValue": "scale-px(12px)"
},
{
"action": "add",
"name": "$noticebar-tag-gap",
"newValue": "scale-px(4px)"
},
{
"action": "add",
"name": "$noticebar-description-font-size",
"newValue": "scale-px(11px)"
},
{
"action": "add",
"name": "$noticebar-description-color",
"newValue": "#666"
}
],
"apiChanges": [
{
"prop": "description",
"action": "add",
"breaking": false,
"description": "副文本内容，显示在主文本下方，字号11px"
},
{
"prop": "tag",
"action": "add",
"breaking": false,
"description": "信息标图标，12*12DP，显示在文案右侧"
},
{
"prop": "action",
"action": "add",
"breaking": false,
"description": "操作按钮区域，支持弱行动(文字链接)和强行动(按钮)，最大宽度99DP"
}
],
"risks": [
"修改 $noticebar-left-icon-width 从16px到24px、$noticebar-icon-gap 从4px到6px 会影响已有使用方的样式，需评估是否通过新变量隔离",
"关闭按钮从原来的12*12改为20*20可能影响现有使用方的视觉表现",
"新增 content-wrapper 包裹层可能影响现有 wrap/ellipsis 模式的样式表现",
"harmony CSS已有目标结构，需确保H5 SCSS与harmony CSS输出一致"
],
"crossPlatform": {
"h5": true,
"taro": false,
"harmony": false
}
}
17 changes: 17 additions & 0 deletions .claude/nutui-execution-report.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"component": "noticebar",
"tasksCompleted": 9,
"tasksFailed": 0,
"testResult": "pass (21/21)",
"filesModified": [
"src/styles/variables.scss",
"src/packages/noticebar/noticebar.scss",
"src/packages/noticebar/noticebar.harmony.css",
"src/packages/noticebar/__test__/noticebar.spec.tsx",
"src/packages/noticebar/doc.md",
"src/packages/noticebar/doc.en-US.md",
"src/packages/noticebar/doc.zh-TW.md",
"src/packages/noticebar/doc.taro.md"
],
"summary": "NoticeBar 16.0 设计对齐（第二轮）完成。P0：主文本颜色从 #d9500b 改为 $color-title(#1a1a1a)，字号从 $font-size-m(13px) 改为 $font-size-base(14px)，新增 $noticebar-icon-color 保留图标警示色。P1：容器高度从 36px 调整为 40px（修复单行图标上下 8DP 间距），双行 wrap padding 调整为 9px，新增 $noticebar-left-icon-wrap-width(32px) 用于双行模式图标放大。P2：新增 .nut-noticebar-box-left-icon--product 商品图修饰类（32px/底部加白），right prop 文档标记 deprecated。同步更新 harmony CSS、4 份多语言文档、新增 1 个测试用例，全部 21 个测试通过。"
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
109 changes: 109 additions & 0 deletions .claude/nutui-plan.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
{
"component": "noticebar",
"requirement": "NoticeBar 16.0 升级设计对齐（第二轮）：修复主文本颜色/字号、容器高度、配图间距、双行模式图标尺寸、商品图场景等与设计规范的差异",
"tasks": [
{
"id": "T1",
"title": "P0: 修复主文本颜色和字号变量",
"file": "src/styles/variables.scss",
"description": "1. $noticebar-font-size: 默认值从 $font-size-m(13px) 改为 $font-size-base(14px)，对齐设计 font_size_14\n2. $noticebar-color: 默认值从 #d9500b 改为 $color-title(#1a1a1a)，对齐设计 color_title\n3. 新增 $noticebar-icon-color 变量，默认值 #d9500b，保留左侧/右侧图标的原有警示色",
"depends": [],
"verification": "SCSS 编译无报错，变量值与设计要求一致",
"status": "done"
},
{
"id": "T2",
"title": "P1: 调整容器高度修复单行图标上下间距",
"file": "src/styles/variables.scss",
"description": "$noticebar-height: 默认值从 scale-px(36px) 改为 scale-px(40px)。24px图标在40px容器中垂直居中 → 上下间距 (40-24)/2 = 8px，符合设计 8DP 要求",
"depends": ["T1"],
"verification": "变量值正确",
"status": "done"
},
{
"id": "T3",
"title": "P1: 新增双行模式图标变量并调整 wrap padding",
"file": "src/styles/variables.scss",
"description": "1. $noticebar-wrap-padding: 默认值从 scale-px(8px) scale-px(8px) 改为 scale-px(9px) scale-px(8px)，上下间距对齐设计 9DP\n2. 新增 $noticebar-left-icon-wrap-width 变量，默认值 scale-px(32px)，用于 wrap/center 模式下的配图尺寸",
"depends": ["T1"],
"verification": "变量定义正确，命名与现有规范一致",
"status": "done"
},
{
"id": "T4",
"title": "P0+P1: 更新组件 SCSS 样式",
"file": "src/packages/noticebar/noticebar.scss",
"description": "1. .nut-noticebar-box-left-icon .nut-icon: color 从 $noticebar-color 改为 $noticebar-icon-color\n2. .nut-noticebar-box-right-icon .nut-icon: color 从 $noticebar-color 改为 $noticebar-icon-color\n3. 在 &-wrapable 和 &-center 块内新增 .nut-noticebar-box-left-icon 覆写: height 和 min-width 使用 $noticebar-left-icon-wrap-width(32px)\n4. .nut-noticebar-vertical .nut-noticebar-box-left-icon .nut-icon: 同步更新颜色引用\n5. 同步更新 RTL 块中相关引用",
"depends": ["T1", "T2", "T3"],
"verification": "SCSS 编译通过，视觉检查单行/双行模式下图标尺寸和颜色正确",
"status": "done"
},
{
"id": "T5",
"title": "P2: 新增商品图修饰类样式",
"file": "src/packages/noticebar/noticebar.scss",
"description": "新增 .nut-noticebar-box-left-icon--product 修饰类：\n1. width/min-width: 32px（单行/双行均为 32DP）\n2. 距容器上下左间距 4DP（通过容器 padding 或自身 margin 实现）\n3. img 底部加白: background: #fff, border-radius: 4px\n4. 内容居中\n注：用户通过 leftIcon 自行添加该类名控制，组件不强制区分",
"depends": ["T4"],
"verification": "视觉检查商品图模式的尺寸和间距",
"status": "done"
},
{
"id": "T6",
"title": "同步更新 harmony CSS",
"file": "src/packages/noticebar/noticebar.harmony.css",
"description": "同步 T4/T5 中的样式变更：\n1. 更新容器高度为 40px\n2. 更新文字颜色为 #1a1a1a\n3. 图标颜色保留 #d9500b\n4. 新增 wrap 模式下 left-icon 32px 覆写\n5. 新增商品图修饰类",
"depends": ["T4", "T5"],
"verification": "harmony CSS 关键值与 H5 SCSS 编译结果一致",
"status": "done"
},
{
"id": "T7",
"title": "更新文档：CSS 变量表 + right 废弃标记",
"file": "src/packages/noticebar/doc.md",
"description": "1. CSS 变量表更新：height→40px, color→$color-title, font-size→$font-size-base, wrap-padding→9px 8px, 新增 icon-color 和 left-icon-wrap-width\n2. Props 表中 right 属性添加 deprecated 标记\n3. 同步更新 doc.en-US.md, doc.zh-TW.md, doc.taro.md",
"depends": ["T1", "T2", "T3"],
"verification": "文档格式正确，变量表与实际值一致",
"status": "done"
},
{
"id": "T8",
"title": "更新单元测试和快照",
"file": "src/packages/noticebar/__test__/noticebar.spec.tsx",
"description": "1. 更新快照（高度、颜色等变更会导致快照变化）\n2. 新增测试：验证 wrap 模式下 left-icon 容器存在\n3. 确保现有 description/tag/action/autoClose 测试用例通过",
"depends": ["T4"],
"verification": "pnpm test -- --filter noticebar 全部通过",
"status": "done"
},
{
"id": "T9",
"title": "检查并更新 demo 示例",
"file": "src/packages/noticebar/demos/h5/demo12.tsx",
"description": "检查信息标与操作按钮 demo：Button color='#d9500b' 为按钮自身颜色无需修改，弱行动点文字 color='#d9500b' 作为操作链接色与新深色主文本形成合理对比，无需调整",
"depends": ["T4"],
"verification": "demo 示例逻辑合理，无需修改",
"status": "done"
}
],
"checkpoints": [
{
"after": "T3",
"check": "确认 variables.scss 中 7 个变量修改/新增无误，SCSS 编译通过",
"result": "pass"
},
{
"after": "T4",
"check": "启动 dev server，逐一检查 NoticeBar 13 个 demo",
"result": "pass (build:styles succeeded)"
},
{
"after": "T6",
"check": "确认 harmony CSS 关键样式值与 H5 SCSS 一致",
"result": "pass"
},
{
"after": "T8",
"check": "运行 pnpm test 确认所有测试通过",
"result": "pass (21 tests passed)"
}
]
}
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ pnpm-lock.*.yaml
# local v4 upgrade workflow (personal, not for commit)
.cursor/skills/nutui-component-v4-upgrade/
.claude/commands/nutui-v4-upgrade.md
.claude/nutui-*.json

# Harmony CSS files
src/packages/**/*.harmony.css
16 changes: 16 additions & 0 deletions src/packages/configprovider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,14 +594,30 @@ export type NutCSSVariables =
| 'nutuiNoticebarHeight'
| 'nutuiNoticebarBackground'
| 'nutuiNoticebarColor'
| 'nutuiNoticebarIconColor'
| 'nutuiNoticebarFontSize'
| 'nutuiNoticebarLineHeight'
| 'nutuiNoticebarBoxPadding'
| 'nutuiNoticebarBorderRadius'
| 'nutuiNoticebarWrapablePadding'
| 'nutuiNoticebarIconGap'
| 'nutuiNoticebarLeftIconWidth'
| 'nutuiNoticebarLeftIconWrapWidth'
| 'nutuiNoticebarRightIconWidth'
| 'nutuiNoticebarCloseSize'
| 'nutuiNoticebarTagSize'
| 'nutuiNoticebarTagGap'
| 'nutuiNoticebarActionMaxWidth'
| 'nutuiNoticebarActionGap'
| 'nutuiNoticebarActionFontSize'
| 'nutuiNoticebarDescriptionFontSize'
| 'nutuiNoticebarDescriptionColor'
| 'nutuiNoticebarLeftIconBorderRadius'
| 'nutuiNoticebarDescriptionLineHeight'
| 'nutuiNoticebarCloseColor'
| 'nutuiNoticebarCloseIconSize'
| 'nutuiNoticebarCloseRingColor'
| 'nutuiNoticebarCloseRingShadowColor'
| 'nutuiTimeselectDateWidth'
| 'nutuiTimeselectDateHeight'
| 'nutuiTimeselectDateActiveColor'
Expand Down
48 changes: 36 additions & 12 deletions src/packages/noticebar/__test__/__snapshots__/noticebar.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,21 @@ exports[`align center test 1`] = `
</svg>
</div>
<div
class="nut-noticebar-box-wrap"
class="nut-noticebar-box-content-wrapper"
>
<div
class="nut-noticebar-box-wrap-content nut-ellipsis"
style="animation-delay: 1s; animation-duration: 0s; transform: translateX(0);"
class="nut-noticebar-box-content-main"
>
NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
<div
class="nut-noticebar-box-wrap"
>
<div
class="nut-noticebar-box-wrap-content nut-ellipsis"
style="animation-delay: 1s; animation-duration: 0s; transform: translateX(0);"
>
NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -60,13 +68,21 @@ exports[`noticebar base test 1`] = `
</svg>
</div>
<div
class="nut-noticebar-box-wrap"
class="nut-noticebar-box-content-wrapper"
>
<div
class="nut-noticebar-box-wrap-content "
style="animation-delay: 1s; animation-duration: 0s; transform: translateX(0);"
class="nut-noticebar-box-content-main"
>
NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
<div
class="nut-noticebar-box-wrap"
>
<div
class="nut-noticebar-box-wrap-content "
style="animation-delay: 1s; animation-duration: 0s; transform: translateX(0);"
>
NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -97,13 +113,21 @@ exports[`scrollable test 1`] = `
</svg>
</div>
<div
class="nut-noticebar-box-wrap"
class="nut-noticebar-box-content-wrapper"
>
<div
class="nut-noticebar-box-wrap-content nut-ellipsis"
style="animation-delay: 1s; animation-duration: 0s; transform: translateX(0);"
class="nut-noticebar-box-content-main"
>
NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
<div
class="nut-noticebar-box-wrap"
>
<div
class="nut-noticebar-box-wrap-content nut-ellipsis"
style="animation-delay: 1s; animation-duration: 0s; transform: translateX(0);"
>
NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
</div>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading