fix(noticebar): the speed and duration attributes behave incorrectly in vertical mode

[mingquan5830]

🤔 这个变动的性质是？

• [ ] 新特性提交
• [x] 日常 bug 修复
• [ ] 站点、文档改进
• [x] 演示代码改进
• [ ] 组件样式/交互改进
• [ ] TypeScript 定义更新
• [ ] 包体积优化
• [ ] 性能优化
• [ ] 功能增强
• [ ] 国际化改进
• [ ] 重构
• [ ] 代码风格优化
• [x] 测试用例
• [ ] 分支合并
• [ ] 其他改动（是关于什么的改动？）

🔗 相关 Issue

💡 需求背景和解决方案

问题描述

1. 在vertical模式并传入children的情况下，speed和duration会表现异常，如将demo10中的duration设置为5000，则如视频中所示：

https://github.com/user-attachments/assets/e30dda39-b909-4da6-ab42-a4d646162f3e

2. 另外在当前demo11中可以发现，一开始展示的并不是第一项，而是第二项，这也不符合预期。

问题原因

1. 关键问题代码：

target.style.transitionDuration = `${
    swiperRef.current.moving ? 0 : duration
  }ms`

   swiperRef.current.autoplayTimer = setTimeout(
      () => {
        next()
        autoplay()
      },
      Number(duration) + 100 * speed
    )

可以看到：

1. duration应该是停留时长，但此处却被设置为动画过渡时间

2. 这里的100 * speed 意义不明，应该为duration + 动画过渡时间

3. 关键问题代码：

const startRollEasy = () => {
    showhorseLamp()
    const timerCurr = window.setInterval(showhorseLamp, time + Number(duration))
    SetTimer(timerCurr)
  }

可以看到一开始滚动就立刻调用showhorseLamp()去展示下一项，第一项没有停留。

解决方案：

1. 按照现有API设计，动画过渡时间应该只和height和speed相关，具体的动画过渡时间的计算可以沿用 vertical + list 的逻辑，这样可以保证垂直模式下list和children表现的一致性。
2. 第一项也需要拥有停留时间，和其他项表现一致。

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• [x] 文档已补充或无须补充
• [x] 代码演示已提供或无须提供
• [x] TypeScript 定义已补充或无须补充
• [x] fork仓库代码是否为最新避免文件冲突
• [x] Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

• 新功能
  • 垂直滚动公告栏支持动态增删内容，可通过按钮实时添加或删除滚动项，内容高度和动画将自动适配更新。
• 优化
  • 垂直滚动动画的时长和状态管理更加统一和流畅，提升了滚动体验和性能。
• 文档
  • 示例和文档补充了动态内容变更相关描述，便于理解和使用新特性。
• 测试
  • 新增多项垂直滚动和动态内容相关的测试用例，保证功能稳定性。

[coderabbitai[bot]]

Walkthrough

本次变更主要围绕 NoticeBar 组件的纵向滚动逻辑进行了重构和增强，包括统一滚动动画时长计算、用 ref 替换局部变量以保证状态一致性、优化初始化和内容动态变更时的处理流程，并补充了相关的单元测试和文档描述。Demo 示例也同步支持了纵向内容的动态增删。

Changes

文件/分组	变更摘要
src/packages/noticebar/noticebar.tsx src/packages/noticebar/noticebar.taro.tsx	纵向滚动逻辑重构：用 activeRef 代替局部变量、增加 isContainerReady 状态、统一动画时长计算、优化初始化与内容变更流程、重命名部分内部方法。
src/packages/noticebar/test/noticebar.spec.tsx	扩展纵向滚动与动态内容变更的测试用例，细化样式断言，增加定时器控制测试。
src/packages/noticebar/demos/h5/demo10.tsx src/packages/noticebar/demos/taro/demo10.tsx	Demo 支持纵向内容动态增删，NoticeBar 内容由 state 控制，增加增删按钮。
src/packages/noticebar/demos/h5/demo11.tsx	NoticeBar 纵向滚动 duration 属性由 1000 调整为 3000。
src/packages/noticebar/demo.tsx src/packages/noticebar/demo.taro.tsx	“customAm” 相关多语言描述更新，强调动态内容变更。
src/packages/noticebar/doc.md src/packages/noticebar/doc.taro.md src/packages/noticebar/doc.zh-TW.md src/packages/noticebar/doc.en-US.md	文档标题优化，突出纵向滚动动态内容变更的能力。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Demo
    participant NoticeBar

    User->>Demo: 点击“添加最后一项”按钮
    Demo->>Demo: 更新 list state
    Demo->>NoticeBar: 传递新的 list
    NoticeBar->>NoticeBar: 重新计算高度与偏移，重置动画

    User->>Demo: 点击“删除最后一项”按钮
    Demo->>Demo: 更新 list state
    Demo->>NoticeBar: 传递新的 list
    NoticeBar->>NoticeBar: 重新计算高度与偏移，重置动画

Suggested reviewers

• oasis-cloud
• irisSong

Poem

🐰
纵向滚动兔儿跳，
动态内容随手加，
定时动画分秒算，
状态同步不出错。
文档测试齐更新，
代码清爽乐呵呵！

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 91.66667% with 2 lines in your changes missing coverage. Please review.

Project coverage is 88.13%. Comparing base (8a1c4a0) to head (34ea61f).

Files with missing lines	Patch %	Lines
src/packages/noticebar/noticebar.tsx	91.66%	2 Missing :warning:

Additional details and impacted files

@@              Coverage Diff              @@
##           feat_v3.x    #3252      +/-   ##
=============================================
- Coverage      88.14%   88.13%   -0.01%     
=============================================
  Files            290      290              
  Lines          19110    19116       +6     
  Branches        2960     2960              
=============================================
+ Hits           16844    16848       +4     
- Misses          2261     2263       +2     
  Partials           5        5              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mingquan5830]

这个可以合并吗~