fix: outline tree width not engout when tree is very deep #1092
Conversation
修复大纲树层级过深时，宽度不够，没有自动横向滚动的 bug
WalkthroughThis pull request introduces enhancements to the tree component by implementing a new reactive reference Changes
Sequence Diagram(s)sequenceDiagram
participant C as Main.vue Component
participant FS as filterSchema Function
participant TG as tiny-grid Component
C->>FS: Call filterSchema(data, depth=0)
FS-->>C: Return { data, maxDepth }
C->>C: Recompute treeWidth (maxDepth * 16 + 120)
C->>TG: Bind computed treeWidth to style
Possibly related PRs
Suggested reviewers
Poem
Tip 🌐 Web search-backed reviews and chat
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
packages/plugins/tree/src/Main.vue (1)
336-338: Remove fixed width from tree-box CSS class.The fixed width of 200px might conflict with the dynamic width calculation. Consider removing or adjusting this constraint.
.tree-box { display: flex; - width: 200px; justify-content: space-between; }
🧹 Nitpick comments (1)
packages/plugins/tree/src/Main.vue (1)
84-86: Extract magic numbers into named constants.While the comment explains the numbers, it would be more maintainable to extract them into named constants.
+ const INDENT_WIDTH = 16 // Default tiny-grid indentation width + const MIN_TREE_WIDTH = 120 // Minimum tree width const maxDepth = ref(1) - // 树宽度：最大深度 * 16 + 120，其中 16 为每层缩进的宽度(tiny-grid 默认的缩进宽度)，120 为树的最小宽度 - const treeWidth = computed(() => `${maxDepth.value * 16 + 120}px`) + const treeWidth = computed(() => `${maxDepth.value * INDENT_WIDTH + MIN_TREE_WIDTH}px`)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/plugins/tree/src/Main.vue(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (2)
packages/plugins/tree/src/Main.vue (2)
21-21: LGTM! Dynamic width binding looks good.The width is now dynamically calculated based on the tree's depth, which should fix the issue with deep hierarchies.
309-310: LGTM! Proper exposure of the new computed property.The
treeWidthcomputed property is correctly exposed to the template.
|
|
||
| const filterSchema = (data) => { | ||
| const translateChild = (data) => { | ||
| maxDepth.value = 0 |
There was a problem hiding this comment.
代码互相耦合比较严重， 并且在中间过程中反复修改maxDepth。连锁可能造成一直修改treewiidth
建议用闭包的形式 计算后同时返回 ，内部的最大值和过滤后的数据结果， 计算完毕后再复制给外部的maxDepth。
|
在 PR：#1050 一并修复，该PR关闭 |
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
修复大纲树层级过深时，宽度不够，没有自动横向滚动的 bug。
【问题描述】
页面组件层级过深的时候，大纲树插件面板宽度不够，难以操作
【问题分析】
tiny-grid 树表的宽度默认即为父级的宽度，当层级过深时，需要手动声明宽度。
【修复方案】
计算最深层级，手动声明宽度。
What is the current behavior?
Issue Number: #1088
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit