chore: 升级模板质量 yunqi (#1352)

* chore: 路由优化

* chore: 文件名优化

* chore: 版本号

react-materials/scaffolds/ice-yunqi-homepage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icedesign/yunqi-homepage-scaffold",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "云栖大会官方首页模板，适用于信息展示类的场景",
   "homepage": "https://alibaba.github.io/ice/scaffold-preview/ice-yunqi-homepage/index.html",
   "keywords": [

react-materials/scaffolds/ice-yunqi-homepage/src/components/Header/Header.jsx → react-materials/scaffolds/ice-yunqi-homepage/src/components/Header/index.jsx

@@ -3,7 +3,7 @@ import { Link, withRouter } from 'react-router-dom';
 import Menu, { SubMenu, Item as MenuItem } from '@icedesign/menu';
 import { headerMenuConfig } from '../../menuConfig';
 import Logo from '../Logo';
-import './Header.scss';
+import './index.scss';
 
 @withRouter
 export default class Header extends Component {

react-materials/scaffolds/ice-yunqi-homepage/src/components/BasicNotFound/BasicNotFound.jsx → react-materials/scaffolds/ice-yunqi-homepage/src/components/NotFound/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import IceContainer from '@icedesign/container';
-import './BasicNotFound.scss';
+import './index.scss';
 
 export default class BasicNotFound extends Component {
   static displayName = 'BasicNotFound';

react-materials/scaffolds/ice-yunqi-homepage/src/index.js

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom';
-// 载入默认全局样式 normalize 、.clearfix 和一些 mixin 方法等
+// 载入默认全局样式 normalize
 import '@icedesign/base/reset.scss';
 import router from './router';
 

react-materials/scaffolds/ice-yunqi-homepage/src/layouts/HeaderFooterLayout/index.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { Switch, Route } from 'react-router-dom';
+import Layout from '@icedesign/layout';
+import Header from '../../components/Header';
+import Footer from '../../components/Footer';
+import routerData from '../../routerConfig';
+import NotFound from '../../components/NotFound';
+
+export default class HeaderFooterLayout extends Component {
+  static propTypes = {};
+
+  static defaultProps = {};
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Header />
+        <Switch>
+          {routerData.map((item, index) => {
+            return item.component ? (
+              <Route
+                key={index}
+                path={item.path}
+                component={item.component}
+              />
+            ) : null;
+          })}
+
+          {/* 未匹配到的路由重定向到 NotFound */}
+          <Route component={NotFound} />
+        </Switch>
+        <Footer />
+      </Layout>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    minWidth: '1200px',
+    background: '#fff',
+  },
+};

react-materials/scaffolds/ice-yunqi-homepage/src/router.jsx

@@ -1,119 +1,18 @@
 /**
- * 定义应用路
+ * 定义应用路由
  */
-import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 import React from 'react';
-
-import routerConfig from './routerConfig';
-
-/**
- * 将路由信息扁平化，继承上一级路由的 path
- * @param {Array} config 路由配置
- */
-function recursiveRouterConfigV4(config = []) {
-  const routeMap = [];
-  config.forEach((item) => {
-    const route = {
-      path: item.path,
-      layout: item.layout,
-      component: item.component,
-    };
-    if (Array.isArray(item.children)) {
-      route.childRoutes = recursiveRouterConfigV4(item.children);
-    }
-    routeMap.push(route);
-  });
-  return routeMap;
-}
-
-/**
- * 将扁平化后的路由信息生成 Route 节点
- *
- * @param {Element} container 路由容器
- * @param {object} router 路由对象
- * @param {string} contextPath 上层路由地址
- * @return {Route}
- * @example
- * <Switch>
- *   <Route exact path="/" component={Home} />
- *   <Route exact path="/page3" component={Page3} />
- *   <Route exact path="/page4" component={Page4} />
- *   <Route exact path="/page3/:id" component={Page3} />
- *   <Route exact component={NotFound} />
- * </Switch>
- */
-function renderRouterConfigV4(container, router, contextPath) {
-  const routeChildren = [];
-  const renderRoute = (routeContainer, routeItem, routeContextPath) => {
-    let routePath;
-    if (!routeItem.path) {
-      // eslint-disable-next-line
-      console.error('route must has `path`');
-    } else if (routeItem.path === '/' || routeItem.path === '*') {
-      routePath = routeItem.path;
-    } else {
-      routePath = `/${routeContextPath}/${routeItem.path}`.replace(/\/+/g, '/');
-    }
-
-    // 优先使用当前定义的 layout
-    if (routeItem.layout && routeItem.component) {
-      routeChildren.push(
-        <Route
-          key={routePath}
-          exact
-          path={routePath}
-          render={(props) => {
-            return React.createElement(
-              routeItem.layout,
-              props,
-              React.createElement(routeItem.component, props)
-            );
-          }}
-        />
-      );
-    } else if (routeContainer && routeItem.component) {
-      // 使用上层节点作为 container
-      routeChildren.push(
-        <Route
-          key={routePath}
-          exact
-          path={routePath}
-          render={(props) => {
-            return React.createElement(
-              routeContainer,
-              props,
-              React.createElement(routeItem.component, props)
-            );
-          }}
-        />
-      );
-    } else {
-      routeChildren.push(
-        <Route
-          key={routePath}
-          exact
-          path={routePath}
-          component={routeItem.component}
-        />
-      );
-    }
-
-    // 存在子路由，递归当前路径，并添加到路由中
-    if (Array.isArray(routeItem.childRoutes)) {
-      routeItem.childRoutes.forEach((r) => {
-        // 递归传递当前 route.component 作为子节点的 container
-        renderRoute(routeItem.component, r, routePath);
-      });
-    }
-  };
-
-  router.forEach((r) => {
-    renderRoute(container, r, contextPath);
-  });
-
-  return <Switch>{routeChildren}</Switch>;
-}
-
-const routerWithReactRouter4 = recursiveRouterConfigV4(routerConfig);
-const routeChildren = renderRouterConfigV4(null, routerWithReactRouter4, '/');
-export default <Router>{routeChildren}</Router>;
+import { HashRouter, Switch, Route } from 'react-router-dom';
+import HeaderFooterLayout from './layouts/HeaderFooterLayout';
+
+const router = () => {
+  return (
+    <HashRouter>
+      <Switch>
+        <Route path="/" component={HeaderFooterLayout} />
+      </Switch>
+    </HashRouter>
+  );
+};
+
+export default router();

react-materials/scaffolds/ice-yunqi-homepage/src/routerConfig.js

@@ -2,32 +2,22 @@
 // 你可以调整 routerConfig 里的内容
 // 变量名 routerConfig 为 iceworks 检测关键字，请不要修改名称
 
-import HeaderFooterLayout from './layouts/HeaderFooterLayout';
 import Home from './pages/Home';
 import Guests from './pages/Guests';
 import Partner from './pages/Partner';
-import NotFound from './pages/NotFound';
 
 const routerConfig = [
-  {
-    path: '/',
-    layout: HeaderFooterLayout,
-    component: Home,
-  },
   {
     path: '/guests',
-    layout: HeaderFooterLayout,
     component: Guests,
   },
   {
     path: '/partner',
-    layout: HeaderFooterLayout,
     component: Partner,
   },
   {
-    path: '*',
-    layout: HeaderFooterLayout,
-    component: NotFound,
+    path: '/',
+    component: Home,
   },
 ];