Alawn/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin synced 2026-10-21 15:04:26 +00:00
Code Issues Releases Wiki Activity

🐛 💄 Fix can't scroll on the table, Update the UI in the dashbord page.

Browse Source
This commit is contained in:
zuiidea
2018-11-01 19:34:36 +08:00
parent 5f8141148a
commit dbe86ec0a8
14 changed files with 64 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mock/_utils.js
-1
View File
@@ -27,7 +27,6 @@ export function randomAvatar() {
'https://pbs.twimg.com/profile_images/584098247641300992/N25WgvW_.png',
'https://d3iw72m71ie81c.cloudfront.net/male-5.jpg',
'https://images.pexels.com/photos/413723/pexels-photo-413723.jpeg?h=350&auto=compress&cs=tinysrgb',
'https://images.pexels.com/photos/61100/pexels-photo-61100.jpeg?h=350&auto=compress&cs=tinysrgb',
'https://randomuser.me/api/portraits/women/44.jpg',
'https://randomuser.me/api/portraits/women/68.jpg',
'https://randomuser.me/api/portraits/women/65.jpg',
mock/route.js
-9
View File
@@ -48,15 +48,6 @@ const database = [
zhName: 'UI组件',
icon: 'camera-o',
},
{
id: '43',
breadcrumbParentId: '4',
menuParentId: '4',
name: 'DropOption',
zhName: 'DropOption',
icon: 'bars',
route: '/UIElement/dropOption',
},
{
id: '45',
breadcrumbParentId: '4',
src/layouts/PrimaryLayout.js
+14 -21
View File
@@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import withRouter from 'umi/withRouter'
import { connect } from 'dva'
import { MyLayout, ScrollBar } from 'components'
import { MyLayout } from 'components'
import { BackTop, Layout, Drawer } from 'antd'
import { GlobalFooter } from 'ant-design-pro'
import { enquireScreen, unenquireScreen } from 'enquire-js'
@@ -138,26 +138,19 @@ class PrimaryLayout extends PureComponent {
style={{ paddingTop: config.fixedHeader ? 72 : 0 }}
id="primaryLayout"
>
<ScrollBar
option={{
// Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
suppressScrollX: true,
}}
>
<Header {...headerProps} />
<Content className={styles.content}>
<Bread routeList={newRouteList} />
{hasPermission ? children : <Error />}
</Content>
<BackTop
className={styles.backTop}
target={() => document.querySelector('#primaryLayout>div')}
/>
<GlobalFooter
className={styles.footer}
copyright={config.copyright}
/>
</ScrollBar>
<Header {...headerProps} />
<Content className={styles.content}>
<Bread routeList={newRouteList} />
{hasPermission ? children : <Error />}
</Content>
<BackTop
className={styles.backTop}
target={() => document.querySelector('#primaryLayout>div')}
/>
<GlobalFooter
className={styles.footer}
copyright={config.copyright}
/>
</div>
</Layout>
</Fragment>
src/layouts/PrimaryLayout.less
+20 -11
View File
@@ -1,16 +1,5 @@
@import '~themes/vars.less';
@media (max-width: 767px) {
.content {
padding: 12px;
}
.backTop {
right: 20px;
bottom: 20px;
}
}
.backTop {
right: 50px;
@@ -31,12 +20,15 @@
.content {
padding: 24px;
min-height: ~'calc(100% - 72px)';
// overflow-y: scroll;
}
.container {
height: 100vh;
flex: 1;
width: ~'calc(100% - 256px)';
overflow-y: scroll;
overflow-x: hidden;
}
.footer {
@@ -47,3 +39,20 @@
padding-bottom: 24px;
min-height: 72px;
}
@media (max-width: 767px) {
.content {
padding: 12px;
}
.backTop {
right: 20px;
bottom: 20px;
}
.container {
height: 100vh;
flex: 1;
width: 100%;
}
}
src/pages/UIElement/dropOption/index.js
-112
View File
@@ -1,112 +0,0 @@
import React from 'react'
import { DropOption, Page } from 'components'
import { Table, Row, Col, Card, message } from 'antd'
const DropOptionPage = () => (
<Page inner>
<Row gutter={32}>
<Col lg={8} md={12}>
<Card title="默认">
<DropOption
menuOptions={[
{ key: '1', name: '编辑' },
{ key: '2', name: '删除' },
]}
/>
</Card>
</Col>
<Col lg={8} md={12}>
<Card title="样式">
<DropOption
menuOptions={[
{ key: '1', name: '编辑' },
{ key: '2', name: '删除' },
]}
buttonStyle={{ border: 'solid 1px #eee', width: 60 }}
/>
</Card>
</Col>
<Col lg={8} md={12}>
<Card title="事件">
<DropOption
menuOptions={[
{ key: '1', name: '编辑' },
{ key: '2', name: '删除' },
]}
buttonStyle={{ border: 'solid 1px #eee', width: 60 }}
onMenuClick={({ key }) => {
switch (key) {
case '1':
message.success('点击了编辑')
break
case '2':
message.success('点击了删除')
break
default:
break
}
}}
/>
</Card>
</Col>
</Row>
<h2 style={{ margin: '16px 0' }}>Props</h2>
<Row>
<Col lg={18} md={24}>
<Table
rowKey={(record, key) => key}
pagination={false}
bordered
scroll={{ x: 800 }}
columns={[
{
title: '参数',
dataIndex: 'props',
},
{
title: '说明',
dataIndex: 'desciption',
},
{
title: '类型',
dataIndex: 'type',
},
{
title: '默认值',
dataIndex: 'default',
},
]}
dataSource={[
{
props: 'menuOptions',
desciption: '下拉操作的选项，格式为[{name:string,key:string}]',
type: 'Array',
default: '必选',
},
{
props: 'onMenuClick',
desciption:
'点击 menuitem 调用此函数，参数为 {item, key, keyPath}',
type: 'Function',
default: '-',
},
{
props: 'buttonStyle',
desciption: '按钮的样式',
type: 'Object',
default: '-',
},
{
props: 'dropdownProps',
desciption: '下拉菜单的参数，可参考antd的【Dropdown】组件',
type: 'Object',
default: '-',
},
]}
/>
</Col>
</Row>
</Page>
)
export default DropOptionPage
src/pages/UIElement/editor/index.js
+3
View File
@@ -24,6 +24,9 @@ export default class EditorPage extends React.Component {
const colProps = {
lg: 12,
md: 24,
style: {
marginBottom: 32,
},
}
const textareaStyle = {
minHeight: 496,
src/pages/dashboard/components/user-background.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

src/pages/dashboard/components/user.less
+2 -1
View File
@@ -16,7 +16,8 @@
&::after {
content: '';
background: #c5bec7;
background-image: url('./user-background.png');
background-size: contain;
position: absolute;
width: 100%;
height: 200px;
src/pages/post/components/List.js
+4 -2
View File
@@ -1,6 +1,8 @@
import React, { PureComponent } from 'react'
import { Table, Avatar } from 'antd'
import { withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro'
import styles from './List.less'
@withI18n()
class List extends PureComponent {
@@ -10,12 +12,12 @@ class List extends PureComponent {
{
title: i18n.t`Image`,
dataIndex: 'image',
width: 100,
render: text => <Avatar shape="square" src={text} />,
},
{
title: i18n.t`Title`,
dataIndex: 'title',
render: text => <Ellipsis length={30}>{text}</Ellipsis>,
},
{
title: i18n.t`Author`,
@@ -56,7 +58,7 @@ class List extends PureComponent {
showTotal: total => i18n.t`Total ${total} Items`,
}}
bordered
scroll={{ x: 1200, y: 'auto' }}
className={styles.table}
columns={columns}
simple
rowKey={record => record.id}
src/pages/post/components/List.less
+7
View File
@@ -0,0 +1,7 @@
.table {
:global {
.ant-table td {
white-space: nowrap;
}
}
}
src/pages/user/components/List.js
+6 -3
View File
@@ -4,6 +4,7 @@ import { Table, Modal, Avatar } from 'antd'
import { DropOption } from 'components'
import { Trans, withI18n } from '@lingui/react'
import Link from 'umi/link'
import styles from './List.less'
const { confirm } = Modal
@@ -38,7 +39,8 @@ class List extends PureComponent {
title: <Trans>Avatar</Trans>,
dataIndex: 'avatar',
key: 'avatar',
width: 100,
width: 72,
fixed: 'left',
render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
},
{
@@ -86,7 +88,7 @@ class List extends PureComponent {
{
title: <Trans>Operation</Trans>,
key: 'operation',
width: 100,
fixed: 'right',
render: (text, record) => {
return (
<DropOption
@@ -108,8 +110,9 @@ class List extends PureComponent {
...tableProps.pagination,
showTotal: total => i18n.t`Total ${total} Items`,
}}
className={styles.table}
bordered
scroll={{ x: 1250, y: 'auto' }}
scroll={{ x: 1600 }}
columns={columns}
simple
rowKey={record => record.id}
src/pages/user/components/List.less
+7
View File
@@ -0,0 +1,7 @@
.table {
:global {
.ant-table td {
white-space: nowrap;
}
}
}
src/pages/user/components/Modal.js
-1
View File
@@ -139,7 +139,6 @@ class UserModal extends PureComponent {
}
UserModal.propTypes = {
form: PropTypes.object.isRequired,
type: PropTypes.string,
item: PropTypes.object,
onOk: PropTypes.func,
src/utils/config.js
+1 -1
View File
@@ -4,7 +4,7 @@ module.exports = {
copyright: 'Ant Design Admin © 2018 zuiidea',
logoPath: '/logo.svg',
apiPrefix: '/api/v1',
fixedHeader: true, // sticky primary layout header
// fixedHeader: true, // sticky primary layout header
/* Layout configuration, specify which layout to use for route. */
layouts: [