feat(ProLayout): 多级子菜单展开指示与层级边线

[chenshuai2144]

Summary

• Submenu title row: wrap label in *-submenu-title-text and append a DownOutlined arrow in *-submenu-arrow; rotate 180° when open (*-submenu-arrow--open) for inline and popup submenu title buttons.
• Nested depth: inline submenu child lists (ul.*-submenu-children) get data-pro-layout-nav-submenu-children and data-depth={depth}; for depth > 0, add left inset + border-inline-start using --pro-layout-nav-color-divider so second/third levels read as nested.
• Title layout: submenu title uses flex with label flexing and arrow fixed width; removed the generic > * flex rule that would break the two-child structure.

Testing

• pnpm exec vitest run tests/layout/index.test.tsx

Submitted by Cursor

  

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 30cd7711-4fa7-4d7e-9a0a-5c7707269ec4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/nav-submenu-level-indicator-f5cc

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request enhances the navigation menu by adding a submenu arrow icon and a vertical indicator line for nested submenus. It refactors the submenu title structure to use specific class names and applies CSS transitions for the arrow's rotation. Feedback points out that the new elements are not handled in the collapsed sidebar state, which could lead to layout issues. Additionally, there is a concern that the added padding on nested lists might cause inconsistent indentation when combined with existing depth-based styles.

[gemini-code-assist]

新引入的 submenu-title-text 和 submenu-arrow 元素在侧边栏收起（collapsed）状态下没有进行处理。在收起状态下，侧边栏宽度有限，通常只应显示图标。目前的实现会导致文字和箭头在收起时依然渲染，可能会造成视觉溢出或布局错乱。建议在 &--collapsed 选择器下增加隐藏这些元素的样式。

[gemini-code-assist]

在 submenu-children 列表上设置 paddingInlineStart: 10 会导致嵌套缩进的累加问题。由于菜单项（Item/Submenu Title）本身已经根据 depth 计算了绝对的 paddingInlineStart（depth * 16px），在 ul 容器上再次添加 padding 会使得深层级菜单的缩进步长变得不一致（例如从 1 级到 2 级的步长会从 16px 变为 26px）。建议通过伪元素或绝对定位来实现层级边线，以避免破坏原有的缩进逻辑。