From 4d052bab1946265b5bd23c35e343c0ef716f54f1 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Sun, 7 Mar 2021 21:37:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20plugin-layout=E7=9A=84=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=94=AF=E6=8C=81icon=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/pc/src/components/PageLoading.vue     |  2 +-
 .../src/runtime/views/403.vue                 |  4 +--
 .../src/runtime/views/404.vue                 |  4 +--
 .../src/runtime/views/BaseLayout.vue          |  2 +-
 .../src/runtime/views/Menu.vue                | 15 +++++-----
 .../src/runtime/views/MenuIcon.vue            | 30 +++++++++++++++++++
 .../src/runtime/views/MultiTabProvider.vue    |  6 ++--
 .../src/runtime/views/SelectLang.vue          |  4 +--
 packages/fes-template/.env                    |  3 +-
 packages/fes-template/.fes.js                 |  4 ++-
 .../src/components/PageLoading.vue            |  2 +-
 11 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue

diff --git a/packages/create-fes-app/templates/app/pc/src/components/PageLoading.vue b/packages/create-fes-app/templates/app/pc/src/components/PageLoading.vue
index 88c79423..14f1165e 100644
--- a/packages/create-fes-app/templates/app/pc/src/components/PageLoading.vue
+++ b/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() {
diff --git a/packages/fes-plugin-layout/src/runtime/views/403.vue b/packages/fes-plugin-layout/src/runtime/views/403.vue
index b1c61d9d..a40e0e2f 100644
--- a/packages/fes-plugin-layout/src/runtime/views/403.vue
+++ b/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: {
diff --git a/packages/fes-plugin-layout/src/runtime/views/404.vue b/packages/fes-plugin-layout/src/runtime/views/404.vue
index 2b1972fa..41a73851 100644
--- a/packages/fes-plugin-layout/src/runtime/views/404.vue
+++ b/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: {
diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index df25b5a9..84a86a26 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/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';
diff --git a/packages/fes-plugin-layout/src/runtime/views/Menu.vue b/packages/fes-plugin-layout/src/runtime/views/Menu.vue
index 1240fdec..05b4403f 100644
--- a/packages/fes-plugin-layout/src/runtime/views/Menu.vue
+++ b/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">
-                    <UserOutlined />
+                <a-menu-item v-else :key="item.path" :title="item.title">
+                    <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 {
-    UserOutlined
-} from '@ant-design/icons-vue';
+import 'ant-design-vue/lib/menu/style/css';
+import MenuIcon from './MenuIcon'
 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: {
diff --git a/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue b/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
new file mode 100644
index 00000000..1422f39d
--- /dev/null
+++ b/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>
diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
index 1b17ed8c..269ecef5 100644
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/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/dropdown/style';
-import 'ant-design-vue/lib/tabs/style';
+import 'ant-design-vue/lib/menu/style/css';
+import 'ant-design-vue/lib/dropdown/style/css';
+import 'ant-design-vue/lib/tabs/style/css';
 import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
 import { useRouter, useRoute } from '@@/core/coreExports';
 
diff --git a/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue b/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
index 13818b70..e01409e4 100644
--- a/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
+++ b/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/menu/style';
+import 'ant-design-vue/lib/dropdown/style/css';
+import 'ant-design-vue/lib/menu/style/css';
 import { GlobalOutlined } from '@ant-design/icons-vue';
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
diff --git a/packages/fes-template/.env b/packages/fes-template/.env
index 24f1c637..84b044a1 100644
--- a/packages/fes-template/.env
+++ b/packages/fes-template/.env
@@ -1 +1,2 @@
-FES_APP_PUBLISH_ERROR_PAGE=hello
\ No newline at end of file
+FES_APP_PUBLISH_ERROR_PAGE=hello
+ANALYZE=1
diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js
index ab30984a..8b1b4498 100644
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@@ -24,7 +24,7 @@ export default {
     proxy: {
         '/v2': {
             'target': 'https://api.douban.com/',
-            'changeOrigin': true, 
+            'changeOrigin': true,
         },
     },
     layout: {
@@ -34,8 +34,10 @@ export default {
         navigation: 'mixin',
         menus: [{
             name: 'index',
+            icon: 'user'
         }, {
             name: 'onepiece',
+            icon: 'user',
             path: 'https://www.baidu.com'
         }, {
             name: 'store'
diff --git a/packages/fes-template/src/components/PageLoading.vue b/packages/fes-template/src/components/PageLoading.vue
index 88c79423..14f1165e 100644
--- a/packages/fes-template/src/components/PageLoading.vue
+++ b/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() {