首页样式

src/Engine/Drag/index.tsx

@@ -426,13 +426,15 @@ export default function SysPage(RouteOption: GT.IRouterOptions) {
         zoomOut={zoomOut}
       >
         <React.Suspense fallback={<Loading />}>
-          <DynamicComponent
-            params={params}
-            router={router}
-            id={id}
-            access={access}
-            initState={initState}
-          />
+          {!initState.loading && (
+            <DynamicComponent
+              params={params}
+              router={router}
+              id={id}
+              access={access}
+              initState={initState}
+            />
+          )}
         </React.Suspense>
       </DragComponent>
     );

src/Project/pages/PlatformMenu/index.js

@@ -14,20 +14,23 @@ import { connect } from 'umi';
 //   OpsNodeCode,
 // } from '@/utils/constants';
 const noIcon = require('@/Project/assets/platformMenu/noIcon.png');
+const newIcon = require('@/Project/assets/platformMenu/ICON/newModel.png');
 
 function PlatformMenu(props) {
   const {
     dispatch,
+    access,
+    initState,
     // location: { query = {} },
   } = props;
+  console.log(props);
   let query = {};
   const [curMenu, setCurMenu] = useState([]);
   useEffect(() => {
-    console.log('====================', dispatch);
     dispatch({
       type: 'menu/getPlatformMenu',
-      callback: (menu, permission) => {
-        initMenu(menu, permission);
+      callback: (menus) => {
+        initMenu(menus);
       },
       payload: { version: 2 },
     });
@@ -35,7 +38,42 @@ function PlatformMenu(props) {
     //   type: 'user/fetchCurrent',
     // });
   }, []);
-  const initMenu = (parent, permission) => {
+
+  const getIcon = (item) => {
+    if (item.active && item.Icon) return item.Icon;
+    let current = find((icon) => icon.code === item.Code)?.iconPath;
+    if (current) return current;
+    return newIcon;
+  };
+
+  const initMenu = (menus) => {
+    console.log(access);
+    let newMenus = menus.filter((item) => {
+      if (item.Type == 1 && access[item.Code]) {
+        item.name = item.Name;
+        item.active =
+          item.children != undefined ||
+          item.WebPath != '' ||
+          item.UnityPath != '';
+
+        item.iconPath = getIcon(item);
+        return item;
+      }
+    });
+    newMenus.push({
+      name: '新增功能',
+      ID: '新增功能',
+      Code: '',
+      Type: 1,
+      iconPath: require('@/Project/assets/platformMenu/ICON/newModel.png'),
+      WebPath: '',
+      UnityPath: '',
+      active: false,
+    });
+    setCurMenu(newMenus);
+  };
+
+  const initMenu1 = (parent, permission) => {
     console.log(parent, permission);
     if (parent?.children) {
       let menu = parent.children;
@@ -164,31 +202,18 @@ function PlatformMenu(props) {
               <div
                 onClick={() => handleMenuClick(item)}
                 className={menuStyle.menu}
-                style={
-                  item.active
-                    ? {}
-                    : item.ID === '新增功能'
-                    ? { cursor: 'not-allowed' }
-                    : {}
-                }
+                style={item.active ? null : { cursor: 'not-allowed' }}
               >
                 <img
                   className={menuStyle.pic}
-                  src={
-                    item.active
-                      ? item.Icon ||
-                        require('@/Project/assets/platformMenu/ICON/newModel.png')
-                      : grayIcon.find((icon) => icon.code === item.Code)
-                          ?.iconPath ||
-                        require('@/Project/assets/platformMenu/ICON/newModel.png')
-                  }
+                  src={item.iconPath}
                   style={item.active ? {} : { cursor: 'not-allowed' }}
                 />
               </div>
               <div
                 style={{
-                  marginTop: '0.22rem',
-                  width: '1.52rem',
+                  marginTop: '22px',
+                  width: '152px',
                   textAlign: 'center',
                 }}
               >

src/Project/pages/PlatformMenu/models/menu.js

@@ -1,21 +1,21 @@
 import { getMenuData } from '@/Project/services/platformMenu';
 import { queryCurrent } from '@/Project/services/user';
 
-const filterWaterMenuData = (menuData) => {
-  if (!menuData) {
-    return [];
-  }
-  var arr = [];
-  menuData.forEach((item) => {
-    if (item.Type != 1) return;
-    arr.push(item);
-    if (item.children) {
-      let newChildren = filterWaterMenuData(item.children);
-      item.children = newChildren.length == 0 ? null : newChildren;
-    }
-  });
-  return arr;
-};
+// const filterWaterMenuData = (menuData) => {
+//   if (!menuData) {
+//     return [];
+//   }
+//   var arr = [];
+//   menuData.forEach((item) => {
+//     if (item.Type != 1) return;
+//     arr.push(item);
+//     if (item.children) {
+//       let newChildren = filterWaterMenuData(item.children);
+//       item.children = newChildren.length == 0 ? null : newChildren;
+//     }
+//   });
+//   return arr;
+// };
 
 export default {
   namespace: 'menu',
@@ -24,21 +24,21 @@ export default {
   effects: {
     *getPlatformMenu({ callback, payload }, { put, call }) {
       const allMenu = yield call(getMenuData, payload);
-      const response = yield call(queryCurrent);
-      let permission = {};
-      if (response && allMenu) {
-        for (let i = 0; i < response?.data?.Permissions?.length; i++) {
-          let item = response.data.Permissions[i];
-          if (!item.Menus || typeof item.Menus != 'object') return;
-          permission = {
-            ...permission,
-            ...item.Menus,
-          };
-        }
-        let menu = allMenu.data?.list.find((item) => item.MenuType == 0) || {};
-        menu.children = filterWaterMenuData(menu.children);
-        callback?.(menu, permission);
-      }
+      // const response = yield call(queryCurrent);
+      // let permission = {};
+      // if (response && allMenu) {
+      //   for (let i = 0; i < response?.data?.Permissions?.length; i++) {
+      //     let item = response.data.Permissions[i];
+      //     if (!item.Menus || typeof item.Menus != 'object') return;
+      //     permission = {
+      //       ...permission,
+      //       ...item.Menus,
+      //     };
+      //   }
+      let menu = allMenu.data?.list.find((item) => item.MenuType == 0) || {};
+      // menu.children = filterWaterMenuData(menu.children);
+      callback?.(menu?.children);
+      // }
     },
   },
 

src/Project/pages/PlatformMenu/moduleMenuStyle.less

@@ -1,165 +1,128 @@
-// .background {
-//   background-image: url(@/assets/UnityMenu/newBackground.jpg);
-//   width: 100%;
-//   height: 100vh;
-//   background-size: cover;
-//   background-repeat: no-repeat;
-//   display: flex;
-//   justify-content: center;
-//   // align-items: flex-start;
-//   :global {
-//     .ant-popover-inner {
-//       background: #0d1a2b;
-//     }
-//   }
-// }
-// .menu {
-//   width: 1.52rem;
-//   height: 1.52rem;
-//   // background: linear-gradient(0deg, #285098, #1d3969);
-//   // box-shadow: 0px 3px 0.16rem 2px rgba(0, 0, 0, 0.3), 0px 5px 0.39rem 0.1rem rgba(0, 0, 0, 0.1);
-//   // border-radius: 50%;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   cursor: pointer;
-// }
-// .TogMenu {
-//   background-image: url(@/assets/UnityMenu/TogMenuBackground.png);
-//   width: 3.56rem;
-//   background-size: cover;
-//   background-repeat: no-repeat;
-//   position: absolute;
-//   top: 0.6rem;
-//   left: 0;
-//   display: flex;
-//   flex-direction: column;
-//   z-index: 99999;
-// }
-// .TogMenuClose {
-//   background-image: url(@/assets/UnityMenu/TogMenuClose.png);
-//   width: 0.23rem;
-//   height: 5px;
-//   background-size: cover;
-//   background-repeat: no-repeat;
-//   position: absolute;
-//   right: 0.1rem;
-//   top: 0.14rem;
-// }
-// .TogMenuItem {
-//   margin-left: 0.22rem;
-//   margin-right: 0.4rem;
-//   height: 0.6rem;
-//   display: flex;
-//   align-items: center;
-//   border-bottom: 1px solid rgb(176, 192, 224);
-// }
-// .TogMenuItemLeftLine {
-//   background-image: url(@/assets/UnityMenu/leftLine.png);
-//   height: 0.16rem;
-//   width: 4px;
-//   background-size: cover;
-//   background-repeat: no-repeat;
-// }
-// .TogMenuItemText {
-//   font-size: 0.18rem;
-//   font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
-//   font-weight: 400;
-//   color: #ffffff;
-//   line-height: 0.34rem;
-//   margin-left: 0.18rem;
-//   cursor: pointer;
-// }
-// .menuContent {
-//   height: 100%;
-//   padding-top: 1.6rem;
-//   width: 14.8rem;
-//   max-height: 100vh;
-//   overflow-y: hidden;
-// }
-// .menuFriName {
-//   font-size: 0.24rem;
-//   font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
-//   // font-weight: 400;
-//   color: #bae3ff;
-//   // line-height: 0.45rem;
-//   // text-shadow: 0px 5px 14px rgba(0, 0, 0, 0.35), 0px 3px 12px rgba(0, 0, 0, 0.19);
-//   cursor: pointer;
-//   user-select: none;
-//   letter-spacing: 2px;
-//   text-align: center;
-//   word-break: keep-all;
-// }
-// .card {
-//   width: 12rem;
-//   height: 6.4rem;
-// }
-// .wrap {
-//   display: flex;
-//   flex-wrap: wrap;
-//   justify-content: start;
-//   align-items: center;
-// }
-// .item {
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   width: 2.92rem;
-//   height: 2.2rem;
-//   margin-bottom: 0.64rem;
-// }
+.background {
+  background-image: url('@/Project/assets/platformMenu/newBackground.jpg');
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  :global {
+    .ant-popover-inner {
+      background: #0d1a2b;
+    }
+  }
+}
+.menu {
+  width: 152px;
+  height: 152px;
+  // background: linear-gradient(0deg, #285098, #1d3969);
+  // box-shadow: 0px 3px 16px 2px rgba(0, 0, 0, 0.3), 0px 5px 39px 10px rgba(0, 0, 0, 0.1);
+  // border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.TogMenu {
+  background-image: url('@/Project/assets/platformMenu/TogMenuBackground.png');
+  width: 356px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 60px;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 99999;
+}
+.TogMenuClose {
+  background-image: url('@/Project/assets/platformMenu/TogMenuClose.png');
+  width: 23px;
+  height: 5px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  right: 10px;
+  top: 14px;
+}
+.TogMenuItem {
+  margin-left: 22px;
+  margin-right: 40px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgb(176, 192, 224);
+}
+.TogMenuItemLeftLine {
+  background-image: url('@/Project/assets/platformMenu/leftLine.png');
+  height: 16px;
+  width: 4px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.TogMenuItemText {
+  font-size: 18px;
+  font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 34px;
+  margin-left: 18px;
+  cursor: pointer;
+}
+.menuContent {
+  height: 100%;
+  padding-top: 160px;
+  width: 1480px;
+  max-height: 100vh;
+  overflow-y: hidden;
+}
+.menuFriName {
+  font-size: 24px;
+  font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
+  // font-weight: 400;
+  color: #bae3ff;
+  // line-height: 45px;
+  // text-shadow: 0px 5px 14px rgba(0, 0, 0, 0.35), 0px 3px 12px rgba(0, 0, 0, 0.19);
+  cursor: pointer;
+  user-select: none;
+  letter-spacing: 2px;
+  text-align: center;
+  word-break: keep-all;
+}
+.card {
+  width: 120px;
+  height: 640px;
+}
+.wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: center;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 292px;
+  height: 220px;
+  margin-bottom: 64px;
+}
 
-// .headerText {
-//   width: 6rem;
-//   font-size: 0.36rem;
-//   font-family: YouSheBiaoTiHei;
-//   font-weight: 400;
-//   color: #ffffff;
-//   line-height: 0.63rem;
-//   text-align: center;
-//   cursor: default;
-// }
+.headerText {
+  width: 600px;
+  font-size: 36px;
+  font-family: YouSheBiaoTiHei;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 63px;
+  text-align: center;
+  cursor: default;
+}
 
-// .BreadcrumbWrap {
-//   position: absolute;
-//   left: 0.77rem;
-//   top: 0.15rem;
-//   height: 0.34rem;
-//   // width: 3.4rem;
-//   display: flex;
-//   align-items: center;
-// }
-// .BreadcrumbItem {
-//   background-size: contain;
-//   background-repeat: no-repeat;
-//   height: 0.34rem;
-//   font-size: 16px;
-//   font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
-//   font-weight: bold;
-//   color: #ffffff;
-//   line-height: 0.34rem;
-//   background: url(@/assets/UnityMenu/BreadcrumbSelect.png) no-repeat center;
-//   background-size: 100% 100%;
-//   padding-left: 0.18rem;
-//   padding-right: 0.16rem;
-//   cursor: pointer;
-//   &.active {
-//     background-image: url(@/assets/UnityMenu/Breadcrumb.png);
-//   }
-// }
-
-// .BreadcrumbContent {
-//   background-image: url(@/assets/UnityMenu/TogMenuBackground.png);
-//   width: 2.68rem;
-//   background-size: cover;
-//   background-repeat: no-repeat;
-//   position: absolute;
-//   display: flex;
-//   flex-direction: column;
-// }
-// .pic {
-//   width: 1.52rem;
-//   height: 1.52rem;
-//   background-size: cover;
-//   background-repeat: no-repeat;
-// }
+.pic {
+  width: 152px;
+  height: 152px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}