upgrade ice-library-management-admin to fusion design

react-materials/scaffolds/ice-library-management-admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icedesign/library-management-admin",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "该模板内置了基础的表单和表格区块，适用于项目图书馆管理类系统，使用时需要根据需求进行删除和添加",
   "homepage": "https://unpkg.com/@icedesign/library-management-admin@latest/build/index.html",
   "files": [
@@ -14,16 +14,15 @@
     ".eslintrc"
   ],
   "dependencies": {
-    "@icedesign/base": "^0.2.5",
-    "@icedesign/container": "^0.1.4",
-    "@icedesign/form-binder": "^0.1.7",
-    "@icedesign/icon": "^0.1.1",
-    "@icedesign/img": "^0.1.0",
-    "@icedesign/layout": "^0.1.0",
-    "@icedesign/menu": "^0.1.0",
-    "@icedesign/skin": "^0.1.0",
+    "@alifd/next": "^1.x",
+    "@alifd/theme-1": "0.0.6",
+    "@icedesign/container": "^1.x",
+    "@icedesign/form-binder": "^1.x",
+    "@icedesign/foundation-symbol": "^1.x",
+    "@icedesign/img": "^1.x",
+    "@icedesign/layout": "^1.x",
     "classnames": "^2.2.5",
-    "foundation-symbol": "^0.1.0",
+    "moment": "^2.23.0",
     "prop-types": "^15.5.8",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
@@ -49,16 +48,13 @@
     "access": "public"
   },
   "buildConfig": {
-    "theme": "@icedesign/skin",
+    "theme": "@alifd/theme-1",
     "entry": "src/index.js",
     "localization": false,
     "output": {
       "publicPath": "./"
     }
   },
-  "themeConfig": {
-    "primaryColor": "#447eff"
-  },
   "scaffoldConfig": {
     "builder": "ice-scripts",
     "name": "ice-library-management-admin",

react-materials/scaffolds/ice-library-management-admin/src/components/ContainerTitle/ContainerTitle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@icedesign/base';
+import { Button } from '@alifd/next';
 
 const ContainerTitle = ({ title, style, ...props }) => {
   return (

react-materials/scaffolds/ice-library-management-admin/src/index.js

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
 // 载入默认全局样式 normalize 、.clearfix 和一些 mixin 方法等
-import '@icedesign/base/reset.scss';
+import '@alifd/next/reset.scss';
 import router from './router';
 
 const ICE_CONTAINER = document.getElementById('ice-container');

react-materials/scaffolds/ice-library-management-admin/src/layouts/BasicLayout/components/Aside/Aside.jsx

@@ -1,10 +1,12 @@
 /* eslint no-undef:0, no-unused-expressions:0, array-callback-return:0 */
 import React, { Component } from 'react';
-import Menu, { Item as MenuItem } from '@icedesign/menu';
+import { Nav } from '@alifd/next';
 import { withRouter, Link } from 'react-router-dom';
-import FoundationSymbol from 'foundation-symbol';
+import FoundationSymbol from '@icedesign/foundation-symbol';
 import { asideMenuConfig } from '../../../../menuConfig';
 
+const {Item} = Nav;
+
 import './Aside.scss';
 
 @withRouter
@@ -23,22 +25,22 @@ export default class BasicLayout extends Component {
     const { pathname } = location;
 
     return (
-      <Menu mode="inline" selectedKeys={[pathname]} className="ice-menu-custom">
+      <Nav selectedKeys={[pathname]} className="ice-menu-custom">
         {Array.isArray(asideMenuConfig) &&
           asideMenuConfig.length > 0 &&
           asideMenuConfig.map((nav) => {
             return (
-              <MenuItem key={nav.path}>
+              <Item key={nav.path}>
                 <Link to={nav.path} className="ice-menu-link">
                   {nav.icon ? (
                     <FoundationSymbol size="small" type={nav.icon} />
                   ) : null}
                   <span className="ice-menu-item-text">{nav.name}</span>
                 </Link>
-              </MenuItem>
+              </Item>
             );
           })}
-      </Menu>
+      </Nav>
     );
   }
 }

react-materials/scaffolds/ice-library-management-admin/src/layouts/BasicLayout/components/Aside/Aside.scss

@@ -1,27 +1,30 @@
-.ice-menu-custom.ice-menu-root {
+.ice-menu-custom {
   height: 100%;
   padding-top: 20px;
   box-shadow: 4px 1px 12px rgba(0, 55, 107, 0.04);
-
-  .ice-menu-item {
+  width: 240px;
+  .ice-menu-item-text {
+    padding-left: 1em;
+  }
+  .next-menu-item {
     height: auto;
     line-height: normal;
     .ice-menu-link {
       display: flex;
-      padding: 15px 0;
+      padding: 12px 0;
       color: #666;
       font-weight: 500;
     }
   }
-  .ice-menu-item-selected {
+  .next-menu-item-selected {
     background: none !important;
     border-radius: 0 !important;
-    border-right: 3px solid #447eff;
-    .ice-menu-link {
-      color: #447eff;
+    border-right: 3px solid $color-brand1-6;
+    .next-menu-link {
+      color: $color-brand1-6;
     }
-    .ice-menu-link:hover {
-      color: #447eff !important;
+    .next-menu-link:hover {
+      color: $color-brand1-6 !important;
     }
   }
 }

react-materials/scaffolds/ice-library-management-admin/src/layouts/BasicLayout/components/Footer/Footer.jsx

@@ -12,8 +12,9 @@ export default class Footer extends PureComponent {
       <Layout.Footer
         className={cx('ice-design-layout-footer', className)}
         style={{
-          ...style,
+          backgroundColor: 'transparent',
           lineHeight: '36px',
+          ...style,
         }}
       >
         <div className="ice-design-layout-footer-body">

react-materials/scaffolds/ice-library-management-admin/src/layouts/BasicLayout/components/Header/Header.jsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
-import { Balloon, Icon } from '@icedesign/base';
-import Menu, { SubMenu, Item as MenuItem } from '@icedesign/menu';
-import FoundationSymbol from 'foundation-symbol';
+import { Balloon, Icon, Nav } from '@alifd/next';
+import FoundationSymbol from '@icedesign/foundation-symbol';
 import IceImg from '@icedesign/img';
 import { headerMenuConfig } from '../../../../menuConfig';
 import Logo from '../Logo';
 import './Header.scss';
 
+const {SubNav, Item} = Nav;
 @withRouter
 export default class Header extends Component {
   static propTypes = {};
@@ -27,27 +27,28 @@ export default class Header extends Component {
         <div className="header-content">
           <Logo isDark />
           <div className="header-navbar">
-            <Menu
+            <Nav
               className="header-navbar-menu"
               onClick={this.handleNavClick}
               selectedKeys={[pathname]}
               defaultSelectedKeys={[pathname]}
-              mode="horizontal"
+              type="secondary"
+              direction="hoz"
             >
               {headerMenuConfig &&
                 headerMenuConfig.length > 0 &&
                 headerMenuConfig.map((nav, index) => {
                   if (nav.children && nav.children.length > 0) {
                     return (
-                      <SubMenu
+                      <SubNav
                         triggerType="click"
                         key={index}
                         title={
                           <span>
                             {nav.icon ? (
                               <FoundationSymbol size="small" type={nav.icon} />
                             ) : null}
-                            <span>{nav.name}</span>
+                            <span className="custom-nav-item-text">{nav.name}</span>
                           </span>
                         }
                       >
@@ -60,23 +61,23 @@ export default class Header extends Component {
 
                             linkProps.href = item.path;
                             return (
-                              <MenuItem key={item.path}>
+                              <Item key={item.path}>
                                 <a {...linkProps}>
                                   <span>{item.name}</span>
                                 </a>
-                              </MenuItem>
+                              </Item>
                             );
                           }
                           linkProps.to = item.path;
                           return (
-                            <MenuItem key={item.path}>
+                            <Item key={item.path}>
                               <Link {...linkProps}>
                                 <span>{item.name}</span>
                               </Link>
-                            </MenuItem>
+                            </Item>
                           );
                         })}
-                      </SubMenu>
+                      </SubNav>
                     );
                   }
                   const linkProps = {};
@@ -86,33 +87,33 @@ export default class Header extends Component {
                     }
                     linkProps.href = nav.path;
                     return (
-                      <MenuItem key={nav.path}>
+                      <Item key={nav.path}>
                         <a {...linkProps}>
                           <span>
                             {nav.icon ? (
                               <FoundationSymbol size="small" type={nav.icon} />
                             ) : null}
-                            {nav.name}
+                            <span className="custom-nav-item-text">{nav.name}</span>
                           </span>
                         </a>
-                      </MenuItem>
+                      </Item>
                     );
                   }
                   linkProps.to = nav.path;
                   return (
-                    <MenuItem key={nav.path}>
+                    <Item key={nav.path}>
                       <Link {...linkProps}>
                         <span>
                           {nav.icon ? (
                             <FoundationSymbol size="small" type={nav.icon} />
                           ) : null}
-                          {nav.name}
+                          <span className="custom-nav-item-text">{nav.name}</span>
                         </span>
                       </Link>
-                    </MenuItem>
+                    </Item>
                   );
                 })}
-            </Menu>
+            </Nav>
             <Balloon
               triggerType="click"
               trigger={

react-materials/scaffolds/ice-library-management-admin/src/layouts/BasicLayout/components/Header/Header.scss

@@ -3,9 +3,9 @@
   left: 0;
   right: 0;
   z-index: 999;
-  background: #447eff;
+  background: $color-brand1-6;
   min-width: 1200px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  box-shadow: 0 1px 4px transparentize($color-brand1-6, 0.9);
   .header-content {
     width: 100%;
     height: 62px;
@@ -18,11 +18,14 @@
   .header-navbar {
     display: flex;
     flex-direction: row;
-    .ice-menu {
+    .custom-nav-item-text {
+      padding-left: 1em;
+    }
+    .next-menu {
       background: transparent;
       color: #fff;
-      .ice-menu-submenu-title,
-      .ice-menu-item {
+      .next-menu-submenu-title,
+      .next-menu-item {
         font-size: 14px;
         &:hover,
         a:hover {
@@ -67,9 +70,9 @@
     line-height: 40px;
     font-size: 12px;
     a {
-      color: #666;
+      color: $color-text1-3;
       &:hover {
-        color: #447eff;
+        color: $color-brand1-6;
       }
     }
     i {

react-materials/scaffolds/ice-library-management-admin/src/layouts/UserLayout/UserLayout.scss

@@ -56,13 +56,13 @@
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
-    color: #999;
+    color: $color-text1-2;
   }
   .submitBtn {
     font-size: 16px;
     height: 40px;
     line-height: 40px;
-    background: #3080fe;
+    background: $color-brand1-6;
     border-radius: 4px;
   }
   .checkbox {
@@ -76,12 +76,12 @@
     justify-content: center;
   }
   .tips-text {
-    color: #999;
+    color: $color-text1-2;
     text-decoration: none;
     font-size: 13px;
   }
   .line {
-    color: #dcd6d6;
+    color: $color-line1-1;
     margin: 0 8px;
   }
 
@@ -95,7 +95,7 @@
     }
   }
   .next-checkbox-label {
-    color: #999;
+    color: $color-text1-2;
     font-size: 13px;
   }
 }