Merge pull request #9 from juicecube/sprint@1

Sprint@1

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,11 +2,16 @@
 
 - [ ] 新功能 Feat
 - [ ] 缺陷修复 Bug
-- [ ] 文档改进 Docs
+- [ ] 文档改进 Doc
 - [ ] 重构和项目优化 Refactor or Perfs
 - [ ] 添加测试用例 Test
 
 ### ❗️ 请务必确保：
 
 - [ ] 代码经历过不少于 1 遍`书写-构建-使用`的自测流程
-- [ ] TS 类型定义完整且没有 any
+- [ ] 有全面的组件文档
+- [ ] TS 类型定义完整且没有恶意 any
+
+### ⚠️ 请尽量保证：
+
+- [ ] 有完善的组件测试，覆盖率不低于 80%

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "monthly"

.gitignore

@@ -7,6 +7,8 @@
 /node_modules
 /npm-debug.log*
 /yarn-error.log
+package-lock.json
+yarn.lock
 
 # production
 /dist

docs/components/button.md

@@ -160,13 +160,13 @@ const menuComponents = (
     onClick={(e) => {
       message.success(`哦呵？`, e);
     }}>
-    <Menu.Item key="1" icon={<Icon type="i-add" />}>
+    <Menu.Item key="1" icon={<Icon type="gutline_add" />}>
       毛血旺
     </Menu.Item>
-    <Menu.Item key="2" icon={<Icon type="i-add" />}>
+    <Menu.Item key="2" icon={<Icon type="gutline_add" />}>
       水煮鱼
     </Menu.Item>
-    <Menu.Item key="3" icon={<Icon type="i-add" />}>
+    <Menu.Item key="3" icon={<Icon type="gutline_add" />}>
       红烧肉
     </Menu.Item>
   </Menu>
@@ -176,19 +176,19 @@ const pureMenuList = [
     key: 1,
     text: '毛血旺',
     value: '毛血旺',
-    iconType: 'i-add',
+    iconType: 'gutline_add',
   },
   {
     key: 2,
     text: '水煮鱼',
     value: '水煮鱼',
-    iconType: 'i-add',
+    iconType: 'gutline_add',
   },
   {
     key: 3,
     text: '红烧肉',
     value: '红烧肉',
-    iconType: 'i-add',
+    iconType: 'gutline_add',
   },
 ];
 const App = () => {
@@ -200,7 +200,7 @@ const App = () => {
         <Button>次要</Button>
         <Dropdown overlay={menuComponents}>
           <Button>
-            减脂 <Icon type="i-add" />
+            减脂 <Icon type="gutline_add" />
           </Button>
         </Dropdown>
       </Space>
@@ -214,7 +214,7 @@ const App = () => {
           onChange={(value) => {
             message.success(`来一份${value}`);
           }}>
-          减脂 <Icon type="i-add" />
+          减脂 <Icon type="gutline_add" />
         </Button>
       </Space>
     </>
@@ -241,7 +241,7 @@ const group = [
     key: 1,
     text: '菜单1',
     value: 1,
-    leftIconType: 'i-play',
+    leftIconType: 'round_left_g',
   },
   {
     key: 2,
@@ -253,23 +253,24 @@ const group = [
     key: 3,
     text: '菜单3',
     value: 3,
-    rightIconType: 'i-danmu',
+    rightIconType: 'round_right_g',
   },
 ];
 const App = () => {
   return (
     <>
       <h4>使用Button.Group组件的方式：</h4>
       <Button.Group>
-        <Button type="primary" icon={<Icon type="i-play" />}>
+        <Button type="primary" icon={<Icon type="round_left_g" />}>
           菜单1
         </Button>
         <Button>菜单2</Button>
         <Button type="primary">
           菜单3
-          <Icon type="i-danmu" />
+          <Icon type="round_right_g" />
         </Button>
       </Button.Group>
+      <Divider />
       <h4>使用group属性的方式：</h4>
       <Button
         group={group}
@@ -285,3 +286,12 @@ export default App;
 ```
 
 ## APIs
+
+## 优化内容
+
+- Button.Group 在 Antd 4.0 之后已经被官方建议移除(参见https://github.com/ant-design/ant-design/issues/21278)，但是实际上该需求被高频使用，所以我们基于原有 api 将他复原了回来。
+- 按照 Antd 官方的「菜单按钮」和「组合按钮」案例，需要 Dropdown、Menu、Button.Group 等各种组件联合使用才能实现。对此两种需求，我们分别添加`menu`和`group`属性，大大简化了实现路径。现在你可以通过下述方法实践：
+
+```
+<Button menu={oneMenuColumns}/>和<Button group={oneGroupColumns}/>
+```

docs/components/layout.md

@@ -0,0 +1,141 @@
+# Layout
+
+**`📦布局`进行页面级整体布局。**
+
+## 1. 顶部导航布局
+
+```tsx
+/**
+ * title: 顶部导航布局
+ * desc: 最基本的『上-中-下』布局。网站路由由位于顶部的导航进行主控，没有侧边导航栏。
+ */
+import React from 'react';
+import Menu from '@/Menu/Menu';
+import Layout from '@/Layout/Layout';
+import Button from '@/Button/Button';
+
+const HeaderContent = () => (
+  <div style={{ overflow: 'hidden' }}>
+    <div style={{ float: 'left', color: 'white' }}>
+      <img src="http://p7moe8jtz.bkt.clouddn.com/cashier/assets/favicon.png" width="26" height="26" />
+      <span style={{ padding: '0 16px' }}>统一交易管理系统</span>
+    </div>
+    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} style={{ float: 'left' }}>
+      <Menu.Item key="1">nav 1</Menu.Item>
+      <Menu.Item key="2">nav 2</Menu.Item>
+      <Menu.Item key="3">nav 3</Menu.Item>
+    </Menu>
+  </div>
+);
+
+const { Header, Content, Footer } = Layout;
+export default () => (
+  <Layout className="layout">
+    <Header style={{ overflow: 'hidden' }}>
+      <HeaderContent />
+    </Header>
+    <Content style={{ padding: '18px 50px' }}>
+      <div className="site-layout-content" style={{ minHeight: 160 }}>
+        View Contents
+      </div>
+    </Content>
+    <Footer style={{ textAlign: 'center' }}>后台管理系统设计规范组件库 &copy; 2020</Footer>
+  </Layout>
+);
+```
+
+## 2. 侧边导航布局
+
+```tsx
+/**
+ * title: 侧边导航布局
+ * desc: 侧边两列式布局，在页面布局上采用的是『左-右』的结构。页面横向空间有限时，侧边导航可收起。
+ * transform: true
+ */
+import React from 'react';
+import Menu from '@/Menu/Menu';
+import Layout from '@/Layout/Layout';
+import Button from '@/Button/Button';
+import Icon from '@/Icon/Icon';
+import { Divider } from 'antd';
+
+const HeaderContent = () => (
+  <div style={{ overflow: 'hidden', padding: '0 16px' }}>
+    <div style={{ float: 'right' }}>
+      <a style={{ marginRight: 12 }}>查收通知</a>
+      <Button type="primary">
+        <Icon type="user" />
+        退出登陆
+      </Button>
+    </div>
+  </div>
+);
+
+const { Header, Content, Footer, Sider } = Layout;
+const { SubMenu } = Menu;
+class App extends React.PureComponent {
+  state = {
+    collapsed: false,
+  };
+
+  onCollapse = (collapsed) => this.setState({ collapsed });
+
+  render() {
+    return (
+      <div style={{ width: '100%', transform: 'translate(0px, 0px)' }}>
+        <Layout>
+          <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
+            <div style={{ float: 'left', color: 'white', height: 32, margin: '16px 0', textAlign: 'center', width: '100%' }}>
+              <img src="http://p7moe8jtz.bkt.clouddn.com/cashier/assets/favicon.png" width="26" height="26" />
+              {this.state.collapsed ? null : <span style={{ padding: '0 8px' }}>统一交易管理系统</span>}
+            </div>
+            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
+              <Menu.Item key="1" icon={<Icon type="user" />}>
+                Option 1
+              </Menu.Item>
+              <Menu.Item key="2" icon={<Icon type="user" />}>
+                Option 2
+              </Menu.Item>
+              <SubMenu key="sub1" icon={<Icon type="user" />} title="User">
+                <Menu.Item key="3">Tom</Menu.Item>
+                <Menu.Item key="4">Bill</Menu.Item>
+                <Menu.Item key="5">Alex</Menu.Item>
+              </SubMenu>
+              <SubMenu key="sub2" icon={<Icon type="user" />} title="Team">
+                <Menu.Item key="6">Team 1</Menu.Item>
+                <Menu.Item key="8">Team 2</Menu.Item>
+              </SubMenu>
+              <Menu.Item key="9" icon={<Icon type="user" />} />
+            </Menu>
+          </Sider>
+          <Layout className="site-layout">
+            <Header className="site-layout-background" style={{ padding: 0 }}>
+              <HeaderContent />
+              <Divider />
+            </Header>
+            <Content style={{ margin: '0 16px', minHeight: '130%' }}>
+              <div className="site-layout-background" style={{ padding: 24, minHeight: 420 }}>
+                View Contents
+              </div>
+            </Content>
+            <Footer style={{ textAlign: 'center' }}>后台管理系统设计规范组件库 &copy; 2020</Footer>
+          </Layout>
+        </Layout>
+      </div>
+    );
+  }
+}
+export default App;
+```
+
+## 3. 组件概述
+
+- Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
+- Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
+- Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
+- Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
+- Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
+
+## 说明
+
+## APIs

docs/components/menu.md

@@ -1,26 +1,18 @@
 # Menu
 
-**`📦菜单`用于展示整个网站的分页和区分业务区块**
-
-## 1. 基本使用
-
-```tsx
-/**
- * title: 菜单按钮
- * desc: 按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到菜单按钮中组合使用。🚗可以通过两种方式使用`菜单按钮`功能，一种是使用Dropdown + Menu实现，另一种是为Button组件传入menu属性。
- */
-import React from 'react';
-import Icon from '@/Menu/Menu';
-```
-
-## 2. 接入平台权限管理系统
-
-```tsx
-/**
- * title: 权限管理系统
- * desc: 前提是必须接入了内部账号系统
- */
-```
+**`📦菜单`为页面和功能提供导航的菜单列表。**
+
+### 何时使用？
+
+导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
+
+## 1. 顶部导航
+
+<code src="./../demo/menu/head-menu.demo.tsx"/>
+
+## 2. 垂直菜单
+
+<code src="./../demo/menu/side-menu.demo.tsx"/>
 
 参见：
 

docs/demo/icon/normal-usage.demo.tsx

@@ -4,7 +4,7 @@ import { Space } from 'antd';
 
 export default () => (
   <Space size={50}>
-    <Icon type="i-play" />
+    <Icon type="ico_suggest_gift_l" />
     <Icon type="i-mute" />
     <Icon type="i-danmu" />
   </Space>

docs/demo/icon/used-in-others.demo.tsx

@@ -5,10 +5,10 @@ import Button from '@/Button/Button';
 
 export default () => (
   <Space size={50}>
-    <Button type="primary" icon={<Icon type="i-play" />}>
+    <Button type="primary" icon={<Icon type="ico_suggest_close" />}>
       点我
     </Button>
-    <Tag icon={<Icon type="i-mute" />} color="#cd201f">
+    <Tag icon={<Icon type="ico_suggest_close" />} color="#cd201f">
       朕是个Tag
     </Tag>
     <Popconfirm title="戳我干嘛？" icon={<Icon type="i-danmu" />}>

docs/demo/layout/head-nav.demo.tsx

@@ -0,0 +1,4 @@
+/**
+ * title: 顶部导航布局
+ * desc: 最基本的『上-中-下』布局。网站路由由位于顶部的导航进行主控，没有侧边导航栏。
+ */