ContextmenuTabs左右滚动/文档更新/修复Tabs测试用例

.eslintignore

@@ -1,3 +1,6 @@
 /.build-cache/
 **/_vendor/**/*
 /tests/
+**/es/**/*
+**/lib/**/*
+**/dist/**/*

.eslintrc.js

@@ -1,6 +1,5 @@
-const isProduction = process.env.NODE_NEV === 'production';
 module.exports = {
-  extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:jest/recommended', 'plugin:react/recommended', 'plugin:import/typescript'],
+  extends: ['airbnb', 'prettier', 'plugin:import/typescript'],
   env: {
     browser: true,
     node: true,
@@ -31,6 +30,7 @@ module.exports = {
         'react/no-array-index-key': 1,
         'spaced-comment': 0,
         'react/require-default-props': 0,
+        'react/jsx-closing-bracket-location': 1,
       },
     },
     {
@@ -90,6 +90,9 @@ module.exports = {
     'arrow-body-style': 0,
     'dot-notation': 0,
     'max-classes-per-file': 0,
+    'prefer-const': 1,
+    'no-bitwise': 0,
+    'no-continue': 0,
     camelcase: 1,
   },
 };

.github/workflows/npm-pub.yml

@@ -27,6 +27,11 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: config git
+        run: |
+          git config user.name ${{ secrets.GIT_USERNAME }}
+          git config user.email ${{ secrets.GIT_EMAIL }}
+
       - name: install dependencies
         run: npm install
 

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-@mlz/admin 是遵循编程猫后台管理系统设计规范的 React 组件库
+This is a extended UI Library, packaged with Ant Design
 </p>
 <p align="center" style="font-size: 32px">
 🌈 https://www.mlz-admin.com
@@ -12,28 +12,32 @@
 
 ---
 
-## 使用方法
+## Usage
 
-#### 1. 安装
+#### 1. Install
 
 ```shell
 $ npm install @mlz/admin -S
 ```
 
-#### 2. 使用
+#### 2. Import Code
 
 ```jsx
 import { Button } from '@mlz/admin';
 
 const App = () => <Button type="primary">❤️❤️❤️</Button>;
 ```
 
-更多详细内容请访问本库的在线文档。
+> 🎉 we have supportted Server Side Rendering now! (>=1.2.0)
 
-## 贡献指南
+visit our [WEBSITE](https://www.mlz-admin.com) to learn more！
 
-非常期待你的 PR！本库的开发代码，基于 [《贡献指南》](https://github.com/juicecube/mlz-admin/blob/master/CONTRIBUTING.md) ，所以请先仔细阅读。
+## Contribution
 
-## 讨论组
+we are expecting your great `Pull Request` which's based on <[our contribution doc](https://github.com/juicecube/mlz-admin/blob/master/CONTRIBUTING.md)>. so read it before your coding plz.
+
+## Dingtalk Disscussion Group
 
 <img src="https://raw.githubusercontent.com/milobluebell/imgs-repo/master/WechatIMG9.jpeg" width="256" alt="Dingtalk Qrcode"/>
+——
+<img src="https://raw.githubusercontent.com/milobluebell/imgs-repo/master/WechatIMG72.jpeg" width="256" alt="Dingtalk Qrcode"/>

ZH_CN.md

@@ -0,0 +1,39 @@
+<p align="center">
+@mlz/admin 是遵循编程猫后台管理系统设计规范的 React 组件库
+</p>
+<p align="center" style="font-size: 32px">
+🌈 https://www.mlz-admin.com
+</p>
+<div align="center">
+
+[![npm version](https://img.shields.io/npm/v/@mlz/admin?color=lightblue&label=%40mlz%2Fadmin)](https://github.com/juicecube/mlz-admin) [![codecov](https://codecov.io/gh/juicecube/mlz-admin/branch/master/graph/badge.svg?token=ZNPL3AMQ7Z)](https://app.codecov.io/gh/juicecube/mlz-admin/) ![actions](https://github.com/juicecube/mlz-admin/workflows/checkers/badge.svg) [![license](https://img.shields.io/badge/license-MIT-green.svg?color=lightblue)](https://github.com/juicecube/mlz-admin/blob/master/CONTRIBUTING.md) [![static](https://img.shields.io/npm/dm/@mlz/admin?label=downloads&color=lightblue)](https://www.npmjs.com/package/@mlz/admin)
+
+</div>
+
+---
+
+## 使用方法
+
+#### 1. 安装
+
+```shell
+$ npm install @mlz/admin -S
+```
+
+#### 2. 使用
+
+```jsx
+import { Button } from '@mlz/admin';
+
+const App = () => <Button type="primary">❤️❤️❤️</Button>;
+```
+
+更多详细内容请访问 [官方网站](https://www.mlz-admin.com)。
+
+## 贡献指南
+
+非常期待你的 PR！本库的开发代码，基于 [《贡献指南》](https://github.com/juicecube/mlz-admin/blob/master/CONTRIBUTING.md) ，所以请先仔细阅读。
+
+## 讨论组
+
+<img src="https://raw.githubusercontent.com/milobluebell/imgs-repo/master/WechatIMG9.jpeg" width="256" alt="Dingtalk Qrcode"/>

docs/components/_site/committers/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, CSSProperties } from 'react';
 import axios from 'axios';
 import { Avatar, Tooltip, Typography, Spin, Button, Icon, Affix, BackTop } from '@mlz/admin';
-import { uniqBy } from 'lodash-es';
+import uniqBy from 'lodash/uniqBy';
 import { getPaths } from '../../../../packages/mlz-admin/src/shared/utils';
 import './index.less';
 

docs/components/composit/use-auth-guard.md

@@ -0,0 +1,80 @@
+# useAuthGuard 内部账号权限系统
+
+> `📦 内部账号权限系统`通过请求接口的返回内容动态生成一个项目所需的权限列表和交互资源。（数据来源全部依赖于后端，如果需要和前端 router 对应，应该自己结合 router 配置和 useAuthGuard 的返回内容进行调整）
+
+## 基本使用
+
+```tsx
+/**
+ * title: 基本使用
+ * desc: 通过引入AuthMenu，AuthResource等组件自动渲染对应权限内容
+ */
+import React from 'react';
+import { Menu, Icon, Button } from '@mlz/admin';
+import { AuthMenu, AuthResource } from '@mlz/adminer';
+
+export default () => {
+  return (
+    <div>
+      <div>
+        <strong>权限菜单</strong>
+        <AuthMenu />
+      </div>
+      <div>
+        <strong>交互资源</strong>
+        <AuthResource code="/a/1">
+          <Button type="primary" style={{ display: 'block' }}>
+            展示按钮
+          </Button>
+        </AuthResource>
+        <AuthResource code="/b/1" disabledOrHidden="disabled">
+          <Button type="primary" style={{ display: 'block' }}>
+            因为没有资源权限因此不可点击的按钮
+          </Button>
+        </AuthResource>
+      </div>
+    </div>
+  );
+};
+```
+
+## 手动引入权限信息
+
+```tsx
+/**
+ * title: 基本使用
+ * desc: 手动根据返回的menus和resourceMap控制菜单和控制交互资源的展示
+ */
+import React from 'react';
+import { Menu, Icon, Button } from '@mlz/admin';
+import { useAuthGuard } from '@mlz/adminer';
+
+export default () => {
+  const { menus, resourceMap } = useAuthGuard();
+  return (
+    <div>
+      <div>
+        <strong>权限菜单</strong>
+        <Menu mode="inline" defaultSelectedKeys={['1']} theme="dark">
+          {menus.map((menu) => {
+            return <Menu.Item key={menu.menu_code}>{menu.menu_name}</Menu.Item>;
+          })}
+        </Menu>
+      </div>
+      <div style={{ marginTop: 12 }}>
+        <strong>交互资源</strong>
+        {resourceMap.has('/a/1') ? (
+          <Button type="primary" style={{ display: 'block' }}>
+            展示按钮
+          </Button>
+        ) : null}
+        {resourceMap.has('/b/1') ? (
+          <Button type="primary" style={{ display: 'block' }}>
+            因为没有资源权限因此没有展示的按钮
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+```

docs/components/interactivity/dark-theme-toggler.md

@@ -12,11 +12,16 @@ import React, { useState, useEffect } from 'react';
 import { DarkThemeToggler, message } from '@mlz/admin';
 
 class App extends React.Component {
+  componentDidMount() {
+    window.addEventListener('themeChange', (e) => {
+      message.info(`window.addEventListener触发：切换成功。文档无法保证样式正常`);
+    });
+  }
   render() {
     return (
       <DarkThemeToggler
         onChange={(e: 'dark' | 'light') => {
-          e === 'dark' && message.info(`切换成功。文档无法保证样式正常`);
+          message.info(`组件onChange触发：切换成功。文档无法保证样式正常`);
         }}
       />
     );
@@ -30,6 +35,7 @@ export default App;
 
 - Antd 自身的组件，并没有实现`动态主题切换`功能（不论 dark/default 切换，还是多彩切换），我们通过比较节能的方式添加了进来.
 - 我们在全局注入了 css 变量：`--theme-bg`、`--theme-sub-bg`以及`--theme-menu-bg`，会在主题发生变化时自动切换对应的值，方便`必须设置与主题配套的显性颜色`时使用。如果有过多需求请提 issue。
+- 当主题发生变化的时候，会在 window 上监听到 `themeChange` 事件的触发。
 
 ---
 

docs/components/interactivity/tabs.md

@@ -70,8 +70,9 @@ const { ContextMenuTabs, TabPane } = Tabs;
 
 export default () => (
   <ContextMenuTabs
-    defaultActiveKey="1"
+    activeKey="2"
     type="editable-card"
+    hideAdd
     contextMenu={
       <Menu
         onClick={(e) => {
@@ -95,15 +96,42 @@ export default () => (
     <TabPane tab="Tab 122" key="1">
       Content of Tab Pane 1
     </TabPane>
-    <TabPane tab="Tab 2" key="2">
-      Content of Tab Pane 2
-    </TabPane>
-    <TabPane tab="Tab 3" key="3">
-      Content of Tab Pane 3
-    </TabPane>
-    <TabPane tab="Tab 4" key="4">
-      Content of Tab Pane 4
-    </TabPane>
+    {[
+      {
+        tab: 'Tab 2',
+        key: 2,
+        text: 'Content of Tab Pane 2',
+        closable: false,
+      },
+      {
+        tab: 'Tab 3',
+        key: 3,
+        text: 'Content of Tab Pane 3',
+      },
+      {
+        tab: 'Tab 4',
+        key: 4,
+        text: 'Content of Tab Pane 4',
+      },
+      {
+        tab: 'Tab 5',
+        key: 5,
+        text: 'Content of Tab Pane 5',
+      },
+      {
+        tab: 'Tab 6',
+        key: 6,
+        text: 'Content of Tab Pane 6',
+      },
+      {
+        tab: 'Tab 7',
+        key: 7,
+        text: 'Content of Tab Pane 7',
+      },
+    ].map((pane: any, index: number) => {
+      const { tab, key, text, closable } = pane;
+      return <TabPane {...{ tab, key, text, closable }} />;
+    })}
   </ContextMenuTabs>
 );
 ```

docs/demo/regularity/color-palette/index.tsx

@@ -14,7 +14,7 @@ interface IPaletteList {
   originRGB?: string;
 }
 const ColorPalette = (props: { title?: string; colorList: IPaletteList[] }) => (
-  <section className="color-palette-wrapper">
+  <div className="color-palette-wrapper">
     <Title level={5} className="palette-name">
       {props.title}
     </Title>
@@ -36,7 +36,7 @@ const ColorPalette = (props: { title?: string; colorList: IPaletteList[] }) => (
         );
       })}
     </div>
-  </section>
+  </div>
 );
 
 export default ColorPalette;

docs/demo/regularity/page-container/index.tsx

@@ -3,9 +3,9 @@ import axios from 'axios';
 import { Icon, message, Input, Affix, Spin, Typography } from '@mlz/admin';
 
 const PageContainer = (props: { children: React.ReactNode }) => (
-  <section className="page-container-wrapper" style={{ padding: '60px 120px 80px 120px' }}>
+  <div className="page-container-wrapper" style={{ padding: '60px 120px 80px 120px' }}>
     {props.children}
-  </section>
+  </div>
 );
 
 export default PageContainer;

docs/index.md

@@ -54,9 +54,25 @@ module.exports = {
       'import',
       {
         libraryName: '@mlz/admin',
+        style: true,
         libraryDirectory: 'es',
-        // 这里略有不同
-        style: false,
+      },
+      '@mlz/admin',
+    ],
+  ],
+};
+```
+
+```js
+// for SSR
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: '@mlz/admin',
+        style: true,
+        libraryDirectory: 'lib',
       },
       '@mlz/admin',
     ],
@@ -72,12 +88,6 @@ module.exports = {
     [
       'import',
       [
-        {
-          libraryName: '@mlz/admin',
-          libraryDirectory: 'es',
-          // 这里略有不同
-          style: false,
-        },
         {
           libraryName: '@mlz/adminer',
           libraryDirectory: 'es',
@@ -89,6 +99,8 @@ module.exports = {
 };
 ```
 
+目前 mlz/adminer 部分不承诺对 ssr 进行支持
+
 ---
 
 ## 兼容性