feat(nav-menu): [nav-menu] 新增 icon 属性及icon slot，支持配置菜单图标

[hashiqi12138]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] The commit message follows our Commit Message Guidelines
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

What is the current behavior?

新增 icon 属性及icon slot，支持配置菜单图标

Issue Number: #https://github.com/opentiny/tiny-vue/issues/3104

What is the new behavior?

新增 icon 属性及icon slot，支持配置菜单图标

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Summary by CodeRabbit

• New Features

  • Navigation menus now support customizable icons for each item, with flexible display options.
  • New demo views highlight icon integration and slot-based customization for a richer navigation experience.

• Tests

  • Added tests to verify proper rendering and behavior of menu icons, ensuring that custom icons display as intended.

• Style

  • Updated visual styling for menu icons, including refined hover effects and adjustable sizing and spacing for enhanced appearance.

[coderabbitai[bot]]

Walkthrough

This pull request introduces an icon slot to the navigation menu component and updates related interfaces to accept an optional icon property. New Vue component files and demos have been added to showcase menu icon functionality, along with tests verifying proper icon rendering and slot precedence. Additionally, updates in the renderless and theme packages incorporate the icon property in data structures and styling. These modifications enable customizable menu icons in both the API and the rendered UI.

Changes

File(s)	Summary
examples/sites/demos/apis/nav-menu.js	Added a new icon slot with properties (defaultValue, desc, mode, pcDemo) in the API definition and updated the IDataItem interface to include an optional icon property.
examples/sites/demos/pc/app/nav-menu/menu-icon-composition-api.vue, examples/sites/demos/pc/app/nav-menu/menu-icon.vue, examples/sites/demos/pc/app/nav-menu/menu-icon.spec.ts, examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js	Introduced new Vue components implementing a navigation menu with icon support, added a new demo entry for menu icons, and created tests to verify icon and slot rendering.
packages/renderless/src/nav-menu/index.ts, packages/renderless/types/nav-menu.type.ts	Updated data initialization to include the icon property and modified tooltip width calculation; enhanced type definitions by adding an optional icon property to the menu item interface.
packages/theme/src/nav-menu/index.less, packages/theme/src/nav-menu/vars.less	Added a new .menu-icon class and several CSS custom properties to style navigation menu icons, including margin, size, and color with hover effects.
packages/vue/src/nav-menu/__tests__/nav-menu.test.tsx, packages/vue/src/nav-menu/src/pc.vue	Extended test files with new icon components to verify icon rendering and slot priority; updated the component markup to conditionally render icons before item titles based on slot presence or the icon attribute.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant N as NavMenu Component
  participant D as DataItem
  
  U->>N: Request menu rendering
  N->>D: Retrieve menu item data (with optional icon)
  alt Icon slot provided
    N->>N: Render custom icon from slot
  else if item.icon exists
    N->>N: Render default icon from data attribute
  else
    N->>N: Render item without icon
  end
  N->>U: Display menu with appropriate icon

Possibly related PRs

• opentiny/tiny-vue#2445: Involves icon handling for SVG visibility in the action menu, creating a similar context for icon updates.
• opentiny/tiny-vue#1849: Enhances the navigation menu design with modifications to icon functionality.
• opentiny/tiny-vue#2390: Focuses on icon slot functionality in components, correlating with the new icon slot introduced here.

Suggested labels

enhancement

Suggested reviewers

• zzcr

Poem

I'm a bouncy bunny in the code,
Hopping through slots with a happy mode.
Icons now dance next to each line,
In menus so cool, perfectly designed.
With carrots and code, I celebrate this load!
🐰💻

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

examples/sites/demos/apis/nav-menu.js

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

examples/sites/demos/pc/app/nav-menu/menu-icon-composition-api.vue

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

examples/sites/demos/pc/app/nav-menu/menu-icon.spec.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

• 6 others

✨ 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.
  • Generate unit testing code for this file.
  • 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 generate unit testing code for this file.
  • @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 generate unit testing code.
  • @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.

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 resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @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.

[github-actions[bot]]

[e2e-test-warn] The component to be tested is missing.

The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".

Please make sure you've read our contributing guide

[petercat-assistant[bot]]

Walkthrough

此PR为nav-menu组件新增了icon属性和icon插槽，允许用户自定义菜单图标。此功能增强了菜单的可配置性和视觉表现力。

Changes

文件	概要
examples/sites/demos/apis/nav-menu.js	添加了icon属性的描述和默认值。
examples/sites/demos/pc/app/nav-menu/menu-icon-composition-api.vue	新增了一个示例，展示如何使用icon属性配置菜单图标。
examples/sites/demos/pc/app/nav-menu/menu-icon.spec.ts	添加了测试用例，验证菜单图标的显示。
examples/sites/demos/pc/app/nav-menu/menu-icon.vue	新增了一个示例，展示如何使用icon插槽配置菜单图标。
examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js	添加了关于icon属性的文档说明。
packages/renderless/src/nav-menu/index.ts	在菜单项中添加了icon属性。
packages/renderless/types/nav-menu.type.ts	更新了类型定义，支持icon属性。
packages/theme/src/nav-menu/index.less	添加了样式以支持菜单图标的显示和悬浮效果。
packages/theme/src/nav-menu/vars.less	定义了菜单图标的样式变量。
packages/vue/src/nav-menu/__tests__/nav-menu.test.tsx	添加了测试用例，验证icon插槽的优先级高于icon属性。
packages/vue/src/nav-menu/src/pc.vue	在菜单组件中实现了icon属性和插槽的支持。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Walkthrough

This PR has added an icon attribute and an icon slot for the nav-menu component, allowing users to customize menu icons. This feature enhances the configurability and visual expression of the menu.

Changes

Documents	Summary
examples/sites/demos/apis/nav-menu.js	Added description and default values ​​for the icon property.
examples/sites/demos/pc/app/nav-menu/menu-icon-composition-api.vue	Added an example showing how to configure the menu icon using the icon property.
examples/sites/demos/pc/app/nav-menu/menu-icon.spec.ts	Added a test case to verify the display of the menu icon.
examples/sites/demos/pc/app/nav-menu/menu-icon.vue	Added an example showing how to configure the menu icon using the icon slot.
examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js	Added documentation for the icon property.
packages/renderless/src/nav-menu/index.ts	Added the icon property to the menu item.
packages/renderless/types/nav-menu.type.ts	Updated type definition and support the icon property.
packages/theme/src/nav-menu/index.less	Added styles to support the display and levitation effects of menu icons.
packages/theme/src/nav-menu/vars.less	Defines the style variables for the menu icon.
packages/vue/src/nav-menu/__tests__/nav-menu.test.tsx	Added a test case to verify that the icon slot has a higher priority than the icon property.
packages/vue/src/nav-menu/src/pc.vue	Support for the icon property and slot are implemented in the menu component.

[zzcr]

在标题中可以用:[nav-menu] 触发下e2e测试用例哈，可以参考下其他的mr或者贡献指南

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

In the title, you can use: [nav-menu] to trigger the e2e test case. You can refer to other mr or contribution guides.