📝 docs: update demos style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-pro",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "private": true,
   "description": "An out-of-box UI solution for enterprise applications",
   "scripts": {

src/components/GlobalHeader/RightContent.tsx

@@ -2,11 +2,10 @@ import { Tooltip, Tag } from 'antd';
 import { Settings as ProSettings } from '@ant-design/pro-layout';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import React from 'react';
-import { connect, ConnectProps } from 'umi';
+import { connect, ConnectProps, SelectLang } from 'umi';
 import { ConnectState } from '@/models/connect';
 import Avatar from './AvatarDropdown';
 import HeaderSearch from '../HeaderSearch';
-import SelectLang from '../SelectLang';
 import styles from './index.less';
 
 export interface GlobalHeaderRightProps extends Partial<ConnectProps>, Partial<ProSettings> {
@@ -54,6 +53,9 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
       />
       <Tooltip title="使用文档">
         <a
+          style={{
+            color: 'inherit',
+          }}
           target="_blank"
           href="https://pro.ant.design/docs/getting-started"
           rel="noopener noreferrer"

src/components/SelectLang/index.less

@@ -1,24 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.menu {
-  :global(.anticon) {
-    margin-right: 8px;
-  }
-  :global(.ant-dropdown-menu-item) {
-    min-width: 160px;
-  }
-}
-
-.dropDown {
-  line-height: @layout-header-height;
-  vertical-align: top;
-  cursor: pointer;
-  > span {
-    font-size: 16px !important;
-    transform: none !important;
-    svg {
-      position: relative;
-      top: -1px;
-    }
-  }
-}

src/components/SelectLang/index.tsx

@@ -1,54 +0,0 @@
-import { GlobalOutlined } from '@ant-design/icons';
-import { Menu } from 'antd';
-import { getLocale, setLocale } from 'umi';
-import { ClickParam } from 'antd/es/menu';
-import React from 'react';
-import classNames from 'classnames';
-import HeaderDropdown from '../HeaderDropdown';
-import styles from './index.less';
-
-interface SelectLangProps {
-  className?: string;
-}
-
-const SelectLang: React.FC<SelectLangProps> = (props) => {
-  const { className } = props;
-  const selectedLang = getLocale();
-
-  const changeLang = ({ key }: ClickParam): void => setLocale(key);
-
-  const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
-  const languageLabels = {
-    'zh-CN': '简体中文',
-    'zh-TW': '繁体中文',
-    'en-US': 'English',
-    'pt-BR': 'Português',
-  };
-  const languageIcons = {
-    'zh-CN': '🇨🇳',
-    'zh-TW': '🇭🇰',
-    'en-US': '🇺🇸',
-    'pt-BR': '🇧🇷',
-  };
-  const langMenu = (
-    <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={changeLang}>
-      {locales.map((locale) => (
-        <Menu.Item key={locale}>
-          <span role="img" aria-label={languageLabels[locale]}>
-            {languageIcons[locale]}
-          </span>{' '}
-          {languageLabels[locale]}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
-  return (
-    <HeaderDropdown overlay={langMenu} placement="bottomRight">
-      <span className={classNames(styles.dropDown, className)}>
-        <GlobalOutlined title="语言" />
-      </span>
-    </HeaderDropdown>
-  );
-};
-
-export default SelectLang;

src/layouts/UserLayout.tsx

@@ -1,8 +1,7 @@
 import { DefaultFooter, MenuDataItem, getMenuData, getPageTitle } from '@ant-design/pro-layout';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Link, useIntl, ConnectProps, connect } from 'umi';
+import { Link, SelectLang, useIntl, ConnectProps, connect } from 'umi';
 import React from 'react';
-import SelectLang from '@/components/SelectLang';
 import { ConnectState } from '@/models/connect';
 import logo from '../assets/logo.svg';
 import styles from './UserLayout.less';

src/pages/ListTableList/index.tsx

@@ -1,7 +1,7 @@
-import { DownOutlined, PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
-import { Button, Divider, Dropdown, Menu, message, Input } from 'antd';
+import { Button, Divider, message, Input } from 'antd';
 import React, { useState, useRef } from 'react';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
 
 import CreateForm from './components/CreateForm';
@@ -76,6 +76,7 @@ const TableList: React.FC<{}> = () => {
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
   const [stepFormValues, setStepFormValues] = useState({});
   const actionRef = useRef<ActionType>();
+  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
   const columns: ProColumns<TableListItem>[] = [
     {
       title: '规则名称',
@@ -149,50 +150,45 @@ const TableList: React.FC<{}> = () => {
   ];
 
   return (
-    <PageHeaderWrapper>
+    <PageContainer>
       <ProTable<TableListItem>
         headerTitle="查询表格"
         actionRef={actionRef}
         rowKey="key"
-        toolBarRender={(action, { selectedRows }) => [
+        toolBarRender={() => [
           <Button type="primary" onClick={() => handleModalVisible(true)}>
             <PlusOutlined /> 新建
           </Button>,
-          selectedRows && selectedRows.length > 0 && (
-            <Dropdown
-              overlay={
-                <Menu
-                  onClick={async (e) => {
-                    if (e.key === 'remove') {
-                      await handleRemove(selectedRows);
-                      action.reload();
-                    }
-                  }}
-                  selectedKeys={[]}
-                >
-                  <Menu.Item key="remove">批量删除</Menu.Item>
-                  <Menu.Item key="approval">批量审批</Menu.Item>
-                </Menu>
-              }
-            >
-              <Button>
-                批量操作 <DownOutlined />
-              </Button>
-            </Dropdown>
-          ),
         ]}
-        tableAlertRender={({ selectedRowKeys, selectedRows }) => (
-          <div>
-            已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
-            <span>
-              服务调用次数总计 {selectedRows.reduce((pre, item) => pre + item.callNo, 0)} 万
-            </span>
-          </div>
-        )}
         request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
         columns={columns}
-        rowSelection={{}}
+        rowSelection={{
+          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
+        }}
       />
+      {selectedRowsState?.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              已选择 <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
+              <span>
+                服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)} 万
+              </span>
+            </div>
+          }
+        >
+          <Button
+            onClick={async () => {
+              await handleRemove(selectedRowsState);
+              setSelectedRows([]);
+              actionRef.current?.reloadAndRest();
+            }}
+          >
+            批量删除
+          </Button>
+          <Button type="primary">批量审批</Button>
+        </FooterToolbar>
+      )}
       <CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
         <ProTable<TableListItem, TableListItem>
           onSubmit={async (value) => {
@@ -230,7 +226,7 @@ const TableList: React.FC<{}> = () => {
           values={stepFormValues}
         />
       ) : null}
-    </PageHeaderWrapper>
+    </PageContainer>
   );
 };
 

src/pages/Welcome.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Typography, Alert } from 'antd';
+import { Card, Alert, Typography } from 'antd';
 import styles from './Welcome.less';
 
 const CodePreview: React.FC<{}> = ({ children }) => (
@@ -12,10 +12,10 @@ const CodePreview: React.FC<{}> = ({ children }) => (
 );
 
 export default (): React.ReactNode => (
-  <PageHeaderWrapper>
+  <PageContainer>
     <Card>
       <Alert
-        message="umi ui 现已发布，点击右下角 umi 图标即可使用"
+        message="更快更强的重型组件，已经发布。"
         type="success"
         showIcon
         banner
@@ -25,38 +25,24 @@ export default (): React.ReactNode => (
         }}
       />
       <Typography.Text strong>
-        <a target="_blank" rel="noopener noreferrer" href="https://pro.ant.design/docs/block">
+        高级表格{' '}
-          基于 block 开发，快速构建标准页面
+        <a href="https://protable.ant.design/" rel="noopener noreferrer" target="__blank">
+          欢迎使用
         </a>
       </Typography.Text>
-      <CodePreview> npm run ui</CodePreview>
+      <CodePreview>yarn add @ant-design/pro-table</CodePreview>
       <Typography.Text
         strong
         style={{
           marginBottom: 12,
         }}
       >
-        <a
+        高级布局{' '}
-          target="_blank"
+        <a href="https://prolayout.ant.design/" rel="noopener noreferrer" target="__blank">
-          rel="noopener noreferrer"
+          欢迎使用
-          href="https://pro.ant.design/docs/available-script#npm-run-fetchblocks"
-        >
-          获取全部区块
         </a>
       </Typography.Text>
-      <CodePreview> npm run fetch:blocks</CodePreview>
+      <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
     </Card>
-    <p
+  </PageContainer>
-      style={{
-        textAlign: 'center',
-        marginTop: 24,
-      }}
-    >
-      Want to add more pages? Please refer to{' '}
-      <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
-        use block
-      </a>
-      。
-    </p>
-  </PageHeaderWrapper>
 );