This is an automated email from the ASF dual-hosted git repository. juzhiyuan pushed a commit to branch chore-route in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
commit 8ee52d166a5b7862f6a09789ba389a96db7dc147 Author: juzhiyuan <[email protected]> AuthorDate: Wed Apr 7 11:54:00 2021 +0800 ui: move toolbar to a component --- web/src/locales/en-US/menu.ts | 1 + web/src/locales/zh-CN/menu.ts | 1 + web/src/pages/Route/List.tsx | 81 ++++++++++++++++++++++++++++--------------- 3 files changed, 56 insertions(+), 27 deletions(-) diff --git a/web/src/locales/en-US/menu.ts b/web/src/locales/en-US/menu.ts index 30ec1e0..dde78ac 100644 --- a/web/src/locales/en-US/menu.ts +++ b/web/src/locales/en-US/menu.ts @@ -72,4 +72,5 @@ export default { 'menu.service': 'Service', 'menu.setting': 'Settings', 'menu.serverinfo': 'System Info', + 'menu.advanced-feature': 'Advanced', }; diff --git a/web/src/locales/zh-CN/menu.ts b/web/src/locales/zh-CN/menu.ts index 2a5d930..0a6f83a 100644 --- a/web/src/locales/zh-CN/menu.ts +++ b/web/src/locales/zh-CN/menu.ts @@ -69,4 +69,5 @@ export default { 'menu.service': '服务', 'menu.setting': '系统设置', 'menu.serverinfo': '系统信息', + 'menu.advanced-feature': '高级特性', }; diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 26b5cac..5b13413 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -30,9 +30,11 @@ import { Upload, Modal, Divider, + Menu, + Dropdown, } from 'antd'; import { history, useIntl } from 'umi'; -import { PlusOutlined, BugOutlined, ExportOutlined, ImportOutlined } from '@ant-design/icons'; +import { PlusOutlined, BugOutlined, ExportOutlined, ImportOutlined, DownOutlined } from '@ant-design/icons'; import { js_beautify } from 'js-beautify'; import yaml from 'js-yaml'; import moment from 'moment'; @@ -177,6 +179,52 @@ const Page: React.FC = () => { }); }; + const toolbarMenus = () => { + const tools = [ + { + name: formatMessage({ id: 'page.route.pluginTemplateConfig' }), + icon: <PlusOutlined />, + onClick: () => { + history.push('/plugin-template/list') + } + }, { + name: formatMessage({ id: 'component.global.createWithEditor' }), + icon: <PlusOutlined />, + onClick: () => { + setVisible(true); + setEditorMode('create'); + setRawData({}); + } + }, { + name: formatMessage({ id: 'page.route.button.importOpenApi' }), + icon: <ImportOutlined />, + onClick: () => { + setUploadFileList([]); + setShowImportModal(true); + } + }, { + name: formatMessage({ id: 'page.route.onlineDebug' }), + icon: <BugOutlined />, + onClick: () => { + setDebugDrawVisible(true) + } + } + ] + + return ( + <Menu> + { + tools.map(item => ( + <Menu.Item key={item.name} onClick={item.onClick}> + {item.icon} + {item.name} + </Menu.Item> + )) + } + </Menu> + ) + } + const ListFooter: React.FC = () => { return ( <Popconfirm @@ -464,36 +512,15 @@ const Page: React.FC = () => { resetText: formatMessage({ id: 'component.global.reset' }), }} toolBarRender={() => [ - <Button type="primary" onClick={() => { history.push('/plugin-template/list') }}> - <PlusOutlined /> - {formatMessage({ id: 'page.route.pluginTemplateConfig' })} - </Button>, <Button type="primary" onClick={() => history.push(`/routes/create`)}> <PlusOutlined /> {formatMessage({ id: 'component.global.create' })} </Button>, - <Button type="primary" onClick={() => { - setVisible(true); - setEditorMode('create'); - setRawData({}); - }}> - <PlusOutlined /> - {formatMessage({ id: 'component.global.createWithEditor' })} - </Button>, - <Button - type="primary" - onClick={() => { - setUploadFileList([]); - setShowImportModal(true); - }} - > - <ImportOutlined /> - {formatMessage({ id: 'page.route.button.importOpenApi' })} - </Button>, - <Button type="primary" onClick={() => setDebugDrawVisible(true)}> - <BugOutlined /> - {formatMessage({ id: 'page.route.onlineDebug' })} - </Button>, + <Dropdown overlay={toolbarMenus}> + <Button type="dashed"> + <DownOutlined /> {formatMessage({ id: "menu.advanced-feature" })} + </Button> + </Dropdown> ]} rowSelection={rowSelection} footer={() => <ListFooter />}
