diff --git a/package.json b/package.json index d1b044d6..4f138512 100644 --- a/package.json +++ b/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": { diff --git a/src/components/GlobalHeader/RightContent.tsx b/src/components/GlobalHeader/RightContent.tsx index d4019c73..3926d881 100644 --- a/src/components/GlobalHeader/RightContent.tsx +++ b/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, Partial { @@ -54,6 +53,9 @@ const GlobalHeaderRight: React.SFC = (props) => { /> span { - font-size: 16px !important; - transform: none !important; - svg { - position: relative; - top: -1px; - } - } -} diff --git a/src/components/SelectLang/index.tsx b/src/components/SelectLang/index.tsx deleted file mode 100644 index f96282b5..00000000 --- a/src/components/SelectLang/index.tsx +++ /dev/null @@ -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 = (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 = ( - - {locales.map((locale) => ( - - - {languageIcons[locale]} - {' '} - {languageLabels[locale]} - - ))} - - ); - return ( - - - - - - ); -}; - -export default SelectLang; diff --git a/src/layouts/UserLayout.tsx b/src/layouts/UserLayout.tsx index 5e386350..59c7e239 100644 --- a/src/layouts/UserLayout.tsx +++ b/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'; diff --git a/src/pages/ListTableList/index.tsx b/src/pages/ListTableList/index.tsx index c6184010..37a9a5e6 100644 --- a/src/pages/ListTableList/index.tsx +++ b/src/pages/ListTableList/index.tsx @@ -1,7 +1,7 @@ -import { DownOutlined, PlusOutlined } from '@ant-design/icons'; -import { Button, Divider, Dropdown, Menu, message, Input } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; +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(false); const [stepFormValues, setStepFormValues] = useState({}); const actionRef = useRef(); + const [selectedRowsState, setSelectedRows] = useState([]); const columns: ProColumns[] = [ { title: '规则名称', @@ -149,50 +150,45 @@ const TableList: React.FC<{}> = () => { ]; return ( - + headerTitle="查询表格" actionRef={actionRef} rowKey="key" - toolBarRender={(action, { selectedRows }) => [ + toolBarRender={() => [ , - selectedRows && selectedRows.length > 0 && ( - { - if (e.key === 'remove') { - await handleRemove(selectedRows); - action.reload(); - } - }} - selectedKeys={[]} - > - 批量删除 - 批量审批 - - } - > - - - ), ]} - tableAlertRender={({ selectedRowKeys, selectedRows }) => ( -
- 已选择 {selectedRowKeys.length} 项   - - 服务调用次数总计 {selectedRows.reduce((pre, item) => pre + item.callNo, 0)} 万 - -
- )} request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })} columns={columns} - rowSelection={{}} + rowSelection={{ + onChange: (_, selectedRows) => setSelectedRows(selectedRows), + }} /> + {selectedRowsState?.length > 0 && ( + + 已选择 {selectedRowsState.length} 项   + + 服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)} 万 + + + } + > + + + + )} handleModalVisible(false)} modalVisible={createModalVisible}> onSubmit={async (value) => { @@ -230,7 +226,7 @@ const TableList: React.FC<{}> = () => { values={stepFormValues} /> ) : null} - + ); }; diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 6d7c3ea4..6147333d 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { PageHeaderWrapper } from '@ant-design/pro-layout'; -import { Card, Typography, Alert } from 'antd'; +import { PageContainer } from '@ant-design/pro-layout'; +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 => ( - + ( }} /> - - 基于 block 开发,快速构建标准页面 + 高级表格{' '} + + 欢迎使用 - npm run ui + yarn add @ant-design/pro-table - - 获取全部区块 + 高级布局{' '} + + 欢迎使用 - npm run fetch:blocks + yarn add @ant-design/pro-layout -

- Want to add more pages? Please refer to{' '} - - use block - - 。 -

-
+ );