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

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

@@ -127,6 +127,16 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'slot-toolbar'
+        },
+        {
+          name: 'icon',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义菜单图标插槽',
+            'en-US': 'Customize the menu icon'
+          },
+          mode: ['pc'],
+          pcDemo: 'menu-icon'
         }
       ]
     }
@@ -153,6 +163,7 @@ interface IMenuItem {
 interface IDataItem {
   title: string
   url: string
+  icon?: Commonent 
   children?: IDataItem[]
 }`
     },

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

@@ -0,0 +1,150 @@
+<template>
+  <div class="preview">
+    <tiny-nav-menu :data="menuData"></tiny-nav-menu>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyNavMenu } from '@opentiny/vue'
+import { iconTotal, iconGenerating } from '@opentiny/vue-icon'
+
+const menuData = ref([
+  {
+    title: '首页',
+    url: '',
+    id: '1',
+    icon: iconTotal()
+  },
+  {
+    title: '指南',
+    url: '',
+    id: '2',
+    children: [
+      {
+        title: '引入组件',
+        url: '',
+        id: '2-1',
+        icon: iconTotal()
+      },
+      {
+        title: '后端适配器',
+        url: '',
+        id: '2-2'
+      }
+    ]
+  },
+  {
+    title: '组件',
+    url: '',
+    id: '3',
+    children: [
+      {
+        title: '表单组件',
+        url: '',
+        id: '3-1',
+        children: [
+          {
+            title: 'Datepicker 日期',
+            url: 'datepicker',
+            id: '3-1-1',
+            icon: iconTotal()
+          },
+          {
+            title: 'Cascader 级联选择器',
+            url: 'cascader',
+            id: '3-1-2',
+            icon: iconGenerating()
+          },
+          {
+            title: 'DropTimes 下拉时间',
+            url: 'droptimes',
+            id: '3-1-3'
+          }
+        ]
+      },
+      {
+        title: '数据展示',
+        url: '',
+        id: '3-2',
+        children: [
+          {
+            title: 'Card 卡片',
+            url: 'card',
+            id: '3-2-1'
+          },
+          {
+            title: 'Collapse 折叠面板',
+            url: 'collapse',
+            id: '3-2-2'
+          },
+          {
+            title: 'Guide 引导',
+            url: 'guide',
+            id: '3-2-3'
+          }
+        ]
+      },
+      {
+        title: '导航组件',
+        url: '',
+        id: '3-3',
+        children: [
+          {
+            title: 'ToggleMenu 收缩菜单',
+            url: 'toggleMenu',
+            id: '3-3-1'
+          },
+          {
+            title: 'TreeMenu 树型菜单',
+            url: 'treemenu',
+            id: '3-3-2'
+          },
+          {
+            title: 'Breadcrumb 面包屑',
+            url: 'breadcrumb',
+            id: '3-3-3'
+          }
+        ]
+      },
+      {
+        title: '业务组件',
+        url: '',
+        id: '3-4',
+        children: [
+          {
+            title: 'Amount 金额',
+            url: 'amount',
+            id: '3-4-1'
+          },
+          {
+            title: 'Area 片区',
+            url: 'area',
+            id: '3-4-2'
+          },
+          {
+            title: 'Company 公司',
+            url: 'company',
+            id: '3-4-3'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: '其他',
+    url: 'crop',
+    id: '4'
+  }
+])
+</script>
+
+<style scoped>
+.preview {
+  min-height: 450px;
+}
+
+.preview .tiny-nav-menu a:hover {
+  text-decoration: none;
+}
+</style>

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

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('菜单图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('nav-menu#menu-icon')
+  const preview = page.locator('#menu-icon')
+  const icon = preview.locator('.menu-icon')
+  const iconSvg = preview.locator('.menu-icon svg')
+  await expect(icon).toBeVisible()
+  await expect(iconSvg).toBeVisible()
+})

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="preview">
+    <h4>配置模式</h4>
+    <tiny-nav-menu :data="menuData" overflow="fixed"> </tiny-nav-menu>
+
+    <h4>slot 模式</h4>
+    <tiny-nav-menu :data="menuData" overflow="fixed">
+      <template #icon="{ selected, index, item }">
+        <IconGenerating v-if="selected" />
+        <IconTotal v-else />
+      </template>
+    </tiny-nav-menu>
+  </div>
+</template>
+
+<script lang="jsx">
+import { TinyNavMenu } from '@opentiny/vue'
+import { iconTotal, iconGenerating } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyNavMenu,
+    IconGenerating: iconGenerating(),
+    IconTotal: iconTotal()
+  },
+  data() {
+    return {
+      menuData: [
+        {
+          title: '首页',
+          url: '',
+          id: '1',
+          icon: iconTotal()
+        },
+        {
+          title: '指南',
+          url: '',
+          id: '2',
+          children: [
+            {
+              title: '引入组件',
+              url: '',
+              id: '2-1',
+              icon: iconTotal()
+            },
+            {
+              title: '后端适配器',
+              url: '',
+              id: '2-2'
+            }
+          ]
+        },
+        {
+          title: '组件',
+          url: '',
+          id: '3',
+          children: [
+            {
+              title: '表单组件',
+              url: '',
+              id: '3-1',
+              children: [
+                {
+                  title: 'Datepicker 日期',
+                  url: 'datepicker',
+                  id: '3-1-1',
+                  icon: iconTotal()
+                },
+                {
+                  title: 'Cascader 级联选择器',
+                  url: 'cascader',
+                  id: '3-1-2',
+                  icon: iconGenerating()
+                },
+                {
+                  title: 'DropTimes 下拉时间',
+                  url: 'droptimes',
+                  id: '3-1-3'
+                }
+              ]
+            },
+            {
+              title: '数据展示',
+              url: '',
+              id: '3-2',
+              children: [
+                {
+                  title: 'Card 卡片',
+                  url: 'card',
+                  id: '3-2-1'
+                },
+                {
+                  title: 'Collapse 折叠面板',
+                  url: 'collapse',
+                  id: '3-2-2'
+                },
+                {
+                  title: 'Guide 引导',
+                  url: 'guide',
+                  id: '3-2-3'
+                }
+              ]
+            },
+            {
+              title: '导航组件',
+              url: '',
+              id: '3-3',
+              children: [
+                {
+                  title: 'ToggleMenu 收缩菜单',
+                  url: 'toggleMenu',
+                  id: '3-3-1'
+                },
+                {
+                  title: 'TreeMenu 树型菜单',
+                  url: 'treemenu',
+                  id: '3-3-2'
+                },
+                {
+                  title: 'Breadcrumb 面包屑',
+                  url: 'breadcrumb',
+                  id: '3-3-3'
+                }
+              ]
+            },
+            {
+              title: '业务组件',
+              url: '',
+              id: '3-4',
+              children: [
+                {
+                  title: 'Amount 金额',
+                  url: 'amount',
+                  id: '3-4-1'
+                },
+                {
+                  title: 'Area 片区',
+                  url: 'area',
+                  id: '3-4-2'
+                },
+                {
+                  title: 'Company 公司',
+                  url: 'company',
+                  id: '3-4-3'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: '其他',
+          url: 'crop',
+          id: '4'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.preview {
+  min-height: 450px;
+}
+
+.preview > .tiny-nav-menu {
+  margin-bottom: 24px;
+}
+
+.preview .tiny-nav-menu a:hover {
+  text-decoration: none;
+}
+</style>

examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js

@@ -54,6 +54,18 @@ export default {
       },
       codeFiles: ['slot-logo.vue']
     },
+    {
+      demoId: 'menu-icon',
+      name: {
+        'zh-CN': '菜单图标',
+        'en-US': 'Menu Icon'
+      },
+      desc: {
+        'zh-CN': '通过 <code>icon</code> 字段配置展示菜单图标。',
+        'en-US': 'Display menu icon through <code>icon</code> field of data.'
+      },
+      codeFiles: ['menu-icon.vue']
+    },
     {
       demoId: 'before-skip',
       name: {

packages/renderless/src/nav-menu/index.ts

@@ -169,7 +169,8 @@ export const initData =
         id: item.id,
         pid: item.pid,
         isFullUrl: props.allowFullUrl && isFullUrl(router),
-        target: item.target
+        target: item.target,
+        icon: item.icon
       }
     }
 
@@ -577,7 +578,7 @@ export const handleTitleMouseenter =
     const text = target.textContent
     const font = window.getComputedStyle(target).font
     const rect = target.getBoundingClientRect()
-    const res = omitText(text, font, rect.width + 2)
+    const res = omitText(text, font, rect.width + 4)
 
     if (target && res.o) {
       const tooltip = vm.$refs.tooltip