fix(timeline): add description prop for configuration mode display Fixes #3070 #3822
Conversation
WalkthroughAdded a new public string prop Changes
Sequence Diagram(s)sequenceDiagram
participant Consumer as Consumer (uses timeline)
participant TimelineItem as TimelineItem (pc.vue)
alt description prop provided
Consumer->>TimelineItem: pass prop description="..."
TimelineItem->>TimelineItem: render description prop
note right of TimelineItem `#DFF0D8`: primary path (uses prop)
else no description prop
Consumer->>TimelineItem: pass node with node.description
TimelineItem->>TimelineItem: render node.description
note right of TimelineItem `#FDF2D7`: fallback path (node.description)
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🔇 Additional comments (1)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/vue/src/timeline-item/src/pc.vue (1)
174-180: Update API documentation to includedescriptionprop fortimeline-itemcomponentThe
descriptionprop is actively used in the timeline-item component (pc.vue line 176 and template lines 54-58) but is not documented in the API docs. Thetimeline-itemsection inexamples/sites/demos/apis/time-line.jscurrently only documentsline-width,node, andspaceprops.Add a
descriptionprop entry to thetimeline-itemcomponent's props array inexamples/sites/demos/apis/time-line.js(after thespaceprop) to match the parent component's documentation style.
🧹 Nitpick comments (2)
packages/vue/src/timeline-item/src/pc.vue (1)
52-60: Description fallback logic works but consider layout consistency and simpler checksThe new fallback (
descriptionprop →node.description) is reasonable and backward compatible, but two points:
- In the vertical layout (Lines 155–159), description rendering still uses only
node.description. Ifdescriptionis meant to override the node text in all layouts, you may want to apply the same fallback there for consistency, or explicitly confirm it is only for the horizontal/text-position='right' mode.- The explicit
!== undefined && !== nullchecks are a bit verbose;description != null(and similarly fornode.description) would keep behavior while simplifying the template.examples/sites/demos/apis/time-line.js (1)
247-257: Clarify semantics of newdescriptionprop and align with existing APIThe new
descriptionprop fortime-lineis fine mechanically, but its role is a bit unclear compared to existing API:
- Other similar props (
name-field,time-field,tips-field,auto-color-field) are field selectors, whiledescriptionhere is described generically as "Timeline description". If this is also a field selector fornode.description, consider naming itdescription-field(or adjusting the description text) to match the pattern.- Templates in
packages/vue/src/timeline-item/src/pc.vuealready readnode.description, andtimeline-itemnow exposes adescriptionprop. It might be worth tightening the doc copy to specify whether this prop controls the node description field, a global description string, or configuration-mode metadata.Also consider, in a follow-up, adding an optional
description?: stringto theITimelineItemtype to document the existingnode.descriptionusage.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
examples/sites/demos/apis/time-line.js(1 hunks)packages/vue/src/timeline-item/src/pc.vue(2 hunks)
|
您好，感谢您的PR，这个PR提交是为了解决什么样的场景问题呢？能不能描述一下呢？ |
Hello, thank you for your PR. What kind of scenario problem is this PR submitted to solve? Can you describe it? |
|
你好，这个改动主要是为了解决描述文本数据来源单一的问题。现在组件只能从 node 对象里取 description 字段，但实际项目中描述文本可能来自不同地方，有些接口返回的字段名不是 description，可能是 desc、content等
<!-- 之前只能这样用 -->
<timeline-item :node="{ description: '文本' }" />
<!-- 现在可以更灵活 -->
<timeline-item description="直接传入文本" />
<timeline-item :description="动态变量" />
<timeline-item :node="原有方式继续支持" />
其他UI框架类似设计的例子：Element UI 的Steps 组件中有类似思路，Ant Design Vue 的 Timeline 组件也采用类似模式，这些主流框架都遵循"属性配置 + 插槽自定义"的组合模式，这样既保持了向后兼容，又提供了更便捷的数据传入方式
…------------------ 原始邮件 ------------------
发件人: "opentiny/tiny-vue" ***@***.***>;
发送时间: 2025年11月20日(星期四) 下午2:46
***@***.***>;
***@***.******@***.***>;
主题: Re: [opentiny/tiny-vue] fix(timeline): add description prop for configuration mode display Fixes #3070 (PR #3822)
Issues-translate-bot left a comment (opentiny/tiny-vue#3822)
Bot detected the issue body's language is not English, translate it automatically.
Hello, thank you for your PR. What kind of scenario problem is this PR submitted to solve? Can you describe it?
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
| desc: { | ||
| 'zh-CN': '时间线描述', | ||
| 'en-US': 'Timeline description' | ||
| }, |
There was a problem hiding this comment.
加上配置项表示整个特性是3.28.0版本添加的哈：meta: {
stable: '3.28.0'
}
3 participants
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
descriptionproperty to the timeline component, enabling customizable item descriptions across PC and mobile-first views.descriptionproperty when provided, falling back to existing item content otherwise.✏️ Tip: You can customize this high-level summary in your review settings.