inl-ui 0.1.0-rc.21 → 0.1.0-rc.22

package/dist/components/index.cjs

@@ -9,12 +9,10 @@ var antDesignVue = require('ant-design-vue');
 var vueRouter = require('vue-router');
 var _ = require('lodash');
 var qiankun = require('qiankun');
-var appList = require('@/micro-apps/apps');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-var appList__default = /*#__PURE__*/_interopDefaultLegacy(appList);
 
 const config = {
   prefix: "inl",
@@ -235,14 +233,14 @@ const Header = vue.defineComponent({
           "class": "avatar",
           "src": "https://joeschmoe.io/api/v1/random"
         }, null)]
-      })])]), vue.createVNode("div", {
-        "class": "logout",
-        "onClick": () => emit("logout")
-      }, [vue.createVNode(iconsVue.LogoutOutlined, {
-        "style": {
-          fontSize: "20px"
-        }
-      }, null)])]);
+      })])]), vue.createVNode(antDesignVue.Popconfirm, {
+        "title": "\u786E\u5B9A\u9000\u51FA\u5417?",
+        "onConfirm": () => emit("logout")
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "logout"
+        }, [vue.createVNode(iconsVue.LogoutOutlined, null, null)])]
+      })]);
     };
   }
 });
@@ -327,7 +325,7 @@ function useActiveApp() {
   return activeAppName;
 }
 
-function useMicroApp() {
+function useMicroApp(appList) {
   const route = vueRouter.useRoute();
   const activeAppName = useActiveApp();
   const loadAppList = vue.ref([]);
@@ -335,7 +333,7 @@ function useMicroApp() {
     const microAppName = activeAppName.value;
     const loadApp = loadAppList.value.find(item => item.name === microAppName);
     if (loadApp) return;
-    const microApp = appList__default["default"].find(item => item.name === microAppName);
+    const microApp = appList.find(item => item.name === microAppName);
     if (!microApp) return;
     const domId = `microApp_${microAppName}`;
     const app = qiankun.loadMicroApp({
@@ -496,6 +494,10 @@ const PageContent = vue.defineComponent({
     extraPages: {
       type: Array,
       required: true
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -506,7 +508,7 @@ const PageContent = vue.defineComponent({
     const activeKey = vue.ref();
     const tabList = vue.ref([]);
     const activeAppName = useActiveApp();
-    const loadAppList = useMicroApp();
+    const loadAppList = useMicroApp(props.appList);
     const iframeList = vue.ref([]);
     const extraPageList = vue.ref([]);
     const handleMenuChange = ___default["default"].throttle(val => {
@@ -621,6 +623,10 @@ const Layout = vue.defineComponent({
     },
     logo: {
       type: String
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -680,7 +686,8 @@ const Layout = vue.defineComponent({
           default: () => [vue.createVNode(PageContent, {
             "currMenu": currMenu.value,
             "menu": props.userMenu,
-            "extraPages": props.extraPages
+            "extraPages": props.extraPages,
+            "appList": props.appList
           }, null)]
         })]
       })]

package/dist/components/index.d.ts

@@ -53,6 +53,10 @@ declare const _default: vue.DefineComponent<{
     logo: {
         type: StringConstructor;
     };
+    appList: {
+        type: PropType<any[]>;
+        required: true;
+    };
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("globalSearch" | "logout")[], "globalSearch" | "logout", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     userMenu: {
         type: PropType<MenuList>;
@@ -76,6 +80,10 @@ declare const _default: vue.DefineComponent<{
     logo: {
         type: StringConstructor;
     };
+    appList: {
+        type: PropType<any[]>;
+        required: true;
+    };
 }>> & {
     onGlobalSearch?: ((...args: any[]) => any) | undefined;
     onLogout?: ((...args: any[]) => any) | undefined;

package/dist/components/index.js

@@ -1,11 +1,10 @@
 import { defineComponent, createVNode, ref, watch, resolveComponent, isVNode, computed, inject, withDirectives, vShow } from 'vue';
 import { createFromIconfontCN, SearchOutlined, LogoutOutlined, LeftOutlined, CloseOutlined, RightOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useMounted, useThrottleFn, useVModel, watchArray, useToggle } from '@vueuse/core';
-import { Menu, MenuItem, Input, Badge, Avatar, SubMenu, Dropdown, Layout as Layout$1, LayoutHeader, LayoutSider, LayoutContent } from 'ant-design-vue';
+import { Menu, MenuItem, Input, Badge, Avatar, Popconfirm, SubMenu, Dropdown, Layout as Layout$1, LayoutHeader, LayoutSider, LayoutContent } from 'ant-design-vue';
 import { useRoute, useRouter } from 'vue-router';
 import _, { differenceBy } from 'lodash';
 import { loadMicroApp } from 'qiankun';
-import appList from '@/micro-apps/apps';
 
 const config = {
   prefix: "inl",
@@ -226,14 +225,14 @@ const Header = defineComponent({
           "class": "avatar",
           "src": "https://joeschmoe.io/api/v1/random"
         }, null)]
-      })])]), createVNode("div", {
-        "class": "logout",
-        "onClick": () => emit("logout")
-      }, [createVNode(LogoutOutlined, {
-        "style": {
-          fontSize: "20px"
-        }
-      }, null)])]);
+      })])]), createVNode(Popconfirm, {
+        "title": "\u786E\u5B9A\u9000\u51FA\u5417?",
+        "onConfirm": () => emit("logout")
+      }, {
+        default: () => [createVNode("div", {
+          "class": "logout"
+        }, [createVNode(LogoutOutlined, null, null)])]
+      })]);
     };
   }
 });
@@ -318,7 +317,7 @@ function useActiveApp() {
   return activeAppName;
 }
 
-function useMicroApp() {
+function useMicroApp(appList) {
   const route = useRoute();
   const activeAppName = useActiveApp();
   const loadAppList = ref([]);
@@ -487,6 +486,10 @@ const PageContent = defineComponent({
     extraPages: {
       type: Array,
       required: true
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -497,7 +500,7 @@ const PageContent = defineComponent({
     const activeKey = ref();
     const tabList = ref([]);
     const activeAppName = useActiveApp();
-    const loadAppList = useMicroApp();
+    const loadAppList = useMicroApp(props.appList);
     const iframeList = ref([]);
     const extraPageList = ref([]);
     const handleMenuChange = _.throttle(val => {
@@ -612,6 +615,10 @@ const Layout = defineComponent({
     },
     logo: {
       type: String
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -671,7 +678,8 @@ const Layout = defineComponent({
           default: () => [createVNode(PageContent, {
             "currMenu": currMenu.value,
             "menu": props.userMenu,
-            "extraPages": props.extraPages
+            "extraPages": props.extraPages,
+            "appList": props.appList
           }, null)]
         })]
       })]

package/dist/index.cjs

@@ -13,7 +13,6 @@ var dayjs = require('dayjs');
 var iconsVue = require('@ant-design/icons-vue');
 var vueRouter = require('vue-router');
 var qiankun$1 = require('qiankun');
-var appList = require('@/micro-apps/apps');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,9 +21,8 @@ var renderWithQiankun__default = /*#__PURE__*/_interopDefaultLegacy(renderWithQi
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
-var appList__default = /*#__PURE__*/_interopDefaultLegacy(appList);
 
-var version = "0.1.0-rc.20";
+var version = "0.1.0-rc.21";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -603,14 +601,14 @@ const Header = vue.defineComponent({
           "class": "avatar",
           "src": "https://joeschmoe.io/api/v1/random"
         }, null)]
-      })])]), vue.createVNode("div", {
-        "class": "logout",
-        "onClick": () => emit("logout")
-      }, [vue.createVNode(iconsVue.LogoutOutlined, {
-        "style": {
-          fontSize: "20px"
-        }
-      }, null)])]);
+      })])]), vue.createVNode(antDesignVue.Popconfirm, {
+        "title": "\u786E\u5B9A\u9000\u51FA\u5417?",
+        "onConfirm": () => emit("logout")
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "logout"
+        }, [vue.createVNode(iconsVue.LogoutOutlined, null, null)])]
+      })]);
     };
   }
 });
@@ -695,7 +693,7 @@ function useActiveApp() {
   return activeAppName;
 }
 
-function useMicroApp() {
+function useMicroApp(appList) {
   const route = vueRouter.useRoute();
   const activeAppName = useActiveApp();
   const loadAppList = vue.ref([]);
@@ -703,7 +701,7 @@ function useMicroApp() {
     const microAppName = activeAppName.value;
     const loadApp = loadAppList.value.find(item => item.name === microAppName);
     if (loadApp) return;
-    const microApp = appList__default["default"].find(item => item.name === microAppName);
+    const microApp = appList.find(item => item.name === microAppName);
     if (!microApp) return;
     const domId = `microApp_${microAppName}`;
     const app = qiankun$1.loadMicroApp({
@@ -864,6 +862,10 @@ const PageContent = vue.defineComponent({
     extraPages: {
       type: Array,
       required: true
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -874,7 +876,7 @@ const PageContent = vue.defineComponent({
     const activeKey = vue.ref();
     const tabList = vue.ref([]);
     const activeAppName = useActiveApp();
-    const loadAppList = useMicroApp();
+    const loadAppList = useMicroApp(props.appList);
     const iframeList = vue.ref([]);
     const extraPageList = vue.ref([]);
     const handleMenuChange = ___default["default"].throttle(val => {
@@ -989,6 +991,10 @@ const Layout = vue.defineComponent({
     },
     logo: {
       type: String
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -1048,7 +1054,8 @@ const Layout = vue.defineComponent({
           default: () => [vue.createVNode(PageContent, {
             "currMenu": currMenu.value,
             "menu": props.userMenu,
-            "extraPages": props.extraPages
+            "extraPages": props.extraPages,
+            "appList": props.appList
           }, null)]
         })]
       })]

package/dist/index.d.ts

@@ -177,6 +177,10 @@ declare const _default$1: vue.DefineComponent<{
     logo: {
         type: StringConstructor;
     };
+    appList: {
+        type: PropType<any[]>;
+        required: true;
+    };
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("globalSearch" | "logout")[], "globalSearch" | "logout", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     userMenu: {
         type: PropType<MenuList>;
@@ -200,6 +204,10 @@ declare const _default$1: vue.DefineComponent<{
     logo: {
         type: StringConstructor;
     };
+    appList: {
+        type: PropType<any[]>;
+        required: true;
+    };
 }>> & {
     onGlobalSearch?: ((...args: any[]) => any) | undefined;
     onLogout?: ((...args: any[]) => any) | undefined;

package/dist/index.js

@@ -2,16 +2,15 @@ import qiankun from 'vite-plugin-qiankun';
 import renderWithQiankun, { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
 import { createApp, ref, watch, reactive, onMounted, onBeforeUnmount, nextTick, defineComponent, createVNode, resolveComponent, isVNode, computed, inject, withDirectives, vShow } from 'vue';
 import axios from 'axios';
-import { message, Menu, MenuItem, Input, Badge, Avatar, SubMenu, Dropdown, Layout as Layout$1, LayoutHeader, LayoutSider, LayoutContent } from 'ant-design-vue';
+import { message, Menu, MenuItem, Input, Badge, Avatar, Popconfirm, SubMenu, Dropdown, Layout as Layout$1, LayoutHeader, LayoutSider, LayoutContent } from 'ant-design-vue';
 import _, { isEmpty, omit, debounce, differenceBy } from 'lodash';
 import { useIntervalFn, useMounted, useThrottleFn, useVModel, watchArray, useToggle } from '@vueuse/core';
 import dayjs from 'dayjs';
 import { createFromIconfontCN, SearchOutlined, LogoutOutlined, LeftOutlined, CloseOutlined, RightOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useRoute, useRouter } from 'vue-router';
 import { loadMicroApp } from 'qiankun';
-import appList from '@/micro-apps/apps';
 
-var version = "0.1.0-rc.20";
+var version = "0.1.0-rc.21";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -590,14 +589,14 @@ const Header = defineComponent({
           "class": "avatar",
           "src": "https://joeschmoe.io/api/v1/random"
         }, null)]
-      })])]), createVNode("div", {
-        "class": "logout",
-        "onClick": () => emit("logout")
-      }, [createVNode(LogoutOutlined, {
-        "style": {
-          fontSize: "20px"
-        }
-      }, null)])]);
+      })])]), createVNode(Popconfirm, {
+        "title": "\u786E\u5B9A\u9000\u51FA\u5417?",
+        "onConfirm": () => emit("logout")
+      }, {
+        default: () => [createVNode("div", {
+          "class": "logout"
+        }, [createVNode(LogoutOutlined, null, null)])]
+      })]);
     };
   }
 });
@@ -682,7 +681,7 @@ function useActiveApp() {
   return activeAppName;
 }
 
-function useMicroApp() {
+function useMicroApp(appList) {
   const route = useRoute();
   const activeAppName = useActiveApp();
   const loadAppList = ref([]);
@@ -851,6 +850,10 @@ const PageContent = defineComponent({
     extraPages: {
       type: Array,
       required: true
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -861,7 +864,7 @@ const PageContent = defineComponent({
     const activeKey = ref();
     const tabList = ref([]);
     const activeAppName = useActiveApp();
-    const loadAppList = useMicroApp();
+    const loadAppList = useMicroApp(props.appList);
     const iframeList = ref([]);
     const extraPageList = ref([]);
     const handleMenuChange = _.throttle(val => {
@@ -976,6 +979,10 @@ const Layout = defineComponent({
     },
     logo: {
       type: String
+    },
+    appList: {
+      type: Array,
+      required: true
     }
   },
   setup(props, {
@@ -1035,7 +1042,8 @@ const Layout = defineComponent({
           default: () => [createVNode(PageContent, {
             "currMenu": currMenu.value,
             "menu": props.userMenu,
-            "extraPages": props.extraPages
+            "extraPages": props.extraPages,
+            "appList": props.appList
           }, null)]
         })]
       })]

package/dist/style.css

@@ -1 +1 @@
-.Demo{color:red}.layout .ant-layout{height:100%}.layout .ant-layout .ant-layout-header{background-color:#132041;height:60px;line-height:60px;padding:0}.layout .ant-layout .ant-layout-header .header{align-items:center;display:flex}.layout .ant-layout .ant-layout-header .header .logo{align-items:center;display:flex;justify-content:center;width:200px}.layout .ant-layout .ant-layout-header .header .logo img{width:140px}.layout .ant-layout .ant-layout-header .header .menu{flex:auto}.layout .ant-layout .ant-layout-header .header .search{margin-left:20px;width:200px}.layout .ant-layout .ant-layout-header .header .user-info{align-items:center;display:flex;margin:0 20px}.layout .ant-layout .ant-layout-header .header .user-info .username{color:#fff}.layout .ant-layout .ant-layout-sider{background:#1b2c55}.layout .ant-layout .ant-layout-sider .ant-layout-sider-children{display:flex;flex-direction:column}.layout .ant-layout .ant-layout-sider .folder{color:#fff;font-size:20px;height:38px;line-height:38px;padding:0 16px;text-align:right}.layout .ant-layout .ant-layout-sider .ant-menu{flex:1;overflow-y:auto}.layout .ant-layout .ant-layout-sider .copyright{color:#b9c2d5;font-size:12px;padding:8px;text-align:center}.layout .ant-layout .ant-layout-sider.ant-layout-sider-collapsed .copyright{display:none}.layout .ant-layout .ant-layout-content{display:flex;flex-direction:column;padding:10px}.layout .ant-layout .ant-layout-content .tab-list{align-items:center;display:flex}.layout .ant-layout .ant-layout-content .tab-list .handle{background-color:#fff;border-radius:2px;color:#bbbfce;cursor:pointer;height:20px;text-align:center;width:20px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container{display:flex;flex:1;flex-wrap:nowrap;margin:0 8px;overflow:auto}.layout .ant-layout .ant-layout-content .tab-list .tabs-container::-webkit-scrollbar{height:0}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab{align-items:center;border-radius:6px 6px 0 0;color:#5c667d;cursor:pointer;display:flex;padding:6px 16px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .icon{margin-right:4px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tab-name{white-space:nowrap}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .close{margin-left:6px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab.active{background-color:#fff;color:#1d33a2}.layout .ant-layout .ant-layout-content .page-content{display:flex;flex:1;flex-direction:column}.layout .ant-layout .ant-layout-content .page-content .page-container{background-color:#fff;flex:1;overflow:auto;padding:24px}
+.Demo{color:red}.layout .ant-layout{height:100%}.layout .ant-layout .ant-layout-header{background-color:#132041;height:60px;line-height:60px;padding:0}.layout .ant-layout .ant-layout-header .header{align-items:center;display:flex;padding-right:20px}.layout .ant-layout .ant-layout-header .header .logo{align-items:center;display:flex;justify-content:center;width:200px}.layout .ant-layout .ant-layout-header .header .logo img{width:140px}.layout .ant-layout .ant-layout-header .header .menu{flex:auto}.layout .ant-layout .ant-layout-header .header .search{margin-left:20px;width:200px}.layout .ant-layout .ant-layout-header .header .user-info{align-items:center;display:flex;margin:0 20px}.layout .ant-layout .ant-layout-header .header .user-info .username{color:#fff}.layout .ant-layout .ant-layout-header .header .logout{color:#fff;font-size:20px}.layout .ant-layout .ant-layout-header .header .logout .anticon{position:relative;top:2px}.layout .ant-layout .ant-layout-sider{background:#1b2c55}.layout .ant-layout .ant-layout-sider .ant-layout-sider-children{display:flex;flex-direction:column}.layout .ant-layout .ant-layout-sider .folder{color:#fff;font-size:20px;height:38px;line-height:38px;padding:0 16px;text-align:right}.layout .ant-layout .ant-layout-sider .ant-menu{flex:1;overflow-y:auto}.layout .ant-layout .ant-layout-sider .copyright{color:#b9c2d5;font-size:12px;padding:8px;text-align:center}.layout .ant-layout .ant-layout-sider.ant-layout-sider-collapsed .copyright{display:none}.layout .ant-layout .ant-layout-content{display:flex;flex-direction:column;padding:10px}.layout .ant-layout .ant-layout-content .tab-list{align-items:center;display:flex}.layout .ant-layout .ant-layout-content .tab-list .handle{background-color:#fff;border-radius:2px;color:#bbbfce;cursor:pointer;height:20px;text-align:center;width:20px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container{display:flex;flex:1;flex-wrap:nowrap;margin:0 8px;overflow:auto}.layout .ant-layout .ant-layout-content .tab-list .tabs-container::-webkit-scrollbar{height:0}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab{align-items:center;border-radius:6px 6px 0 0;color:#5c667d;cursor:pointer;display:flex;padding:6px 16px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .icon{margin-right:4px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .tab-name{white-space:nowrap}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab .close{margin-left:6px}.layout .ant-layout .ant-layout-content .tab-list .tabs-container .tab.active{background-color:#fff;color:#1d33a2}.layout .ant-layout .ant-layout-content .page-content{display:flex;flex:1;flex-direction:column}.layout .ant-layout .ant-layout-content .page-content .page-container{background-color:#fff;flex:1;overflow:auto;padding:24px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inl-ui",
-  "version": "0.1.0-rc.21",
+  "version": "0.1.0-rc.22",
   "description": "工业 pc ui库",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -9,11 +9,12 @@
   "author": "bhabgs",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env NODE_ENV=dev rollup -c -w",
+    "dev": "run-p \"build:rollup -w\"",
     "build": "esno conf/build.ts",
     "clean": "rimraf dist",
     "cp:theme": "node conf/cp1.js",
-    "build:rollup": "rollup -c"
+    "build:rollup": "rollup -c",
+    "check:types": "tsc --noEmit"
   },
   "dependencies": {
     "@vueuse/core": "^9.6.0",
@@ -31,12 +32,14 @@
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "acorn-jsx": "^5.3.2",
+    "ant-design-vue": "^3.2.15",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.14",
     "esbuild-register": "^3.4.1",
     "esno": "^0.16.3",
     "fast-glob": "^3.2.12",
     "less": "^4.1.2",
+    "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "rollup": "^2.62.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -46,11 +49,11 @@
     "typescript": "^4.5.4"
   },
   "peerDependencies": {
-    "ant-design-vue": "^3.2.15",
-    "axios": "^1.1.3",
+    "axios": "^1.2.0",
     "lodash": "^4.17.21",
+    "qiankun": "^2.8.4",
     "vite-plugin-qiankun": "^1.0.15",
-    "vue": "^3.2.26",
-    "vue-router": "4"
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
   }
 }

package/src/assets/style/components/layout.less

@@ -9,6 +9,8 @@
       .header {
         display: flex;
         align-items: center;
+        padding-right: 20px;
+
         .logo {
           display: flex;
           align-items: center;
@@ -33,6 +35,14 @@
             color: #fff;
           }
         }
+        .logout {
+          color: #fff;
+          font-size: 20px;
+          .anticon {
+            position: relative;
+            top: 2px;
+          }
+        }
       }
     }
     .ant-layout-sider {

package/src/components/layout/header.tsx

@@ -2,7 +2,14 @@ import { defineComponent, PropType, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useMounted } from "@vueuse/core";
 
-import { Input, Menu, MenuItem, Badge, Avatar } from "ant-design-vue";
+import {
+  Input,
+  Menu,
+  MenuItem,
+  Badge,
+  Avatar,
+  Popconfirm,
+} from "ant-design-vue";
 import { SearchOutlined, LogoutOutlined } from "@ant-design/icons-vue";
 import { MenuList } from ".";
 import { useActiveMenu } from "./hooks/useActiveMenu";
@@ -119,9 +126,11 @@ const Header = defineComponent({
             </Badge>
           </div>
         </div>
-        <div class="logout" onClick={() => emit("logout")}>
-          <LogoutOutlined style={{ fontSize: "20px" }} />
-        </div>
+        <Popconfirm title="确定退出吗?" onConfirm={() => emit("logout")}>
+          <div class="logout">
+            <LogoutOutlined />
+          </div>
+        </Popconfirm>
       </div>
     );
   },

package/src/components/layout/hooks/useMicroApp.ts

@@ -1,9 +1,8 @@
-import { computed, nextTick, Ref, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useThrottleFn } from '@vueuse/core';
-import { useActiveApp } from './useActiveApp';
-import { loadMicroApp, MicroApp } from 'qiankun';
-import appList from '@/micro-apps/apps';
+import { computed, nextTick, Ref, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useThrottleFn } from "@vueuse/core";
+import { useActiveApp } from "./useActiveApp";
+import { loadMicroApp, MicroApp } from "qiankun";
 
 interface ILoadApp {
   domId: string;
@@ -11,7 +10,7 @@ interface ILoadApp {
   app: MicroApp;
 }
 
-export function useMicroApp() {
+export function useMicroApp(appList: any[]) {
   const route = useRoute();
   const activeAppName = useActiveApp();
 
@@ -23,7 +22,7 @@ export function useMicroApp() {
   const handleRouteChange = useThrottleFn(async () => {
     const microAppName = activeAppName.value;
     const loadApp = loadAppList.value.find(
-      (item) => item.name === microAppName,
+      (item) => item.name === microAppName
     );
     if (loadApp) return;
     const microApp = appList.find((item) => item.name === microAppName);

package/src/components/layout/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, PropType, ref, watch } from "vue";
+import { defineComponent, PropType, ref, watch } from "vue";
 import { useToggle } from "@vueuse/core";
 
 import {
@@ -59,6 +59,10 @@ const Layout = defineComponent({
     logo: {
       type: String,
     },
+    appList: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
   },
   setup(props, { emit }) {
     const [isFolder, toggleFolder] = useToggle(false);
@@ -121,6 +125,7 @@ const Layout = defineComponent({
                 currMenu={currMenu.value}
                 menu={props.userMenu}
                 extraPages={props.extraPages}
+                appList={props.appList}
               />
             </LayoutContent>
           </AntLayout>

package/src/components/layout/pageContent.tsx

@@ -25,6 +25,10 @@ const PageContent = defineComponent({
       type: Array as PropType<any>,
       required: true,
     },
+    appList: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
   },
   setup(props, { emit }) {
     const router = useRouter();
@@ -35,7 +39,7 @@ const PageContent = defineComponent({
 
     const activeAppName = useActiveApp();
 
-    const loadAppList = useMicroApp();
+    const loadAppList = useMicroApp(props.appList);
 
     const iframeList = ref<any[]>([]);
     const extraPageList = ref<any[]>([]);