mirror of
https://github.com/zuiidea/antd-admin.git
synced 2024-04-21 12:32:14 +00:00
✨ adding page, removing some components
This commit is contained in:
zuiidea
+1
-1
@@ -68,7 +68,7 @@
|
||||
"stylelint-config-prettier": "^8.0.0",
|
||||
"stylelint-config-standard": "^21.0.0",
|
||||
"typescript": "^4.2.3",
|
||||
"umi": "^3.4.8"
|
||||
"umi": "^3.4.25"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
|
||||
Vendored
-21
@@ -1,21 +0,0 @@
|
||||
import React from 'react'
|
||||
import { TooltipProps } from 'antd/lib/tooltip'
|
||||
|
||||
export interface EllipsisTooltipProps extends TooltipProps {
|
||||
title?: undefined
|
||||
overlayStyle?: undefined
|
||||
}
|
||||
|
||||
export interface EllipsisProps {
|
||||
tooltip?: boolean | EllipsisTooltipProps
|
||||
length?: number
|
||||
lines?: number
|
||||
style?: React.CSSProperties
|
||||
className?: string
|
||||
fullWidthRecognition?: boolean
|
||||
}
|
||||
|
||||
export function getStrFullLength(str: string): number
|
||||
export function cutStrByFullLength(str: string, maxLength: number): string
|
||||
|
||||
export default class Ellipsis extends React.Component<EllipsisProps, any> {}
|
||||
@@ -1,284 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Tooltip } from 'antd'
|
||||
import classNames from 'classnames'
|
||||
import styles from './index.less'
|
||||
|
||||
/* eslint react/no-did-mount-set-state: 0 */
|
||||
/* eslint no-param-reassign: 0 */
|
||||
|
||||
const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined
|
||||
|
||||
const TooltipOverlayStyle = {
|
||||
overflowWrap: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
}
|
||||
|
||||
export const getStrFullLength = (str = '') =>
|
||||
str.split('').reduce((pre, cur) => {
|
||||
const charCode = cur.charCodeAt(0)
|
||||
if (charCode >= 0 && charCode <= 128) {
|
||||
return pre + 1
|
||||
}
|
||||
return pre + 2
|
||||
}, 0)
|
||||
|
||||
export const cutStrByFullLength = (str = '', maxLength) => {
|
||||
let showLength = 0
|
||||
return str.split('').reduce((pre, cur) => {
|
||||
const charCode = cur.charCodeAt(0)
|
||||
if (charCode >= 0 && charCode <= 128) {
|
||||
showLength += 1
|
||||
} else {
|
||||
showLength += 2
|
||||
}
|
||||
if (showLength <= maxLength) {
|
||||
return pre + cur
|
||||
}
|
||||
return pre
|
||||
}, '')
|
||||
}
|
||||
|
||||
const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
|
||||
if (tooltip) {
|
||||
const props =
|
||||
tooltip === true
|
||||
? { overlayStyle, title }
|
||||
: { ...tooltip, overlayStyle, title }
|
||||
return <Tooltip {...props}>{children}</Tooltip>
|
||||
}
|
||||
return children
|
||||
}
|
||||
|
||||
const EllipsisText = ({
|
||||
text,
|
||||
length,
|
||||
tooltip,
|
||||
fullWidthRecognition,
|
||||
...other
|
||||
}) => {
|
||||
if (typeof text !== 'string') {
|
||||
throw new Error('Ellipsis children must be string.')
|
||||
}
|
||||
const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length
|
||||
if (textLength <= length || length < 0) {
|
||||
return <span {...other}>{text}</span>
|
||||
}
|
||||
const tail = '...'
|
||||
let displayText
|
||||
if (length - tail.length <= 0) {
|
||||
displayText = ''
|
||||
} else {
|
||||
displayText = fullWidthRecognition
|
||||
? cutStrByFullLength(text, length)
|
||||
: text.slice(0, length)
|
||||
}
|
||||
|
||||
const spanAttrs = tooltip ? {} : { ...other }
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: (
|
||||
<span {...spanAttrs}>
|
||||
{displayText}
|
||||
{tail}
|
||||
</span>
|
||||
),
|
||||
})
|
||||
}
|
||||
|
||||
export default class Ellipsis extends Component {
|
||||
state = {
|
||||
text: '',
|
||||
targetCount: 0,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.node) {
|
||||
this.computeLine()
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(perProps) {
|
||||
const { lines } = this.props
|
||||
if (lines !== perProps.lines) {
|
||||
this.computeLine()
|
||||
}
|
||||
}
|
||||
|
||||
computeLine = () => {
|
||||
const { lines } = this.props
|
||||
if (lines && !isSupportLineClamp) {
|
||||
const text =
|
||||
this.shadowChildren.innerText || this.shadowChildren.textContent
|
||||
const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10)
|
||||
const targetHeight = lines * lineHeight
|
||||
this.content.style.height = `${targetHeight}px`
|
||||
const totalHeight = this.shadowChildren.offsetHeight
|
||||
const shadowNode = this.shadow.firstChild
|
||||
|
||||
if (totalHeight <= targetHeight) {
|
||||
this.setState({
|
||||
text,
|
||||
targetCount: text.length,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// bisection
|
||||
const len = text.length
|
||||
const mid = Math.ceil(len / 2)
|
||||
|
||||
const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode)
|
||||
|
||||
this.setState({
|
||||
text,
|
||||
targetCount: count,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
bisection = (th, m, b, e, text, shadowNode) => {
|
||||
const suffix = '...'
|
||||
let mid = m
|
||||
let end = e
|
||||
let begin = b
|
||||
shadowNode.innerHTML = text.substring(0, mid) + suffix
|
||||
let sh = shadowNode.offsetHeight
|
||||
|
||||
if (sh <= th) {
|
||||
shadowNode.innerHTML = text.substring(0, mid + 1) + suffix
|
||||
sh = shadowNode.offsetHeight
|
||||
if (sh > th || mid === begin) {
|
||||
return mid
|
||||
}
|
||||
begin = mid
|
||||
if (end - begin === 1) {
|
||||
mid = 1 + begin
|
||||
} else {
|
||||
mid = Math.floor((end - begin) / 2) + begin
|
||||
}
|
||||
return this.bisection(th, mid, begin, end, text, shadowNode)
|
||||
}
|
||||
if (mid - 1 < 0) {
|
||||
return mid
|
||||
}
|
||||
shadowNode.innerHTML = text.substring(0, mid - 1) + suffix
|
||||
sh = shadowNode.offsetHeight
|
||||
if (sh <= th) {
|
||||
return mid - 1
|
||||
}
|
||||
end = mid
|
||||
mid = Math.floor((end - begin) / 2) + begin
|
||||
return this.bisection(th, mid, begin, end, text, shadowNode)
|
||||
}
|
||||
|
||||
handleRoot = (n) => {
|
||||
this.root = n
|
||||
}
|
||||
|
||||
handleContent = (n) => {
|
||||
this.content = n
|
||||
}
|
||||
|
||||
handleNode = (n) => {
|
||||
this.node = n
|
||||
}
|
||||
|
||||
handleShadow = (n) => {
|
||||
this.shadow = n
|
||||
}
|
||||
|
||||
handleShadowChildren = (n) => {
|
||||
this.shadowChildren = n
|
||||
}
|
||||
|
||||
render() {
|
||||
const { text, targetCount } = this.state
|
||||
const {
|
||||
children,
|
||||
lines,
|
||||
length,
|
||||
className,
|
||||
tooltip,
|
||||
fullWidthRecognition,
|
||||
...restProps
|
||||
} = this.props
|
||||
|
||||
const cls = classNames(styles.ellipsis, className, {
|
||||
[styles.lines]: lines && !isSupportLineClamp,
|
||||
[styles.lineClamp]: lines && isSupportLineClamp,
|
||||
})
|
||||
|
||||
if (!lines && !length) {
|
||||
return (
|
||||
<span className={cls} {...restProps}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// length
|
||||
if (!lines) {
|
||||
return (
|
||||
<EllipsisText
|
||||
className={cls}
|
||||
length={length}
|
||||
text={children || ''}
|
||||
tooltip={tooltip}
|
||||
fullWidthRecognition={fullWidthRecognition}
|
||||
{...restProps}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(
|
||||
Math.random() * 100
|
||||
)}`}`
|
||||
|
||||
// support document.body.style.webkitLineClamp
|
||||
if (isSupportLineClamp) {
|
||||
const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`
|
||||
|
||||
const node = (
|
||||
<div id={id} className={cls} {...restProps}>
|
||||
<style>{style}</style>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: children,
|
||||
children: node,
|
||||
})
|
||||
}
|
||||
|
||||
const childNode = (
|
||||
<span ref={this.handleNode}>
|
||||
{targetCount > 0 && text.substring(0, targetCount)}
|
||||
{targetCount > 0 && targetCount < text.length && '...'}
|
||||
</span>
|
||||
)
|
||||
|
||||
return (
|
||||
<div {...restProps} ref={this.handleRoot} className={cls}>
|
||||
<div ref={this.handleContent}>
|
||||
{getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: childNode,
|
||||
})}
|
||||
<div className={styles.shadow} ref={this.handleShadowChildren}>
|
||||
{children}
|
||||
</div>
|
||||
<div className={styles.shadow} ref={this.handleShadow}>
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lines {
|
||||
position: relative;
|
||||
.shadow {
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
display: block;
|
||||
color: transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lineClamp {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: Ellipsis
|
||||
subtitle: 文本自动省略号
|
||||
cols: 1
|
||||
order: 10
|
||||
---
|
||||
|
||||
文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ------------------------------------------------ | ------- | ------ |
|
||||
| tooltip | 移动到文本展示完整内容的提示 | boolean | - |
|
||||
| length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - |
|
||||
| lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` |
|
||||
| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度 | boolean | - |
|
||||
@@ -1,13 +0,0 @@
|
||||
import { getStrFullLength, cutStrByFullLength } from './index'
|
||||
|
||||
describe('test calculateShowLength', () => {
|
||||
it('get full length', () => {
|
||||
expect(getStrFullLength('一二，a,')).toEqual(8)
|
||||
})
|
||||
it('cut str by full length', () => {
|
||||
expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a')
|
||||
})
|
||||
it('cut str when length small', () => {
|
||||
expect(cutStrByFullLength('一22三', 5)).toEqual('一22')
|
||||
})
|
||||
})
|
||||
@@ -1,68 +0,0 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Breadcrumb } from 'antd'
|
||||
import { Link, withRouter } from 'umi'
|
||||
import { t } from '@lingui/macro'
|
||||
import iconMap from 'utils/iconMap'
|
||||
import { queryAncestors } from 'utils'
|
||||
import styles from './Bread.less'
|
||||
const { pathToRegexp } = require('path-to-regexp')
|
||||
|
||||
@withRouter
|
||||
class Bread extends PureComponent {
|
||||
generateBreadcrumbs = (paths) => {
|
||||
return paths.map((item, key) => {
|
||||
const content = item && (
|
||||
<Fragment>
|
||||
{item.icon && (
|
||||
<span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>
|
||||
)}
|
||||
{item.name}
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
return (
|
||||
item && (
|
||||
<Breadcrumb.Item key={key}>
|
||||
{paths.length - 1 !== key ? (
|
||||
<Link to={item.route || '#'}>{content}</Link>
|
||||
) : (
|
||||
content
|
||||
)}
|
||||
</Breadcrumb.Item>
|
||||
)
|
||||
)
|
||||
})
|
||||
}
|
||||
render() {
|
||||
const { routeList, location } = this.props
|
||||
|
||||
// Find a route that matches the pathname.
|
||||
const currentRoute = routeList.find(
|
||||
(_) => _.route && pathToRegexp(_.route).exec(location.pathname)
|
||||
)
|
||||
|
||||
// Find the breadcrumb navigation of the current route match and all its ancestors.
|
||||
const paths = currentRoute
|
||||
? queryAncestors(routeList, currentRoute, 'breadcrumbParentId').reverse()
|
||||
: [
|
||||
routeList[0],
|
||||
{
|
||||
id: 404,
|
||||
name: t`Not Found`,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Breadcrumb className={styles.bread}>
|
||||
{this.generateBreadcrumbs(paths)}
|
||||
</Breadcrumb>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Bread.propTypes = {
|
||||
routeList: PropTypes.array,
|
||||
}
|
||||
|
||||
export default Bread
|
||||
@@ -1,16 +0,0 @@
|
||||
.bread {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:global {
|
||||
.ant-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.bread {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Menu, Layout, Avatar, Popover, Badge, List } from 'antd'
|
||||
import { Ellipsis } from 'components'
|
||||
import {
|
||||
BellOutlined,
|
||||
RightOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { getLocale, setLocale } from 'utils'
|
||||
import moment from 'moment'
|
||||
import classnames from 'classnames'
|
||||
import config from 'config'
|
||||
import styles from './Header.less'
|
||||
|
||||
const { SubMenu } = Menu
|
||||
|
||||
class Header extends PureComponent {
|
||||
handleClickMenu = (e) => {
|
||||
e.key === 'SignOut' && this.props.onSignOut()
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
fixed,
|
||||
avatar,
|
||||
username,
|
||||
collapsed,
|
||||
notifications,
|
||||
onCollapseChange,
|
||||
onAllNotificationsRead,
|
||||
} = this.props
|
||||
|
||||
const rightContent = [
|
||||
<Menu key="user" mode="horizontal" onClick={this.handleClickMenu}>
|
||||
<SubMenu
|
||||
title={
|
||||
<Fragment>
|
||||
<span style={{ color: '#999', marginRight: 4 }}>
|
||||
<Trans>Hi,</Trans>
|
||||
</span>
|
||||
<span>{username}</span>
|
||||
<Avatar style={{ marginLeft: 8 }} src={avatar} />
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
<Menu.Item key="SignOut">
|
||||
<Trans>Sign out</Trans>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>,
|
||||
]
|
||||
|
||||
if (config.i18n) {
|
||||
const { languages } = config.i18n
|
||||
const language = getLocale()
|
||||
const currentLanguage = languages.find((item) => item.key === language)
|
||||
|
||||
rightContent.unshift(
|
||||
<Menu
|
||||
key="language"
|
||||
selectedKeys={[currentLanguage.key]}
|
||||
onClick={(data) => {
|
||||
setLocale(data.key)
|
||||
}}
|
||||
mode="horizontal"
|
||||
>
|
||||
<SubMenu title={<Avatar size="small" src={currentLanguage.flag} />}>
|
||||
{languages.map((item) => (
|
||||
<Menu.Item key={item.key}>
|
||||
<Avatar
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
src={item.flag}
|
||||
/>
|
||||
{item.title}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
rightContent.unshift(
|
||||
<Popover
|
||||
placement="bottomRight"
|
||||
trigger="click"
|
||||
key="notifications"
|
||||
overlayClassName={styles.notificationPopover}
|
||||
getPopupContainer={() => document.querySelector('#primaryLayout')}
|
||||
content={
|
||||
<div className={styles.notification}>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={notifications}
|
||||
locale={{
|
||||
emptyText: <Trans>You have viewed all notifications.</Trans>,
|
||||
}}
|
||||
renderItem={(item) => (
|
||||
<List.Item className={styles.notificationItem}>
|
||||
<List.Item.Meta
|
||||
title={
|
||||
<Ellipsis tooltip lines={1}>
|
||||
{item.title}
|
||||
</Ellipsis>
|
||||
}
|
||||
description={moment(item.date).fromNow()}
|
||||
/>
|
||||
<RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
{notifications.length ? (
|
||||
<div
|
||||
onClick={onAllNotificationsRead}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
<Trans>Clear notifications</Trans>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Badge
|
||||
count={notifications.length}
|
||||
dot
|
||||
offset={[-10, 10]}
|
||||
className={styles.iconButton}
|
||||
>
|
||||
<BellOutlined className={styles.iconFont} />
|
||||
</Badge>
|
||||
</Popover>
|
||||
)
|
||||
|
||||
return (
|
||||
<Layout.Header
|
||||
className={classnames(styles.header, {
|
||||
[styles.fixed]: fixed,
|
||||
[styles.collapsed]: collapsed,
|
||||
})}
|
||||
id="layoutHeader"
|
||||
>
|
||||
<div
|
||||
className={styles.button}
|
||||
onClick={onCollapseChange.bind(this, !collapsed)}
|
||||
>
|
||||
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</div>
|
||||
<div className={styles.rightContainer}>{rightContent}</div>
|
||||
</Layout.Header>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
fixed: PropTypes.bool,
|
||||
user: PropTypes.object,
|
||||
menus: PropTypes.array,
|
||||
collapsed: PropTypes.bool,
|
||||
onSignOut: PropTypes.func,
|
||||
notifications: PropTypes.array,
|
||||
onCollapseChange: PropTypes.func,
|
||||
onAllNotificationsRead: PropTypes.func,
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -1,154 +0,0 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.header {
|
||||
padding: 0;
|
||||
box-shadow: @shadow-2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: ~'calc(100% - 256px)';
|
||||
z-index: 29;
|
||||
transition: width 0.2s;
|
||||
|
||||
&.collapsed {
|
||||
width: ~'calc(100% - 80px)';
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-menu-submenu-title {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal {
|
||||
line-height: 72px;
|
||||
|
||||
& > .ant-menu-submenu:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu {
|
||||
border-bottom: none;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-submenu {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-item,
|
||||
.ant-menu-horizontal > .ant-menu-submenu {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-item-active,
|
||||
.ant-menu-horizontal > .ant-menu-item-open,
|
||||
.ant-menu-horizontal > .ant-menu-item-selected,
|
||||
.ant-menu-horizontal > .ant-menu-item:hover,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-active,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-open,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-selected,
|
||||
.ant-menu-horizontal > .ant-menu-submenu:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rightContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: @transition-ease-in;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 24px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
|
||||
&:hover {
|
||||
.iconFont {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
& + .iconButton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.iconFont {
|
||||
color: #b2b0c7;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding: 24px 0;
|
||||
width: 320px;
|
||||
.notificationItem {
|
||||
transition: all 0.3s;
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
.clearButton {
|
||||
text-align: center;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
}
|
||||
}
|
||||
|
||||
.notificationPopover {
|
||||
:global {
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-list-item-content {
|
||||
flex: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Menu } from 'antd'
|
||||
import { NavLink, withRouter } from 'umi'
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import { arrayToTree, queryAncestors } from 'utils'
|
||||
import iconMap from 'utils/iconMap'
|
||||
import store from 'store'
|
||||
|
||||
const { SubMenu } = Menu
|
||||
|
||||
@withRouter
|
||||
class SiderMenu extends PureComponent {
|
||||
state = {
|
||||
openKeys: store.get('openKeys') || [],
|
||||
}
|
||||
|
||||
onOpenChange = (openKeys) => {
|
||||
const { menus } = this.props
|
||||
const rootSubmenuKeys = menus
|
||||
.filter((_) => !_.menuParentId)
|
||||
.map((_) => _.id)
|
||||
|
||||
const latestOpenKey = openKeys.find(
|
||||
(key) => this.state.openKeys.indexOf(key) === -1
|
||||
)
|
||||
|
||||
let newOpenKeys = openKeys
|
||||
if (rootSubmenuKeys.indexOf(latestOpenKey) !== -1) {
|
||||
newOpenKeys = latestOpenKey ? [latestOpenKey] : []
|
||||
}
|
||||
|
||||
this.setState({
|
||||
openKeys: newOpenKeys,
|
||||
})
|
||||
store.set('openKeys', newOpenKeys)
|
||||
}
|
||||
|
||||
generateMenus = (data) => {
|
||||
return data.map((item) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<SubMenu
|
||||
key={item.id}
|
||||
title={
|
||||
<Fragment>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
{this.generateMenus(item.children)}
|
||||
</SubMenu>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Menu.Item key={item.id}>
|
||||
<NavLink to={item.route || '#'}>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</NavLink>
|
||||
</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
collapsed,
|
||||
theme,
|
||||
menus,
|
||||
location,
|
||||
isMobile,
|
||||
onCollapseChange,
|
||||
} = this.props
|
||||
|
||||
// Generating tree-structured data for menu content.
|
||||
const menuTree = arrayToTree(menus, 'id', 'menuParentId')
|
||||
|
||||
// Find a menu that matches the pathname.
|
||||
const currentMenu = menus.find(
|
||||
(_) => _.route && pathToRegexp(_.route).exec(location.pathname)
|
||||
)
|
||||
|
||||
// Find the key that should be selected according to the current menu.
|
||||
const selectedKeys = currentMenu
|
||||
? queryAncestors(menus, currentMenu, 'menuParentId').map((_) => _.id)
|
||||
: []
|
||||
|
||||
const menuProps = collapsed
|
||||
? {}
|
||||
: {
|
||||
openKeys: this.state.openKeys,
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu
|
||||
mode="inline"
|
||||
theme={theme}
|
||||
onOpenChange={this.onOpenChange}
|
||||
selectedKeys={selectedKeys}
|
||||
onClick={
|
||||
isMobile
|
||||
? () => {
|
||||
onCollapseChange(true)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
{...menuProps}
|
||||
>
|
||||
{this.generateMenus(menuTree)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
SiderMenu.propTypes = {
|
||||
menus: PropTypes.array,
|
||||
theme: PropTypes.string,
|
||||
isMobile: PropTypes.bool,
|
||||
onCollapseChange: PropTypes.func,
|
||||
}
|
||||
|
||||
export default SiderMenu
|
||||
@@ -1,88 +0,0 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Switch, Layout } from 'antd'
|
||||
import { t } from '@lingui/macro'
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { BulbOutlined } from '@ant-design/icons'
|
||||
import ScrollBar from '../ScrollBar'
|
||||
import { config } from 'utils'
|
||||
import SiderMenu from './Menu'
|
||||
import styles from './Sider.less'
|
||||
|
||||
class Sider extends PureComponent {
|
||||
render() {
|
||||
const {
|
||||
menus,
|
||||
theme,
|
||||
isMobile,
|
||||
collapsed,
|
||||
onThemeChange,
|
||||
onCollapseChange,
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<Layout.Sider
|
||||
width={256}
|
||||
theme={theme}
|
||||
breakpoint="lg"
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onBreakpoint={!isMobile && onCollapseChange}
|
||||
className={styles.sider}
|
||||
>
|
||||
<div className={styles.brand}>
|
||||
<div className={styles.logo}>
|
||||
<img alt="logo" src={config.logoPath} />
|
||||
{!collapsed && <h1>{config.siteName}</h1>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.menuContainer}>
|
||||
<ScrollBar
|
||||
options={{
|
||||
// Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
|
||||
suppressScrollX: true,
|
||||
}}
|
||||
>
|
||||
<SiderMenu
|
||||
menus={menus}
|
||||
theme={theme}
|
||||
isMobile={isMobile}
|
||||
collapsed={collapsed}
|
||||
onCollapseChange={onCollapseChange}
|
||||
/>
|
||||
</ScrollBar>
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className={styles.switchTheme}>
|
||||
<span>
|
||||
<BulbOutlined />
|
||||
<Trans>Switch Theme</Trans>
|
||||
</span>
|
||||
<Switch
|
||||
onChange={onThemeChange.bind(
|
||||
this,
|
||||
theme === 'dark' ? 'light' : 'dark'
|
||||
)}
|
||||
defaultChecked={theme === 'dark'}
|
||||
checkedChildren={t`Dark`}
|
||||
unCheckedChildren={t`Light`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Layout.Sider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Sider.propTypes = {
|
||||
menus: PropTypes.array,
|
||||
theme: PropTypes.string,
|
||||
isMobile: PropTypes.bool,
|
||||
collapsed: PropTypes.bool,
|
||||
onThemeChange: PropTypes.func,
|
||||
onCollapseChange: PropTypes.func,
|
||||
}
|
||||
|
||||
export default Sider
|
||||
@@ -1,110 +0,0 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.sider {
|
||||
box-shadow: fade(@primary-color, 10%) 0 0 28px 0;
|
||||
z-index: 10;
|
||||
:global {
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
z-index: 1;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.2);
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
vertical-align: text-bottom;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
color: @primary-color;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
.text-gradient();
|
||||
|
||||
:local {
|
||||
animation: fadeRightIn 300ms @ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
height: ~'calc(100vh - 120px)';
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
padding: 24px 0;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-menu-inline {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switchTheme {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.anticon {
|
||||
min-width: 14px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeLeftIn {
|
||||
0% {
|
||||
transform: translateX(5px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import Header from './Header'
|
||||
import Menu from './Menu'
|
||||
import Bread from './Bread'
|
||||
import Sider from './Sider'
|
||||
|
||||
export { Header, Menu, Bread, Sider }
|
||||
@@ -1,33 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classnames from 'classnames'
|
||||
import Loader from '../Loader'
|
||||
import styles from './Page.less'
|
||||
|
||||
export default class Page extends Component {
|
||||
render() {
|
||||
const { className, children, loading = false, inner = false } = this.props
|
||||
const loadingStyle = {
|
||||
height: 'calc(100vh - 184px)',
|
||||
overflow: 'hidden',
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={classnames(className, {
|
||||
[styles.contentInner]: inner,
|
||||
})}
|
||||
style={loading ? loadingStyle : null}
|
||||
>
|
||||
{loading ? <Loader spinning /> : ''}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Page.propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
loading: PropTypes.bool,
|
||||
inner: PropTypes.bool,
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '~themes/vars.less';
|
||||
@import '~@/themes/vars.less';
|
||||
|
||||
.contentInner {
|
||||
background: #fff;
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import Loader from '../Loader'
|
||||
import styles from './index.less'
|
||||
|
||||
interface IPageProps {
|
||||
inner?: boolean
|
||||
loading?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Page: React.FC = (props: IPageProps) => {
|
||||
const { className, children, loading = false, inner = false } = props
|
||||
const loadingStyle = {
|
||||
height: 'calc(100vh - 184px)',
|
||||
overflow: 'hidden',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames(className, {
|
||||
[styles.contentInner]: inner,
|
||||
})}
|
||||
style={loading ? loadingStyle : null}
|
||||
>
|
||||
{loading ? <Loader spinning /> : ''}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Page",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Page.js"
|
||||
}
|
||||
@@ -2,6 +2,6 @@ import FilterItem from './FilterItem'
|
||||
import Loader from './Loader'
|
||||
import ScrollBar from './ScrollBar'
|
||||
import GlobalFooter from './GlobalFooter'
|
||||
import Ellipsis from './Ellipsis'
|
||||
import Page from './Page'
|
||||
|
||||
export { GlobalFooter, Ellipsis, FilterItem, Loader, ScrollBar }
|
||||
export { GlobalFooter, FilterItem, Loader, ScrollBar, Page }
|
||||
+19
-16
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
|
||||
import { Avatar, Button, Table } from 'antd'
|
||||
import { Link } from 'umi'
|
||||
import { useRequest } from '@/hooks'
|
||||
import { Page } from '@/components'
|
||||
import { queryUserList } from '@/services'
|
||||
import type {
|
||||
IUserItem,
|
||||
@@ -112,22 +113,24 @@ const UserPage: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.error}>
|
||||
<Table
|
||||
bordered
|
||||
loading={loading}
|
||||
dataSource={list}
|
||||
columns={columns}
|
||||
className={styles.table}
|
||||
scroll={{ x: 1200 }}
|
||||
rowKey={(record) => record.id}
|
||||
pagination={pagination}
|
||||
onChange={(page) => {
|
||||
setCurrent(page.current as number)
|
||||
setPageSize(page.pageSize as number)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Page inner>
|
||||
<div className={styles.error}>
|
||||
<Table
|
||||
bordered
|
||||
loading={loading}
|
||||
dataSource={list}
|
||||
columns={columns}
|
||||
className={styles.table}
|
||||
scroll={{ x: 1200 }}
|
||||
rowKey={(record) => record.id}
|
||||
pagination={pagination}
|
||||
onChange={(page) => {
|
||||
setCurrent(page.current as number)
|
||||
setPageSize(page.pageSize as number)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
const config = {
|
||||
siteName: 'AntD Admin',
|
||||
copyright: 'Ant Design Admin ©2020 zuiidea',
|
||||
logoPath: '/logo.svg',
|
||||
apiPrefix: '/api/v1',
|
||||
fixedHeader: true,
|
||||
|
||||
/* Layout configuration, specify which layout to use for route. */
|
||||
layouts: [
|
||||
{
|
||||
name: 'primary',
|
||||
include: [/.*/],
|
||||
exclude: [/(\/(en|zh))*\/login/],
|
||||
},
|
||||
],
|
||||
|
||||
/* I18n configuration, `languages` and `defaultLanguage` are required currently. */
|
||||
i18n: {
|
||||
/* Countrys flags: https://www.flaticon.com/packs/countrys-flags */
|
||||
languages: [
|
||||
{
|
||||
key: 'pt-br',
|
||||
title: 'Português',
|
||||
flag: '/portugal.svg',
|
||||
},
|
||||
{
|
||||
key: 'en',
|
||||
title: 'English',
|
||||
flag: '/america.svg',
|
||||
},
|
||||
{
|
||||
key: 'zh',
|
||||
title: '中文',
|
||||
flag: '/china.svg',
|
||||
},
|
||||
],
|
||||
defaultLanguage: 'en',
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
@@ -1,7 +0,0 @@
|
||||
export const ROLE_TYPE = {
|
||||
ADMIN: 'admin',
|
||||
DEFAULT: 'admin',
|
||||
DEVELOPER: 'developer',
|
||||
}
|
||||
|
||||
export const CANCEL_REQUEST_MESSAGE = 'cancel request'
|
||||
Reference in New Issue
Block a user