fix: 修复样式隔离

config/config.js

@@ -46,7 +46,8 @@ module.exports = {
         if (
           context.resourcePath.includes('node_modules') ||
           context.resourcePath.includes('ant.design.pro.less') ||
-          context.resourcePath.includes('global.less')
+          context.resourcePath.includes('global.less') ||
+          context.resourcePath.includes('ThemeColor.less')
         ) {
           return localName;
         }
@@ -59,7 +60,7 @@ module.exports = {
             .split('/')
             .map(a => a.replace(/([A-Z])/g, '-$1'))
             .map(a => a.toLowerCase());
-          return `panda-pro${arr.join('-')}-${localName}`.replace(
+          return `panda-console-base${arr.join('-')}-${localName}`.replace(
             /--/g,
             '-',
           );
@@ -68,5 +69,13 @@ module.exports = {
       },
     },
   },
+  lessLoader: {
+    modifyVars: {
+      // hack: `true; @import "~@/global.less";`,
+      '@ant-prefix': 'panda-console-base',
+      '@iconPrefixCls': 'panda-console-base-icon'
+    },
+    javascriptEnabled: true
+  },
   esbuild: {}
 };

src/app.js

@@ -13,7 +13,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {
-  Button,
+  Button, ConfigProvider,
   message,
   notification,
 } from 'antd';
@@ -64,7 +64,9 @@ const render = () => {
         <LocaleContainer>
           <ErrorBoundary>
             <Container>
+              <ConfigProvider prefixCls="panda-console-base">
                 <App />
+              </ConfigProvider>
             </Container>
           </ErrorBoundary>
         </LocaleContainer>
@@ -175,7 +177,9 @@ const initGlobalConfig = () => {
       })
       // eslint-disable-next-line no-shadow
       .then(res => {
+        // eslint-disable-next-line no-use-before-define
         initSensorType();
+        // eslint-disable-next-line no-use-before-define
         initIsMock();
         render({ appContent: '', loading: true });
       })

src/components/GlobalHeader/ExtendRightContent.js

@@ -225,10 +225,10 @@ const GlobalHeaderRight = props => {
             <FavitorIcon></FavitorIcon>
             <span>常用</span>
         </div>
-        <div className={classNames(styles.item)} onClick={handlerTheme}>
-          <ThemeIcon/>
-          <span>主题</span>
-        </div>
+        {/*<div className={classNames(styles.item)} onClick={handlerTheme}>*/}
+        {/*  <ThemeIcon/>*/}
+        {/*  <span>主题</span>*/}
+        {/*</div>*/}
         <div className={classNames(styles.item)}>
             <OrderIcon onClick={handleOrder} title={intl.formatMessage({id: 'component.header.icon.order'})} />
             <span>工单</span>

src/components/GlobalHeader/index.less

@@ -41,7 +41,7 @@
     }
   }
   .extendsearch {
-    & :global(.ant-input-affix-wrapper) {
+    & :global(.@{ant-prefix}-input-affix-wrapper) {
       padding: 3px 11px!important;
       background: #fff;
     }
@@ -591,12 +591,12 @@
         display: flex;
         width: 100%;
         :global {
-          .ant-form-item {
+          .@{ant-prefix}-form-item {
             &:first-child {
               width: 55%;
             }
           }
-          .ant-btn {
+          .@{ant-prefix}-btn {
             border-color: transparent;
             background: url(https://panda-water.com/web4/assets/images/message/提交.png) center center / 100% 100% no-repeat;
             width: 249px;
@@ -607,10 +607,10 @@
         }
       }
       :global {
-        .ant-form {
-          .ant-form-item {
+        .@{ant-prefix}-form {
+          .@{ant-prefix}-form-item {
             margin-bottom: 8px!important;
-            .ant-input {
+            .@{ant-prefix}-input {
               border-radius: 4px!important;
               background: #FFFEEC!important;
               border: 1px solid #ffe59f;
@@ -625,10 +625,10 @@
     }
   }
   :global {
-    .ant-modal-content {
+    .@{ant-prefix}-modal-content {
       background-color: transparent!important;
       box-shadow: none!important;
-      .ant-modal-close {
+      .@{ant-prefix}-modal-close {
         display: none!important;
       }
     }

src/components/HeaderSearch/index.less

@@ -12,7 +12,7 @@
     border-radius: 0;
     transition: width 0.3s, margin-left 0.3s;
 
-    :global(.ant-select-selection) {
+    :global(.@{ant-prefix}-select-selection) {
       background: transparent;
     }
     input {
@@ -32,15 +32,15 @@
     }
   }
   :global {
-    .ant-select-selection-search {
-      .ant-input-affix-wrapper {
+    .@{ant-prefix}-select-selection-search {
+      .@{ant-prefix}-input-affix-wrapper {
         border: 1px solid #b1b9c7;
         border-radius: 28px;
         width: 320px !important;
         color: #555555;
       }
     }
-    .ant-input-affix-wrapper {
+    .@{ant-prefix}-input-affix-wrapper {
       padding-right: 12px;
       width: 320px;
       min-width: 120px;
@@ -320,10 +320,10 @@
 
 .searchOverfy {
   box-sizing: border-box;
-  :global(.ant-popover-arrow) {
+  :global(.@{ant-prefix}-popover-arrow) {
     display: none;
   }
-  :global(.ant-popover-inner) {
+  :global(.@{ant-prefix}-popover-inner) {
     width: 100%;
     height: 100%;
     position: absolute;

src/components/SettingDrawer/index.js

@@ -19,8 +19,6 @@ import getLocales, { getLanguage } from './locales';
 import { genStringToTheme } from './utils';
 import LayoutSetting, { renderLayoutSettingItem } from './LayoutChange';
 import RegionalSetting from './RegionalChange';
-
-
 const Body = ({ children, prefixCls, title }) => (
     <div style={{ marginBottom: 24 }}>
       <h3 className={`${prefixCls}-drawer-title`}>{title}</h3>
@@ -53,7 +51,6 @@ export const getFormatMessage = () => {
 };
 
 const updateTheme = (dark, color, publicPath = '/theme', hideMessageLoading) => {
-    debugger
   if (typeof window === 'undefined' || !(window).umi_plugin_ant_themeVar) {
     return;
   }
@@ -260,7 +257,7 @@ const SettingDrawer = (props) => {
     hideCopyButton,
     getContainer,
     onSettingChange,
-    prefixCls = 'ant-pro',
+    prefixCls = 'panda-console-base-pro',
     pathname = window.location.pathname,
     disableUrlParams = false,
   } = props;

src/components/SettingDrawer/index.less

 @import '~antd/es/style/themes/default.less';
 
-@ant-pro-setting-drawer: ~'@{ant-prefix}-pro-setting-drawer';
+@ant-pro-setting-drawer: ~'@{ant-prefix}-setting-drawer';
 
 .@{ant-pro-setting-drawer} {
   &-content {

src/layouts/BasicLayout.less

@@ -13,6 +13,7 @@
 @primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
 @primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
 @slider-light: #fff;
+@color-black: #fff;
 .basicLayout * {
     box-sizing: border-box;
 }
@@ -62,10 +63,10 @@
         .sliderMenu {
             flex: 1 1 0%;
             // overflow: hidden auto;
-            ul {
+            .menu {
                 position: relative;
                 min-height: 100%;
-                li {
+                .menu-item {
                     height: 74px;
                     display: flex;
                     align-items: center;
@@ -99,7 +100,7 @@
                             height: 22px;
                             opacity: 0.7;
                         }
-                        span {
+                        .text {
                             display: block;
                             color: hsla(0,0%,100%,.65);
                             padding-top: 4px;
@@ -110,6 +111,9 @@
                             opacity: 1;
                             transition: opacity .3s cubic-bezier(.645,.045,.355,1),margin .3s,color .3s;
                         }
+                        .currentText {
+                          color: @color-black;
+                        }
                     }
                     &:hover {
                         span {
@@ -188,7 +192,7 @@
             margin-top: 82px;
         }
     }
-    .ant-page-header {
+    .@{ant-prefix}-page-header {
         // padding: 4px 16px;
         position: fixed; top: 0px; width: 100%; left: 0px; z-index: 999;
         // box-shadow: rgb(240, 241, 242) 0px 2px 8px;
@@ -236,7 +240,7 @@
                 font-family: PangMenZhengDaoBiaoTiTi;
                 letter-spacing: 2px;
             }
-            :global(.ant-spin-container::after) {
+            :global(.@{ant-prefix}-spin-container::after) {
                 background: transparent!important;
             }
             .toggleSite {
@@ -304,7 +308,7 @@
         }
 
         & :global {
-            .ant-tabs-tab {
+            .@{ant-prefix}-tabs-tab {
                 padding: 7px 0!important;
                 margin: 0 32px 0 0!important;
                 &:hover {
@@ -328,23 +332,23 @@
         .menu-item {
             float: left;
         }
-        & :global(.ant-tabs-tab) {
+        & :global(.@{ant-prefix}-tabs-tab) {
             display: flex!important;
         }
-        & :global(.ant-tabs-tab-btn) {
+        & :global(.@{ant-prefix}-tabs-tab-btn) {
             display: flex;
             position: relative;
             align-items: center;
             color: #737983;
             transform: scale(0.92);
         }
-        & :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+        & :global(.@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn) {
             color: @primary-color!important;
         }
-        & :global(.ant-tabs-tab-btn>div>div) {
+        & :global(.@{ant-prefix}-tabs-tab-btn>div>div) {
             display: flex;
         }
-        & :global(.ant-tabs-nav::before) {
+        & :global(.@{ant-prefix}-tabs-nav::before) {
             border-bottom: none!important;
         }
 
@@ -358,50 +362,50 @@
             }
         }
         & :global {
-            .ant-divider-vertical {
+            .@{ant-prefix}-divider-vertical {
                 left: 20px;
                 margin: 0 1px!important;
             }
-            .ant-tabs-nav-operations {
+            .@{ant-prefix}-tabs-nav-operations {
                 .ant-tabs-nav-more {
                     margin-right: 0px!important;
                 }
             }
         }
-        & :global(.ant-tabs-ink-bar) {
+        & :global(.@{ant-prefix}-tabs-ink-bar) {
             background: @primary-color!important;
         }
-        & :global(.ant-tabs-tab-active) {
+        & :global(.@{ant-prefix}-tabs-tab-active) {
             color: @primary-color!important;
         }
-        & :global(.ant-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
+        & :global(.@{ant-prefix}-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
             color: @primary-color!important;
         }
         & :global {
-            .ant-tabs-tab-active svg path, .ant-tabs-tab-active svg rect,  .ant-tabs-tab-active svg circle {
+            .@{ant-prefix}-tabs-tab-active svg path, .@{ant-prefix}-tabs-tab-active svg rect, .@{ant-prefix}-tabs-tab-active svg circle {
                 fill: @primary-color!important;
                 stroke: @primary-color!important;
             }
-            .ant-tabs-tab-active img {
+            .@{ant-prefix}-tabs-tab-active img {
                 filter: drop-shadow(10px 0px @primary-color);
             }
 
 
         }
-        & :global(.ant-tabs-nav-wrap) {
+        & :global(.@{ant-prefix}-tabs-nav-wrap) {
             margin-left: 22px;
         }
 
-        & :global(.ant-dropdown-trigger) {
+        & :global(.@{ant-prefix}-dropdown-trigger) {
             display: flex;
             align-items: center;
         }
-        & :global(.ant-tabs-nav) {
+        & :global(.@{ant-prefix}-tabs-nav) {
             margin: 0px!important;
         }
 
     }
-    .ant-page-container {
+    .@{ant-prefix}-page-container {
         // padding-top: 48px;
         // margin: -24px -24px 0;
         // margin: -18px 0px 0 0px;
@@ -410,11 +414,11 @@
         //    background-color: #fff;
     }
 
-    .ant-pro-page-container-warp {
+    .@{ant-prefix}-page-container-warp {
         background-color: #fff;
     }
 
-    .ant-pro-page-container-children-content {
+    .@{ant-prefix}-page-container-children-content {
         margin: 0!important;
     }
     & :global {
@@ -445,7 +449,7 @@
 }
 
 & :global {
-    .ant-dropdown-menu-item {
+    .@{ant-prefix}-dropdown-menu-item {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -476,8 +480,8 @@
             }
         }
     }
-    .ant-dropdown-menu {
-        .ant-divider-horizontal{
+    .@{ant-prefix}-dropdown-menu {
+        .@{ant-prefix}-divider-horizontal{
             &:last-child {
                 display: none;
             }
@@ -485,7 +489,7 @@
     }
 }
 & :global {
-    .ant-dropdown-custom-menu {
+    .@{ant-prefix}-dropdown-custom-menu {
         top: 92px!important;
     }
 }

src/layouts/BasicLayout1.js

@@ -350,6 +350,11 @@ const BasicLayout = props => {
     ])
   });
 
+  window.share && window.share.event.on('event:microError', event => {
+    // window.history.pushState({message: '应用服务请求异常，请检查应用配置'}, null, '/civbase/404')
+      history.push('/404');
+  });
+
   useEffect(() => {
     window.share.event.on('updateSite', res => setCityData(res));
     return () => {
@@ -482,34 +487,34 @@ const BasicLayout = props => {
           })}>
             <div className={layoutStyles['layout-slider-childern']}>
               <div className={layoutStyles.sliderMenu} style={{flex: '1 1 0%', overflow: 'hidden auto'}}>
-                <ul className="menu" style={{minHeight: '0px', marginBottom: '0px'}}>
-                  <li className={classNames('menu-item')} onClick={handleToggleSystem}>
+                <ul className={classNames(layoutStyles.menu)} style={{minHeight: '0px', marginBottom: '0px'}}>
+                  <li className={classNames(layoutStyles['menu-item'])} onClick={handleToggleSystem}>
                       <Tooltip placement="right" title={collapse ? currentRoutes.name: ''}>
                         <a>
                           {
                             (currentRoutes && currentRoutes.extData && currentRoutes.extData.icon) && <img src={currentRoutes.extData.icon} />
                           }
                           {
-                            collapse ? null:  <span>{currentRoutes && currentRoutes.name}</span>
+                            collapse ? null:  <span className={classNames(layoutStyles.text, layoutStyles.currentText)}>{currentRoutes && currentRoutes.name}</span>
                           }
                         </a>
                       </Tooltip>
                     </li>
                 </ul>
                 <div className={layoutStyles.splitLine}></div>
-                <ul className="menu menu-vertical">
+                <ul className={classNames(layoutStyles.menu, 'menu-vertical')}>
                   {
                     currentRoutes && (currentRoutes.routes || []).map((item, index) => {
                       return (
                         <>
-                          <li key={index} className={classNames("menu-item", { [layoutStyles['active']]: index === selectIndex })} onClick={() => handlerSecond(item, index)}>
+                          <li key={index} className={classNames(layoutStyles['menu-item'], { [layoutStyles['active']]: index === selectIndex })} onClick={() => handlerSecond(item, index)}>
                           <Tooltip placement="right" title={collapse ? item.name: ''}>
                               <a>
                                 {
                                     item.icon ? item.icon: item.extData && /.svg/.test(item.extData.icon) ? <ReactSVG src={item.extData.icon} style={{width: '20px', height: '20px'}} className={layoutStyles.icon}/>: item.extData && <img src={item.extData.icon} />
                                 }
                                 {
-                                  collapse ? item.extData && <span>{(item.extData.shortName || item.name).substr(0, 2)}</span>:  <span>{item.name}</span>
+                                  collapse ? item.extData && <span className={classNames(layoutStyles.text)}>{(item.extData.shortName || item.name).substr(0, 2)}</span>:  <span className={classNames(layoutStyles.text)}>{item.name}</span>
                                 }
                               </a>
                             </Tooltip>
@@ -555,9 +560,9 @@ const BasicLayout = props => {
             [layoutStyles['hook_web4']]: location.pathname.startsWith('/civbase/civweb4')
           })}>
 
-              <div className={layoutStyles['ant-page-container']} style={{paddingTop: '0px'}}>
-                  <div className={layoutStyles['ant-pro-page-container-warp']}>
-                    <div className={layoutStyles['ant-page-header']} style={{position: 'fixed'}}>
+              <div className={layoutStyles[`${props.rootPrefix}-page-container`]} style={{paddingTop: '0px'}}>
+                  <div className={layoutStyles[`${props.rootPrefix}-page-container-warp`]}>
+                    <div className={layoutStyles[`${props.rootPrefix}-page-header`]} style={{position: 'fixed'}}>
                         <img src={require('../assets/basic/图层 998@2x.png')} style={{width: '100%'}}/>
                         <div className={layoutStyles.header}>
                           <a className={layoutStyles.logo} onClick={handlerIndustry}>

src/micro.js

@@ -162,9 +162,11 @@ export const initMicroApps = (loader, store) => {
         // ) {
         //     // window.history.pushState({message: '应用服务请求异常，请检查应用配置'}, null, '/civbase/500')
         // }
-        // if(event.type === 'error') {
+        console.log(event);
+        if(event.type === 'error') {
             // window.history.pushState({message: '应用服务请求异常，请检查应用配置'}, null, '/civbase/404')
-        // }
+          window.share && window.share.event.emit('event:microError');
+        }
     });
 };
 

src/pages/commonMenu/index.js

@@ -19,7 +19,9 @@ import starIcon from '../../assets/images/commonMenu/矢量智能对象 拷贝 3
 // 是否是灰色的图标（灰色图标在白色背景中看不见，添加滤镜变色）
 const isNeedFilterIcon = (icon = '') =>
   icon && !icon.includes('一级') && !icon.includes('ios/');
-
+Modal.config({
+  rootPrefixCls: 'panda-console-base'
+});
 const CommonMenu = props => {
   const history = useHistory();
   const { menus } = props;
@@ -215,7 +217,7 @@ const CommonMenu = props => {
 
   return (
     <div className={styles.commonMenu}>
-      <Spin spinning={loading}>
+      <Spin spinning={loading} style={{height: '100%'}}>
         <div className={styles.searchWrapper}>
           <div className={styles.searchBox}>
             <div className={styles.searchTitle}>

src/pages/commonMenu/index.less

@@ -14,7 +14,7 @@
     p {
       margin: 0;
     }
-    .ant-spin-nested-loading {
+    .@{ant-prefix}-spin-nested-loading, .@{ant-prefix}-spin-container {
       height: 100%;
       width: 100%;
     }
@@ -81,16 +81,16 @@
           height: 0;
         }
         :global {
-          .ant-tree-treenode {
+          .@{ant-prefix}-tree-treenode {
             width: 100%;
           }
-          .ant-tree-node-content-wrapper,
-          .ant-tree-node-content-wrapper-normal
-            .ant-tree-node-content-wrapper-close {
+          .@{ant-prefix}-tree-node-content-wrapper,
+          .@{ant-prefix}-tree-node-content-wrapper-normal
+            .@{ant-prefix}-tree-node-content-wrapper-close {
             flex: 1;
             overflow: hidden;
           }
-          .ant-tree-switcher {
+          .@{ant-prefix}-tree-switcher {
             line-height: 36px;
           }
         }
@@ -237,15 +237,15 @@
 
 .MenuModal {
   :global {
-    .ant-modal-header {
+    .@{ant-prefix}-modal-header {
       padding: 0 16px;
       background: url('../../assets/basic/图层\ 998@2x.png') center/100% 100%
         no-repeat;
-      .ant-modal-title {
+      .@{ant-prefix}-modal-title {
         height: 56px;
       }
     }
-    .ant-modal-close {
+    .@{ant-prefix}-modal-close {
       color: #fff;
     }
   }
@@ -272,7 +272,7 @@
   padding: 20px 30px;
   // color: red;
   :global {
-    .ant-input-affix-wrapper {
+    .@{ant-prefix}-input-affix-wrapper {
       border-radius: 20px;
     }
   }

src/routes/config.js

@@ -71,6 +71,26 @@ export const dyRoutes = routes => {
           loading: LoadingComponent,
         }),
       },
+      {
+        path: '/404',
+        component: dynamic({
+          loader: () =>
+            import(
+              /* webpackChunkName: 'p__404' */ '../pages/exception/404'
+              ),
+          loading: LoadingComponent,
+        }),
+      },
+      {
+        path: '/500',
+        component: dynamic({
+          loader: () =>
+            import(
+              /* webpackChunkName: 'p__500' */ '../pages/exception/500'
+              ),
+          loading: LoadingComponent,
+        }),
+      },
 
     ],
   };

src/utils/routes.js

@@ -191,11 +191,13 @@ function renderRoutes(routes, extraProps, switchProps) {
           return route.render ? route.render(Object.assign({}, props, {}, extraProps, {
             routes: route.routes,
             params: route.params,
-            route: route
+            route: route,
+            rootPrefix: 'panda-console-base'
           })) : React.createElement(route.component, Object.assign({}, props, extraProps, {
             route: route,
             routes: route.routes,
             params: route.params,
+            rootPrefix: 'panda-console-base'
           }));
         }
       });