upgrade ice-creator-admin to @alifd/next

react-materials/scaffolds/ice-creator-admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icedesign/creator-admin-scaffold",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "该模板适用于创作者发布文章，帖子类的管理后台",
   "homepage": "https://unpkg.com/@icedesign/creator-admin-scaffold@latest/build/index.html",
   "author": "noyobo <nongyoubao@alibaba-inc.com>",
@@ -16,18 +16,17 @@
   ],
   "dependencies": {
     "@antv/data-set": "^0.8.9",
-    "@icedesign/base": "^0.1.5-1",
-    "@icedesign/container": "^0.1.4",
+    "@alifd/next": "^1.x",
+    "@icedesign/container": "^1.x",
     "@icedesign/form-binder": "^0.1.7",
-    "@icedesign/img": "^0.1.2",
-    "@icedesign/layout": "^0.1.2",
-    "@icedesign/menu": "^0.1.1",
-    "@icedesign/skin": "^0.1.14",
+    "@icedesign/img": "^1.x",
+    "@icedesign/layout": "^1.x",
+    "@alifd/theme-1": "^0.0.6",
     "bizcharts": "^3.2.0",
     "classnames": "^2.2.6",
     "enquire-js": "0.1.x",
-    "fecha": "^2.3.3",
-    "foundation-symbol": "^0.1.3",
+    "moment": "^2.23.0",
+    "@icedesign/foundation-symbol": "^1.x",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-document-title": "^2.0.3",
@@ -51,15 +50,12 @@
     "lint": "eslint . --ext '.js,.jsx' --fix"
   },
   "buildConfig": {
-    "theme": "@icedesign/skin",
+    "theme": "@alifd/theme-1",
     "entry": "src/index.js",
     "output": {
       "publicPath": "./"
     }
   },
-  "themeConfig": {
-    "theme": "light"
-  },
   "scaffoldConfig": {
     "builder": "ice-scripts",
     "name": "ice-creator-admin",

react-materials/scaffolds/ice-creator-admin/src/components/NotFound/NotFound.scss

@@ -6,7 +6,7 @@
       margin-right: 10px;
     }
     .title {
-      font-size: 14px;
+      font-size: $font-size-body-2;
       margin: 10px 0;
     }
     .description {
@@ -27,7 +27,7 @@
       margin: 10px 0;
     }
     .description {
-      font-size: 14px;
+      font-size: $font-size-body-2;
     }
   }
 }
@@ -44,7 +44,7 @@
       margin: 20px 0;
     }
     .description {
-      font-size: 16px;
+      font-size: $font-size-subhead;
     }
   }
 }

react-materials/scaffolds/ice-creator-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-creator-admin/src/layouts/BasicLayout/components/Aside/index.jsx

@@ -1,12 +1,14 @@
 /* eslint no-undef:0, no-unused-expressions:0, array-callback-return:0 */
 import { Link } from 'react-router-dom';
 import { withRouter } from 'react-router';
-import FoundationSymbol from 'foundation-symbol';
+import FoundationSymbol from '@icedesign/foundation-symbol';
 import Layout from '@icedesign/layout';
-import Menu, { SubMenu, Item as MenuItem } from '@icedesign/menu';
+import { Nav } from '@alifd/next';
 import React, { Component } from 'react';
 import { asideMenuConfig } from '../../../../menuConfig';
+import styles from './index.module.scss';
 
+const { SubNav, Item } = Nav;
 @withRouter
 export default class Aside extends Component {
   constructor(props) {
@@ -47,31 +49,26 @@ export default class Aside extends Component {
     return openKeys;
   };
 
+
   render() {
     const { location } = this.props;
     const { pathname } = location;
 
-    console.log({ pathname });
-
     return (
-      <Layout.Aside width="auto" theme="light" style={styles.aside}>
-        <Menu
-          defaultSelectedKeys={[pathname]}
-          mode="inline"
+      <Layout.Aside className={styles.aside}>
+        <Nav
           selectedKeys={[pathname]}
+          className={styles.menu}
           openKeys={this.state.openKeys}
-          onOpenChange={this.onOpenChange}
-          onClick={this.onMenuClick}
-          style={styles.menu}
-        >
+          onOpen={this.onOpenChange}>
           {Array.isArray(asideMenuConfig) &&
             asideMenuConfig.length > 0 &&
             asideMenuConfig.map((nav, index) => {
               if (nav.children && nav.children.length > 0) {
                 return (
-                  <SubMenu
+                  <SubNav
                     key={index}
-                    title={
+                    label={
                       <span>
                         {nav.icon ? (
                           <FoundationSymbol size="small" type={nav.icon} />
@@ -93,12 +90,12 @@ export default class Aside extends Component {
                         linkProps.to = item.path;
                       }
                       return (
-                        <MenuItem key={item.path}>
+                        <Item key={item.path}>
                           <Link {...linkProps}>{item.name}</Link>
-                        </MenuItem>
+                        </Item>
                       );
                     })}
-                  </SubMenu>
+                  </SubNav>
                 );
               }
               const linkProps = {};
@@ -111,7 +108,7 @@ export default class Aside extends Component {
                 linkProps.to = nav.path;
               }
               return (
-                <MenuItem key={nav.path}>
+                <Item key={nav.path}>
                   <Link {...linkProps}>
                     <span>
                       {nav.icon ? (
@@ -120,24 +117,12 @@ export default class Aside extends Component {
                       <span className="ice-menu-collapse-hide">{nav.name}</span>
                     </span>
                   </Link>
-                </MenuItem>
+                </Item>
               );
             })}
-        </Menu>
+        </Nav>
         {/* 侧边菜单项 end */}
       </Layout.Aside>
     );
   }
 }
-
-const styles = {
-  aside: {
-    margin: '20px 0 0 20px',
-  },
-  menu: {
-    minHeight: '500px',
-    width: '240px',
-    paddingTop: '20px',
-    borderRadius: '6px',
-  },
-};

react-materials/scaffolds/ice-creator-admin/src/layouts/BasicLayout/components/Aside/index.module.scss

@@ -0,0 +1,18 @@
+.aside {
+  flex: 0 0 auto;
+  margin: 20px 0 0 20px;
+  :global {
+    .next-nav {
+      box-shadow: none;
+    }
+    .ice-menu-collapse-hide {
+      padding-left: 1em;
+    }
+  }
+}
+.menu {
+  width: 240px;
+  min-height: 500px;
+  padding-top: 20px;
+  border-radius: 6px;
+}

react-materials/scaffolds/ice-creator-admin/src/layouts/BasicLayout/components/Header/index.jsx

@@ -1,13 +1,12 @@
 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 './index.scss';
-
+const {SubNav, Item} = Nav;
 @withRouter
 export default class Header extends Component {
   render() {
@@ -16,21 +15,21 @@ export default class Header extends Component {
     return (
       <div className="header-container">
         <div className="header-content">
-          <Logo isDark />
+          <Logo/>
           <div className="header-navbar">
-            <Menu
+            <Nav
               className="header-navbar-menu"
               onClick={this.handleNavClick}
               selectedKeys={[pathname]}
               defaultSelectedKeys={[pathname]}
-              mode="horizontal"
+              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={
@@ -51,23 +50,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 = {};
@@ -77,7 +76,7 @@ export default class Header extends Component {
                     }
                     linkProps.href = nav.path;
                     return (
-                      <MenuItem key={nav.path}>
+                      <Item key={nav.path}>
                         <a {...linkProps}>
                           <span>
                             {nav.icon ? (
@@ -86,12 +85,12 @@ export default class Header extends Component {
                             {nav.name}
                           </span>
                         </a>
-                      </MenuItem>
+                      </Item>
                     );
                   }
                   linkProps.to = nav.path;
                   return (
-                    <MenuItem key={nav.path}>
+                    <Item key={nav.path}>
                       <Link {...linkProps}>
                         <span>
                           {nav.icon ? (
@@ -100,10 +99,10 @@ export default class Header extends Component {
                           {nav.name}
                         </span>
                       </Link>
-                    </MenuItem>
+                    </Item>
                   );
                 })}
-            </Menu>
+            </Nav>
           </div>
 
           <Balloon

react-materials/scaffolds/ice-creator-admin/src/layouts/BasicLayout/components/Header/index.scss

@@ -15,14 +15,13 @@
     flex: auto;
     justify-content: flex-end;
     flex-direction: row;
-    .ice-menu {
-      background: transparent;
-      .ice-menu-submenu-title,
-      .ice-menu-item {
-        font-size: 14px;
-        a:hover {
-          color: #2077ff;
-        }
+    .header-navbar-menu {
+      box-shadow: none;
+      .next-nav-item.next-selected {
+        background-color: transparent;
+      }
+      .ice-icon-stable {
+        padding-right: 1em;
       }
     }
   }
@@ -64,7 +63,7 @@
     color: #666;
     cursor: pointer;
     a:hover {
-      color: #2077ff;
+      color: $color-brand1-6;
     }
     i {
       margin-right: 5px;

react-materials/scaffolds/ice-creator-admin/src/layouts/BasicLayout/components/Logo/index.js

@@ -1,23 +1,13 @@
 import React, { PureComponent } from 'react';
 import { Link } from 'react-router-dom';
+import styles from './index.module.scss';
 
 export default class Logo extends PureComponent {
   render() {
     return (
-      <Link to="/" style={{ ...styles.logo, ...this.props.style }}>
+      <Link to="/" className={styles.logo} style={this.props.style}>
         LOGO
       </Link>
     );
   }
 }
-
-const styles = {
-  logo: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '36px',
-    fontWeight: 'bold',
-    color: '#447eff',
-  },
-};

react-materials/scaffolds/ice-creator-admin/src/layouts/BasicLayout/components/Logo/index.module.scss

@@ -0,0 +1,11 @@
+.logo{
+  color: $color-brand1-6;
+  display: flex;
+  font-size: 36px;
+  align-items: center;
+  font-weight: bold;
+  justify-content: center;
+  &:visited, &:link {
+    color: $color-brand1-6;
+  }
+}