feat: 新增grid组件

docs/mobile/App.jsx

@@ -1,11 +1,11 @@
 import React, { lazy, Suspense } from 'react';
-import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
+import { HashRouter, Switch, Route, Redirect, useHistory } from 'react-router-dom';
 import siteConfig from './mobile.config.js';
-import { getRoute } from './utils';
+import { getRoute, getCurrentRoute } from './utils';
+import THeader from './components/Header.jsx';
 
 const docRoutes = getRoute(siteConfig.docs, []);
-const renderRouter = () => {
-  return docRoutes.map((nav, i) => {
+const renderRouter = () => docRoutes.map((nav, i) => {
     const LazyCom = lazy(nav.component);
 
     return (
@@ -15,21 +15,35 @@ const renderRouter = () => {
         component={() => <LazyCom />}
       />
     );
-  });
+})
+
+const getHashName = (hash = '#/') => {
+  const { length } = hash;
+  return hash.substring(2, length);
 }
 
 function App() {
+
+  const history = useHistory();
+
+  const name = getHashName(history?.location?.hash)
+
+  const title = getCurrentRoute(siteConfig.docs, name)?.title
+
   return (
-    <HashRouter>
-      <Switch>
-        <Redirect from="/react-mobile" to="/react-mobile/components/button" />
-        <Suspense fallback={<h2>loading...</h2>}>
-          {renderRouter()}
-        </Suspense>
-        <Redirect from="*" to="/react-mobile/components/button" />
-        {/* TODO: 404 */}
-      </Switch>
-    </HashRouter>
+    <>
+      <THeader title={title}/>
+      <HashRouter>
+        <Switch>
+          <Redirect from="/react-mobile" to="/react-mobile/components/button" />
+          <Suspense fallback={<h2>loading...</h2>}>
+            {renderRouter()}
+          </Suspense>
+          <Redirect from="*" to="/react-mobile/components/button" />
+          {/* TODO: 404 */}
+        </Switch>
+      </HashRouter>
+    </>
   );
 }
 

docs/mobile/components/DemoBlock.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const TDemoBlock = (prop) => {
+    const { children, title, summary } = prop;
+    return <>
+        <div className="tdesign-mobile-demo-block">
+            <h2 v-if="title" className="tdesign-mobile-demo-block__title">{ title }</h2>
+            <p v-if="summary" className="tdesign-mobile-demo-block__summary">{ summary }</p>
+            { children }
+        </div>
+    </>
+}
+
+export default TDemoBlock;

docs/mobile/components/Header.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const THeader = (prop) => {
+
+  const { title } = prop;
+
+ return <>
+    {
+      title ? (<div v-show="title" className="tdesign-demo-topnav">
+        <div className="tdesign-demo-topnav-title">{ title }</div>
+        {/* <chevron-left-icon className="tdesign-demo-topnav__back" name="chevron-left"/> */}
+        </div>) : null
+    }
+  </>
+}
+
+export default THeader;

docs/mobile/main.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+import '../style/mobile/index.less'
 
 import '../../src/_common/style/mobile/_reset.less';
 import '../../src/_common/style/mobile/index.less';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('app'),
 );

docs/mobile/mobile.config.js

@@ -5,5 +5,10 @@ export default {
       name: 'button',
       component: () => import('@examples/button/demos/base.jsx'),
     },
+    {
+      title: 'Grid 宫格',
+      name: 'grid',
+      component: () => import('@examples/grid/demos/base.jsx'),
+    },
   ],
 };

docs/mobile/utils.js

@@ -3,7 +3,15 @@ export function getRoute(list, docRoutes) {
     if (item.children) {
       return getRoute(item.children, docRoutes);
     }
-    return docRoutes.push(item);
+    return docRoutes.push({
+      ...item,
+      path: `/${item.name}`
+    });
   });
   return docRoutes;
 }
+
+export function getCurrentRoute(docRoutes, name) {
+  const currentRoutes = docRoutes?.filter(item => item.name === name) || [];
+  return currentRoutes.length > 0 ? currentRoutes[0] : {};
+}

docs/site/App.jsx

@@ -57,7 +57,7 @@ function Components(props) {
       <td-header ref={tdHeaderRef} slot="header" platform="mobile">
         {/* <td-doc-search slot="search" ref={tdDocSearch}></td-doc-search> */}
       </td-header>
-      <td-doc-aside ref={tdDocAsideRef} title="React for Web"></td-doc-aside>
+      <td-doc-aside ref={tdDocAsideRef} title="React for Mobile"></td-doc-aside>
 
       <td-doc-content ref={tdDocContentRef} platform="mobile">
         <Suspense fallback={<h2>loading...</h2>}>

docs/site/site.config.js

@@ -26,5 +26,18 @@ export default {
         },
       ],
     },
+    {
+      title: '信息展示',
+      name: 'info',
+      type: 'component', // 组件文档
+      children: [
+        {
+          title: 'Grid 宫格',
+          name: 'grid',
+          path: '/react-mobile/components/grid',
+          component: () => import('@examples/grid/grid.md'),
+        },
+      ],
+    },
   ],
 };

docs/style/mobile/demo.less

@@ -0,0 +1,43 @@
+.tdesign-mobile-demo {
+  background-color: #F6F6F6;
+  font-family: "PingFang SC";
+
+  .title {
+    padding: 24px 16px 8px 16px;
+    opacity: 1;
+    color: rgba(0, 0, 0, 0.9);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+  }
+
+  .summary {
+    opacity: 1;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 12px;
+    line-height: 22px;
+    padding: 0 16px;
+  }
+
+  &-block {
+    width: 100%;
+
+    &__title {
+      padding: 24px 16px 0;
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    &__title + &__summary {
+      padding: 8px 16px 16px;
+    }
+
+    &__summary {
+      opacity: 1;
+      color: rgba(0, 0, 0, 0.4);
+      font-size: 12px;
+      line-height: 22px;
+      padding: 16px;
+    }
+  }
+}

docs/style/mobile/index.less

@@ -0,0 +1,25 @@
+@import '../vars.less';
+@import './demo.less';
+
+body {
+    background-color: #F5F5F5;
+}
+
+.tdesign-demo-topnav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background-color: #fff;
+    box-shadow: @shadow-level-1;
+    &-title{
+      font-size: 18px;
+    }
+    &__back{
+      position: absolute;
+      left: 16px;
+      font-size: 24px;
+      cursor: pointer;
+    }
+}

docs/style/vars.less

@@ -0,0 +1,125 @@
+@prefix: tdesign;
+@primary-color: #0052d9;
+
+@primary-color-darken-1: darken(@primary-color, (43 - 35) * 1%);
+@primary-color-darken-2: darken(@primary-color, (43 - 27) * 1%);
+@primary-color-darken-3: darken(@primary-color, (43 - 19) * 1%);
+@primary-color-darken-4: darken(@primary-color, (43 - 11) * 1%);
+
+@primary-color-ligher-1: lighten(@primary-color, (51 - 43) * 1%);
+@primary-color-ligher-2: lighten(@primary-color, (59 - 43) * 1%);
+@primary-color-ligher-3: lighten(@primary-color, (67 - 43) * 1%);
+@primary-color-ligher-4: lighten(@primary-color, (75 - 43) * 1%);
+@primary-color-ligher-5: lighten(@primary-color, (83 - 43) * 1%);
+@primary-color-ligher-6: lighten(@primary-color, (91 - 43) * 1%);
+@primary-color-ligher-7: lighten(@primary-color, (96 - 43) * 1%);
+// @primary-color-ligher-6: hsl(217, 100, 91);
+
+// 状态色
+@success-color: #3ecc36;
+@error-color: #ff3e00;
+@warning-color: #ffa700;
+@info-color: #c7ddf3;
+
+@disabled-color: #c0c0c0;
+
+// 文字色
+@text-color: #333; // 黑 80%
+@text-color-lighter-1: #666; // 黑 60%
+@text-color-lighter-2: #999; // 黑 40%
+@text-color-lighter-3: #ccc; // 黑 20%
+
+// 文字色
+@text-color-white: #fff;
+@text-color-white-lighter-1: rgba(255, 255, 255, 0.8);
+@text-color-white-lighter-2: rgba(255, 255, 255, 0.6);
+@text-color-white-lighter-3: rgba(255, 255, 255, 0.4);
+
+@placeholder-color: #999;
+
+@font-size-base: 14px;
+@line-height-base: 1.5;
+@font-family:  "PingFang SC", -apple-system, "Helvetica Neue", Helvetica, BlinkMacSystemFont, "Microsoft YaHei", tahoma, Arial, "Open Sans", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
+
+/**
+ * 文字部分 
+ * size 大小，line 行高， color 颜色
+ */
+// 字体大小
+@font-size-small: 12px;
+@font-size: 14px;
+@font-size-large: 16px;
+@font-size-larger: 18px;
+// 行高
+@line-height-small: 30px;
+@line-height: 38px;
+@line-height-large: 48px;
+@line-height-larger: 60px;
+
+// 标题文字
+@title-level-1-size: 38px;
+@title-level-1-line: 53 / 38;
+@title-level-1-color: @text-color;
+@title-level-2-size: 20px;
+@title-level-2-line: 28 / 20;
+@title-level-2-color: @text-color;
+@title-level-3-size: 16px;
+@title-level-3-line: 22 / 16;
+@title-level-3-color: @text-color;
+@title-level-4-size: 16px;
+@title-level-4-line: 22 / 16;
+@title-level-4-color: @text-color-lighter-1;
+
+// 正常文字
+@text-level-1-size: 14px;
+@text-level-1-line: 20 / 14;
+@text-level-1-color: @text-color;
+@text-level-2-size: 14px;
+@text-level-2-line: 20 / 14;
+@text-level-2-color: @text-color-lighter-1;
+@text-level-3-size: 14px;
+@text-level-3-line: 20 / 14;
+@text-level-3-color: @text-color-lighter-2;
+
+// 小字
+@smalltext-level-1-size: 12px;
+@smalltext-level-1-line: 17 / 14;
+@smalltext-level-1-color: @text-color-lighter-1;
+@smalltext-level-2-size: 12px;
+@smalltext-level-2-line: 17 / 14;
+@smalltext-level-2-color: @text-color-lighter-2;
+
+@link-color: @primary-color;
+@link-hover-color: lighten(@primary-color, 20%);
+@link-active-color: darken(@primary-color, 20%);
+@link-decoration: none;
+@link-hover-decoration: none;
+
+// Shadow
+@shadow-level-1: 3px 3px 8px 2px rgba(0, 0, 0, 0.06);
+@shadow-level-2: 6px 6px 12px 6px rgba(0, 0, 0, 0.08);
+
+
+// border
+@border-color: #d9d9d9;
+@border-main: 1px solid @border-color;
+@border-color-2: lighten(@border-color, 5.9124%);
+@border-main-2: 1px solid @border-color-2;
+
+// rate
+@background-color-disabled: #e9e9e9;
+@background-color-active: #ffa700;
+
+@border-radius-percent: 0;
+
+@body-background: #ffffff;
+@component-background: #ffffff;
+
+// layout
+@layoutMargin: 10px;
+
+// header 
+@headerHeight: 81px;
+
+// footer
+@footerHeight: 160px;