From da4abc2293dc019c568ccf545a22d2ad5a7c61a7 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Sun, 6 Jun 2021 16:27:47 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20adding=20page,=20removing=20some?= =?UTF-8?q?=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/Ellipsis/index.d.ts | 21 -- src/components/Ellipsis/index.js | 284 ------------------ src/components/Ellipsis/index.less | 24 -- src/components/Ellipsis/index.md | 17 -- src/components/Ellipsis/index.test.js | 13 - src/components/Layout/Bread.js | 68 ----- src/components/Layout/Bread.less | 16 - src/components/Layout/Header.js | 167 ---------- src/components/Layout/Header.less | 154 ---------- src/components/Layout/Menu.js | 124 -------- src/components/Layout/Sider.js | 88 ------ src/components/Layout/Sider.less | 110 ------- src/components/Layout/index.js | 6 - src/components/Page/Page.js | 33 -- src/components/Page/{Page.less => index.less} | 2 +- src/components/Page/index.tsx | 32 ++ src/components/Page/package.json | 6 - src/components/{index.js => index.ts} | 4 +- src/pages/user/index.tsx | 35 ++- src/utils/config.ts | 41 --- src/utils/constant.js | 7 - 22 files changed, 55 insertions(+), 1199 deletions(-) delete mode 100644 src/components/Ellipsis/index.d.ts delete mode 100644 src/components/Ellipsis/index.js delete mode 100644 src/components/Ellipsis/index.less delete mode 100644 src/components/Ellipsis/index.md delete mode 100644 src/components/Ellipsis/index.test.js delete mode 100644 src/components/Layout/Bread.js delete mode 100644 src/components/Layout/Bread.less delete mode 100644 src/components/Layout/Header.js delete mode 100644 src/components/Layout/Header.less delete mode 100644 src/components/Layout/Menu.js delete mode 100644 src/components/Layout/Sider.js delete mode 100644 src/components/Layout/Sider.less delete mode 100644 src/components/Layout/index.js delete mode 100644 src/components/Page/Page.js rename src/components/Page/{Page.less => index.less} (89%) create mode 100644 src/components/Page/index.tsx delete mode 100644 src/components/Page/package.json rename src/components/{index.js => index.ts} (59%) delete mode 100644 src/utils/config.ts delete mode 100644 src/utils/constant.js diff --git a/package.json b/package.json index 4d46bc0..0bf83e5 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/components/Ellipsis/index.d.ts b/src/components/Ellipsis/index.d.ts deleted file mode 100644 index f9332c2..0000000 --- a/src/components/Ellipsis/index.d.ts +++ /dev/null @@ -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 {} diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js deleted file mode 100644 index b387f05..0000000 --- a/src/components/Ellipsis/index.js +++ /dev/null @@ -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 {children} - } - 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 {text} - } - 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: ( - - {displayText} - {tail} - - ), - }) -} - -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 ( - - {children} - - ) - } - - // length - if (!lines) { - return ( - - ) - } - - 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 = ( -
- - {children} -
- ) - - return getTooltip({ - tooltip, - overlayStyle: TooltipOverlayStyle, - title: children, - children: node, - }) - } - - const childNode = ( - - {targetCount > 0 && text.substring(0, targetCount)} - {targetCount > 0 && targetCount < text.length && '...'} - - ) - - return ( -
-
- {getTooltip({ - tooltip, - overlayStyle: TooltipOverlayStyle, - title: text, - children: childNode, - })} -
- {children} -
-
- {text} -
-
-
- ) - } -} diff --git a/src/components/Ellipsis/index.less b/src/components/Ellipsis/index.less deleted file mode 100644 index 3c0360c..0000000 --- a/src/components/Ellipsis/index.less +++ /dev/null @@ -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; -} diff --git a/src/components/Ellipsis/index.md b/src/components/Ellipsis/index.md deleted file mode 100644 index 1875b17..0000000 --- a/src/components/Ellipsis/index.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Ellipsis -subtitle: 文本自动省略号 -cols: 1 -order: 10 ---- - -文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。 - -## API - -| 参数 | 说明 | 类型 | 默认值 | -| -------------------- | ------------------------------------------------ | ------- | ------ | -| tooltip | 移动到文本展示完整内容的提示 | boolean | - | -| length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - | -| lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` | -| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度 | boolean | - | diff --git a/src/components/Ellipsis/index.test.js b/src/components/Ellipsis/index.test.js deleted file mode 100644 index 445f074..0000000 --- a/src/components/Ellipsis/index.test.js +++ /dev/null @@ -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') - }) -}) diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js deleted file mode 100644 index a31e94e..0000000 --- a/src/components/Layout/Bread.js +++ /dev/null @@ -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 && ( - - {item.icon && ( - {iconMap[item.icon]} - )} - {item.name} - - ) - - return ( - item && ( - - {paths.length - 1 !== key ? ( - {content} - ) : ( - content - )} - - ) - ) - }) - } - 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 ( - - {this.generateBreadcrumbs(paths)} - - ) - } -} - -Bread.propTypes = { - routeList: PropTypes.array, -} - -export default Bread diff --git a/src/components/Layout/Bread.less b/src/components/Layout/Bread.less deleted file mode 100644 index d30a5f1..0000000 --- a/src/components/Layout/Bread.less +++ /dev/null @@ -1,16 +0,0 @@ -.bread { - margin-bottom: 24px; - - :global { - .ant-breadcrumb { - display: flex; - align-items: center; - } - } -} - -@media (max-width: 767px) { - .bread { - margin-bottom: 12px; - } -} diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js deleted file mode 100644 index 1538655..0000000 --- a/src/components/Layout/Header.js +++ /dev/null @@ -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 = [ - - - - Hi, - - {username} - - - } - > - - Sign out - - - , - ] - - if (config.i18n) { - const { languages } = config.i18n - const language = getLocale() - const currentLanguage = languages.find((item) => item.key === language) - - rightContent.unshift( - { - setLocale(data.key) - }} - mode="horizontal" - > - }> - {languages.map((item) => ( - - - {item.title} - - ))} - - - ) - } - - rightContent.unshift( - document.querySelector('#primaryLayout')} - content={ -
- You have viewed all notifications., - }} - renderItem={(item) => ( - - - {item.title} - - } - description={moment(item.date).fromNow()} - /> - - - )} - /> - {notifications.length ? ( -
- Clear notifications -
- ) : null} -
- } - > - - - - - ) - - return ( - -
- {collapsed ? : } -
-
{rightContent}
- - ) - } -} - -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 diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less deleted file mode 100644 index 1709b6d..0000000 --- a/src/components/Layout/Header.less +++ /dev/null @@ -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; - } -} diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js deleted file mode 100644 index 20f0577..0000000 --- a/src/components/Layout/Menu.js +++ /dev/null @@ -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 ( - - {item.icon && iconMap[item.icon]} - {item.name} - - } - > - {this.generateMenus(item.children)} - - ) - } - return ( - - - {item.icon && iconMap[item.icon]} - {item.name} - - - ) - }) - } - - 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 ( - { - onCollapseChange(true) - } - : undefined - } - {...menuProps} - > - {this.generateMenus(menuTree)} - - ) - } -} - -SiderMenu.propTypes = { - menus: PropTypes.array, - theme: PropTypes.string, - isMobile: PropTypes.bool, - onCollapseChange: PropTypes.func, -} - -export default SiderMenu diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js deleted file mode 100644 index 18230a2..0000000 --- a/src/components/Layout/Sider.js +++ /dev/null @@ -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 ( - -
-
- logo - {!collapsed &&

{config.siteName}

} -
-
- -
- - - -
- {!collapsed && ( -
- - - Switch Theme - - -
- )} - - ) - } -} - -Sider.propTypes = { - menus: PropTypes.array, - theme: PropTypes.string, - isMobile: PropTypes.bool, - collapsed: PropTypes.bool, - onThemeChange: PropTypes.func, - onCollapseChange: PropTypes.func, -} - -export default Sider diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less deleted file mode 100644 index 9f41821..0000000 --- a/src/components/Layout/Sider.less +++ /dev/null @@ -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; - } -} diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js deleted file mode 100644 index 3ad0894..0000000 --- a/src/components/Layout/index.js +++ /dev/null @@ -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 } diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js deleted file mode 100644 index 532bf31..0000000 --- a/src/components/Page/Page.js +++ /dev/null @@ -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 ( -
- {loading ? : ''} - {children} -
- ) - } -} - -Page.propTypes = { - className: PropTypes.string, - children: PropTypes.node, - loading: PropTypes.bool, - inner: PropTypes.bool, -} diff --git a/src/components/Page/Page.less b/src/components/Page/index.less similarity index 89% rename from src/components/Page/Page.less rename to src/components/Page/index.less index e180131..f259680 100644 --- a/src/components/Page/Page.less +++ b/src/components/Page/index.less @@ -1,4 +1,4 @@ -@import '~themes/vars.less'; +@import '~@/themes/vars.less'; .contentInner { background: #fff; diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx new file mode 100644 index 0000000..d277de8 --- /dev/null +++ b/src/components/Page/index.tsx @@ -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 ( +
+ {loading ? : ''} + {children} +
+ ) +} + +export default Page diff --git a/src/components/Page/package.json b/src/components/Page/package.json deleted file mode 100644 index a3811bd..0000000 --- a/src/components/Page/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Page", - "version": "0.0.0", - "private": true, - "main": "./Page.js" -} diff --git a/src/components/index.js b/src/components/index.ts similarity index 59% rename from src/components/index.js rename to src/components/index.ts index e948cb9..5eec03f 100644 --- a/src/components/index.js +++ b/src/components/index.ts @@ -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 } diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index f4abb15..f49a335 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -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 ( -
- record.id} - pagination={pagination} - onChange={(page) => { - setCurrent(page.current as number) - setPageSize(page.pageSize as number) - }} - /> - + +
+
record.id} + pagination={pagination} + onChange={(page) => { + setCurrent(page.current as number) + setPageSize(page.pageSize as number) + }} + /> + + ) } diff --git a/src/utils/config.ts b/src/utils/config.ts deleted file mode 100644 index af2583a..0000000 --- a/src/utils/config.ts +++ /dev/null @@ -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 diff --git a/src/utils/constant.js b/src/utils/constant.js deleted file mode 100644 index 3ca2222..0000000 --- a/src/utils/constant.js +++ /dev/null @@ -1,7 +0,0 @@ -export const ROLE_TYPE = { - ADMIN: 'admin', - DEFAULT: 'admin', - DEVELOPER: 'developer', -} - -export const CANCEL_REQUEST_MESSAGE = 'cancel request'