feat: plugin-layout的菜单支持icon配置

packages/create-fes-app/templates/app/pc/src/components/PageLoading.vue

@@ -5,7 +5,7 @@
 </template>
 <script>
 import Spin from 'ant-design-vue/lib/spin';
-import 'ant-design-vue/lib/spin/style';
+import 'ant-design-vue/lib/spin/style/css';
 
 export default {
     setup() {

packages/fes-plugin-layout/src/runtime/views/403.vue

@@ -13,9 +13,9 @@
 <script>
 import { useRouter } from '@@/core/coreExports';
 import Result from 'ant-design-vue/lib/result';
-import 'ant-design-vue/lib/result/style';
+import 'ant-design-vue/lib/result/style/css';
 import Button from 'ant-design-vue/lib/button';
-import 'ant-design-vue/lib/button/style';
+import 'ant-design-vue/lib/button/style/css';
 
 export default {
     components: {

packages/fes-plugin-layout/src/runtime/views/404.vue

@@ -13,9 +13,9 @@
 <script>
 import { useRouter } from '@@/core/coreExports';
 import Result from 'ant-design-vue/lib/result';
-import 'ant-design-vue/lib/result/style';
+import 'ant-design-vue/lib/result/style/css';
 import Button from 'ant-design-vue/lib/button';
-import 'ant-design-vue/lib/button/style';
+import 'ant-design-vue/lib/button/style/css';
 
 export default {
     components: {

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -71,7 +71,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from '@@/core/coreExports';
 import Layout from 'ant-design-vue/lib/layout';
-import 'ant-design-vue/lib/layout/style';
+import 'ant-design-vue/lib/layout/style/css';
 import Menu from './Menu';
 import MultiTabProvider from './MultiTabProvider';
 import defaultLogo from '../assets/logo.png';

packages/fes-plugin-layout/src/runtime/views/Menu.vue

@@ -24,19 +24,20 @@
                                     <a-menu-item
                                         v-if="item2.access"
                                         :key="item2.path"
+                                        :title="item2.title"
                                     >
                                         {{item2.title}}
                                     </a-menu-item>
                                 </template>
                             </a-sub-menu>
-                            <a-menu-item v-else :key="item1.path">
+                            <a-menu-item v-else :key="item1.path" :title="item1.title">
                                 {{item1.title}}
                             </a-menu-item>
                         </template>
                     </template>
                 </a-sub-menu>
-                <a-menu-item v-else :key="item.path">
+                <a-menu-item v-else :key="item.path" :title="item.title">
-                    <UserOutlined />
+                    <MenuIcon v-if="item.icon" :icon="item.icon" />
                     <span>{{item.title}}</span>
                 </a-menu-item>
             </template>
@@ -48,10 +49,8 @@
 import { toRefs, computed } from 'vue';
 import { useRoute, useRouter } from '@@/core/coreExports';
 import Menu from 'ant-design-vue/lib/menu';
-import 'ant-design-vue/lib/menu/style';
+import 'ant-design-vue/lib/menu/style/css';
-import {
+import MenuIcon from './MenuIcon'
-    UserOutlined
-} from '@ant-design/icons-vue';
 import { addAccessTag } from '../helpers/pluginAccess';
 
 export default {
@@ -59,7 +58,7 @@ export default {
         [Menu.name]: Menu,
         [Menu.SubMenu.name]: Menu.SubMenu,
         [Menu.Item.name]: Menu.Item,
-        UserOutlined
+        MenuIcon
     },
     props: {
         menus: {

packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue

@@ -0,0 +1,30 @@
+<script>
+// 使用 ant-design/icons-vue
+// 使用 本地 svg 图片
+// 使用 远程 svg 地址
+import { ref, onMounted } from 'vue';
+// import AntdIcon from '@ant-design/icons-vue/es/components/AntdIcon';
+export default {
+    props: {
+        icon: String
+    },
+    setup(props) {
+        const AIcon = ref(null);
+        onMounted(()=>{
+            const iconName = props.icon.slice(0, 1).toUpperCase() + props.icon.slice(1) + 'Outlined';
+            import(`@ant-design/icons-vue/es/icons/${iconName}`).then(res=>{
+                AIcon.value = res.default;
+            }).catch(e=>{
+                console.warn(`[fes-layout] icon ${props.icon} 不存在！`)
+            })
+        })
+        return ()=>{
+            if(AIcon.value){
+                return <AIcon.value />
+            }
+            return null
+        }
+
+    }
+}
+</script>

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -45,9 +45,9 @@ import { reactive, unref } from 'vue';
 import Tabs from 'ant-design-vue/lib/tabs';
 import Dropdown from 'ant-design-vue/lib/dropdown';
 import Menu from 'ant-design-vue/lib/menu';
-import 'ant-design-vue/lib/menu/style';
+import 'ant-design-vue/lib/menu/style/css';
-import 'ant-design-vue/lib/dropdown/style';
+import 'ant-design-vue/lib/dropdown/style/css';
-import 'ant-design-vue/lib/tabs/style';
+import 'ant-design-vue/lib/tabs/style/css';
 import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
 import { useRouter, useRoute } from '@@/core/coreExports';
 

packages/fes-plugin-locale/src/runtime/views/SelectLang.vue

@@ -19,8 +19,8 @@
 <script>
 import Dropdown from 'ant-design-vue/lib/dropdown';
 import Menu from 'ant-design-vue/lib/menu';
-import 'ant-design-vue/lib/dropdown/style';
+import 'ant-design-vue/lib/dropdown/style/css';
-import 'ant-design-vue/lib/menu/style';
+import 'ant-design-vue/lib/menu/style/css';
 import { GlobalOutlined } from '@ant-design/icons-vue';
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';

packages/fes-template/.env

@@ -1 +1,2 @@
 FES_APP_PUBLISH_ERROR_PAGE=hello
+ANALYZE=1

packages/fes-template/.fes.js

@@ -34,8 +34,10 @@ export default {
         navigation: 'mixin',
         menus: [{
             name: 'index',
+            icon: 'user'
         }, {
             name: 'onepiece',
+            icon: 'user',
             path: 'https://www.baidu.com'
         }, {
             name: 'store'

packages/fes-template/src/components/PageLoading.vue

@@ -5,7 +5,7 @@
 </template>
 <script>
 import Spin from 'ant-design-vue/lib/spin';
-import 'ant-design-vue/lib/spin/style';
+import 'ant-design-vue/lib/spin/style/css';
 
 export default {
     setup() {